diff --git a/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
new file mode 100644
index 0000000..a999d8f
--- /dev/null
+++ b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
@@ -0,0 +1,50 @@
+<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 + "/java/json/formatting";
+}
+
+function prepareRequestBody():string {
+    var requestBody = props.xml;
+    return requestBody;
+}
+
+async function fetchRequest(request: Request):Promise<JSON> {
+    var responseBody = await fetch(request)
+    .then(response => response.json())
+    .then((body) => body);
+    console.log(responseBody);
+    return responseBody;
+}
+
+function sendProcessedData(data: JSON) {
+    emit("update:result", data);
+}
+</script>
+
+<template>
+    <button class="tool-button" @click="process()">Format</button>
+</template>
+
+<style scoped></style>
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 1483e5b..8740973 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import XMLButtonFormatterComponent from '@/components/formatter/XMLButtonFormatterComponent.vue';
+import JsonButtonFormatterComponent from '@/components/formatter/JsonButtonFormatterComponent.vue';
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
 import { ref } from 'vue';
 
 
-const xml = ref('');
+const json = ref('');
 
 function setTextFieldValue(data: string) {
-    xml.value = data
+    json.value = data
 }
 
 function format(formattedXml: any) {
-    xml.value = formattedXml.result;
+    json.value = formattedXml.data;
 }
 
 function clear() {
-    xml.value = '';
+    json.value = '';
 }
 
 </script>
@@ -27,9 +27,9 @@ function clear() {
             <div class="space-x-2">
                 <InsertTemplateComponent pretty-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <JsonButtonFormatterComponent :xml="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
             </div>
         </div>
-        <textarea name="data" id="data" :value="xml" class="text-field"></textarea>
+        <textarea name="data" id="data" :value="json" class="text-field"></textarea>
     </div>
 </template>
\ No newline at end of file