diff --git a/Frontend/src/components/xml/InsertDefaultComponent.vue b/Frontend/src/components/common/InsertTemplateComponent.vue
similarity index 100%
rename from Frontend/src/components/xml/InsertDefaultComponent.vue
rename to Frontend/src/components/common/InsertTemplateComponent.vue
diff --git a/Frontend/src/components/formatter/InputFormatterComponent.vue b/Frontend/src/components/formatter/InputFormatterComponent.vue
deleted file mode 100644
index e61f596..0000000
--- a/Frontend/src/components/formatter/InputFormatterComponent.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<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 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/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
index edb3de9..de2788d 100644
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import InsertDefaultComponent from "./InsertDefaultComponent.vue"
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 
 const props = defineProps(
     {
@@ -21,7 +21,7 @@ function setDefault(data: string) {
     <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">
-            <InsertDefaultComponent :pretty-name="props.prettyName" @update:default-data="(data) => setDefault(data)"></InsertDefaultComponent>
+            <InsertTemplateComponent :pretty-name="props.prettyName" @update:default-data="(data: string) => setDefault(data)"></InsertTemplateComponent>
         </div>
         
     </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 970c805..f5a90b7 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import xmlOutputFieldToolbarComponent from '@/components/xml/XmlOutputFieldToolbarComponent.vue';
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 
 const props = defineProps(
@@ -13,7 +12,80 @@ const props = defineProps(
 
 const result = ref('');
 
-function parseResult(data: any) {
+var engines = ["saxon", "xalan", "libxml"];
+var versions = ["1.0", "2.0", "3.0", "3.1"];
+
+const engine = ref('');
+const version = ref('');
+
+
+onMounted(() => {
+    selectAvailableEngines();
+    selectAvailableVersions();
+    selectDefaults();
+})
+
+function selectAvailableEngines() {
+    if (props.tool == "xsd") {
+        engines = ["xalan", "libxml"]
+    }
+    else if (props.tool == "xquery") {
+        engines = ["saxon"]
+    }
+}
+
+function selectAvailableVersions() {
+    if (props.tool == "xquery")
+        versions = ["3.1"];
+    else if (props.tool == "xslt")
+        versions = ["3.0"];
+    else if (props.tool == "xsd")
+        versions = ["N/A"];
+}
+
+function selectDefaults() {
+    version.value = versions[versions.length - 1];
+    engine.value = engines[0];
+}
+
+function process() {
+    var request:Request = prepareRequest();
+    fetchRequest(request).then((data) => {
+        updateOutputField(data);
+    })
+}
+
+function prepareRequest():Request {
+    var request = new Request(prepareURL(), {
+        body: prepareRequestBody(),
+        method: "POST"
+    });
+    return request
+}
+
+function prepareURL(): string {
+   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
+   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
+}
+
+function prepareRequestBody():string {
+    var requestBody = JSON.stringify({
+        "data": props.xml,
+        "process": props.query,
+        "processor": engine.value,
+        "version": version.value
+    });
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    return responseBody;
+}
+
+function updateOutputField(data: any) {
     result.value = data.result;
 }
 
@@ -21,7 +93,19 @@ function parseResult(data: any) {
 
 <template>
     <div class="flex flex-col w-full lg:w-1/2 h-full items-center">
-        <xmlOutputFieldToolbarComponent :xml="$props.xml" :query="$props.query" :tool="$props.tool" @update:result="(data) => parseResult(data)"></xmlOutputFieldToolbarComponent>
+        <div class="flex place-content-between w-full items-center m-2">
+            <span class="dark:text-white">Result:</span>
+            <div class="flex space-x-2">
+                <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                    <option v-for="engine in engines" :value="engine">{{ engine }}</option>
+                </select>
+                <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                    <option v-for="version in versions" :value="version">{{ version }}</option>
+                </select>
+                <button class="tool-button">Clear</button>    
+                <button class="tool-button" @click="process">Process</button>
+            </div>
+        </div>
         <div class="text-field overflow-scroll">
             <pre class="break-words"><code>{{ result }}</code></pre>
         </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
deleted file mode 100644
index 5db6734..0000000
--- a/Frontend/src/components/xml/XmlOutputFieldToolbarComponent.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-var engines = ["saxon", "xalan", "libxml"];
-var versions = ["1.0", "2.0", "3.0", "3.1"];
-
-const props = defineProps(
-    {
-        tool: {type: String, required: true}, 
-        xml: {type: String},
-        query: {type: String},
-    }
-)
-
-const emit = defineEmits(['update:result'])
-
-const engine = ref('');
-const version = ref('');
-
-const isSaxonHidden = ref(false);
-const isXalanHidden = ref(false);
-const isLibXMLHidden = ref(false);
-
-
-onMounted(() => {
-    selectAvailableEngines();
-    selectAvailableVersions();
-    selectDefaults();
-})
-
-function selectAvailableEngines() {
-    if (props.tool == "xsd") {
-        engines = ["xalan", "libxml"]
-    }
-    else if (props.tool == "xquery") {
-        engines = ["saxon"]
-    }
-}
-
-function selectAvailableVersions() {
-    if (props.tool == "xquery")
-        versions = ["3.1"];
-    else if (props.tool == "xsd")
-        versions = ["N/A"];
-}
-
-function selectDefaults() {
-    version.value = versions[versions.length - 1];
-    engine.value = engines[0];
-}
-
-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 {
-   const engineEndpoint = engine.value == "libxml" ? "libxml" : "java";
-   return document.location.protocol + "//" + document.location.hostname + "/" + engineEndpoint + "/" + props.tool;
-}
-
-function prepareRequestBody():string {
-    var requestBody = JSON.stringify({
-        "data": props.xml,
-        "process": props.query,
-        "processor": engine.value,
-        "version": version.value
-    });
-    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>
-    <div class="flex place-content-between w-full items-center m-2">
-        <span class="dark:text-white">Result:</span>
-        <div class="flex space-x-2">
-            <select v-model="engine" name="engine" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option v-for="engine in engines" :value="engine">{{ engine }}</option>
-            </select>
-            <select v-model="version" name="version" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
-                <option v-for="version in versions" :value="version">{{ version }}</option>
-            </select>
-            <button class="tool-button">Clear</button>    
-            <button class="tool-button" @click="process">Process</button>
-        </div>
-        
-    </div>
-</template>
\ No newline at end of file
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index b7042b7..bb13801 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import InputFormatterComponent from '@/components/formatter/InputFormatterComponent.vue';
 import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
-import InsertDefaultComponent from '@components/xml/InsertDefaultComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import { ref } from 'vue';
 
 
 const xml = ref('');
 
-function setTextFieldValue(data: any) {
+function setTextFieldValue(data: string) {
     xml.value = data
 }
 
@@ -22,10 +21,10 @@ function format(formattedXml: any) {
         <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>
+                <InsertTemplateComponent pretty-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
             </div>
         </div>
-        <InputFormatterComponent :inputValue="xml"></InputFormatterComponent>
+        <textarea name="data" id="data" :value="xml" class="text-field"></textarea>
     </div>
 </template>
\ No newline at end of file