diff --git a/new-frontend/package-lock.json b/new-frontend/package-lock.json
index fb413e4..386461c 100644
--- a/new-frontend/package-lock.json
+++ b/new-frontend/package-lock.json
@@ -8,7 +8,8 @@
       "name": "new-frontend",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.3.4"
+        "vue": "^3.3.4",
+        "vue-router": "^4.2.2"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.2.0",
@@ -880,6 +881,11 @@
         "@vue/shared": "3.3.4"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz",
@@ -3698,6 +3704,20 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.2.tgz",
+      "integrity": "sha512-cChBPPmAflgBGmy3tBsjeoe3f3VOSG6naKyY5pjtrqLGbNEXdzCigFUHgBvp9e3ysAtFtEx7OLqcSDh/1Cq2TQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
diff --git a/new-frontend/package.json b/new-frontend/package.json
index e058675..6bd4163 100644
--- a/new-frontend/package.json
+++ b/new-frontend/package.json
@@ -12,7 +12,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/new-frontend/src/App.vue b/new-frontend/src/App.vue
index 9fde035..d5debce 100644
--- a/new-frontend/src/App.vue
+++ b/new-frontend/src/App.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import XmlTool from './components/XmlTool.vue'
+import { RouterView } from 'vue-router';
+import XmlTool from './components/XmlTool.vue';
+
+const activeToolBox = ref('');
+
 
-const activeToolBox = ref('')
 
 onMounted(() => {
   activeToolBox.value = "xml";
@@ -10,19 +13,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <label for="xml">XML</label>
-  <input v-model="activeToolBox" type="radio" id="xml" value="xml" />
-
-  <label for="formatter">Formatter</label>
-  <input v-model="activeToolBox" type="radio" id="formatter" value="formatter" />
-
-  <label for="restmock">REST Mock</label>
-  <input v-model="activeToolBox" type="radio" id="restmock" value="restmock" />
-
-  <br><br>
-  <XmlTool v-if="activeToolBox == 'xml'" />
-  <h1 v-if="activeToolBox == 'formatter'">Formatter</h1>
-  <h1 v-if="activeToolBox == 'restmock'">REST Mock</h1>
+  <XmlTool></XmlTool>
 </template>
 
 <style scoped></style>
diff --git a/new-frontend/src/components/Formatter.vue b/new-frontend/src/components/Formatter.vue
new file mode 100644
index 0000000..1abfcbd
--- /dev/null
+++ b/new-frontend/src/components/Formatter.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+
+</script>
+
+<template>
+  <h1>Formatter</h1>
+</template>
+
+<style scoped></style>
diff --git a/new-frontend/src/components/Landing.vue b/new-frontend/src/components/Landing.vue
new file mode 100644
index 0000000..c07e2d5
--- /dev/null
+++ b/new-frontend/src/components/Landing.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+
+</script>
+
+<template>
+  <h1>Landing</h1>
+</template>
+
+<style scoped></style>
diff --git a/new-frontend/src/components/RestMock.vue b/new-frontend/src/components/RestMock.vue
new file mode 100644
index 0000000..6e41629
--- /dev/null
+++ b/new-frontend/src/components/RestMock.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+
+</script>
+
+<template>
+  <h1>RestMock</h1>
+</template>
+
+<style scoped></style>
diff --git a/new-frontend/src/components/XmlTool.vue b/new-frontend/src/components/XmlTool.vue
index c227da5..e9bd4cf 100644
--- a/new-frontend/src/components/XmlTool.vue
+++ b/new-frontend/src/components/XmlTool.vue
@@ -10,7 +10,7 @@ const result = ref('');
 const activeXmlTool = ref('');
 
 async function submit() {
-  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java"
+  const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
   const url = document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + activeXmlTool.value;
 
   var version = "1.0";
diff --git a/new-frontend/src/router/index.ts b/new-frontend/src/router/index.ts
new file mode 100644
index 0000000..b3f08be
--- /dev/null
+++ b/new-frontend/src/router/index.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import XmlTool from '../components/XmlTool.vue';
+
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'landing',
+      component: () => import('../components/XmlTool.vue')
+    },
+    {
+      path: '/xmltools',
+      name: 'portfolio',
+      component: () => import('../views/PortfolioView.vue')
+    }
+  ]
+})
+
+export default router;
\ No newline at end of file