diff --git a/Frontend/src/components/formatter/InputFormatterComponent.vue b/Frontend/src/components/formatter/InputFormatterComponent.vue
index 6c87c12..e61f596 100644
--- a/Frontend/src/components/formatter/InputFormatterComponent.vue
+++ b/Frontend/src/components/formatter/InputFormatterComponent.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import InsertDefaultComponent from '../xml/InsertDefaultComponent.vue';
 
+defineProps({
+  inputValue: {type: String, required: true}
+})
 
 </script>
 
 <template>
-  <div class="flex h-full"></div>
-
-    <textarea name="data" id="data" class="text-field"></textarea>
+  <div class="flex flex-col w-full h-full">
+    
+    <textarea name="data" id="data" :value="$props.inputValue" class="text-field"></textarea>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/Frontend/src/components/formatter/ToolbarFormatterComponent.vue b/Frontend/src/components/formatter/ToolbarFormatterComponent.vue
new file mode 100644
index 0000000..6c87c12
--- /dev/null
+++ b/Frontend/src/components/formatter/ToolbarFormatterComponent.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/components/formatter/XMLButtonFormatterComponent.vue b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
new file mode 100644
index 0000000..16e69a0
--- /dev/null
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+const props = defineProps({
+    xml: {type: String, required: true}
+})
+
+const emit = defineEmits(["update:result"])
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        sendProcessedData(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+function prepareURL(): string {
+   return document.location.protocol + "//" + document.location.hostname + "/libxml/prettify";
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": "N/A",
+        "processor": "libxml",
+        "version": "1.0"
+    });
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">Format XML</button>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/components/xml/InsertDefaultComponent.vue b/Frontend/src/components/xml/InsertDefaultComponent.vue
new file mode 100644
index 0000000..7526d78
--- /dev/null
+++ b/Frontend/src/components/xml/InsertDefaultComponent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+import sampleXML from "@/assets/sampleXml.xml?raw"
+import sampleXSLT from "@/assets/sampleXslt.xml?raw"
+import sampleXSD from "@/assets/sampleXsd.xml?raw"
+import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
+
+
+const props = defineProps(
+    {
+        prettyName: {type: String, required: true}
+    }
+)
+
+const emit = defineEmits(['update:defaultData'])
+
+function setDefault() {
+    const emitName = "update:defaultData";
+    switch (props.prettyName.toLowerCase()) {
+        case "xpath":
+            emit(emitName, "string(/l:library/l:libraryName)")
+            break;
+        case "xsd":
+            emit(emitName, sampleXSD)
+            break;
+        case "xslt":
+            emit(emitName, sampleXSLT)
+            break;
+        case "xquery":
+            emit(emitName, sampleXQuery)
+            break;
+        
+        default:
+            emit(emitName, sampleXML)
+            break;
+    }
+
+}
+
+</script>
+
+<template>
+    <button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index bf40438..edb3de9 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
 
-import sampleXML from "@/assets/sampleXml.xml?raw"
-import sampleXSLT from "@/assets/sampleXslt.xml?raw"
-import sampleXSD from "@/assets/sampleXsd.xml?raw"
-import sampleXQuery from "@/assets/sampleXQuery.xquery?raw"
-
+import InsertDefaultComponent from "./InsertDefaultComponent.vue"
 
 const props = defineProps(
     {
@@ -14,27 +10,9 @@ const props = defineProps(
 
 const emit = defineEmits(['update:defaultData'])
 
-function setDefault() {
+function setDefault(data: string) {
     const emitName = "update:defaultData";
-    switch (props.prettyName.toLowerCase()) {
-        case "xpath":
-            emit(emitName, "string(/l:library/l:libraryName)")
-            break;
-        case "xsd":
-            emit(emitName, sampleXSD)
-            break;
-        case "xslt":
-            emit(emitName, sampleXSLT)
-            break;
-        case "xquery":
-            emit(emitName, sampleXQuery)
-            break;
-        
-        default:
-            emit(emitName, sampleXML)
-            break;
-    }
-
+    emit(emitName, data)
 }
 
 </script>
@@ -43,7 +21,7 @@ function setDefault() {
     <div class="flex place-content-between w-full pr-2 items-center m-2">
         <span class="dark:text-white">{{ prettyName }}</span>
         <div class="flex space-x-2">
-            <button class="tool-button" @click="setDefault()">Insert default {{ prettyName }}</button>
+            <InsertDefaultComponent :pretty-name="props.prettyName" @update:default-data="(data) => setDefault(data)"></InsertDefaultComponent>
         </div>
         
     </div>
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index fd62eb8..b7042b7 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -1,16 +1,31 @@
 <script setup lang="ts">
 import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
-import xmlOutputFieldComponent from '@/components/xml/XmlOutputFieldComponent.vue';
+import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import InsertDefaultComponent from '@components/xml/InsertDefaultComponent.vue';
 import { ref } from 'vue';
 
 
 const xml = ref('');
-const query = ref('');
+
+function setTextFieldValue(data: any) {
+    xml.value = data
+}
+
+function format(formattedXml: any) {
+    xml.value = formattedXml.result;
+}
 
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <InputFormatterComponent></InputFormatterComponent>
+    <div id="layout" class="flex flex-col w-full h-full gap-4">
+        <div id="toolbar" class= "flex flex-col gap-4 items-center md:flex-row place-content-between">
+            <span class="dark:text-slate-100">XML Formatter</span>
+            <div class="space-x-2">
+                <InsertDefaultComponent pretty-name="XML" @update:defaultData="(data: any) => setTextFieldValue(data)"></InsertDefaultComponent>
+                <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+            </div>
+        </div>
+        <InputFormatterComponent :inputValue="xml"></InputFormatterComponent>
     </div>
 </template>
\ No newline at end of file