diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index 1b57d4b..f13f352 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -55,10 +55,10 @@ import {html} from '@codemirror/lang-html'
 </script>
 
 <template>
-  <div class="editor w-full max-w-full h-full overflow-scroll">
+  <div class="editor w-full h-full bg-[#282C34] rounded-2xl overflow-x-scroll">
     
     <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
+      style="height: 100%; width: fit-content; padding:1rem ; border-radius: 1rem; font-size: large;"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index ddb6aa9..c04ce47 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -55,7 +55,7 @@ function readFile(file : any) {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
             <div class="flex space-x-2 pb-2 overflow-x-scroll">
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 405d801..c1fdc13 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -138,7 +138,7 @@ function isVersionSelectionAvailable() {
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
+    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 xl:pr-2">
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2 overflow-x-scroll">
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index bdf181e..be12426 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -17,7 +17,7 @@ function updateVersion(newVersion: string) {
 
 <template>
     <div id="layout" class="flex flex-row w-full h-full">
-        <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
+        <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide xl:pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>