diff --git a/src/components/Header.vue b/src/components/Header.vue
index 36f5b428b3fc3c47fb63607be4a3347a2984ac58..5565e9116d1f62ca206463352cfd4340eab0f6d1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,8 @@
 <template>
   <div class = "header">
     <span class="dict-label" tabindex="0">{{dict_label}}</span>
-    <h2 class="article_header" tabindex="0">{{header_text}}</h2>
+    <div class="article_header" tabindex="0"><h2>{{header_text}}</h2>
+    <span 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>
     <span v-if="$store.state.showInflectionNo">{{inflection_classes}}</span>
@@ -72,6 +73,14 @@ export default {
         '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"},
@@ -277,4 +286,8 @@ td.hilite {
     text-align: center
 }
 
+.article_header {
+  display: flex;
+}
+
 </style>