diff --git a/src/network/CrossPointWebServer.cpp b/src/network/CrossPointWebServer.cpp
index a135c9f0..70aaeec3 100644
--- a/src/network/CrossPointWebServer.cpp
+++ b/src/network/CrossPointWebServer.cpp
@@ -1,6 +1,7 @@
 #include "CrossPointWebServer.h"
 
 #include <ArduinoJson.h>
+#include "util/BookCacheManager.h"
 #include <Epub.h>
 #include <FsHelpers.h>
 #include <SDCardManager.h>
@@ -112,6 +113,10 @@ void CrossPointWebServer::begin() {
   // Delete file/folder endpoint
   server->on("/delete", HTTP_POST, [this] { handleDelete(); });
 
+  // Move and Rename endpoints (stubs)
+  server->on("/move", HTTP_POST, [this] { handleMove(); });
+  server->on("/rename", HTTP_POST, [this] { handleRename(); });
+
   server->onNotFound([this] { handleNotFound(); });
   Serial.printf("[%lu] [WEB] [MEM] Free heap after route setup: %d bytes\n", millis(), ESP.getFreeHeap());
 
@@ -787,6 +792,91 @@ void CrossPointWebServer::handleDelete() const {
   }
 }
 
+void CrossPointWebServer::handleMove() const {
+  if (!server->hasArg("oldPath") || !server->hasArg("newPath")) {
+    server->send(400, "text/plain", "Missing oldPath or newPath");
+    return;
+  }
+
+  String oldPath = server->arg("oldPath");
+  String newPath = server->arg("newPath");
+
+  if (oldPath.isEmpty() || newPath.isEmpty() || oldPath == "/" || newPath == "/") {
+    server->send(400, "text/plain", "Invalid paths");
+    return;
+  }
+
+  if (!oldPath.startsWith("/")) oldPath = "/" + oldPath;
+  if (!newPath.startsWith("/")) newPath = "/" + newPath;
+
+  if (!SdMan.exists(oldPath.c_str())) {
+    server->send(404, "text/plain", "Source not found");
+    return;
+  }
+
+  if (SdMan.exists(newPath.c_str())) {
+    server->send(400, "text/plain", "Destination already exists");
+    return;
+  }
+
+  // Migrate cache first (or parts of it if it's a directory)
+  BookCacheManager::migrateCache(oldPath, newPath);
+
+  if (SdMan.rename(oldPath.c_str(), newPath.c_str())) {
+    Serial.printf("[%lu] [WEB] Moved %s to %s\n", millis(), oldPath.c_str(), newPath.c_str());
+    server->send(200, "text/plain", "Moved successfully");
+  } else {
+    server->send(500, "text/plain", "Move failed");
+  }
+}
+
+void CrossPointWebServer::handleRename() const {
+  if (!server->hasArg("oldPath") || !server->hasArg("newPath")) {
+    server->send(400, "text/plain", "Missing oldPath or newPath");
+    return;
+  }
+
+  String oldPath = server->arg("oldPath");
+  String newPath = server->arg("newPath");
+
+  if (oldPath.isEmpty() || newPath.isEmpty() || oldPath == "/" || newPath == "/") {
+    server->send(400, "text/plain", "Invalid paths");
+    return;
+  }
+
+  if (!oldPath.startsWith("/")) oldPath = "/" + oldPath;
+  if (!newPath.startsWith("/")) newPath = "/" + newPath;
+
+  // Security check: prevent renaming system files
+  if (oldPath.substring(oldPath.lastIndexOf('/') + 1).startsWith(".") || 
+      newPath.substring(newPath.lastIndexOf('/') + 1).startsWith(".")) {
+    server->send(403, "text/plain", "Cannot rename system files");
+    return;
+  }
+
+  if (!SdMan.exists(oldPath.c_str())) {
+    server->send(404, "text/plain", "Source not found");
+    return;
+  }
+
+  if (SdMan.exists(newPath.c_str())) {
+    server->send(400, "text/plain", "Destination already exists");
+    return;
+  }
+
+  // Migrate cache
+  BookCacheManager::migrateCache(oldPath, newPath);
+
+  if (SdMan.rename(oldPath.c_str(), newPath.c_str())) {
+    Serial.printf("[%lu] [WEB] Renamed %s to %s\n", millis(), oldPath.c_str(), newPath.c_str());
+    server->send(200, "text/plain", "Renamed successfully");
+  } else {
+    server->send(500, "text/plain", "Rename failed");
+  }
+}
+
+
+
 // WebSocket callback trampoline
 void CrossPointWebServer::wsEventCallback(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
   if (wsInstance) {
diff --git a/src/network/CrossPointWebServer.h b/src/network/CrossPointWebServer.h
index 36030292..a2a5279a 100644
--- a/src/network/CrossPointWebServer.h
+++ b/src/network/CrossPointWebServer.h
@@ -78,4 +78,7 @@ class CrossPointWebServer {
   void handleUploadPost() const;
   void handleCreateFolder() const;
   void handleDelete() const;
+  void handleMove() const;
+  void handleRename() const;
+
 };
diff --git a/src/network/html/FilesPage.html b/src/network/html/FilesPage.html
index bfdbe3cc..41715a3a 100644
--- a/src/network/html/FilesPage.html
+++ b/src/network/html/FilesPage.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -7,21 +8,24 @@
   <style>
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Oxygen, Ubuntu, sans-serif;
+        Oxygen, Ubuntu, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
       background-color: #f5f5f5;
       color: #333;
     }
+
     h1 {
       color: #2c3e50;
       margin-bottom: 5px;
     }
+
     h2 {
       color: #34495e;
       margin-top: 0;
     }
+
     .card {
       background: white;
       border-radius: 8px;
@@ -29,6 +33,7 @@
       margin: 15px 0;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
+
     .page-header {
       display: flex;
       justify-content: space-between;
@@ -39,34 +44,42 @@
       padding-bottom: 15px;
       border-bottom: 2px solid #3498db;
     }
+
     .page-header-left {
       display: flex;
       align-items: baseline;
       gap: 12px;
       flex-wrap: wrap;
     }
+
     .breadcrumb-inline {
       color: #7f8c8d;
       font-size: 1.1em;
     }
+
     .breadcrumb-inline a {
       color: #3498db;
       text-decoration: none;
     }
+
     .breadcrumb-inline a:hover {
       text-decoration: underline;
     }
+
     .breadcrumb-inline .sep {
       margin: 0 6px;
       color: #bdc3c7;
     }
+
     .breadcrumb-inline .current {
       color: #2c3e50;
       font-weight: 500;
     }
+
     .nav-links {
       margin: 20px 0;
     }
+
     .nav-links a {
       display: inline-block;
       padding: 10px 20px;
@@ -76,14 +89,17 @@
       border-radius: 4px;
       margin-right: 10px;
     }
+
     .nav-links a:hover {
       background-color: #2980b9;
     }
+
     /* Action buttons */
     .action-buttons {
       display: flex;
       gap: 10px;
     }
+
     .action-btn {
       color: white;
       padding: 10px 16px;
@@ -96,18 +112,23 @@
       align-items: center;
       gap: 6px;
     }
+
     .upload-action-btn {
       background-color: #27ae60;
     }
+
     .upload-action-btn:hover {
       background-color: #219a52;
     }
+
     .folder-action-btn {
       background-color: #f39c12;
     }
+
     .folder-action-btn:hover {
       background-color: #d68910;
     }
+
     /* Upload modal */
     .modal-overlay {
       display: none;
@@ -121,9 +142,11 @@
       justify-content: center;
       align-items: center;
     }
+
     .modal-overlay.open {
       display: flex;
     }
+
     .modal {
       background: white;
       border-radius: 8px;
@@ -132,10 +155,12 @@
       width: 90%;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     }
+
     .modal h3 {
       margin: 0 0 15px 0;
       color: #2c3e50;
     }
+
     .modal-close {
       float: right;
       background: none;
@@ -145,39 +170,49 @@
       color: #7f8c8d;
       line-height: 1;
     }
+
     .modal-close:hover {
       color: #2c3e50;
     }
+
     .file-table {
       width: 100%;
       border-collapse: collapse;
     }
+
     .file-table th,
     .file-table td {
       padding: 12px;
       text-align: left;
       border-bottom: 1px solid #eee;
     }
+
     .file-table th {
       background-color: #f8f9fa;
       font-weight: 600;
       color: #7f8c8d;
     }
+
     .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;
     }
+
     .epub-badge {
       display: inline-block;
       padding: 2px 8px;
@@ -187,6 +222,7 @@
       font-size: 0.75em;
       margin-left: 8px;
     }
+
     .folder-badge {
       display: inline-block;
       padding: 2px 8px;
@@ -196,25 +232,31 @@
       font-size: 0.75em;
       margin-left: 8px;
     }
+
     .file-icon {
       margin-right: 8px;
     }
+
     .folder-link {
       color: #2c3e50;
       text-decoration: none;
       cursor: pointer;
     }
+
     .folder-link:hover {
       color: #3498db;
       text-decoration: underline;
     }
+
     .upload-form {
       margin-top: 10px;
     }
+
     .upload-form input[type="file"] {
       margin: 10px 0;
       width: 100%;
     }
+
     .upload-btn {
       background-color: #27ae60;
       color: white;
@@ -225,59 +267,71 @@
       font-size: 1em;
       width: 100%;
     }
+
     .upload-btn:hover {
       background-color: #219a52;
     }
+
     .upload-btn:disabled {
       background-color: #95a5a6;
       cursor: not-allowed;
     }
+
     .file-info {
       color: #7f8c8d;
       font-size: 0.85em;
       margin: 8px 0;
     }
+
     .no-files {
       text-align: center;
       color: #95a5a6;
       padding: 40px;
       font-style: italic;
     }
+
     .message {
       padding: 15px;
       border-radius: 4px;
       margin: 15px 0;
     }
+
     .message.success {
       background-color: #d4edda;
       color: #155724;
       border: 1px solid #c3e6cb;
     }
+
     .message.error {
       background-color: #f8d7da;
       color: #721c24;
       border: 1px solid #f5c6cb;
     }
+
     .contents-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 12px;
     }
+
     .contents-title {
       font-size: 1.1em;
       font-weight: 600;
       color: #34495e;
       margin: 0;
     }
+
     .summary-inline {
       color: #7f8c8d;
       font-size: 0.9em;
     }
+
     #progress-container {
       display: none;
       margin-top: 10px;
     }
+
     #progress-bar {
       width: 100%;
       height: 20px;
@@ -285,21 +339,25 @@
       border-radius: 10px;
       overflow: hidden;
     }
+
     #progress-fill {
       height: 100%;
       background-color: #27ae60;
       width: 0%;
       transition: width 0.3s;
     }
+
     #progress-text {
       text-align: center;
       margin-top: 5px;
       font-size: 0.9em;
       color: #7f8c8d;
     }
+
     .folder-form {
       margin-top: 10px;
     }
+
     .folder-input {
       width: 100%;
       padding: 10px;
@@ -309,6 +367,7 @@
       margin-bottom: 10px;
       box-sizing: border-box;
     }
+
     .folder-btn {
       background-color: #f39c12;
       color: white;
@@ -319,28 +378,80 @@
       font-size: 1em;
       width: 100%;
     }
+
     .folder-btn:hover {
       background-color: #d68910;
     }
-    /* Delete button styles */
-    .delete-btn {
-      background: none;
-      border: none;
-      cursor: pointer;
-      font-size: 1.1em;
-      padding: 4px 8px;
-      border-radius: 4px;
-      color: #95a5a6;
-      transition: all 0.15s;
-    }
-    .delete-btn:hover {
-      background-color: #fee;
-      color: #e74c3c;
-    }
+
+    /* Kebab menu (three dots) styles */
     .actions-col {
       width: 60px;
       text-align: center;
+      position: relative;
     }
+
+    .kebab-menu-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 1.3em;
+      padding: 4px 8px;
+      border-radius: 4px;
+      color: #7f8c8d;
+      transition: all 0.15s;
+      line-height: 1;
+    }
+
+    .kebab-menu-btn:hover {
+      background-color: #f0f0f0;
+      color: #2c3e50;
+    }
+
+    .kebab-dropdown {
+      display: none;
+      position: absolute;
+      right: 10px;
+      top: 100%;
+      background: white;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+      min-width: 140px;
+      overflow: hidden;
+    }
+
+    .kebab-dropdown.show {
+      display: block;
+    }
+
+    .kebab-dropdown-item {
+      padding: 10px 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #2c3e50;
+      font-size: 0.95em;
+      border: none;
+      background: none;
+      width: 100%;
+      text-align: left;
+      transition: background-color 0.15s;
+    }
+
+    .kebab-dropdown-item:hover {
+      background-color: #f8f9fa;
+    }
+
+    .kebab-dropdown-item.delete {
+      color: #e74c3c;
+    }
+
+    .kebab-dropdown-item.delete:hover {
+      background-color: #fee;
+    }
+
     /* Failed uploads banner */
     .failed-uploads-banner {
       background-color: #fff3cd;
@@ -350,20 +461,24 @@
       margin-bottom: 15px;
       display: none;
     }
+
     .failed-uploads-banner.show {
       display: block;
     }
+
     .failed-uploads-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 10px;
     }
+
     .failed-uploads-title {
       font-weight: 600;
       color: #856404;
       margin: 0;
     }
+
     .dismiss-btn {
       background: none;
       border: none;
@@ -373,9 +488,11 @@
       padding: 0;
       line-height: 1;
     }
+
     .dismiss-btn:hover {
       color: #533f03;
     }
+
     .failed-file-item {
       display: flex;
       justify-content: space-between;
@@ -383,21 +500,26 @@
       padding: 8px 0;
       border-bottom: 1px solid #ffe69c;
     }
+
     .failed-file-item:last-child {
       border-bottom: none;
     }
+
     .failed-file-info {
       flex: 1;
     }
+
     .failed-file-name {
       font-weight: 500;
       color: #856404;
     }
+
     .failed-file-error {
       font-size: 0.85em;
       color: #856404;
       opacity: 0.8;
     }
+
     .retry-btn {
       background-color: #ffc107;
       color: #533f03;
@@ -408,9 +530,11 @@
       font-size: 0.9em;
       font-weight: 600;
     }
+
     .retry-btn:hover {
       background-color: #e0a800;
     }
+
     .retry-all-btn {
       background-color: #ffc107;
       color: #533f03;
@@ -422,20 +546,24 @@
       font-weight: 600;
       margin-top: 10px;
     }
+
     .retry-all-btn:hover {
       background-color: #e0a800;
     }
+
     /* Delete modal */
     .delete-warning {
       color: #e74c3c;
       font-weight: 600;
       margin: 10px 0;
     }
+
     .delete-item-name {
       font-weight: 600;
       color: #2c3e50;
       word-break: break-all;
     }
+
     .delete-btn-confirm {
       background-color: #e74c3c;
       color: white;
@@ -446,9 +574,11 @@
       font-size: 1em;
       width: 100%;
     }
+
     .delete-btn-confirm:hover {
       background-color: #c0392b;
     }
+
     .delete-btn-cancel {
       background-color: #95a5a6;
       color: white;
@@ -460,15 +590,81 @@
       width: 100%;
       margin-top: 10px;
     }
+
     .delete-btn-cancel:hover {
       background-color: #7f8c8d;
     }
+
+    /* Rename modal */
+    .rename-input {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1em;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+    }
+
+    .rename-btn {
+      background-color: #3498db;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+    }
+
+    .rename-btn:hover {
+      background-color: #2980b9;
+    }
+
+    /* Move modal */
+    .move-current-path {
+      background-color: #f8f9fa;
+      padding: 10px;
+      border-radius: 4px;
+      margin: 10px 0;
+      font-family: monospace;
+      font-size: 0.9em;
+      color: #495057;
+    }
+
+    .move-new-path {
+      width: 100%;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 1em;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+      font-family: monospace;
+    }
+
+    .move-btn {
+      background-color: #9b59b6;
+      color: white;
+      padding: 10px 20px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      width: 100%;
+    }
+
+    .move-btn:hover {
+      background-color: #8e44ad;
+    }
+
     .loader-container {
       display: flex;
       justify-content: center;
       align-items: center;
       margin: 20px 0;
     }
+
     .loader {
       width: 48px;
       height: 48px;
@@ -479,91 +675,119 @@
       box-sizing: border-box;
       animation: rotation 1s linear infinite;
     }
+
     @keyframes rotation {
       from {
         transform: rotate(0deg);
       }
+
       to {
         transform: rotate(360deg);
       }
     }
+
     /* Mobile responsive styles */
     @media (max-width: 600px) {
       body {
         padding: 10px;
         font-size: 14px;
       }
+
       .card {
         padding: 12px;
         margin: 10px 0;
       }
+
       .page-header {
         gap: 10px;
         margin-bottom: 12px;
         padding-bottom: 10px;
       }
+
       .page-header-left {
         gap: 8px;
       }
+
       h1 {
         font-size: 1.3em;
       }
+
       .breadcrumb-inline {
         font-size: 0.95em;
       }
+
       .nav-links a {
         padding: 8px 12px;
         margin-right: 6px;
         font-size: 0.9em;
       }
+
       .action-buttons {
         gap: 6px;
       }
+
       .action-btn {
         padding: 8px 10px;
         font-size: 0.85em;
       }
+
       .file-table th,
       .file-table td {
         padding: 8px 6px;
         font-size: 0.9em;
       }
+
       .file-table th {
         font-size: 0.85em;
       }
+
       .file-icon {
         margin-right: 4px;
       }
+
       .epub-badge,
       .folder-badge {
         padding: 2px 5px;
         font-size: 0.65em;
         margin-left: 4px;
       }
+
       .contents-header {
         margin-bottom: 8px;
         flex-wrap: wrap;
         gap: 4px;
       }
+
       .contents-title {
         font-size: 1em;
       }
+
       .summary-inline {
         font-size: 0.8em;
       }
+
       .modal {
         padding: 15px;
       }
+
       .modal h3 {
         font-size: 1.1em;
       }
+
       .actions-col {
         width: 40px;
       }
-      .delete-btn {
-        font-size: 1em;
+
+      .kebab-menu-btn {
+        font-size: 1.1em;
         padding: 2px 4px;
       }
+
+      .kebab-dropdown {
+        right: 5px;
+        min-width: 120px;
+      }
+
       .no-files {
         padding: 20px;
         font-size: 0.9em;
@@ -571,651 +795,845 @@
     }
   </style>
 </head>
+
 <body>
-<div class="nav-links">
-  <a href="/">Home</a>
-  <a href="/files">File Manager</a>
-</div>
-
-<div class="page-header">
-  <div class="page-header-left">
-    <h1>📁 File Manager</h1>
-    <div class="breadcrumb-inline" id="directory-breadcrumbs"></div>
+  <div class="nav-links">
+    <a href="/">Home</a>
+    <a href="/files">File Manager</a>
   </div>
 
-  <div class="action-buttons">
-    <button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
-    <button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
-  </div>
-</div>
+  <div class="page-header">
+    <div class="page-header-left">
+      <h1>📁 File Manager</h1>
+      <div class="breadcrumb-inline" id="directory-breadcrumbs"></div>
+    </div>
 
-<!-- Failed Uploads Banner -->
-<div class="failed-uploads-banner" id="failedUploadsBanner">
-  <div class="failed-uploads-header">
-    <h3 class="failed-uploads-title">⚠️ Some files failed to upload</h3>
-    <button class="dismiss-btn" onclick="dismissFailedUploads()" title="Dismiss">&times;</button>
-  </div>
-  <div id="failedFilesList"></div>
-  <button class="retry-all-btn" onclick="retryAllFailedUploads()">Retry All Failed Uploads</button>
-</div>
-
-<div class="card">
-  <div class="contents-header">
-    <h2 class="contents-title">Contents</h2>
-    <span class="summary-inline" id="folder-summary"></span>
-  </div>
-
-  <div id="file-table">
-    <div class="loader-container">
-      <span class="loader"></span>
+    <div class="action-buttons">
+      <button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
+      <button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
     </div>
   </div>
-</div>
 
-<div class="card">
-  <p style="text-align: center; color: #95a5a6; margin: 0;">
-    CrossPoint E-Reader • Open Source
-  </p>
-</div>
+  <!-- Failed Uploads Banner -->
+  <div class="failed-uploads-banner" id="failedUploadsBanner">
+    <div class="failed-uploads-header">
+      <h3 class="failed-uploads-title">⚠️ Some files failed to upload</h3>
+      <button class="dismiss-btn" onclick="dismissFailedUploads()" title="Dismiss">&times;</button>
+    </div>
+    <div id="failedFilesList"></div>
+    <button class="retry-all-btn" onclick="retryAllFailedUploads()">Retry All Failed Uploads</button>
+  </div>
 
-<!-- Upload Modal -->
-<div class="modal-overlay" id="uploadModal">
-  <div class="modal">
-    <button class="modal-close" onclick="closeUploadModal()">&times;</button>
-    <h3>📤 Upload file</h3>
-    <div class="upload-form">
-      <p class="file-info">Select a file to upload to <strong id="uploadPathDisplay"></strong></p>
-      <input type="file" id="fileInput" onchange="validateFile()" multiple>
-      <button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
-      <div id="progress-container">
-        <div id="progress-bar"><div id="progress-fill"></div></div>
-        <div id="progress-text"></div>
+  <div class="card">
+    <div class="contents-header">
+      <h2 class="contents-title">Contents</h2>
+      <span class="summary-inline" id="folder-summary"></span>
+    </div>
+
+    <div id="file-table">
+      <div class="loader-container">
+        <span class="loader"></span>
       </div>
     </div>
   </div>
-</div>
 
-<!-- New Folder Modal -->
-<div class="modal-overlay" id="folderModal">
-  <div class="modal">
-    <button class="modal-close" onclick="closeFolderModal()">&times;</button>
-    <h3>📁 New Folder</h3>
-    <div class="folder-form">
-      <p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
-      <input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
-      <button class="folder-btn" onclick="createFolder()">Create Folder</button>
+  <div class="card">
+    <p style="text-align: center; color: #95a5a6; margin: 0;">
+      CrossPoint E-Reader • Open Source
+    </p>
+  </div>
+
+  <!-- Upload Modal -->
+  <div class="modal-overlay" id="uploadModal">
+    <div class="modal">
+      <button class="modal-close" onclick="closeUploadModal()">&times;</button>
+      <h3>📤 Upload file</h3>
+      <div class="upload-form">
+        <p class="file-info">Select a file to upload to <strong id="uploadPathDisplay"></strong></p>
+        <input type="file" id="fileInput" onchange="validateFile()" multiple>
+        <button id="uploadBtn" class="upload-btn" onclick="uploadFile()" disabled>Upload</button>
+        <div id="progress-container">
+          <div id="progress-bar">
+            <div id="progress-fill"></div>
+          </div>
+          <div id="progress-text"></div>
+        </div>
+      </div>
     </div>
   </div>
-</div>
 
-<!-- Delete Confirmation Modal -->
-<div class="modal-overlay" id="deleteModal">
-  <div class="modal">
-    <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
-    <h3>🗑️ Delete Item</h3>
-    <div class="folder-form">
-      <p class="delete-warning">⚠️ This action cannot be undone!</p>
-      <p class="file-info">Are you sure you want to delete:</p>
-      <p class="delete-item-name" id="deleteItemName"></p>
-      <input type="hidden" id="deleteItemPath">
-      <input type="hidden" id="deleteItemType">
-      <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
-      <button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
+  <!-- New Folder Modal -->
+  <div class="modal-overlay" id="folderModal">
+    <div class="modal">
+      <button class="modal-close" onclick="closeFolderModal()">&times;</button>
+      <h3>📁 New Folder</h3>
+      <div class="folder-form">
+        <p class="file-info">Create a new folder in <strong id="folderPathDisplay"></strong></p>
+        <input type="text" id="folderName" class="folder-input" placeholder="Folder name...">
+        <button class="folder-btn" onclick="createFolder()">Create Folder</button>
+      </div>
     </div>
   </div>
-</div>
 
-<script>
-  // get current path from query parameter
-  const currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/');
+  <!-- Rename Modal -->
+  <div class="modal-overlay" id="renameModal">
+    <div class="modal">
+      <button class="modal-close" onclick="closeRenameModal()">&times;</button>
+      <h3>✏️ Rename</h3>
+      <div class="folder-form">
+        <p class="file-info">Current name: <strong id="renameCurrentName"></strong></p>
+        <input type="text" id="renameNewName" class="rename-input" placeholder="New name...">
+        <input type="hidden" id="renameItemPath">
+        <input type="hidden" id="renameItemType">
+        <button class="rename-btn" onclick="confirmRename()">Rename</button>
+        <button class="delete-btn-cancel" onclick="closeRenameModal()">Cancel</button>
+      </div>
+    </div>
+  </div>
 
-  function escapeHtml(unsafe) {
-    return unsafe
-      .replaceAll("&", "&amp;")
-      .replaceAll("<", "&lt;")
-      .replaceAll(">", "&gt;")
-      .replaceAll('"', "&quot;")
-      .replaceAll("'", "&#039;");
-  }
+  <!-- Move Modal -->
+  <div class="modal-overlay" id="moveModal">
+    <div class="modal">
+      <button class="modal-close" onclick="closeMoveModal()">&times;</button>
+      <h3>📦 Move</h3>
+      <div class="folder-form">
+        <p class="file-info">Moving: <strong id="moveItemName"></strong></p>
+        <p class="file-info">Current path:</p>
+        <div class="move-current-path" id="moveCurrentPath"></div>
+        <p class="file-info">New path (include filename):</p>
+        <input type="text" id="moveNewPath" class="move-new-path" placeholder="/new/path/filename.ext">
+        <input type="hidden" id="moveItemPath">
+        <input type="hidden" id="moveItemType">
+        <button class="move-btn" onclick="confirmMove()">Move</button>
+        <button class="delete-btn-cancel" onclick="closeMoveModal()">Cancel</button>
+      </div>
+    </div>
+  </div>
 
-  function formatFileSize(bytes) {
-    if (bytes === 0) return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)).toLocaleString() + ' ' + sizes[i];
-  }
+  <!-- Delete Confirmation Modal -->
+  <div class="modal-overlay" id="deleteModal">
+    <div class="modal">
+      <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
+      <h3>🗑️ Delete Item</h3>
+      <div class="folder-form">
+        <p class="delete-warning">⚠️ This action cannot be undone!</p>
+        <p class="file-info">Are you sure you want to delete:</p>
+        <p class="delete-item-name" id="deleteItemName"></p>
+        <input type="hidden" id="deleteItemPath">
+        <input type="hidden" id="deleteItemType">
+        <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
+        <button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
+      </div>
+    </div>
+  </div>
 
-  async function hydrate() {
-    // Close modals when clicking overlay
-    document.querySelectorAll('.modal-overlay').forEach(function(overlay) {
-      overlay.addEventListener('click', function(e) {
-        if (e.target === overlay) {
-          overlay.classList.remove('open');
-        }
-      });
-    });
+  <script>
+    // get current path from query parameter
+    const currentPath = decodeURIComponent(new URLSearchParams(window.location.search).get('path') || '/');
 
-    const breadcrumbs = document.getElementById('directory-breadcrumbs');
-    const fileTable = document.getElementById('file-table');
-
-    let breadcrumbContent = '<span class="sep">/</span>';
-    if (currentPath === '/') {
-      breadcrumbContent += '<span class="current">🏠</span>';
-    } else {
-      breadcrumbContent += '<a href="/files">🏠</a>';
-      const pathSegments = currentPath.split('/');
-      pathSegments.slice(1, pathSegments.length - 1).forEach(function(segment, index) {
-        breadcrumbContent += '<span class="sep">/</span><a href="/files?path=' + encodeURIComponent(pathSegments.slice(0, index + 2).join('/')) + '">' + escapeHtml(segment) + '</a>';
-      });
-      breadcrumbContent += '<span class="sep">/</span>';
-      breadcrumbContent += '<span class="current">' + escapeHtml(pathSegments[pathSegments.length - 1]) + '</span>';
+    function escapeHtml(unsafe) {
+      return unsafe
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
     }
-    breadcrumbs.innerHTML = breadcrumbContent;
 
-    let files = [];
-    try {
-      const response = await fetch('/api/files?path=' + encodeURIComponent(currentPath));
-      if (!response.ok) {
-        throw new Error('Failed to load files: ' + response.status + ' ' + response.statusText);
+    function formatFileSize(bytes) {
+      if (bytes === 0) return '0 B';
+      const k = 1024;
+      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)).toLocaleString() + ' ' + sizes[i];
+    }
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function (event) {
+      if (!event.target.closest('.kebab-menu-btn')) {
+        document.querySelectorAll('.kebab-dropdown').forEach(function (dropdown) {
+          dropdown.classList.remove('show');
+        });
       }
-      files = await response.json();
-    } catch (e) {
-      console.error(e);
-      fileTable.innerHTML = '<div class="no-files">An error occurred while loading the files</div>';
-      return;
-    }
-
-    let folderCount = 0;
-    let totalSize = 0;
-    files.forEach(file => {
-      if (file.isDirectory) folderCount++;
-      totalSize += file.size;
     });
 
-    document.getElementById('folder-summary').innerHTML = `${folderCount} folders, ${files.length - folderCount} files, ${formatFileSize(totalSize)}`;
+    function toggleKebabMenu(event, index) {
+      event.stopPropagation();
+      const dropdown = document.getElementById('kebab-dropdown-' + index);
 
-    if (files.length === 0) {
-      fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
-    } else {
-      let fileTableContent = '<table class="file-table">';
-      fileTableContent += '<tr><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
-
-      const sortedFiles = files.sort((a, b) => {
-        // Directories first, then epub files, then other files, alphabetically within each group
-        if (a.isDirectory && !b.isDirectory) return -1;
-        if (!a.isDirectory && b.isDirectory) return 1;
-        if (a.isEpub && !b.isEpub) return -1;
-        if (!a.isEpub && b.isEpub) return 1;
-        return a.name.localeCompare(b.name);
-      });
-
-      sortedFiles.forEach(file => {
-        if (file.isDirectory) {
-          let folderPath = currentPath;
-          if (!folderPath.endsWith("/")) folderPath += "/";
-          folderPath += file.name;
-
-          fileTableContent += '<tr class="folder-row">';
-          fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
-          fileTableContent += '<td>Folder</td>';
-          fileTableContent += '<td>-</td>';
-          fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)" title="Delete folder">🗑️</button></td>`;
-          fileTableContent += '</tr>';
-        } else {
-          let filePath = currentPath;
-          if (!filePath.endsWith("/")) filePath += "/";
-          filePath += file.name;
-
-          fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
-          fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>${escapeHtml(file.name)}`;
-          if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
-          fileTableContent += '</td>';
-          fileTableContent += `<td>${file.name.split('.').pop().toUpperCase()}</td>`;
-          fileTableContent += `<td>${formatFileSize(file.size)}</td>`;
-          fileTableContent += `<td class="actions-col"><button class="delete-btn" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)" title="Delete file">🗑️</button></td>`;
-          fileTableContent += '</tr>';
+      // Close all other dropdowns
+      document.querySelectorAll('.kebab-dropdown').forEach(function (d) {
+        if (d !== dropdown) {
+          d.classList.remove('show');
         }
       });
 
-      fileTableContent += '</table>';
-      fileTable.innerHTML = fileTableContent;
+      dropdown.classList.toggle('show');
     }
-  }
 
-  // Modal functions
-  function openUploadModal() {
-    document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
-    document.getElementById('uploadModal').classList.add('open');
-  }
-
-  function closeUploadModal() {
-    document.getElementById('uploadModal').classList.remove('open');
-    document.getElementById('fileInput').value = '';
-    document.getElementById('uploadBtn').disabled = true;
-    document.getElementById('progress-container').style.display = 'none';
-    document.getElementById('progress-fill').style.width = '0%';
-    document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
-  }
-
-  function openFolderModal() {
-    document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
-    document.getElementById('folderModal').classList.add('open');
-    document.getElementById('folderName').value = '';
-  }
-
-  function closeFolderModal() {
-    document.getElementById('folderModal').classList.remove('open');
-  }
-
-  function validateFile() {
-    const fileInput = document.getElementById('fileInput');
-    const uploadBtn = document.getElementById('uploadBtn');
-    const files = fileInput.files;
-    uploadBtn.disabled = !(files.length > 0);
-  }
-
-let failedUploadsGlobal = [];
-let wsConnection = null;
-const WS_PORT = 81;
-const WS_CHUNK_SIZE = 4096; // 4KB chunks - smaller for ESP32 stability
-
-// Get WebSocket URL based on current page location
-function getWsUrl() {
-  const host = window.location.hostname;
-  return `ws://${host}:${WS_PORT}/`;
-}
-
-// Upload file via WebSocket (faster, binary protocol)
-function uploadFileWebSocket(file, onProgress, onComplete, onError) {
-  return new Promise((resolve, reject) => {
-    const ws = new WebSocket(getWsUrl());
-    let uploadStarted = false;
-    let sendingChunks = false;
-
-    ws.binaryType = 'arraybuffer';
-
-    ws.onopen = function() {
-      console.log('[WS] Connected, starting upload:', file.name);
-      // Send start message: START:<filename>:<size>:<path>
-      ws.send(`START:${file.name}:${file.size}:${currentPath}`);
-    };
-
-    ws.onmessage = async function(event) {
-      const msg = event.data;
-      console.log('[WS] Message:', msg);
-
-      if (msg === 'READY') {
-        uploadStarted = true;
-        sendingChunks = true;
-
-        // Small delay to let connection stabilize
-        await new Promise(r => setTimeout(r, 50));
-
-        try {
-          // Send file in chunks
-          const totalSize = file.size;
-          let offset = 0;
-
-          while (offset < totalSize && ws.readyState === WebSocket.OPEN) {
-            const chunkSize = Math.min(WS_CHUNK_SIZE, totalSize - offset);
-            const chunk = file.slice(offset, offset + chunkSize);
-            const buffer = await chunk.arrayBuffer();
-
-            // Wait for buffer to clear - more aggressive backpressure
-            while (ws.bufferedAmount > WS_CHUNK_SIZE * 2 && ws.readyState === WebSocket.OPEN) {
-              await new Promise(r => setTimeout(r, 5));
-            }
-
-            if (ws.readyState !== WebSocket.OPEN) {
-              throw new Error('WebSocket closed during upload');
-            }
-
-            ws.send(buffer);
-            offset += chunkSize;
-
-            // Update local progress - cap at 95% since server still needs to write
-            // Final 100% shown when server confirms DONE
-            if (onProgress) {
-              const cappedOffset = Math.min(offset, Math.floor(totalSize * 0.95));
-              onProgress(cappedOffset, totalSize);
-            }
+    async function hydrate() {
+      // Close modals when clicking overlay
+      document.querySelectorAll('.modal-overlay').forEach(function (overlay) {
+        overlay.addEventListener('click', function (e) {
+          if (e.target === overlay) {
+            overlay.classList.remove('open');
           }
+        });
+      });
 
-          sendingChunks = false;
-          console.log('[WS] All chunks sent, waiting for DONE');
-        } catch (err) {
-          console.error('[WS] Error sending chunks:', err);
-          sendingChunks = false;
-          ws.close();
-          reject(err);
+      const breadcrumbs = document.getElementById('directory-breadcrumbs');
+      const fileTable = document.getElementById('file-table');
+
+      let breadcrumbContent = '<span class="sep">/</span>';
+      if (currentPath === '/') {
+        breadcrumbContent += '<span class="current">🏠</span>';
+      } else {
+        breadcrumbContent += '<a href="/files">🏠</a>';
+        const pathSegments = currentPath.split('/');
+        pathSegments.slice(1, pathSegments.length - 1).forEach(function (segment, index) {
+          breadcrumbContent += '<span class="sep">/</span><a href="/files?path=' + encodeURIComponent(pathSegments.slice(0, index + 2).join('/')) + '">' + escapeHtml(segment) + '</a>';
+        });
+        breadcrumbContent += '<span class="sep">/</span>';
+        breadcrumbContent += '<span class="current">' + escapeHtml(pathSegments[pathSegments.length - 1]) + '</span>';
+      }
+      breadcrumbs.innerHTML = breadcrumbContent;
+
+      let files = [];
+      try {
+        const response = await fetch('/api/files?path=' + encodeURIComponent(currentPath));
+        if (!response.ok) {
+          throw new Error('Failed to load files: ' + response.status + ' ' + response.statusText);
         }
-      } else if (msg.startsWith('PROGRESS:')) {
-        // Server confirmed progress - log for debugging but don't update UI
-        // (local progress is smoother, server progress causes jumping)
-        console.log('[WS] Server progress:', msg);
-      } else if (msg === 'DONE') {
-        // Show 100% when server confirms completion
-        if (onProgress) onProgress(file.size, file.size);
-        ws.close();
-        if (onComplete) onComplete();
-        resolve();
-      } else if (msg.startsWith('ERROR:')) {
-        const error = msg.substring(6);
-        ws.close();
-        if (onError) onError(error);
-        reject(new Error(error));
+        files = await response.json();
+      } catch (e) {
+        console.error(e);
+        fileTable.innerHTML = '<div class="no-files">An error occurred while loading the files</div>';
+        return;
       }
-    };
 
-    ws.onerror = function(event) {
-      console.error('[WS] Error:', event);
-      if (!uploadStarted) {
-        reject(new Error('WebSocket connection failed'));
-      } else if (!sendingChunks) {
-        reject(new Error('WebSocket error during upload'));
-      }
-    };
+      let folderCount = 0;
+      let totalSize = 0;
+      files.forEach(file => {
+        if (file.isDirectory) folderCount++;
+        totalSize += file.size;
+      });
 
-    ws.onclose = function(event) {
-      console.log('[WS] Connection closed, code:', event.code, 'reason:', event.reason);
-      if (sendingChunks) {
-        reject(new Error('WebSocket closed unexpectedly'));
-      }
-    };
-  });
-}
+      document.getElementById('folder-summary').innerHTML = `${folderCount} folders, ${files.length - folderCount} files, ${formatFileSize(totalSize)}`;
 
-// Upload file via HTTP (fallback method)
-function uploadFileHTTP(file, onProgress, onComplete, onError) {
-  return new Promise((resolve, reject) => {
-    const formData = new FormData();
-    formData.append('file', file);
-
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
-
-    xhr.upload.onprogress = function(e) {
-      if (e.lengthComputable && onProgress) {
-        onProgress(e.loaded, e.total);
-      }
-    };
-
-    xhr.onload = function() {
-      if (xhr.status === 200) {
-        if (onComplete) onComplete();
-        resolve();
+      if (files.length === 0) {
+        fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
       } else {
-        const error = xhr.responseText || 'Upload failed';
-        if (onError) onError(error);
-        reject(new Error(error));
+        let fileTableContent = '<table class="file-table">';
+        fileTableContent += '<tr><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+
+        const sortedFiles = files.sort((a, b) => {
+          // Directories first, then epub files, then other files, alphabetically within each group
+          if (a.isDirectory && !b.isDirectory) return -1;
+          if (!a.isDirectory && b.isDirectory) return 1;
+          if (a.isEpub && !b.isEpub) return -1;
+          if (!a.isEpub && b.isEpub) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        sortedFiles.forEach((file, index) => {
+          if (file.isDirectory) {
+            let folderPath = currentPath;
+            if (!folderPath.endsWith("/")) folderPath += "/";
+            folderPath += file.name;
+
+            fileTableContent += '<tr class="folder-row">';
+            fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
+            fileTableContent += '<td>Folder</td>';
+            fileTableContent += '<td>-</td>';
+            fileTableContent += `<td class="actions-col">
+            <button class="kebab-menu-btn" onclick="toggleKebabMenu(event, ${index})" title="More actions">⋮</button>
+            <div class="kebab-dropdown" id="kebab-dropdown-${index}">
+              <button class="kebab-dropdown-item" onclick="openRenameModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)">✏️ Rename</button>
+              <button class="kebab-dropdown-item" onclick="openMoveModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)">📦 Move</button>
+              <button class="kebab-dropdown-item delete" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${folderPath.replaceAll("'", "\\'")}', true)">🗑️ Delete</button>
+            </div>
+          </td>`;
+            fileTableContent += '</tr>';
+          } else {
+            let filePath = currentPath;
+            if (!filePath.endsWith("/")) filePath += "/";
+            filePath += file.name;
+
+            fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
+            fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>${escapeHtml(file.name)}`;
+            if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
+            fileTableContent += '</td>';
+            fileTableContent += `<td>${file.name.split('.').pop().toUpperCase()}</td>`;
+            fileTableContent += `<td>${formatFileSize(file.size)}</td>`;
+            fileTableContent += `<td class="actions-col">
+            <button class="kebab-menu-btn" onclick="toggleKebabMenu(event, ${index})" title="More actions">⋮</button>
+            <div class="kebab-dropdown" id="kebab-dropdown-${index}">
+              <button class="kebab-dropdown-item" onclick="openRenameModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)">✏️ Rename</button>
+              <button class="kebab-dropdown-item" onclick="openMoveModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)">📦 Move</button>
+              <button class="kebab-dropdown-item delete" onclick="openDeleteModal('${file.name.replaceAll("'", "\\'")}', '${filePath.replaceAll("'", "\\'")}', false)">🗑️ Delete</button>
+            </div>
+          </td>`;
+            fileTableContent += '</tr>';
+          }
+        });
+
+        fileTableContent += '</table>';
+        fileTable.innerHTML = fileTableContent;
       }
-    };
-
-    xhr.onerror = function() {
-      const error = 'Network error';
-      if (onError) onError(error);
-      reject(new Error(error));
-    };
-
-    xhr.send(formData);
-  });
-}
-
-function uploadFile() {
-  const fileInput = document.getElementById('fileInput');
-  const files = Array.from(fileInput.files);
-
-  if (files.length === 0) {
-    alert('Please select at least one file!');
-    return;
-  }
-
-  const progressContainer = document.getElementById('progress-container');
-  const progressFill = document.getElementById('progress-fill');
-  const progressText = document.getElementById('progress-text');
-  const uploadBtn = document.getElementById('uploadBtn');
-
-  progressContainer.style.display = 'block';
-  uploadBtn.disabled = true;
-
-  let currentIndex = 0;
-  const failedFiles = [];
-  let useWebSocket = true; // Try WebSocket first
-
-  async function uploadNextFile() {
-    if (currentIndex >= files.length) {
-      // All files processed - show summary
-      if (failedFiles.length === 0) {
-        progressFill.style.backgroundColor = '#4caf50';
-        progressText.textContent = 'All uploads complete!';
-        setTimeout(() => {
-          closeUploadModal();
-          hydrate();
-        }, 1000);
-      } else {
-        progressFill.style.backgroundColor = '#e74c3c';
-        const failedList = failedFiles.map(f => f.name).join(', ');
-        progressText.textContent = `${files.length - failedFiles.length}/${files.length} uploaded. Failed: ${failedList}`;
-        failedUploadsGlobal = failedFiles;
-        setTimeout(() => {
-          closeUploadModal();
-          showFailedUploadsBanner();
-          hydrate();
-        }, 2000);
-      }
-      return;
     }
 
-    const file = files[currentIndex];
-    progressFill.style.width = '0%';
-    progressFill.style.backgroundColor = '#27ae60';
-    const methodText = useWebSocket ? ' [WS]' : ' [HTTP]';
-    progressText.textContent = `Uploading ${file.name} (${currentIndex + 1}/${files.length})${methodText}`;
+    // Modal functions
+    function openUploadModal() {
+      document.getElementById('uploadPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
+      document.getElementById('uploadModal').classList.add('open');
+    }
 
-    const onProgress = (loaded, total) => {
-      const percent = Math.round((loaded / total) * 100);
-      progressFill.style.width = percent + '%';
-      const speed = ''; // Could calculate speed here
-      progressText.textContent = `Uploading ${file.name} (${currentIndex + 1}/${files.length})${methodText} — ${percent}%`;
-    };
+    function closeUploadModal() {
+      document.getElementById('uploadModal').classList.remove('open');
+      document.getElementById('fileInput').value = '';
+      document.getElementById('uploadBtn').disabled = true;
+      document.getElementById('progress-container').style.display = 'none';
+      document.getElementById('progress-fill').style.width = '0%';
+      document.getElementById('progress-fill').style.backgroundColor = '#27ae60';
+    }
 
-    const onComplete = () => {
-      currentIndex++;
-      uploadNextFile();
-    };
+    function openFolderModal() {
+      document.getElementById('folderPathDisplay').textContent = currentPath === '/' ? '/ 🏠' : currentPath;
+      document.getElementById('folderModal').classList.add('open');
+      document.getElementById('folderName').value = '';
+    }
 
-    const onError = (error) => {
-      failedFiles.push({ name: file.name, error: error, file: file });
-      currentIndex++;
-      uploadNextFile();
-    };
+    function closeFolderModal() {
+      document.getElementById('folderModal').classList.remove('open');
+    }
 
-    try {
-      if (useWebSocket) {
-        await uploadFileWebSocket(file, onProgress, null, null);
-        onComplete();
-      } else {
-        await uploadFileHTTP(file, onProgress, null, null);
-        onComplete();
+    function validateFile() {
+      const fileInput = document.getElementById('fileInput');
+      const uploadBtn = document.getElementById('uploadBtn');
+      const files = fileInput.files;
+      uploadBtn.disabled = !(files.length > 0);
+    }
+
+    let failedUploadsGlobal = [];
+    let wsConnection = null;
+    const WS_PORT = 81;
+    const WS_CHUNK_SIZE = 4096; // 4KB chunks - smaller for ESP32 stability
+
+    // Get WebSocket URL based on current page location
+    function getWsUrl() {
+      const host = window.location.hostname;
+      return `ws://${host}:${WS_PORT}/`;
+    }
+
+    // Upload file via WebSocket (faster, binary protocol)
+    function uploadFileWebSocket(file, onProgress, onComplete, onError) {
+      return new Promise((resolve, reject) => {
+        const ws = new WebSocket(getWsUrl());
+        let uploadStarted = false;
+        let sendingChunks = false;
+
+        ws.binaryType = 'arraybuffer';
+
+        ws.onopen = function () {
+          console.log('[WS] Connected, starting upload:', file.name);
+          // Send start message: START:<filename>:<size>:<path>
+          ws.send(`START:${file.name}:${file.size}:${currentPath}`);
+        };
+
+        ws.onmessage = async function (event) {
+          const msg = event.data;
+          console.log('[WS] Message:', msg);
+
+          if (msg === 'READY') {
+            uploadStarted = true;
+            sendingChunks = true;
+
+            // Small delay to let connection stabilize
+            await new Promise(r => setTimeout(r, 50));
+
+            try {
+              // Send file in chunks
+              const totalSize = file.size;
+              let offset = 0;
+
+              while (offset < totalSize && ws.readyState === WebSocket.OPEN) {
+                const chunkSize = Math.min(WS_CHUNK_SIZE, totalSize - offset);
+                const chunk = file.slice(offset, offset + chunkSize);
+                const buffer = await chunk.arrayBuffer();
+
+                // Wait for buffer to clear - more aggressive backpressure
+                while (ws.bufferedAmount > WS_CHUNK_SIZE * 2 && ws.readyState === WebSocket.OPEN) {
+                  await new Promise(r => setTimeout(r, 5));
+                }
+
+                if (ws.readyState !== WebSocket.OPEN) {
+                  throw new Error('WebSocket closed during upload');
+                }
+
+                ws.send(buffer);
+                offset += chunkSize;
+
+                // Update local progress - cap at 95% since server still needs to write
+                // Final 100% shown when server confirms DONE
+                if (onProgress) {
+                  const cappedOffset = Math.min(offset, Math.floor(totalSize * 0.95));
+                  onProgress(cappedOffset, totalSize);
+                }
+              }
+
+              sendingChunks = false;
+              console.log('[WS] All chunks sent, waiting for DONE');
+            } catch (err) {
+              console.error('[WS] Error sending chunks:', err);
+              sendingChunks = false;
+              ws.close();
+              reject(err);
+            }
+          } else if (msg.startsWith('PROGRESS:')) {
+            // Server confirmed progress - log for debugging but don't update UI
+            // (local progress is smoother, server progress causes jumping)
+            console.log('[WS] Server progress:', msg);
+          } else if (msg === 'DONE') {
+            // Show 100% when server confirms completion
+            if (onProgress) onProgress(file.size, file.size);
+            ws.close();
+            if (onComplete) onComplete();
+            resolve();
+          } else if (msg.startsWith('ERROR:')) {
+            const error = msg.substring(6);
+            ws.close();
+            if (onError) onError(error);
+            reject(new Error(error));
+          }
+        };
+
+        ws.onerror = function (event) {
+          console.error('[WS] Error:', event);
+          if (!uploadStarted) {
+            reject(new Error('WebSocket connection failed'));
+          } else if (!sendingChunks) {
+            reject(new Error('WebSocket error during upload'));
+          }
+        };
+
+        ws.onclose = function (event) {
+          console.log('[WS] Connection closed, code:', event.code, 'reason:', event.reason);
+          if (sendingChunks) {
+            reject(new Error('WebSocket closed unexpectedly'));
+          }
+        };
+      });
+    }
+
+    // Upload file via HTTP (fallback method)
+    function uploadFileHTTP(file, onProgress, onComplete, onError) {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/upload?path=' + encodeURIComponent(currentPath), true);
+
+        xhr.upload.onprogress = function (e) {
+          if (e.lengthComputable && onProgress) {
+            onProgress(e.loaded, e.total);
+          }
+        };
+
+        xhr.onload = function () {
+          if (xhr.status === 200) {
+            if (onComplete) onComplete();
+            resolve();
+          } else {
+            const error = xhr.responseText || 'Upload failed';
+            if (onError) onError(error);
+            reject(new Error(error));
+          }
+        };
+
+        xhr.onerror = function () {
+          const error = 'Network error';
+          if (onError) onError(error);
+          reject(new Error(error));
+        };
+
+        xhr.send(formData);
+      });
+    }
+
+    function uploadFile() {
+      const fileInput = document.getElementById('fileInput');
+      const files = Array.from(fileInput.files);
+
+      if (files.length === 0) {
+        alert('Please select at least one file!');
+        return;
       }
-    } catch (error) {
-      console.error('Upload error:', error);
-      if (useWebSocket && error.message === 'WebSocket connection failed') {
-        // Fall back to HTTP for all subsequent uploads
-        console.log('WebSocket failed, falling back to HTTP');
-        useWebSocket = false;
-        // Retry this file with HTTP
+
+      const progressContainer = document.getElementById('progress-container');
+      const progressFill = document.getElementById('progress-fill');
+      const progressText = document.getElementById('progress-text');
+      const uploadBtn = document.getElementById('uploadBtn');
+
+      progressContainer.style.display = 'block';
+      uploadBtn.disabled = true;
+
+      let currentIndex = 0;
+      const failedFiles = [];
+      let useWebSocket = true; // Try WebSocket first
+
+      async function uploadNextFile() {
+        if (currentIndex >= files.length) {
+          // All files processed - show summary
+          if (failedFiles.length === 0) {
+            progressFill.style.backgroundColor = '#4caf50';
+            progressText.textContent = 'All uploads complete!';
+            setTimeout(() => {
+              closeUploadModal();
+              hydrate();
+            }, 1000);
+          } else {
+            progressFill.style.backgroundColor = '#e74c3c';
+            const failedList = failedFiles.map(f => f.name).join(', ');
+            progressText.textContent = `${files.length - failedFiles.length}/${files.length} uploaded. Failed: ${failedList}`;
+            failedUploadsGlobal = failedFiles;
+            setTimeout(() => {
+              closeUploadModal();
+              showFailedUploadsBanner();
+              hydrate();
+            }, 2000);
+          }
+          return;
+        }
+
+        const file = files[currentIndex];
+        progressFill.style.width = '0%';
+        progressFill.style.backgroundColor = '#27ae60';
+        const methodText = useWebSocket ? ' [WS]' : ' [HTTP]';
+        progressText.textContent = `Uploading ${file.name} (${currentIndex + 1}/${files.length})${methodText}`;
+
+        const onProgress = (loaded, total) => {
+          const percent = Math.round((loaded / total) * 100);
+          progressFill.style.width = percent + '%';
+          const speed = ''; // Could calculate speed here
+          progressText.textContent = `Uploading ${file.name} (${currentIndex + 1}/${files.length})${methodText} — ${percent}%`;
+        };
+
+        const onComplete = () => {
+          currentIndex++;
+          uploadNextFile();
+        };
+
+        const onError = (error) => {
+          failedFiles.push({ name: file.name, error: error, file: file });
+          currentIndex++;
+          uploadNextFile();
+        };
+
         try {
-          await uploadFileHTTP(file, onProgress, null, null);
-          onComplete();
-        } catch (httpError) {
-          onError(httpError.message);
+          if (useWebSocket) {
+            await uploadFileWebSocket(file, onProgress, null, null);
+            onComplete();
+          } else {
+            await uploadFileHTTP(file, onProgress, null, null);
+            onComplete();
+          }
+        } catch (error) {
+          console.error('Upload error:', error);
+          if (useWebSocket && error.message === 'WebSocket connection failed') {
+            // Fall back to HTTP for all subsequent uploads
+            console.log('WebSocket failed, falling back to HTTP');
+            useWebSocket = false;
+            // Retry this file with HTTP
+            try {
+              await uploadFileHTTP(file, onProgress, null, null);
+              onComplete();
+            } catch (httpError) {
+              onError(httpError.message);
+            }
+          } else {
+            onError(error.message);
+          }
         }
-      } else {
-        onError(error.message);
       }
+
+      uploadNextFile();
     }
-  }
 
-  uploadNextFile();
-}
+    function showFailedUploadsBanner() {
+      const banner = document.getElementById('failedUploadsBanner');
+      const filesList = document.getElementById('failedFilesList');
 
-function showFailedUploadsBanner() {
-  const banner = document.getElementById('failedUploadsBanner');
-  const filesList = document.getElementById('failedFilesList');
-  
-  filesList.innerHTML = '';
-  
-  failedUploadsGlobal.forEach((failedFile, index) => {
-    const item = document.createElement('div');
-    item.className = 'failed-file-item';
-    item.innerHTML = `
+      filesList.innerHTML = '';
+
+      failedUploadsGlobal.forEach((failedFile, index) => {
+        const item = document.createElement('div');
+        item.className = 'failed-file-item';
+        item.innerHTML = `
       <div class="failed-file-info">
         <div class="failed-file-name">📄 ${escapeHtml(failedFile.name)}</div>
         <div class="failed-file-error">Error: ${escapeHtml(failedFile.error)}</div>
       </div>
       <button class="retry-btn" onclick="retrySingleUpload(${index})">Retry</button>
     `;
-    filesList.appendChild(item);
-  });
-  
-  // Ensure retry all button is visible
-  const retryAllBtn = banner.querySelector('.retry-all-btn');
-  if (retryAllBtn) retryAllBtn.style.display = '';
-  
-  banner.classList.add('show');
-}
+        filesList.appendChild(item);
+      });
 
-function dismissFailedUploads() {
-  const banner = document.getElementById('failedUploadsBanner');
-  banner.classList.remove('show');
-  failedUploadsGlobal = [];
-}
+      // Ensure retry all button is visible
+      const retryAllBtn = banner.querySelector('.retry-all-btn');
+      if (retryAllBtn) retryAllBtn.style.display = '';
 
-function retrySingleUpload(index) {
-  const failedFile = failedUploadsGlobal[index];
-  if (!failedFile) return;
-  
-  // Create a DataTransfer to set the file input
-  const dt = new DataTransfer();
-  dt.items.add(failedFile.file);
-  
-  const fileInput = document.getElementById('fileInput');
-  fileInput.files = dt.files;
-  
-  // Remove this file from failed list
-  failedUploadsGlobal.splice(index, 1);
-  
-  // If no more failed files, hide banner
-  if (failedUploadsGlobal.length === 0) {
-    dismissFailedUploads();
-  }
-  
-  // Open modal and trigger upload
-  openUploadModal();
-  validateFile();
-}
-
-function retryAllFailedUploads() {
-  if (failedUploadsGlobal.length === 0) return;
-  
-  // Create a DataTransfer with all failed files
-  const dt = new DataTransfer();
-  failedUploadsGlobal.forEach(failedFile => {
-    dt.items.add(failedFile.file);
-  });
-  
-  const fileInput = document.getElementById('fileInput');
-  fileInput.files = dt.files;
-  
-  // Clear failed files list
-  failedUploadsGlobal = [];
-  dismissFailedUploads();
-  
-  // Open modal and trigger upload
-  openUploadModal();
-  validateFile();
-}
-
-  function createFolder() {
-    const folderName = document.getElementById('folderName').value.trim();
-
-    if (!folderName) {
-      alert('Please enter a folder name!');
-      return;
+      banner.classList.add('show');
     }
 
-    // Validate folder name (no special characters except underscore and hyphen)
-    const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
-    if (!validName) {
-      alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
-      return;
+    function dismissFailedUploads() {
+      const banner = document.getElementById('failedUploadsBanner');
+      banner.classList.remove('show');
+      failedUploadsGlobal = [];
     }
 
-    const formData = new FormData();
-    formData.append('name', folderName);
-    formData.append('path', currentPath);
+    function retrySingleUpload(index) {
+      const failedFile = failedUploadsGlobal[index];
+      if (!failedFile) return;
 
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/mkdir', true);
+      // Create a DataTransfer to set the file input
+      const dt = new DataTransfer();
+      dt.items.add(failedFile.file);
 
-    xhr.onload = function() {
-      if (xhr.status === 200) {
-        window.location.reload();
-      } else {
-        alert('Failed to create folder: ' + xhr.responseText);
+      const fileInput = document.getElementById('fileInput');
+      fileInput.files = dt.files;
+
+      // Remove this file from failed list
+      failedUploadsGlobal.splice(index, 1);
+
+      // If no more failed files, hide banner
+      if (failedUploadsGlobal.length === 0) {
+        dismissFailedUploads();
       }
-    };
 
-    xhr.onerror = function() {
-      alert('Failed to create folder - network error');
-    };
+      // Open modal and trigger upload
+      openUploadModal();
+      validateFile();
+    }
 
-    xhr.send(formData);
-  }
+    function retryAllFailedUploads() {
+      if (failedUploadsGlobal.length === 0) return;
 
-  // Delete functions
-  function openDeleteModal(name, path, isFolder) {
-    document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
-    document.getElementById('deleteItemPath').value = path;
-    document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
-    document.getElementById('deleteModal').classList.add('open');
-  }
+      // Create a DataTransfer with all failed files
+      const dt = new DataTransfer();
+      failedUploadsGlobal.forEach(failedFile => {
+        dt.items.add(failedFile.file);
+      });
 
-  function closeDeleteModal() {
-    document.getElementById('deleteModal').classList.remove('open');
-  }
+      const fileInput = document.getElementById('fileInput');
+      fileInput.files = dt.files;
 
-  function confirmDelete() {
-    const path = document.getElementById('deleteItemPath').value;
-    const itemType = document.getElementById('deleteItemType').value;
+      // Clear failed files list
+      failedUploadsGlobal = [];
+      dismissFailedUploads();
 
-    const formData = new FormData();
-    formData.append('path', path);
-    formData.append('type', itemType);
+      // Open modal and trigger upload
+      openUploadModal();
+      validateFile();
+    }
 
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/delete', true);
+    function createFolder() {
+      const folderName = document.getElementById('folderName').value.trim();
 
-    xhr.onload = function() {
-      if (xhr.status === 200) {
-        window.location.reload();
-      } else {
-        alert('Failed to delete: ' + xhr.responseText);
+      if (!folderName) {
+        alert('Please enter a folder name!');
+        return;
+      }
+
+      // Validate folder name (no special characters except underscore and hyphen)
+      const validName = /^[a-zA-Z0-9_\-]+$/.test(folderName);
+      if (!validName) {
+        alert('Folder name can only contain letters, numbers, underscores, and hyphens.');
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append('name', folderName);
+      formData.append('path', currentPath);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/mkdir', true);
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          window.location.reload();
+        } else {
+          alert('Failed to create folder: ' + xhr.responseText);
+        }
+      };
+
+      xhr.onerror = function () {
+        alert('Failed to create folder - network error');
+      };
+
+      xhr.send(formData);
+    }
+
+    // Rename functions
+    function openRenameModal(name, path, isFolder) {
+      document.getElementById('renameCurrentName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
+      document.getElementById('renameNewName').value = name;
+      document.getElementById('renameItemPath').value = path;
+      document.getElementById('renameItemType').value = isFolder ? 'folder' : 'file';
+      document.getElementById('renameModal').classList.add('open');
+
+      // Close kebab menu
+      document.querySelectorAll('.kebab-dropdown').forEach(d => d.classList.remove('show'));
+    }
+
+    function closeRenameModal() {
+      document.getElementById('renameModal').classList.remove('open');
+    }
+
+    function confirmRename() {
+      const newName = document.getElementById('renameNewName').value.trim();
+      const oldPath = document.getElementById('renameItemPath').value;
+
+      if (!newName) {
+        alert('Please enter a new name!');
+        return;
+      }
+
+      // Validate name (letters, numbers, underscores, hyphens, dots, and spaces)
+      const validName = /^[a-zA-Z0-9_\-\. ]+$/.test(newName);
+      if (!validName) {
+        alert('Name can only contain letters, numbers, underscores, hyphens, dots, and spaces.');
+        return;
+      }
+
+      const pathSegments = oldPath.split('/');
+      pathSegments[pathSegments.length - 1] = newName;
+      const newPath = pathSegments.join('/');
+
+      const formData = new FormData();
+      formData.append('oldPath', oldPath);
+      formData.append('newName', newName);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/rename', true);
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          window.location.reload();
+        } else {
+          alert('Failed to rename: ' + xhr.responseText);
+          closeRenameModal();
+        }
+      };
+
+      xhr.onerror = function () {
+        alert('Failed to rename - network error');
+        closeRenameModal();
+      };
+
+      xhr.send(formData);
+    }
+
+    // Move functions
+    function openMoveModal(name, path, isFolder) {
+      document.getElementById('moveItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
+      document.getElementById('moveCurrentPath').textContent = path;
+      document.getElementById('moveNewPath').value = path;
+      document.getElementById('moveItemPath').value = path;
+      document.getElementById('moveItemType').value = isFolder ? 'folder' : 'file';
+      document.getElementById('moveModal').classList.add('open');
+
+      // Close kebab menu
+      document.querySelectorAll('.kebab-dropdown').forEach(d => d.classList.remove('show'));
+    }
+
+    function closeMoveModal() {
+      document.getElementById('moveModal').classList.remove('open');
+    }
+
+    function confirmMove() {
+      const oldPath = document.getElementById('moveItemPath').value;
+      const newPath = document.getElementById('moveNewPath').value.trim();
+
+      if (!newPath) {
+        alert('Please enter a new path!');
+        return;
+      }
+
+      if (oldPath === newPath) {
+        alert('The new path is the same as the current path!');
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append('oldPath', oldPath);
+      formData.append('newPath', newPath);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/move', true);
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          window.location.reload();
+        } else {
+          alert('Failed to move: ' + xhr.responseText);
+          closeMoveModal();
+        }
+      };
+
+      xhr.onerror = function () {
+        alert('Failed to move - network error');
+        closeMoveModal();
+      };
+
+      xhr.send(formData);
+    }
+
+    // Delete functions
+    function openDeleteModal(name, path, isFolder) {
+      document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
+      document.getElementById('deleteItemPath').value = path;
+      document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
+      document.getElementById('deleteModal').classList.add('open');
+
+      // Close kebab menu
+      document.querySelectorAll('.kebab-dropdown').forEach(d => d.classList.remove('show'));
+    }
+
+    function closeDeleteModal() {
+      document.getElementById('deleteModal').classList.remove('open');
+    }
+
+    function confirmDelete() {
+      const path = document.getElementById('deleteItemPath').value;
+      const itemType = document.getElementById('deleteItemType').value;
+
+      const formData = new FormData();
+      formData.append('path', path);
+      formData.append('type', itemType);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/delete', true);
+
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          window.location.reload();
+        } else {
+          alert('Failed to delete: ' + xhr.responseText);
+          closeDeleteModal();
+        }
+      };
+
+      xhr.onerror = function () {
+        alert('Failed to delete - network error');
         closeDeleteModal();
-      }
-    };
+      };
 
-    xhr.onerror = function() {
-      alert('Failed to delete - network error');
-      closeDeleteModal();
-    };
+      xhr.send(formData);
+    }
 
-    xhr.send(formData);
-  }
-
-  hydrate();
-</script>
+    hydrate();
+  </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/util/BookCacheManager.cpp b/src/util/BookCacheManager.cpp
new file mode 100644
index 00000000..cd93ac01
--- /dev/null
+++ b/src/util/BookCacheManager.cpp
@@ -0,0 +1,103 @@
+#include "BookCacheManager.h"
+#include "StringUtils.h"
+#include <HardwareSerial.h>
+#include "../RecentBooksStore.h"
+#include "../CrossPointState.h"
+
+bool BookCacheManager::migrateCache(const String& oldPath, const String& newPath) {
+  if (oldPath == newPath) return true;
+
+  // Update Recent Books list
+  RECENT_BOOKS.updatePath(oldPath.c_str(), newPath.c_str());
+
+  // Update last opened book state if matches
+  if (CrossPointState::getInstance().openEpubPath == oldPath.c_str()) {
+    CrossPointState::getInstance().openEpubPath = newPath.c_str();
+    CrossPointState::getInstance().saveToFile();
+  }
+
+  if (!SdMan.exists(oldPath.c_str())) {
+    return false;
+  }
+
+  FsFile item = SdMan.open(oldPath.c_str());
+  if (!item) return false;
+
+  bool isDir = item.isDirectory();
+  item.close();
+
+  if (isDir) {
+    // Recursively migrate contents of the directory
+    FsFile dir = SdMan.open(oldPath.c_str());
+    FsFile entry = dir.openNextFile();
+    char nameBuf[512];
+    bool success = true;
+
+    while (entry) {
+      entry.getName(nameBuf, sizeof(nameBuf));
+      String fileName = String(nameBuf);
+      entry.close();
+
+      String subOldPath = oldPath + "/" + fileName;
+      String subNewPath = newPath + "/" + fileName;
+      
+      if (!migrateCache(subOldPath, subNewPath)) {
+        success = false;
+      }
+      entry = dir.openNextFile();
+    }
+    dir.close();
+    return success;
+  }
+
+  // It's a file. check if it's a supported book type
+  if (!isSupportedFile(oldPath)) {
+    return true; // Not a book, nothing to migrate
+  }
+
+  String oldCache = getCachePath(oldPath);
+  String newCache = getCachePath(newPath);
+
+  if (oldCache.isEmpty() || newCache.isEmpty() || oldCache == newCache) {
+    return true;
+  }
+
+  if (SdMan.exists(oldCache.c_str())) {
+    if (SdMan.exists(newCache.c_str())) {
+      Serial.printf("[%lu] [BCM] New cache already exists for %s, removing old cache\n", millis(), newPath.c_str());
+      SdMan.removeDir(oldCache.c_str());
+      return true;
+    }
+
+    Serial.printf("[%lu] [BCM] Migrating cache: %s -> %s\n", millis(), oldCache.c_str(), newCache.c_str());
+    if (SdMan.rename(oldCache.c_str(), newCache.c_str())) {
+      return true;
+    } else {
+      Serial.printf("[%lu] [BCM] Failed to rename cache directory\n", millis());
+      return false;
+    }
+  }
+
+  return true; // No old cache to migrate
+}
+
+String BookCacheManager::getCachePath(const String& path) {
+  if (!isSupportedFile(path)) return "";
+
+  auto hash = std::hash<std::string>{}(path.c_str());
+  return String("/.crosspoint/") + getCachePrefix(path) + "_" + String(hash);
+}
+
+bool BookCacheManager::isSupportedFile(const String& path) {
+  return StringUtils::checkFileExtension(path, ".epub") ||
+         StringUtils::checkFileExtension(path, ".txt") ||
+         StringUtils::checkFileExtension(path, ".xtc") ||
+         StringUtils::checkFileExtension(path, ".xtg") ||
+         StringUtils::checkFileExtension(path, ".xth");
+}
+
+String BookCacheManager::getCachePrefix(const String& path) {
+  if (StringUtils::checkFileExtension(path, ".epub")) return "epub";
+  if (StringUtils::checkFileExtension(path, ".txt")) return "txt";
+  return "xtc"; // .xtc, .xtg, .xth
+}
diff --git a/src/util/BookCacheManager.h b/src/util/BookCacheManager.h
new file mode 100644
index 00000000..34d1e83f
--- /dev/null
+++ b/src/util/BookCacheManager.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <SDCardManager.h>
+#include <WString.h>
+#include <string>
+
+class BookCacheManager {
+ public:
+  /**
+   * Migrate cache data for a file or directory.
+   * If path is a directory, it recursively migrates all files within.
+   * 
+   * @param oldPath Original absolute path
+   * @param newPath New absolute path
+   * @return true if migration was successful or no cache existed
+   */
+  static bool migrateCache(const String& oldPath, const String& newPath);
+
+  /**
+   * Get the cache directory path for a given book file.
+   * 
+   * @param path Absolute path to the book file
+   * @return Full path to the cache directory, or empty string if not a supported book type
+   */
+  static String getCachePath(const String& path);
+
+ private:
+  static bool isSupportedFile(const String& path);
+  static String getCachePrefix(const String& path);
+};