diff --git a/frontend/src/pages/Departments.svelte b/frontend/src/pages/Departments.svelte
index b7fd627..c2cf82b 100644
--- a/frontend/src/pages/Departments.svelte
+++ b/frontend/src/pages/Departments.svelte
@@ -100,7 +100,7 @@
   {#if showAdd && canCreate}
     <div class="card" style="margin-bottom:1.5rem">
       <form onsubmit={addDept}>
-        <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
+        <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end">
           <div class="form-group" style="margin-bottom:0">
             <label for="d-name">Name *</label>
             <input id="d-name" bind:value={newName} required placeholder="e.g. Security" />
@@ -142,8 +142,8 @@
         <tbody>
           {#each $allDepts ?? [] as d (d.id)}
             {#if editID === d.id}
-              <tr>
-                <td>
+              <tr class="edit-row">
+                <td class="td-name">
                   <div style="display:flex;align-items:center;gap:0.5rem">
                     <input type="color" bind:value={editColor} style="width:36px;height:36px;padding:0.1rem;border-radius:4px;cursor:pointer;flex-shrink:0" />
                     <input bind:value={editName} required placeholder="Name" style="margin:0" />
@@ -153,7 +153,7 @@
                   <input bind:value={editDesc} placeholder="Description" style="margin:0" />
                 </td>
                 {#if canCreate}
-                  <td>
+                  <td class="td-actions">
                     <div class="actions">
                       <button class="btn btn-primary btn-sm" onclick={() => saveDept(d)} disabled={saving}>
                         {saving ? '…' : 'Save'}
@@ -165,13 +165,13 @@
               </tr>
             {:else}
               <tr>
-                <td>
+                <td class="td-name">
                   <span class="dept-dot" style="background:{d.color};margin-right:0.5rem"></span>
                   <strong>{d.name}</strong>
                 </td>
-                <td class="text-muted">{d.description || '—'}</td>
+                <td class="td-desc text-muted">{d.description || '—'}</td>
                 {#if canCreate}
-                  <td>
+                  <td class="td-actions">
                     <div class="actions">
                       <button class="btn btn-ghost btn-sm" onclick={() => startEdit(d)}>Edit</button>
                       {#if canDelete}
@@ -188,3 +188,12 @@
     </div>
   {/if}
 </div>
+
+<style>
+  @media (max-width: 640px) {
+    .td-name { width: 100%; }
+    .td-desc { width: 100%; }
+    .td-actions { width: 100%; display: flex; justify-content: flex-end; }
+    .edit-row td { width: 100%; }
+  }
+</style>