diff --git a/src/App.vue b/src/App.vue
index cf32efa45e92fe99b9bb8db76dc81c291691b96a..c2b5db6d60938e2daf70db460a8646eac95302d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,6 +25,16 @@
         <Article :key="article_key" :article="article" @article-click="article_link_click" />
       </div>
       <div class="welcome" v-show="! (article.error || article.lemmas.length || search_results.length || waiting)">
+        <div class="monthly">
+          <h2>MÃ¥nedens ord</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <div id="word-of-month-bm">
+            <Article :article="monthly_bm" @article-click="article_link_click" />
+          </div>
+          <div id="word-of-month-nn">
+            <Article :article="monthly_nn" @article-click="article_link_click" />
+          </div>
+        </div>
       </div>
     </main>
     <footer>
@@ -129,7 +139,9 @@ export default {
       lang: 'bob,nob',
       waiting_for_articles: true,
       waiting_for_metadata: true,
-      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
+      monthly_bm: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
+      monthly_nn: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
     }
   },
   computed: {
@@ -204,6 +216,15 @@ export default {
         self.waiting_for_articles = false
         history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
       }
+
+      // words of the month
+      axios.get(api_endpoint + '/bob/article/5607').then(function(response){
+        self.monthly_bm = Object.assign(response.data, {dictionary: 'bob'})
+      })
+
+      axios.get(api_endpoint + '/nob/article/78569').then(function(response){
+        self.monthly_nn = Object.assign(response.data, {dictionary: 'nob'})
+      })
     })
   },
   watch: {
@@ -290,7 +311,7 @@ header, #search_results, #spinner, #single_article_container, footer, div.welcom
 }
 
 #spinner {
-  padding-top: 40px;  
+  padding-top: 40px;
 }
 
 header {
@@ -299,8 +320,36 @@ header {
   background-color: #560027;
 }
 
-div.welcome {
-  font-size: 20px;
+div.monthly {
+  padding: 20px;
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: auto auto auto;
+  gap: 10px;
+  width: 100%;
+  background-color: rgba(256,256,256,0.5)
+}
+
+div.monthly > h2{
+  padding: 0px;
+  grid-row: 1;
+  grid-column: 1 / 3;
+}
+
+div.monthly > p {
+  grid-row: 2;
+  grid-column: 1 / 3;
+}
+
+div#monthly_bm {
+  grid-row: 3;
+  grid-column: 1;
+}
+
+div#monthly_nn {
+  grid-row: 3;
+  grid-column: 2;
 }
 
 .top {