diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1a44056..58ce4acd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # aicodeman
 
+## 1.3.1
+
+### Patch Changes
+
+- Redesign the Cron Jobs modal to match the App Settings styling, and fix a bug that left its create form fully expanded.
+  - **Fix:** the cron modal's "New Cron Job" form and all of its conditional rows (Launch Command, Prompt File Path, and the once/interval/daily/weekly schedule fields) never actually collapsed — there is no global `.hidden` utility in the stylesheet and the cron modal never scoped its own, so the form opened fully expanded with every field visible at once. Added a scoped `#cronModal .hidden` rule; the form now stays collapsed until "+ New Job" and only shows the fields relevant to the selected agent type, prompt source, and schedule type.
+  - Sectioned the create/edit form into Basics / Prompt / Schedule / Options with the same section-header dividers used in App Settings, and increased row spacing.
+  - Styled the agent-type / prompt-source / input-mode / schedule-type dropdowns and the datetime-local / time inputs to share the bordered, rounded, focus-ringed field look.
+  - Converted the "Auto-close previous run's session" and "Enabled" toggles into App-Settings-style cards (label + description on the left, compact switch on the right).
+  - Replaced the raw weekday checkboxes with pill toggles that fill with the accent color when selected.
+  - Restyled the job list rows as hover-highlighted cards with pill badges (agent type, schedule, disabled) and right-aligned actions, and gave the modal a divider-topped Cancel / Save footer.
+
 ## 1.3.0
 
 ### Minor Changes
diff --git a/CLAUDE.md b/CLAUDE.md
index 2318daa2..dfa3c2b2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -56,7 +56,7 @@ When user says "COM":
 
 CI runs `npm run check:lockfile` on every push/PR, so lockfile drift fails the build even if the `version-packages` script is bypassed.
 
-**Version**: 1.3.0 (must match `package.json`)
+**Version**: 1.3.1 (must match `package.json`)
 
 ## Project Overview
 
diff --git a/package-lock.json b/package-lock.json
index a176dd58..ca506552 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aicodeman",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aicodeman",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "hasInstallScript": true,
       "license": "MIT",
       "workspaces": [
diff --git a/package.json b/package.json
index 5165bd97..686f0af9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aicodeman",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Mission control for AI coding agents - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/web/public/index.html b/src/web/public/index.html
index bf1d34ab..3fbb7739 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -627,8 +627,8 @@
           <button class="modal-close" onclick="app.closeCron()" aria-label="Close cron">&times;</button>
         </div>
         <div class="modal-body">
-          <p class="form-hint" style="margin-bottom:10px;">Times use the server's local timezone.</p>
-          <div style="margin-bottom:10px;">
+          <p class="form-hint cron-modal-hint">Times use the server's local timezone.</p>
+          <div class="cron-toolbar">
             <button class="btn-toolbar btn-sm btn-primary" onclick="app.openCronJobForm()">+ New Job</button>
             <button class="btn-toolbar btn-sm" onclick="app.refreshCron()">Refresh</button>
           </div>
@@ -637,11 +637,13 @@
 
           <!-- Create/Edit form (hidden until New/Edit) -->
           <div id="cronJobForm" class="cron-job-form hidden">
-            <div class="form-section-header" id="cronFormTitle">New Cron Job</div>
+            <div class="cron-form-title" id="cronFormTitle">New Cron Job</div>
             <input type="hidden" id="schJobId">
+
+            <div class="form-section-header">Basics</div>
             <div class="form-row"><label>Name</label><input type="text" id="schName" placeholder="My nightly job"></div>
             <div class="form-row"><label>Agent Type</label>
-              <select id="schAgentType" onchange="app.onCronAgentTypeChange()">
+              <select id="schAgentType" class="form-select" onchange="app.onCronAgentTypeChange()">
                 <option value="claude">Claude</option>
                 <option value="shell">Terminal / Shell</option>
                 <option value="opencode">OpenCode</option>
@@ -651,8 +653,10 @@
             </div>
             <div class="form-row"><label>Working Directory</label><input type="text" id="schWorkingDir" placeholder="/absolute/path"></div>
             <div class="form-row hidden" id="schLaunchCommandRow"><label>Launch Command</label><input type="text" id="schLaunchCommand" placeholder="Optional — runs as the first command in the new shell"></div>
+
+            <div class="form-section-header">Prompt</div>
             <div class="form-row"><label>Prompt Source</label>
-              <select id="schPromptMode" onchange="app.onCronPromptModeChange()">
+              <select id="schPromptMode" class="form-select" onchange="app.onCronPromptModeChange()">
                 <option value="inline_text">Inline text</option>
                 <option value="prompt_file_path">Prompt file path</option>
               </select>
@@ -660,13 +664,15 @@
             <div class="form-row" id="schPromptTextRow"><label>Prompt</label><textarea id="schPromptText" rows="4" placeholder="Prompt to send into the session"></textarea></div>
             <div class="form-row hidden" id="schPromptFileRow"><label>Prompt File Path</label><input type="text" id="schPromptFilePath" placeholder="/absolute/path/to/prompt.md"></div>
             <div class="form-row"><label>Input Mode</label>
-              <select id="schInputMode">
+              <select id="schInputMode" class="form-select">
                 <option value="typed">Typed (via tmux)</option>
                 <option value="paste">Paste (direct)</option>
               </select>
             </div>
+
+            <div class="form-section-header">Schedule</div>
             <div class="form-row"><label>Schedule Type</label>
-              <select id="schScheduleType" onchange="app.onCronScheduleTypeChange()">
+              <select id="schScheduleType" class="form-select" onchange="app.onCronScheduleTypeChange()">
                 <option value="once">Once</option>
                 <option value="interval">Interval</option>
                 <option value="daily">Daily</option>
@@ -688,23 +694,34 @@
               </span>
             </div>
             <div class="form-row hidden" id="schWeeklyTimeRow"><label>Weekly Time (HH:MM)</label><input type="time" id="schWeeklyTime"></div>
+
+            <div class="form-section-header">Options</div>
             <div class="form-row"><label>On auto-run, if same agent running</label>
-              <select id="schConcurrencyPolicy">
+              <select id="schConcurrencyPolicy" class="form-select">
                 <option value="warn_only">Run anyway</option>
                 <option value="skip_if_same_agent_running">Skip this run</option>
               </select>
             </div>
-            <div class="form-row form-row-switch"><label title="Recurring schedules only: when the next run fires, the still-open session created by this job's previous run is closed first">Auto-close previous run's session</label>
-              <label class="switch"><input type="checkbox" id="schAutoClosePrev" checked><span class="slider"></span></label>
+            <div class="form-row form-row-switch cron-switch-row">
+              <div class="cron-switch-text">
+                <span class="cron-switch-label">Auto-close previous run's session</span>
+                <span class="cron-switch-desc">Recurring schedules only: close the prior run's still-open session before the next run fires</span>
+              </div>
+              <label class="switch switch-sm"><input type="checkbox" id="schAutoClosePrev" checked><span class="slider"></span></label>
             </div>
-            <div class="form-row form-row-switch"><label>Enabled</label>
-              <label class="switch"><input type="checkbox" id="schEnabled" checked><span class="slider"></span></label>
+            <div class="form-row form-row-switch cron-switch-row">
+              <div class="cron-switch-text">
+                <span class="cron-switch-label">Enabled</span>
+                <span class="cron-switch-desc">Off keeps the job saved but skips its schedule</span>
+              </div>
+              <label class="switch switch-sm"><input type="checkbox" id="schEnabled" checked><span class="slider"></span></label>
             </div>
             <div class="form-row"><label>Notes</label><input type="text" id="schNotes" placeholder="Optional"></div>
-            <div id="cronFormError" class="form-hint" style="color:var(--danger,#e55);"></div>
-            <div style="margin-top:10px;">
-              <button class="btn-toolbar btn-sm btn-primary" onclick="app.saveCronJob()">Save</button>
+
+            <div id="cronFormError" class="form-hint cron-form-error"></div>
+            <div class="cron-form-actions">
               <button class="btn-toolbar btn-sm" onclick="app.cancelCronJobForm()">Cancel</button>
+              <button class="btn-toolbar btn-sm btn-primary" onclick="app.saveCronJob()">Save</button>
             </div>
           </div>
         </div>
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 4ecfae99..1ca85219 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -11555,23 +11555,94 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
 }
 
 /* ── Cron Jobs ───────────────────────────────── */
-.cron-job-list { display: flex; flex-direction: column; gap: 8px; }
+/* There is no global `.hidden{display:none}` utility in this stylesheet — each
+   component scopes its own. The cron modal shipped without one, so its
+   `.hidden`-toggled create form + conditional schedule/prompt rows never
+   actually collapsed (all fields showed at once). Scope one here. */
+#cronModal .hidden { display: none !important; }
+.cron-modal-hint { margin-bottom: 0.75rem; }
+.cron-toolbar {
+  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
+  margin-bottom: 0.9rem;
+}
+
+/* Job list — cards that echo the App Settings item look */
+.cron-job-list { display: flex; flex-direction: column; gap: 0.5rem; }
 .cron-job-row {
-  display: flex; justify-content: space-between; align-items: center; gap: 12px;
-  padding: 10px 12px; border: 1px solid var(--border, #333); border-radius: 8px;
-  background: var(--panel-bg, rgba(255,255,255,0.02));
+  display: flex; justify-content: space-between; align-items: center; gap: 0.9rem;
+  padding: 0.7rem 0.85rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--btn-radius);
+  background: rgba(255, 255, 255, 0.03);
+  transition: background var(--transition-smooth), border-color var(--transition-smooth);
 }
+.cron-job-row:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
 .cron-job-main { min-width: 0; flex: 1; }
-.cron-job-name { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
-.cron-job-meta { font-size: 12px; opacity: 0.7; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
-.cron-job-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.cron-job-name { font-weight: 600; font-size: 0.85rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
+.cron-job-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.35rem; overflow: hidden; text-overflow: ellipsis; }
+.cron-job-actions { display: flex; gap: 0.35rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
 .cron-badge {
-  font-size: 11px; padding: 1px 6px; border-radius: 10px;
-  background: var(--accent-bg, rgba(120,160,255,0.15)); opacity: 0.9;
+  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
+  padding: 0.1rem 0.45rem; border-radius: 999px;
+  background: var(--accent-bg, rgba(120, 160, 255, 0.15)); color: var(--text-dim);
 }
-.cron-badge-off { background: rgba(200,80,80,0.18); }
-.cron-weekdays { display: flex; gap: 10px; flex-wrap: wrap; }
-.cron-weekdays label { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; }
+.cron-badge-off { background: rgba(200, 80, 80, 0.18); color: #e88; }
+
+/* Create / edit form — sectioned + spaced to match the App Settings modal */
 .cron-job-form {
-  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #333);
+  margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border);
+}
+.cron-form-title {
+  font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.35rem;
+}
+#cronModal .form-row { margin-bottom: 0.85rem; }
+/* datetime-local / time inputs aren't covered by the base .form-row input rule */
+#cronModal .form-row input[type="datetime-local"],
+#cronModal .form-row input[type="time"] {
+  width: 100%; padding: 0.5rem 0.75rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--btn-radius);
+  color: var(--text); font-size: 0.8rem; font-family: inherit;
+  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
+}
+#cronModal .form-row input[type="datetime-local"]:focus,
+#cronModal .form-row input[type="time"]:focus {
+  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
+/* Toggle rows rendered as settings cards (label + description left, switch right) */
+#cronModal .form-row-switch.cron-switch-row {
+  justify-content: space-between; gap: 0.75rem; flex-wrap: nowrap;
+  padding: 0.55rem 0.7rem; margin-bottom: 0.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--btn-radius);
+}
+.cron-switch-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
+.cron-switch-label { font-size: 0.75rem; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; }
+.cron-switch-desc { font-size: 0.62rem; color: var(--text-muted); line-height: 1.35; }
+
+/* Weekday selector — pill toggles instead of raw checkboxes */
+.cron-weekdays { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+.cron-weekdays label {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 2.6rem; margin: 0; padding: 0.3rem 0.55rem;
+  font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0;
+  color: var(--text-dim); cursor: pointer;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 999px;
+  transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth);
+}
+.cron-weekdays label:hover { border-color: var(--accent); color: var(--text); }
+.cron-weekdays label input { position: absolute; opacity: 0; width: 0; height: 0; }
+.cron-weekdays label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+/* Footer */
+.cron-form-error { color: var(--danger, #e55); margin-top: 0.4rem; }
+.cron-form-error:empty { display: none; }
+.cron-form-actions {
+  display: flex; gap: 0.5rem; justify-content: flex-end;
+  margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border);
 }