diff --git a/index.html b/index.html
index 2cdd2f4..202acfe 100644
--- a/index.html
+++ b/index.html
@@ -20,12 +20,13 @@
       	font-feature-settings: "cv03", "cv04", "cv11";
       }
       .terminal-container {
-        height: 100%;
+        height: 70vh;
+        max-height: 70vh !important;
         width: 100%;
         background: #000;
-        padding: 10px;
+        padding: 0 !important;
         border-radius: 4px;
-        flex-grow: 1;
+        overflow: hidden;
       }
       
       /* Theme toggle fix */
@@ -144,8 +145,23 @@
         <!-- Page body -->
         <div class="page-body">
           <div class="container-fluid">
-            <div class="row row-deck row-cards" id="server-list-container">
-               <!-- Servers injected here -->
+            <div class="card">
+              <table class="table table-vcenter card-table">
+                <thead>
+                  <tr>
+                    <th>Status</th>
+                    <th>Name</th>
+                    <th>IP Address</th>
+                    <th>MAC Address</th>
+                    <th class="w-1">Actions</th>
+                  </tr>
+                </thead>
+                <tbody id="server-list">
+                </tbody>
+              </table>
+              <div id="loading-spinner" class="text-center p-5">
+                  <div class="spinner-border text-primary" role="status"></div>
+              </div>
             </div>
              <!-- Empty State -->
             <div id="no-servers-message" class="empty d-none">
@@ -248,7 +264,7 @@
             <h5 class="modal-title" id="terminal-title">Terminal</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close-terminal"></button>
           </div>
-          <div class="modal-body p-0 bg-black d-flex flex-column">
+          <div class="modal-body p-0 bg-black">
               <div id="terminal-container" class="terminal-container"></div>
           </div>
         </div>
@@ -373,73 +389,54 @@
       }
 
       function fetchServers() {
-          fetch("/servers").then(r => r.json()).then(data => {
-              const container = document.getElementById("server-list-container");
-              const empty = document.getElementById("no-servers-message");
+          fetch("/servers")
+            .then(r => r.json())
+            .then(data => {
+              const spinner = document.getElementById("loading-spinner");
+              const container = document.getElementById("server-list");
+              const empty = document.getElementById("no-servers-message"); // Re-targeting correct empty div if name changed in previous step, assuming "no-servers-message"
+              
+              if(spinner) spinner.classList.add("d-none");
               container.innerHTML = "";
 
               if(data && data.length > 0) {
-                  container.classList.remove("d-none");
+                  container.closest(".card").classList.remove("d-none"); // Show card
                   empty.classList.add("d-none");
                   
                   data.sort((a,b) => a.name.localeCompare(b.name));
 
                   data.forEach(s => {
-                      const div = document.createElement("div");
-                      div.className = "col-12 col-md-6 col-lg-4";
-                      div.innerHTML = `
-                        <div class="card">
-                          <div class="card-status-top bg-secondary" id="status-bar-${s.name}"></div>
-                          <div class="card-body">
-                            <div class="row align-items-center">
-                                <div class="col-auto">
-                                    <span class="avatar rounded" id="status-avatar-${s.name}">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-server" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M7 8l0 .01"></path><path d="M7 16l0 .01"></path></svg>
-                                    </span>
-                                </div>
-                                <div class="col">
-                                    <h3 class="card-title text-truncate mb-1">${s.name}</h3>
-                                    <div class="text-secondary text-truncate">${s.ip}</div>
-                                </div>
-                                <div class="col-auto">
-                                   <div class="dropdown">
-                                      <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>
-                                      </a>
-                                      <div class="dropdown-menu dropdown-menu-end">
-                                        <a href="#" class="dropdown-item" onclick="editServer('${s.name}', '${s.ip}', '${s.mac}', '${(s.ssh_user||"").replace(/'/g, "\\'")}', '${(s.ssh_pass||"").replace(/'/g, "\\'")}')">Edit</a>
-                                        <a href="#" class="dropdown-item text-danger" onclick="deleteServer('${s.name}')">Delete</a>
-                                      </div>
-                                   </div>
-                                </div>
-                            </div>
-                            <div class="mt-3 row">
-                                <div class="col">Status: <span id="status-text-${s.name}" class="badge bg-secondary-lt">Checking</span></div>
+                      const tr = document.createElement("tr");
+                      tr.innerHTML = `
+                        <td><span id="status-text-${s.name}" class="badge bg-secondary-lt">Checking</span></td>
+                        <td><div class="font-weight-medium">${s.name}</div></td>
+                        <td class="text-secondary">${s.ip}</td>
+                        <td class="text-secondary">${s.mac}</td>
+                        <td>
+                          <div class="btn-list flex-nowrap">
+                            <a href="#" onclick="openTerminal('${s.name}')" class="btn btn-icon" title="Terminal" data-bs-toggle="tooltip">
+                               <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><path d="M13 15l3 0" /><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>
+                            </a>
+                            <a href="#" onclick="wakeServer('${s.name}')" class="btn btn-icon" title="Wake-on-LAN" data-bs-toggle="tooltip">
+                               <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-power" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 6a7.75 7.75 0 1 0 10 0" /><path d="M12 4l0 8" /></svg>
+                            </a>
+                            <div class="dropdown">
+                              <button class="btn btn-icon dropdown-toggle align-text-top" data-bs-boundary="viewport" data-bs-toggle="dropdown"></button>
+                              <div class="dropdown-menu dropdown-menu-end">
+                                <a class="dropdown-item" onclick="editServer('${s.name}', '${s.ip}', '${s.mac}', '${(s.ssh_user||"").replace(/'/g, "\\'")}', '${(s.ssh_pass||"").replace(/'/g, "\\'")}')">Edit</a>
+                                <a class="dropdown-item" onclick="rebootServer('${s.name}')">Reboot</a>
+                                <a class="dropdown-item" onclick="shutdownServer('${s.name}')">Shutdown</a>
+                                <a class="dropdown-item text-danger" onclick="deleteServer('${s.name}')">Delete</a>
+                              </div>
                             </div>
                           </div>
-                          <div class="card-footer">
-                            <div class="d-flex justify-content-between">
-                                <a href="#" onclick="openTerminal('${s.name}')" class="btn btn-ghost-primary btn-icon" title="Terminal" data-bs-toggle="tooltip">
-                                   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-terminal-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><path d="M13 15l3 0" /><path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" /></svg>
-                                </a>
-                                <a href="#" onclick="wakeServer('${s.name}')" class="btn btn-ghost-success btn-icon" title="Wake-on-LAN" data-bs-toggle="tooltip">
-                                   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-power" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 6a7.75 7.75 0 1 0 10 0" /><path d="M12 4l0 8" /></svg>
-                                </a>
-                                <a href="#" onclick="rebootServer('${s.name}')" class="btn btn-ghost-warning btn-icon" title="Reboot" data-bs-toggle="tooltip">
-                                   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-refresh" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
-                                </a>
-                                <a href="#" onclick="shutdownServer('${s.name}')" class="btn btn-ghost-danger btn-icon" title="Shutdown" data-bs-toggle="tooltip">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-plug" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9.785 6l8.215 8.215l-2.054 2.054a5.81 5.81 0 1 1 -8.215 -8.215l2.054 -2.054z" /><path d="M4 20l3.5 -3.5" /><path d="M15 4l-3.5 3.5" /><path d="M20 9l-3.5 3.5" /></svg>
-                                </a>
-                            </div>
-                          </div>
-                        </div>
+                        </td>
                       `;
-                      container.appendChild(div);
+                      container.appendChild(tr);
                       checkStatus(s.name);
                   });
               } else {
-                  container.classList.add("d-none");
+                  container.closest(".card").classList.add("d-none"); // Hide card
                   empty.classList.remove("d-none");
               }
           });
@@ -448,8 +445,6 @@
       function checkStatus(name) {
           fetch(`/status?name=${name}`).then(r => r.text()).then(status => {
               const badge = document.getElementById(`status-text-${name}`);
-              const bar = document.getElementById(`status-bar-${name}`);
-              const avatar = document.getElementById(`status-avatar-${name}`);
               
               if(!badge) return;
               badge.textContent = status;
@@ -457,12 +452,8 @@
               
               if(status === "Online") {
                   badge.classList.add("bg-success-lt");
-                  bar.className = "card-status-top bg-success";
-                  avatar.className = "avatar rounded bg-success-lt text-success";
               } else {
                   badge.classList.add("bg-danger-lt");
-                  bar.className = "card-status-top bg-danger";
-                  avatar.className = "avatar rounded bg-danger-lt text-danger";
               }
           });
       }
diff --git a/webserver/terminal.go b/webserver/terminal.go
index 8a77be0..e3eb4ac 100644
--- a/webserver/terminal.go
+++ b/webserver/terminal.go
@@ -86,6 +86,14 @@ func (ws *WebServer) handleSSH(w http.ResponseWriter, r *http.Request) {
 		fmt.Sscanf(r.URL.Query().Get("cols"), "%d", &cols)
 	}
 
+	// Sanity check for dimensions
+	if rows <= 0 {
+		rows = 24
+	}
+	if cols <= 0 {
+		cols = 80
+	}
+
 	if err := session.RequestPty("xterm-256color", rows, cols, modes); err != nil {
 		conn.WriteMessage(websocket.TextMessage, []byte(fmt.Sprintf("\r\n[Error] Request for PTY failed: %v\r\n", err)))
 		return