diff --git a/src/App.vue b/src/App.vue
index abb0477f744f515bec1115366d99e005ec85ebd0..fbbdaa483677a0853f5016f81e9cd17af809bc96 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,12 +1,28 @@
 <template>
   <v-app id="app">
     <header>
-    <v-toolbar dense outlined color="tertiary">
+    <v-toolbar dense dark color="primary">
+      <div class="beta" :title="release">{{version_label}}</div>
+      <v-spacer/>
+      <v-toolbar-items class="hidden-sm-and-down">
+      <v-divider vertical/>
+      <v-btn text><v-icon left>public</v-icon>Bokmål<v-icon right>expand_more</v-icon></v-btn>
+      <v-divider vertical/>
+      <v-btn text><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
+            <v-divider vertical/>
+      <v-btn text><v-icon left>info</v-icon>Om ordbøkene<v-icon right>expand_more</v-icon></v-btn>
+      </v-toolbar-items>
+      <v-toolbar-items class="hidden-md-and-up">
+      <v-divider vertical/>
+      <v-btn text><span>Meny</span><v-icon right>menu</v-icon></v-btn>
+      </v-toolbar-items>
     </v-toolbar>
+    </header>
+    <div class = "banner">
       <h1><a aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" :class="$vuetify.breakpoint.name"  href="/" tabindex="1">Ordbøkene</a></h1>
-      <div class="beta" :title="release">{{version_label}}</div>
+      
       <p class="sub-title"><router-link aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" to="/" tabindex="3">Bokmålsordboka og Nynorskordboka</router-link></p>
-    </header>
+    </div>
     <router-view></router-view>
     <footer>
       <div :class="$vuetify.breakpoint.xs?'sm':'lg'">
@@ -70,7 +86,6 @@ body {
 
 h1 {
   font-family: Inria Serif;
-  color: var(--v-primary-base);
   padding-left: 15px;
 }
 
@@ -79,34 +94,26 @@ h1 > a.xs, h1 > a.sm {
 }
 
 
-header > h1 > a {
-  color: var(--v-primary-base) !important;
+.banner > h1 > a {
   font-size: 48px;
-  margin: 0px;
 }
 
-.about-link {
-  text-align: right;
-  margin-right: 15px;
-  float: right;
-}
 
-header > p {
-  padding-left: 18px;
-  padding-bottom: 15px;
+.banner > p {
+  padding-bottom: 10px;
   padding-top: 0;
+  padding-left: 15px;
+  
 }
 
-header a {
+.banner a {
   text-decoration: none;
+  color: var(--v-primary-base) !important;
 }
 
 .beta {
-  position: absolute;
-  top: 2px;
   font-size: 18px;
   color: #BBBBBB;
-  padding-left: 15px;
 }
 
 .about-link > a{
@@ -115,7 +122,7 @@ header a {
   color: var(--v-primary-base) !important;
 }
 
-header {
+.banner {
   position: relative;
   padding-left: calc((100vw - 1200px) / 2);
   padding-right: calc((100vw - 1200px) / 2);
@@ -131,9 +138,11 @@ footer  a {
   color: #ffffff !important;
 }
 
+.v-toolbar__content {
+  padding-right: 0px !important;
+}
 
-header {
-  padding-top: 20px;
+.banner {
   background-color: var(--v-tertiary-base);
 }