------------ {{ 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/router/index.ts b/Frontend/src/router/index.ts
index a4af1bd..89f67b9 100644
--- a/Frontend/src/router/index.ts
+++ b/Frontend/src/router/index.ts
@@ -12,6 +12,14 @@ const xsdTool = import("@views/XSDView.vue")
 const xpathTool = import("@views/XPathView.vue")
 const xqueryTool = import("@views/XQueryView.vue")
 
+<<<<<<< HEAD
+=======
+const base64Encoder = import("@views/Base64EncoderView.vue")
+const urlEncoder = import("@views/UrlEncoderView.vue")
+
+const restMockMan = import("@views/man/RestMockManView.vue")
+
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
 const routes = [
   {
     path: '/',
@@ -57,6 +65,24 @@ const routes = [
     path: '/rest/mock',
     name: 'restmock',
     component: () => restMock
+<<<<<<< HEAD
+=======
+  },
+  {
+    path: '/encoder/base64',
+    name: 'base64encoder',
+    component: () => base64Encoder
+  },
+  {
+    path: '/encoder/url',
+    name: 'urlEncoder',
+    component: () => urlEncoder
+  },
+  {
+    path: '/man/rest-mock',
+    name: 'RestMockManView',
+    component: () => restMockMan
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
   }
 ]
 
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 2133826..5fe2bce 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -2,14 +2,57 @@
 @tailwind components;
 @tailwind utilities;
 
+<<<<<<< HEAD
 .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
+=======
+@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-3 h-fit text-slate-400 border border-slate-400 rounded-full
+}
+
+.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
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
 }
 
 .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
-}
\ No newline at end of file
+<<<<<<< HEAD
+}
+=======
+}
+
+.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
+}
+
+.text-field-error {
+    @apply shadow-[0px_0px_10px_0px_rgba(255,0,0,1)];
+}
+
+.text-field-success {
+    @apply shadow-[0px_0px_10px_0px_rgba(52,211,153,1)];
+}
+
+.tab {
+    @apply py-2 px-3 h-fit dark:text-slate-400 rounded-t-2xl border-t border-l border-r border-slate-400 
+}
+
+.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
+}
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
diff --git a/Frontend/src/views/Base64EncoderView.vue b/Frontend/src/views/Base64EncoderView.vue
new file mode 100644
index 0000000..f14aeb1
--- /dev/null
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -0,0 +1,75 @@
+
+
+
+
+    
+    
+    
+        
+            
![]()
+        
+        
+    
+
\ No newline at end of file
diff --git a/Frontend/src/views/HtmlFormatterView.vue b/Frontend/src/views/HtmlFormatterView.vue
index 4e16a32..e40a097 100644
--- a/Frontend/src/views/HtmlFormatterView.vue
+++ b/Frontend/src/views/HtmlFormatterView.vue
@@ -1,4 +1,5 @@
 
 
 
+<<<<<<< HEAD
     
         
             HTML Formatter
@@ -31,4 +36,7 @@ function setTextFieldValue(data: string) {
         
         
      
+=======
+    
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
 
\ No newline at end of file
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 8303489..64e45d1 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -1,4 +1,5 @@
 
 
 
+<<<<<<< HEAD
     
         
             JSON Formatter
@@ -34,4 +39,7 @@ function clear() {
         
         
      
+=======
+    
+>>>>>>> 307e732608fca31b60027b417412691ff0e1c2f0
 
\ No newline at end of file
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 82584b9..7658387 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -1,6 +1,7 @@
 
 
@@ -9,6 +10,31 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'