diff --git a/admin/index.html b/admin/index.html
index e735297..1d2239d 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -137,13 +137,51 @@
     }
     .drawer h3 { margin-bottom: 10px; color: #fff; }
 
+    /* Modal */
+    .modal-overlay {
+      position: fixed; inset: 0;
+      background: rgba(0,0,0,0.6); z-index: 300;
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px;
+    }
+    .modal {
+      background: var(--bg2);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      width: 100%; max-width: 900px;
+      max-height: 90vh;
+      display: flex; flex-direction: column;
+    }
+    .modal-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .modal-header h3 { color: #fff; margin: 0; font-size: 16px; }
+    .modal-body {
+      padding: 14px 18px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .modal-footer {
+      display: flex; gap: 8px; justify-content: flex-end;
+      padding: 12px 18px;
+      border-top: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .form-row {
+      display: flex; gap: 12px; flex-wrap: wrap;
+    }
+    .form-row > div { flex: 1; min-width: 120px; }
+
     /* Group */
     .group-title {
       margin: 12px 0 8px; color: #fff; font-size: 14px;
       text-transform: capitalize;
     }
 
-    /* Form fields inside drawer */
+    /* Form fields inside modal */
     #profile-form label {
       display: block;
       color: var(--text2);
@@ -657,18 +695,17 @@
   try { await api.updateProfile(id, value); loadProfiles(); } catch (err) { alert(err.message); }
 };
 
-// ── Profile Edit ───────────────────────────────────────────────────────────
 window.editProfile = async (id) => {
   try {
     const p = await api.profile(id);
-    showProfileDrawer(id, p);
+    showProfileModal(id, p);
   } catch (err) {
     alert(err.message);
   }
 };
 
-function showProfileDrawer(id, p) {
-  const existing = document.querySelector('.drawer-overlay');
+function showProfileModal(id, p) {
+  const existing = document.querySelector('.modal-overlay');
   if (existing) existing.remove();
 
   const modelVal = Array.isArray(p.model) ? p.model.join('\n') : String(p.model || '');
@@ -677,11 +714,14 @@
   const ctxVal = Array.isArray(p.context_providers) ? p.context_providers.join('\n') : String(p.context_providers || '');
 
   const overlay = document.createElement('div');
-  overlay.className = 'drawer-overlay';
+  overlay.className = 'modal-overlay';
   overlay.innerHTML = `
-    <div class="drawer" style="width:600px;max-width:95vw;">
-      <h3>Edit Profile: ${esc(p.id)}</h3>
-      <div id="profile-form" style="display:flex;flex-direction:column;gap:12px;">
+    <div class="modal">
+      <div class="modal-header">
+        <h3>Edit Profile: ${esc(p.id)}</h3>
+        <button class="btn-icon" onclick="this.closest('.modal-overlay').remove()" title="Close"><i class="ph ph-x"></i></button>
+      </div>
+      <div class="modal-body" id="profile-form">
 
         <section><h4 class="group-title">Basic</h4>
           <label>Name</label><input id="pf-name" value="${esc(p.name)}">
@@ -693,11 +733,13 @@
         <section><h4 class="group-title">Model & Generation</h4>
           <label>Model (one per line, priority order)</label>
           <textarea id="pf-model" rows="4" style="font-family:monospace;">${esc(modelVal)}</textarea>
-          <label>Temperature</label><input id="pf-temp" type="number" step="0.01" value="${p.temperature}" style="width:100px;">
-          <label>Top-K</label><input id="pf-topk" type="number" value="${p.top_k??''}" style="width:100px;">
-          <label>Top-P</label><input id="pf-topp" type="number" step="0.01" value="${p.top_p??''}" style="width:100px;">
-          <label>Max Iterations</label><input id="pf-max_iter" type="number" value="${p.max_iterations}" style="width:100px;">
-          <label>Num Threads</label><input id="pf-num_thread" type="number" value="${p.num_thread??''}" style="width:100px;">
+          <div class="form-row">
+            <div><label>Temperature</label><input id="pf-temp" type="number" step="0.01" value="${p.temperature}"></div>
+            <div><label>Top-K</label><input id="pf-topk" type="number" value="${p.top_k??''}"></div>
+            <div><label>Top-P</label><input id="pf-topp" type="number" step="0.01" value="${p.top_p??''}"></div>
+            <div><label>Max Iterations</label><input id="pf-max_iter" type="number" value="${p.max_iterations}"></div>
+            <div><label>Num Threads</label><input id="pf-num_thread" type="number" value="${p.num_thread??''}"></div>
+          </div>
         </section>
 
         <section><h4 class="group-title">Thinking</h4>
@@ -741,11 +783,10 @@
           <label>Sub-agent System Prompt</label>
           <textarea id="pf-sub_system" rows="4" style="font-family:monospace;width:100%;">${esc(p.subagent_system_prompt||'')}</textarea>
         </section>
-
-        <div style="display:flex;gap:8px;margin-top:8px;">
-          <button class="btn btn-primary" onclick="saveProfileEdit('${esc(id)}')">Save</button>
-          <button onclick="this.closest('.drawer-overlay').remove()">Cancel</button>
-        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" onclick="saveProfileEdit('${esc(id)}')">Save</button>
+        <button onclick="this.closest('.modal-overlay').remove()">Cancel</button>
       </div>
     </div>`;
   overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
@@ -791,7 +832,7 @@
 
   try {
     await api.saveProfile(id, body);
-    document.querySelector('.drawer-overlay')?.remove();
+    document.querySelector('.modal-overlay')?.remove();
     loadProfiles();
   } catch (err) {
     alert(err.message);