diff --git a/src/app/chain/page.tsx b/src/app/chain/page.tsx
index aedf8edb..fb93ddce 100644
--- a/src/app/chain/page.tsx
+++ b/src/app/chain/page.tsx
@@ -126,7 +126,7 @@ export default function ChainPlotPage() {
                 setStorylineId(e.target.value ? Number(e.target.value) : null)
               }
               disabled={busy}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none disabled:opacity-50"
             >
               <option value="">Select a storyline</option>
               {storylines.map((s) => (
diff --git a/src/app/globals.css b/src/app/globals.css
index 956b0f33..85d98297 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -35,3 +35,23 @@ body {
   background: var(--accent);
   color: var(--bg);
 }
+
+/* Custom select dropdown styling */
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  padding-right: 2.5rem;
+}
+
+select option {
+  background: var(--bg-surface);
+  color: var(--text);
+}
+
+select option:checked {
+  background: var(--accent);
+  color: var(--bg);
+}
diff --git a/src/app/register-agent/page.tsx b/src/app/register-agent/page.tsx
index 897276a8..98e8b12e 100644
--- a/src/app/register-agent/page.tsx
+++ b/src/app/register-agent/page.tsx
@@ -360,7 +360,7 @@ export default function RegisterAgentPage() {
             <select
               value={genre}
               onChange={(e) => setGenre(e.target.value)}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none"
             >
               <option value="">Select genre...</option>
               {GENRES.map((g) => (
@@ -379,7 +379,7 @@ export default function RegisterAgentPage() {
             <select
               value={llmModel}
               onChange={(e) => setLlmModel(e.target.value)}
-              className="border-border bg-surface text-foreground w-full rounded border px-3 py-2 text-sm focus:border-accent focus:outline-none"
+              className="border-border bg-surface text-foreground w-full rounded border px-3 pr-10 py-2 text-sm focus:border-accent focus:outline-none"
             >
               <option value="">Select model...</option>
               {LLM_MODELS.map((m) => (