diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 1734b18..e01d0f7 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -3190,9 +3190,9 @@
       }
     },
     "node_modules/normalize-package-data/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -3326,9 +3326,9 @@
       }
     },
     "node_modules/npm-run-all/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -3616,9 +3616,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6994,9 +6994,9 @@
       },
       "dependencies": {
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
           "dev": true
         }
       }
@@ -7097,9 +7097,9 @@
           "dev": true
         },
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
           "dev": true
         },
         "shebang-command": {
@@ -7302,9 +7302,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
       "requires": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index f61c09b..cd9439b 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="font-sans flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
diff --git a/Frontend/src/assets/tooltips/xpath/xpathdiffs.json b/Frontend/src/assets/tooltips/xpath/xpathdiffs.json
index 91e0030..5e0be75 100644
--- a/Frontend/src/assets/tooltips/xpath/xpathdiffs.json
+++ b/Frontend/src/assets/tooltips/xpath/xpathdiffs.json
@@ -2,11 +2,11 @@
     "universalInfo":
     [
         {
-            "category":"What is XPath",
+            "category":"What is XPath?",
             "description":"XPath is a query language used for selecting nodes from XML and processing them. It may perform operations on strings, numbers and boolean values."
         },
         {
-            "category":"What's new in XPath?"
+            "category":"What's new in XPath"
         }
     ],
     "VersionDiffs":
diff --git a/Frontend/src/assets/tooltips/xslt/xsltdiffs.json b/Frontend/src/assets/tooltips/xslt/xsltdiffs.json
index a55215b..1d94507 100644
--- a/Frontend/src/assets/tooltips/xslt/xsltdiffs.json
+++ b/Frontend/src/assets/tooltips/xslt/xsltdiffs.json
@@ -6,7 +6,7 @@
             "description":"XSLT (Extensible Stylesheet Language Transformations) is a language for converting and manipulating XML data into various formats. It uses rules defined in stylesheets to transform XML documents into HTML, XML, or other text-based outputs."
         },
         {
-            "category":"What's differences between XSLT versions"
+            "category":"Differences between XSLT versions"
         }
     ],
     "VersionDiffs":
diff --git a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
index 21a79cc..024911c 100644
--- a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -8,9 +8,9 @@ const props = defineProps({
 const emit = defineEmits(["update:result"])
 
 function process() {
-    var request:Request = prepareRequest();
+    var request:Request = prepareRequest()
     fetchRequest(request).then((data) => {
-        sendProcessedData(data);
+        sendProcessedData(data)
     })
 }
 
@@ -18,36 +18,36 @@ function prepareRequest():Request {
     var request = new Request(prepareURL(), {
         body: prepareRequestBody(),
         method: "POST"
-    });
+    })
     return request
 }
 
 function prepareURL(): string {
-    var mode = "prettify";
+    var mode = "prettify"
     if (props.isMinimizer)
-        mode = "minimize";
-    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode;
+        mode = "minimize"
+    return document.location.protocol + "//" + document.location.hostname + "/libxml/" + mode
 }
 
 function prepareRequestBody():string {
     var requestBody = JSON.stringify({
         "data": props.xml,
-        "process": "N/A",
+        "processorData": "N/A",
         "processor": "libxml",
         "version": "1.0"
-    });
-    return requestBody;
+    })
+    return requestBody
 }
 
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body);
-    return responseBody;
+    .then((body) => body)
+    return responseBody
 }
 
 function sendProcessedData(data: JSON) {
-    emit("update:result", data);
+    emit("update:result", data)
 }
 </script>
 
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index de600b4..c80581c 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -34,7 +34,7 @@ function showHeaders(headers: object, index: number){
 
 
 <template>
-    <div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4">
+    <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
         <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
         <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
         <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
diff --git a/Frontend/src/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index ae5a2e4..c7ca916 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -45,12 +45,12 @@ function refreshHistory(){
 </script>
 
 <template>
-    <div>
-        <table class="text-white h-28 w-full text-center">
+    <div class="h-28 text-center text-grey-900 dark:text-white">
+        <table class="w-full">
             <tr>
                 <th>Time</th>
                 <th>HTTP Method</th>
-                <th>HTTP Headers</th>
+                <th>Headers</th>
                 <th>Request Body</th>
                 <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
             </tr>
diff --git a/Frontend/src/components/sidebar/SidebarComponent.vue b/Frontend/src/components/sidebar/SidebarComponent.vue
index f38b19c..51a28c4 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -29,8 +29,8 @@ onMounted( () => {
             <a href="https://release11.com/">
                 <img :src="logoR11" class="w-72 h-16 p-2 pt-0"/>
             </a>
-            <div class="flex basis-full flex-col font-medium items-center">
-                <sidebar-menu-element-component category-name="XML">
+            <div class="flex basis-full flex-col font-normal items-center">
+                <sidebar-menu-element-component category-name="Parser">
                     <SidebarToolLinkComponent path-to="/xml/xpath" element-content="XPath" />
                     <SidebarToolLinkComponent path-to="/xml/xquery" element-content="XQuery" />
                     <SidebarToolLinkComponent path-to="/xml/xsd" element-content="XSD" />
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 9eed53b..d6454b0 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -18,10 +18,10 @@ const props = defineProps(
 
 <template>
     <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
-        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-bold text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-2 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
             <span class="flex-1 whitespace-nowrap">{{props.categoryName}}</span>
         </button>
-        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-thin overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>
diff --git a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
index 5a1b5c4..a37fd7c 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -17,6 +17,6 @@ const props = defineProps(
 
 <style>
 .router-link-active {
-    font-weight: 500;
+    font-weight: 600;
 }
 </style>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 295b421..ddb6aa9 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
-import { ref } from 'vue';
-import CodeEditor from '../CodeEditorComponent.vue';
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'
 
 const data = ref('')
+const inputFile = ref()
 
 const props = defineProps(
     {
@@ -15,7 +16,6 @@ const props = defineProps(
 const emit = defineEmits(['update'])
 
 function sendValue() {
-    console.log("input works")
     emit('update', data.value)
 }
 
@@ -25,18 +25,31 @@ function sendNewValue(newValue : string) {
 }
 
 function updateData(newData: string) {
-    data.value = newData;
-    sendValue();
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
 }
 
 function clear() {
-    updateData('');
+    updateData('')
 }
 
 function canBeFormatted() {
     return props.stylizedName.toLowerCase() == 'xml' || 
            props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt';
+           props.stylizedName.toLowerCase() == 'xslt'
+}
+
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            sendNewValue(result)
+            
+    }
+    reader.readAsText(file.target.files[0])
 }
 
 </script>
@@ -44,8 +57,12 @@ function canBeFormatted() {
 <template>
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
         <div class="flex place-content-between w-full items-center">
-            <span class="dark:text-white">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2">
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
+            <div class="flex space-x-2 pb-2 overflow-x-scroll">
+                <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="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                 <button class="tool-button" @click="clear">Clear</button>
diff --git a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue b/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
deleted file mode 100644
index f0722ea..0000000
--- a/Frontend/src/components/xml/XmlInputFieldToolbarComponent.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
-
-const props = defineProps(
-    {
-        prettyName: {type: String, required: true}
-    }
-)
-
-const emit = defineEmits(['update:defaultData'])
-
-function setDefault(data: string) {
-    const emitName = "update:defaultData";
-    emit(emitName, data)
-}
-
-</script>
-
-<template>
-    
-</template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 2857d2c..f510d61 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -47,6 +47,7 @@ function changeAvailableVersions() {
         changeAvailableVersionsOfXSLT();
     else if (props.tool == "xsd")
         versionsForCurrentEngine.value = ["N/A"];
+
     else if (props.tool == "xpath")
         changeAvailableVersionsOfXPath();
 
@@ -72,7 +73,7 @@ function selectDefaultEngine() {
 }
 
 function selectDefaultVersion() {
-    const lastVersion = versionsForCurrentEngine.value.length - 1
+    const lastVersion = versionsForCurrentEngine.value.length - 1;
     version.value = versionsForCurrentEngine.value[lastVersion];
     emitVersionChange();
 }
@@ -126,17 +127,21 @@ function emitVersionChange() {
     emit("update", version.value);
 }
 
+function isVersionSelectionAvailable() {
+    return !(props.tool == "xsd");
+}
+
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg: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 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">
+            <div class="flex space-x-2 overflow-x-scroll">
                 <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                 </select>
-                <select v-model="version" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
                     <option v-for="version in versionsForCurrentEngine" :value="version">{{ version }}</option>
                 </select>
                 <button class="tool-button" @click="clear">Clear</button>    
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index d25760f..4b43f20 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -58,7 +58,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800 ">
         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
diff --git a/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue b/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
index bb07ed7..dec65f3 100644
--- a/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipDiffsComponent.vue
@@ -12,19 +12,19 @@ const props = defineProps({
 function getDiffEntry(toolVersion : String) : string[] {
     if ( props.toolName == "xpath" ){
         switch(toolVersion){
-        case "2.0" : {
-            return xpathDiffs.VersionDiffs[0].diffs
+            case "2.0" : {
+                return xpathDiffs.VersionDiffs[0].diffs
+            }
+            case "3.0" : {
+                return xpathDiffs.VersionDiffs[1].diffs
+            }
+            case "3.1" : {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
+            default: {
+                return xpathDiffs.VersionDiffs[2].diffs
+            }
         }
-        case "3.0" : {
-            return xpathDiffs.VersionDiffs[1].diffs
-        }
-        case "3.1" : {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-        default: {
-            return xpathDiffs.VersionDiffs[2].diffs
-        }
-    }
     } else if (props.toolName == "xslt") {
         return ["XSLT 2.0"].concat(xsltDiffs.VersionDiffs[0].diffs).concat(["XSLT 3.0"]).concat(xsltDiffs.VersionDiffs[1].diffs) ;
     } else{
@@ -56,7 +56,7 @@ function getInfo(num : number ){
     </span>
 </TooltipCategoryComponent>    
 
-<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category">
+<TooltipCategoryComponent v-if="toolVersion !== '1.0'"  :name="getInfo(1).category + ' ' + toolVersion + '?'">
         <span v-for=" diff in getDiffEntry(toolVersion)" v-bind:key="diff" class=" text-justify" >
             <div class="w-full h-4 text-center" v-if="diff.includes('XSLT')">
                 ------------ {{ diff }} ------------
diff --git a/Frontend/src/fonts/Raleway-Variable.ttf b/Frontend/src/fonts/Raleway-Variable.ttf
new file mode 100644
index 0000000..109884d
Binary files /dev/null and b/Frontend/src/fonts/Raleway-Variable.ttf differ
diff --git a/Frontend/src/fonts/Sono-Variable.ttf b/Frontend/src/fonts/Sono-Variable.ttf
new file mode 100644
index 0000000..4793a34
Binary files /dev/null and b/Frontend/src/fonts/Sono-Variable.ttf differ
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 2133826..1bb9d69 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -2,14 +2,28 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+    font-family: "Raleway";
+    src: url("fonts/Raleway-Variable.ttf");
+}
+
+@font-face {
+    font-family: "Sono";
+    src: url("fonts/Sono-Variable.ttf");
+}
+
 .inactive-button {
     @apply py-2 px-4 h-fit text-slate-400 border border-slate-400 rounded-full
 }
 
 .tool-button {
-    @apply hover:brightness-110 py-2 px-4 h-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply hover:brightness-110 py-2 px-4 h-fit min-w-fit rounded-full bg-gradient-to-r from-blue-400 to-sky-300  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
 
 .text-field {
     @apply w-full font-mono dark:text-slate-100 bg-slate-50 dark:bg-gray-600 border border-slate-400 p-2 rounded-lg
+}
+
+.file-selector {
+    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
 }
\ No newline at end of file
diff --git a/Frontend/src/views/Base64EncoderView.vue b/Frontend/src/views/Base64EncoderView.vue
index 9a945e2..fcc50f8 100644
--- a/Frontend/src/views/Base64EncoderView.vue
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import CodeEditorComponent from '@/components/CodeEditorComponent.vue';
+import CodeEditorComponent from '@/components/CodeEditorComponent.vue'
 import EncoderButton from '@/components/encoder/EncoderButtonComponent.vue'
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 
 const data : any = ref("")
 const imageData = ref("")
 const DoshowImage = ref(false)
-const inputImage = ref();
+const inputImage = ref()
 
 function setTextFieldValue(newData: string) {
     data.value = newData.toString()
-    DoshowImage.value = false;
+    DoshowImage.value = false
 }
 
 function showImage(newImage : string){
     imageData.value = "data:image/jpeg;base64,"+newImage
-    DoshowImage.value = true;
+    DoshowImage.value = true
 }
 
 function convertImageToBase64(file : any){
-    console.log(inputImage)
     const reader = new FileReader()
     reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
     reader.readAsDataURL(file.target.files[0])
@@ -29,34 +28,41 @@ function convertImageToBase64(file : any){
 function clear(){
     data.value = ""
     imageData.value = ""
-    DoshowImage.value = false;
+    DoshowImage.value = false
     inputImage.value.value = null
 }
 
 </script>
 
 <template>
-    <div id="layoutFull" class="w-full h-full flex">
-        <div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
-        <div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
-            <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
-            <button class="tool-button" @click="clear()">Clear</button>
+<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
+    <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
+        <div class="w-full flex flex-row place-content-between items-center">
+            <label class="dark:text-white text-center">Base64/Text</label>
+            <div class="flex flex-row items-center gap-2">
+                <button class="tool-button" @click="clear()">Clear</button>
+                <label class="text-grey-900 dark:text-white">Convert to</label>
+                <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+            </div>
+            
         </div>
-        <div id="codeEditor" class="w-4/5 h-1/3 ml-6  flex flex-col">
-            <label class="dark:text-white text-center w-full">Base64</label>
+        <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
+            
             <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
         </div>
-        <div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
-            <input id="imageLoader" ref="inputImage" class="block file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" type="file" @change="convertImageToBase64" />
+        <div class="flex flex-row justify-center w-full">
+            <div class="flex flex-col items-center w-fit" id="imageImporter">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
+                <input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm"  type="file" @change="convertImageToBase64" />
+            </div>    
         </div>
+        
     </div>
-    <div id="separator" class="bg-black h-full w-1" ></div>
     
-    <div id="layoutRight" class=" ml-6 w-2/5">
-        <div v-on="DoshowImage">
+    <div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full">
+        <div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
             <img :src="imageData"/>
         </div>
         
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 0c9e103..bdf181e 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
-            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <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 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>
             </div>
diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
index 972192f..244c5d4 100644
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
+        <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" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
index 6aca08b..04b0690 100644
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
+    <div id="layout" class="flex flex-col 2xl:flex-row w-full h-full">
+        <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" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index f8f19b1..dcb9690 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -15,14 +15,14 @@ function updateVersion(newVersion: string) {
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
-            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
-            <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
+    <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 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="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            </div>
+            <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         </div>
-        <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
-        </div>
-        <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
+        <tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/tailwind.config.js b/Frontend/tailwind.config.js
index ff48818..102b33c 100644
--- a/Frontend/tailwind.config.js
+++ b/Frontend/tailwind.config.js
@@ -6,6 +6,10 @@ export default {
   ],
   theme: {
     extend: {},
+    fontFamily: {
+      'sans': ['Raleway'],
+      'mono': ["Sono"],
+    }
   },
   plugins: [],
 }
\ No newline at end of file