diff --git a/Frontend/src/components/XsltParamComponent.vue b/Frontend/src/components/XsltParamComponent.vue
new file mode 100644
index 0000000..2ab3441
--- /dev/null
+++ b/Frontend/src/components/XsltParamComponent.vue
@@ -0,0 +1,33 @@
+<script lang="ts">
+import {defineComponent, ref} from 'vue'
+const selected = ref('A')
+
+const options = ref([
+  { text: 'One', value: 'A' },
+  { text: 'Two', value: 'B' },
+  { text: 'Three', value: 'C' }
+])
+</script>
+
+<template>
+  <select v-model="selected" class="rounded-3xl w-1/3 px-3">
+    <option v-for="option in options" :value="option.value">
+      {{ option.text }}
+    </option>
+  </select>
+
+  <input
+      id="textInput1"
+      class="text-input px-2 py-1 border rounded-3xl w-1/3"
+      type="text"
+      placeholder="Name"
+  />
+  <input
+      id="textInput2"
+      class="text-input px-2 py-1 border rounded-3xl w-1/3"
+      type="text"
+      placeholder="Value"
+  />
+  <button class="tool-button" @click="clear">Add Variable</button>
+</template>
+
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 097ac11..a18ae84 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -2,6 +2,8 @@
 import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import CodeEditor from '@/components/common/CodeEditorComponent.vue'
+import XsltParamComponent from '@/components/XsltParamComponent.vue'
+import Vuetify from 'vuetify';
 
 import {ref} from 'vue'
 import TabComponent from "@components/xml/TabComponent.vue";
@@ -21,6 +23,7 @@ function sendValue() {
   emit('update:modelValue', data.value)
 }
 
+
 function updateData(newData: string, clearFileSelector: boolean = true) {
   data.value = newData
   if (clearFileSelector)
@@ -48,13 +51,14 @@ function readFile(file: any) {
   reader.onloadend = () => {
     let result = reader.result?.toString()
     if (typeof result == "string")
-      updateData(result, false);
+      updateData(result, false)
 
   }
   reader.readAsText(file.target.files[0])
 }
 
 
+
 </script>
 
 <template>
@@ -64,37 +68,21 @@ function readFile(file: any) {
     <div class="flex place-content-between w-full items-center">
       <span class="dark:text-white mr-2">{{ stylizedName }}</span>
       <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" />
+        <input id="fileLoader" ref="inputFile" class="file-selector" type="file"
+               accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile"/>
       </div>
       <div class="flex space-x-2 pb-2 overflow-x-auto">
-        <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="updateData"></InsertTemplateComponent>
-        <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
+        <InsertTemplateComponent :stylized-name="props.stylizedName"
+                                 @update:default-data="updateData"></InsertTemplateComponent>
+        <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data"
+                                     @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
         <button class="tool-button" @click="clear">Clear</button>
       </div>
     </div>
 
     <div class="flex place-content-between w-full items-center">
       <div v-if="addParameters()" class="flex justify-end space-x-2 pb-2 overflow-x-auto ml-auto">
-        <select id = "myList" onchange = "favTutorial()" class = "w-full rounded-3xl" >
-          <option> ---Choose tutorial--- </option>
-          <option> w3schools </option>
-          <option> Javatpoint </option>
-          <option> tutorialspoint </option>
-          <option> geeksforgeeks </option>
-        </select>
-        <input
-            id="textInput1"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 1"
-        />
-        <input
-            id="textInput2"
-            class="text-input px-2 py-1 border rounded-3xl w-1/3"
-            type="text"
-            placeholder="Input 2"
-        />
-        <button class="tool-button" @click="clear">Add Variable</button>
+      <XsltParamComponent :stylizedName="stylizedName" />
       </div>
     </div>