diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 00eddac381d711ead823ef65af2fbd915de8a1ea..fd21e3b60ea3e72ad5bed1f8d47f9e82c5d0adfa 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -20,7 +20,7 @@ build-dev:
       when: never
     - if: $CI_COMMIT_REF_NAME == 'prod'
       when: manual
-    - when: always
+    - when: on_success
   script:
     - |- 
           if [[ $CI_PIPELINE_SOURCE == "merge_request_event" ]]; then
@@ -60,7 +60,7 @@ deploy-dev:
   - if: $CI_COMMIT_TAG != null
     when: never
   - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH || $CI_PIPELINE_SOURCE == 'merge_request_event'
-    when: always
+    when: on_success
   - if: $CI_COMMIT_BRANCH != $CI_DEFAULT_BRANCH && $CI_PIPELINE_SOURCE != 'merge_request_event'
     when: manual
   script:
diff --git a/package-lock.json b/package-lock.json
index 9c8e51d683f2bd6ab24f8d0d9091f04feb6df725..df5bcbcc96353472c1541e3c602475f2d9bbfa0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "axios-cache-adapter": "^2.7.3",
         "core-js": "~3.6.5",
         "debounce": "^1.2.1",
-        "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.42/raw/module.tar.gz?job=publish",
+        "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.45/raw/module.tar.gz?job=publish",
         "vue": "^2.6.12",
         "vue-i18n": "^8.26.7",
         "vue-i18n-bridge": "^9.2.0-beta.10",
@@ -8909,9 +8909,9 @@
       "dev": true
     },
     "node_modules/inflection-table": {
-      "version": "0.2.42",
-      "resolved": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.42/raw/module.tar.gz?job=publish",
-      "integrity": "sha512-sGS724PLPtOvN+508MPDZRr0zZ2qz000Lmkqhj2acdbz9D4dp6J2Ae6XfXPsTcFYUGfQJeHrHTyP1D6U2XL2NQ==",
+      "version": "0.2.45",
+      "resolved": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.45/raw/module.tar.gz?job=publish",
+      "integrity": "sha512-3YlqGasnRVUe98SCQ0L+j7gnoUYCyng954hCIvppGiW2ZB+MqMUFfnQGLnrjmek5PKUlPa45vi3K5m2Iudphzw==",
       "dependencies": {
         "core-js": "~3.6.5",
         "jquery": "^3.5.1",
@@ -18613,7 +18613,8 @@
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
           "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "ansi-regex": {
           "version": "3.0.0",
@@ -18883,7 +18884,8 @@
       "version": "4.5.13",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz",
       "integrity": "sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.13",
@@ -19118,7 +19120,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -19333,7 +19336,8 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -19363,13 +19367,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -23686,8 +23692,8 @@
       "dev": true
     },
     "inflection-table": {
-      "version": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.42/raw/module.tar.gz?job=publish",
-      "integrity": "sha512-sGS724PLPtOvN+508MPDZRr0zZ2qz000Lmkqhj2acdbz9D4dp6J2Ae6XfXPsTcFYUGfQJeHrHTyP1D6U2XL2NQ==",
+      "version": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.45/raw/module.tar.gz?job=publish",
+      "integrity": "sha512-3YlqGasnRVUe98SCQ0L+j7gnoUYCyng954hCIvppGiW2ZB+MqMUFfnQGLnrjmek5PKUlPa45vi3K5m2Iudphzw==",
       "requires": {
         "core-js": "~3.6.5",
         "jquery": "^3.5.1",
@@ -29147,7 +29153,8 @@
     "vuetify": {
       "version": "2.5.8",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.5.8.tgz",
-      "integrity": "sha512-paLmNhKTYFD41+14rIHnCo+P1jHbUzwBiMowxs5qXVq8RdRMqRmcy05Sfse1WUu90amPGK2fIFQq5rL2N8zqZg=="
+      "integrity": "sha512-paLmNhKTYFD41+14rIHnCo+P1jHbUzwBiMowxs5qXVq8RdRMqRmcy05Sfse1WUu90amPGK2fIFQq5rL2N8zqZg==",
+      "requires": {}
     },
     "vuetify-loader": {
       "version": "1.7.2",
@@ -29197,7 +29204,8 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
     },
     "watchpack": {
       "version": "1.7.5",
diff --git a/package.json b/package.json
index 96a360f8bc85fef55833637549857d5abd10e1ab..42e272652fb0b6ff112a0b8951e730f1c35ed472 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "axios-cache-adapter": "^2.7.3",
     "core-js": "~3.6.5",
     "debounce": "^1.2.1",
-    "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.42/raw/module.tar.gz?job=publish",
+    "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.45/raw/module.tar.gz?job=publish",
     "vue": "^2.6.12",
     "vue-i18n": "^8.26.7",
     "vue-i18n-bridge": "^9.2.0-beta.10",
diff --git a/src/App.vue b/src/App.vue
index 868d3a9eb8cb5f76c24b9c69d3c6e9e9ee9eb03e..80a344e8e79f8eeea29a4899f5cfbfa68bd9b8f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,12 +3,16 @@
     <header>
       <TopBar/>
     </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>
-      
-      <p class="sub-title"><router-link aria-label="Ordbøkene bokmålsordboka og nynorskordboka sitt nettsted" to="/" tabindex="3">{{$t("sub-title")}}</router-link></p>
+    <div class = "banner" aria-hidden="true">
+      <div v-if="$vuetify.breakpoint.mdAndUp  || !$route.name">
+      <h1 tabindex="-1"><a :class="$vuetify.breakpoint.name"  href="/">Ordbøkene</a></h1>
+      <p tabindex="-1" class="sub-title"><a href="/">{{$t("sub-title")}}</a></p>
+      </div>
     </div>
+   
     <router-view></router-view>
+
+
     <footer>
       <div :class="$vuetify.breakpoint.xs?'sm':'lg'">
         <div>
@@ -20,6 +24,7 @@
       </div>
       <div>Bokmålsordboka og Nynorskordboka viser skrivemåte og bøying i tråd med norsk rettskriving. Språkrådet og Universitetet i Bergen står bak ordbøkene. Gi oss gjerne tilbakemelding på <a href="mailto:ordbok-beta@uib.no">ordbok-beta@uib.no</a>.</div>
     </footer>
+    
   </v-app>
 </template>
 <script>
@@ -28,7 +33,7 @@ import TopBar from './components/TopBar.vue'
   export default {
     mounted: function(){
       this._i18n.locale = this.$store.state.currentLocale
-      document.title = 'Ordbøkene - ' + this.version_label
+      document.title = 'Ordbøkene - ' + process.env.VUE_APP_VERSION_LABEL
     },
     components: {
       TopBar
@@ -75,17 +80,23 @@ h1 {
   color: var(--v-primary-base)
 }
 
+.banner h1 a {
+  font-size: 48px;
+}
+
 h1 > a.xs, h1 > a.sm {
   font-size: 36px;
 }
 
-
-.banner > h1 > a {
-  font-size: 48px;
+.banner {
+  margin-top: 48px;
+  padding-top: 10px;
 }
 
 
-.banner > p {
+
+
+.banner p {
   padding-bottom: 10px;
   padding-top: 0;
   padding-left: 18px;
@@ -98,8 +109,9 @@ h1 > a.xs, h1 > a.sm {
 }
 
 .beta {
+  font-family: Inria Serif;
   font-size: 18px;
-  color: #BBBBBB;
+  color: white;
   margin-left: 10px;
 }
 
@@ -179,4 +191,31 @@ footer > div.sm > div {
   height: 60px;
 }
 
+/*
+.v-btn {
+  font-weight: bold !important;
+}
+
+/* all inflection-table css shoud be moved to beta.ordbok */
+td[class="infl-group"] {
+  background-color: var(--v-button-base) !important;
+  color: var(--v-text-base) !important;
+  font-style: normal !important;
+  font-weight: bold;
+}
+
+th[class="infl-group"] {
+  background-color: var(--v-button-base) !important;
+  font-style: unset;
+}
+
+.v-application .rounded-t-xl {
+  border-top-left-radius: 28px !important;
+  border-top-right-radius: 28px !important;
+}
+
+.v-application .rounded-xl {
+  border-radius: 28px !important;
+}
+
 </style>
diff --git a/src/components/About.vue b/src/components/About.vue
index 55e612f37a984be0f59097178bcb60bcef715934..187a36cdd989bc4e6249ebf046e416bd68668b65 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -1,7 +1,16 @@
 <template id="">
   <main>
     <div class='about' :class="$vuetify.breakpoint.name">
-    <Article v-if="lang == 'nn'">
+    <Article class="v-sheet v-card rounded-xl" v-if="$store.state.currentLocale == 'eng'">
+      <h2> About </h2>
+      The dictionaries Nynorskordboka and Bokmålsordboka provide information on orthography and definitions for Nynorsk and Bokmål respectively. They were first published in 1986 and were written by lexicographers at the University of Oslo in cooperation with the Language Council of Norway (Språkrådet). From 2016 the University of Bergen and the Language Council have been responsible for the dictionaries. The dictionaries are currently undergoing a thorough revision.
+<a href ="https://www.sprakradet.no/Vi-og-vart/Om-oss/English-and-other-languages/English/">The Language Council</a> is the state agency in charge of questions regarding the Norwegian language and carries out Norwegian language policy on assignment from the Ministry Of Culture. The Council is responsible for informing the public about the official norms for Bokmål and Nynorsk.
+The content of Nynorskordboka and Bokmålsordboka is available as open data and can be used for any purpose under certain terms. <a href="">Read about the terms here</a>.
+
+
+
+    </Article>
+    <Article class="v-sheet v-card rounded-xl" v-if="$store.state.currentLocale == 'nno'">
     <h2>Om betaversjonen</h2>
     <p>
       Dette er ei ny visningside for standardordbøkene <em>Bokmålsordboka</em> og <em>Nynorskordboka</em>. Sida er
@@ -417,7 +426,7 @@
     </details>
 
     </Article>     
-    <Article  v-if="lang == 'nb'">
+    <Article class="v-sheet v-card rounded-xl"  v-if="$store.state.currentLocale == 'nob'">
       <h2>Om betaversjonen</h2>
       <p>Dette er en ny visningsside for standardordbøkene <em>Bokmålsordboka</em> og <em>Nynorskordboka.</em> Siden er fortsatt under utvikling, så enkelte funksjoner er ikke på plass ennå. Arbeidet med å revidere innholdet i ordbøkene pågår, og redaksjonen legger fortløpende ut ordartikler som er revidert og kvalitetssjekket. </p>
       <p>Dersom du vil søke i ordbøkene med det gamle grensesnittet, kan du fortsatt finne dem her: <a aria-label="Lenke til forelda versjon av ordbøkene" href="https://ordbok.uib.no/">ordbok.uib.no</a></p>
@@ -560,36 +569,6 @@ Søket «kjærlighet|kjærleik» gir treff på kjærlighet i Bokmålsordboka og
   </main>
 </template>
 
-<script>
-
-
-export default {
-  data() {
-    return {
-      lang: this.update_locale()
-    }
-  },
-  methods: {
-    update_locale: function(event) {
-      if (event) {
-        localStorage.setItem('locale', event)
-        return event
-      }
-      let stored_locale = localStorage.getItem('locale')
-      if (stored_locale) {
-        return stored_locale
-      }
-      if (navigator.languages.includes('nb')) {
-        
-      return "nb"
-      }
-      return "nn"
-
-    }
-  }
-}
-
-</script>
 
 <style scoped>
 
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 2b8f6c044b654b21fc9cb01e16c908f898bbf0da..2e4b1fbf507d31f0ddcce685e1c2d2bb7d27985e 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,7 +1,9 @@
 <template>
-  <article v-if="article" :class="dictionary">
-    <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
-    <div class="article_content" :class="$vuetify.breakpoint.name">
+  <article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary, 'collapsable': collapsable, 'collapsed': collapsed}" v-if="article">
+    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
+    <InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
+    
+    <div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
       <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
         <h3>Uttale</h3>
           <ul>
@@ -14,8 +16,8 @@
             <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
           </ul>
       </section>
-      <section class="definitions" v-if="has_content" tabindex="0">
-        <h3 tabindex="0">{{def_label}}</h3>
+      <section class="definitions" v-if="has_content">
+        <h3>{{def_label}}</h3>
         <ol>
           <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
         </ol>
@@ -26,13 +28,8 @@
           <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click" />
         </ul>
       </section>
-      <div class="fade">
-        <router-link class="choose" :to="link_to_self.ref" @click.native="details_click(link_to_self)">
-          {{$t("choose")}} <v-icon color="primary" right>chevron_right</v-icon>
-        </router-link>
-      </div>
     </div>
-    <ArticleFooter :article="article"/>
+    <ArticleFooter v-if="!collapsed" :article="article"/>
 </article>
 </template>
 
@@ -43,6 +40,9 @@ import Definition from './Definition.vue'
 import SubArticle from './SubArticle.vue'
 import Header from './Header.vue'
 import ArticleFooter from './ArticleFooter.vue'
+import InflectionButton from './InflectionButton.vue'
+
+import entities from '../utils/entities.js'
 
 function find_sub_articles(definition) {
   let sub_art_list = []
@@ -74,9 +74,31 @@ function find_content(definition) {
 export default {
   name: 'Article',
   props: {
-    article: Object
+    article: Object,
+    articleLookup: Boolean,
+    title_id: String
+
+  },
+  data: function() {
+    return {
+      collapsed: this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+    }
   },
+
     computed: {
+    snippet: function() {
+      if (this.article.body.definitions) {
+        return this.parse_definitions(this.article.body.definitions)
+      }
+      return null
+      
+      
+
+    },
+    collapsable: function() {
+      return this.$parent.$options.name    == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+
+    },
     link_to_self: function() {
       return  {
         ref: '/' + this.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma),
@@ -97,20 +119,87 @@ export default {
     },
     has_content: function() {
       return this.article.body.definitions.reduce((acc, val) => acc.concat(find_content(val)), []).length > 0
-    }
+    },
   },
   components: {
     DefElement,
     Definition,
     SubArticle,
     Header,
-    ArticleFooter
+    ArticleFooter,
+    InflectionButton
+  },
+  mounted: function() {
+    if (this.$route.hash == "#"+ this.title_id) {
+      let focused = document.getElementById(this.title_id)
+      if (focused) focused.focus()
+    }
+    else if (this.$route.hash) {
+      let focused =document.getElementById(this.$route.hash.replace("#",""))
+      if (focused) focused.scrollIntoView({block: "center"})
+    }
   },
   methods: {
+    parse_definitions: function(node) {
+      let definitionTexts = []
+
+      node.forEach((definition) => {
+        if (definition.elements) {
+        if (definition.elements[0].content) {
+          let new_string = ""
+          let old_parts = definition.elements[0].content.split(/(\$)/)
+          let linkIndex = 0
+          old_parts.forEach((item) => {
+            if (item == '$') {
+              let subitem = definition.elements[0].items[linkIndex]
+              if (subitem.id) {
+                new_string += entities[this.dictionary][definition.elements[0].items[linkIndex].id].expansion
+              }
+              else if (subitem.text) new_string += subitem.text
+              else  {
+                new_string +=  definition.elements[0].items[linkIndex].lemmas[0].lemma
+
+              }
+              
+              if (!definition.elements[0].items[linkIndex].id) {
+              }
+              linkIndex += 1
+            }
+            else {
+              new_string += item
+            }
+            
+          })
+
+          if (new_string.substring(new_string.length, new_string.length - 1) == ":") {
+            new_string = new_string.slice(0, -1)
+          }
+          definitionTexts.push(new_string)
+
+        }
+        else if (definition.elements[0].elements) {
+          definitionTexts.push(this.parse_definitions(definition.elements))
+        }
+      }
+      })
+
+      let definitions = definitionTexts.join(" | ")
+      return definitions
+
+    },
+    expand: function() {
+      if (this.collapsed) {
+        this.collapsed = false
+      }
+    },
+    collapse: function() {
+      this.collapsed = true
+    },
     article_link_click: function(item) {
       this.$emit('article-click', item)
     },
     details_click: function(item) {
+      item.title_id = this.title_id
       this.$emit('details-click', item)
     }
   }
@@ -121,30 +210,30 @@ export default {
 article {
   position: relative;
   padding: 24px;
-  margin: 10px;
-  border-radius: 30px;
-  border: solid 1px var(--v-border-base);
+  margin-bottom: 20px;
+  margin-right: 10px;
+  margin-left: 10px;
   background-color: #ffffff;
 }
 
-.xs .article_footer, .sm .article_footer {
-  display: none;
+section.xs article, section.sm article {
+  margin-bottom: 10px !important;
 }
 
+
 .welcome .article_footer {
   display: block;
 }
 
 #single_article_container article {
-  border: solid 1px var(--v-primary-base);
+  border: none;
+  margin-top: 10px;
 }
 
-.fade {
-  display: none;
-}
 
 section {
-  padding-top: 1em;
+  padding-top: 10px;
+  padding-bottom: 10px
 }
 
 h3 {
@@ -229,5 +318,25 @@ ul li.definition {
   padding: 12px;
 }
 
+.collapsable {
+  padding-bottom: 34px;
+}
+
+
+.collapsed .header{
+  
+      display: -webkit-box;
+      width: 100%;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow-y: hidden;  
+    overflow-x: auto;
+}
+
+.header {
+  border-radius: 0px !important;
+}
+
+
 
 </style>
diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue
index df91b72622c1570b649dd2f59c12481bae2c722a..e6230cdb24f9adbdd0b0bf0971e81dc0882ac00d 100644
--- a/src/components/ArticleFooter.vue
+++ b/src/components/ArticleFooter.vue
@@ -13,41 +13,47 @@
       </v-snackbar>
 
       <v-btn v-if="showLinkCopy"
-             x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">
+             small text class="toolbar-button" rounded @click="copy_link">
         <v-icon small left>link</v-icon><span class = "button-text">{{$t("article_footer.copy_link")}}</span>
       </v-btn>
 
-      <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
-        <v-icon x-small left>share</v-icon><span class = "button-text">{{$t("article_footer.share")}}</span>
+      <v-btn v-if="webShareApiSupported" text small class="toolbar-button" rounded @click="shareViaWebShare">
+        <v-icon small left>share</v-icon><span class = "button-text">{{$t("article_footer.share")}}</span>
       </v-btn>
+
       <v-dialog max-width="600px" v-model="citation_dialog">
         <template v-slot:activator="{ on, attrs }">
-            <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
-        <v-icon left x-small>format_quote</v-icon> <span class = "button-text">{{$t("article_footer.cite")}}</span>
+            <v-btn text small class="toolbar-button" rounded v-on="on" v-bind="attrs">
+        <v-icon left small>format_quote</v-icon> <span class = "button-text">{{$t("article_footer.cite")}}</span>
       </v-btn>
+      
 
         </template>
 
         <v-card>
           <v-toolbar elevation="0">
             <v-toolbar-title>Sitere artikkelen</v-toolbar-title>
-            <v-spacer></v-spacer><v-toolbar-items><v-btn :aria-label="$t('article_footer.cancel')" @click="close_citation_dialog" text><v-icon>close</v-icon></v-btn></v-toolbar-items></v-toolbar>
+            <v-spacer></v-spacer><v-toolbar-items><v-btn :aria-label="$t('article_footer.cancel')" @click="close_citation_dialog" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items></v-toolbar>
           <v-card-text class="text--primary">
           {{$t("article_footer.description")}}
           <br/>
           <div id = "citation" v-html="this.create_citation()"/>
           </v-card-text>
-          <v-card-actions >
-          <v-btn depressed :x-small="$vuetify.breakpoint.mobile" :small="!$vuetify.breakpoint.mobile" rounded tabindex="0" @click="copy_citation"><br>
-            <v-icon left :x-small="$vuetify.breakpoint.mobile" :small="!$vuetify.breakpoint.mobile" icon>content_copy</v-icon>  <span class = "button-text">{{$t("article_footer.copy")}}</span>
+          <v-card-actions>
+          <v-btn depressed small rounded @click="copy_citation"><br>
+            <v-icon left small icon>content_copy</v-icon>  <span class = "button-text">{{$t("article_footer.copy")}}</span>
           </v-btn>
-                    <v-btn depressed :x-small="$vuetify.breakpoint.mobile" :small="!$vuetify.breakpoint.mobile" rounded tabindex="0" @click="download_ris"><br>
-            <v-icon left :x-small="$vuetify.breakpoint.mobile" :small="!$vuetify.breakpoint.mobile" icon>get_app</v-icon> <span class = "button-text">{{$t("article_footer.download")}}</span>
+                    <v-btn depressed small rounded @click="download_ris"><br>
+            <v-icon left small icon>get_app</v-icon> <span class = "button-text">{{$t("article_footer.download")}}</span>
           </v-btn>
                     
           </v-card-actions>
+
         </v-card>
+
       </v-dialog>
+
+
   </div>
 </template>
 
@@ -148,8 +154,8 @@ export default {
 }
 
 .toolbar-button {
-  margin-right: 6px;
-  margin-top: 6px;
+  margin-right: 8px;
+  margin-top: 8px;
   font-size: 12px;
 }
 
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 81a0eac3d9c9ff0745bfe3e1fd6755d4286892d4..4e389409141fdb16e6e6972b09100660bc8afc90 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -1,76 +1,92 @@
 <template>
   <div class="autocomplete-container" :class="$vuetify.breakpoint.name">
-    <v-combobox accesskey="s" aria-label="søkefelt"
+    <v-combobox
         v-model="select"
         :loading="loading"
         :items="items"
         :search-input.sync="search"
-        item-text="label"
+        item-text="match"
         :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 190 : 500, transition: 'fade-transition', allowOverflow: true}"
         prepend-inner-icon="search"
         return-object
         rounded
         clearable
         hide-no-data
-        :autofocus="!$parent.article"
-        auto-select-first
         no-filter
+        auto-select-first
         hide-details
-        label="Søk..."
+        label="Søk her"
         solo
         full-width
-        flat
-        outlined
         placeholder="Søk her"
         ref="autocomplete"
         color="primary"
-        :dense="$vuetify.breakpoint.mobile"
+        :dense="$vuetify.breakpoint.smAndDown"
       >
       <template v-slot:append>
+        <div v-if="!$parent.error && $parent.lang=='bm,nn'">
+        <a v-if="$parent.search_results.bm && $parent.search_results.bm.length > 0" href="#result0" class="accessibility_link" tabindex="0">Gå til treff i Bokmålsordboka</a>
+        <a :v-if="$parent.search_results.nn && $parent.search_results.nn.length > 0" :href="'#result'+($parent.search_results.bm? $parent.search_results.bm.length : 0)" class="accessibility_link" tabindex="0">GÃ¥ til treff i Nynorskordboka</a>
+        </div>
+        <div v-else>
+          <a href="#result0" class="accessibility_link" tabindex="0">GÃ¥ til hovedinnhold</a>
+        </div>
+                <a href="#top_menu" class="accessibility_link"
+                   @click="$store.commit('toggle', 'menuOpen')"
+                   aria-label="Hopp til toppmeny"
+
+               >
+            Ã…pne toppmeny</a>
+
         <v-divider vertical/>
-        <v-menu allowOverflow: true>
+        <v-menu allowOverflow: true offsetY>
+          
         <template v-slot:activator="{ on, attrs }">
-        <v-btn min-width="0px" v-bind="attrs" v-on="on" plain depressed color = "primary" text><span v-if="!$vuetify.breakpoint.mobile">
+       <v-btn  class="search-field-button"
+               v-bind="attrs"
+               v-on="on"
+               plain
+               small
+               depressed 
+               color = "primary" 
+               text 
+               @click.native="items=[]">
+               
+          <v-icon small left>book</v-icon>
+          <span v-if="!$vuetify.breakpoint.smAndDown">
           {{$t(`dicts.${$parent.lang}`)}}
-          </span><span v-if="$vuetify.breakpoint.mobile">{{$parent.lang}}</span><v-icon>expand_more</v-icon></v-btn>
+          </span><span v-if="$vuetify.breakpoint.smAndDown">{{$t(`dicts_short.${$parent.lang}`)}}</span></v-btn>
                 </template>
         <v-list>
           <v-list-item  v-for="item in ['bm,nn','bm','nn'].map(l => {return {label: $t(`dicts.${l}`), tag: l}})" :key="item.tag"
-          active-class="v-list-item--active" :class="$parent.lang == item.tag ? 'v-list-item--active' : ''" @click="$parent.update_lang_form(item.tag)">
+          active-class="v-list-item--active" :class="$parent.lang == item.tag ? 'v-list-item--active' : ''" @click="update_lang_form(item.tag)">
                 <v-list-item-title >{{ item.label }}</v-list-item-title>
           </v-list-item>
 
         </v-list>
+
         </v-menu>
-            <v-divider vertical/>
-                <v-dialog max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
-        :close-on-content-click="false" transition="dialog-top-transition">
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn :aria-label="$t('menu.title')" v-bind="attrs" v-on="on" min-width="0px" class = "search-field-button" plain depressed color = "primary" text><span v-if="!$vuetify.breakpoint.mobile"></span><v-icon>more_vert</v-icon></v-btn>
-          </template>
-        <Menu @close="menuDialog=false"/>
-                </v-dialog>
       </template>
-     
+
       <template v-slot:item="data">
-      <span class="searchResult" v-bind:class="{searchLemma : data.item.w}">
-        {{data.item.label}}
+        <span v-if="!data.item.lang">
+          Søk: <strong>{{data.item.match}}</strong> </span>
+
+       <span v-if="data.item.lang">
+               <span class="searchLemma">
+        {{data.item.match}}
       </span>
         <span v-if="(get_lang()=='bm,nn')">
-            ({{["bm","nn","bm,nn"][data.item.lang-1] || 
-            ["søker...","ingen treff","avansert søk"][data.item.search]}})
+             ({{["bm","nn","bm,nn"][data.item.lang-1]}})
         </span>
-      </template>
-      <template slot="no-data">
-        <div></div>
+       </span>
+
       </template>
     </v-combobox>
   </div>
 </template>
 
 <script>
-import Menu from './Menu.vue'
-
   export default {
     props: {
       api: Function,
@@ -79,6 +95,8 @@ import Menu from './Menu.vue'
       return {
         loading: false,
         items: [],
+        inflection_suggestions: null,
+        similar: null,
         search: null,
         select: this.$route.query? this.$route.query.q : null,
         suggesting: null,
@@ -96,86 +114,114 @@ import Menu from './Menu.vue'
       },
       select(item) {
         if (item) {
-          this.items = []
           if (typeof item != 'string') {
-            this.suggesting = false
-            
-            this.submit(item)
+          this.items = []
+          this.suggesting = false
+          item.inflection_suggestions = this.inflection_suggestions
+          item.similar = this.similar
+          
+
+          this.submit(item)
           }
         }
+      },
+      $route (to, from) {
+        this.select = to.query.q
       }
     },
-    components: {
-      Menu
-    },
     methods: {
+      update_lang_form(lang) {
+        this.$emit('update-lang-form', lang)
+        // Submit if switching on front page
+        if (this.search && !this.items[0]) {
+          this.submit({q: this.search, match: this.search, time: Date.now()})
+        }
+      },
       get_lang() {
         return this.$parent.lang
       },
       run_query(q, time) {
-        this.suggesting = true
-        // Search options while waiting for response
-        var search = 0
+        q = q.trim()
+
         if (this.items[0]) {
           if (this.items[0].time < time) {
-            if (/[_*%|]/.test(q)) {
-              search = 2
-            }
             // Whitespace necessary in case option already exists in dropdown
-            this.items.splice(0,1, {q: q, label: q +" ", time: time, search: search})
+            this.items.splice(0,1, {q, match: q, time})
           }
         }
         else {
-          this.items.push({q: q, label: q, time: time, search: search})
+          this.items.push({q, match: q, time})
         }
-        let self = this
-        let scope = self.$parent.scope
-        let params = {q, dict: self.get_lang(), n: 80, scope, dform: 'int', meta: 'n'}
-        if ( self.$parent.pos_selected != "ALL") params.wc = self.$parent.pos_selected
-        self.api.get('suggest?', {params})
+
+        this.suggesting = true
+        if (!/[_*%|]/.test(q)) {
+          this.loading = true
+          let self = this
+          let params = {q, dict: self.get_lang(), n: 6, dform: 'int', meta: 'n', scope: "wb"}
+          self.api.get('suggest?', {params})
             .then(async (response) => {
                         if (self.$refs.autocomplete.searchInput == q & self.suggesting) {
                           let suggestions = []
-                          if (scope.includes("w")) {
-                            suggestions = response.data.a.w.map(item => ({q: q, match: item[0], label: item[0], time: time, lang: [item[1]], w: true}))
+                          if (response.data.a.exact) {
+                            suggestions = response.data.a.exact.map(item => ({q: q, match: item[0], time: time, lang: [item[1]], w: true}))
                           }
-                          if (scope.includes("x")) {
-                            suggestions = suggestions.concat(response.data.a.x.map(item => ({q: q, match: item[0], label: item[0], time: time, lang: [item[1]]})))
-                          }
-                          
-                           
-                          if (/[_*%|]/.test(q)) {
-                            suggestions.unshift({q: q, label: q, time: time, search: 2})
-                          }
-                          
-                          if (!suggestions.length) {
-                            self.items = [{q: q, label: q, time: time, search: 1}]
-                          } else {
+                          self.inflection_suggestions = response.data.a.inflect
+                          self.similar = response.data.a.similar
+                          if (suggestions.length) {
+                            if (suggestions[0].q != suggestions[0].match) {
+                              suggestions.unshift({q, match: q, time})
+                            }
                             self.items = suggestions
                           }
+                          else {
+                            self.items = [{q, match: q, time}]
+                          }
+
+
                         }
                       self.loading = false
                     })
 
+        }
+        else {
+          this.similar = []
+          this.inflection_suggestions = []
+          this.items = [{q, match: q, time}]
+        }
+
+
       },
       submit(item) {
-
           this.$emit('submit', item)
           let self = this
 
           setTimeout(() => {
-          self.$refs.autocomplete.$refs.input.select()
-          this.items = []
-          this.suggesting = false
+          if (!self.$store.state.noMouse) self.$refs.autocomplete.$refs.input.select()
+          else self.$refs.autocomplete.$refs.input.blur()
+          self.suggesting = false
           }, 1)
 
       }
     },
+    mounted: function() {
+      if (! this.$route.hash) {
+        window.scrollTo(0,0)
+        if(!this.$store.state.noMouse) {
+          this.$refs.autocomplete.focus()
+        }
+
+      }
+    }
   }
 </script>
 
 
 <style scoped>
+
+v-toolbar {
+  z-index: 2000 !important;
+}
+
   .searchResult {
     margin-right: 5px;
   }
@@ -194,4 +240,21 @@ import Menu from './Menu.vue'
  .search-field-button {
     padding-right: 0px !important;
   }
+
+  .accessibility_link {
+  display: inline;
+  position: absolute;
+  left: -10000px;
+  }
+
+  .accessibility_link:focus {
+    position: absolute;
+    left: 48px;
+    top : 48px;
+    background-color: white;
+    padding: 10px;
+    z-index: 10000;
+  }
+
+  
 </style>
diff --git a/src/components/DefElement.vue b/src/components/DefElement.vue
index aeac9cf962de47a023d8fd5b0463f3456de432d3..20a2491c9c2605fd9e9767ecedc483a39e649a33 100644
--- a/src/components/DefElement.vue
+++ b/src/components/DefElement.vue
@@ -5,9 +5,16 @@
           :key="index"
            v-bind="item.props"><!--
           -->{{item.html}}<!--
-       --><router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)"><!--
-         -->{{item.link_text}}{{item.definition_order ? ` (${item.definition_order})` : ''}}<!--
-       --></router-link><!--
+          
+       --><router-link class="article_ref" v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)" :key="index">
+         <span class="link_text">{{item.link_text}}</span><!--
+       -->
+       <span class="homograph" v-if="item.lemmas[0].hgno" :aria-label="dictionary=='bm'? 'Betydning': 'Tyding' + ' nummer '+item.lemmas[0].hgno" :title="dictionary=='bm'? 'Betydning': 'Tyding' + ' nummer '+item.lemmas[0].hgno" :key="index"><!--
+        --> ({{roman_hgno(item.lemmas[0])}}{{item.definition_order ? '': ')'}}</span>
+        <span class="def_order" v-if="item.definition_order" :aria-label="'definisjon '+item.definition_order">{{item.lemmas[0].hgno ? ', ': ' ('}}{{item.definition_order}})</span>
+       </router-link>
+
+       <!--
        --><span class="numerator" v-if="item.type == 'fraction'">{{item.num}}</span><!--
        -->{{item.type == 'fraction' ? '⁄' : ''}}<!--
        --><span class="denominator" v-if="item.type == 'fraction'">{{item.denom}}</span><!--
@@ -52,10 +59,12 @@ export default {
           else if (item.type_ == 'article_ref') return {
                                                           type: item.type_,
                                                           html: '',
+                                                          lemmas: item.lemmas,
                                                           link_text: item.word_form ||  item.lemmas[0].lemma,
                                                           ref: '/' + lang + '/' + item.article_id + '/' + encodeURIComponent(item.word_form ||  item.lemmas[0].lemma) + (item.definition_id ? '#def' + item.definition_id : ''),
                                                           article_id: item.article_id,
                                                           definition_id: item.definition_id,
+                                                          definition_order: item.definition_order,
                                                           source: path
                                                         }
           else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
@@ -86,7 +95,8 @@ export default {
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    roman_hgno: helpers.roman_hgno
   }
 }
 </script>
@@ -123,8 +133,20 @@ i {
   font-style: normal;
 }
 
-.homograph {
-  vertical-align: sub;
+.article_ref {
+  text-decoration: none;
+
+}
+
+.link_text {
+  text-decoration: underline;
+
+}
+
+.homograph, .def_order{
+  text-decoration: none !important;
+  color: black
+
 }
 
 q:before {
diff --git a/src/components/Definition.vue b/src/components/Definition.vue
index fa0a2a2342d59719cf3158a20c1010ea05efc169..9959162fb8cdca0567eb9d68b55e767254b24359 100644
--- a/src/components/Definition.vue
+++ b/src/components/Definition.vue
@@ -1,9 +1,10 @@
 <template>
-  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
-    <ul class="explanations" tabindex="0">
+  <li :class="['definition', 'level'+level]"  :ref="level != 9 ? 'def' + body.id : ''" :id="level != 9? 'def' + body.id : ''">
+    <span v-if="level!=9" :aria-label="'Definisjon '+ def_number"/>
+    <ul class="explanations" >
       <DefElement :body="explanation" :dictionary="dictionary" :has_article_ref=has_article_ref(explanation) v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
     </ul>
-    <div v-if="examples.length" tabindex="0">
+    <div v-if="examples.length">
       <h4>{{example_header}}</h4>
       <ul class="examples">
         <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" />
@@ -12,8 +13,8 @@
     <ul class="compound_lists">
       <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" />
     </ul>
-    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length" tabindex="0">
-      <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
+    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
+      <Definition :def_number='index+1' :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
     </div>
   </li>
 </template>
@@ -28,7 +29,9 @@ var Definition = {
   props: {
     body: Object,
     level: Number,
-    dictionary: String
+    dictionary: String,
+    def_number: Number
+    
   },
   components: {
     DefElement,
@@ -57,7 +60,7 @@ var Definition = {
   mounted: function() {
     let ref = 'def' + this.body.id
     if(location.hash.substring(1) == ref){
-      this.$refs[ref].scrollIntoView()
+      this.$refs[ref].scrollIntoView({block: 'center'})
       this.$refs[ref].classList.add('highlighted')
     }
   },
@@ -78,10 +81,12 @@ var Definition = {
   watch:{
     $route(to, from) {
       let ref = 'def' + this.body.id
-      if(location.hash.substring(1) == ref){
-        this.$refs[ref].classList.add('highlighted')
-      }else{
-        this.$refs[ref].classList.remove('highlighted')
+      if (this.$refs[ref]) {
+        if(location.hash.substring(1) == ref){
+          this.$refs[ref].classList.add('highlighted')
+        }else {
+          this.$refs[ref].classList.remove('highlighted')
+        }
       }
     }
   }
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 2af084a4a06168234c58e6a4ea02a9478baad34c..302b7d4b60b6052a66a2075e9d2695d3abbadf5c 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -1,44 +1,95 @@
 <template>
   <main>
-    <div class="search_container">
-      <div class="top_bar" fluid >
-      </div>
-      <Autocomplete v-on:submit="select_result" :api="get_search_endpoint">
+    <div class="search_container" v-if="!article">
+      <Autocomplete v-on:submit="select_result" :api="get_search_endpoint" v-on:update-lang-form="update_lang_form">
       </Autocomplete>
       <SearchToolbar v-if="$store.state.showSearchToolbar" @updatePos="update_pos"  @updateScope="update_scope"/>
+
     </div>
-    <div id="spinner" v-if="waiting">
-      <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
+    <div id="above_results" v-if="$route.name">
+    <div id="suggestions" v-if="!article && !no_results">
+    <p v-if="inflection_suggestions && inflection_suggestions.length"><v-icon left color="primary">info</v-icon><em>{{$route.query.q}}</em> er en bøyd form av
+    <span v-for="(item,index) in inflection_suggestions" :key="index"><router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link>{{index == inflection_suggestions.length-1? '.' : ', '}}</span>
+    </p>
+    <p v-if="lang=='bm,nn' && similar && similar.length > 0 && (search_results.nn && search_results.nn.length == 0)"><v-icon left color="primary">info</v-icon>Legg til lignende treff fra Nynorskordboka:
+    <span v-for="(item,index) in similar" :key="index"><router-link :to="generate_path($route.query.q+'|'+item[0])" @click.native="suggestion_link($route.query.q+'|'+item[0])">{{item[0]}}</router-link>{{index == similar.length-1? '.' : ', '}}</span>
+    </p>
+    <p v-if="lang=='bm,nn' && similar && similar.length > 0 && (search_results.bm && search_results.bm.length == 0)"><v-icon left color="primary">info</v-icon>Legg til lignende treff fra Bokmålsordboka:
+    <span v-for="(item,index) in similar" :key="index"><router-link :to="generate_path($route.query.q+'|'+item[0])" @click.native="suggestion_link($route.query.q+'|'+item[0])">{{item[0]}}</router-link>{{index == similar.length-1? '.' : ', '}}</span>
+    </p>
     </div>
-    <SearchResults :hits="search_results"
+
+        <div class="return_to_results" v-if="article">
+          <router-link v-if="$store.state.searchRoute" :to="$store.state.searchRoute" @click.native="return_to_results()">
+            <v-icon left class="nav_arrow">chevron_left</v-icon>{{$t("back_to_results")}}
+          </router-link>
+          <a v-if="!$store.state.searchRoute" href="/">
+            <v-icon left class="nav_arrow">search</v-icon>Søk i ordbøkene
+          </a>
+        </div>
+
+      </div>
+    
+    <SearchResults  :results_bm="search_results.bm || []"
+                    :results_nn="search_results.nn || []"
                     :lang="lang"
-                    :key="lang"
                     @article-click="article_link_click"
                     @details-click="details_click"
-                    v-if="search_results.length && ! waiting && ! article" />
+                    @update-page="update_page"
+                    v-if="$route.name && !waiting && !article && !error" />
+    <div id="spinner" v-if="waiting">
+      <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
+    </div>
     <div id="single_article_container" v-if="article">
-        <div class="return_to_results" v-if="search_results && search_results.length">
-          <router-link :to="article.source" @click.native="return_to_results()">
-            <v-icon left class="nav_arrow">chevron_left</v-icon>{{$t("back_to_results")}}
-          </router-link>
-        </div>
-      <Article :key="article_key" :article="article" @article-click="article_link_click" />
+      <Article :key="article_key" 
+               :article="article" 
+               title_id="result0"
+               @article-click="article_link_click"
+               @details-click="details_click"/>
     </div>
-    <div class="welcome" v-if="! (article || error || search_results.length || waiting)">
+    <div class="welcome" v-show="$route.name=='/' || !$route.name">
       <div class="monthly" :class="$vuetify.breakpoint.name">
         <div>
-          <Article :article="monthly_bm" @article-click="article_link_click" />
+          <Article :article="monthly_bm" 
+                    title_id="result0"
+                    @article-click="article_link_click" 
+                    @details-click="details_click" />
         </div>
         <div>
-          <Article :article="monthly_nn" @article-click="article_link_click" />
+          <Article :article="monthly_nn" 
+                    title_id="result1"
+                    @article-click="article_link_click" 
+                    @details-click="details_click"/>
         </div>
       </div>
     </div>
+    
     <div class="error" v-if="error">
-      <h1>Ingen treff</h1>
-      <p v-if="error[0]">{{error[0]}}</p>
-      <p v-if="error[1]">{{error[1]}}</p>
-    </div>
+       <div>
+        <h1 tabindex="0" id="result0">{{error.title}}</h1>
+        <p>{{error.description}}</p>
+       </div>
+     </div>
+     <div class="no_results" v-if="no_results">
+       <div>
+         <p><v-icon left color=primary>error</v-icon> Ingen treff <span v-if="pos_selected"> i søk på {{$t('pos_plural.'+pos_selected)}}</span></p>
+         <p v-if="!article && !no_results && inflection_suggestions && inflection_suggestions.length"><em>{{$route.query.q}}</em> er en bøyd form av
+    <span v-for="(item,index) in inflection_suggestions" :key="index"><router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link>{{index == inflection_suggestions.length-1? '.' : ', '}}</span>
+         <p class="suggest_lang" v-if="lang=='bm'">Har du søkt i feil ordbok?<br>Prøv å søke i <router-link :to="generate_path($route.query.q, {lang: 'nn'})" @click.native="language_link('nn')">Nynorskordboka</router-link></p> 
+         <p class="suggest_lang" v-if="lang=='nn'">Har du søkt i feil ordbok?<br>Prøv å søke i <router-link :to="generate_path($route.query.q, {lang: 'nn'})" @click.native="language_link('bm')">Bokmålsordboka</router-link></p> 
+       <article v-if="similar && similar.length" class="v-sheet v-card rounded-xl did_you_mean">
+       <span class="dict-label">Mente du:</span>
+       <v-list>
+         <v-list-item v-for="(item, index) in similar" :key="index">
+           <router-link :to="generate_path(item[0])" @click.native="suggestion_link(item[0])">{{item[0]}}</router-link><span v-if="lang=='bm,nn'" >&nbsp;<em>({{["bm","nn","bm, nn"][item[1]-1]}})</em></span>
+         </v-list-item>
+       </v-list>
+
+       </article>
+       </div>
+     </div>
+      
+    
   </main>
 </template>
 
@@ -55,10 +106,6 @@ import { setup } from 'axios-cache-adapter'
 const SEARCH_ENDPOINT = process.env.VUE_APP_SEARCH_ENDPOINT
 const ARTICLE_ENDPOINT= process.env.VUE_APP_ARTICLE_ENDPOINT
 
-const dicts = {'nn': 'Nynorskorboka',
-               'bm': 'Bokmålsordboka',
-               'bm,nn': 'ordbøkene'}
-
 const api = setup({
   baseURL: SEARCH_ENDPOINT,
   cache: {
@@ -71,108 +118,157 @@ const api = setup({
 })
 
 
-function navigate_to_article(self, source) {
+function navigate_to_article(self, origin) {
   self.article = null
   self.waiting_for_articles = true
-  /*
-  if ((self.$route.query.nocache || '').toLowerCase() == 'true') {
-    config.headers.cachebuster = Date.now()
-  }*/
 
   const lang = self.$route.params.lang
 
   axios.get(ARTICLE_ENDPOINT + lang + '/article/' + self.$route.params.id + ".json")
   .then(function(response){
     self.article = Object.assign(response.data, {'dictionary': lang, results: self.search_results})
-    self.search_results = []
     self.error = null
   })
   .catch(function(error){
-    if (error.response && error.response.status == 404) {
-      self.error = ["Vi har ingen artikkel med id " + self.$route.params.id]
-    } else {
-      self.error = []
-      if (self.lang !== 'bm') self.error.push(`Noko gjekk gale...`)
-      if (self.lang !== 'nn') self.error.push(`Noe gikk galt...`)
-    }
+    console.log(error)
+    self.handle_error(error, true)
   })
   .then(function(response){
     self.waiting_for_articles = false
-    history.replaceState({article: self.article, search_results: [], lang: self.lang, error: self.error, pos_selected: self.pos_selected, scope: self.scope}, '')
-    if (source) {
-      self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
+    self.replace_history()
+    if (origin) {
+      self.$plausible.trackEvent('internal link incoming', {props: {origin}})
     }
   })
 }
 
+function load_articles(self, query, offset, n, dict) {
+  let article_IDs = self.article_info.articles[dict]
+  if (article_IDs)
+  {
+  if (offset > article_IDs.length) {
+  
+    n = 0
+  }
+  else if (offset + n > article_IDs.length) {
+    n = article_IDs.length % n
+    
+  }
+
+  if (n > 0 && (self.lang == dict || self.lang == "bm,nn")) {
+    article_IDs = article_IDs.slice(offset, offset + n)
+
+    return Promise.all(article_IDs.map((article_id) => {
+      return axios.get(`${ARTICLE_ENDPOINT}${dict}/article/${article_id}.json`)
+
+    }))
+    .then((response) => {
+      let results = response.map((element, index) => {
+        return Object.assign(element.data, {
+          dictionary: dict
+        })
+      })
+      self.article = null
+      self.search_results[dict] = results
+    })
+    .catch(error => {
+      self.waiting_for_articles = false
+      self.handle_error(error)
+    })
+  }
+    else {
+    self.search_results[dict] = []
+  }
+  }
+    return Promise.resolve()
+}
+
+
 function navigate_to_query(self, word) {
+  self.error = null
   self.waiting_for_articles = true
-  let  query = self.event ? self.event : {q: word} 
-  
+  if (!self.event) {
+    self.event = {match: word}
+  }
+  let  query = self.event
+
+  self.inflection_suggestions = (self.event && query.inflection_suggestions) || []
+
   // Get article IDs
-  let params = {w: query.match || query.q, dict: self.lang, scope: self.scope, meta: 'n'}
-  if (self.pos_selected != "ALL") params.wc = self.pos_selected
+  let params = {w: query.match, dict: self.lang, scope: self.scope, meta: 'y'}
+  let offset = 0
+  if (self.page) {
+    offset = self.perPage * (self.page -1)
+  }
+  if (self.pos_selected) params.wc = self.pos_selected
   api.get('articles?', {params}).then((response) => {
-            let article_ids = response.data
-            let unwrapped = []
-            for (const d in article_ids) {
-                article_ids[d].forEach(i => unwrapped.push({
-                dictionary: d,
-                id: i
-              }))
-            }
+            self.article_info = response.data
+            self.search_results = {}
+
+            let bm_length = response.data.articles.bm ? response.data.articles.bm.length : 0
+            let nn_length = response.data.articles.nn ? response.data.articles.nn.length : 0
+
+          if (self.lang == 'bm,nn' && (bm_length == 0 || nn_length == 0)) {
+            let missing_lang = bm_length == 0? 1 : 2
+            let similar = (self.event && query.similar) || []
+            self.similar = similar.filter((item, index) => {
+              return item[1] == missing_lang || item[1] == 3
+            })
+          }
+          else {
+            self.similar = []
+          }
           
-          // Get individual articles
-          Promise.all(unwrapped.map((article) => {
-              return axios.get(`${ARTICLE_ENDPOINT}${article.dictionary}/article/${article.id}.json`)
-
-            }))
-            .then((response) => {
-              self.search_results = response.map((element, index) => {
-                return Object.assign(element.data, {
-                  dictionary: unwrapped[index].dictionary
-                })
-              })
-              self.article = null
-              if (! self.search_results.length) {
-                if (query.match) {
-                  self.error = []
-                  if (self.lang !== 'bm') {
-                    self.error.push(`Ordet «${query.match}» finst ikkje i Nynorskordboka. Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`)
-                  }
-                  if (self.lang !== 'nn') self.error.push(`Ordet «${query.match}» finnes ikke i Bokmålsordboka. Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`)
-                } else {
-                  self.error = [`Søk på «${query.q}» gir ingen treff i ${dicts[self.lang]}.`]
 
-                  // If not advanced search
-                  if (query.search != 2) self.error[0] += " Søk med * eller % dersom du er usikker på skrivemåten. Søketips kan du finne i «OM ORDBØKENE»."
+          if (bm_length + nn_length == 0) {
+            self.similar = (self.event && query.similar) || []
+            self.waiting_for_articles = false
+            self.no_results = true
+            self.replace_history() // fixes routing bug when going back from suggested search
 
-                  if (self.lang == "bm") self.error[0] += ` Bruk knappen «nynorsk (nn)» om du har søkt i feil ordbok.`
-                  if (self.lang == "nn") self.error[0] += ` Bruk knappen «bokmål (bm)» om du har søkt i feil ordbok.`
-                }
+          }
+          else {
 
-              }
-              else {
-                self.error = null
-              }
-            })
-            .catch(error => {
-              self.connection_error(error)
-            })
+            self.no_results = null
+            Promise.all([
+              load_articles(self, query, offset, self.perPage, "bm"),
+              load_articles(self, query, offset, self.perPage, "nn")
+            ])
             .then(() => {
+              // Show inflection suggestions if they are not among the first results
+
+              /*
+              if (self.event && self.event.inflection_suggestions) {
+                self.inflection_suggestions = self.event.inflection_suggestions.filter((item) => {
+                if ((item[1] == 1 || item[1] == 3) && self.search_results.bm) {
+                  if (!self.search_results.bm[0]) {
+                    console.log("SUGGEST ERROR: no bm results")
+                  }
+                  else return !self.search_results.bm[0].suggest.includes(item[0])
+                }
+                if ((item[1] == 2 || item[1] == 3) && self.search_results.nn) {
+                  if (!self.search_results.nn[0]) {
+                    console.log("SUGGEST ERROR: no nn results")
+                  }
+                  else return !self.search_results.nn[0].suggest.includes(item[0])
+                }
+                })
+              } else {
+                self.inflection_suggestions = []
+              }
+              */
+
               self.waiting_for_articles = false
-              history.replaceState({
-                article: self.article,
-                search_results: self.search_results,
-                lang: self.lang,
-                error: self.error,
-                pos_selected: self.pos_selected,
-                scope: self.scope
-              }, '')
+              self.$store.commit('setSearchRoute', self.$route.fullPath)
+              
+              self.replace_history()
             })
+          }
         }).catch(error =>{
-          self.connection_error(error)
-
+          self.waiting_for_articles = false
+          console.log(error)
+            self.handle_error(error)
+            self.replace_history()         
         })
 }
 
@@ -181,18 +277,24 @@ export default {
   data: function() {
     return {
       article_key: 0,
-      search_results: [],
+      search_results: {},
       lang: this.$store.state.defaultDict,
       waiting_for_articles: true,
       waiting_for_metadata: true,
       article: null,
       error: null,
+      no_results: null,
       monthly_bm: null,
       monthly_nn: null,
       event: null,
-      previous: this.$route.fullPath,
-      scope: "w",
-      pos_selected: "ALL"
+      scope: "wbx",
+      pos_selected: "ALL",
+      article_info: null,
+      page: 1,
+      perPage: 10,
+      inflection_suggestions: null,
+      similar: null,
+      selected: null
     }
   },
   computed: {
@@ -201,7 +303,7 @@ export default {
     },
     get_search_endpoint: function() {
       return api
-    },
+    }
   },
   components: {
     Article,
@@ -210,22 +312,99 @@ export default {
     SearchToolbar
   },
   methods: {
-    connection_error: function(error) {
-      this.search_results = []
-      if (error.response) {
-        this.error = []
-        if (this.lang !== 'bm') this.error.push(`Noko gjekk gale på serversida`)
-        if (this.lang !== 'nn') this.error.push(`Noe gikk galt på serversiden"`)
+    replace_history: function() {
+          history.replaceState({article: this.article, 
+                              search_results: this.search_results, 
+                              article_info: this.article_info,
+                              lang: this.lang, 
+                              error: this.error,
+                              no_results: this.no_results,
+                              pos_selected: this.pos_selected,
+                              scope: this.scope,
+                              article_info: this.article_info,
+                              page: this.page,
+                              perPage: this.perPage,
+                              selected: this.selected,
+                              inflection_suggestions: this.inflection_suggestions,
+                              similar: this.similar}, '')
+
+
+    },
+    total_results: function() {
+      if (this.article_info) {
+        let total = 0
+        if (this.article_info.articles.bm) {
+          total += this.article_info.articles.bm.length
+        }
+        if (this.article_info.articles.nn) {
+          total += this.article_info.articles.nn.length
+        }
+
+        return total
+      }
+    },
+    load_monthly_bm: function() {
+      let self = this
+      axios.get(ARTICLE_ENDPOINT + 'bm/article/5607.json').then(function(response){
+        self.monthly_bm = Object.assign(response.data, {dictionary: 'bm'})
+      })
+    },  
+    load_monthly_nn: function() {
+      let self = this
+      axios.get(ARTICLE_ENDPOINT + 'nn/article/78569.json').then(function(response){
+        self.monthly_nn = Object.assign(response.data, {dictionary: 'nn'})
+      })
+    },
+    handle_error: function(error, article) {    
+      this.search_results = {}
+      console.log(error)
+      if (error.message == "Network Error") {
+        this.error = {title: this.$t('error.network.title'), description: this.$t('error.network.description'), article}
+      }
+      else if (error.response) {
+        if (error.response.status == 404) {
+          if (article) {
+            this.error = {title: this.$t('error.404.title'), description: this.$t('error.no_article', {id: this.$route.params.id}), article: true}
+          }
+          else {
+            this.error = {title: this.$t('error.404.title'), description: this.$t('error.404.description'), article}
+          }
+        }
+        else if (error.response.status == 503) {
+          this.error = {title: this.$t('error.503.title'), description: this.$t('error.503.description'), article}
+        }
+        else if (String(error.response.status)[0] == "5") {
+          this.error = {title: this.$t('error.server.title'), description: this.$t('error.server.description', {code: error.response.status}), article}
+        }
+        else {
+          this.error = {title: this.$t('error.generic_code.title'), description: this.$t('error.generic_code.description', {code: error.response.status}), article}
+        }
       } else {
-        this.error = []
-        if (this.lang !== 'bm') this.error.push(`Nettverksproblem, prøv igjen`)
-        if (this.lang !== 'nn') this.error.push(`Nettverksproblemer, prøv igjen`)
+        this.error = {title: this.$t('error.generic.title'), description: this.$t('error.generic.description'), article}
       }
     },
+    suggestion_link: function (word) {
+      this.pos_selected = null
+      this.event = null
+      this.inflection_suggestions = null
+      navigate_to_query(this, word)
+    },
+    language_link: function (lang) {
+      let word = this.$route.query.q
+      this.pos_selected = null
+      this.event = null
+      this.inflection_suggestions = null
+      this.lang = lang
+      navigate_to_query(this, word)
+
+    },
     select_result: function (event) {
         this.event = event
         let path = `/${this.lang}/search`
-        let query = {q: event.match || event.q, pos: this.pos_param(), scope: this.scope}
+        let pos = this.pos_param()
+        let query = {q: event.match || event.q}
+        if (pos) query["pos"] = pos
+        if (this.scope) query["scope"] = this.scope
         this.$router.push({path, query})
         navigate_to_query(this)
          
@@ -239,14 +418,49 @@ export default {
 
       pos_param: function() {
         if (this.pos_selected) return this.pos_selected.toLowerCase()
-        return ""
+        return null
+      },
+      update_page: function() {
+        let q = (this.$route.query || this.$route.params).q
+        let path = `/${this.lang}/search`
+        let pos = this.pos_param()
+        let query = {q: q, page: this.page}
+        if (pos != 'all') query.pos = pos
+        if (this.scope) query.scope = this.scope
+        this.$router.push({path, query})
+        let offset = 0
+        if (this.page) {
+          offset = this.perPage * (this.page -1)
+        }
+
+      let self = this
+      Promise.all([
+      load_articles(this, query, offset, this.perPage, "bm"),
+      load_articles(this, query, offset, this.perPage, "nn")]).then(() => {
+         self.replace_history()
+         self.$forceUpdate()
+      }
+      ).then(() => {
+        this.$store.commit('setSearchRoute', this.$route.fullPath)
+      })
+      },
+
+        generate_path: function(q, params) {
+        if (q) {
+          let path = `/${(params && params.lang) || this.lang}/search?q=${q}`
+          if (this.scope) path += "&scope=" + this.scope
+          return path
+        } 
       },
 
       reload_params: function() {
         let q = (this.$route.query || this.$route.params).q
         if (q) {
           let path = `/${this.lang}/search`
-          let query = {q: q, pos: this.pos_param(), scope: this.scope}
+          let pos = this.pos_param()
+          let query = {q: q}
+          if (pos) query.pos = pos
+          if (this.scope) query.scope = this.scope
           this.$router.push({path, query})
           navigate_to_query(this, q)
         } 
@@ -254,48 +468,50 @@ export default {
 
       update_lang_form: function (lang) {
         this.lang = lang
+        this.page = 1
         this.reload_params()
       },
       update_scope: function(scope) {
         this.scope = scope
+        this.page = 1
         this.reload_params()
       },
       update_pos: function (pos) {
         this.pos_selected = pos
+        this.page = 1
         this.reload_params()
       },
 
     article_link_click: function(item) {
       if (this.article && this.article.article_id == item.article_id){
         this.article_key++
-        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error, pos_selected: this.pos_selected, scope: this.scope}, '')
+        this.replace_history()
+
       }else{
         navigate_to_article(this, item.source)
       }
     },
     details_click: function(item) {
-      item.article.source = this.previous
       this.article = item.article
-      history.replaceState({article: this.article, search_results: [], lang: this.lang, error: null, pos_selected: this.pos_selected, scope: this.scope}, '')
+      this.replace_history()
     },
     return_to_results: function() {
       this.article = null
     }
   },
-  watch: {
-    $route(to, from) {
-      this.previous = from.fullPath
-    }
-  },
   mounted: function(){
     let self = this
     self.lang = self.$route.params.lang || this.$store.state.defaultDict
     if (self.$route.query.pos) {
     self.pos_selected = self.$route.query.pos.toUpperCase()
-    }
+    } else self.pos_selected = null
+
     if (self.$route.query.scope) {
       self.scope = self.$route.query.scope
     } 
+    if (self.$route.query.page) self.page = parseInt(self.$route.query.page)
+    if (self.$route.query.perPage) self.perPage = self.$route.query.perPage
+
     Promise.all([
       axios.get(ARTICLE_ENDPOINT + 'bm/concepts.json').then(function(response){
         let concepts = response.data.concepts
@@ -321,46 +537,55 @@ export default {
       }
       else {
         self.waiting_for_articles = false
-        history.replaceState({article: self.article, 
-                              search_results: self.search_results, 
-                              lang: self.lang, 
-                              error: self.error, 
-                              pos_selected: self.pos_selected,
-                              scope: self.scope}, '')
-
+        self.replace_history()
+        self.load_monthly_bm()
+        self.load_monthly_nn()
 
-      // words of the month
-      axios.get(ARTICLE_ENDPOINT + 'bm/article/5607.json').then(function(response){
-        self.monthly_bm = Object.assign(response.data, {dictionary: 'bm'})
-      })
-
-      axios.get(ARTICLE_ENDPOINT + 'nn/article/78569.json').then(function(response){
-        self.monthly_nn = Object.assign(response.data, {dictionary: 'nn'})
-      })
       }
-
-
-    }).catch(function(_){
-      self.error = []
-      if (self.lang !== 'bm') self.error.push(`Eit nettverksproblem hindra lasting av sida. Prøv å laste sida på nytt`)
-      if (self.lang !== 'nn') self.error.push(`Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt`)
+    }).catch(function(error){
+      if (error.message == "Network Error") {
+        self.error = self.$t('error.network')
+      }
+      else if (error.response) {
+        self.error = self.$t('error.server', {code: error.response.status})
+      } 
+      else {
+        self.error = self.$t('error.generic')
+      }
       self.waiting_for_metadata = false
       self.waiting_for_articles = false
     })
   },
+  watch: {
+    $route(to, from) {
+      if (to.fullPath == "/") {        
+        this.load_monthly_bm()
+        this.load_monthly_nn()
+      }
+      if (to.name == 'lookup' && from.fullPath == '/') {
+        this.$store.commit('setSearchRoute', null)
+      }
+    }
+  },
   created: function() {
     let self = this
     window.onpopstate = function (event) {
       if (event.state) {
         self.article = event.state.article
         self.search_results = event.state.search_results
+        self.article_info = event.state.article_info
         self.lang = event.state.lang
-        self.pos_selected = event.pos_selected || self.pos_selected
-        self.scope = event.scope || self.scope
+        self.pos_selected = event.state.pos_selected
+        self.scope = event.state.scope
         self.error = event.state.error
+        self.no_results = event.state.no_results
+        self.page = event.state.page,
+        self.perPage = event.state.perPage
+        self.selected = event.state.selected
+        self.inflection_suggestions = event.state.inflection_suggestions,
+        self.similar = event.state.similar
       }
     }
-
   }
 }
 </script>
@@ -373,11 +598,14 @@ main {
   flex-direction: column;
 }
 
+
 div.welcome {
-  margin-top: 1em;
+  padding-top: 10px;
+  margin-top: 10px;
   flex-grow: 10;
   background-image: url('../assets/books.jpg');
   background-repeat: no-repeat;
+  background-position-x: center;
 }
 
 div.welcome article {
@@ -386,22 +614,38 @@ div.welcome article {
 
 .search_container {
   background-color: var(--v-tertiary-base);
-  padding-top: 1px;
+  padding-top: 10px;
 }
 
 #spinner {
   margin: auto;
 }
 
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
+#search_results, #spinner, #above_results, #single_article_container, div.welcome, div.search_container, .error, .no_results {
   padding-left: calc((100vw - 1200px) / 2);
   padding-right: calc((100vw - 1200px) / 2);
 }
 
-.error > p {
+#above_results div {
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: 18px;
+}
+
+#suggestions {
+  padding-left: 10px;
+}
+
+
+.error p, .no_results p {
   margin-left: 15px;
 }
 
+.error div{
+  padding: 10px;
+  padding-top: 24px;
+}
+
 #spinner {
   padding-top: 40px;
 }
@@ -435,15 +679,6 @@ div.monthly details, div.monthly h3 {
   color: var(--v-primary-base);
 }
 
-.top_bar {
-  display: -webkit-box;
-  -webkit-box-orient: horizontal;
-  flex-direction: row;
-  flex-wrap: wrap;
-  vertical-align: bottom !important;
-  padding-bottom: 10px;
-}
-
 .lang_select_container {
   padding-left: 10px;
 }
@@ -470,18 +705,18 @@ li.suggestion {
 }
 
 .return_to_results {
+  padding-left: 10px;
   padding-top: 10px;
   display: table-cell;
 }
 
 .return_to_results a {
-  color: var(--v-primary-base) !important;
+  color: var(--v-text-base) !important;
   text-decoration: none;
 }
 
 .nav_arrow {
   vertical-align: top !important;
-  margin-left: 10px;
   color: var(--v-primary-base) !important;
 }
 
@@ -489,4 +724,9 @@ li.suggestion {
   padding: 10px;
 }
 
+.suggest_lang {
+  padding-left: 36px;
+}
+
+
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 64f941d71599affcc7262e2794d2fad886c2358f..cce1d85ff990bbdf4f2a62cdfb21d37df987b78c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,37 +1,70 @@
 <!-- eslint-disable -->
 <template>
   <div class = "header">
-    <span class="dict-label" tabindex="0">{{dict_label}}</span>
-    <div class="article_header" tabindex="0"><h2><router-link :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)">{{header_text}}</router-link></h2>
-    <span class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></div>
-    <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
-    <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span>
+    <h2>
+    <router-link tabindex="0" 
+                 :id="title_id" 
+                 :to="$parent.link_to_self.ref" 
+                 @click.native="$parent.details_click($parent.link_to_self)"
+                 v-bind:class="{'long_lemma': long_lemma}"
+                 class="article_header">
+    <span v-for="(lemma, index) in lemmas" 
+          :key="index">{{lemma.lemma}}<!--
+          --><span :aria-label="'Betydning nummer ' + hgno_arabic" 
+                   :title="'Betydning nummer '+hgno_arabic"
+                   class="hgno">{{" "+roman_hgno(lemma)}}</span><span 
+                   class="title_comma" 
+                   v-if="lemmas[1] && index < lemmas.length-1">{{", "}}
+                  </span>
+    </span>
+    </router-link></h2>
+    <span class="dict-label">{{dict_label}}</span>
+    <h2 class="secondary_header" 
+        v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
+    <span class="header_group_list" 
+          v-if="group_list.length">{{group_list}}</span>
     <span v-if="$store.state.showInflectionNo">{{inflection_classes}}</span>
 
-    <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i>
-      <v-menu tile v-model="menu" offset-x max-width="200px">
+    <span v-if="split_inf"> (kløyvd infinitiv: <em>-a</em>
+      <v-menu tile 
+              v-model="menu" 
+              offset-x max-width="200px">
         <template v-slot:activator="{ on, attrs }">
-          <v-btn aria-label="Mer informasjon om kløyvd infinitiv" x-small icon v-on="on" v-bind="attrs" class="info-button">
-            <v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon>
+          <v-btn aria-label="Mer informasjon om kløyvd infinitiv" 
+                 x-small
+                 icon 
+                 v-on="on" 
+                 v-bind="attrs" 
+                 class="info-button">
+            <v-icon color="primary" 
+                    size="14px">$vuetify.icons.value.info</v-icon>
           </v-btn>
         </template>
-        <v-card tile class="info-card">
-          Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir
-          <a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
+        <v-card tile 
+                class="info-card">
+          Dersom du bruker kløyvd infinitiv, skal dette verbet ha <em>-a</em> i infinitiv. Les meir
+          <a target="_blank" 
+             href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>.
         </v-card>
       </v-menu>)
     </span>
-      <div class="inflection-wrapper" v-if="inflected">
-    
-    <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
-    <span>{{inflection_button_text}}</span><span class = "inflection-arrow"><v-icon right>{{inflection_arrow}}</v-icon></span>
-    </v-btn>
-      <div class="inflection-canvas" v-if="inflection_expanded">
-        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
-      </div>
-
-</div>
-  
+    <span v-if="$parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
+    <span class="diamond" v-if="group_list.length"> ❖ </span>{{$parent.snippet}}
+    </span>                
+    <span v-if="$parent.collapsable" >
+          <v-btn class="expand_icon" v-if="$parent.collapsed"
+           text
+           small
+           @click="$parent.collapsed=false">
+           Vis mer
+           <v-icon small right>expand_more</v-icon></v-btn>
+           <v-btn class="expand_icon" v-else
+           text
+           small
+           @click="$parent.collapsed=true">
+           <v-icon small>expand_less</v-icon></v-btn>
+           
+           </span> 
   </div>
 </template>
 
@@ -39,19 +72,34 @@
   /* eslint-disable */
 import helpers from '../utils/helpers.js'
 
-import inflectionTable from 'inflection-table'
-
 export default {
   name: 'Header',
   props: {
     lemmas: Array,
     dictionary: String,
-    article_id: Number
+    article_id: Number,
+    title_id: String
+  },
+    data: function() {
+    return {
+      menu: false,
+      long_lemma: false
+    }
+  },
+  mounted: function() {
+
+    //console.log(this.$refs[this.title_id])
+    //console.log(document.getElementById(this.title_id).offsetWidth, document.getElementById(this.title_id).scrollWidth)
+    if (this.$el.scrollWidth > this.$el.offsetWidth) {
+      this.long_lemma = true
+    }
+
+  },
+  methods: {
+    roman_hgno: helpers.roman_hgno
+
   },
   computed: {
-    header_text: function() {
-      return this.lemmas.map(lemma => lemma.lemma).join(', ')
-    },
     secondary_header_text: function() {
       let a_forms = []
       this.lemmas.forEach((lemma, i) => {
@@ -64,31 +112,21 @@ export default {
       });
       return a_forms.join(', ')
     },
-    inflect_tooltip: function() {
-      return this.dictionary == 'bm' ? 'Klikk for å se bøyinger' : 'Klikk for å sjå bøyingar'
-    },
     dict_label: function() {
       return {
         'bm': 'bokmålsordboka',
         'nn': 'nynorskordboka'
       }[this.dictionary] || ''
     },
-    hgno: function() {
-      let hgnos = []
-      this.lemmas.forEach(lemma => {
-        let hgint = parseInt(lemma.hgno)
-        hgnos.push(["I","II","III","IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"][hgint])
-      })
-      return hgnos.join(", ")
-    },
-    inflection_button_text: function() {
-      return {
-        "bm": {false: "Se bøyning", true: "Skjul bøyning"},
-        "nn": {false: "Sjå bøying", true: "Skjul bøying"}
-      }[this.dictionary][this.inflection_expanded]
-    },
-    inflection_arrow: function() {
-      return this.inflection_expanded?  "expand_less" : "expand_more"
+    hgno_arabic: function() {
+    let hgnos = []
+    this.lemmas.forEach(lemma => {
+      let hgint = parseInt(lemma.hgno)
+      if (hgint > 0) {
+        hgnos.push(hgint)
+        }
+    })
+    return hgnos.join(", ")
     },
     group_list: function() {
       return helpers.group_list(this.lemmas, this.dictionary)
@@ -130,36 +168,9 @@ export default {
         }
       )
     },
-    lemmas_with_word_class_and_lang: function() {
-      return this.lemmas.map(lemma => Object.assign({language: this.dictionary == 'bm' ? 'nob' : 'nno',
-                                                     word_class: lemma.paradigm_info[0].inflection_group.split('_')[0]}, lemma))
-    },
-    inflected: function() {
-      return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
-    },
     split_inf: function() {
       return this.lemmas[0].split_inf
     }
-  },
-  components: {
-    inflectionTable
-  },
-  data: function() {
-    return {
-      inflect_reported: false,
-      menu: false,
-      inflection_expanded: false
-    }
-  },
-  methods: {
-    toggle: function() {
-      this.inflection_expanded = !this.inflection_expanded
-      if (! this.inflect_reported) {
-        this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
-      }
-      this.inflect_reported = true
-      
-    }
   }
 }
 
@@ -194,104 +205,52 @@ article h2.secondary_header {
 .dict-label {
   color: var(--v-primary-base)  ;
   font-weight: bold;
-  padding-left: 5px;
   position: absolute;
   top: 0px;
-  left: 15px;
+  left: 24px;
   font-variant-caps: all-small-caps;
 }
 
 
-.show-inflection {
-  color: var(--v-primary-base) !important;
-  font-weight: bold !important;
-}
-
-
-.inflection-arrow {
-  position: absolute;
-  right: -4px;
-  margin-left: 3px;
-  font-size: 10px;
-}
-
-@keyframes open {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.inflection-canvas {
-  overflow-x: auto;
-  /*position: absolute;*/
-  z-index: 5;
-  background-color: rgba(255, 255, 255, 0);
-  /*max-width: 100vw;*/
-  padding-top: 10px;
-}
-
-
-.inflection-wrapper {
-  color: var(--v-text-base);
-  width: min-content;
-  font-size: 14px;
-  overflow-x: auto;
-  margin-top: 10px;
-}
-
-#search_results .xs .inflection-wrapper, #search_results .sm .inflection-wrapper {
-  display: none;
-}
-
-.context {
-  color: var(--v-primary-lighten4) !important;
-}
 
 div.lemma {
   display: none;
 }
 
-table {
-  border-collapse: collapse;
-  margin-top: 5px;
-  border-color: var(--v-primary-base);
-}
 
-th, td {
-  border: solid 1px;
-  padding: 5px;
-}
 
-th {
-  background-color: var(--v-button-base);
-  color: var(--v-primary-darken1)
+.article_header {
+  text-decoration: none;
+  overflow:auto;
+  word-wrap: normal;
 }
 
-.infl-label {
-    text-align: center;
-    vertical-align: top;
-}
+.long_lemma {
+  font-size: 60% !important;
 
-article:not(.righ_hand_column) .inflection-canvas {
-  left: -35px;
 }
 
-
-td.hilite {
-    background-color: var(--v-tertiary-base);
-    text-align: center
+.hgno {
+  color: var(--v-text-base) !important;
+  font-family: unset;
+  font-size: 16px;
+  font-weight: normal;
 }
 
-.article_header {
-  display: flex;
-  align-items: baseline;
+
+.expand_icon {
+    justify-content: center;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    padding-right: 24px !important;
+    width: 100%;
+    border-bottom-right-radius: 28px;
+    border-bottom-left-radius: 28px;
 }
 
-.hgno {
-  padding-left: 3px;
+.diamond {
+  color: var(--v-primary-base);
 }
 
 </style>
diff --git a/src/components/Help.vue b/src/components/Help.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8d0a675bf5d0576808fe92d8f2187308c7e365e7
--- /dev/null
+++ b/src/components/Help.vue
@@ -0,0 +1,92 @@
+<template id="">
+    <div class='help' :class="$vuetify.breakpoint.name">
+    <div  v-if="$store.state.currentLocale == 'nno'">
+      <p>
+        Du søkjer ved å skrive inn ordet og trykkje på returtasten eller klikke på
+        det aktuelle ordet i nedtrekksmenyen. Kva ordbok du får treff i, avheng av
+        kva ordbok du har valt å søkje i, og om ordet blir brukt i begge
+        skriftspråka. Det ligg per i dag ikkje inne koplingar mellom ordbøkene, men
+        vi arbeider med ein meinte-du-funksjon, som vi håpar blir til hjelp for å
+        finne dei riktige orda både i bokmål og nynorsk.
+      </p>
+      <p>
+        Du kan søkje direkte på faste uttrykk, t.d. <em>gje katten i</em>.
+        Alternativt finn du uttrykka samla til slutt i artikkelen eller artiklane
+        dei er knytte til. Når du skriv inn eit enkelt ord i søkjefeltet, viser
+        nedtrekksmenyen òg dei faste uttrykka som ordet er ein del av.
+      </p>
+      <p>
+        Dersom du er usikker på skrivemåten av eit ord eller ønskjer treff i meir
+        enn éin artikkel, kan du bruke følgjande teikn:
+      </p>
+      <p>
+        <ul class="bullet">
+          <li>
+            % og * erstattar null, eitt eller fleire teikn
+          </li>
+          <li>
+            _ erstattar eitt teikn
+          </li>
+
+          <li>%, * og _ kan kombinerast for å erstatte eitt eller fleire teikn</li>
+          <li>| gjer det mogleg å søkje i fleire oppslagsord samstundes</li>
+        </ul>
+      </p>
+      Døme:
+      <p>
+        Søkjer du på «arbeid*r», er dei første treffa i nedtrekksmenyen <em>arbeider</em> i Bokmålsordboka og
+        <em>arbeidar</em> i Nynorskordboka.
+      </p>
+      <p>
+        Søket «inter%es%ant» gjev treff på <em>interessant</em> i begge ordbøkene.
+      </p>
+      <p>
+        Søket «førsk%lær_r» gjev treff på <em>førskolelærer</em> i <em>Bokmålsordboka</em> og
+        <em>førskolelærar</em>/<em>førskulelærar</em> i
+        Nynorskordboka.
+      </p>
+      <p>
+        Søket «kjærlighet|kjærleik» gjev treff i på <em>kjærlighet</em> i <em>Bokmålsordboka </em>og <em>kjærleik </em>i
+        <em>Nynorskordboka</em>.
+        Søket «undervis_r|lær_r» gjev treff på <em>underviser </em>og<em>lærer</em> i <em>Bokmålsordboka</em> og
+        <em>undervisar</em> og <em>lærar</em> i <em>Nynorskordboka</em>.
+      </p>
+    </div>
+  
+    <div  v-if="$store.state.currentLocale == 'nob'">
+  <p>Du søker ved å skrive inn ordet og trykke på returtasten eller klikke på det aktuelle ordet i nedtrekksmenyen. Hvilken ordbok du får treff i, avhenger av hvilken ordbok du har valgt å søke i, og om ordet blir brukt i begge skriftspråkene. Det ligger per i dag ikke inne koblinger mellom ordbøkene, men vi arbeider med en mente-du-funksjon, som vi håper blir til hjelp for å finne de riktige ordene både i bokmål og nynorsk. 
+Du kan søke direkte på faste uttrykk, f.eks. gi katten i. Alternativt finner du uttrykkene samlet til slutt i artikkelen eller artiklene de er knyttet til. Når du skriver inn et enkelt ord i søkefeltet, viser nedtrekksmenyen også de faste uttrykkene som ordet inngår i.  
+Dersom du er usikker på skrivemåten av et ord eller ønsker treff i mer enn én artikkel, kan du bruke følgende tegn:</p>
+<p><ul class="bullet">
+<li>% og * erstatter null, ett eller flere tegn</li>
+<li> _ erstatter ett tegn </li>
+<li>• %, * og _ kan kombineres for å erstatte ett eller flere tegn </li>
+<li>| gjør det mulig å søke i flere oppslagsord samtidig</li>
+    </ul></p>
+
+Eksempler:
+<p>
+Søker du på «arbeid*r», er de første treffene i nedtrekksmenyen arbeider i Bokmålsordboka og arbeidar i Nynorskordboka. 
+Søket «inter%es%ant» gir treff på interessant i begge ordbøkene. 
+Søket «førsk%lær_r» gir treff på førskolelærer i Bokmålsordboka og førskolelærar/førskulelærar i Nynorskordboka.
+Søket «kjærlighet|kjærleik» gir treff på kjærlighet i Bokmålsordboka og kjærleik i Nynorskordboka. Søket «undervis_r|lær_r» gir treff på underviser og lærer i Bokmålsordboka og undervisar og lærar i Nynorskordboka.</p>
+  </div>
+</div>
+</template>
+
+
+<style scoped>
+
+
+
+  ul.bullet > li {
+    list-style: disc;
+    margin-left: 20px;
+  }
+
+
+
+  blockquote {
+    margin-left:50px;
+  }
+</style>
diff --git a/src/components/InflectionButton.vue b/src/components/InflectionButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..90ac2c2c515ed7fdbed995370e4e49c6d86ffecd
--- /dev/null
+++ b/src/components/InflectionButton.vue
@@ -0,0 +1,184 @@
+<!-- eslint-disable -->
+<template>
+ 
+      <div class="inflection-wrapper" v-if="inflected && !$parent.collapsed">
+    
+    <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
+    <span>{{inflection_button_text}}</span><span class = "inflection-arrow"><v-icon right>{{inflection_arrow}}</v-icon></span>
+    </v-btn>
+      <div class="inflection-canvas" v-if="inflection_expanded">
+        <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
+      </div>
+
+</div>
+</template>
+
+<script>
+  /* eslint-disable */
+import helpers from '../utils/helpers.js'
+
+import inflectionTable from 'inflection-table'
+
+export default {
+  name: 'InflectionButton',
+  props: {
+    lemmas: Array,
+    dictionary: String,
+    article_id: Number
+  },
+  computed: {
+    inflect_tooltip: function() {
+      return this.dictionary == 'bm' ? 'Klikk for å se bøyinger' : 'Klikk for å sjå bøyingar'
+    },
+    inflection_button_text: function() {
+      return {
+        "bm": {false: "Se bøyning", true: "Skjul bøyning"},
+        "nn": {false: "Sjå bøying", true: "Skjul bøying"}
+      }[this.dictionary][this.inflection_expanded]
+    },
+    inflection_arrow: function() {
+      return this.inflection_expanded?  "expand_less" : "expand_more"
+    },
+    group_list: function() {
+      return helpers.group_list(this.lemmas, this.dictionary)
+    },
+    inflection_classes: function() {
+      let inf_classes = new Set()
+      let ureg = false
+      this.lemmas.forEach((lemma, i) => {
+
+           if (lemma.inflection_class) inf_classes.add(lemma.inflection_class)
+           else ureg = true
+
+      })
+      if (inf_classes.size){
+
+      let class_array = Array.from(inf_classes).sort()
+      if (ureg) class_array.push("ureg.")
+      let class_list
+      if (class_array.length < 3) {
+        class_list = class_array.join(" og ")
+      }
+      else {
+        class_list = class_array.slice(0, -1).join(", ") + " og " + class_array[class_array.length -1]
+      }
+
+      return " ("+ class_list +")"
+      }
+    },
+    inflection_groups_by_lemma: function() {
+      let components = Object.keys(this.$options.components)
+      return this.lemmas.map(
+        function(lemma_){
+          let inflection_groups = lemma_.paradigm_info.reduce((acc, std) =>  Object.assign(acc, {[std.inflection_group]: []}), {})
+          lemma_.paradigm_info.forEach(std => inflection_groups[std.inflection_group].push(std))
+          return {
+            lemma: lemma_.lemma,
+            inflection_groups: Object.fromEntries(Object.entries(inflection_groups).filter(e => components.includes(e[0].replace('/', '_'))))
+          }
+        }
+      )
+    },
+    lemmas_with_word_class_and_lang: function() {
+      return this.lemmas.map(lemma => Object.assign({language: this.dictionary == 'bm' ? 'nob' : 'nno',
+                                                     word_class: lemma.paradigm_info[0].inflection_group.split('_')[0]}, lemma))
+    },
+    inflected: function() {
+      return this.lemmas.reduce((acc, lemma) => acc += lemma.paradigm_info.reduce((acc2, digm) => acc2 += digm.inflection.length, 0), 0) > 0
+    },
+  },
+  components: {
+    inflectionTable
+  },
+  data: function() {
+    return {
+      inflect_reported: false,
+      inflection_expanded: false
+    }
+  },
+  methods: {
+    toggle: function() {
+      this.inflection_expanded = !this.inflection_expanded
+      if (! this.inflect_reported) {
+        this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
+      }
+      this.inflect_reported = true
+      
+    }
+  }
+}
+
+</script>
+
+<style>
+.show-inflection .v-icon {
+  color: var(--v-primary-base) !important;
+}
+
+.inflection-arrow {
+  position: absolute;
+  right: -4px;
+  margin-left: 3px;
+  font-size: 10px;
+}
+
+@keyframes open {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.inflection-canvas {
+  overflow-x: auto;
+  /*position: absolute;*/
+  z-index: 5;
+  background-color: rgba(255, 255, 255, 0);
+  /*max-width: 100vw;*/
+  padding-top: 10px;
+}
+
+
+.inflection-wrapper {
+  color: var(--v-text-base);
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+
+.context {
+  color: var(--v-primary-lighten4) !important;
+}
+
+div.lemma {
+  display: none;
+}
+
+table {
+  border-collapse: collapse;
+  margin-top: 5px;
+}
+
+th, td {
+  border: solid 2px var(--v-button-darken1);
+  padding: 5px;
+}
+
+th {
+  background-color: var(--v-button-base);
+}
+
+.infl-label {
+    text-align: center;
+    vertical-align: top;
+}
+
+
+td.hilite {
+    background-color: var(--v-tertiary-base);
+    text-align: center
+}
+
+</style>
diff --git a/src/components/LocaleMenu.vue b/src/components/LocaleMenu.vue
index 1a7fdd53751ad8a9d81818d13de249026420a4c7..6bf266c04fdd4c1aa4f22ef8e23f0f04ad6f35e9 100644
--- a/src/components/LocaleMenu.vue
+++ b/src/components/LocaleMenu.vue
@@ -5,10 +5,9 @@
                 <v-subheader>{{$t("settings.language")}}</v-subheader>
                 <v-list-item>
                     <v-list-item-content>
-                <v-select rounded 
-                          v-model="updateLocale"
+                <v-select v-model="updateLocale"
+                          :menu-props="{ offsetY: true }"  
                           prepend-inner-icon="language"
-                          outlined
                           hide-details
                           :items="locales"
                           :label="$t('settings.locale')"
@@ -19,10 +18,9 @@
                 
                 <v-list-item>
                     <v-list-item-content>
-                <v-select rounded 
-                          v-model="updateDefaultDict"
+                <v-select v-model="updateDefaultDict"
+                          :menu-props="{ offsetY: true }"  
                           prepend-inner-icon="book"
-                          outlined
                           hide-details
                           :items="dicts"
                           :label="$t('settings.default-dict')"
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 1474f4638f433498607f7415fa34f30330a303c5..b875141484b34b76dbb9e6558bcf079ba5a4aa4d 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -1,31 +1,74 @@
 <template>
           <v-card>
-            <v-toolbar dense dark color="primary">
-              <v-toolbar-title>Meny</v-toolbar-title><v-spacer></v-spacer>
-              <v-toolbar-items><v-divider vertical/>
-
-                <v-btn
-                    @click="$emit('close')"
-                    dark
-                    text
-              >{{$t("close")}}
-                <v-icon>close</v-icon>
-              </v-btn>
-            </v-toolbar-items>
-            </v-toolbar>
-              <v-card-text>
-                <v-list subheader>
-                  <v-subheader>Hjelp og informasjon</v-subheader>
-                <v-btn text to="/om">Om ordbøkene<v-icon>chevron_right</v-icon></v-btn>
+            <v-list>
+               <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-title>Hjelp til søk</v-list-item-title>
+          </template>
+    <v-list-item><Help/></v-list-item>
+               </v-list-group>
+
+               <v-list-item link to="/om" v-on:click="$emit('close')">
+            <v-list-item-icon><v-icon>info</v-icon></v-list-item-icon>
+            <v-list-item-title>Om betaversjonen</v-list-item-title>
+            <v-list-item-icon><v-icon>chevron_right</v-icon></v-list-item-icon>
+              </v-list-item>
+
+               <v-divider></v-divider>
+  
+        <v-subheader>Innstillinger</v-subheader>
+
+
+              <v-list-group sub prepend-icon="language">
+                 <template v-slot:activator>
+            <v-list-item-title>Språk</v-list-item-title>
+          </template>
+          <v-list-item>
+     <v-list subheader>
+      <v-radio-group mandatory v-model="updateLocale" label="Her kan du endre språk eller målform på knapper, meldinger og menyer. Dette vil ikke påvirke innholdet i ordbøkene: Bokmålsordboka vil fortsatt være på bokmål, og Nynorskordboka vil være på nynorsk">
+        <v-radio value="eng" label="English (eng)"></v-radio>
+        <v-radio value="nob" label="Bokmål (nob)"></v-radio>
+        <v-radio value="nno" label="Nynorsk (nno)"></v-radio>
+      </v-radio-group>
+      </v-list></v-list-item>
+              </v-list-group>
+
+                            <v-list-group prepend-icon="book">
+                 <template v-slot:activator>
+            <v-list-item-title>Ordbok på forsiden</v-list-item-title>
+          </template>
+      <v-list-item>
+     <v-list subheader>
+      <v-radio-group mandatory v-model="updateDefaultDict" label="Velg hvilken ordbok som skal skal være ditt standarvalg når du går inn på ordbokene.no. Dette vil ike ha betydning for nåværende søk eller lenker til søk i ordbøkene. Bruk knappen til høyre i søkefeltet hvis du vil bytte ordbok.">
+        <v-radio value="bm,nn" :label="$t('dicts.bm,nn')"></v-radio>
+        <v-radio value="bm" :label="$t('dicts.bm')"></v-radio>
+        <v-radio value="nn" :label="$t('dicts.nn')"></v-radio>
+      </v-radio-group>
+      </v-list></v-list-item>
+      </v-list-group>
+
+
+<v-list-group prepend-icon="settings">
+                 <template v-slot:activator>
+            <v-list-item-title>Andre innstillinger</v-list-item-title>
+          </template>
+
+    <v-list-item><Settings/></v-list-item>
+                
+              </v-list-group>
+
+                          <v-list-item v-on:click='$store.commit("resetStore")'>
+                <v-list-item-icon><v-icon>delete</v-icon></v-list-item-icon>
+                <v-list-item-title>{{$t("menu.reset")}}</v-list-item-title>
+              </v-list-item>
+<v-divider></v-divider>
+              <v-list-item v-on:click="$emit('close')">
+                <v-list-item-icon><v-icon>close</v-icon></v-list-item-icon>
+                <v-list-item-title>{{$t("close")}}</v-list-item-title>
+              </v-list-item>
+              
                 </v-list>
-                <LocaleMenu/>
-                <Settings/>
-
-            </v-card-text>
-             <v-card-actions><v-spacer/>
-                      <v-btn rounded depressed @click='$store.commit("resetStore")'>{{$t("menu.reset")}}</v-btn>
-                      <v-btn rounded depressed @click="$emit('close')">{{$t("close")}}</v-btn> 
-             </v-card-actions>
+
             
 
           </v-card>
@@ -34,12 +77,35 @@
 <script>
 import Settings from './Settings.vue'
 import LocaleMenu from './LocaleMenu.vue'
+import Help from './Help.vue'
 
 export default {
     name: "Menu",
     components: {
       Settings,
-      LocaleMenu
+      LocaleMenu,
+      Help
+    },
+    computed: {
+        updateLocale: {
+            get () { return this.$store.state.currentLocale}, 
+            set(value) {
+                this.$store.commit("setLocale", {value: value, i18n: this._i18n})
+                }
+        },
+        updateDefaultDict: {
+            get () { return this.$store.state.defaultDict}, 
+            set(value) {
+                this.$store.commit("setDefaultDict", value)
+                }
+        }
+    },
+    watch: {
+    $route(to, from) {
+      if (to.name == "about" && from.name != to.name) {
+        this.$store.commit('toggle', 'aboutOpen')
+      }
     }
+  }
 }
 </script>
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9f91f5dba7818b01ebf7f30fa6cad834e71eb178
--- /dev/null
+++ b/src/components/Pagination.vue
@@ -0,0 +1,58 @@
+<template>
+<div v-bind:class="{'centered': bottom}">
+              <span color="tertiary" class = "pagination" v-if="!$parent.$parent.article && $parent.$parent.article_info && ($parent.count_bm > $parent.$parent.perPage || $parent.count_nn > $parent.$parent.perPage)">
+            <v-pagination @input="update" v-model="$parent.$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil(Math.max($parent.count_bm, $parent.count_nn)/$parent.$parent.perPage)"></v-pagination>
+                <span class="result-counts" v-if="!bottom">
+                  <span class="total-results">{{$parent.$parent.total_results()}} treff </span>
+                  <span v-if="$parent.$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{$parent.count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{$parent.count_nn}}</span>
+                  <span v-if="$parent.$parent.lang!='bm,nn'" class="dict-counts"> | {{$t('dicts_inline.'+$parent.lang)}}</span>
+                </span> 
+                       
+          </span>
+
+          <v-btn v-if="bottom && $parent.$parent.total_results() > 6" text @click.native="to_top"><v-icon left>expand_less</v-icon>Til første resultat</v-btn> 
+          </div>
+</template>
+
+<script>
+
+export default ({
+    name: "Pagination",
+    props: {
+        bottom: Boolean
+    },
+    methods: {
+        update: function(item) {
+        if (this.bottom) {
+            this.to_top()
+        }
+      
+        this.$emit('update-page', item)
+
+    },
+        to_top: function() {
+        let first = document.getElementById("result0")
+        if (first) first.focus();
+        window.scrollTo(0,0)
+        }
+        
+
+    },
+})
+</script>
+
+<style scoped>
+.centered {
+    text-align: center;
+    padding-bottom: 10px;
+}
+
+.centered > span {
+    justify-content: center;
+    padding-bottom: 10px
+}
+
+div {
+    padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 6ce0d8dc5d1d4c4204fb3f199bdf628d33c0aa34..af65abe6c9d5bb162950b98f82978fdcc0b5aaae 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,55 +1,84 @@
 <template>
-  <section id="search_results">
+  <section id="search_results" :class="$vuetify.breakpoint.name">
+    <Pagination @update-page="$emit('update-page')"/>
     <div class="flex-container" :class="$vuetify.breakpoint.name">
-      <ul class="hits" v-if="results_bm.length">
-        <li  class="article_container" v-for="(result, index) in results_bm" :key="index + results_hash" tabindex="-1">
+
+       <div class="hits" v-if="$vuetify.breakpoint.smAndDown">
+        <div  class="article_container" v-for="(result, index) in results_bm.concat(results_nn)" :key="index + both_hash"
+        :style="'order:'+(index < results_bm.length? 2*index : ((index-results_bm.length)*2) + 1)">
           <Article
               :article="result"
+              :title_id="`result${index}`"
               @article-click="article_link_click"
               @details-click="details_click">
           </Article>
-        </li>
-      </ul>
-      <ul class="hits" v-if="results_nn.length">
-        <li class="article_container" v-for="(result, index) in results_nn" :key="index + results_hash" tabindex="-1">
+        </div>
+      </div>
+
+      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp && lang!= 'nn'" v-bind:class="{'wide': lang=='bm'}">
+        <div  class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
           <Article
               :article="result"
+              :title_id="`result${index}`"
               @article-click="article_link_click"
-              @details-click="details_click"
-              :class="right_col_class_name">
+              @details-click="details_click">
           </Article>
-        </li>
-      </ul>
+        </div>
+      </div>
+      <div class="hits" v-if="$vuetify.breakpoint.mdAndUp && lang!='bm'" v-bind:class="{'wide': lang=='nn'}">
+        <div class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
+          <Article
+              :article="result"
+              :title_id="`result${index + results_bm.length}`"
+              @article-click="article_link_click"
+              @details-click="details_click">
+          </Article>
+        </div>
+      </div>
     </div>
+    <Pagination @update-page="$emit('update-page')" bottom/>
+
+   
   </section>
 </template>
 
 <script>
 import Article from './Article.vue'
-
+import Pagination from './Pagination.vue'
 export default {
   name: 'SearchResults',
   props: {
-    hits: Array,
-    lang: String
+    results_bm: Array,
+    results_nn: Array,
+    lang: String,
+    meta: Object
   },
   computed: {
-    right_col_class_name: function() {
-      if (this.$vuetify.breakpoint.mdAndUp) {
-        if (this.results_bm.length) {
-          return 'righ_hand_column'
-        }
-      }
-      return ''
+    both_hash: function(){
+      return this.results_bm.concat(this.results_nn).reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
+    },
+    bm_hash: function(){
+      return this.results_bm.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
     },
-    results_bm: function(){
-      return this.hits.filter(hit => hit.dictionary == 'bm')
+    nn_hash: function(){
+      return this.results_nn.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
     },
-    results_nn: function(){
-      return this.hits.filter(hit => hit.dictionary == 'nn')
+    count_bm: function(){
+      
+      if (this.$parent.article_info.articles.bm ){
+        return this.$parent.article_info.articles.bm.length
+      }
+      else {
+        return 0
+      }
     },
-    results_hash: function(){
-      return this.hits.reduce((hash, hit) => (hash + hit.article_id) % 10000, 0)
+    count_nn: function(){
+      if (this.$parent.article_info.articles.nn ){
+        return this.$parent.article_info.articles.nn.length
+      }
+      else {
+        return 0
+      }
     }
   },
   methods: {
@@ -58,10 +87,12 @@ export default {
     },
     details_click: function(item) {
       this.$emit('details-click', item)
-    }
+    },
+    
   },
   components: {
-    Article
+    Article,
+    Pagination
   }
 }
 
@@ -73,61 +104,54 @@ export default {
     padding: 20px 0px 20px 0px;
   }
 
-  .hits {
-    margin-top:0px;
-  }
-
   .flex-container {
     display: flex;
   }
 
-  .flex-container.xs, .flex-container.sm {
-    flex-direction: column;
+  .hits {
+    min-width: 50%;
   }
 
-  .flex-container > ul {
-    padding: 0px !important;
+  .hits.wide {
     min-width: 50%;
   }
 
-  #search_results details.xs, #search_results details.sm {
-    display: none;
+  .flex-container.sm .hits, .flex-container.xs .hits {
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
   }
+ 
+  .results-count {
+    color: var(--v-primary-base);
+    margin-left: 24px;
 
-  #search_results .article_content.xs, #search_results .article_content.sm {
-    position: relative;
-    height: 60px;
-    overflow: hidden;
   }
 
-  #search_results .article_content.xs > section, #search_results .article_content.sm > section {
-    display: none;
-  }
+  .pagination {
+    margin-left: 10px;
+    display: flex;
+    flex-wrap: wrap;
 
-  #search_results .article_content.xs h3, #search_results .article_content.sm h3 {
-    display: none;
+  }
+  .total-results {
+    font-weight: bold;
+    color: var(--v-primary-base);
   }
 
-  #search_results .article_content.xs > section.definitions, #search_results .article_content.sm > section.definitions {
-    display: block;
+  .result-counts {
+    padding: 10px;
+    justify-content: right !important;
   }
 
-  #search_results .article_content.xs > .fade, #search_results .article_content.sm  > .fade {
-    display: inline-block;
-    text-align: right;
-    font-size: 20px;
-    font-weight: bold;
-    color: var(--v-primary-base);
-    padding-top: 30px;
-    width:100%;
-    height:60px;
-    position:absolute;
-    left:0;
-    top:0px;
-    background:linear-gradient(rgba(255, 255, 255, 0) 0px, var(--v-tertiary-base));
+  .total-results, .dict-counts {
+    white-space: nowrap;
   }
 
-  article.righ_hand_column div.inflection-wrapper {
-    right: -35px;
+  .pagination ul {
+    padding-inline-start: 0px !important;
+    justify-content: right;
   }
+
+
 </style>
diff --git a/src/components/SearchToolbar.vue b/src/components/SearchToolbar.vue
index 324c21b8f9f93abe02fb796cc6173adbd0e9b78a..211471c5d91df281660ac199941f690e598f73e1 100644
--- a/src/components/SearchToolbar.vue
+++ b/src/components/SearchToolbar.vue
@@ -1,32 +1,51 @@
 <template>
-    
-        <v-container fluid>
+    <v-card rounded="xl">
+          
+        <v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp">
           <v-row >
-          <v-col :cols="$vuetify.breakpoint.mobile ? 12 : 3">
-            <v-select rounded 
+          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
+            <v-autocomplete  
+                auto-select-first
+                clearable
+                
                 v-model="$parent.pos_selected"
                 hide-details
-                outlined
-                flat
-                dense
-                label="Avgrens etter ordklasse"
+                :menu-props="{ offsetY: true }"
+                :dense="$vuetify.breakpoint.smAndDown"
+                label="Ordklasse"
                 :items="pos_items"
+                append-icon="expand_more"
                 @input="updatePos">
-          </v-select>
+            </v-autocomplete>
           </v-col>
-          <v-col :cols="$vuetify.breakpoint.mobile ? 12 : 3">
-            <v-select rounded 
-                v-model="$parent.scope"
-                hide-details=""
-                outlined
-                dense
-                label="Søkemodus"
-                :items="scope_items"
-                @input="updateScope">
-          </v-select>
+          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
+            <v-checkbox  
+                v-model="inflected_results"
+                :dense="$vuetify.breakpoint.smAndDown"
+                label="Vis bøyde former"/>
+
+          </v-col>
+          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
+
+            <v-checkbox
+                v-model="fulltext"
+                :dense="$vuetify.breakpoint.smAndDown"
+                label="Fulltekstsøk"/>
           </v-col>
-          </v-row>
+           </v-row>
+         
         </v-container>
+        <v-btn v-if="$vuetify.breakpoint.smAndDown"
+          class="search_options"
+          v-bind:class="{'expanded': expanded}"
+          x-small
+          rounded
+           text
+           
+           
+           @click="expanded=!expanded">
+           <v-icon v-if="!expanded" small left color="primary">filter_alt</v-icon>{{expanded? '' : 'Søkealternativer'}}<v-icon small :right="!expanded">{{expanded ? 'expand_less': 'expand_more'}}</v-icon></v-btn>
+        </v-card>
      
 </template>
 
@@ -34,33 +53,93 @@
 
 export default {
     name: "SearchToolbar",
-    data() {
-      return { 
-        pos_items: ["ALL", "NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
+    data: function() {
+      return {
+        expanded: false
+
+      }
+    },
+    computed: {
+      inflected_results: {
+        get() {
+          return this.$parent.scope.includes("b")
+        },
+        set() {
+          if (this.$parent.scope.includes("b")) {
+            this.$emit('updateScope', this.$parent.scope.replace("b",""))
+          }
+          else {
+            this.$emit('updateScope', this.$parent.scope + "b")
+          }
+        }
+      },
+      fulltext: {
+        get() {
+          return this.$parent.scope.includes("x")
+        },
+        set() {
+          if (this.$parent.scope.includes("x")) {
+            this.$emit('updateScope', this.$parent.scope.replace("x",""))
+          }
+          else {
+            this.$emit('updateScope', this.$parent.scope + "x")
+          }
+        }
+      },
+      pos_items: function() {
+        return  ["NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
           return {text: this.$t("pos." + text ), value: text}
-        }),
-        scope_items: ["w", "x", "wx"].map(text => {
+        })
+      },
+      scope_items: function() {
+        return ["w", "wb", "b", "wxb"].map(text => {
           return {text: this.$t("scope." + text), value: text}
         })
       }
     },
     methods: {
+      reset (pos) {
+        this.$emit('updatePos', "ALL")
+        this.$emit('updateScope', "wb")
+      },
       updatePos (pos) {
         this.$emit('updatePos', pos)
-      },
-      updateScope (scope) {
-        this.$emit('updateScope', scope)
-      },
+      }
   }
 }
 </script>
 
 <style scoped>
 
-.container {
-  padding: 10px !important;
+.v-card {
+  padding-top: 10px !important;
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+  padding-bottom: 10px !important;
+  padding-top: 10px;
   margin-top: 10px;
-  min-width: 100%;
+  margin-right: 10px;
+  margin-left: 10px;
+  min-height: 36px;
+}
+
+.search_options {
+    position: absolute;
+    min-height: 36px;
+    bottom: 0px;
+    left: 0px;
+    border-radius: 28px;
+
+
+    float: left;
+
+    width: 100%;
+}
+
+.search_options.expanded {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  min-height: 24px;
 }
 
 
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 540e36d40a39bf96775c58515bc723de66544d0a..45bbf6b3eb26e30b269620d878bb31796fcfe850 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,17 +1,11 @@
 <template>
 <v-list three-line subheader>
-    <v-subheader>{{$t("settings.title")}}</v-subheader>
     <v-checkbox
     v-model="toggleSearchToolbar"
     label="Vis verktøylinje for søkealternativer"
     hide-details
     ></v-checkbox>
     <v-checkbox
-    v-model="toggleHGNO"
-    label="Vis homografnumre"
-    hide-details
-    ></v-checkbox>
-    <v-checkbox
     v-model="toggleInflectionNo"
     label="Vis bøyningsnumre"
     hide-details
@@ -34,11 +28,6 @@ export default {
             set () { this.$store.commit("toggle", "showSearchToolbar")
             }
         },
-        toggleHGNO: {
-            get () { return this.$store.state.showHGNO}, 
-            set () { this.$store.commit("toggle", "showHGNO")
-            }
-        },
         toggleInflectionNo: {
             get () { return this.$store.state.showInflectionNo}, 
             set () { this.$store.commit("toggle", "showInflectionNo")
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index dd9bbb019083fb88ac06284eadb9ee7cc48b269e..7c8b2630bf8a445d91683792ffb3d46472cfa095 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,46 +1,32 @@
 <template>
-        <v-toolbar class = "top-bar" dense dark color="primary">
-      <div class="beta" :title="release">{{version_label}}</div>
+<div>
+        <v-app-bar elevate-on-scroll app class = "top-bar" dense dark color="primary">      
+      <v-app-bar-title class="beta" :title="release" aria-label="Ordbøkene: Bokmålsordboka og Nynorskordboka"><a href ="/">Ordbøkene.no</a></v-app-bar-title>
+
       <v-spacer/>
-      <v-toolbar-items v-if="!$vuetify.breakpoint.mobile">
-      <v-divider vertical/>
-      <v-btn text width="210" v-if="false" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
-      <v-divider vertical/>
-      <v-menu :close-on-content-click="false" v-model="settingsMenu">
-          <template v-slot:activator= "{ on, attrs }">
-              <v-btn v-show="$route.name != 'about'" v-bind="attrs" v-on="on" text width="210"><v-icon left>settings</v-icon>{{$t("settings.title")}}<v-icon right>expand_more</v-icon></v-btn>
-          </template>
-          <v-card>
-              <v-card-text>
-          <LocaleMenu/>
-          <Settings/>
-          </v-card-text>
-                       <v-card-actions><v-spacer/>
-                      <v-btn rounded depressed @click='$store.commit("resetStore")'>Tilbakestill</v-btn>
-                      <v-btn rounded depressed @click="settingsMenu=false">{{$t("close")}}</v-btn> 
-             </v-card-actions>
-          </v-card>
-      
-      </v-menu>
-            <v-divider vertical/>
-      <v-btn text width="210" @click="toggleAbout"><v-icon left>{{$route.name=='about'? "chevron_left":"info"}}</v-icon>{{$route.name=='about'? "Tilbake":"Om ordbøkene"}}</v-btn>
       <v-divider vertical/>
+      <v-toolbar-items v-if="$route.name == 'about'">
+      <v-btn text @click.native="back" v-if="$store.state.aboutOpen">{{$t('close')}}<v-icon right>close</v-icon></v-btn>
+      <v-btn text v-else @click.native="home">Søk i ordbøkene<v-icon right>search</v-icon></v-btn>
       </v-toolbar-items>
-      <v-toolbar-items v-if="$vuetify.breakpoint.mobile">
-      <v-divider vertical/>   
-      <v-btn text @click="toggleAbout" v-if="$route.name == 'about'"><v-icon left>chevron_left</v-icon>{{$t("back")}}</v-btn>
-        <v-dialog v-if="$route.name != 'about'" max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
+      <v-toolbar-items>
+
+      <v-btn id="top_menu" 
+             v-if="$route.name != 'about'"
+             :aria-expanded="menuOpen? 'true' : 'false'"
+             aria-haspopup="menu"
+             width="96px" 
+             aria-labelledby="menu_label" 
+             text @click.native="menuOpen = !menuOpen">
+         <span id="menu_label">{{$t('menu.title')}}</span><v-icon right>{{menuOpen? 'close' : 'menu'}}</v-icon></v-btn>
+        </v-toolbar-items>
+        <v-divider vertical/>
+        </v-app-bar>
+                <v-dialog origin="48px center" content-class="dialogMenu" aria-labelledby="menu_label" max-width="1200" width="1200" v-model="menuOpen" hide-overlay
         :close-on-content-click="false" transition="dialog-top-transition">
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn text v-bind="attrs" v-on="on">
-              <span v-if="$vuetify.breakpoint.mobile">{{$t('menu.title')}}</span><v-icon :right="$vuetify.breakpoint.mobile">menu</v-icon></v-btn>
-          </template>
-        <Menu @close="menuDialog=false"/>
+        <Menu @close="menuOpen=false"/>
         </v-dialog>
-      
-      </v-toolbar-items>
-      <v-divider vertical/>
-    </v-toolbar>
+        </div>
 </template>
 
 <script>
@@ -54,14 +40,28 @@ export default {
       return {
         version_label: process.env.VUE_APP_VERSION_LABEL,
         release: process.env.VUE_APP_RELEASE,
-        menuDialog: false,
         settingsMenu: false
       }
     },
+    computed: {
+      menuOpen: {
+        get() {
+          return this.$store.state.menuOpen
+        },
+        set () {
+          this.$store.commit('toggle', 'menuOpen')
+        }
+      }
+    },
     methods: {
-      toggleAbout: function() {
-        this.$route.name=='about'? this.$router.back(): this.$router.push('/om')
+      home: function() {
+        this.$router.push('/')
+      },
+      back: function() {
+        this.$router.go(-1)
+        this.$store.commit('toggle', 'aboutOpen')
       }
+
     },
     components: {
         Menu,
@@ -69,4 +69,25 @@ export default {
         LocaleMenu
     },
 }
-</script>
\ No newline at end of file
+</script>
+
+<style>
+
+.dialogMenu {
+  margin: 0px !important;
+  align-self: flex-start !important;
+  margin-top: 48px !important;
+}
+
+.v-app-bar {
+  z-index: 1000 !important;
+}
+
+.v-app-bar-title a {
+  text-decoration: none;
+  color: white !important;
+
+}
+
+ 
+</style>
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
index ddad8372fcd4cbd5cace11ba962855de8c6bb84b..cdd72a7caaa8c2e9160a90e011abb5190ed849f3 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -19,7 +19,7 @@ function loadLocaleMessages () {
 
 
 export default new VueI18n({
-  fallbackLocale: 'nor',
+  fallbackLocale: 'nob',
   silentTranslationWarn: true,
   messages: loadLocaleMessages()
 })
diff --git a/src/locales/nno.json b/src/locales/nno.json
index f81c08094d2323c2f0ae98617db83f63badd8971..84f8189edc7c1335beda466f1c678dc843f1d883 100644
--- a/src/locales/nno.json
+++ b/src/locales/nno.json
@@ -1,32 +1,29 @@
 {
     "sub-title": "Bokmålsordboka og Nynorskordboka",
     "dicts": {
-        "nn": "nynorskorboka (nn)",
-        "bm": "bokmålsordboka (bm)",
+        "nn": "Nynorskordboka",
+        "bm": "Bokmålsordboka",
         "bm,nn": "begge ordbøkene"
     },
+    "dicts_inline": {
+        "nn": "Nynorskordboka",
+        "bm": "Bokmålsordboka",
+        "bm,nn": "ordbøkene"
+    },
     "menu": {
         "title": "Meny",
         "help-and-info": "Hjelp og informasjon",
         "about": "Om ordbøkene",
-        "reset": "Tilbakestill"
+        "reset": "Slett lagra innstillingar"
         },
     "settings": {
         "title": "Innstillinger",
         "showSearchToolbar": "Vis verktøylinje for søkealternativer",
-        "showHGNO": "Vis homografnumre",
         "showInflectionNo": "Vis bøyningsnumre",
         "language": "Språk",
         "locale": "Brukergrensesnitt",
         "default-dict": "Standard ordbokvisning"
     },
-    "error": {
-        "dicts": {
-            "nn": "Nynorskorboka",
-            "bm": "Bokmålsordboka",
-            "bm,nn": "ordbøkene"
-        }
-    },
     "article_footer": {
         "share": "Del ordet",
         "copy_link": "Kopier lenke",
@@ -42,9 +39,8 @@
     "close": "Lukk",
     "choose": "Vel",
     "back": "Tilbake",
-    "back_to_results": "Tilbake til søkjeresultat",
+    "back_to_results": "Tilbake til søk",
     "pos": {
-        "ALL": "alle ordklasser",
         "NOUN": "substantiv",
         "PRON": "pronomen",
         "DET": "determinativ",
@@ -57,8 +53,19 @@
         "INTJ": "interjeksjon"
     },
     "scope": {
-        "w": "lemmasøk",
-        "x": "fritekstsøk",
-        "wx": "lemmasøk + fritekstsøk"
+        "w": "Oppslagsord",
+        "wb": "Oppslagsord og bøyde former",
+        "b": "Bøyde former",
+        "wxb": "Fulltekst"
+    },
+    "error": {
+        "network": "Eit nettverksproblem hindra lasting av sida. Prøv å laste sida på nytt",
+        "server": "Noko gjekk gale på serversida ({code})",
+        "no_article": "Artikkel med id {id} ikkje funne (404).",
+        "no_word": "Ordet «{q}» finst ikkje i {dict}.",
+        "other_dict": "Byt til {otherDict} om du har søkt i feil ordbok.",
+        "search_error": "Søket {pos}gir ingen treff i {dict}.",
+        "search_advice": "Søk med * eller % dersom du er usikker på skrivemåten. Søketips kan du finne i «OM ORDBØKENE».",
+        "generic": "Noko gjekk gale..."
     }
 }
\ No newline at end of file
diff --git a/src/locales/nob.json b/src/locales/nob.json
index d96698365150f79b747601e99dcbd073079ac637..b0f2b511bf441f1c77d4ebaaf7e45ce80075b7ad 100644
--- a/src/locales/nob.json
+++ b/src/locales/nob.json
@@ -1,3 +1,107 @@
 {
-  "message": "hello i18n !!"
+  "sub-title": "Bokmålsordboka og Nynorskordboka",
+  "dicts": {
+      "nn": "Nynorskordboka",
+      "bm": "Bokmålsordboka",
+      "bm,nn": "begge ordbøkene"
+  },
+  "dicts_inline": {
+      "nn": "Nynorskordboka",
+      "bm": "Bokmålsordboka",
+      "bm,nn": "ordbøkene"
+  },
+  "dicts_short": {
+    "nn": "nynorsk",
+    "bm": "bokmål",
+    "bm,nn": "begge"
+  },
+  "menu": {
+      "title": "Meny",
+      "help-and-info": "Hjelp og informasjon",
+      "about": "Om ordbøkene",
+      "reset": "Slett lagrede innstillinger"
+      },
+  "settings": {
+      "title": "Innstillinger",
+      "showSearchToolbar": "Vis verktøylinje for søkealternativer",
+      "showInflectionNo": "Vis bøyningsnumre",
+      "language": "Språk",
+      "locale": "Brukergrensesnitt",
+      "default-dict": "Standard ordbokvisning"
+  },
+  "article_footer": {
+      "share": "Del ordet",
+      "copy_link": "Kopier lenke",
+      "cite": "Siter",
+      "description": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:",
+      "copy": "Kopier",
+      "download": "Last ned",
+      "cancel": "avbryt",
+      "link_copied": "Lenken er kopiert til utklippstavlen",
+      "citation_copied": "Sitatet er kopiert til utklippstavla",
+      "citation": "«{lemma}». I: <em>Bokmålsordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='{link}'>{link}</a>&gt; (hentet {dd}.{mm}.{yyyy})."
+  },
+  "close": "Lukk",
+  "choose": "Velg",
+  "back": "Tilbake",
+  "back_to_results": "Tilbake til søk",
+  "pos": {
+      "NOUN": "substantiv",
+      "PRON": "pronomen",
+      "DET": "determinativ",
+      "ADJ": "adjektiv",
+      "CCONJ": "konjunksjon",
+      "SCONJ": "subjunksjon",
+      "ADV": "adverb",
+      "ADP": "preposisjon",
+      "VERB": "verb",
+      "INTJ": "interjeksjon"
+  },
+  "pos_plural": {
+    "NOUN": "substantiv",
+    "PRON": "pronomen",
+    "DET": "determinativ",
+    "ADJ": "adjektiv",
+    "CCONJ": "konjunksjoner",
+    "SCONJ": "subjunksjoner",
+    "ADV": "adverb",
+    "ADP": "preposisjoner",
+    "VERB": "verb",
+    "INTJ": "interjeksjoner"
+},
+  "scope": {
+      "w": "oppslagsord",
+      "wb": "oppslagsord og bøygde former",
+      "b": "bøygde former",
+      "wxb": "fulltekst"
+  },
+  "error": {
+        "404": {
+            "title": "404: Ikke funnet",
+            "description": "Siden kan ha blitt slettet eller flyttet, eller du kan ha brukt en ugyldig lenke."
+        },
+        "503": {
+            "title": "503: Utilgjengelig tjeneste",
+            "description": "Tjeneren er midlertidig overbelastet eller under vedlikehold."
+        },
+        "server": {
+            "title": "Feil på server",
+            "description": "Noe gikk galt på serversiden (statuskode: {code})"},
+        "generic_code": {
+            "title": "Feil",
+            "description": "Det har oppstått en uventet feil i kommunikasjonen med serveren (statuskode: {code})"},
+        "network": {
+            "title":"Tilkoblingsfeil",
+            "description": "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt, eller sjekk om du er koblet til internett."},
+        "no_article": "Serveren finner ingen artikkel med ID {id}. Artikkelen kan ha blitt slettet eller flyttet, eller du kan ha brukt en ugyldig lenke.",
+        "generic": {
+            "title": "Feil",
+            "description":"Noe gikk galt..."
+        },
+        "no_results": {
+                "no_word": "Ordet «{q}» finnes ikke i {dict}.",
+                "other_dict": "Bytt til {otherDict} om du har søkt i feil ordbok.",
+                "search_error": "Søket gir ingen treff i {dict}.",
+                "search_advice": "Søk med * eller % dersom du er usikker på skrivemåten. Søketips kan du finne i «OM ORDBØKENE»."}
+    }
 }
\ No newline at end of file
diff --git a/src/locales/nor.json b/src/locales/nor.json
index 204d67154f0a05c220f1aad4942750ca27544161..544b7b4ddde01a730b456b39d168580fbc83b99e 100644
--- a/src/locales/nor.json
+++ b/src/locales/nor.json
@@ -1,64 +1,3 @@
 {
-    "sub-title": "Bokmålsordboka og Nynorskordboka",
-    "dicts": {
-        "nn": "nynorskorboka (nn)",
-        "bm": "bokmålsordboka (bm)",
-        "bm,nn": "begge ordbøkene"
-    },
-    "menu": {
-        "title": "Meny",
-        "help-and-info": "Hjelp og informasjon",
-        "about": "Om ordbøkene",
-        "reset": "Tilbakestill"
-        },
-    "settings": {
-        "title": "Innstillinger",
-        "showSearchToolbar": "Vis verktøylinje for søkealternativer",
-        "showHGNO": "Vis homografnumre",
-        "showInflectionNo": "Vis bøyningsnumre",
-        "language": "Språk",
-        "locale": "Brukergrensesnitt",
-        "default-dict": "Standard ordbokvisning"
-    },
-    "error": {
-        "dicts": {
-            "nn": "Nynorskorboka",
-            "bm": "Bokmålsordboka",
-            "bm,nn": "ordbøkene"
-        }
-    },
-    "article_footer": {
-        "share": "Del ordet",
-        "copy_link": "Kopier lenke",
-        "cite": "Siter",
-        "description": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:",
-        "copy": "Kopier",
-        "download": "Last ned",
-        "cancel": "avbryt",
-        "link_copied": "Lenken er kopiert til utklippstavlen",
-        "citation_copied": "Sitatet er kopiert til utklippstavla",
-        "citation": "«{lemma}». I: <em>Bokmålsordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='{link}'>{link}</a>&gt; (hentet {dd}.{mm}.{yyyy})."
-    },
-    "close": "Lukk",
-    "choose": "Velg",
-    "back": "Tilbake",
-    "back_to_results": "Tilbake til søkeresultater",
-    "pos": {
-        "ALL": "alle ordklasser",
-        "NOUN": "substantiv",
-        "PRON": "pronomen",
-        "DET": "determinativ",
-        "ADJ": "adjektiv",
-        "CCONJ": "konjunksjon",
-        "SCONJ": "subjunksjon",
-        "ADV": "adverb",
-        "ADP": "preposisjon",
-        "VERB": "verb",
-        "INTJ": "interjeksjon"
-    },
-    "scope": {
-        "w": "lemmasøk",
-        "x": "fritekstsøk",
-        "wx": "lemmasøk + fritekstsøk"
-    }
+    
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index f902bd039f97e0e01153c49de89e2a3c36b1cef6..49d730dc731711dff92a804e7caa22d76c0455ee 100644
--- a/src/main.js
+++ b/src/main.js
@@ -19,59 +19,6 @@ Vue.use(VuePlausible, {
 
 Vue.$plausible.enableAutoPageviews()
 
-// All interaction with local storage is encapsulated in vuex
-const store = new Vuex.Store({
-  strict: true,
-  state: {
-    showSearchToolbar: null,
-    showHGNO: null,
-    showInflectionNo: null,
-    currentLocale: null,
-    collapseArticles: null
-  },
-  mutations: {
-    initStore(state) {
-      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
-      state.showHGNO = localStorage.getItem('showHGNO') || false
-      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
-      state.currentLocale = localStorage.getItem('currentLocale')
-      state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
-
-      state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
-
-      let locales = navigator.languages.map(l => l.split("-")[0])
-      if (!state.currentLocale) {
-        if (locales.includes("nn")) state.currentLocale = "nno"
-        else if (locales.includes("nb")) state.currentLocale = "nob"
-        else if (locales.includes("no")) state.currentLocale = "nob"
-        else state.currentLocale = "eng"
-      }
-    },
-    setLocale(state, payload) {
-      state.currentLocale = payload.value
-      payload.i18n.locale = payload.value
-      localStorage.setItem("currentLocale", payload.value);
-    },
-    toggle(state, setting) {
-      let value = !state[setting]
-      state[setting] = value
-      localStorage.setItem(setting, value);
-    },
-    setDefaultDict(state, value) {
-      localStorage.setItem("defaultDict", value)
-    },
-    resetStore() {
-      localStorage.removeItem("showSearchToolbar")
-      localStorage.removeItem("showHGNO")
-      localStorage.removeItem("showInflectionNo")
-      localStorage.removeItem("currentLocale")
-      localStorage.removeItem("collapseArticles")
-      this.commit("initStore")
-    },
-
-  },
-})
-
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -95,7 +42,7 @@ const router = new VueRouter({
                 {
                   path: 'search',
                   name: 'query',
-                  params: {q: '', pos: 'all', scope: 'w'}
+                  params: {q: '', scope: 'w'}
                 },
                 {
                   name: 'word',
@@ -120,7 +67,6 @@ const router = new VueRouter({
             {
               path: 'nob/*',
               redirect: to => {
-                console.log(to)
                 return "nn/" + to.params.pathMatch
               }
             },
@@ -137,6 +83,66 @@ const router = new VueRouter({
   ]
 })
 
+// All interaction with local storage is encapsulated in vuex
+const store = new Vuex.Store({
+  strict: true,
+  state: {
+    showSearchToolbar: null,
+    showInflectionNo: null,
+    currentLocale: null,
+    collapseArticles: null,
+    defaultDict: null,
+    menuOpen: false,
+    noMouse: window.matchMedia('(hover: none)').matches,
+    searchRoute: null,
+    aboutOpen: false
+
+    
+  },
+  mutations: {
+    initStore(state) {
+      state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
+      state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
+      state.currentLocale = localStorage.getItem('currentLocale')
+      state.defaultDict = localStorage.getItem('defaultDict') || 'bm,nn'
+      state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
+
+      let locales = navigator.languages.map(l => l.split("-")[0])
+      if (!state.currentLocale) {
+        if (locales.includes("nn")) state.currentLocale = "nno"
+        else if (locales.includes("nb")) state.currentLocale = "nob"
+        else if (locales.includes("no")) state.currentLocale = "nob"
+        else state.currentLocale = "eng"
+      }
+
+    },
+    setLocale(state, payload) {
+      state.currentLocale = payload.value
+      payload.i18n.locale = payload.value
+      localStorage.setItem("currentLocale", payload.value);
+    },
+    toggle(state, setting) {
+      let value = !state[setting]
+      state[setting] = value
+      localStorage.setItem(setting, value);
+    },
+    setDefaultDict(state, value) {
+      localStorage.setItem("defaultDict", value)
+      state.defaultDict = value
+    },
+    resetStore() {
+      localStorage.removeItem("showSearchToolbar")
+      localStorage.removeItem("showInflectionNo")
+      localStorage.removeItem("currentLocale")
+      localStorage.removeItem("collapseArticles")
+      this.commit("initStore")
+    },
+    setSearchRoute(state, path) {
+      state.searchRoute = path
+    }
+  }
+})
+
 new Vue({
   router,
   vuetify,
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
index 61ef577cb9fde56aba29f108cd2376bcb8887dcb..79b8a2027bf2d789fb462d9d7ebe5e97809973b3 100644
--- a/src/utils/helpers.js
+++ b/src/utils/helpers.js
@@ -188,4 +188,12 @@ var fraction = function(numerator, denominator) {
 
 }
 
-export default { group_list, fraction }
+const roman_hgno = function(lemma) {
+  let hgint = parseInt(lemma.hgno)
+  if (hgint > 0) {
+    return ["I","II","III","IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "XIII", "XIV", "XV", "XVI"][hgint-1]
+  }
+  return ""
+}
+
+export default { group_list, fraction, roman_hgno }
diff --git a/vue.config.js b/vue.config.js
index 5822ce0aeb59bf836869099f1e35eb7dc252876c..c730a95709dd54f21aeabe349a5367e21782f817 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -11,7 +11,7 @@ module.exports = {
 
   pluginOptions: {
     i18n: {
-      fallbackLocale: 'nor',
+      fallbackLocale: 'nob',
       localeDir: 'locales',
       enableInSFC: true,
       includeLocales: false,