diff --git a/src/App.vue b/src/App.vue
index 73f6c072..0fca9e1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,53 +3,7 @@
         class="uk-container uk-container-expand uk-light uk-height-viewport"
         style="background: #0b0e0f"
     >
-        <nav
-            class="uk-navbar-container uk-container-expand uk-light"
-            style="background: #0b0e0f"
-            uk-navbar
-        >
-            <div class="uk-navbar-left">
-                <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
-                    ><img
-                        src="../public/img/icons/logo.svg"
-                        height="32"
-                        width="32"
-                    />iped</router-link
-                >
-            </div>
-            <div class="uk-navbar-center uk-flex uk-visible@s">
-                <input
-                    class="uk-input"
-                    type="text"
-                    placeholder="Search"
-                    v-model="searchText"
-                    @keypress="onChange($event)"
-                />
-            </div>
-            <div class="uk-navbar-right">
-                <ul class="uk-navbar-nav">
-                    <li>
-                        <router-link to="/preferences">Preferences</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/login">Login</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/feed">Feed</router-link>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-        <div class="uk-container-expand uk-hidden@s">
-            <input
-                class="uk-input"
-                type="text"
-                placeholder="Search"
-                v-model="searchText"
-                @keypress="onChange($event)"
-            />
-        </div>
-
+        <Navigation />
         <router-view />
 
         <div style="text-align: center">
@@ -70,30 +24,10 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
+import Navigation from "@/components/Navigation";
 export default {
-    data() {
-        return {
-            searchText: "",
-            searchSuggestions: []
-        };
-    },
-    methods: {
-        onChange(e) {
-            if (e.key === "Enter") {
-                this.$router.push({
-                    name: "SearchResults",
-                    query: { search_query: this.searchText }
-                });
-                return;
-            }
-
-            this.fetchJson(
-                Constants.BASE_URL +
-                    "/suggestions?query=" +
-                    encodeURI(this.searchText + e.key)
-            );
-        }
+    components: {
+        Navigation
     }
 };
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 00000000..242c5f63
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,95 @@
+<template
+    ><nav
+        class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
+        style="background: #0b0e0f"
+        uk-navbar
+    >
+        <div class="uk-navbar-left">
+            <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
+                ><img src="/img/icons/logo.svg" height="32" width="32" />iped</router-link
+            >
+        </div>
+        <div class="uk-navbar-center uk-flex uk-visible@m">
+            <input
+                class="uk-input uk-width-medium"
+                type="text"
+                placeholder="Search"
+                v-model="searchText"
+                @keyup="onKeyUp"
+                @focus="onInputFocus"
+                @blur="onInputBlur"
+            />
+        </div>
+        <div class="uk-navbar-right">
+            <ul class="uk-navbar-nav">
+                <li>
+                    <router-link to="/preferences">Preferences</router-link>
+                </li>
+                <li>
+                    <router-link to="/login">Login</router-link>
+                </li>
+                <li>
+                    <router-link to="/feed">Feed</router-link>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <div class="uk-container-expand uk-hidden@m">
+        <input
+            class="uk-input"
+            type="text"
+            placeholder="Search"
+            v-model="searchText"
+            @keyup="onKeyUp"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+        />
+    </div>
+    <SearchSuggestions
+        v-show="searchText && suggestionsVisible"
+        :searchText="searchText"
+        @searchchange="onSearchTextChange"
+        ref="searchSuggestions"
+    />
+</template>
+
+<script>
+import SearchSuggestions from "@/components/SearchSuggestions";
+
+export default {
+    components: {
+        SearchSuggestions
+    },
+    data() {
+        return {
+            searchText: "",
+            suggestionsVisible: false
+        };
+    },
+    methods: {
+        onKeyUp(e) {
+            if (e.key === "Enter") {
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText }
+                });
+                return;
+            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+            }
+            this.$refs.searchSuggestions.onKeyUp(e);
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        },
+        onSearchTextChange(searchText) {
+            this.searchText = searchText;
+        }
+    }
+};
+</script>
+
+<style></style>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
new file mode 100644
index 00000000..3de42746
--- /dev/null
+++ b/src/components/SearchSuggestions.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container">
+        <ul class="uk-list uk-margin-remove uk-text-secondary">
+            <li
+                v-for="(suggestion, i) in searchSuggestions"
+                :key="i"
+                :class="{ selected: selected === i }"
+                @mouseover="onMouseOver(i)"
+                @mousedown.stop="onClick(i)"
+                class="uk-margin-remove suggestion"
+            >
+                {{ suggestion }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import Constants from "@/Constants.js";
+
+export default {
+    props: {
+        searchText: String
+    },
+    data() {
+        return {
+            selected: 0,
+            searchSuggestions: []
+        };
+    },
+    methods: {
+        onKeyUp(e) {
+            if (e.key === "ArrowUp") {
+                if (this.selected <= 0) {
+                    this.setSelected(this.searchSuggestions.length - 1);
+                } else {
+                    this.setSelected(this.selected - 1);
+                }
+                e.preventDefault();
+            } else if (e.key === "ArrowDown") {
+                if (this.selected >= this.searchSuggestions.length - 1) {
+                    this.setSelected(0);
+                } else {
+                    this.setSelected(this.selected + 1);
+                }
+                e.preventDefault();
+            } else {
+                this.refreshSuggestions();
+            }
+        },
+        async refreshSuggestions() {
+            this.searchSuggestions = await this.fetchJson(
+                Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText)
+            );
+            this.searchSuggestions.unshift(this.searchText);
+            this.setSelected(0);
+        },
+        onMouseOver(i) {
+            if (i !== this.selected) {
+                this.selected = i;
+            }
+        },
+        onClick(i) {
+            this.setSelected(i);
+            this.$router.push({
+                name: "SearchResults",
+                query: { search_query: this.searchSuggestions[i] }
+            });
+        },
+        setSelected(val) {
+            this.selected = val;
+            this.$emit("searchchange", this.searchSuggestions[this.selected]);
+        }
+    }
+};
+</script>
+
+<style>
+.suggestions-container {
+    background-color: #242727;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 640px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 5px 0;
+}
+.suggestion {
+    padding: 4px 15px;
+}
+.suggestion.selected {
+    background-color: #393d3d;
+}
+@media screen and (max-width: 959px) {
+    .suggestions-container {
+        max-width: calc(100% - 60px);
+    }
+}
+@media screen and (max-width: 639px) {
+    .suggestions-container {
+        max-width: calc(100% - 30px);
+    }
+}
+</style>