From 6a4a799c85f95a906e6c9ebb874b08edc4f796c1 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Wed, 6 Dec 2023 11:51:42 +0100
Subject: [PATCH] added settings Page and components

---
 components/AssetSearch.vue              |  82 +++++++++
 components/server/AssetSolutionList.vue | 171 +++++++++++++++++++
 components/server/Client.vue            |  94 ++++++++---
 components/server/ClientQuickAccess.vue |  43 ++++-
 components/server/ClientTable.vue       |  73 ++++++--
 components/server/UserAccount.vue       | 140 ++++++++++++++++
 components/server/UserAppearance.vue    | 115 +++++++++++++
 components/server/UserProfile.vue       | 136 +++++++++++++++
 components/server/UserRightsList.vue    | 213 ++++++++++++++++++++++++
 layouts/Navigationbar.vue               |  14 +-
 package-lock.json                       |   6 +
 package.json                            |   1 +
 pages/assets.vue                        |  24 ++-
 pages/clients.vue                       |   9 +-
 pages/issueSlips.vue                    |  18 +-
 pages/issues.vue                        |  16 +-
 pages/maintenanceVisits.vue             |  25 ++-
 pages/productionOrders.vue              |  25 ++-
 pages/settings.vue                      | 175 +++++++++++++++++++
 pages/solutions.vue                     |  15 +-
 routerFrontend/index.js                 |   5 +
 21 files changed, 1301 insertions(+), 99 deletions(-)
 create mode 100644 components/AssetSearch.vue
 create mode 100644 components/server/AssetSolutionList.vue
 create mode 100644 components/server/UserAccount.vue
 create mode 100644 components/server/UserAppearance.vue
 create mode 100644 components/server/UserProfile.vue
 create mode 100644 components/server/UserRightsList.vue
 create mode 100644 pages/settings.vue

diff --git a/components/AssetSearch.vue b/components/AssetSearch.vue
new file mode 100644
index 0000000..f7a909d
--- /dev/null
+++ b/components/AssetSearch.vue
@@ -0,0 +1,82 @@
+<template>
+    <section :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Asset:</div>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset name</pre>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "AssetSearch",
+};
+</script> 
+  
+    
+<style scoped>
+.asset-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.label {
+    width: 4.188em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.pre-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+</style>
+    
\ No newline at end of file
diff --git a/components/server/AssetSolutionList.vue b/components/server/AssetSolutionList.vue
new file mode 100644
index 0000000..cfe2cd3
--- /dev/null
+++ b/components/server/AssetSolutionList.vue
@@ -0,0 +1,171 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
+        <table class="data-table" id="solution-checkklist">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th
+                    :class="['Solution', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                    Solution</th>
+                <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td
+                    :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
+                    ...</td>
+                <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "AssetSolutionList",
+};
+</script> 
+    
+    
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.Solution {
+    width: 50%;
+}
+
+.Solution-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Solution-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 22%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 35%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Type {
+    width: 35%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}</style>
\ No newline at end of file
diff --git a/components/server/Client.vue b/components/server/Client.vue
index bdd0322..42a4af0 100644
--- a/components/server/Client.vue
+++ b/components/server/Client.vue
@@ -1,51 +1,51 @@
 <template>
-  <section class="information">
-    <h2 class="client-name">Client name</h2>
+  <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['client-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Client name</h2>
     <div class="data-field" id="client-id">
-      <pre class="label">ID:</pre>
-      <pre class="data">...</pre>
+      <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
     </div>
     <div class="client-data">
       <div class="contact">
-        <h3 class="area-title">Contact:</h3>
+        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Contact:</h3>
         <div class="data-field" id="contact-person">
-          <pre class="label">Contact person:</pre>
-          <pre class="data">...</pre>
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Contact person:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
         <div class="data-field" id="e-mail">
-          <pre class="label">E-Mail:</pre>
-          <pre class="data">...</pre>
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
         <div class="data-field" id="phone">
-          <pre class="label">Phone number:</pre>
-          <pre class="data">...</pre>
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phone number:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
       </div>
       <div class="address">
-        <h3 class="area-title">Address:</h3>
+        <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Address:</h3>
         <div class="street-address">
           <div class="data-field" id="street-name">
-            <pre class="label">Street:</pre>
-            <pre class="data">...</pre>
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Street:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
           </div>
           <div class="data-field" id="street-no">
-            <pre class="label">No.:</pre>
-            <pre class="data">...</pre>
+            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">No.:</pre>
+            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
           </div>
         </div>
         <div class="data-field" id="postal-code">
-          <pre class="label">Postcode:</pre>
-          <pre class="data">...</pre>
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
         <div class="data-field" id="city">
-          <pre class="label">City:</pre>
-          <pre class="data">...</pre>
+          <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+          <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
         </div>
       </div>
     </div>
     <div class="notes">
-      <h3 class="area-title">Notes:</h3>
-      <pre class="data" id="notes">...</pre>
+      <h3  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
 </template>
@@ -53,6 +53,8 @@
   
 <script setup>
 import { ref } from 'vue';
+
+const darkMode = ref(true)
 </script>
 
 <script>
@@ -72,20 +74,34 @@ export default {
   padding: 1.25rem 1.875rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-  background-color: #2c2c2c;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
 }
 
 
 .client-name {
   align-self: stretch;
   padding: 1.25rem 0;
-  color: #fff;
   letter-spacing: 5%;
   text-decoration-line: underline;
   font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
 .data-field {
   display: flex;
   flex-direction: row;
@@ -110,11 +126,18 @@ export default {
 }
 
 .label {
-  color: #fff;
   letter-spacing: 5%;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
 .data {
   display: flex;
   flex-direction: row;
@@ -123,11 +146,20 @@ export default {
   border-radius: 0.3125rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
   background-color: #212121;
-  color: #fff;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
 .data#notes {
   align-self: stretch;
 }
@@ -154,11 +186,19 @@ export default {
 }
 
 .area-title {
-  color: #fff;
   letter-spacing: 5%;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+
 .street-address {
   display: flex;
   flex-direction: row;
diff --git a/components/server/ClientQuickAccess.vue b/components/server/ClientQuickAccess.vue
index f4f5225..662cfcd 100644
--- a/components/server/ClientQuickAccess.vue
+++ b/components/server/ClientQuickAccess.vue
@@ -1,12 +1,12 @@
 <template>
-  <section class="quick-access">
-    <h2 class="heading">Quick Access</h2>
+  <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
     <div class="shortcuts">
-      <input type="button" id="maintenance-visits" value="Maintenance Visits">
-      <input type="button" id="production-orders" value="Production Orders">
-      <input type="button" id="issue-slips" value="Assets">
-      <input type="button" id="solutions" value="Solutions">
-      <input type="button" id="issue-slips" value="Issue Slips">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits" value="Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders" value="Production Orders">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Assets">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Issue Slips">
     </div>
   </section>
 </template>
@@ -14,6 +14,8 @@
   
 <script setup>
 import { ref } from 'vue';
+
+const darkMode = ref(true)
 </script>
 
 <script>
@@ -35,16 +37,31 @@ export default {
   gap: 1.25rem;
   border-radius: 0.625rem;
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
   background-color: #2c2c2c;
 }
 
+.section-lightmode {
+  background-color: #fff;
+}
+
+
 .heading {
-  color: #fff;
   letter-spacing: 5%;
   text-decoration-line: underline;
   font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.heading-darkmode {
+  color: #fff;
+}
+
+.heading-lightmode {
+  color: #000;
+}
+
 .shortcuts {
   display: flex;
   flex-direction: row;
@@ -64,10 +81,18 @@ input {
   border-radius: 0.625rem;
   padding: 0.9375rem 1.25rem;
   border: none;
-  color: #fff;
   text-align: center;
   letter-spacing: 5%;
   font: 400 0.875rem/2rem Overpass, sans-serif;
+}
+
+.input-darkmode {
+  color: #fff;
   background-color: #343434;
 }
+
+.input-lightmode {
+  color: #000;
+  background-color: #E4E4E4;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/ClientTable.vue b/components/server/ClientTable.vue
index 25f2931..50b521c 100644
--- a/components/server/ClientTable.vue
+++ b/components/server/ClientTable.vue
@@ -1,17 +1,19 @@
 <template>
-    <div class="data">
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <table class="data-table" id="client-table">
-            <tr class="table-row" id="table-head">
-                <th class="ID">ID</th>
-                <th class="Name">Name</th>
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID
+                </th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
             </tr>
-            <tr class="table-row" id="row-1">
-                <td class="ID">...</td>
-                <td class="Name">...</td>
-            </tr>
-            <tr class="table-row" id="row-2">
-                <td class="ID">...</td>
-                <td class="Name">...</td>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
             </tr>
         </table>
     </div>
@@ -20,6 +22,8 @@
   
 <script setup>
 import { ref } from 'vue';
+
+const darkMode = ref(true)
 </script>
 
 <script>
@@ -29,8 +33,6 @@ export default {
 </script>
   
     
-    
-    
 <style scoped>
 .data {
     display: flex;
@@ -43,9 +45,16 @@ export default {
     gap: 1.25rem;
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
     background-color: #2c2c2c;
 }
 
+.div-lightmode {
+    background-color: #fff;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -56,35 +65,65 @@ export default {
 .table-row {
     display: flex;
     flex-direction: row;
+    align-items: center;
     height: 3.125rem;
     padding: 0.625rem;
     gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
     border-top: 0.0625rem solid #000000;
 }
 
-#table-head {
-    border-top: none;
-    border-bottom: 0.0625rem solid #000000;
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
 }
 
 th,
 td {
     height: 1.875rem;
+    text-align: left;
     padding: 0;
-    color: #ffffff;
     letter-spacing: 5%;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
 
 .ID {
     width: 40%;
+}
+
+.ID-darkmode {
     border-right: 0.0625rem solid #000000;
 }
 
+.ID-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
 .Name {
     width: 60%;
 }
diff --git a/components/server/UserAccount.vue b/components/server/UserAccount.vue
new file mode 100644
index 0000000..d1146f2
--- /dev/null
+++ b/components/server/UserAccount.vue
@@ -0,0 +1,140 @@
+<template>
+    <section :class="['userAccount', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
+        <div class="userData">
+            <div class="data-field" id="email">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">E-Mail:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+            <div class="data-field" id="password">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Password:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">*******</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserAccount",
+};
+</script> 
+    
+    
+<style scoped>
+.userAccount {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 0.625rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.heading {
+    letter-spacing: 5%;
+    font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+    color: #fff;
+}
+
+.heading-lightmode {
+    color: #000;
+}
+
+.userData {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    gap: 0.625rem
+}
+
+.rectangle-container {
+    display: flex;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+    background-color: #212121;
+}
+
+.rectangle-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+    width: 12.5em;
+}
+
+.label {
+    width: 6.25rem;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/UserAppearance.vue b/components/server/UserAppearance.vue
new file mode 100644
index 0000000..e65fae2
--- /dev/null
+++ b/components/server/UserAppearance.vue
@@ -0,0 +1,115 @@
+<template>
+    <section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div class="userData">
+            <div class="data-field" id="mode">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
+                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
+                <Toggle v-model="darkMode" id="toggleAppearance" />
+                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
+            </div>
+            <div class="data-field" id="language">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+import Toggle from '@vueform/toggle'
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserAppearance",
+};
+</script> 
+    
+<style src="@vueform/toggle/themes/default.css"></style>   
+    
+<style scoped>
+.userAppearance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 0.625rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+
+.userData {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    gap: 0.625rem
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+    width: 15.625em;
+}
+
+.label {
+    width: 6.25rem;
+}
+
+.smallLabel {
+    font-size: 0.875em;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/UserProfile.vue b/components/server/UserProfile.vue
new file mode 100644
index 0000000..c866586
--- /dev/null
+++ b/components/server/UserProfile.vue
@@ -0,0 +1,136 @@
+<template>
+    <section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
+        <div class="userData">
+            <div class="rectangle-container">
+                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+            </div>
+            <div class="data-field" id="username">
+                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+            </div>
+        </div>
+    </section>
+</template>
+  
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+  
+<script>
+export default {
+    name: "UserProfile",
+};
+</script> 
+    
+    
+<style scoped>
+.userProfile {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding-left: 1.875rem;
+    padding-right: 1.875rem;
+    padding-top: 1.875rem;
+    padding-bottom: 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.heading {
+    letter-spacing: 5%;
+    font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.heading-darkmode {
+    color: #fff;
+}
+
+.heading-lightmode {
+    color: #000;
+}
+
+.userData {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    gap: 3.125rem
+}
+
+.rectangle-container {
+    display: flex;
+}
+
+.rectangle {
+    width: 6.25em;
+    height: 6.25em;
+    flex: none;
+    order: 0;
+    flex-grow: 0;
+}
+
+.rectangle-darkmode {
+    background-color: #212121;
+}
+
+.rectangle-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0 1.875rem;
+    border-radius: 0.625rem;
+    gap: 1.25rem;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.data {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/UserRightsList.vue b/components/server/UserRightsList.vue
new file mode 100644
index 0000000..5ca3dc4
--- /dev/null
+++ b/components/server/UserRightsList.vue
@@ -0,0 +1,213 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Rights:</div>
+        <table class="data-table" id="user-rights-list">
+            <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                <th
+                    :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                    User</th>
+                <th
+                    :class="['Admin', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                    Admin</th>
+                <th
+                    :class="['Edit-Delete', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                    Edit/Delete</th>
+                <th
+                    :class="['Create', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                    Create</th>
+                <th :class="['View', darkMode ? 'th-darkmode' : 'th-lightmode']">View</th>
+            </tr>
+            <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <td
+                    :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'User-darkmode' : 'User-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Admin', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Admin-darkmode' : 'Admin-lightmode']">
+                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                </td>
+                <td
+                    :class="['Edit-Delete', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Edit-Delete-darkmode' : 'Edit-Delete-lightmode']">
+                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                </td>
+                <td
+                    :class="['Create', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Create-darkmode' : 'Create-lightmode']">
+                    <input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" />
+                </td>
+                <td :class="['View', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+            </tr>
+        </table>
+    </div>
+</template>
+  
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+    name: "UserRightsList",
+};
+</script>  
+        
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    width: 100%;
+    padding: 1.25rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.User {
+    width: 50%;
+}
+
+.User-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.User-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Admin {
+    width: 12.5%;
+}
+
+.Admin-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Admin-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Edit-Delete {
+    width: 12.5%;
+}
+
+.Edit-Delete-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Edit-Delete-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Create {
+    width: 12.5%;
+}
+
+.Create-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Create-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.View {
+    width: 12.5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 7053c3e..e1b2c69 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,7 +1,7 @@
 <template>
   <aside
     :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div class="toggle">
+    <div class="toggleNavbar">
       <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
       </div>
@@ -142,7 +142,7 @@ aside.is-expanded {
 }
 
 
-.toggle {
+.toggleNavbar {
   display: flex;
   flex-direction: row;
   height: 2.5rem;
@@ -237,6 +237,13 @@ a {
   transition: 0.2s ease-out;
 }
 
+.back-darkmode:hover,
+.back-lightmode:hover,
+.indicator-darkmode:hover,
+.indicator-lightmode:hover {
+  cursor: pointer;
+}
+
 
 img {
   width: 1.25rem;
@@ -267,4 +274,5 @@ img {
 
 .label-lightmode {
   color: #000000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9e6bb04..b2f3e2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@vueform/toggle": "^2.1.4",
         "leading-trim": "^1.0.2"
       },
       "devDependencies": {
@@ -2806,6 +2807,11 @@
       "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
       "dev": true
     },
+    "node_modules/@vueform/toggle": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vueform/toggle/-/toggle-2.1.4.tgz",
+      "integrity": "sha512-tEITFf5wlqIWoCYZXJdoXvCnrc97weOu2csR/BEoROVvFu1zRsoK0wY1pJG7BR+g5zpGJneGSdLhMUsbx8y1yw=="
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/package.json b/package.json
index 330c557..83da975 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
+    "@vueform/toggle": "^2.1.4",
     "leading-trim": "^1.0.2"
   }
 }
diff --git a/pages/assets.vue b/pages/assets.vue
index d7a3c50..4a2cceb 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -4,13 +4,15 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <AssetTable />
-      <AssetTableNoClient />
-      <Asset />
-      <HardwareSpecifications />
-      <SoftwareSpecifications />
-      <NetworkSpecifications />
+      <ClientSearch v-if="onAssetlist || onCustomerAssetlist"/>
+      <AssetTable v-if="onAssetlist"/>
+      <AssetTableNoClient v-if="onCustomerAssetlist"/>
+      <Asset v-if="onAsset"/>
+      <HardwareSpecifications v-if="onAsset"/>
+      <SoftwareSpecifications v-if="onAsset"/>
+      <NetworkSpecifications v-if="onAsset"/>
+      <AssetSearch v-if="onSolutionlistAsset"/>
+      <AssetSolutionList v-if="onSolutionlistAsset"/>
     </div>
   </section>
 </template>
@@ -26,12 +28,20 @@ import Asset from "../components/server/Asset.vue";
 import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
 import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
+import AssetSearch from "../components/AssetSearch.vue";
+import AssetSolutionList from "../components/server/AssetSolutionList.vue";
 
 definePageMeta({
   layout: 'default'
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onAssetlist = ref(true)
+const onCustomerAssetlist = ref(false)
+const onAsset = ref(false)
+const onSolutionlistAsset = ref(false)
 </script>
 
 <script>
diff --git a/pages/clients.vue b/pages/clients.vue
index d9c357c..8062b2e 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -4,8 +4,9 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Clients</h1>
     </div>
     <div id="content-body">
-      <Client />
-      <ClientQuickAccess />
+      <ClientTable v-if="onCustomerlist"/>
+      <Client v-if="onCustomer"/>
+      <ClientQuickAccess v-if="onCustomer"/>
     </div>
   </section>
 </template>
@@ -25,6 +26,10 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onCustomerlist = ref(true)
+const onCustomer = ref(true)
 </script>
 
 <script>
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index d69d169..0cac0e8 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -25,12 +25,12 @@
       </router-link>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <IssueSlipTable />
-      <IssueSlipTableNoClient />
-      <IssueSlip />
-      <OrderingInformation />
-      <Accounting />
+      <ClientSearch v-if="onIssueSliplist || onCustomerIssueSliplist"/>
+      <IssueSlipTable v-if="onIssueSliplist"/>
+      <IssueSlipTableNoClient v-if="onCustomerIssueSliplist"/>
+      <IssueSlip v-if="onIssueSlip"/>
+      <OrderingInformation v-if="onIssueSlip"/>
+      <Accounting v-if="onIssueSlip"/>
     </div>
   </section>
 </template>
@@ -51,6 +51,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onIssueSliplist = ref(true)
+const onCustomerIssueSliplist = ref(false)
+const onIssueSlip = ref(false)
 </script>
   
 <script>
@@ -92,6 +97,7 @@ export default {
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
     sans-serif;
+  text-decoration: none;
 }
 
 #active-page-name {
diff --git a/pages/issues.vue b/pages/issues.vue
index 3873068..bca2ca5 100644
--- a/pages/issues.vue
+++ b/pages/issues.vue
@@ -25,10 +25,10 @@
             </router-link>
         </div>
         <div id="content-body">
-            <IssueTable />
-            <Issue />
-            <IssueVariants />
-            <IssueVariant />
+            <IssueTable v-if="onIssueItemList"/>
+            <Issue v-if="onIssueItem"/>
+            <IssueVariants v-if="onIssueItem"/>
+            <IssueVariant v-if="onIssueItemVariant"/>
         </div>
     </section>
 </template>
@@ -47,6 +47,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onIssueItem = ref(false)
+const onIssueItemList = ref(true)
+const onIssueItemVariant = ref(false)
 </script>
   
 <script>
@@ -88,6 +93,7 @@ export default {
     letter-spacing: 5%;
     font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
         sans-serif;
+    text-decoration: none;
 }
 
 #active-page-name {
@@ -98,7 +104,7 @@ export default {
 }
 
 .button {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .h1-darkmode {
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index f0169f2..c7a1d0f 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -25,15 +25,15 @@
       </router-link>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <MaintenanceVisitsTemplateTable />
-      <MaintenanceVisitsTemplateTableNoClient />
-      <MaintenanceVisitsTemplate />
-      <TemplateChecklist />
-      <TemplateSearch />
-      <MaintenanceVisitsInstanceTable />
-      <MaintenanceVisitsInstance />
-      <InstanceChecklist />
+      <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+      <MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
+      <MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
+      <MaintenanceVisitsTemplate v-if="onTemplate"/>
+      <TemplateChecklist v-if="onTemplate"/>
+      <TemplateSearch v-if="onInstancelist"/>
+      <MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
+      <MaintenanceVisitsInstance v-if="onInstance"/>
+      <InstanceChecklist v-if="onInstance"/>
     </div>
   </section>
 </template>
@@ -57,6 +57,13 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onTemplatelist = ref(true)
+const onCustomerTemplatelist = ref(false)
+const onTemplate = ref(false)
+const onInstancelist = ref(false)
+const onInstance = ref(false)
 </script>
     
 <script>
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index 252ed99..fc0e3fb 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -25,15 +25,15 @@
             </router-link>
         </div>
         <div id="content-body">
-            <ClientSearch />
-            <ProductionOrdersTemplateTable />
-            <ProductionOrdersTemplateTableNoClient />
-            <ProductionOrdersTemplate />
-            <TemplateChecklist />
-            <TemplateSearch />
-            <ProductionOrdersInstanceTable />
-            <ProductionOrdersInstance />
-            <InstanceChecklist />
+            <ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+            <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
+            <ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist"/>
+            <ProductionOrdersTemplate v-if="onTemplate"/>
+            <TemplateChecklist v-if="onTemplate"/>
+            <TemplateSearch v-if="onInstancelist"/>
+            <ProductionOrdersInstanceTable v-if="onInstancelist"/>
+            <ProductionOrdersInstance v-if="onInstance"/>
+            <InstanceChecklist v-if="onInstance"/>
         </div>
     </section>
 </template>
@@ -57,6 +57,13 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onTemplatelist = ref(true)
+const onCustomerTemplatelist = ref(false)
+const onTemplate = ref(false)
+const onInstancelist = ref(false)
+const onInstance = ref(false)
 </script>
   
 <script>
diff --git a/pages/settings.vue b/pages/settings.vue
new file mode 100644
index 0000000..7017ac6
--- /dev/null
+++ b/pages/settings.vue
@@ -0,0 +1,175 @@
+<template>
+    <section id="content">
+        <div id="content-header">
+            <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
+        </div>
+        <div id="content-body">
+            <div class="buttonOptions">
+                <input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !accountSelected) ? 'input-darkmode' : '',
+                (!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
+                    @click="ActivateAccount">
+                <input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !appearanceSelected) ? 'input-darkmode' : '',
+                (!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
+                    value="Appearance" @click="ActivateAppearance">
+                <input :class="[(darkMode && usersSelected) ? 'selected-input-darkmode' : '',
+                (darkMode && !usersSelected) ? 'input-darkmode' : '',
+                (!darkMode && usersSelected) ? 'selected-input-lightmode' : '',
+                (!darkMode && !usersSelected) ? 'input-lightmode' : '',]" type="button" id="users" value="Users"
+                    @click="ActivateUsers">
+            </div>
+            <UserProfile v-if="accountSelected"/>
+            <UserAccount v-if="accountSelected"/>
+            <UserAppearance v-if="appearanceSelected"/>
+            <UserRightsList v-if="usersSelected"/>
+        </div>
+    </section>
+</template>
+    
+    
+<script setup>
+import { ref } from 'vue';
+
+import UserProfile from "../components/server/UserProfile.vue";
+import UserAccount from "../components/server/UserAccount.vue";
+import UserAppearance from "../components/server/UserAppearance.vue";
+import UserRightsList from "../components/server/UserRightsList.vue";
+
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+
+const accountSelected = ref(true)
+const appearanceSelected = ref(false)
+const usersSelected = ref(false)
+
+// fuctions to change the option button
+const ActivateAccount = () => {
+    accountSelected.value = true;
+    appearanceSelected.value = false;
+    usersSelected.value = false;
+};
+const ActivateAppearance = () => {
+    accountSelected.value = false;
+    appearanceSelected.value = true;
+    usersSelected.value = false;
+};
+const ActivateUsers = () => {
+    accountSelected.value = false;
+    appearanceSelected.value = false;
+    usersSelected.value = true;
+};
+</script>
+  
+<script>
+export default {
+    name: "SettingsPage",
+}
+</script>   
+      
+      
+<style>
+* {
+    box-sizing: border-box;
+}
+
+#content {
+    display: flex;
+    flex-direction: column;
+    float: left;
+    justify-content: stretch;
+    align-items: stretch;
+    width: 100%;
+    flex-grow: 1;
+    gap: 0.625rem;
+    padding: 0 1.25rem;
+}
+
+#content-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 3.125rem;
+}
+
+#page-name {
+    letter-spacing: 5%;
+    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
+    text-decoration: underline;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+#content-body {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 1.25rem;
+    margin-bottom: 0.625rem;
+    border-radius: 0.625rem;
+}
+
+.buttonOptions {
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+}
+
+input#account,
+input#appearance,
+input#users {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 12.5rem;
+    height: 2.5rem;
+    border-radius: 0.625rem;
+    border: none;
+    text-align: center;
+    letter-spacing: 5%;
+    font: 400 0.875rem/2rem Overpass, sans-serif;
+    margin-right: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.input-darkmode {
+    color: #fff;
+    background-color: #2c2c2c;
+}
+
+.selected-input-darkmode {
+    color: #fff;
+    background-color: #454545;
+}
+
+.input-lightmode {
+    color: #000;
+    background-color: #E4E4E4;
+}
+
+.selected-input-lightmode {
+    color: #000;
+    background-color: #D9D9D9;
+}
+
+.input-darkmode:hover,
+.input-lightmode:hover,
+.selected-input-darkmode:hover,
+.selected-input-lightmode:hover {
+    cursor: pointer;
+}
+</style>
\ No newline at end of file
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 8d8d168..c8068f3 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -4,11 +4,11 @@
       <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
     </div>
     <div id="content-body">
-      <ClientSearch />
-      <SolutionTable />
-      <SolutionTableNoClient />
-      <Solution />
-      <SolutionChecklist />
+      <ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
+      <SolutionTable v-if="onSolutionlist"/>
+      <SolutionTableNoClient v-if="onCustomerSolutionlist"/>
+      <Solution v-if="onSolution"/>
+      <SolutionChecklist v-if="onSolution"/>
     </div>
   </section>
 </template>
@@ -28,6 +28,11 @@ definePageMeta({
 })
 
 const darkMode = ref(true)
+
+// to render the right components
+const onSolutionlist = ref(true)
+const onCustomerSolutionlist = ref(false)
+const onSolution = ref(false)
 </script>
 
 <script>
diff --git a/routerFrontend/index.js b/routerFrontend/index.js
index feed17d..36b4724 100644
--- a/routerFrontend/index.js
+++ b/routerFrontend/index.js
@@ -8,6 +8,7 @@ import IssueSlipPage from '../pages/issueSlips.vue';
 import IssuesPages from '../pages/issues.vue';
 import MaintenanceVisitsPage from '../pages/maintenanceVisits.vue';
 import ProductionOrdersPage from '../pages/productionOrders.vue';
+import SettingsPage from '../pages/settings.vue';
 
 const router = createRouter({
     history: createWebHistory(),
@@ -47,6 +48,10 @@ const router = createRouter({
         {
             path: '/clients',
             component: ClientsPage
+        },  
+        {
+            path: '/settings',
+            component: SettingsPage
         },         
     ]
 })