diff --git a/fileManager.js b/fileManager.js
index 12ce0f7..0f96102 100644
--- a/fileManager.js
+++ b/fileManager.js
@@ -202,10 +202,10 @@ export function renderFileTable(folder) {
             <td class="hide-small hide-medium nowrap">${safeUploader}</td>
             <td>
               <div class="button-wrap">
-                <a class="btn btn-sm btn-success" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
+                <a class="btn btn-sm btn-success ml-2" href="${folderPath + encodeURIComponent(file.name)}" download>Download</a>
                 ${isEditable ? `<button class="btn btn-sm btn-primary ml-2" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Edit</button>` : ""}
-                <button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Rename</button>
                 ${previewButton}
+                <button class="btn btn-sm btn-warning ml-2" onclick='renameFile(${JSON.stringify(file.name)}, ${JSON.stringify(folder)})'>Rename</button>
               </div>
             </td>
           </tr>
@@ -600,6 +600,32 @@ function getModeForFile(fileName) {
   }
 }
 
+function adjustEditorSize() {
+  const modal = document.querySelector(".editor-modal");
+  if (modal && window.currentEditor) {
+    // Get modal height
+    const modalHeight = modal.getBoundingClientRect().height || 600;
+
+    // Keep 70% of modal height for the editor, but allow it to shrink
+    const newEditorHeight = Math.max(modalHeight * 0.80, 5) + "px";
+
+    console.log("Adjusting editor height to:", newEditorHeight); // Debugging output
+
+    // Apply new height to the editor
+    window.currentEditor.setSize("100%", newEditorHeight);
+  }
+}
+
+function observeModalResize(modal) {
+  if (!modal) return;
+
+  const resizeObserver = new ResizeObserver(() => {
+    adjustEditorSize();
+  });
+
+  resizeObserver.observe(modal);
+}
+
 export function editFile(fileName, folder) {
   console.log("Edit button clicked for:", fileName);
 
@@ -639,17 +665,20 @@ export function editFile(fileName, folder) {
       modal.id = "editorContainer";
       modal.classList.add("modal", "editor-modal");
       modal.innerHTML = `
+      <div class="editor-header">
         <h3 class="editor-title">Editing: ${fileName}</h3>
-        <div id="editorControls" class="editor-controls">
-           <button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
-           <button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
-        </div>
-        <textarea id="fileEditor" class="editor-textarea">${content}</textarea>
-        <div class="editor-footer">
-          <button id="saveBtn" class="btn btn-primary">Save</button>
-          <button id="closeBtn" class="btn btn-secondary">Close</button>
-        </div>
-      `;
+        <button id="closeEditorX" class="editor-close-btn">&times;</button>
+      </div>
+      <div id="editorControls" class="editor-controls">
+         <button id="decreaseFont" class="btn btn-sm btn-secondary">A-</button>
+         <button id="increaseFont" class="btn btn-sm btn-secondary">A+</button>
+      </div>
+      <textarea id="fileEditor" class="editor-textarea">${content}</textarea>
+      <div class="editor-footer">
+        <button id="saveBtn" class="btn btn-primary">Save</button>
+        <button id="closeBtn" class="btn btn-secondary">Close</button>
+      </div>
+    `;
 
       document.body.appendChild(modal);
       modal.style.display = "block";
@@ -659,21 +688,35 @@ export function editFile(fileName, folder) {
       const isDarkMode = document.body.classList.contains("dark-mode");
       const theme = isDarkMode ? "material-darker" : "default";
 
+      // Initialize CodeMirror
+      // Initialize CodeMirror
       const editor = CodeMirror.fromTextArea(document.getElementById("fileEditor"), {
         lineNumbers: true,
         mode: mode,
         theme: theme,
         viewportMargin: Infinity
       });
-
-      editor.setSize("100%", "60vh");
+      
+      // Ensure height adjustment
       window.currentEditor = editor;
+      
+      // Adjust height AFTER modal appears
+      setTimeout(() => {
+        adjustEditorSize(); // Set initial height
+      }, 50);
+      
+      // Attach modal resize observer
+      observeModalResize(modal);
 
       // Font size control
       let currentFontSize = 14;
       editor.getWrapperElement().style.fontSize = currentFontSize + "px";
       editor.refresh();
 
+      document.getElementById("closeEditorX").addEventListener("click", function () {
+        modal.remove();
+      });
+      
       document.getElementById("decreaseFont").addEventListener("click", function () {
         currentFontSize = Math.max(8, currentFontSize - 2);
         editor.getWrapperElement().style.fontSize = currentFontSize + "px";
diff --git a/index.html b/index.html
index ea9346f..5afa110 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
 
   <!-- Custom Toast Container -->
   <div id="customToast"></div>
-  <div class="container">
+  <div class="container-fluid">
     <!-- Login Form -->
     <div class="row" id="loginForm">
       <div class="col-12">
diff --git a/styles.css b/styles.css
index a2f0b19..bee65d2 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,27 @@ body {
   margin-top: 20px;
 }
 
+.container-fluid {
+  padding-left: 5px !important;  /* Default padding for small screens */
+  padding-right: 5px !important;
+  margin-top: 20px;    /* Restores space below the header */
+}
+
+/* Increase left/right padding for larger screens */
+@media (min-width: 768px) {
+  .container-fluid {
+    padding-left: 50px !important;
+    padding-right: 50px !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container-fluid {
+    padding-left: 100px !important;  /* More space on extra-large screens */
+    padding-right: 100px !important;
+  }
+}
+
 /* ===========================================================
    HEADER & NAVIGATION
    =========================================================== */
@@ -352,12 +373,72 @@ body.dark-mode .modal .modal-content {
   border-color: #444;
 }
 
-/* Editor Modal */
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10px;
+}
+
+body.dark-mode .editor-header {
+  background-color: #2c2c2c;
+}
+
+/* Editor Modal Close Button - Perfectly Centered */
+/* Fully Centered Close Button with Slight X Adjustment */
+.editor-close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 20px; /* Keep it readable */
+  font-weight: bold;
+  cursor: pointer;
+  z-index: 1000;
+
+  /* Perfectly Sized Circular Button */
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  text-align: center;
+
+  /* Fix X alignment */
+  line-height: 30px; /* Slightly reduce so "X" moves up */
+  
+  color: #ff4d4d;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 2px solid transparent;
+  transition: all 0.3s ease-in-out;
+}
+
+/* Hover Effect */
+.editor-close-btn:hover {
+  color: white;
+  background-color: #ff4d4d;
+  box-shadow: 0px 0px 6px rgba(255, 77, 77, 0.8);
+  transform: scale(1.05);
+}
+
+/* Dark Mode Fix */
+body.dark-mode .editor-close-btn {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: #ff6666;
+}
+
+body.dark-mode .editor-close-btn:hover {
+  background-color: #ff6666;
+  color: #000;
+}
+
+/* Default Editor Modal */
 .editor-modal {
   position: fixed;
   top: 50%;
   left: 50%;
-  transform: translate(5%, 10%);
+  transform: translate(5%, 5%);
   background-color: #fff;
   padding: 20px;
   border: 1px solid #ccc;
@@ -366,18 +447,69 @@ body.dark-mode .modal .modal-content {
   max-width: 90vw;
   min-width: 400px;
   height: 600px;
-  max-height: 80vh;
-  overflow: auto;
   resize: both;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
 }
+
+/* Dark mode styling */
 body.dark-mode .editor-modal {
   background-color: #2c2c2c;
   color: #e0e0e0;
   border-color: #444;
 }
 
+/* 🔹 Small Screens: Adjust Position */
+@media (max-width: 768px) {
+  .editor-modal {
+    top: 0%;
+    left: 0%;
+    transform: translate(4%, 4%) !important;  /* Reset transform */
+    width: 90vw !important;  /* Expand width */
+    max-height: 90vh;
+    padding: 15px;
+    min-width: auto !important;  /* Remove min-width restriction */
+  }
+}
+.editor-title {
+  white-space: nowrap !important; /* Prevents wrapping */
+  overflow: hidden !important; /* Hides overflow */
+  text-overflow: ellipsis !important; /* Adds "..." when text is too long */
+  font-size: 1.5rem; /* Default font size */
+  max-width: 95%;
+  display: block; /* Ensures it's a block element for proper sizing */
+}
+
+@media (max-width: 600px) {
+  .editor-title {
+    font-size: 1.2rem; /* Smaller font size on small screens */
+    max-width: 95%; /* Ensures it doesn't overflow the container */
+  }
+}
+
+.editor-controls {
+  text-align: right;
+  margin-bottom: 5px;
+}
+
+.editor-textarea {
+  flex-grow: 1;
+  min-height: 5px !important;  /* Allow shrinking */
+  height: auto !important;     /* Let JavaScript control height */
+  max-height: 100vh !important; /* Prevent overflow */
+  resize: none;
+  overflow: auto;
+}
+
+.editor-footer {
+  margin-top: 10px;
+  text-align: right;
+}
+
 /* ===========================================================
    LOGOUT & USER CONTROLS
    =========================================================== */
@@ -570,6 +702,8 @@ body.dark-mode .editor-modal {
   background-color: transparent;
   border-collapse: collapse !important;
   border-spacing: 0 !important;
+  table-layout: auto !important; /* Ensures flexible column widths */
+  width: 100% !important;
 }
 
 #fileList table tr:nth-child(even) {
@@ -583,6 +717,22 @@ body.dark-mode #fileList table tr:hover {
   background-color: #444;
 }
 
+#fileListTitle {
+  white-space: normal !important;  /* Allow text to wrap */
+  word-wrap: break-word !important; /* Break long words */
+  overflow-wrap: break-word !important; /* Ensure compatibility */
+  max-width: 100% !important; /* Prevent it from going outside the container */
+  display: block !important; /* Ensure it behaves as a block element */
+  text-align: left !important; /* Keep it aligned properly */
+}
+
+/* Small screens: Reduce font size for better wrapping */
+@media (max-width: 600px) {
+  #fileListTitle {
+    font-size: 1.4rem !important; /* Adjust size for smaller screens */
+  }
+}
+
 #fileList table tr {
   box-shadow: none; 
   border: none !important;
@@ -597,8 +747,56 @@ body.dark-mode #fileList table tr {
 #fileList table th, 
 #fileList table td {
   border: none !important;
+  white-space: nowrap; /* Prevents wrapping for all other columns */
 }
 
+/* Ensure only File Name column wraps */
+#fileList table th[data-column="name"],
+#fileList table td:nth-child(2) {
+  white-space: normal !important;  /* Allow wrapping */
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+  word-break: break-word !important;
+  text-align: left !important;
+  line-height: 1.2 !important; /* Reduce spacing between lines */
+  padding: 8px 10px !important; /* Adjust padding for better fit */
+
+  /* Default (Small Screens) */
+  max-width: 200px !important;
+  min-width: 120px !important;
+}
+
+/* Medium Screens */
+@media (min-width: 500px) {
+  #fileList table th[data-column="name"],
+  #fileList table td:nth-child(2) {
+    max-width: 250px !important;
+    min-width: 120px !important;
+  }
+}
+
+/* Large Screens */
+@media (min-width: 1024px) {
+  #fileList table th[data-column="name"],
+  #fileList table td:nth-child(2) {
+    max-width: 280px !important;
+    min-width: 180px !important;
+  }
+}
+
+/* Ensure all other columns stay in one line */
+#fileList table th:not([data-column="name"]),
+#fileList table td:not(:nth-child(2)) {
+  white-space: nowrap !important;
+}
+
+/* Reduce excessive row height */
+#fileList table td {
+  vertical-align: middle !important; /* Keep content centered */
+  padding: 8px 10px !important; /* Reduce excess padding */
+}
+
+
 /* ===========================================================
    HEADINGS & FORM LABELS
    =========================================================== */
@@ -640,6 +838,21 @@ label {
   margin-bottom: 20px;
 }
 
+@media (max-width: 768px) {
+  #uploadFolderRow .col-md-6 {
+    margin-bottom: 15px; /* Adjust the spacing between stacked cards */
+  }
+
+  #uploadFolderRow .col-md-6:last-child {
+    margin-bottom: 0; /* Remove extra spacing from the last stacked card */
+  }
+}
+
+.card-header {
+  font-size: 1.2rem; /* Increase font size */
+  font-weight: bold; /* Make it bold */
+}
+
 .card-body .form-group {
   margin-bottom: 5px !important;
 }
@@ -747,20 +960,32 @@ body.dark-mode .folder-option:hover {
 
 /* Button Wrap */
 .button-wrap {
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
-  align-items: left;
-  gap: 2px;
+  row-gap: 5px; /* Removes vertical gap */
+  column-gap: 0px; /* Optional: Keeps a small horizontal gap */
 }
 
+/* Center-align on small screens */
 @media (max-width: 500px) {
   .button-wrap {
-    display: flex;
     width: 100%;
-    justify-content: center;
   }
 }
 
+.button-wrap .btn {
+  align-items: center;
+  height: 32px !important;  /* Adjust as needed to match Download/Rename */
+  font-size: 14px !important;  /* Keeps text aligned */
+}
+
+/* Ensure Material Icons inside buttons do not enlarge buttons */
+.button-wrap .btn i.material-icons {
+  font-size: 16px !important;  /* Match text size */
+  line-height: 1 !important;
+  vertical-align: middle !important; /* Align icon with text */
+}
+
 /* File List Section */
 #fileListContainer {
   padding: 10px;
@@ -788,17 +1013,17 @@ body.dark-mode #fileListContainer {
   #fileListContainer > h2,
   #fileListContainer > .file-list-actions,
   #fileListContainer > #fileList {
-    margin-left: 10px; /* Smaller adjustment for mobile */
+    margin-left: 1px; /* Smaller adjustment for mobile */
   }
 }
 
 .col-12.col-md-4.text-left {
-  margin-left: -10px; /* Adjust the value as needed */
+  margin-left: -15px; /* Adjust the value as needed */
 }
 
-@media (max-width: 768px) {
+@media (max-width: 600px) {
   .col-12.col-md-4.text-left {
-    margin-left: -10px; /* Slightly adjust for smaller screens */
+    margin-left: -15px; /* Slightly adjust for smaller screens */
   }
 }
 
@@ -879,6 +1104,7 @@ body.dark-mode #fileListContainer {
   
   .folder-option {
     cursor: pointer;
+    
   }
 
   #folderTreeContainer {
@@ -888,32 +1114,94 @@ body.dark-mode #fileListContainer {
 /* ===========================================================
    FILE MANAGER INLINE STYLE REMOVAL - New Classes
    =========================================================== */
-.image-preview-modal-content {
-  max-width: 90vw;
-  max-height: 90vh;
-  background: #fff;
-  padding: 20px;
-  border-radius: 4px;
-  overflow: auto;
-  margin: auto;
-  position: relative;
-}
-body.dark-mode .image-preview-modal-content {
-  background: #2c2c2c;
-  border-color: #444;
-}
-
+  
+  .image-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap; /* Allows filename to wrap */
+    text-align: center;
+    min-height: 30px; /* Ensures enough space if wrapping */
+    margin: 0 auto 10px; /* Centers it properly */
+    padding: 10px;
+    width: 95%;
+  }
+  
+  .image-preview-modal-content {
+    max-width: 90vw;
+    max-height: 90vh;
+    background: #fff;
+    padding: 20px;
+    border-radius: 4px;
+    overflow: hidden !important;  /* Prevents unexpected scrolling */
+    margin: auto;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  body.dark-mode .image-preview-modal-content {
+    background: #2c2c2c;
+    border-color: #444;
+  }
+  
+  /* Ensure the image resizes properly */
+  .image-modal-img {
+    max-width: 100%;
+    max-height: 80vh;  /* Ensure it doesn't force a scrollbar */
+    object-fit: contain;  /* Prevents stretching */
+    display: block;
+    margin: 0 auto;
+  }
+  
+/* Image Preview Close Button (Same as Editor, Adjusted X Position) */
+/* Image Preview Close Button (Perfect Alignment) */
 .close-image-modal {
   position: absolute;
   top: 10px;
-  right: 20px;
-  font-size: 28px;
+  right: 15px;
+  font-size: 24px; /* Ensures X is same size */
+  font-weight: bold;
   cursor: pointer;
+  z-index: 1000;
+  color: #ff4d4d;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  width: 32px; /* Ensures exact width */
+  height: 32px; /* Ensures exact height */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1; /* Fixes text alignment */
+  padding-bottom: 2px; /* Moves X up slightly */
+  transition: all 0.3s ease-in-out;
 }
 
-.image-modal-header {
-  text-align: center;
-  margin: 0 0 10px;
+/* Hover Effect */
+.close-image-modal:hover {
+  color: white;
+  background-color: #ff4d4d;
+  box-shadow: 0px 0px 6px rgba(255, 77, 77, 0.8);
+  transform: scale(1.05); /* Keeps position even on hover */
+}
+
+/* Dark Mode Adjustments */
+body.dark-mode .close-image-modal {
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ff6666;
+}
+
+body.dark-mode .close-image-modal:hover {
+  background-color: #ff6666;
+  color: #000;
+}
+
+/* Fix Dark Mode */
+body.dark-mode .image-preview-modal-content {
+  background: #2c2c2c;
+  border-color: #444;
 }
 
 .image-modal-img {
@@ -933,13 +1221,6 @@ body.dark-mode .image-preview-modal-content {
   cursor: pointer;
 }
 
-.file-preview-img {
-  max-width: 100px;
-  max-height: 100px;
-  margin-right: 5px;
-  margin-left: 0;
-}
-
 .file-icon {
   color: #333;
   margin-right: 0;
@@ -947,22 +1228,6 @@ body.dark-mode .image-preview-modal-content {
   font-size: 32px;
 }
 
-.editor-controls {
-  text-align: right;
-  margin-bottom: 5px;
-}
-
-.editor-textarea {
-  width: 100%;
-  height: 60%;
-  resize: none;
-}
-
-.editor-footer {
-  margin-top: 10px;
-  text-align: right;
-}
-
 .bottom-select {
   display: inline-block;
   width: auto !important;
@@ -1000,22 +1265,58 @@ body.dark-mode .image-preview-modal-content {
   font-size: 16px;
 }
 
+/* Upload row stays a row */
 .upload-file-row {
   display: flex;
   align-items: center;
   justify-content: center;
+  word-break: break-word;
 }
 
-.file-info-container {
-  margin-left: 10px;
-  font-size: 16px;
+/* New wrapper ensures File Info appears below */
+.file-info-wrapper {
   display: flex;
+  flex-direction: column; /* Stack content below */
+  justify-content: center !important; /* Keep it centered */
+  align-items: center !important;
+  margin-top: 10px; /* Add spacing */
+}
+
+/* Ensure file info wraps properly */
+.file-info-container {
+  display: flex;
+  flex-wrap: wrap !important; /* Allow wrapping */
+  justify-content: center !important; /* Keep it centered */
   align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
 }
 
 .file-preview-container {
-  display: inline-block;
-  vertical-align: middle;
+  display: flex !important;  /* Use flex to control layout */
+  flex-wrap: wrap !important; /* Allow wrapping */
+  justify-content: center !important; /* Keep it centered */
+  align-items: center !important; /* Align items properly */
+  gap: 5px !important; /* Small spacing between previews */
+  max-width: 100% !important; /* Prevent overflow */
+  text-align: center !important;
+}
+
+/* Ensure images are responsive */
+.file-preview-img {
+  max-width: 100px;
+  max-height: 100px;
+  margin-right: 5px;
+  justify-content: center !important; /* Keep it centered */
+  height: auto;
+  display: block !important; /* Prevent spacing issues */
+}
+
+/* Small screens: Ensure it wraps properly */
+@media (max-width: 600px) {
+  .file-preview-container {
+    justify-content: center !important;
+  }
 }
 
 .file-name-display {
diff --git a/upload.js b/upload.js
index bbdd1f6..c3fe401 100644
--- a/upload.js
+++ b/upload.js
@@ -12,22 +12,26 @@ export function initUpload() {
   // Helper function: set the drop area's default layout using CSS classes.
   function setDropAreaDefault() {
     if (dropArea) {
-      dropArea.innerHTML = `
-        <div id="uploadInstruction" class="upload-instruction">
-          Drop files here or click 'Choose files'
-        </div>
-        <div id="uploadFileRow" class="upload-file-row">
-          <button id="customChooseBtn" type="button">
-           Choose files
-          </button>
-          <div id="fileInfoContainer" class="file-info-container">
-            <span id="fileInfoDefault">No files selected</span>
+        dropArea.innerHTML = `
+          <div id="uploadInstruction" class="upload-instruction">
+            Drop files here or click 'Choose files'
           </div>
-        </div>
-      `;
-      // (Optional: wire up the custom button if needed.)
+          
+          <div id="uploadFileRow" class="upload-file-row">
+            <button id="customChooseBtn" type="button">
+              Choose files
+            </button>
+          </div>
+
+          <!-- New wrapper below the upload row -->
+          <div id="fileInfoWrapper" class="file-info-wrapper">
+            <div id="fileInfoContainer" class="file-info-container">
+              <span id="fileInfoDefault">No files selected</span>
+            </div>
+          </div>
+        `;
     }
-  }
+}
 
   // Initialize drop area.
   if (dropArea) {