diff --git a/frontend/.husky/commit-msg b/frontend/.husky/commit-msg
index 8b621f17..6ac94926 100644
--- a/frontend/.husky/commit-msg
+++ b/frontend/.husky/commit-msg
@@ -1,2 +1,2 @@
-
-npx --yes commitlint --config frontend/commitlint.config.js --edit "$1"
+cd "$(dirname "$0")/.."  # goes to frontend/
+npx --yes commitlint --config ./commitlint.config.js --edit "$1"
\ No newline at end of file
diff --git a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
index 27accc3e..234223f6 100644
--- a/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
+++ b/frontend/src/components/CompanyOrSpeakerOrMemberAutocompleteWithDialog.vue
@@ -5,54 +5,53 @@
     </Label>
 
     <div class="relative">
-      <div class="relative">
-        <!-- Selected item image (when selected) -->
-        <div
-          v-if="selectedItem"
-          class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
-        >
-          <Image
-            :src="getItemImage(selectedItem)"
-            :alt="selectedItem.name"
-            class="w-6 h-6 rounded object-cover border"
-          />
-        </div>
-
-        <!-- Clear button (when selected) -->
-        <button
-          v-if="selectedItem"
-          type="button"
-          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
-          @click="clearSelection"
-        >
-          ×
-        </button>
+      <!-- Selected item image (when selected) -->
+      <div
+        v-if="selectedItem"
+        class="absolute left-3 top-1/2 transform -translate-y-1/2 z-10"
+      >
+        <Image
+          :alt="selectedItem.name"
+          :src="getItemImage(selectedItem)"
+          class="w-6 h-6 rounded object-cover border"
+        />
+      </div>
 
-        <!-- Keyboard shortcut badge (when empty and not focused) -->
-        <div
-          class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
-        >
-          <Badge variant="secondary" class="text-xs flex items-center gap-1">
-            <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
-            <span class="font-mono">+ K</span>
-          </Badge>
-        </div>
+      <!-- Clear button (when selected) -->
+      <button
+        v-if="selectedItem"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 text-muted-foreground hover:text-foreground"
+        type="button"
+        @click="clearSelection"
+      >
+        ×
+      </button>
 
-        <Input
-          :id="inputId"
-          ref="inputRef"
-          v-model="searchTerm"
-          :placeholder="placeholder || 'Search companies or speakers...'"
-          :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
-          :disabled="disabled"
-          :autofocus="props.autofocus"
-          @input="handleInput"
-          @blur="hideSuggestions"
-          @focus="handleFocus"
-          @keydown="handleKeydown"
-        />
+      <!-- Keyboard shortcut badge (when empty and not focused) -->
+      <div
+        v-if="!selectedItem"
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 z-10 pointer-events-none hidden sm:block"
+      >
+        <Badge class="text-xs flex items-center gap-1" variant="secondary">
+          <span class="font-mono">{{ isMac ? "⌘" : "Ctrl" }}</span>
+          <span class="font-mono">+ K</span>
+        </Badge>
       </div>
 
+      <Input
+        :id="inputId"
+        ref="inputRef"
+        v-model="searchTerm"
+        :autofocus="props.autofocus"
+        :class="['w-full', selectedItem ? 'pl-12 pr-8' : '']"
+        :disabled="disabled"
+        :placeholder="placeholder || 'Search companies or speakers...'"
+        @blur="hideSuggestions"
+        @focus="handleFocus"
+        @input="handleInput"
+        @keydown="handleKeydown"
+      />
+
       <!-- Results dropdown -->
       <div
         v-if="
@@ -61,10 +60,10 @@
             (results.length > 0 || isLoading || (searchTerm && showCreate)))
         "
         ref="listRef"
+        aria-label="Search results for companies, speakers, and members"
         class="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg overflow-y-auto overscroll-contain touch-pan-y max-h-[65vh] sm:max-h-[24rem]"
         role="listbox"
         tabindex="-1"
-        aria-label="Search results for companies, speakers, and members"
       >
         <!-- Loading state -->
         <div v-if="isLoading" class="p-3 text-center text-gray-500">
@@ -76,125 +75,129 @@
 
         <!-- Results -->
         <div v-else>
-          <!-- Companies section -->
-          <div v-if="filteredCompanies.length > 0">
-            <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
-            >
-              Companies
-            </div>
-            <button
-              v-for="company in filteredCompanies"
-              :key="`company-${company.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(company) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              :data-result-index="getItemIndex(company)"
-              role="option"
-              :aria-selected="getItemIndex(company) === highlightedIndex"
-              @click="selectCompany(company)"
-            >
-              <Image
-                :src="company.imgs?.internal || company.imgs?.public"
-                :alt="company.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 truncate">
-                  {{ company.name }}
-                </div>
-                <div
-                  v-if="company.description"
-                  class="text-sm text-gray-500 truncate"
-                >
-                  {{ company.description }}
-                </div>
+          <template v-for="group in orderedGroups" :key="group">
+            <!-- Companies section -->
+            <div v-if="group === 'companies' && filteredCompanies.length > 0">
+              <div
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              >
+                Companies
               </div>
-            </button>
-          </div>
-
-          <!-- Speakers section -->
-          <div v-if="filteredSpeakers.length > 0">
-            <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
-            >
-              Speakers
-            </div>
-            <button
-              v-for="speaker in filteredSpeakers"
-              :key="`speaker-${speaker.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(speaker) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              :data-result-index="getItemIndex(speaker)"
-              role="option"
-              :aria-selected="getItemIndex(speaker) === highlightedIndex"
-              @click="selectSpeaker(speaker)"
-            >
-              <Image
-                :src="speaker.imgs?.internal || speaker.imgs?.speaker"
-                :alt="speaker.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <span class="font-medium truncate">{{ speaker.name }}</span>
-                <div
-                  class="flex items-center gap-2 text-xs text-muted-foreground"
-                >
-                  <span v-if="speaker.title" class="truncate">
-                    {{ speaker.title }}
-                  </span>
-                  <span v-if="speaker.title && speaker.companyName">•</span>
-                  <span v-if="speaker.companyName" class="truncate">
-                    {{ speaker.companyName }}
-                  </span>
+              <button
+                v-for="company in filteredCompanies"
+                :key="`company-${company.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(company) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(company)"
+                role="option"
+                :aria-selected="getItemIndex(company) === highlightedIndex"
+                @click="selectCompany(company)"
+              >
+                <Image
+                  :alt="company.name"
+                  :src="company.imgs?.internal || company.imgs?.public"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-gray-900 truncate">
+                    {{ company.name }}
+                  </div>
+                  <div
+                    v-if="company.description"
+                    class="text-sm text-gray-500 truncate"
+                  >
+                    {{ company.description }}
+                  </div>
                 </div>
-              </div>
-            </button>
-          </div>
+              </button>
+            </div>
 
-          <!-- Members section -->
-          <div v-if="filteredMembers.length > 0">
+            <!-- Speakers section -->
             <div
-              class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              v-else-if="group === 'speakers' && filteredSpeakers.length > 0"
             >
-              Members
-            </div>
-            <button
-              v-for="member in filteredMembers"
-              :key="`member-${member.id}`"
-              type="button"
-              :class="[
-                'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
-                getItemIndex(member) === highlightedIndex
-                  ? 'bg-blue-50 border-blue-200'
-                  : 'hover:bg-gray-50',
-              ]"
-              :data-result-index="getItemIndex(member)"
-              role="option"
-              :aria-selected="getItemIndex(member) === highlightedIndex"
-              @click="selectMember(member)"
-            >
-              <Image
-                :src="member.img"
-                :alt="member.name"
-                class="w-8 h-8 rounded object-cover border flex-shrink-0"
-              />
-              <div class="flex-1 min-w-0">
-                <div class="font-medium text-gray-900 truncate">
-                  {{ member.name }}
+              <div
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              >
+                Speakers
+              </div>
+              <button
+                v-for="speaker in filteredSpeakers"
+                :key="`speaker-${speaker.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(speaker) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(speaker)"
+                role="option"
+                :aria-selected="getItemIndex(speaker) === highlightedIndex"
+                @click="selectSpeaker(speaker)"
+              >
+                <Image
+                  :alt="speaker.name"
+                  :src="speaker.imgs?.internal || speaker.imgs?.speaker"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <span class="font-medium truncate">{{ speaker.name }}</span>
+                  <div
+                    class="flex items-center gap-2 text-xs text-muted-foreground"
+                  >
+                    <span v-if="speaker.title" class="truncate">
+                      {{ speaker.title }}
+                    </span>
+                    <span v-if="speaker.title && speaker.companyName">•</span>
+                    <span v-if="speaker.companyName" class="truncate">
+                      {{ speaker.companyName }}
+                    </span>
+                  </div>
                 </div>
+              </button>
+            </div>
+
+            <!-- Members section -->
+            <div v-else-if="group === 'members' && filteredMembers.length > 0">
+              <div
+                class="px-3 py-2 text-xs font-semibold text-gray-500 bg-gray-50 border-b sticky top-0 z-10"
+              >
+                Members
               </div>
-            </button>
-          </div>
+              <button
+                v-for="member in filteredMembers"
+                :key="`member-${member.id}`"
+                type="button"
+                :class="[
+                  'w-full text-left px-3 py-2 border-b border-gray-100 last:border-b-0 flex items-center gap-3',
+                  getItemIndex(member) === highlightedIndex
+                    ? 'bg-blue-50 border-blue-200'
+                    : 'hover:bg-gray-50',
+                ]"
+                :data-result-index="getItemIndex(member)"
+                role="option"
+                :aria-selected="getItemIndex(member) === highlightedIndex"
+                @click="selectMember(member)"
+              >
+                <Image
+                  :alt="member.name"
+                  :src="member.img"
+                  class="w-8 h-8 rounded object-cover border flex-shrink-0"
+                />
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-gray-900 truncate">
+                    {{ member.name }}
+                  </div>
+                </div>
+              </button>
+            </div>
+          </template>
 
           <!-- No results -->
           <div
@@ -228,15 +231,15 @@
           <div v-if="showCreate && searchTerm.trim()">
             <div class="border-t border-gray-200">
               <button
-                type="button"
                 class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium"
+                type="button"
                 @click="handleCreateCompany(searchTerm)"
               >
                 Create company "{{ searchTerm }}"
               </button>
               <button
-                type="button"
                 class="w-full text-left px-3 py-2 hover:bg-gray-50 text-blue-600 font-medium border-t border-gray-100"
+                type="button"
                 @click="handleCreateSpeaker(searchTerm)"
               >
                 Create speaker "{{ searchTerm }}"
@@ -297,8 +300,15 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+<script lang="ts" setup>
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onBeforeUnmount,
+  type ComputedRef,
+} from "vue";
 import { useQuery } from "@pinia/colada";
 import { getAllCompanies } from "@/api/companies";
 import { getAllSpeakers } from "@/api/speakers";
@@ -319,8 +329,8 @@ import {
 } from "@/components/ui/alert-dialog";
 import type { Company } from "@/dto/companies";
 import type { Speaker } from "@/dto/speakers";
-import createFuzzySearch, { type FuzzySearcher } from "@nozbe/microfuzz";
 import type { Member } from "@/dto/members";
+import createFuzzySearch, { type FuzzyResult } from "@nozbe/microfuzz";
 
 type SelectedItem = Company | Speaker | Member;
 
@@ -354,17 +364,20 @@ const emit = defineEmits<{
 }>();
 
 const eventStore = useEventStore();
+
 const inputId = ref(`company-speaker-autocomplete-${Math.random()}`);
 const searchTerm = ref(props.modelValue || "");
+const createTerm = ref("");
 const showSuggestions = ref(false);
 const selectedItem = ref<SelectedItem | null>(null);
+
 const isCompanyDialogOpen = ref(false);
 const isSpeakerDialogOpen = ref(false);
-const createTerm = ref("");
-const highlightedIndex = ref(-1);
-const inputRef = ref<HTMLInputElement | null>(null);
+
 const listRef = ref<HTMLElement | null>(null);
 const scrollAnimationFrameId = ref<number | null>(null);
+const inputRef = ref<HTMLInputElement>();
+const highlightedIndex = ref(-1);
 
 // Detect platform for keyboard shortcut
 const isMac = computed(() => {
@@ -393,6 +406,7 @@ const { data: speakersData, isLoading: speakersLoading } = useQuery({
   enabled: () => !!eventStore.selectedEvent?.id,
 });
 
+// Members query
 const { data: membersData, isLoading: membersLoading } = useQuery({
   key: () => ["members"],
   query: () => getAllMembers({}),
@@ -403,103 +417,153 @@ const isLoading = computed(
   () => companiesLoading.value || speakersLoading.value || membersLoading.value,
 );
 
-const companyFuzzy = ref<FuzzySearcher<Company> | null>(null);
-watch(
-  () => companiesData.value?.data,
-  (list) => {
-    if (!list || !list.length) {
-      companyFuzzy.value = null;
-    } else {
-      companyFuzzy.value = createFuzzySearch(list, {
-        // match on multiple fields
-        getText: (company: Company) => [
-          company.name,
-          company.description ?? "",
-        ],
-      });
-    }
-  },
-  { immediate: true },
-);
+/**
+ * NOTE: microfuzz score semantics:
+ * - Lower score = better match (exact match is ~0)
+ * So we always sort scores ASC, and use Infinity for no results.
+ */
+
+const LIMIT = 5;
+const q = computed(() => searchTerm.value.trim()); // query
+
+function useFuzzy<T>(
+  src: ComputedRef<T[]>,
+  getText: (item: T) => string[],
+  bias = 0,
+) {
+  const f = ref<null | ((q: string) => FuzzyResult<T>[])>(null);
+
+  watch(
+    () => src.value,
+    (list) => {
+      f.value = list.length ? createFuzzySearch(list, { getText }) : null;
+    },
+    { immediate: true },
+  );
+
+  const res = computed<FuzzyResult<T>[]>(() => {
+    const term = q.value;
+    const fn = f.value;
+    if (!term || !fn) return [];
+    return fn(term);
+  });
+
+  const items = computed<T[]>(() => {
+    const list = src.value;
+    if (!q.value) return list.slice(0, LIMIT);
+    return res.value.map((r) => r.item).slice(0, LIMIT);
+  });
+
+  const best = computed(() => (res.value[0]?.score ?? Infinity) + bias);
+
+  return { items, best };
+}
 
-const speakerFuzzy = ref<FuzzySearcher<Speaker> | null>(null);
-watch(
-  () => speakersData.value?.data,
-  (list) => {
-    if (!list || !list.length) {
-      speakerFuzzy.value = null;
-    } else {
-      speakerFuzzy.value = createFuzzySearch(list, {
-        getText: (speaker: Speaker) => [
-          speaker.name,
-          speaker.companyName ?? "",
-        ],
-      });
-    }
-  },
-  { immediate: true },
-);
-const filteredCompanies = computed(() => {
-  const list = companiesData.value?.data ?? [];
-  const term = searchTerm.value.trim();
+const companies = computed(() => companiesData.value?.data ?? []);
+const speakers = computed(() => speakersData.value?.data ?? []);
+const members = computed(() => membersData.value?.data ?? []);
 
-  // Show recent companies when no search term
-  if (!term) return list.slice(0, 5);
+const MEMBER_BIAS = 0.15;
 
-  const fuzzy = companyFuzzy.value;
-  if (!fuzzy) return [];
+const c = useFuzzy(companies, (x: Company) => [x.name, x.description ?? ""]);
+const s = useFuzzy(speakers, (x: Speaker) => [x.name, x.companyName ?? ""]);
+const m = useFuzzy(members, (x: Member) => [x.name], MEMBER_BIAS);
 
-  return fuzzy(term)
-    .map((res: { item: Company }) => res.item)
-    .slice(0, 5); // Limit to 5 results
-});
+const filteredCompanies = c.items;
+const filteredSpeakers = s.items;
+const filteredMembers = m.items;
 
-const filteredSpeakers = computed(() => {
-  const list = speakersData.value?.data ?? [];
-  const term = searchTerm.value.trim();
+const bestCompanyScore = c.best;
+const bestSpeakerScore = s.best;
+const bestMemberScore = m.best;
 
-  if (!term) return list.slice(0, 5);
+type GroupId = "companies" | "speakers" | "members";
 
-  const fuzzy = speakerFuzzy.value;
-  if (!fuzzy) return [];
+const ord: Record<GroupId, number> = {
+  companies: 0,
+  speakers: 1,
+  members: 2,
+};
 
-  return fuzzy(term)
-    .map((res: { item: Speaker }) => res.item)
-    .slice(0, 5); // Limit to 5 results
+const orderedGroups = computed<GroupId[]>(() => {
+  if (!q.value) return ["companies", "speakers", "members"];
+
+  const entries: { id: GroupId; score: number; len: number }[] = [
+    {
+      id: "companies",
+      score: bestCompanyScore.value,
+      len: filteredCompanies.value.length,
+    },
+    {
+      id: "speakers",
+      score: bestSpeakerScore.value,
+      len: filteredSpeakers.value.length,
+    },
+    {
+      id: "members",
+      score: bestMemberScore.value,
+      len: filteredMembers.value.length,
+    },
+  ];
+
+  entries.sort((a, b) =>
+    a.score === b.score ? ord[a.id] - ord[b.id] : a.score - b.score,
+  );
+
+  return entries.filter((e) => e.len > 0).map((e) => e.id);
 });
 
-const filteredMembers = computed(() => {
-  if (!membersData.value?.data) return [];
-
-  const term = searchTerm.value.toLowerCase();
-
-  if (!term) {
-    // Show recent members when no search term
-    return membersData.value.data.slice(0, 5);
+const results = computed(() => {
+  const out: Array<
+    (Company | Speaker | Member) & { type: "company" | "speaker" | "member" }
+  > = [];
+
+  const addToResults = (...items: typeof out) => out.push(...items);
+
+  for (const g of orderedGroups.value) {
+    switch (g) {
+      case "companies":
+        addToResults(
+          ...filteredCompanies.value.map((x) => ({
+            ...x,
+            type: "company" as const,
+          })),
+        );
+        break;
+
+      case "speakers":
+        addToResults(
+          ...filteredSpeakers.value.map((x) => ({
+            ...x,
+            type: "speaker" as const,
+          })),
+        );
+        break;
+
+      case "members":
+        addToResults(
+          ...filteredMembers.value.map((x) => ({
+            ...x,
+            type: "member" as const,
+          })),
+        );
+        break;
+    }
   }
 
-  return membersData.value.data
-    .filter((member: Member) => member.name.toLowerCase().includes(term))
-    .slice(0, 5);
+  return out;
 });
 
-const results = computed(() => [
-  ...filteredCompanies.value.map((company: Company) => ({
-    ...company,
-    type: "company",
-  })),
-  ...filteredSpeakers.value.map((speaker: Speaker) => ({
-    ...speaker,
-    type: "speaker",
-  })),
-  ...filteredMembers.value.map((member: Member) => ({
-    ...member,
-    type: "member",
-  })),
-]);
+type AnyId = Company["id"] | Speaker["id"] | Member["id"];
+
+const indexById = computed(() => {
+  const m = new Map<AnyId, number>(); // build lookup table to instantly find index
+  results.value.forEach((r, i) => m.set(r.id as AnyId, i));
+  return m;
+});
 
 const getItemIndex = (item: SelectedItem) => {
-  return results.value.findIndex((result) => result.id === item.id);
+  return indexById.value.get(item.id as AnyId) ?? -1;
 };
 
 const getItemImage = (item: SelectedItem) => {
@@ -532,42 +596,67 @@ const handleFocus = () => {
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === "Escape") {
+  const { key } = event;
+  const list = results.value;
+  const hasResults = list.length > 0;
+  const maxIndex = list.length - 1;
+
+  const normalizeIndex = (value: number) =>
+    Math.min(Math.max(value, -1), maxIndex);
+
+  const setHighlighted = (nextIndex: number) =>
+    (highlightedIndex.value = normalizeIndex(nextIndex));
+
+  const closeSuggestions = () => {
     showSuggestions.value = false;
     highlightedIndex.value = -1;
-    // Also blur the input to remove focus
-    const input = event.target as HTMLInputElement;
-    if (input) {
-      input.blur();
+    (event.target as HTMLInputElement).blur();
+  };
+
+  const selectResult = (item: (typeof list)[number]) => {
+    switch (item.type) {
+      case "speaker":
+        selectSpeaker(item as Speaker);
+        return;
+      case "member":
+        selectMember(item as Member);
+        return;
+      case "company":
+        selectCompany(item as Company);
+        return;
     }
-  } else if (event.key === "ArrowDown") {
-    event.preventDefault();
-    if (results.value.length > 0) {
-      highlightedIndex.value = Math.min(
-        highlightedIndex.value + 1,
-        results.value.length - 1,
-      );
+  };
+
+  switch (key) {
+    case "Escape": {
+      closeSuggestions();
+      return;
     }
-  } else if (event.key === "ArrowUp") {
-    event.preventDefault();
-    if (results.value.length > 0) {
-      highlightedIndex.value = Math.max(highlightedIndex.value - 1, -1);
+
+    case "ArrowDown":
+    case "ArrowUp": {
+      event.preventDefault();
+      if (!hasResults) return;
+
+      const delta = key === "ArrowDown" ? 1 : -1;
+      setHighlighted(highlightedIndex.value + delta);
+      return;
     }
-  } else if (event.key === "Enter") {
-    event.preventDefault();
-    if (
-      highlightedIndex.value >= 0 &&
-      highlightedIndex.value < results.value.length
-    ) {
-      const selectedResult = results.value[highlightedIndex.value];
-      if (selectedResult.type === "speaker") {
-        selectSpeaker(selectedResult as Speaker);
-      } else if (selectedResult.type === "member") {
-        selectMember(selectedResult as Member);
-      } else if (selectedResult.type === "company") {
-        selectCompany(selectedResult as Company);
-      }
+
+    case "Enter": {
+      event.preventDefault();
+      if (!hasResults) return;
+
+      // if nothing is highlighted, select the first item
+      const idx = highlightedIndex.value >= 0 ? highlightedIndex.value : 0;
+
+      selectResult(list[idx]);
+      highlightedIndex.value = idx;
+      return;
     }
+
+    default:
+      return;
   }
 };
 
@@ -670,9 +759,7 @@ watch(
         const input = document.getElementById(
           inputId.value,
         ) as HTMLInputElement;
-        if (input) {
-          input.focus();
-        }
+        if (input) input.focus();
       });
     }
   },
@@ -686,6 +773,7 @@ watch(
   },
 );
 
+// Scroll highlighted item into view
 watch(
   () => highlightedIndex.value,
   (idx) => {