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/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index 1e39223..7d6011c 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -46,11 +46,11 @@ function refreshHistory(){
 
 <template>
     <div>
-        <table class="h-28 w-full text-center dark:text-grey-900">
+        <table class="h-28 w-full text-center text-grey-900 dark:text-white">
             <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 ec927f4..51a28c4 100644
--- a/Frontend/src/components/sidebar/SidebarComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarComponent.vue
@@ -29,7 +29,7 @@ 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">
+            <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" />
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index 9eed53b..19340c2 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-extralight overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
             <slot></slot>
         </div>
     </div>
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 4ab7719..5bf48b8 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -2,6 +2,16 @@
 @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
 }
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