diff --git a/apps/web/src/components/SettingsDialog.tsx b/apps/web/src/components/SettingsDialog.tsx
index 36c574c21..6de9aeffc 100644
--- a/apps/web/src/components/SettingsDialog.tsx
+++ b/apps/web/src/components/SettingsDialog.tsx
@@ -2185,47 +2185,40 @@ export function SettingsDialog({
                           <span className="field-label">
                             {t('settings.modelPicker')}
                           </span>
-                          <select
-                            value={selectValue}
-                            onChange={(e) => {
-                              if (e.target.value === CUSTOM_MODEL_SENTINEL) {
-                                // Switching to "Custom…" should clear the
-                                // value so the input below opens empty for
-                                // typing. Keep an explicit edit-mode flag so
-                                // intermediate values like `gpt-5` do not
-                                // collapse the custom input while typing
-                                // `gpt-5.5`.
-                                setAgentCustomModelIds((prev) => {
-                                  const next = new Set(prev);
-                                  next.add(selected.id);
-                                  return next;
-                                });
-                                setChoice({ model: '' });
-                              } else {
-                                setAgentCustomModelIds((prev) => {
-                                  if (!prev.has(selected.id)) return prev;
-                                  const next = new Set(prev);
-                                  next.delete(selected.id);
-                                  return next;
-                                });
-                                setChoice({ model: e.target.value });
-                              }
-                            }}
-                          >
-                            {renderModelOptions(selected.models!)}
-                            <option value={CUSTOM_MODEL_SENTINEL}>
-                              {t('settings.modelCustom')}
-                            </option>
-                          </select>
+                          <div className="agent-model-select-wrap">
+                            <select
+                              value={selectValue}
+                              onChange={(e) => {
+                                if (e.target.value === CUSTOM_MODEL_SENTINEL) {
+                                  setAgentCustomModelIds((prev) => {
+                                    const next = new Set(prev);
+                                    next.add(selected.id);
+                                    return next;
+                                  });
+                                  setChoice({ model: '' });
+                                } else {
+                                  setAgentCustomModelIds((prev) => {
+                                    if (!prev.has(selected.id)) return prev;
+                                    const next = new Set(prev);
+                                    next.delete(selected.id);
+                                    return next;
+                                  });
+                                  setChoice({ model: e.target.value });
+                                }
+                              }}
+                            >
+                              {renderModelOptions(selected.models!)}
+                              <option value={CUSTOM_MODEL_SENTINEL}>
+                                {t('settings.modelCustom')}
+                              </option>
+                            </select>
+                            <Icon
+                              name="chevron-down"
+                              size={12}
+                              className="agent-model-select-chevron"
+                            />
+                          </div>
                         </label>
-                        {/*
-                          Hint sits with its own field so the user reads
-                          "Default vs Custom…" right next to the dropdown
-                          that exposes those options. Older layouts parked
-                          this paragraph at the bottom of the section, past
-                          the Memory picker, where it got mistaken for
-                          memory documentation.
-                        */}
                         <p className="hint agent-model-row-hint">
                           {t('settings.modelPickerHint')}
                         </p>
@@ -2251,18 +2244,25 @@ export function SettingsDialog({
                         <span className="field-label">
                           {t('settings.reasoningPicker')}
                         </span>
-                        <select
-                          value={reasoningValue}
-                          onChange={(e) =>
-                            setChoice({ reasoning: e.target.value })
-                          }
-                        >
-                          {selected.reasoningOptions!.map((r) => (
-                            <option key={r.id} value={r.id}>
-                              {r.label}
-                            </option>
-                          ))}
-                        </select>
+                        <div className="agent-model-select-wrap">
+                          <select
+                            value={reasoningValue}
+                            onChange={(e) =>
+                              setChoice({ reasoning: e.target.value })
+                            }
+                          >
+                            {selected.reasoningOptions!.map((r) => (
+                              <option key={r.id} value={r.id}>
+                                {r.label}
+                              </option>
+                            ))}
+                          </select>
+                          <Icon
+                            name="chevron-down"
+                            size={12}
+                            className="agent-model-select-chevron"
+                          />
+                        </div>
                       </label>
                     ) : null}
                     <MemoryModelInline
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 6d99b56c4..afbd4226d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -5007,6 +5007,24 @@ a.avatar-item:visited {
   color: var(--text-muted);
 }
 .agent-model-row .hint { margin: 0; font-size: 11.5px; }
+.agent-model-select-wrap {
+  position: relative;
+}
+.agent-model-select-wrap select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: none;
+  padding-right: 28px;
+  width: 100%;
+}
+.agent-model-select-chevron {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-soft);
+  pointer-events: none;
+}
 .agent-cli-env {
   padding: 10px 12px;
   border: 1px solid var(--border-soft);