diff --git a/src/App.vue b/src/App.vue
index 9c1de6d..67c4c55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,10 @@
 <template>
   <div id="q-app">
     <q-layout class="bg-light">
-      <nav-header-primary
+      <nav-header
         slot="header"
         class="toolbar dark"
-      ></nav-header-primary>
-
-      <nav-header-secondary
-        slot="header"
-        class="toolbar dark"
-      ></nav-header-secondary>
+      ></nav-header>
 
       <div class="layout-view">
         <router-view></router-view>
@@ -28,12 +23,10 @@ import { Loading, Dialog } from 'quasar'
 import Vue from 'vue'
 import 'whatwg-fetch'
 import { state, dispatch } from './store'
-import HeaderPrimary from './components/Headerprimary'
-import HeaderSecondary from './components/Headersecondary'
+import Header from './components/Header'
 import Footer from './components/Footer'
 
-Vue.component('nav-header-primary', HeaderPrimary)
-Vue.component('nav-header-secondary', HeaderSecondary)
+Vue.component('nav-header', Header)
 Vue.component('nav-footer', Footer)
 
 function fetchSuccess (data) {
diff --git a/src/components/Headersecondary.vue b/src/components/Filter.vue
similarity index 90%
rename from src/components/Headersecondary.vue
rename to src/components/Filter.vue
index f1096a9..fce6814 100644
--- a/src/components/Headersecondary.vue
+++ b/src/components/Filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="row">
     <q-select
       type="list"
       v-model="state.sortBy"
@@ -7,7 +7,6 @@
     ></q-select>
 
     <q-search
-      class="dark"
       v-model="state.search"
       @input="searchChanged"
     ></q-search>
@@ -60,5 +59,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped lang="stylus">
+  .row
+    padding: 1em
+  .q-picker-textfield
+    margin-right: 1em
 </style>
diff --git a/src/components/Headerprimary.vue b/src/components/Header.vue
similarity index 100%
rename from src/components/Headerprimary.vue
rename to src/components/Header.vue
diff --git a/src/components/Spelllist.vue b/src/components/Spelllist.vue
index aa60718..b01936c 100644
--- a/src/components/Spelllist.vue
+++ b/src/components/Spelllist.vue
@@ -1,27 +1,32 @@
 <template>
-  <section class="spell-list list striped no-border" id="spell_list">
-    <label
-      is="spell-item"
-      class="item two-lines item-link"
-      v-for="spell in pagedSpells"
-      :spell="spell"
-    >
-    </label>
-    <q-pagination
-      class="text-center"
-      v-model="state.page"
-      :max="numPages"
-    ></q-pagination>
-  </section>
+  <div class="spell-list-container">
+    <nav-filter></nav-filter>
+    <section class="spell-list list striped no-border" id="spell_list">
+      <label
+        is="spell-item"
+        class="item two-lines item-link"
+        v-for="spell in pagedSpells"
+        :spell="spell"
+      >
+      </label>
+      <q-pagination
+        class="text-center"
+        v-model="state.page"
+        :max="numPages"
+      ></q-pagination>
+    </section>
+  </div>
 </template>
 
 <script>
 import Vue from 'vue'
 import { Utils } from 'quasar'
 import Query from '../query'
+import Filter from './Filter'
 import SpellItem from './Spellitem'
 import { state } from '../store'
 
+Vue.component('nav-filter', Filter)
 Vue.component('spell-item', SpellItem)
 
 export default {