diff --git a/handlers.py b/handlers.py
index 4ce2576..1355dcf 100644
--- a/handlers.py
+++ b/handlers.py
@@ -222,16 +222,66 @@ class FileServerHandler(BaseHTTPRequestHandler):
             <div class="quota-info">
                 Quota: {available_mb} MB | Used: {used_mb:.2f} MB
             </div>
-            <form method="POST" enctype="multipart/form-data" action="/upload">
+
+            <!-- Upload Form -->
+            <form id="uploadForm" enctype="multipart/form-data" action="/upload" method="post">
                 <input class="regular-button" type="file" name="file" required>
                 <button class="regular-button" type="submit">Upload</button>
             </form>
+
+            <!-- Progress Container -->
+            <div id="progressContainer" style="display:none; margin-top: 10px;">
+                <label for="uploadProgress">Uploading:</label>
+                <progress id="uploadProgress" value="0" max="100"></progress>
+                <span id="percentLabel">0%</span>
+            </div>
+
             <hr>
             {files_html if files_html else "<p>No files yet.</p>"}
             <p>
                 <a class="back-btn" href="/logout">Logout</a>
                 <a class="back-btn" href="/">Back to Home</a>
             </p>
+
+            <script>
+                document.getElementById('uploadForm').addEventListener('submit', function(e) {{
+                    e.preventDefault();
+                    const formData = new FormData(this);
+                    const xhr = new XMLHttpRequest();
+
+                    // Show progress container
+                    const progressContainer = document.getElementById('progressContainer');
+                    const progressBar = document.getElementById('uploadProgress');
+                    const percentLabel = document.getElementById('percentLabel');
+
+                    progressContainer.style.display = 'block';
+                    progressBar.value = 0;
+                    percentLabel.textContent = '0%';
+
+                    xhr.upload.addEventListener('progress', function(evt) {{
+                        if (evt.lengthComputable) {{
+                            const percentComplete = Math.round((evt.loaded / evt.total) * 100);
+                            progressBar.value = percentComplete;
+                            percentLabel.textContent = percentComplete + '%';
+                        }}
+                    }});
+
+                    xhr.onload = function() {{
+                        if (xhr.status === 200 || xhr.status === 302) {{
+                            window.location.reload(); // Reload to see uploaded file
+                        }} else {{
+                            alert('Upload failed.');
+                        }}
+                    }};
+
+                    xhr.onerror = function() {{
+                        alert('Network error occurred.');
+                    }};
+
+                    xhr.open("POST", "/upload");
+                    xhr.send(formData);
+                }});
+            </script>
         </body>
         </html>
         """