diff --git a/package-lock.json b/package-lock.json
index b87054be90ad3bfad24d716b699cb6053b910f1d..ae6799dd5cb4006c2b35ed0f8e731019c2b3dfff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,12 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
         "pinia": "^2.1.7",
         "vue": "^3.4.21",
-        "vue-router": "^4.3.0"
+        "vue-router": "^4.3.0",
+        "xml2js": "^0.6.2"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.8.0",
@@ -2657,8 +2659,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -2688,7 +2689,6 @@
       "version": "1.6.8",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
       "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
-      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -2699,7 +2699,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -2712,8 +2711,7 @@
     "node_modules/axios/node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -3116,7 +3114,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3539,7 +3536,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -4486,7 +4482,6 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5843,7 +5838,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -5852,7 +5846,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -6868,6 +6861,11 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -8567,6 +8565,26 @@
         "node": ">=12"
       }
     },
+    "node_modules/xml2js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.6.2.tgz",
+      "integrity": "sha512-T4rieHaC1EXcES0Kxxj4JWgaUQHDk+qwHcYOCFHfiwKz7tOVPLq7Hjq9dM1WCMhylqMEfP7hMcOIChvotiZegA==",
+      "dependencies": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/xmlchars": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
diff --git a/package.json b/package.json
index 8aa8451a9527cc0c9c884aae659458207ce85337..9f52cb1c7a23f36ca3194ffe34a78eb863858028 100644
--- a/package.json
+++ b/package.json
@@ -16,10 +16,12 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "pinia": "^2.1.7",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "xml2js": "^0.6.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4fe743f4a3af6146dfb226d11e5ac842e27d0677
--- /dev/null
+++ b/src/components/NewsComponents/NewsComponent.vue
@@ -0,0 +1,106 @@
+<script lang="ts">
+export default {
+  data() {
+    return {
+      articles: []
+    };
+  },
+  mounted() {
+    this.fetchFinanceNews();
+    // Call fetchFinanceNews() every 5 minutes (300,000 milliseconds)
+    // Done so the user does not need to refresh for news to be updated
+    // Might remove for consistent reading
+    setInterval(this.fetchFinanceNews, 300000);
+  },
+  methods: {
+    async fetchFinanceNews() {
+      try {
+        const response = await fetch(
+            'https://newsapi.org/v2/everything?q=saving%20money&pageSize=10&apiKey=f092756b3b6b41369b047cb7ae980db5'
+        );
+        const data = await response.json();
+
+        //English articles, might want to translate to norwegian
+        this.articles = data.articles;
+
+
+      } catch (error) {
+        console.error('Error fetching saving money news:', error);
+      }
+    }
+  }
+};
+</script>
+
+
+<template>
+  <div class="center-box">
+    <div class="box">
+      <br>
+      <h1>Nyheter</h1>
+      <br>
+      <div v-for="(article, index) in articles" :key="index" class="article-container">
+        <div class="content">
+          <h3>{{ article.title }}</h3>
+          <p>{{ article.description }}</p>
+          <a :href="article.url" target="_blank">Read more</a>
+        </div>
+        <div class="image">
+          <img :src="article.urlToImage" alt="Article Image"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.center-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.box {
+  width:90%;
+}
+
+.article-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+}
+
+.image {
+  flex: 1;
+  text-align: center;
+  padding: 0 20px;
+}
+
+.image img {
+  max-width: 100%;
+  border-radius: 1em;
+}
+
+.content {
+  flex: 3;
+  padding: 0 20px;
+}
+
+.content h3 {
+  margin-top: 0;
+}
+
+.content a {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+.content a:hover {
+  background-color: #0056b3;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index b5719b3468524ac9b958344ecafa5df349c6e0d3..83cc091e2226f9bdedf4ff60d45c2b9b83317778 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,6 +19,11 @@ const routes = [
         name: 'not-found',
         component: () => import('@/views/NotFoundView.vue'),
       },
+      {
+        path: '/news',
+        name: 'news',
+        component: () => import('@/views/NewsView.vue'),
+      },
     ]
   },
   {
diff --git a/src/views/NewsView.vue b/src/views/NewsView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bdfb7c611f43f0301e460f56b150a97213393a9d
--- /dev/null
+++ b/src/views/NewsView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import NewsComponent from "@/components/NewsComponents/NewsComponent.vue";
+</script>
+
+
+<template>
+  <NewsComponent></NewsComponent>
+</template>
\ No newline at end of file