diff --git a/Frontend/src/components/formatter/FormatterComponent.vue b/Frontend/src/components/formatter/FormatterComponent.vue
index e8980ee..9832f03 100644
--- a/Frontend/src/components/formatter/FormatterComponent.vue
+++ b/Frontend/src/components/formatter/FormatterComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
 import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
+import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonFormatterComponent.vue';
+
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
 import { ref } from 'vue';
@@ -13,7 +15,7 @@ const errorOccurred = ref(false);
 const successOccurred = ref(false);
 
 const props = defineProps({
-    formatterType: {
+    formatterLanguage: {
         type: String,
         required: true
     }
@@ -32,6 +34,7 @@ function format(formatted: any) {
 function setErrorOccurred(occurred: boolean) {
     errorOccurred.value = occurred;
     successOccurred.value = !(occurred);
+    console.log(occurred);
 }
 
 function setExample(data: string) {
@@ -72,27 +75,41 @@ function highlightTextField() {
 <template>
     <div id="layout" class="flex flex-col w-full h-full gap-4">
         <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
-            <span class="dark:text-slate-100"> {{ formatterType.toUpperCase() }} Formatter</span>
-            <div v-if="formatterType == 'xml'" class="flex flex-wrap gap-2 justify-center">
+            <span class="dark:text-slate-100"> {{ formatterLanguage }} Formatter</span>
+            <!-- XML Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'xml'" class="flex flex-wrap gap-2 justify-center">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
                 <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="data" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="data" @update:result="format"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="data" @update:result="format"></XMLButtonFormatterComponent>
             </div>
 
-            <div v-if="formatterType == 'json'" class="flex flex-wrap gap-2 justify-center">
+            <!-- JSON Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'json'" class="flex flex-wrap gap-2 justify-center">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
                 </div>
                 <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <JsonButtonFormatterComponent isMinimizer :json="data" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
-                <JsonButtonFormatterComponent :json="data" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent isMinimizer :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="data" @update:result="format" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+            </div>
+
+            <!-- HTML Formatter Toolbar -->
+            <div v-if="formatterLanguage.toLowerCase() == 'html'" class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
+                </div>
+                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setExample"></InsertTemplateComponent>
+                <button class="tool-button" @click="clear()">Clear</button>
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="Minimize" />
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="Prettify" />
+                <HtmlButtonFormatterComponent @update:result="format" @update:error="setErrorOccurred" :code="data" format-type="HTML -> XML" />
             </div>
         </div>
-        <CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterType}" />
+        <CodeEditorComponent :class="highlightTextField()" @update:updated-code="setTextFieldValue" :code="data" :config="{disabled:false,language:formatterLanguage.toLowerCase()}" />
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
index 0709bb4..b65cba0 100644
--- a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
@@ -47,16 +47,16 @@ function createBody(){
 
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
-function processResponse(formattedCode : any){
-    var result = formattedCode.result;
-    emit("update:error", formattedCode.status == "ERR")
-    return result
-}
 
 function process(){
     fetch(fetchLink, {body:createBody(), method: "POST"})
         .then( response => response.json() )
-        .then( formattedCode => emit('update:result', processResponse(formattedCode) ) )
+        .then( formattedCode => processResponse(formattedCode) )
+}
+
+function processResponse(formattedCode : any){
+    emit('update:result', formattedCode )
+    emit("update:error", formattedCode.status == "ERR")
 }
 
 </script>
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 40b6504..fe35680 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
 </script>
 
 <template>
-    <FormatterComponent formatter-type="json"></FormatterComponent>
+    <FormatterComponent formatter-language="JSON"></FormatterComponent>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index 320c62c..a1e087b 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -4,5 +4,5 @@ import FormatterComponent from '@/components/formatter/FormatterComponent.vue';
 </script>
 
 <template>
-    <FormatterComponent formatter-type="xml"></FormatterComponent>
+    <FormatterComponent formatter-language="HTML"></FormatterComponent>
 </template>
\ No newline at end of file