diff --git a/app-code/account/manage_users.php b/app-code/account/manage_users.php
index d9c5cf8..61f9e8e 100644
--- a/app-code/account/manage_users.php
+++ b/app-code/account/manage_users.php
@@ -16,55 +16,115 @@ if (!isset($_SESSION["logged_in"]) || $_SESSION["logged_in"] !== true || !is_adm
       include "../assets/components.php";
       print_csrf_script();
     ?>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
-<div class="container mt-5">
-    <h1 class="mb-4">User Management</h1>
-    <table class="table table-bordered">
-        <thead>
-        <tr>
-            <th>ID</th>
-            <th>Username</th>
-            <th>Actions</th>
-        </tr>
-        </thead>
-        <tbody id="userTableBody">
-        <!-- User rows will be dynamically inserted here -->
-        </tbody>
-    </table>
+<div class="container my-5">
+    <div class="row justify-content-center">
+      <div class="col-md-8 col-lg-6">
+        <div class="card shadow">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+              <h4 class="card-title mb-0">User Management</h4>
+              <a href="/account/" class="btn btn-outline-secondary btn-sm"><span class="material-icons" style="font-size: 18px; vertical-align: middle;">arrow_back</span> Back</a>
+            </div>
+            <div class="table-responsive">
+              <table class="table table-dark table-hover align-middle mb-0">
+                  <thead>
+                  <tr>
+                      <th>ID</th>
+                      <th>Username</th>
+                      <th class="text-end">Actions</th>
+                  </tr>
+                  </thead>
+                  <tbody id="userTableBody">
+                  </tbody>
+              </table>
+            </div>
+            <p id="noUsersMessage" class="text-muted text-center mt-3 mb-0" style="display:none;">No users found.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Confirm Deletion</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                Are you sure you want to delete user <strong id="deleteUserName"></strong>?
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="responseModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="responseModalLabel">Message</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="responseModalMessage"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script>
+    let pendingDeleteId = null;
+
     async function fetchUsers() {
         try {
             const response = await fetch('/api/manage/fetch_users.php');
             const data = await response.json();
 
-            if (data.success) {
-                const userTableBody = document.getElementById('userTableBody');
-                userTableBody.innerHTML = ''; // Clear existing rows
+            const userTableBody = document.getElementById('userTableBody');
+            const noMsg = document.getElementById('noUsersMessage');
+            userTableBody.innerHTML = '';
 
+            if (data.success && data.data.length > 0) {
+                noMsg.style.display = 'none';
                 data.data.forEach(user => {
                     const row = document.createElement('tr');
                     row.innerHTML = `
-                        <td>${user.id}</td>
+                        <td class="text-muted">${user.id}</td>
                         <td>${user.username}</td>
-                        <td>
-                            <button class="btn btn-danger btn-sm" onclick="deleteUser(${user.id})">Delete</button>
+                        <td class="text-end">
+                            <button class="btn btn-outline-danger btn-sm" onclick="showDeleteConfirm(${user.id}, '${user.username.replace(/'/g, "\\'")}')">Delete</button>
                         </td>
                     `;
                     userTableBody.appendChild(row);
                 });
             } else {
-                console.error(data.message);
+                noMsg.style.display = 'block';
             }
         } catch (error) {
             console.error('Error fetching users:', error);
         }
     }
 
-    async function deleteUser(userId) {
-        if (!confirm('Are you sure you want to delete this user?')) return;
+    function showDeleteConfirm(userId, username) {
+        pendingDeleteId = userId;
+        document.getElementById('deleteUserName').textContent = username;
+        new bootstrap.Modal(document.getElementById('confirmModal')).show();
+    }
+
+    document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
+        if (pendingDeleteId === null) return;
+        const userId = pendingDeleteId;
+        pendingDeleteId = null;
+        bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
 
         try {
             const response = await fetch(`/api/manage/delete_user.php?id=${userId}`, {
@@ -76,18 +136,23 @@ if (!isset($_SESSION["logged_in"]) || $_SESSION["logged_in"] !== true || !is_adm
             const data = await response.json();
 
             if (data.success) {
-                alert('User deleted successfully!');
-                fetchUsers(); // Refresh the user list
+                showResponseModal('Success', 'User deleted successfully!');
+                fetchUsers();
             } else {
-                alert(`Error: ${data.message}`);
+                showResponseModal('Error', data.message || 'Failed to delete user.');
             }
         } catch (error) {
-            console.error('Error deleting user:', error);
+            showResponseModal('Error', 'An error occurred. Please try again.');
         }
+    });
+
+    function showResponseModal(title, message) {
+        document.getElementById('responseModalLabel').textContent = title;
+        document.getElementById('responseModalMessage').textContent = message;
+        new bootstrap.Modal(document.getElementById('responseModal')).show();
     }
 
-    // Fetch users on page load
     fetchUsers();
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
