diff --git a/Frontend/src/components/formatter/FormatterComponent.vue b/Frontend/src/components/formatter/FormatterComponent.vue
deleted file mode 100644
index f5ef774..0000000
--- a/Frontend/src/components/formatter/FormatterComponent.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<script setup lang="ts">
-
-
-</script>
-
-<template>
-  <h1>Formatter</h1>
-</template>
-
-<style scoped></style>
diff --git a/Frontend/src/components/formatter/InputFormatterComponent.vue b/Frontend/src/components/formatter/InputFormatterComponent.vue
new file mode 100644
index 0000000..6c87c12
--- /dev/null
+++ b/Frontend/src/components/formatter/InputFormatterComponent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+
+</script>
+
+<template>
+  <div class="flex h-full"></div>
+
+    <textarea name="data" id="data" class="text-field"></textarea>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/router/index.ts b/Frontend/src/router/index.ts
index b935285..f5cc531 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -3,6 +3,8 @@ import { createRouter, createWebHistory } from 'vue-router'
 const landingPage = import("@views/LandingView.vue")
 const restMock = import("@views/RestMockView.vue")
 
+const xmlFormatter = import("@views/XmlFormatterView.vue")
+
 const xsltTool = import("@views/XSLTView.vue")
 const xsdTool = import("@views/XSDView.vue")
 const xpathTool = import("@views/XPathView.vue")
@@ -14,6 +16,11 @@ const routes = [
     name: 'landing',
     component: () => landingPage
   },
+  {
+    path: '/format/xml',
+    name: 'xmlFormatter',
+    component: () => xmlFormatter
+  },
   {
     path: '/xml/xpath',
     name: 'xpath',
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
new file mode 100644
index 0000000..fd62eb8
--- /dev/null
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
+import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import { ref } from 'vue';
+
+
+const xml = ref('');
+const query = ref('');
+
+</script>
+
+<template>
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+        <InputFormatterComponent></InputFormatterComponent>
+    </div>
+</template>
\ No newline at end of file