diff --git a/frontend/src/pages/Config.tsx b/frontend/src/pages/Config.tsx
index 804d769..b0c12ab 100644
--- a/frontend/src/pages/Config.tsx
+++ b/frontend/src/pages/Config.tsx
@@ -338,18 +338,18 @@ function RiskProfilesCard() {
 function SaxoLinkPicker({ ticker, saxoSymbol }: { ticker: string; saxoSymbol: string | null }) {
   const [editing, setEditing] = useState(false)
   const [value, setValue] = useState(saxoSymbol ?? '')
+  const [showDropdown, setShowDropdown] = useState(false)
   const { mutate: setLink, isPending } = useSetWatchlistSaxoLink()
   const { data: catalogMatches } = useSaxoCatalog(undefined, value.length >= 2 ? value : undefined)
-  const datalistId = `saxo-symbols-${ticker}`
 
-  const save = () => {
-    const sym = value.trim().toUpperCase() || null
-    setLink({ ticker, saxoSymbol: sym }, { onSuccess: () => setEditing(false) })
+  const save = (sym?: string) => {
+    const resolved = (sym ?? value).trim().toUpperCase() || null
+    setLink({ ticker, saxoSymbol: resolved }, { onSuccess: () => setEditing(false) })
   }
 
   if (!editing) {
     return saxoSymbol ? (
-      <button onClick={() => setEditing(true)} className="flex items-center gap-1 text-[9px] text-emerald-400 hover:text-emerald-300 bg-emerald-900/20 border border-emerald-700/30 px-1.5 py-0.5 rounded">
+      <button onClick={() => { setEditing(true); setValue(saxoSymbol) }} className="flex items-center gap-1 text-[9px] text-emerald-400 hover:text-emerald-300 bg-emerald-900/20 border border-emerald-700/30 px-1.5 py-0.5 rounded">
         <Link2 className="w-2.5 h-2.5" /> {saxoSymbol}
       </button>
     ) : (
@@ -360,21 +360,34 @@ function SaxoLinkPicker({ ticker, saxoSymbol }: { ticker: string; saxoSymbol: st
   }
 
   return (
-    <div className="flex items-center gap-1">
+    <div className="relative">
       <input
         autoFocus
-        list={datalistId}
         value={value}
-        onChange={e => setValue(e.target.value)}
+        onChange={e => { setValue(e.target.value); setShowDropdown(true) }}
+        onFocus={() => setShowDropdown(true)}
         onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setEditing(false) }}
-        onBlur={save}
-        placeholder="Saxo symbol"
-        className="bg-dark-800 border border-slate-700/40 rounded px-1.5 py-0.5 text-[9px] text-white w-24 focus:outline-none focus:border-blue-500/50"
+        onBlur={() => save()}
+        placeholder="Search Saxo symbol…"
+        className="bg-dark-800 border border-slate-700/40 rounded px-1.5 py-0.5 text-[9px] text-white w-28 focus:outline-none focus:border-blue-500/50"
       />
-      <datalist id={datalistId}>
-        {(catalogMatches ?? []).map((c: any) => <option key={c.symbol} value={c.symbol}>{c.description}</option>)}
-      </datalist>
-      {isPending && <span className="text-[9px] text-slate-600">…</span>}
+      {isPending && <span className="text-[9px] text-slate-600 ml-1">…</span>}
+      {showDropdown && (catalogMatches ?? []).length > 0 && (
+        <div className="absolute z-20 top-full left-0 mt-1 w-72 max-h-60 overflow-y-auto bg-dark-800 border border-slate-700 rounded shadow-xl">
+          {(catalogMatches ?? []).map((c: any) => (
+            <button
+              key={c.symbol}
+              type="button"
+              onMouseDown={e => e.preventDefault()}
+              onClick={() => { setValue(c.symbol); setShowDropdown(false); save(c.symbol) }}
+              className="flex items-center justify-between gap-3 w-full text-left px-2.5 py-1.5 text-[10px] hover:bg-dark-700 transition-colors"
+            >
+              <span className="font-mono font-bold text-white shrink-0">{c.symbol}</span>
+              <span className="text-slate-500 truncate">{c.description}</span>
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   )
 }