diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index 839da8b..b5ee5d9 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@codemirror/lang-xml": "^6.0.2",
         "@codemirror/theme-one-dark": "^6.1.2",
         "codemirror": "^6.0.1",
+        "material-icons": "^1.13.14",
         "thememirror": "^2.0.1",
         "vue": "^3.3.4",
         "vue-codemirror": "^6.1.1",
@@ -3071,6 +3072,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/material-icons": {
+      "version": "1.13.14",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.14.tgz",
+      "integrity": "sha512-kZOfc7xCC0rAT8Q3DQixYAeT+tBqZnxkseQtp2bxBxz7q5pMAC+wmit7vJn1g/l7wRU+HEPq23gER4iPjGs5Cg=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -6909,6 +6915,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.13"
       }
     },
+    "material-icons": {
+      "version": "1.13.14",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.14.tgz",
+      "integrity": "sha512-kZOfc7xCC0rAT8Q3DQixYAeT+tBqZnxkseQtp2bxBxz7q5pMAC+wmit7vJn1g/l7wRU+HEPq23gER4iPjGs5Cg=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
diff --git a/Frontend/package.json b/Frontend/package.json
index 7663195..64d49f9 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -17,6 +17,7 @@
     "@codemirror/lang-xml": "^6.0.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "codemirror": "^6.0.1",
+    "material-icons": "^1.13.14",
     "thememirror": "^2.0.1",
     "vue": "^3.3.4",
     "vue-codemirror": "^6.1.1",
diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index d425cc9..2a8f321 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router';
+import 'material-icons/iconfont/material-icons.css';
 import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 import {onMounted, provide, ref } from 'vue';
 
@@ -45,13 +46,12 @@ function getTheme(){
 </script>
 
 <template>
-  <div id="layout" class="font-sans flex h-screen bg-gradient-to-br from-sky-200 to-indigo-200 dark:from-sky-950 dark:to-indigo-950">
+  <div id="layout" class="font-sans flex h-screen bg-[#f5f7fa] dark:bg-gray-700 dark:from-sky-950 dark:to-indigo-950">
     <SidebarComponent @theme:changed="setTheme" />
-    <div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
+    <div class="relative p-4 w-full m-4 ml-0 bg-[#f5f7fa] dark:bg-gray-700 rounded-2xl overflow-hidden ">
       <RouterView></RouterView>
     </div>
   </div>
-  
 </template>
 
 <style scoped></style>
diff --git a/Frontend/src/components/landing/LandingComponent.vue b/Frontend/src/components/landing/LandingComponent.vue
index 7c1aef8..bc8e69e 100644
--- a/Frontend/src/components/landing/LandingComponent.vue
+++ b/Frontend/src/components/landing/LandingComponent.vue
@@ -1,42 +1,79 @@
 <script setup lang="ts">
-
 </script>
 
 <template>
-  <div class="dark:text-slate-100">
-    <h1 class="text-3xl mb-4">Welcome to Release11 Tools</h1>
-    <h2 class="text-xl">Our tool set is split to three main categories:</h2>
-    <ul class="list-decimal ml-5">
-      <li><strong>XML</strong> - containing various tools that allow to validate and transform any XML</li>
-      <li><strong>Formatter</strong> - containing tools for formatting text files in various formats</li>
-      <li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
-      <li><strong>Encoder</strong> - consist of encoders for Base64 and URL</li>
-    </ul>
-    <br/>
+  <div class="dark:text-slate-100 bg-[#f5f7fa] dark:bg-gray-700 flex w-fit flex-col items-center ">
 
-    <h2 class="text-xl mt-2">XML - Tools:</h2>
-    <ul class="list-decimal ml-5">
-      <li><strong>XPath</strong> - This is tool that allows to parse XPath on selected XML</li>
-      <li><strong>XQuery</strong> - Allows to execute XQuery on provided XML file.</li>
-      <li><strong>XSD</strong> - Allows to validate XML against provided XSD schema.</li>
-      <li><strong>XSLT</strong> - Allows to transform XML using XSLT transform.</li>
-    </ul>
-    
-    <h2 class="text-xl mt-2">Formatter - Tools:</h2>
-    <p>These are tools that allow to format or minimize files in bespoken formats.</p>
-    
-    <h2 class="text-xl mt-2">REST - Tools:</h2>
-    <p>This is tools that allow to created mocked REST Service that can be used to test REST clients.</p>
-    
-    <h2 class="text-xl mt-2">Encoder - Tools:</h2>
-    <ul class="list-decimal ml-5">
-      <li><strong>Base64</strong> - This is tool allowing to encode text to base64 and decode base64 to text or image.</li>
-      <li><strong>URL</strong> - This tool allow to encode string in the way that is used by browser when you put it in address bar.</li>
-    </ul>
-    
+    <div class="flex my-4 px-4 py-4 w-full rounded-lg dark:bg-gray-600 shadow-lg flex-col bg-white items-center">
+      <h1 class="text-3xl">Welcome to Release11 Tools</h1>
+
+    </div>
+    <div class="flex my-4 px-4 py-4  w-full rounded-lg dark:bg-gray-600 shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">construction</i>
+        <h2 class="text-xl">Our tool set is split to three main categories:</h2>
+      </div>
+      <ul class="list-decimal ml-5">
+        <li>
+          <strong>XML</strong> - containing various tools that allow to validate and transform any
+          XML
+        </li>
+        <li>
+          <strong>Formatter</strong> - containing tools for formatting text files in various formats
+        </li>
+        <li><strong>REST</strong> - consist of Mock that allows to create mocked REST endpoint</li>
+        <li><strong>Encoder</strong> - consist of encoders for Base64 and URL</li>
+      </ul>
+    </div>
+    <br />
+    <div class="flex my-4 px-4 py-4 w-full dark:bg-gray-600 rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">code</i>
+        <h2 class="text-xl ">XML - Tools:</h2>
+
+      </div>
+
+      <ul class="list-decimal ml-5">
+        <li><strong>XPath</strong> - This is tool that allows to parse XPath on selected XML</li>
+        <li><strong>XQuery</strong> - Allows to execute XQuery on provided XML file.</li>
+        <li><strong>XSD</strong> - Allows to validate XML against provided XSD schema.</li>
+        <li><strong>XSLT</strong> - Allows to transform XML using XSLT transform.</li>
+      </ul>
+    </div>
+    <div class="flex my-4 px-4 py-4 w-full dark:bg-gray-600 rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">format_align_left</i>
+        <h2 class="text-xl ">Formatter - Tools:</h2>
+      </div>
+      <p>These are tools that allow to format or minimize files in bespoken formats.</p>
+    </div>
+    <div class="flex my-4 px-4 py-4 w-full dark:bg-gray-600 rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons text-2xl text-[#2A93B0]">lan</i>
+        <h2 class="text-xl ">REST - Tools:</h2>
+      </div>
+      <p>
+        This is tools that allow to created mocked REST Service that can be used to test REST
+        clients.
+      </p>
+    </div>
+    <div class="flex my-4 px-4 py-4 w-full dark:bg-gray-600 rounded-lg shadow-lg flex-col bg-white ">
+      <div class="flex items-center gap-2">
+        <i class="material-icons  text-2xl text-[#2A93B0]  ">cached</i>
+        <h2 class="text-xl ">Encoder - Tools:</h2>
+      </div>
+      <ul class="list-decimal ml-5">
+        <li>
+          <strong>Base64</strong> - This is tool allowing to encode text to base64 and decode base64
+          to text or image.
+        </li>
+        <li>
+          <strong>URL</strong> - This tool allow to encode string in the way that is used by browser
+          when you put it in address bar.
+        </li>
+      </ul>
+    </div>
   </div>
-  
 </template>
 
 <style scoped></style>
-
diff --git a/Frontend/src/components/man/ManTooltipComponent.vue b/Frontend/src/components/man/ManTooltipComponent.vue
index 5a50ed9..28d660a 100644
--- a/Frontend/src/components/man/ManTooltipComponent.vue
+++ b/Frontend/src/components/man/ManTooltipComponent.vue
@@ -15,11 +15,16 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? 'w-fit' : 'w-5/12'" class="hidden xl:flex 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()">
+  <div
+      :class="[
+      areTooltipsHidden ? 'w-fit' : 'w-5/12',
+      'hidden xl:flex items-stretch p-2 flex-row rounded-lg shadow-lg',
+      'bg-[#bbe3ef] dark:bg-[#2A93B0]'
+    ]"
+  >       <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 bg-[#bbe3ef] dark:bg-[#2A93B0]" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
-        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-lg dark:text-white bg-white dark:bg-gray-700" >
             <slot></slot>
         </div>
     </div>
diff --git a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
index e81363a..1fb086e 100644
--- a/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarMenuElementComponent.vue
@@ -17,11 +17,11 @@ 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-1 text-lg font-normal text-gray-900 transition duration-75 hover:bg-blue-100 dark:text-gray-100  dark:hover:bg-slate-600">
+    <div class="w-full mb-4 p-2 rounded-xl shadow-lg bg-white dark:bg-gray-600 dark:from-sky-700 dark:to-sky-900">
+        <button @click="switchHiddenElement()" type="button" :class="[isActive ? 'rounded-lg' : 'rounded-lg']" class="w-full p-1 text-lg font-normal text-gray-900 transition duration-75 hover:bg-[#2A93B0] 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 mt-2 py-2 bg-indigo-50 dark:bg-slate-800 rounded-xl font-light overflow-hidden" :class="[isActive ? 'active' : 'hidden']">
+        <div class="flex flex-col w-full mt-2 py-2 bg-white dark:bg-gray-600 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 a37fd7c..7e801da 100644
--- a/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
+++ b/Frontend/src/components/sidebar/SidebarToolLinkComponent.vue
@@ -11,7 +11,7 @@ const props = defineProps(
 
 <template>
     <RouterLink
-        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-blue-100 dark:text-white dark:hover:bg-slate-600"
+        class="w-full text-center py-2 px-4 text-gray-800 transition duration-75 hover:bg-[#bbe3ef] dark:bg-gray-600 dark:text-white dark:hover:bg-[#2A93B0]"
         :to="props.pathTo">{{ props.elementContent }}</RouterLink>
 </template>
 
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 4f989c3..c28e6b1 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -222,10 +222,10 @@ function handleChange() {
         <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-auto">
-                <select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
+                <select v-model="engine" name="engine" @change="handleChange()" class="px-3 rounded-lg 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" 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">
+                <select v-model="version" v-if="isVersionSelectionAvailable()" name="version" @change="emitVersionChange()" class="px-3 rounded-lg 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/TooltipCategoryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
index d04808a..f37baea 100644
--- a/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipCategoryComponent.vue
@@ -13,9 +13,9 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div class="flex p-2 flex-col rounded-xl shadow-lg bg-gradient-to-r from-gray-300 to-slate-300 dark:from-slate-500 dark:to-slate-600">
+    <div class="flex p-2 flex-col rounded-lg shadow-lg bg-white dark:bg-gray-700 dark:from-slate-500 dark:to-slate-600">
         <button :class="{ 'mb-2' : !isCategoryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.name }}</button>
-        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+        <div id="content" :class="{'hidden' : isCategoryHidden}" class="flex flex-col gap-4 w-full h-fit p-2 rounded-lg dark:text-white bg-white dark:bg-gray-700" >
             <slot></slot>
         </div>
     </div>
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index 2d2583a..048e28c 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -58,11 +58,11 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <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 ">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-[26rem]'" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-lg shadow-lg bg-[#bbe3ef] dark:bg-[#2A93B0] 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>
-        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-xl dark:text-white bg-indigo-50 dark:bg-gray-700" >
+        <div id="content" :class="{'hidden' : areTooltipsHidden}" class="w-full flex flex-col gap-4 p-2 overflow-auto rounded-lg dark:text-white bg-[#bbe3ef] dark:bg-gray-700" >
             <TooltipDiffsComponent :tool-name="toolType" :tool-version="props.version"></TooltipDiffsComponent>
             <div class="w-full h-2"> </div>
             <tooltipCategoryComponent v-for="category in selectTooltip()" :key="category.name" :name="category.name">
diff --git a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
index 4add829..bf221b6 100644
--- a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
@@ -48,7 +48,7 @@ function interpretXPathIndicators( elementType:string ):string {
 <template>
     <div class="flex p-1 flex-col rounded-xl border border-slate-400 dark:border-slate-400">
         <button :class="{ 'mb-2' : !isEntryHidden }" class="dark:text-slate-100 hover:font-bold" @click="toggleTooltips()">{{ props.entryData.name }}</button>
-        <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-indigo-50 dark:bg-slate-800" >
+        <div id="content" :class="{'hidden' : isEntryHidden}" class="w-full p-2 rounded-xl dark:text-white bg-white dark:bg-gray-700" >
             <h4 class="text-xl mb-2 font-bold text-justify">Description</h4>
             <span class="text-justify">
                 <p>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 7b46710..3ccda11 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -17,7 +17,7 @@
 }
 
 .tool-button {
-    @apply hover:brightness-110 py-2 px-3 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
+    @apply hover:brightness-110 py-2 px-3 h-fit min-w-fit rounded-lg bg-white border border-[#2A93B0] dark:bg-[#2A93B0] dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-[#2A93B0]
 }
 
 .text-field {
@@ -25,7 +25,7 @@
 }
 
 .file-selector {
-    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-3 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
+    @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-3 file:h-full file:w-fit file:rounded-lg file:bg-white file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:bg-[#2A93B0] file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-[#2A93B0] w-fit rounded-lg text-sm text-gray-900 border border-[#2A93B0] cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
 }
 
 .text-field-error {
@@ -41,7 +41,7 @@
 }
 
 .tab-active {
-    @apply py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl 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 py-2 px-3 h-fit text-slate-700 border-t border-l border-r border-slate-400 rounded-t-2xl bg-[#bbe3ef] dark:bg-[#2A93B0] dark:text-white dark:from-sky-600 dark:to-sky-800
 }
 
 .disabled-tab {
diff --git a/Frontend/src/views/LandingView.vue b/Frontend/src/views/LandingView.vue
index ad7bd57..832df2d 100644
--- a/Frontend/src/views/LandingView.vue
+++ b/Frontend/src/views/LandingView.vue
@@ -10,6 +10,9 @@ export default {
 
 
 <template>
+  <div class="flex rounded-lg items-center bg-[#f5f7fa] dark:bg-gray-700  justify-center ">
     <LandingComponent></LandingComponent>
+  </div>
+
 </template>