diff --git a/Web/content/adminpanel.php b/Web/content/adminpanel.php
index e5b9f1e..ca4c2ba 100644
--- a/Web/content/adminpanel.php
+++ b/Web/content/adminpanel.php
@@ -141,6 +141,7 @@ function CheckPassword($password) {
     <title>Admin Panel</title>
     <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="../css/bootstrap.css">
+    <link rel="stylesheet" href="../css/modern.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/adminpanel.css">
     <script src="../js/bootstrap.bundle.js"></script>
@@ -160,7 +161,7 @@ function CheckPassword($password) {
     </button>
 </div>
 
-<div class="custom-container">
+<div class="custom-container dark-box">
     <header class="row border-bottom m-5">
         <h1>USB RAID Array</h1>
         <div class="mb-3 p-3">
@@ -171,7 +172,7 @@ function CheckPassword($password) {
         </div>
     </header>
     <section class="row">
-        <article class="col border border-2 border-primary rounded p-2">
+        <article class="col border border-2 border-primary rounded p-2 surface-panel">
             <h2 class="mb-4">User Management</h2>
             <?php if ($message): ?>
                 <div class="alert alert-<?php echo $message_type === 'success' ? 'success' : 'danger'; ?>">
@@ -262,4 +263,4 @@ function CheckPassword($password) {
 </html>
 <?php
 $conn->close();
-?>
\ No newline at end of file
+?>
diff --git a/Web/content/changepassword.php b/Web/content/changepassword.php
index e2f0a16..db434bf 100644
--- a/Web/content/changepassword.php
+++ b/Web/content/changepassword.php
@@ -99,6 +99,7 @@ function CheckPassword($password) {
     <link rel="icon" href="../img/favicon.ico" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../css/bootstrap.css">
+    <link rel="stylesheet" href="../css/modern.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/changepassword.css">
     <script src="../js/bootstrap.bundle.js"></script>
@@ -111,7 +112,7 @@ function CheckPassword($password) {
         </button>
     </div>
     
-    <div class="container-fluid">
+    <div class="custom-container dark-box">
         <header class="row border-bottom my-3 my-md-5">
             <h1>USB RAID Array</h1>
             <div class="mb-3 p-3">
@@ -126,7 +127,7 @@ function CheckPassword($password) {
         </header>
         
         <section class="row content-section">
-            <article class="col-12 border border-2 border-primary rounded p-2 p-md-4">
+            <article class="col-12 border border-2 border-primary rounded p-2 p-md-4 surface-panel">
                 <h2 class="mb-4">Change Password</h2>
                 
                 <?php if ($message): ?>
@@ -170,4 +171,4 @@ function CheckPassword($password) {
         <script src="../js/theme.js"></script>
     </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Web/content/css/adminpanel.css b/Web/content/css/adminpanel.css
index a5d78ea..de6996f 100644
--- a/Web/content/css/adminpanel.css
+++ b/Web/content/css/adminpanel.css
@@ -10,6 +10,10 @@ html, body {
     max-width: 60%;
     margin: 0 auto;
 }
+.custom-container.dark-box {
+    min-height: calc(100vh - 4rem);
+    width: min(60%, 1200px);
+}
 section.row {
     flex: 1;
 }
@@ -17,6 +21,19 @@ section.row {
     .custom-container {
         max-width: 90%;
     }
+    .custom-container.dark-box {
+        width: 90%;
+    }
+}
+@media (max-width: 700px) {
+    .custom-container.dark-box {
+        width: calc(100% - 2rem);
+        min-height: calc(100vh - 2rem);
+        margin: 1rem auto;
+    }
+    body {
+        min-width: 0;
+    }
 }
 .add-user-form {
     max-width: 400px;
@@ -34,9 +51,6 @@ section.row {
 .form-check-label {
     margin-left: 0.5rem;
 }
-body {
-    min-width: 800px;
-}
 .hover-effect {
     transition: opacity 0.3s ease;
 }
@@ -49,4 +63,4 @@ body {
 }
 .theme-dark .light-logo {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/Web/content/ftp/css/index.css b/Web/content/ftp/css/index.css
index ea18c88..00c079c 100644
--- a/Web/content/ftp/css/index.css
+++ b/Web/content/ftp/css/index.css
@@ -125,4 +125,18 @@ footer {
     padding: 20px;
     border-top: 1px solid #ddd;
     width: 100%;
-}
\ No newline at end of file
+}
+
+/* Give the SFTP file browser its own surface, distinct from the outer page. */
+article.col-8 {
+    background: linear-gradient(145deg, var(--sftp-bg-start), var(--sftp-bg-end));
+    border-color: rgba(77, 145, 255, 0.3) !important;
+    border-radius: 1rem !important;
+    box-shadow: 0 12px 32px rgba(3, 8, 18, 0.2);
+}
+
+html[data-bs-theme="light"] article.col-8 {
+    background: linear-gradient(145deg, #ffffff, #edf3fb);
+    border-color: rgba(59, 130, 246, 0.4) !important;
+    box-shadow: 0 18px 48px rgba(31, 58, 92, 0.1);
+}
diff --git a/Web/content/ftp/index.php b/Web/content/ftp/index.php
index ee6532f..1bb1bf2 100644
--- a/Web/content/ftp/index.php
+++ b/Web/content/ftp/index.php
@@ -319,6 +319,13 @@
     </div>
     </footer>
     </div>
+    <script>
+        // Keep Bootstrap modals outside the filtered SFTP container. A parent
+        // backdrop-filter creates a stacking context that can block modal input.
+        document.querySelectorAll('.modal').forEach(function (modal) {
+            document.body.appendChild(modal);
+        });
+    </script>
     <script>
         // Pass PHP variables to JavaScript
         var currentPath = "<?php echo $currentPath; ?>";
@@ -336,4 +343,4 @@ function formatBytes($bytes, $precision = 2) {
     $bytes /= (1 << (10 * $pow));
     return round($bytes, $precision) . ' ' . $units[$pow];
 }
-?>
\ No newline at end of file
+?>
diff --git a/Web/css/modern.css b/Web/css/modern.css
index a4917d6..ee3edd8 100644
--- a/Web/css/modern.css
+++ b/Web/css/modern.css
@@ -1,17 +1,23 @@
 /* Modern dark theme with blue accents */
 :root {
-    --bg-dark: #000000;
+    --bg-dark: #171b22;
     --bg-dark2: #1a202c;
     --primary-blue: #3b82f6;
     --text-light: #e5e7eb;
-/* Add dark blue variable */
-    --bg-darkblue: #0f172a;
-    --container-bg-start: #2b2b2b;
-    --container-border: var(--primary-blue);
+    --bg-darkblue: #101722;
+    --container-bg-start: #1a2029;
+    --container-bg-end: #151d29;
+    --sftp-bg-start: #151b25;
+    --sftp-bg-end: #101722;
+    --container-border: rgba(77, 145, 255, 0.7);
+    --panel-text: #e5e7eb;
+    --panel-muted: #aab4c3;
+    --control-bg: #101722;
+    --control-border: #39485d;
 }
 
 body {
-    background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
+    background: linear-gradient(135deg, var(--bg-dark), var(--bg-darkblue));
     color: var(--text-light);
     min-height: 100vh;
     font-family: system-ui, sans-serif;
@@ -24,6 +30,49 @@ a, .nav-link {
     transition: opacity .2s ease-in-out;
 }
 
+body, button, input, select, textarea {
+    font-family: system-ui, sans-serif;
+}
+
+/* Keep text, fields and tables readable on every page that uses the shared theme. */
+.surface-panel,
+.dark-box {
+    color: var(--panel-text);
+}
+
+.surface-panel .text-muted,
+.dark-box .text-muted {
+    color: var(--panel-muted) !important;
+}
+
+.surface-panel .form-control,
+.surface-panel .form-select,
+.dark-box .form-control,
+.dark-box .form-select {
+    color: var(--panel-text);
+    background-color: var(--control-bg);
+    border-color: var(--control-border);
+}
+
+.surface-panel .form-control::placeholder,
+.dark-box .form-control::placeholder {
+    color: var(--panel-muted);
+}
+
+.surface-panel .form-control:focus,
+.surface-panel .form-select:focus,
+.dark-box .form-control:focus,
+.dark-box .form-select:focus {
+    border-color: var(--primary-blue);
+    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2);
+}
+
+.surface-panel .table,
+.surface-panel .table th,
+.surface-panel .table td {
+    color: inherit;
+}
+
 
 a:hover, .btn:hover, .nav-link:hover {
     opacity: 0.85;
@@ -53,6 +102,14 @@ a:hover, .btn:hover, .nav-link:hover {
     backdrop-filter: blur(8px);
 }
 
+.surface-panel {
+    background: linear-gradient(145deg, var(--sftp-bg-start), var(--sftp-bg-end));
+    color: var(--text-light);
+    border: 1px solid rgba(77, 145, 255, 0.3);
+    border-radius: 1rem;
+    box-shadow: 0 12px 32px rgba(3, 8, 18, 0.2);
+}
+
 .modal-content {
     background: rgba(20, 20, 30, 0.9) !important;
     color: var(--text-light) !important;
@@ -69,8 +126,9 @@ a:hover, .btn:hover, .nav-link:hover {
 
 /* Main window styling (window within window) */
 .custom-container.dark-box {
-    margin: 2rem;
-    background: linear-gradient(135deg, var(--container-bg-start), var(--bg-darkblue));
+    box-sizing: border-box;
+    margin: 2rem auto;
+    background: linear-gradient(135deg, var(--container-bg-start), var(--container-bg-end));
     border: 2px solid var(--container-border);
     border-radius: var(--border-radius);
     padding: 1rem;
@@ -84,6 +142,10 @@ html[data-bs-theme="light"] {
     --container-bg: rgba(255,255,255,0.85);
     --container-border: var(--primary-blue);
     --text-dark: #212529;
+    --panel-text: #212529;
+    --panel-muted: #596579;
+    --control-bg: #ffffff;
+    --control-border: #c8d2df;
 }
 html[data-bs-theme="light"] body {
     background: var(--bg-light);
@@ -93,6 +155,23 @@ html[data-bs-theme="light"] .dark-box {
     background: rgba(255, 255, 255, 0.8);
     color: var(--text-dark);
 }
+html[data-bs-theme="light"] .surface-panel .form-control,
+html[data-bs-theme="light"] .surface-panel .form-select,
+html[data-bs-theme="light"] .dark-box .form-control,
+html[data-bs-theme="light"] .dark-box .form-select {
+    color: var(--panel-text);
+    background-color: var(--control-bg);
+    border-color: var(--control-border);
+}
+html[data-bs-theme="light"] .form-control::placeholder {
+    color: var(--panel-muted);
+}
+html[data-bs-theme="light"] .surface-panel {
+    background: linear-gradient(145deg, #ffffff, #edf2f8);
+    color: var(--text-dark);
+    border-color: rgba(59, 130, 246, 0.3);
+    box-shadow: 0 12px 32px rgba(31, 58, 92, 0.08);
+}
 html[data-bs-theme="light"] .modal-content {
     background: #fff !important;
     color: var(--text-dark) !important;
diff --git a/Web/index.php b/Web/index.php
index 85b53c8..2000e7d 100644
--- a/Web/index.php
+++ b/Web/index.php
@@ -22,6 +22,7 @@ if (empty($_SESSION)) {
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="icon" href="img/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="css/bootstrap.css">
+    <link rel="stylesheet" href="css/modern.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
     <link rel="stylesheet" href="css/index.css">
     <script src="js/bootstrap.bundle.js"></script>
@@ -34,13 +35,14 @@ if (empty($_SESSION)) {
         </button>
     </div>
     
+    <div class="custom-container dark-box">
     <header class="row border-bottom m-5">
         <h1>USB RAID Array</h1>
     </header>
 
     <main>
         <section class="row m-3">
-            <article class="col border border-2 border-primary rounded p-2 fixed">
+            <article class="col border border-2 border-primary rounded p-2 fixed surface-panel">
                 <form action="content/login.php" method="post">
                     <div class="mb-3">
                         <label for="uname">Username:</label>
@@ -73,7 +75,8 @@ if (empty($_SESSION)) {
             </a>
         </div>
     </footer>
+    </div>
     
     <script src="js/theme.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>