diff --git a/src/ui-styles.ts b/src/ui-styles.ts
index 47b69a7..c6fdfbb 100644
--- a/src/ui-styles.ts
+++ b/src/ui-styles.ts
@@ -1622,12 +1622,13 @@ const styles = `
     .tools-modal-content {
         background-color: var(--vscode-editor-background);
         border: 1px solid var(--vscode-panel-border);
-        border-radius: 6px;
-        width: 500px;
-        max-height: 600px;
+        border-radius: 8px;
+        width: 700px;
+        max-width: 90vw;
+        max-height: 80vh;
         display: flex;
         flex-direction: column;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     }
 
     .tools-modal-header {
@@ -1667,6 +1668,30 @@ const styles = `
         overflow-y: auto;
     }
 
+    /* MCP Modal content area improvements */
+    #mcpModal * {
+        box-sizing: border-box;
+    }
+
+    #mcpModal .tools-list {
+        padding: 24px;
+        max-height: calc(80vh - 120px);
+        overflow-y: auto;
+        width: 100%;
+    }
+
+    #mcpModal .mcp-servers-list {
+        padding: 0;
+    }
+
+    #mcpModal .mcp-add-server {
+        padding: 0;
+    }
+
+    #mcpModal .mcp-add-form {
+        padding: 12px;
+    }
+
     .tool-item {
         display: flex;
         align-items: flex-start;
@@ -2310,20 +2335,26 @@ const styles = `
 
     /* MCP Servers styles */
     .mcp-servers-list {
-        margin-bottom: 20px;
-        max-height: 400px;
+        max-height: 500px;
         overflow-y: auto;
+        padding: 4px;
     }
 
     .mcp-server-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 12px 16px;
+        padding: 20px 24px;
         border: 1px solid var(--vscode-panel-border);
-        border-radius: 6px;
-        margin-bottom: 8px;
+        border-radius: 8px;
+        margin-bottom: 16px;
         background-color: var(--vscode-editor-background);
+        transition: all 0.2s ease;
+    }
+
+    .mcp-server-item:hover {
+        border-color: var(--vscode-focusBorder);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
 
     .server-info {
@@ -2332,33 +2363,35 @@ const styles = `
 
     .server-name {
         font-weight: 600;
-        font-size: 14px;
+        font-size: 16px;
         color: var(--vscode-foreground);
-        margin-bottom: 4px;
+        margin-bottom: 8px;
     }
 
     .server-type {
         display: inline-block;
         background-color: var(--vscode-badge-background);
         color: var(--vscode-badge-foreground);
-        padding: 2px 6px;
+        padding: 4px 8px;
         border-radius: 4px;
-        font-size: 10px;
+        font-size: 11px;
         font-weight: 500;
-        margin-bottom: 4px;
+        margin-bottom: 8px;
     }
 
     .server-config {
-        font-size: 12px;
+        font-size: 13px;
         color: var(--vscode-descriptionForeground);
-        opacity: 0.8;
+        opacity: 0.9;
+        line-height: 1.4;
     }
 
     .server-delete-btn {
-        padding: 4px 8px;
-        font-size: 12px;
+        padding: 8px 16px;
+        font-size: 13px;
         color: var(--vscode-errorForeground);
         border-color: var(--vscode-errorForeground);
+        min-width: 80px;
     }
 
     .server-delete-btn:hover {
@@ -2368,19 +2401,26 @@ const styles = `
 
     .mcp-add-server {
         text-align: center;
-        margin-bottom: 20px;
+        margin-bottom: 24px;
+        padding: 0 4px;
     }
 
     .mcp-add-form {
         background-color: var(--vscode-editor-background);
         border: 1px solid var(--vscode-panel-border);
-        border-radius: 6px;
-        padding: 16px;
-        margin-top: 16px;
+        border-radius: 8px;
+        padding: 24px;
+        margin-top: 20px;
+        max-height: 400px;
+        overflow-y: auto;
+        box-sizing: border-box;
+        width: 100%;
     }
 
     .form-group {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+        box-sizing: border-box;
+        width: 100%;
     }
 
     .form-group label {
@@ -2395,6 +2435,7 @@ const styles = `
     .form-group select,
     .form-group textarea {
         width: 100%;
+        max-width: 100%;
         padding: 8px 12px;
         border: 1px solid var(--vscode-input-border);
         border-radius: 4px;
@@ -2402,6 +2443,8 @@ const styles = `
         color: var(--vscode-input-foreground);
         font-size: 13px;
         font-family: var(--vscode-font-family);
+        box-sizing: border-box;
+        resize: vertical;
     }
 
     .form-group input:focus,
diff --git a/src/ui.ts b/src/ui.ts
index dd4074b..3f54d2d 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -155,13 +155,14 @@ const html = `<!DOCTYPE html>
 				<span>MCP Servers</span>
 				<button class="tools-close-btn" onclick="hideMCPModal()">✕</button>
 			</div>
-			<div class="mcp-servers-list" id="mcpServersList">
-				<!-- MCP servers will be loaded here -->
-			</div>
-			<div class="mcp-add-server">
-				<button class="btn outlined" onclick="showAddServerForm()" id="addServerBtn">+ Add MCP Server</button>
-			</div>
-			<div class="mcp-add-form" id="addServerForm" style="display: none;">
+			<div class="tools-list">
+				<div class="mcp-servers-list" id="mcpServersList">
+					<!-- MCP servers will be loaded here -->
+				</div>
+				<div class="mcp-add-server">
+					<button class="btn outlined" onclick="showAddServerForm()" id="addServerBtn">+ Add MCP Server</button>
+				</div>
+				<div class="mcp-add-form" id="addServerForm" style="display: none;">
 				<div class="form-group">
 					<label for="serverName">Server Name:</label>
 					<input type="text" id="serverName" placeholder="my-server" required>
@@ -169,28 +170,28 @@ const html = `<!DOCTYPE html>
 				<div class="form-group">
 					<label for="serverType">Server Type:</label>
 					<select id="serverType" onchange="updateServerForm()">
-						<option value="stdio">stdio</option>
 						<option value="http">HTTP</option>
 						<option value="sse">SSE</option>
+						<option value="stdio">stdio</option>
 					</select>
 				</div>
-				<div class="form-group" id="commandGroup">
+				<div class="form-group" id="commandGroup" style="display: none;">
 					<label for="serverCommand">Command:</label>
 					<input type="text" id="serverCommand" placeholder="/path/to/server">
 				</div>
-				<div class="form-group" id="urlGroup" style="display: none;">
+				<div class="form-group" id="urlGroup">
 					<label for="serverUrl">URL:</label>
 					<input type="text" id="serverUrl" placeholder="https://example.com/mcp">
 				</div>
-				<div class="form-group" id="argsGroup">
+				<div class="form-group" id="argsGroup" style="display: none;">
 					<label for="serverArgs">Arguments (one per line):</label>
 					<textarea id="serverArgs" placeholder="--api-key&#10;abc123" rows="3"></textarea>
 				</div>
-				<div class="form-group" id="envGroup">
+				<div class="form-group" id="envGroup" style="display: none;">
 					<label for="serverEnv">Environment Variables (KEY=value, one per line):</label>
 					<textarea id="serverEnv" placeholder="API_KEY=123&#10;CACHE_DIR=/tmp" rows="3"></textarea>
 				</div>
-				<div class="form-group" id="headersGroup" style="display: none;">
+				<div class="form-group" id="headersGroup">
 					<label for="serverHeaders">Headers (KEY=value, one per line):</label>
 					<textarea id="serverHeaders" placeholder="Authorization=Bearer token&#10;X-API-Key=key" rows="3"></textarea>
 				</div>
@@ -201,6 +202,7 @@ const html = `<!DOCTYPE html>
 			</div>
 		</div>
 	</div>
+	</div>
 
 	<!-- Settings modal -->
 	<div id="settingsModal" class="tools-modal" style="display: none;">
@@ -1608,7 +1610,7 @@ const html = `<!DOCTYPE html>
 			document.getElementById('serverArgs').value = '';
 			document.getElementById('serverEnv').value = '';
 			document.getElementById('serverHeaders').value = '';
-			document.getElementById('serverType').value = 'stdio';
+			document.getElementById('serverType').value = 'http';
 			updateServerForm();
 		}