diff --git a/new-frontend/src/App.vue b/new-frontend/src/App.vue
index 007aa95..73c3cbe 100644
--- a/new-frontend/src/App.vue
+++ b/new-frontend/src/App.vue
@@ -13,6 +13,11 @@ onMounted(() => {
 </script>
 
 <template>
+   <button @click="$router.push('/xml')">XML</button>
+   <button @click="$router.push('/formatter')">Formatter</button>
+   <button @click="$router.push('/restmock')">REST Mock</button>
+
+
   <RouterView></RouterView>
 </template>
 
diff --git a/new-frontend/src/components/Formatter.vue b/new-frontend/src/components/FormatterComponent.vue
similarity index 100%
rename from new-frontend/src/components/Formatter.vue
rename to new-frontend/src/components/FormatterComponent.vue
diff --git a/new-frontend/src/components/RestMock.vue b/new-frontend/src/components/RestMockComponent.vue
similarity index 100%
rename from new-frontend/src/components/RestMock.vue
rename to new-frontend/src/components/RestMockComponent.vue
diff --git a/new-frontend/src/components/XmlTool.vue b/new-frontend/src/components/XmlToolComponent.vue
similarity index 100%
rename from new-frontend/src/components/XmlTool.vue
rename to new-frontend/src/components/XmlToolComponent.vue
diff --git a/new-frontend/src/router/index.ts b/new-frontend/src/router/index.ts
index 4edec72..8676e13 100644
--- a/new-frontend/src/router/index.ts
+++ b/new-frontend/src/router/index.ts
@@ -1,6 +1,9 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 const landingPage = import("@/views/LandingView.vue")
+const xmlTool = import("@/views/XmlToolView.vue")
+const restMock = import("@/views/RestMockView.vue")
+const formatter = import("@/views/FormatterView.vue")
 
 const routes = [
   {
@@ -8,6 +11,21 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/xml',
+    name: 'xmltool',
+    component: () => xmlTool
+  },
+  {
+    path: '/restmock',
+    name: 'restmock',
+    component: () => restMock
+  },
+  {
+    path: '/formatter',
+    name: 'formatter',
+    component: () => formatter
+  },
 ]
 
 
diff --git a/new-frontend/src/views/FormatterView.vue b/new-frontend/src/views/FormatterView.vue
new file mode 100644
index 0000000..dd61bce
--- /dev/null
+++ b/new-frontend/src/views/FormatterView.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+import FormatterComponent from '@/components/FormatterComponent.vue'
+
+export default {
+    name:"FormatterView",
+    components: {FormatterComponent}
+}
+</script>
+
+
+<template>
+    <FormatterComponent></FormatterComponent>
+</template>
+
diff --git a/new-frontend/src/views/RestMockView.vue b/new-frontend/src/views/RestMockView.vue
new file mode 100644
index 0000000..8222e66
--- /dev/null
+++ b/new-frontend/src/views/RestMockView.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+import RestMockComponent from '@/components/RestMockComponent.vue'
+
+export default {
+    name:"RestMockView",
+    components: {RestMockComponent}
+}
+</script>
+
+
+<template>
+    <RestMockComponent></RestMockComponent>
+</template>
+
diff --git a/new-frontend/src/views/XmlToolView.vue b/new-frontend/src/views/XmlToolView.vue
new file mode 100644
index 0000000..ee7c3af
--- /dev/null
+++ b/new-frontend/src/views/XmlToolView.vue
@@ -0,0 +1,14 @@
+<script lang="ts">
+import XmlToolComponent from '@/components/XmlToolComponent.vue'
+
+export default {
+    name:"XmlToolView",
+    components: {XmlToolComponent}
+}
+</script>
+
+
+<template>
+    <XmlToolComponent></XmlToolComponent>
+</template>
+