diff --git a/package.json b/package.json
index eb1bae1..4f92964 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "license": "MIT",
   "devDependencies": {
     "@tsconfig/svelte": "^3.0.0",
+    "@types/lodash-es": "^4.17.6",
     "@types/node": "^16.11.6",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
@@ -35,6 +36,7 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "minisearch": "^5.0.0-beta1"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 275e171..2b0de27 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2,6 +2,7 @@ lockfileVersion: 5.3
 
 specifiers:
   '@tsconfig/svelte': ^3.0.0
+  '@types/lodash-es': ^4.17.6
   '@types/node': ^16.11.6
   '@typescript-eslint/eslint-plugin': ^5.18.0
   '@typescript-eslint/parser': ^5.18.0
@@ -15,6 +16,7 @@ specifiers:
   eslint-plugin-node: 11.1.0
   eslint-plugin-promise: 5.0.0
   eslint-plugin-svelte3: ^3.4.1
+  lodash-es: ^4.17.21
   minisearch: ^5.0.0-beta1
   obsidian: latest
   prettier: ^2.6.2
@@ -25,10 +27,12 @@ specifiers:
   typescript: ^4.6.3
 
 dependencies:
+  lodash-es: 4.17.21
   minisearch: 5.0.0-beta1
 
 devDependencies:
   '@tsconfig/svelte': 3.0.0
+  '@types/lodash-es': 4.17.6
   '@types/node': 16.11.26
   '@typescript-eslint/eslint-plugin': 5.18.0_2e93aa916703472007e9b5dfec98785b
   '@typescript-eslint/parser': 5.18.0_eslint@7.12.1+typescript@4.6.3
@@ -164,6 +168,16 @@ packages:
     resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
     dev: true
 
+  /@types/lodash-es/4.17.6:
+    resolution: {integrity: sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==}
+    dependencies:
+      '@types/lodash': 4.14.181
+    dev: true
+
+  /@types/lodash/4.14.181:
+    resolution: {integrity: sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==}
+    dev: true
+
   /@types/node/16.11.26:
     resolution: {integrity: sha512-GZ7bu5A6+4DtG7q9GsoHXy3ALcgeIHP4NnL0Vv2wu0uUB/yQex26v0tf6/na1mm0+bS9Uw+0DFex7aaKr2qawQ==}
     dev: true
@@ -1547,6 +1561,10 @@ packages:
       path-exists: 3.0.0
     dev: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
diff --git a/src/CmpInput.svelte b/src/CmpInput.svelte
index be65d3a..0086ef2 100644
--- a/src/CmpInput.svelte
+++ b/src/CmpInput.svelte
@@ -1,19 +1,50 @@
 <script lang="ts">
-import { onMount, tick } from 'svelte'
-import { searchQuery } from './stores'
+import { createEventDispatcher, onMount, tick } from "svelte"
+// import { throttle } from "lodash-es"
+import { searchQuery, selectedNote } from "./stores"
 
 let input: HTMLInputElement
+const dispatch = createEventDispatcher()
 
 onMount(async () => {
   await tick()
   input.focus()
 })
+
+selectedNote.subscribe((note) => {
+  const elem = document.querySelector(`[data-note-id="${note?.path}"]`)
+  elem?.scrollIntoView({ behavior: "auto", block: "nearest" })
+})
+
+// const throttledMoveNoteSelection = throttle(moveNoteSelection, 75)
+function moveNoteSelection(ev: KeyboardEvent): void {
+  switch (ev.key) {
+    case "ArrowDown":
+      selectedNote.next()
+      ev.preventDefault()
+      break
+    case "ArrowUp":
+      selectedNote.previous()
+      ev.preventDefault()
+      break
+    case "ArrowLeft":
+      break
+    case "ArrowRight":
+      break
+
+    case "Enter":
+      dispatch("enter", $selectedNote)
+      break
+  }
+}
 </script>
 
 <input
   bind:this={input}
   bind:value={$searchQuery}
+  on:keydown={moveNoteSelection}
   type="text"
   class="prompt-input"
   placeholder="Type to search through your notes"
+  spellcheck="false"
 />
diff --git a/src/CmpModal.svelte b/src/CmpModal.svelte
index 319907a..124e9c9 100644
--- a/src/CmpModal.svelte
+++ b/src/CmpModal.svelte
@@ -1,18 +1,23 @@
 <script lang="ts">
-import CmpInput from './CmpInput.svelte'
-import CmpNoteResult from './CmpNoteResult.svelte'
-import type { ResultNote } from './globals'
-import type OmnisearchPlugin from './main'
-import { resultNotes, searchQuery, selectedNoteId } from './stores'
-import { escapeHTML, escapeRegex, getAllIndexes, highlighter } from './utils'
+import { MarkdownView, TFile } from "obsidian"
+import { tick } from "svelte"
+import CmpInput from "./CmpInput.svelte"
+import CmpNoteResult from "./CmpNoteResult.svelte"
+import type { ResultNote } from "./globals"
+import type OmnisearchPlugin from "./main"
+import type { OmnisearchModal } from "./modal"
+import { resultNotes, searchQuery, selectedNote } from "./stores"
+import { escapeHTML, escapeRegex, getAllIndexes, highlighter } from "./utils"
 
 export let plugin: OmnisearchPlugin
+export let modal: OmnisearchModal
 
-searchQuery.subscribe(q => {
+searchQuery.subscribe(async (q) => {
   const results = getSuggestions(q)
   resultNotes.set(results)
   if (results.length) {
-    selectedNoteId.set(results[0].path)
+    await tick()
+    selectedNote.set(results[0])
   }
 })
 
@@ -20,8 +25,8 @@ function getSuggestions(query: string): ResultNote[] {
   const results = plugin.minisearch
     .search(query, {
       prefix: true,
-      fuzzy: term => (term.length > 4 ? 0.2 : false),
-      combineWith: 'AND',
+      fuzzy: (term) => (term.length > 4 ? 0.2 : false),
+      combineWith: "AND",
       boost: {
         basename: 2,
         headings1: 1.5,
@@ -34,62 +39,83 @@ function getSuggestions(query: string): ResultNote[] {
   // console.log(`Omnisearch - Results for "${query}"`)
   // console.log(results)
 
-  const suggestions =
-    results.map(result => {
-      let note = plugin.indexedNotes[result.id]
-      let basename = escapeHTML(note.basename)
-      let content = escapeHTML(note.content)
+  const suggestions = results.map((result) => {
+    let note = plugin.indexedNotes[result.id]
+    let basename = escapeHTML(note.basename)
+    let content = escapeHTML(note.content)
 
-      // Sort the terms from smaller to larger
-      // and highlight them in the title and body
-      const terms = result.terms.sort((a, b) => a.length - b.length)
-      const reg = new RegExp(terms.map(escapeRegex).join('|'), 'gi')
-      const matches = getAllIndexes(content, reg)
+    // Sort the terms from smaller to larger
+    // and highlight them in the title and body
+    const terms = result.terms.sort((a, b) => a.length - b.length)
+    const reg = new RegExp(terms.map(escapeRegex).join("|"), "gi")
+    const matches = getAllIndexes(content, reg)
 
-      // If the body contains a searched term, find its position
-      // and trim the text around it
-      const pos = content.toLowerCase().indexOf(result.terms[0])
-      const surroundLen = 180
-      if (pos > -1) {
-        const from = Math.max(0, pos - surroundLen)
-        const to = Math.min(content.length - 1, pos + surroundLen)
-        content =
-          (from > 0 ? '…' : '') +
-          content.slice(from, to).trim() +
-          (to < content.length - 1 ? '…' : '')
-      }
+    // If the body contains a searched term, find its position
+    // and trim the text around it
+    const pos = content.toLowerCase().indexOf(result.terms[0])
+    const surroundLen = 180
+    if (pos > -1) {
+      const from = Math.max(0, pos - surroundLen)
+      const to = Math.min(content.length - 1, pos + surroundLen)
+      content =
+        (from > 0 ? "…" : "") +
+        content.slice(from, to).trim() +
+        (to < content.length - 1 ? "…" : "")
+    }
 
-      // console.log(matches)
-      content = content.replace(reg, highlighter)
-      basename = basename.replace(reg, highlighter)
+    // console.log(matches)
+    content = content.replace(reg, highlighter)
+    basename = basename.replace(reg, highlighter)
 
-      const resultNote: ResultNote = {
-        content,
-        basename,
-        path: note.path,
-        matches,
-        occurence: 0,
-      }
-
-      return resultNote
-    })
+    const resultNote: ResultNote = {
+      content,
+      basename,
+      path: note.path,
+      matches,
+      occurence: 0,
+    }
 
+    return resultNote
+  })
 
   return suggestions
 }
+
+async function onChooseSuggestion(item: ResultNote): Promise<void> {
+  const file = plugin.app.vault.getAbstractFileByPath(item.path) as TFile
+  // const fileCache = this.app.metadataCache.getFileCache(file)
+  // console.log(fileCache)
+  const content = (await plugin.app.vault.cachedRead(file)).toLowerCase()
+  const offset = content.indexOf(
+    item.matches[item.occurence].match.toLowerCase()
+  )
+  await plugin.app.workspace.openLinkText(item.path, "")
+
+  const view = plugin.app.workspace.getActiveViewOfType(MarkdownView)
+  if (!view) {
+    throw new Error("OmniSearch - No active MarkdownView")
+  }
+  const pos = view.editor.offsetToPos(offset)
+  pos.ch = 0
+
+  view.editor.setCursor(pos)
+  view.editor.scrollIntoView({
+    from: { line: pos.line - 10, ch: 0 },
+    to: { line: pos.line + 10, ch: 0 },
+  })
+}
+
+function openNote(event: CustomEvent<ResultNote>): void {
+  onChooseSuggestion(event.detail)
+  modal.close()
+}
 </script>
 
-<CmpInput />
+<CmpInput on:enter={openNote} />
 
 <div class="prompt-results">
   {#each $resultNotes as result (result.path)}
-    <CmpNoteResult
-      selected={result.path === $selectedNoteId}
-      id={result.path}
-      title={result.basename}
-      content={result.content}
-      nbMatches={result.matches.length}
-     />
+    <CmpNoteResult selected={result === $selectedNote} note={result} />
   {/each}
 </div>
 <div class="prompt-instructions">
diff --git a/src/CmpNoteResult.svelte b/src/CmpNoteResult.svelte
index 213a24b..6d4dcb9 100644
--- a/src/CmpNoteResult.svelte
+++ b/src/CmpNoteResult.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-export let title = ''
-export let content = ''
-export let id = ''
-export let nbMatches = 0
+import type { ResultNote } from "./globals"
+
 export let selected = false
+export let note: ResultNote
 </script>
 
-<div data-note-id={id} class="suggestion-item omnisearch-result"
-  class:is-selected="{selected}">
+<div
+  data-note-id={note.path}
+  class="suggestion-item omnisearch-result"
+  class:is-selected={selected}
+>
   <span class="omnisearch-result__title">
-    {@html title}
+    {@html note.basename}
   </span>
   <span class="omnisearch-result__counter">
-    {nbMatches}&nbsp;{nbMatches > 1 ? 'matches' : 'match'}
+    {note.matches.length}&nbsp;{note.matches.length > 1 ? "matches" : "match"}
   </span>
   <div class="omnisearch-result__body">
-    {@html content}
+    {@html note.content}
   </div>
 </div>
diff --git a/src/modal.ts b/src/modal.ts
index 1983965..9ea07e4 100644
--- a/src/modal.ts
+++ b/src/modal.ts
@@ -1,142 +1,25 @@
-import { MarkdownView, Modal, TFile } from 'obsidian'
-import type { ResultNote } from './globals'
-import type OmnisearchPlugin from './main'
-import CmpNoteResult from './CmpNoteResult.svelte'
-import CmpModal from './CmpModal.svelte'
-import { escapeHTML, escapeRegex, getAllIndexes, highlighter } from './utils'
-import { selectedNoteId } from './stores'
+import { Modal } from "obsidian";
+import type OmnisearchPlugin from "./main";
+import CmpModal from "./CmpModal.svelte";
 
 export class OmnisearchModal extends Modal {
-  private plugin: OmnisearchPlugin
-  private mutationObserver?: MutationObserver
-  private cmp: CmpModal
-
   constructor(plugin: OmnisearchPlugin) {
-    super(plugin.app)
-    this.plugin = plugin
-    this.modalEl.addClass('omnisearch-modal', 'prompt')
-    this.modalEl.replaceChildren() // Remove all the default Modal's children
+    super(plugin.app);
+    this.modalEl.addClass("omnisearch-modal", "prompt");
+    this.modalEl.replaceChildren(); // Remove all the default Modal's children
 
-    this.cmp = new CmpModal({
+    new CmpModal({
       target: this.modalEl,
       props: {
+        modal: this,
         plugin,
       },
-    })
-
-    // this.modalEl.addClass('omnisearch-modal')
-
-    // this.setPlaceholder('Type to search through your notes')
-
-    // this.setInstructions([
-    //   { command: '↑↓', purpose: 'to navigate' },
-    //   { command: '↵', purpose: 'to open' },
-    //   { command: 'ctrl ↵', purpose: 'to open in a new pane' },
-    //   { command: 'shift ↵', purpose: 'to create' },
-    //   { command: 'esc', purpose: 'to dismiss' },
-    // ])
+    });
   }
 
   onOpen(): void {
-    this.containerEl.style.border = '1px solid red'
-    this.modalEl.style.border = '1px solid blue'
-    this.contentEl.style.border = '1px solid green'
-    // this.inputEl.focus()
-    // this.inputEl.onkeydown = this.onKeydown.bind(this)
-    // Reload last search, if any
-    // if (this.plugin.lastSearch) {
-    //   const event = new Event('input', {
-    //     bubbles: true,
-    //     cancelable: true,
-    //   })
-    //   // this.inputEl.value = this.plugin.lastSearch
-    //   // this.inputEl.dispatchEvent(event)
-    //   // this.inputEl.select()
-    //   // this.inputEl.spellcheck = false
-    // }
-
-    // this.setupObserver(this.modalEl)
-  }
-
-
-  // async onKeydown(ev: KeyboardEvent): Promise<void> {
-  //   if (ev.key === 'ArrowRight') {
-  //     console.log('TODO: open in-note search')
-  //     return
-  //   }
-  //   const noteId = get(selectedNoteId)
-  //   if (ev.key !== 'Enter' || !noteId) return
-
-  //   if (ev.ctrlKey || ev.metaKey) {
-  //     // Open in a new pane
-  //     await this.app.workspace.openLinkText(noteId, '', true)
-  //   }
-  //   else if (ev.shiftKey) {
-  //     // Create a note
-  //     try {
-  //       const file = await this.app.vault.create(
-  //         this.inputEl.value + '.md',
-  //         '# ' + this.inputEl.value,
-  //       )
-  //       await this.app.workspace.openLinkText(file.path, '')
-  //     }
-  //     catch (e) {
-  //       if (e instanceof Error && e.message === 'File already exists.') {
-  //         // Open the existing file instead of creating it
-  //         await this.app.workspace.openLinkText(this.inputEl.value, '')
-  //       }
-  //       else {
-  //         console.error(e)
-  //       }
-  //     }
-  //   }
-  //   this.close()
-  // }
-
-  /**
-   * Observes the modal element to keep track of which search result is currently selected
-   * @param modalEl
-   */
-  setupObserver(modalEl: HTMLElement): void {
-    this.mutationObserver = new MutationObserver(events => {
-      const record = events.find(event =>
-        (event.target as HTMLDivElement).classList.contains('is-selected'),
-      )
-      const id =
-        (record?.target?.firstChild as HTMLElement)?.getAttribute(
-          'data-note-id',
-        ) ?? null
-      if (id) {
-        selectedNoteId.set(id)
-      }
-    })
-    this.mutationObserver.observe(modalEl, {
-      attributes: true,
-      subtree: true,
-    })
-  }
-
-  async onChooseSuggestion(item: ResultNote): Promise<void> {
-    const file = this.app.vault.getAbstractFileByPath(item.path) as TFile
-    // const fileCache = this.app.metadataCache.getFileCache(file)
-    // console.log(fileCache)
-    const content = (await this.app.vault.cachedRead(file)).toLowerCase()
-    const offset = content.indexOf(
-      item.matches[item.occurence].match.toLowerCase(),
-    )
-    await this.app.workspace.openLinkText(item.path, '')
-
-    const view = this.app.workspace.getActiveViewOfType(MarkdownView)
-    if (!view) {
-      throw new Error('OmniSearch - No active MarkdownView')
-    }
-    const pos = view.editor.offsetToPos(offset)
-    pos.ch = 0
-
-    view.editor.setCursor(pos)
-    view.editor.scrollIntoView({
-      from: { line: pos.line - 10, ch: 0 },
-      to: { line: pos.line + 10, ch: 0 },
-    })
+    // this.containerEl.style.border = '1px solid red'
+    // this.modalEl.style.border = '1px solid blue'
+    // this.contentEl.style.border = '1px solid green'
   }
 }
diff --git a/src/stores.ts b/src/stores.ts
index 308b41a..7fd271c 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -1,6 +1,34 @@
-import { writable } from 'svelte/store'
+import { get, writable } from 'svelte/store'
 import type { ResultNote } from './globals'
 
-export const selectedNoteId = writable<string>('')
+// export const selectedNoteId = writable<string>('')
 export const searchQuery = writable<string>('')
 export const resultNotes = writable<ResultNote[]>([])
+
+function createSelectedNote() {
+  const { subscribe, set, update } = writable<ResultNote|null>(null)
+  return {
+    subscribe,
+    set,
+    next: () =>
+      update(v => {
+        const notes = get(resultNotes)
+        let id = notes.findIndex(n => n.path === v?.path)
+        if (!notes.length) return null
+        if (id === -1) return notes[0]
+        id = id < notes.length - 1 ? id + 1 : 0
+        return notes[id]
+      }),
+    previous: () =>
+      update(v => {
+        const notes = get(resultNotes)
+        let id = notes.findIndex(n => n.path === v?.path)
+        if (!notes.length) return null
+        if (id === -1) return notes[0]
+        id = id > 0 ? id - 1 : notes.length - 1
+        return notes[id]
+      }),
+  }
+}
+
+export const selectedNote = createSelectedNote()