diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 67df3a6..706e1ea 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -37,11 +37,11 @@ function setToDefaultQuery(data: string) {
     <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent prettyName="XML" @update:defaultData="(data) => setToDefaultXML(data)"></xmlInputFieldToolbarComponent>
-            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="xmlField" v-model="xml" @input="sendXml()" class="text-field"></textarea>
         </div>
         <div class="flex flex-col w-full h-1/2">
             <xmlInputFieldToolbarComponent :prettyName="$props.prettyName" @update:defaultData="(data) => setToDefaultQuery(data)"></xmlInputFieldToolbarComponent>
-            <textarea id="transformField" v-model="query" @input="sendTransform()" class="w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md"></textarea>
+            <textarea id="transformField" v-model="query" @input="sendTransform()" class="text-field"></textarea>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 6fceeb2..970c805 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -22,7 +22,7 @@ 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="w-full h-full p-2 overflow-scroll border border-slate-400 rounded-md text-left bg-white dark:text-slate-100 dark:bg-gray-600">
+        <div class="text-field overflow-scroll">
             <pre class="break-words"><code>{{ result }}</code></pre>
         </div>
         
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index f884ed7..ed52c6e 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -4,4 +4,8 @@
 
 .tool-button {
     @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+}
+
+.text-field {
+    @apply w-full h-full resize-none dark:text-slate-100 dark:bg-gray-600 border border-slate-400 p-2 rounded-md
 }
\ No newline at end of file