diff --git a/backend/controller/users.js b/backend/controller/users.js
index 1bd09c4..b03806e 100644
--- a/backend/controller/users.js
+++ b/backend/controller/users.js
@@ -10,6 +10,7 @@ import {
     getUserById,
     updateUserById,
     deleteUserById,
+    getSelectedUsersByUser,
 } from "../models/usersModel.js";
 
 //insert user to databased
@@ -40,7 +41,7 @@ export const signUp = async (req, res, next) => {
                         minute: '2-digit'
                     };
                     const dateTimeString = currentTime.toLocaleString('de-DE', options);
-                    const results = ownConn.query(`INSERT INTO users(id, username, password, registered, fullName, email, phonenumber, address, city, postcode, adminBool, technician1Bool, technician2Bool, technicianMonitoringBool, merchantBool, internBool) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+                    const results = ownConn.query(`INSERT INTO users(id, username, password, registered, fullName, email, phonenumber, address, city, postcode, adminBool, technicianBool, readerBool, darkModeBool) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
                         [
                             uuidv4(),
                             req.body.username,
@@ -53,11 +54,9 @@ export const signUp = async (req, res, next) => {
                             req.body.city,
                             req.body.postcode,
                             req.body.adminBool,
-                            req.body.technician1Bool,
-                            req.body.technician2Bool,
-                            req.body.technicianMonitoringBool,
-                            req.body.merchantBool,
-                            req.body.internBool,
+                            req.body.technicianBool,
+                            req.body.readerBool,
+                            req.body.darkModeBool,
                         ]);
                     return res.status(201).send({
                         message: "Registered!",
@@ -73,6 +72,32 @@ export const signUp = async (req, res, next) => {
     }
 };
 
+// Update user password to Database
+export const updatePasswordById = async (req, res, next) => {
+    try {
+        const id = req.body.id;
+        let sql = `UPDATE users SET password = ? WHERE id = ?`;
+        bcrypt.hash(req.body.password, 10, async (err, hash) => {
+            if (err) {
+                throw err;
+                return res.status(500).send({
+                    message: err,
+                });
+            } else {
+                const results = await ownConn.query(sql, [hash, id]);
+                return res.status(200).send({
+                    message: 'Password changed!',
+                });
+            }
+        });
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 export const login = async (req, res, next) => {
     try {
         let sql = `SELECT * FROM users WHERE username = ?`;
@@ -161,6 +186,18 @@ export const showUserById = (req, res) => {
     });
 };
 
+//get all selected users by user
+export const showSelectedUsersByUser = (req, res) => {
+    getSelectedUsersByUser(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
+
 // Update user
 export const updateUser = (req, res) => {
     const data = req.body;
diff --git a/backend/middleware/users.js b/backend/middleware/users.js
index 608006c..fe128c6 100644
--- a/backend/middleware/users.js
+++ b/backend/middleware/users.js
@@ -38,10 +38,7 @@ export const validateRegister = (req, res, next) => {
         });
     }
     // password (repeat) must match
-    if (
-        !req.body.password_repeat ||
-        req.body.password != req.body.password_repeat
-    ) {
+    if (req.body.password != req.body.password_repeat) {
         return res.status(400).send({
             message: 'Both passwords must match',
         });
diff --git a/backend/models/usersModel.js b/backend/models/usersModel.js
index 88dd055..321acaf 100644
--- a/backend/models/usersModel.js
+++ b/backend/models/usersModel.js
@@ -28,12 +28,11 @@ export const getUserById = async (id, result) => {
     }
 };
 
-// Update user to Database
-export const updateUserById = async (data, result) => {
+//get all selected users by full name
+export const getSelectedUsersByUser = async (selected, result) => {
     try {
-        const id = data.id;
-        let sql = `UPDATE users SET username = ?, password = ?, fullName = ?, email = ?, phonenumber = ?, address = ?, city = ?, postcode = ?, adminBool = ?, technician1Bool = ?, technician2Bool = ?, technicianMonitoringBool = ?, merchantBool = ?, internBool = ? WHERE id = ?`;
-        const results = await ownConn.query(sql, [data.username, data.password, data.fullName, data.email, data.phonenumber, data.address, data.city, data.postcode, data.adminBool, data.technician1Bool, data.technician2Bool, data.technicianMonitoringBool, data.merchantBool, data.internBool, id]);
+        let sql = `SELECT * FROM users WHERE LOWER(fullName) LIKE '%${selected.toLowerCase()}%' ORDER BY fullName ASC`;
+        const results = await ownConn.execute(sql)
         result(null, results);
     }
     catch (err) {
@@ -43,12 +42,28 @@ export const updateUserById = async (data, result) => {
     }
 };
 
+// Update user to Database
+export const updateUserById = async (data, result) => {
+    try {
+        const id = data.id;
+        let sql = `UPDATE users SET username = ?, fullName = ?, email = ?, phonenumber = ?, address = ?, city = ?, postcode = ?, adminBool = ?, technicianBool = ?, readerBool = ?, darkModeBool = ? WHERE id = ?`;
+        const results = await ownConn.query(sql, [data.username, data.fullName, data.email, data.phonenumber, data.address, data.city, data.postcode, data.adminBool, data.technicianBool, data.readerBool, data.darkModeBool, id]);
+        results.insertId = results.insertId.toString();
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
 
 // Delete user to Database
 export const deleteUserById = async (id, result) => {
     try {
         let sql = `DELETE FROM users WHERE id = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
diff --git a/backend/routes/routes.js b/backend/routes/routes.js
index 34b52c5..05fbf96 100644
--- a/backend/routes/routes.js
+++ b/backend/routes/routes.js
@@ -108,11 +108,13 @@ import {
 
 import {
     signUp,
+    updatePasswordById,
     login,
     showUsers,
     showUserById,
     updateUser,
     deleteUser,
+    showSelectedUsersByUser,
 } from "../controller/users.js";
 
 import * as userMiddleware from "../middleware/users.js";
@@ -602,12 +604,18 @@ router.delete("/issueVariantsByIssueSlipId/:id", deleteIssueVariantByIssueSlipId
 // sign-up process
 router.post('/signUp', userMiddleware.validateRegister, signUp);
 
+// update password process
+router.put('/updatePassword', updatePasswordById);
+
 // login process
 router.post('/login', login);
 
 // get all users
 router.get("/users", showUsers);
 
+// get all users by user
+router.get("/selectedUsersByUser/:id", showSelectedUsersByUser)
+
 //get user by id
 router.get("/user/:id", showUserById);
 
diff --git a/components/AssetSearch.vue b/components/AssetSearch.vue
index 61ee3b8..bc4fc34 100644
--- a/components/AssetSearch.vue
+++ b/components/AssetSearch.vue
@@ -4,20 +4,22 @@
         <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ asset.assetName }}</pre>
     </section>
 </template>
-    
-    
+
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 
 const asset = ref({});
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // get config item from id
 const getItemById = async () => {
@@ -31,19 +33,38 @@ const getItemById = async () => {
     }
 }
 
-onMounted(() => {
-    getItemById();
-});
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getItemById();
+});
 </script>
-  
+
 <script>
 export default {
     name: "AssetSearch",
 };
-</script> 
-  
-    
+</script>
+
+
 <style scoped>
 .asset-search {
     display: flex;
@@ -103,5 +124,4 @@ export default {
     background-color: #EBEBEB;
     color: #000;
 }
-</style>
-    
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/components/CustomerSearch.vue b/components/CustomerSearch.vue
index e815ca9..01c34d6 100644
--- a/components/CustomerSearch.vue
+++ b/components/CustomerSearch.vue
@@ -9,16 +9,18 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const filtered = computed(() => store.state.filtered);
 const filteredTerm = computed(() => store.state.filteredByCustomer);
 const customerFilter = ref(store.state.filteredByCustomer);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // update filtered term
 const updateFilterTerm = () => {
@@ -39,6 +41,29 @@ const filterList = () => {
 
 watch(filteredTerm, updateFilterTerm)
 watch(filtered, checkFiltered)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
diff --git a/components/Dashboard.vue b/components/Dashboard.vue
index 53c25a5..70afc58 100644
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@@ -6,7 +6,8 @@
         value="My Maintenance Visits">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
         value="My Production Orders">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
+        value="My Solutions">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
         value="My Issue Slips">
     </div>
@@ -15,18 +16,50 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+const modeChangedLocalstorage = computed(() => store.state.modeDashboard);
+const darkMode = ref('');
+
+const getSession = async () => {
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeDashboardChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+watch(modeChangedLocalstorage, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "Dashboard",
 };
-</script> 
-  
-  
+</script>
+
+
 <style scoped>
 .dashboard {
   display: flex;
diff --git a/components/EmployeeSearch.vue b/components/EmployeeSearch.vue
new file mode 100644
index 0000000..65b59d3
--- /dev/null
+++ b/components/EmployeeSearch.vue
@@ -0,0 +1,153 @@
+<template>
+  <section :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employee</div>
+    <pre v-if="!filtered"
+      :class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ employeeFilter }}</pre>
+    <input v-if="filtered" v-model="employeeFilter" @change="filterList()"
+      :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
+  </section>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const filtered = computed(() => store.state.filtered);
+const filteredTerm = computed(() => store.state.filteredByCustomer);
+const employeeFilter = ref(store.state.filteredByCustomer);
+
+const darkMode = ref('');
+
+// update filtered term
+const updateFilterTerm = () => {
+  employeeFilter.value = filteredTerm.value
+}
+
+const checkFiltered = () => {
+  if (!filtered.value) {
+    employeeFilter.value = ''
+    filterList();
+  }
+}
+
+// update the filtered term in the store
+const filterList = () => {
+  store.commit('updateFilterbyCustomer', employeeFilter.value);
+}
+
+watch(filteredTerm, updateFilterTerm)
+watch(filtered, checkFiltered)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
+</script>
+
+<script>
+export default {
+  name: "EmployeeSearch",
+};
+</script>
+
+<style scoped>
+.employee-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: 2.5625em;
+  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;
+}
+
+.input-customer {
+  border: none;
+  margin-left: 1rem;
+}
+
+.pre-customer {
+  margin-left: 1rem;
+}
+
+.data-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.data-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>
\ No newline at end of file
diff --git a/components/IssueStateSearch.vue b/components/IssueStateSearch.vue
index 3550a00..63d792c 100644
--- a/components/IssueStateSearch.vue
+++ b/components/IssueStateSearch.vue
@@ -9,16 +9,18 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const filtered = computed(() => store.state.filtered);
 const filteredTerm = computed(() => store.state.filteredByCustomer);
 const issueStateFilter = ref(store.state.filteredByCustomer);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // update filtered term
 const updateFilterTerm = () => {
@@ -39,6 +41,29 @@ const filterList = () => {
 
 watch(filteredTerm, updateFilterTerm)
 watch(filtered, checkFiltered)
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
index a3c7fe2..872201d 100644
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@@ -26,8 +26,11 @@
           <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
         </label>
         <div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
-          <input type="text" id="password-input" placeholder="*******">
-          <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
+          <input :type="showPassword ? 'text' : 'password'" id="password-input" placeholder="*******">
+          <input v-if="!showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+            id="show-password-toggle" value="Show" @click="togglePasswordVisibility">
+          <input v-if="showPassword" type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+            id="show-password-toggle" value="Hide" @click="togglePasswordVisibility">
         </div>
       </div>
     </div>
@@ -37,24 +40,42 @@
       </label>
     </div>
     <div class="buttons">
-      <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
-      <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
+      <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
+        @click="handleLogin">
+      <!-- <input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup"> -->
     </div>
   </form>
 </template>
 
 <script setup>
-import { useRouter } from 'vue-router';
-import { ref } from 'vue';
+// import { useRouter } from 'vue-router';
+import { ref, onBeforeUnmount, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../clientsideConfig.js';
+import { useStore } from 'vuex';
+
+const store = useStore();
 
 const { signIn } = useAuth()
-const router = useRouter();
+// const router = useRouter();
 const darkMode = ref(true);
 const isError = ref(false);
+const showPassword = ref(false);
 const errorMsg = ref('');
 
+function setItem(item, value) {
+  if (process.client) {
+    localStorage.setItem(item, value)
+    return true
+  } else {
+    return false
+  }
+}
+
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value;
+}
+
 const handleLogin = async () => {
   isError.value = false;
   errorMsg.value = '';
@@ -82,69 +103,128 @@ const handleLogin = async () => {
 
     // sucessfully logged in
     router.push('/home')*/
-    let res = await signIn( credentials, { callbackUrl: '/home' })
-    // console.log("res", res)
-
+    let resBody = await signIn(credentials, { callbackUrl: '/home' })
+    // let resBody = await signIn(credentials, { callbackUrl: await delayRedirect(callbackUrl, delayInSeconds * 1000) });
+    try {
+      const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`);
+      setItem('logged-in-bool', true);
+      setItem('logged-in-user-id', response.data.id)
+      setItem('logged-in-user-username', response.data.username)
+      setItem('logged-in-user-registered', response.data.registered)
+      setItem('logged-in-user-lastLogin', response.data.lastLogin)
+      setItem('logged-in-user-fullName', response.data.fullName)
+      setItem('logged-in-user-email', response.data.email)
+      setItem('logged-in-user-phonenumber', response.data.phonenumber)
+      setItem('logged-in-user-address', response.data.address)
+      setItem('logged-in-user-city', response.data.city)
+      setItem('logged-in-user-postcode', response.data.postcode)
+      setItem('logged-in-user-adminBool', response.data.adminBool)
+      setItem('logged-in-user-technicianBool', response.data.technicianBool)
+      setItem('logged-in-user-readerBool', response.data.readerBool)
+      setItem('logged-in-user-darkMode', response.data.darkModeBool)
+      store.commit('setLocalStorageChanged');
+      store.commit('setModeChanged');
+      store.commit('setModeQuickAccessChanged');
+      store.commit('setModeDashboardChanged');
+      store.commit('setModeNavbarChanged');
+      store.commit('setModeLayoutChanged');
+    } catch (err) {
+      console.log(err.response.statusText);
+    }
   } catch (err) {
     // handle the error 
-    console.log(err.response.statusText)
     isError.value = true;
-    errorMsg.value = err.response.statusText;
+    errorMsg.value = 'Username or password is incorrect.';
+    document.getElementById('password-input').value = '';
   }
 }
 
-const testFunctionSignup = async () => {
-  isError.value = false;
-  errorMsg.value = '';
+// const testFunctionSignup = async () => {
+//   isError.value = false;
+//   errorMsg.value = '';
 
-  const username = 'adm_tueit'
-  const password = 'SvF=?bfEx7_hV,cMEu4m'
-  const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
-  const fullName = 'administrator'
-  const email = 'support@tueit.de'
-  const phonenumber = ''
-  const address = ''
-  const city = ''
-  const postcode = ''
-  const adminBool = true
-  const technician1Bool = false
-  const technician2Bool = false
-  const technicianMonitoringBool = false
-  const merchantBool = false
-  const internBool = true
+//   const username = 'adm_tueit'
+//   const password = 'SvF=?bfEx7_hV,cMEu4m'
+//   const password_repeat = 'SvF=?bfEx7_hV,cMEu4m'
+//   const fullName = 'administrator'
+//   const email = 'support@tueit.de'
+//   const phonenumber = ''
+//   const address = ''
+//   const city = ''
+//   const postcode = ''
+//   const adminBool = true
+//   const technician1Bool = false
+//   const technician2Bool = false
+//   const technicianMonitoringBool = false
+//   const merchantBool = false
+//   const internBool = true
 
-  const requestBody = {
-    username: username,
-    password: password,
-    password_repeat: password_repeat,
-    fullName: fullName,
-    email: email,
-    phonenumber: phonenumber,
-    address: address,
-    city: city,
-    postcode: postcode,
-    adminBool: adminBool,
-    technician1Bool: technician1Bool,
-    technician2Bool: technician2Bool,
-    technicianMonitoringBool: technicianMonitoringBool,
-    merchantBool: merchantBool,
-    internBool: internBool,
-  }
+//   const requestBody = {
+//     username: username,
+//     password: password,
+//     password_repeat: password_repeat,
+//     fullName: fullName,
+//     email: email,
+//     phonenumber: phonenumber,
+//     address: address,
+//     city: city,
+//     postcode: postcode,
+//     adminBool: adminBool,
+//     technician1Bool: technician1Bool,
+//     technician2Bool: technician2Bool,
+//     technicianMonitoringBool: technicianMonitoringBool,
+//     merchantBool: merchantBool,
+//     internBool: internBool,
+//   }
 
-  try {
+//   try {
 
-    let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
+//     let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`, requestBody);
 
-    // something to do with the res?
-    // console.log(res)
+//     // something to do with the res?
+//     // console.log(res)
 
-  } catch (err) {
-    // handle the error 
-    console.log(err.response.statusText)
-    isError.value = true;
-    errorMsg.value = err.response.statusText;
+//   } catch (err) {
+//     // handle the error 
+//     console.log(err.response.statusText)
+//     isError.value = true;
+//     errorMsg.value = err.response.statusText;
+//   }
+// }
+
+const getSession = async () => {
+  // const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  // if (loggedInUserDarkModeBool == 1) {
+  //   darkMode.value = true;
+  // } else {
+  //   darkMode.value = false;
+  // }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
   }
 }
+
+onMounted(() => {
+  getSession();
+  document.addEventListener('keyup', handleKeyUp);
+  document.getElementById('username-input').value = '';
+  document.getElementById('password-input').value = '';
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keyup', handleKeyUp);
+});
+
+const handleKeyUp = (event) => {
+  if (event.key === 'Enter') {
+    handleLogin();
+  }
+};
 </script>
 
 <script>
@@ -157,8 +237,8 @@ export default {
     }
   }
 }
-</script> 
-  
+</script>
+
 
 <style scoped>
 * {
@@ -178,10 +258,12 @@ export default {
   padding: 2.5rem 1.875rem;
   gap: 1.875rem;
 }
+
 .form-darkmode {
   border: 0.0625rem solid #000;
   background-color: #2c2c2c;
 }
+
 .form-lightmode {
   border: 0.0625rem solid #8e8e8e;
   background-color: #fff;
@@ -202,6 +284,7 @@ export default {
   width: 3.125rem;
   height: 3.125rem;
 }
+
 .title-icon>img {
   width: 3.125rem;
   height: 3.125rem;
@@ -210,14 +293,24 @@ export default {
   overflow: hidden;
 }
 
+#show-password-toggle:hover {
+  cursor: pointer;
+}
+
 .title {
   margin: 0;
   letter-spacing: 0.05rem;
   white-space: nowrap;
   font: 400 1.875rem/1.875rem Overpass, sans-serif;
 }
-.title-darkmode { color: #ffffff; }
-.title-lightmode {  color: #000000; }
+
+.title-darkmode {
+  color: #ffffff;
+}
+
+.title-lightmode {
+  color: #000000;
+}
 
 
 
@@ -259,28 +352,43 @@ label {
   width: 1.875rem;
   height: 1.875rem;
 }
+
 .icon>img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
 }
+
 #username-icon>img {
   width: auto;
   height: 0.9375rem;
-} 
+}
+
 #password-icon>img {
   width: 0.9375rem;
   height: auto;
 }
-.icon-darkmode>img { filter: invert(100%); } 
-.icon-lightmode>img { filter: invert(0%); } 
+
+.icon-darkmode>img {
+  filter: invert(100%);
+}
+
+.icon-lightmode>img {
+  filter: invert(0%);
+}
 
 .label {
   letter-spacing: 0.02rem;
   font: 400 0.9375rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; } 
-.label-lightmode { color: #000000; }
+
+.label-darkmode {
+  color: #ffffff;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 .input-field {
   display: flex;
@@ -293,11 +401,18 @@ label {
   border-radius: 0.3125rem;
   padding: 0.1875rem 0.625rem;
   box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-} 
-.input-darkmode { background-color: #212121; } 
-.input-lightmode { background-color: #EBEBEB; }
+}
 
-input[type=text] {
+.input-darkmode {
+  background-color: #212121;
+}
+
+.input-lightmode {
+  background-color: #EBEBEB;
+}
+
+input[type=text],
+input[type=password] {
   width: 100%;
   height: 100%;
   background-color: #00000000;
@@ -360,6 +475,12 @@ input[type=button] {
   white-space: nowrap;
   font: 600 1.125rem/1.875rem Overpass, sans-serif;
 }
-.button-darkmode { color: #ffffff; } 
-.button-lightmode { color: #000000; }
+
+.button-darkmode {
+  color: #ffffff;
+}
+
+.button-lightmode {
+  color: #000000;
+}
 </style>
\ No newline at end of file
diff --git a/components/QuickAccess.vue b/components/QuickAccess.vue
index 790f614..cac2349 100644
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@@ -13,16 +13,49 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+const modeChangedLocalstorage = computed(() => store.state.modeQuickAccess);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeQuickAccessChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+watch(modeChangedLocalstorage, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "QuickAccess",
 };
-</script> 
+</script>
 
 
 <style scoped>
diff --git a/components/TemplateSearch.vue b/components/TemplateSearch.vue
index cf23c40..8daa560 100644
--- a/components/TemplateSearch.vue
+++ b/components/TemplateSearch.vue
@@ -4,21 +4,49 @@
     <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
   </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "TemplateSearch",
 };
-</script> 
+</script>
+
 
-  
 <style scoped>
 .template-search {
   display: flex;
@@ -78,5 +106,4 @@ export default {
   background-color: #EBEBEB;
   color: #000;
 }
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/components/server/Accounting.vue b/components/server/Accounting.vue
index 0761593..9225982 100644
--- a/components/server/Accounting.vue
+++ b/components/server/Accounting.vue
@@ -350,13 +350,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
 const addBool = computed(() => store.state.new);
@@ -388,7 +390,7 @@ const newIngressBillDate = ref('');
 const newEgressDate = ref('');
 const newEgressBillDate = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const issueSlip = ref({});
 
 // get issue slip from id
@@ -545,7 +547,27 @@ const addIssueSlip = async () => {
     }
 }
 
-onMounted(() => {
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
     getIssueSlipById();
 });
 </script>
diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index 9450fc9..21dfba7 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -1,7 +1,7 @@
 <template>
     <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
-            item.assetName }}</h2>
+        item.assetName }}</h2>
         <input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
             :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
@@ -144,7 +144,7 @@
         </div>
     </section>
 </template>
-    
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -153,12 +153,15 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const item = ref({});
 const customer = ref({});
 const configItems = ref([]);
@@ -331,11 +334,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteAsset);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getItemById();
-    getConfigItems();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteAsset);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+    await getItemById();
+    triggerBackendCallsWithDelay(getConfigItems);
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
@@ -345,8 +367,8 @@ export default {
     name: "Asset",
 }
 </script>
-      
-      
+
+
 <style scoped>
 .information {
     display: flex;
diff --git a/components/server/AssetSolutionList.vue b/components/server/AssetSolutionList.vue
index 6762a18..ac783e2 100644
--- a/components/server/AssetSolutionList.vue
+++ b/components/server/AssetSolutionList.vue
@@ -24,7 +24,7 @@
                     <td
                         :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
                         <nuxt-link to="/solutions" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenSolution(sol.primaryID)">
                             {{ sol.solutionName }}
                         </nuxt-link>
@@ -45,6 +45,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
@@ -55,7 +57,7 @@ const asset = ref({});
 const solutions = ref([]);
 const solutionsBySol = ref([]);
 const solutionsByType = ref([]);
-const darkMode = ref(true)
+const darkMode = ref('')
 
 //get all solutions from the chosen asset
 const getSolutions = async () => {
@@ -114,18 +116,18 @@ const searchSolution = async () => {
 
 //get all solutions based on the searched solution name
 const filterSolutionByType = async () => {
-        if (typeSearchFilter.value === '') {
-            await getSolutions();
-        } else {
-            try {
-                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
-                solutionsByType.value = response.data;
-                solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
-            } catch (err) {
-                console.log(err.response.statusText);
-            }
+    if (typeSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
+            solutionsByType.value = response.data;
+            solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
+        } catch (err) {
+            console.log(err.response.statusText);
         }
     }
+}
 
 const filterObjectsWithMatchingIds = (arr1, arr2) => {
     return arr1.filter(obj1 => {
@@ -136,7 +138,27 @@ const filterObjectsWithMatchingIds = (arr1, arr2) => {
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
 
-onMounted(() => {
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
     getItemById();
 });
 </script>
@@ -181,6 +203,14 @@ export default {
     letter-spacing: 0.05em;
 }
 
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -244,7 +274,6 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
-    color: white;
 }
 
 .tr-head-darkmode {
diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue
index 046a593..f2e5432 100644
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@@ -32,7 +32,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/assets" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenAsset(item.primaryID)">
                             {{ item.assetName }}
                         </nuxt-link>
@@ -49,7 +49,7 @@
         </table>
     </div>
 </template>
-  
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -59,6 +59,9 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
@@ -67,7 +70,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const assetSearchable = computed(() => store.state.searchable);
 
 const assetSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('')
 const configItemList = ref([]);
 
 // update search term
@@ -114,10 +117,29 @@ const searchConfigItem = async () => {
     }
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 watch(customerFilter, getConfigItems);
 watch(assetSearchable, updateSearchTerm);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    await getSession();
     await getConfigItems();
 });
 </script>
@@ -126,9 +148,9 @@ onMounted(async () => {
 export default {
     name: "AssetTable",
 };
-</script>    
-    
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
@@ -336,6 +358,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>
diff --git a/components/server/AssetTableNoCustomer.vue b/components/server/AssetTableNoCustomer.vue
deleted file mode 100644
index 3d04857..0000000
--- a/components/server/AssetTableNoCustomer.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
-        <table class="data-table" id="asset-table-no-customer">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        Name</th>
-                    <th
-                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        Type</th>
-                    <th
-                        :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        State</th>
-                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "AssetTableNoCustomer",
-};
-</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-darkmode,
-.td-darkmode {
-    color: #ffffff;
-}
-
-.th-lightmode,
-.td-lightmode {
-    color: #000;
-}
-
-th {
-    font: 700 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-
-.Name {
-    width: 50%;
-}
-
-.Name-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Name-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Type {
-    width: 20%;
-}
-
-.Type-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Type-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.State {
-    width: 20%;
-}
-
-.State-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.State-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.User {
-    width: 10%;
-}
-
-.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/Customer.vue b/components/server/Customer.vue
index 9a78c59..c85b37a 100644
--- a/components/server/Customer.vue
+++ b/components/server/Customer.vue
@@ -44,29 +44,55 @@
       </div>
     </div>
     <div class="notes">
-      <pre  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
+      <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "Customer",
 };
-</script>   
-    
-    
+</script>
+
+
 <style scoped>
-
-
 section {
   display: flex;
   flex-direction: column;
@@ -75,9 +101,15 @@ section {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   align-items: stretch;
   justify-content: center;
-} 
-.section-darkmode { background-color: #2c2c2c; }
-.section-lightmode { background-color: #ffffff; }
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #ffffff;
+}
 
 
 .title {
@@ -85,9 +117,15 @@ section {
   letter-spacing: 0.05rem;
   text-decoration-line: underline;
   font: italic 400 1rem/1.875rem Overpass, sans-serif;
-} 
-.title-darkmode { color: #ffffff; } 
-.title-lightmode { color: #000000; }
+}
+
+.title-darkmode {
+  color: #ffffff;
+}
+
+.title-lightmode {
+  color: #000000;
+}
 
 
 .data-field {
@@ -98,9 +136,15 @@ section {
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;
-} 
-.data-field#customer-id { padding: 0.625rem 1.875rem; }
-.data-field#street-name { flex: 3; } 
+}
+
+.data-field#customer-id {
+  padding: 0.625rem 1.875rem;
+}
+
+.data-field#street-name {
+  flex: 3;
+}
 
 .label {
   letter-spacing: 0.03rem;
@@ -110,8 +154,14 @@ section {
 pre {
   margin: 0;
 }
-.pre-darkmode { color: #ffffff; } 
-.pre-lightmode { color: #000000; }
+
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
   display: flex;
@@ -124,15 +174,17 @@ pre {
   justify-content: flex-start;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-} 
+}
+
 .data-darkmode {
   background-color: #212121;
   color: #ffffff;
-} 
+}
+
 .data-lightmode {
   background-color: #ebebeb;
   color: #000000;
-} 
+}
 
 
 .customer-data {
@@ -145,7 +197,8 @@ pre {
   gap: 0.625rem
 }
 
-.contact, .address {
+.contact,
+.address {
   display: flex;
   flex: auto;
   flex-direction: column;
@@ -159,8 +212,13 @@ pre {
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.h3-darkmode { color: #ffffff; } 
-.h3-lightmode { color: #000000; }
+.h3-darkmode {
+  color: #ffffff;
+}
+
+.h3-lightmode {
+  color: #000000;
+}
 
 
 .street-address {
@@ -180,6 +238,8 @@ pre {
   justify-content: center;
   gap: 0.625rem;
 }
-#notes { align-self: stretch; }
 
+#notes {
+  align-self: stretch;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/CustomerDepartment.vue b/components/server/CustomerDepartment.vue
index 391db1f..d5d01dc 100644
--- a/components/server/CustomerDepartment.vue
+++ b/components/server/CustomerDepartment.vue
@@ -1,143 +1,193 @@
 <template>
-    <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
-      <div class="data-group">
-        <div class="data-field" id="id">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
-        <div class="data-field" id="customer-id">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
-        <div class="data-field" id="head">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
+    <div class="data-group">
+      <div class="data-field" id="id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
       </div>
-      <div class="notes">
-            <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+      <div class="data-field" id="customer-id">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
       </div>
-    </section>
+      <div class="data-field" id="head">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="notes">
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+    </div>
+  </section>
 </template>
-  
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
-name: "CustomerDepartment",
+  name: "CustomerDepartment",
 };
-</script>   
+</script>
 
 
 
 <style scoped>
-
-* { 
-box-sizing: border-box;
-margin: 0; 
+* {
+  box-sizing: border-box;
+  margin: 0;
 }
 
 
 section {
-display: flex;
-flex-direction: column;
-padding: 1.25rem 1.875rem;
-border-radius: 0.625rem;
-box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-align-items: stretch;
-justify-content: center;
-} 
-.section-darkmode { background-color: #2c2c2c; }
-.section-lightmode { background-color: #ffffff; }
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  align-items: stretch;
+  justify-content: center;
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #ffffff;
+}
 
 
 .title {
-padding: 1.25rem 0;
-letter-spacing: 0.04rem;
-text-decoration-line: underline;
-font: italic 400 1rem/1.875rem Overpass, sans-serif;
-} 
-.title-darkmode { color: #ffffff; } 
-.title-lightmode { color: #000000; }
+  padding: 1.25rem 0;
+  letter-spacing: 0.04rem;
+  text-decoration-line: underline;
+  font: italic 400 1rem/1.875rem Overpass, sans-serif;
+}
+
+.title-darkmode {
+  color: #ffffff;
+}
+
+.title-lightmode {
+  color: #000000;
+}
 
 
 
 .data-group {
-display: flex;
-flex: auto;
-width: 100%;
-flex-direction: row;
-padding: 0.625rem 0;
-align-items: center;
-justify-content: stretch;
+  display: flex;
+  flex: auto;
+  width: 100%;
+  flex-direction: row;
+  padding: 0.625rem 0;
+  align-items: center;
+  justify-content: stretch;
 }
 
 
 .data-field {
-display: flex;
-flex: auto;
-width: 30%;
-flex-direction: row;
-padding: 0.8rem 1.875rem;
-align-items: center;
-justify-content: flex-start;
-gap: 1.25rem;
-} 
-#head { width: 40%; }
-
-.label {
-letter-spacing: 0.02rem;
-font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  display: flex;
+  flex: auto;
+  width: 30%;
+  flex-direction: row;
+  padding: 0.8rem 1.875rem;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1.25rem;
 }
 
-.pre-darkmode { color: #ffffff; } 
-.pre-lightmode { color: #000000; }
+#head {
+  width: 40%;
+}
+
+.label {
+  letter-spacing: 0.02rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
-display: flex;
-flex-direction: row;
-padding: 0 0.625rem;
-border-radius: 0.3125rem;
-box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-background-color: #212121;
-align-items: center;
-justify-content: flex-start;
-letter-spacing: 0.02rem;
-font: 400 0.75rem/1.875rem Overpass, sans-serif;
-} 
+  display: flex;
+  flex-direction: row;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  background-color: #212121;
+  align-items: center;
+  justify-content: flex-start;
+  letter-spacing: 0.02rem;
+  font: 400 0.75rem/1.875rem Overpass, sans-serif;
+}
+
 .data-darkmode {
-background-color: #212121;
-color: #ffffff;
-} 
+  background-color: #212121;
+  color: #ffffff;
+}
+
 .data-lightmode {
-background-color: #ebebeb;
-color: #000000;
-} 
+  background-color: #ebebeb;
+  color: #000000;
+}
 
 
 .notes {
-display: flex;
-flex: auto;
-flex-direction: column;
-padding: 1.25rem 1.875rem 0.625rem;
-align-items: flex-start;
-justify-content: center;
-gap: 0.625rem;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  padding: 1.25rem 1.875rem 0.625rem;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0.625rem;
 }
 
 .area-title {
-letter-spacing: 0.03rem;
-font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  letter-spacing: 0.03rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-#notes { align-self: stretch; }
-
+#notes {
+  align-self: stretch;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/CustomerDepartmentEmployeeList.vue b/components/server/CustomerDepartmentEmployeeList.vue
index fa2a48a..44b56cb 100644
--- a/components/server/CustomerDepartmentEmployeeList.vue
+++ b/components/server/CustomerDepartmentEmployeeList.vue
@@ -1,38 +1,81 @@
-
 <template>
     <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
         <table class="data-table" id="customer-employee-table">
             <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>
-                <th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
-                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+                <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>
+                <th
+                    :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
+                    Job Title</th>
+                <th
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    Pronouns</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
-                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
-                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+                <td
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    ...</td>
             </tr>
         </table>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
-  name: "CustomerDepartmentEmployeeList",
+    name: "CustomerDepartmentEmployeeList",
 };
-</script>   
+</script>
+
 
-  
 <style scoped>
 .data {
     display: flex;
@@ -44,8 +87,14 @@ export default {
     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: #ffffff; }
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #ffffff;
+}
 
 
 
@@ -55,8 +104,14 @@ export default {
     text-decoration-line: underline;
     font: 400 1rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; }
-.label-lightmode { color: #000000; }
+
+.label-darkmode {
+    color: #ffffff;
+}
+
+.label-lightmode {
+    color: #000000;
+}
 
 
 
@@ -81,14 +136,22 @@ export default {
     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 {
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
     height: 1.875rem;
     width: 35%;
     padding: 0;
@@ -97,21 +160,36 @@ th, td {
     letter-spacing: 0.02rem;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
-th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
-.th-darkmode, .td-darkmode { 
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
     border-right: 0.0625rem solid #000000;
 }
-.th-lightmode, .td-lightmode { 
+
+.th-lightmode,
+.td-lightmode {
     color: #000000;
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.ID { width: 20%; }
-.Pronouns { width: 10%; }
+.ID {
+    width: 20%;
+}
 
-.Pronouns-darkmode { border-right: none; }
-.Pronouns-lightmode { border-right: none; }
+.Pronouns {
+    width: 10%;
+}
 
+.Pronouns-darkmode {
+    border-right: none;
+}
 
+.Pronouns-lightmode {
+    border-right: none;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/CustomerDepartmentList.vue b/components/server/CustomerDepartmentList.vue
index f4942b0..404047e 100644
--- a/components/server/CustomerDepartmentList.vue
+++ b/components/server/CustomerDepartmentList.vue
@@ -18,9 +18,37 @@
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
diff --git a/components/server/CustomerEmployee.vue b/components/server/CustomerEmployee.vue
index 239552f..c07ed9f 100644
--- a/components/server/CustomerEmployee.vue
+++ b/components/server/CustomerEmployee.vue
@@ -56,7 +56,7 @@
       </div>
     </div>
     <div class="notes">
-      <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
@@ -65,24 +65,51 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "CustomerEmployee",
 };
-</script>   
-  
-  
-  
-<style scoped>
+</script>
 
-* { 
+
+
+<style scoped>
+* {
   box-sizing: border-box;
-  margin: 0; 
+  margin: 0;
 }
 
 
@@ -94,9 +121,15 @@ section {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   align-items: stretch;
   justify-content: center;
-} 
-.section-darkmode { background-color: #2c2c2c; }
-.section-lightmode { background-color: #ffffff; }
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #ffffff;
+}
 
 
 .title {
@@ -104,9 +137,15 @@ section {
   letter-spacing: 0.04rem;
   text-decoration-line: underline;
   font: italic 400 1rem/1.875rem Overpass, sans-serif;
-} 
-.title-darkmode { color: #ffffff; } 
-.title-lightmode { color: #000000; }
+}
+
+.title-darkmode {
+  color: #ffffff;
+}
+
+.title-lightmode {
+  color: #000000;
+}
 
 
 
@@ -119,13 +158,18 @@ section {
   align-items: center;
   justify-content: stretch;
 }
+
 #personal-data {
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
   gap: 0.625rem;
 }
-#full-name, #other { padding: 0; }
+
+#full-name,
+#other {
+  padding: 0;
+}
 
 
 .data-field {
@@ -137,17 +181,33 @@ section {
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;
-} 
-#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
-#preferred-name, #mail { width: 60%; }
+}
+
+#first-name,
+#last-name,
+#department,
+#job-title,
+#phone {
+  width: 40%;
+}
+
+#preferred-name,
+#mail {
+  width: 60%;
+}
 
 .label {
   letter-spacing: 0.02rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.pre-darkmode { color: #ffffff; } 
-.pre-lightmode { color: #000000; }
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
   display: flex;
@@ -160,15 +220,17 @@ section {
   justify-content: flex-start;
   letter-spacing: 0.02rem;
   font: 400 0.75rem/1.875rem Overpass, sans-serif;
-} 
+}
+
 .data-darkmode {
   background-color: #212121;
   color: #ffffff;
-} 
+}
+
 .data-lightmode {
   background-color: #ebebeb;
   color: #000000;
-} 
+}
 
 
 .notes {
@@ -186,6 +248,7 @@ section {
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-#notes { align-self: stretch; }
-
+#notes {
+  align-self: stretch;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/CustomerEmployeeList.vue b/components/server/CustomerEmployeeList.vue
index 0e01e18..122be9e 100644
--- a/components/server/CustomerEmployeeList.vue
+++ b/components/server/CustomerEmployeeList.vue
@@ -3,35 +3,79 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
         <table class="data-table" id="customer-employee-table">
             <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>
-                <th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
-                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+                <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>
+                <th
+                    :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
+                    Department / Job Title</th>
+                <th
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    Pronouns</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
-                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
-                <td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
-                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+                <td
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    ...</td>
             </tr>
         </table>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
-  name: "CustomerEmployeeList",
+    name: "CustomerEmployeeList",
 };
-</script>   
+</script>
+
 
-  
 <style scoped>
 .data {
     display: flex;
@@ -43,8 +87,14 @@ export default {
     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: #ffffff; }
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #ffffff;
+}
 
 
 
@@ -54,8 +104,14 @@ export default {
     text-decoration-line: underline;
     font: 400 1rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; }
-.label-lightmode { color: #000000; }
+
+.label-darkmode {
+    color: #ffffff;
+}
+
+.label-lightmode {
+    color: #000000;
+}
 
 
 
@@ -80,14 +136,22 @@ export default {
     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 {
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
     height: 1.875rem;
     width: 35%;
     padding: 0;
@@ -96,21 +160,36 @@ th, td {
     letter-spacing: 0.02rem;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
-th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
-.th-darkmode, .td-darkmode { 
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
     border-right: 0.0625rem solid #000000;
 }
-.th-lightmode, .td-lightmode { 
+
+.th-lightmode,
+.td-lightmode {
     color: #000000;
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.ID { width: 20%; }
-.Pronouns { width: 10%; }
+.ID {
+    width: 20%;
+}
 
-.Pronouns-darkmode { border-right: none; }
-.Pronouns-lightmode { border-right: none; }
+.Pronouns {
+    width: 10%;
+}
 
+.Pronouns-darkmode {
+    border-right: none;
+}
 
+.Pronouns-lightmode {
+    border-right: none;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/CustomerQuickAccess.vue b/components/server/CustomerQuickAccess.vue
index 662cfcd..8c09542 100644
--- a/components/server/CustomerQuickAccess.vue
+++ b/components/server/CustomerQuickAccess.vue
@@ -2,29 +2,60 @@
   <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
     <div class="shortcuts">
-      <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="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">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
+        value="Issue Slips">
     </div>
   </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "Asset",
 };
-</script>    
-    
-    
+</script>
+
+
 <style scoped>
 .quick-access {
   display: flex;
diff --git a/components/server/CustomerTable.vue b/components/server/CustomerTable.vue
index 20b0d0f..5f6bdd8 100644
--- a/components/server/CustomerTable.vue
+++ b/components/server/CustomerTable.vue
@@ -23,12 +23,40 @@
         </table>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
@@ -36,8 +64,8 @@ export default {
     name: "CustomerTable",
 };
 </script>
-  
-    
+
+
 <style scoped>
 .data {
     display: flex;
@@ -94,7 +122,8 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
-th, td {
+th,
+td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
@@ -102,11 +131,13 @@ th, td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.th-darkmode, .td-darkmode {
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
 }
 
-.th-lightmode, .td-lightmode {
+.th-lightmode,
+.td-lightmode {
     color: #000000;
 }
 
@@ -128,4 +159,5 @@ th {
 
 .Name {
     width: 60%;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/Employee.vue b/components/server/Employee.vue
new file mode 100644
index 0000000..319d679
--- /dev/null
+++ b/components/server/Employee.vue
@@ -0,0 +1,498 @@
+<template>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['employee-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        employee.fullName }}</h2>
+        <input v-if="editable" v-model="employee.fullName" @change="updateEmpl()"
+            :class="['data', 'employee-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="employee-data">
+            <div class="username-registered-lastLogin">
+                <div class="data-field" id="username">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ employee.username }}</pre>
+                </div>
+                <div class="data-field" id="registered">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
+                    <pre
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ employee.registered }}</pre>
+                </div>
+                <div class="data-field" id="lastLogin">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
+                    <pre
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ employee.lastLogin }}</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="city-phonenumber">
+                    <div class="data-field" id="city">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ employee.city }}</pre>
+                        <input v-if="editable" v-model="employee.city" @change="updateEmpl()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="phonenumber">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ employee.phonenumber }}</pre>
+                        <input v-if="editable" v-model="employee.phonenumber" @change="updateEmpl()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="postcode-email">
+                    <div class="data-field" id="postcode">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ employee.postcode }}</pre>
+                        <input v-if="editable" v-model="employee.postcode" @change="updateEmpl()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="email">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Email:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ employee.email }}</pre>
+                        <input v-if="editable" v-model="employee.email" @change="updateEmpl()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="address">
+                    <div class="data-field" id="address">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ employee.address }}</pre>
+                        <input v-if="editable" v-model="employee.address" @change="updateEmpl()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="empty">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newFullName" @change="updateEmployee()"
+            :class="['data', 'employee-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="employee-data">
+            <div class="username-registered-lastLogin">
+                <div class="data-field" id="username">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                    <input v-model="newUsername" @change="updateEmployee()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="password">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Password:</pre>
+                    <input v-model="newPassword" @change="updateEmployee()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="passwordRepeated">
+                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Password repeated:</pre>
+                    <input v-model="newPasswordRepeated" @change="updateEmployee()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+            <div class="info">
+                <div class="city-phonenumber">
+                    <div class="data-field" id="city">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+                        <input v-model="newCity" @change="updateEmployee()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="phonenumber">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
+                        <input v-model="newPhonenumber" @change="updateEmployee()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="postcode-email">
+                    <div class="data-field" id="postcode">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+                        <input v-model="newPostcode" @change="updateEmployee()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="email">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Email:</pre>
+                        <input v-model="newEmail" @change="updateEmployee()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="address">
+                    <div class="data-field" id="address">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
+                        <input v-model="newAddress" @change="updateEmployee()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="empty">
+                        &nbsp;
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const editable = computed(() => store.state.editable);
+const chosenEmployeeId = computed(() => store.state.chosenEmployeeId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
+const darkMode = ref('');
+const employee = ref({});
+
+const newUsername = ref('');
+const newPassword = ref('');
+const newPasswordRepeated = ref('');
+const newFullName = ref('');
+const newEmail = ref('');
+const newPhonenumber = ref('');
+const newAddress = ref('');
+const newCity = ref('');
+const newPostcode = ref('');
+
+// get employee from id
+const getEmployeeById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getEmployee/${chosenEmployeeId.value}`
+            );
+            employee.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// update employee fields in the store
+const updateEmployee = () => {
+    const employee = {
+        username: newUsername.value,
+        password: newPassword.value,
+        passwordRepeated: newPasswordRepeated.value,
+        fullName: newFullName.value,
+        email: newEmail.value,
+        phonenumber: newPhonenumber.value,
+        address: newAddress.value,
+        city: newCity.value,
+        postcode: newPostcode.value
+    };
+    store.commit('updateEmployeeComponent', employee);
+}
+
+//update data
+const updateEmpl = async () => {
+    if (employee.value.fullName.trim() === "") {
+        alert("Please add a name!");
+        return;
+    }
+    if (employee.value.city.trim() === "") {
+        alert("Please add a city!");
+        return;
+    }
+    if (employee.value.address.trim() === "") {
+        alert("Please add an address!");
+        return;
+    }
+    if (!validateEMail(employee.value.email)) {
+        alert("Please add a valid email!");
+        return;
+    }
+    if (!validatePhonenumber(employee.value.phonenumber)) {
+        alert("Please add a valid phonenumber!");
+        return;
+    }
+    if (!validatePostcode(employee.value.postcode)) {
+        alert("Please add a valid postcode!");
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: employee.value.id,
+                username: employee.value.username,
+                fullName: employee.value.fullName,
+                email: employee.value.email,
+                phonenumber: employee.value.phonenumber,
+                address: employee.value.address,
+                city: employee.value.city,
+                postcode: employee.value.postcode,
+                adminBool: employee.value.adminBool,
+                technicianBool: employee.value.technicianBool,
+                readerBool: employee.value.readerBool,
+            }
+        )
+        await getEmployeeById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeleteEmployee = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this employee? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteEmployee/${chosenEmployeeId.value}`);
+                store.commit('undoDelete');
+                store.commit('resetStore');
+                store.commit('changeToEmployeelist');
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+// to validate the email address
+const validateEMail = (email) => {
+    const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
+    if (email === "") {
+        return true
+    }
+    return emailRegex.test(email);
+}
+
+// to validate the phonenumber
+const validatePhonenumber = (number) => {
+    const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
+    const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
+    if (number === "") {
+        return true
+    }
+    if (mobilephonenumberRegex.test(number)) {
+        return true
+    } else if (landlineRegex.test(number)) {
+        return true;
+    }
+    return false;
+}
+
+// to validate the postcode
+const validatePostcode = (postcode) => {
+    const postcodeRegex = new RegExp(/^\d{5}$/);
+    if (postcode === "") {
+        return true
+    }
+    return postcodeRegex.test(postcode);
+}
+
+watch(deleteBool, confirmDeleteEmployee);
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+    await getEmployeeById();
+});
+</script>
+
+<script>
+export default {
+    name: "Employee",
+}
+</script>
+
+
+<style scoped>
+.information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    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;
+}
+
+
+.employee-name {
+    align-self: stretch;
+    padding: 1rem 0;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
+.employee-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    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;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0.8rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.data-field#street-name {
+    width: 70%;
+}
+
+.data-field#street-no {
+    width: 30%;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.data {
+    display: flex;
+    overflow-x: auto;
+    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;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.data#notes,
+.data#description {
+    align-self: stretch;
+    /* width: 45%; */
+    scrollbar-width: none;
+    overflow-x: auto;
+}
+
+.employee-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.username-registered-lastLogin,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.additional {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0rem 0.625rem;
+    border-radius: 0.3125rem;
+}
+
+.area-title {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.h3-darkmode {
+    color: #fff;
+}
+
+.h3-lightmode {
+    color: #000;
+}
+
+.city-phonenumber,
+.postcode-email {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+</style>
diff --git a/components/server/EmployeeGroups.vue b/components/server/EmployeeGroups.vue
new file mode 100644
index 0000000..95c394a
--- /dev/null
+++ b/components/server/EmployeeGroups.vue
@@ -0,0 +1,510 @@
+<template>
+    <section v-if="!addBool" :class="['group-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="group">Groups:</div>
+        <div class="asset-data">
+            <div class="checkbox-container">
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="admin-checkbox">Admin</label>
+                    <input :readonly="!editable" id="admin-checkbox" type="checkbox" v-model="adminBoolean"
+                        @click="toggleAdminBool()">
+                </div>
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="technician-checkbox">Technician</label>
+                    <input :readonly="!editable" id="technician-checkbox" type="checkbox"
+                        v-model="technicianBoolean" @click="toggleTechnicianBool()">
+                </div>
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="reader-checkbox">Reader</label>
+                    <input :readonly="!editable" id="reader-checkbox" type="checkbox" v-model="readerBoolean"
+                        @click="toggleReaderBool()">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['group-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="group">Groups:</div>
+        <div class="asset-data">
+            <div class="checkbox-container">
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="admin-checkbox">Admin</label>
+                    <input id="admin-checkbox" type="checkbox" v-model="newAdminBool">
+                </div>
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="technician-checkbox">Technician</label>
+                    <input id="technician-checkbox" type="checkbox" v-model="newTechnicianBool">
+                </div>
+                <div class="checkbox-group">
+                    <label :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']" for="reader-checkbox">Reader</label>
+                    <input id="reader-checkbox" type="checkbox" v-model="newReaderBool">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" id="saveNewEmployee">
+        <button :class="[darkMode ? 'saveNewEmployee-darkmode' : 'saveNewEmployee-lightmode']"
+            @click="addEmployee()">Save</button>
+    </section>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const editable = computed(() => store.state.editable);
+const chosenEmployeeId = computed(() => store.state.chosenEmployeeId);
+const addBool = computed(() => store.state.new);
+const newUsernameEmp = computed(() => store.state.newUsernameEmp);
+const newPasswordEmp = computed(() => store.state.newPasswordEmp);
+const newPasswordRepeatedEmp = computed(() => store.state.newPasswordRepeatedEmp);
+const newFullNameEmp = computed(() => store.state.newFullNameEmp);
+const newEmailEmp = computed(() => store.state.newEmailEmp);
+const newPhonenumberEmp = computed(() => store.state.newPhonenumberEmp);
+const newAddressEmp = computed(() => store.state.newAddressEmp);
+const newCityEmp = computed(() => store.state.newCityEmp);
+const newPostcodeEmp = computed(() => store.state.newPostcodeEmp);
+
+const darkMode = ref('')
+const employee = ref({});
+const adminBoolean = ref(false);
+const technicianBoolean = ref(false);
+const readerBoolean = ref(false);
+const newAdminBool = ref(false);
+const newTechnicianBool = ref(false);
+const newReaderBool = ref(false);
+const newDarkModeBool = ref(false);
+const employees = ref([]);
+
+
+// get employee from id
+const getEmployeeById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getEmployee/${chosenEmployeeId.value}`
+            );
+            employee.value = response.data;
+            if (employee.value.adminBool == 1) {
+                adminBoolean.value = true;
+            };
+            if (employee.value.technicianBool == 1) {
+                technicianBoolean.value = true;
+            };
+            if (employee.value.readerBool == 1) {
+                readerBoolean.value = true;
+            };
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+const toggleTechnicianBool = () => {
+    technicianBoolean.value = !technicianBoolean.value;
+    update();
+}
+
+const toggleAdminBool = () => {
+    adminBoolean.value = !adminBoolean.value;
+    update();
+}
+
+const toggleReaderBool = () => {
+    readerBoolean.value = !readerBoolean.value;
+    update();
+}
+
+//update data
+const update = async () => {
+    if (adminBoolean.value) {
+        employee.value.adminBool = 1;
+    } else {
+        employee.value.adminBool = 0;
+    }
+    if (technicianBoolean.value) {
+        employee.value.technicianBool = 1;
+    } else {
+        employee.value.technicianBool = 0;
+    }
+    if (readerBoolean.value) {
+        employee.value.readerBool = 1;
+    } else {
+        employee.value.readerBool = 0;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: employee.value.id,
+                username: employee.value.username,
+                fullName: employee.value.fullName,
+                email: employee.value.email,
+                phonenumber: employee.value.phonenumber,
+                address: employee.value.address,
+                city: employee.value.city,
+                postcode: employee.value.postcode,
+                adminBool: employee.value.adminBool,
+                technicianBool: employee.value.technicianBool,
+                readerBool: employee.value.readerBool,
+                darkModeBool: employee.value.darkModeBool,
+            }
+        );
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+    await getEmployeeById();
+}
+
+// add new employee
+const addEmployee = async () => {
+    // check if all input data is valid
+    if (newUsernameEmp.value.trim() === "") {
+        alert("Please add an username!");
+        return;
+    } else {
+        var counter = 0;
+        // check if the username already exists
+        employees.value.forEach(empl => {
+            if (empl.username === newUsernameEmp.value) {
+                counter += 1;
+            }
+        });
+        if (counter == 1) {
+            alert("This username already exists. Please choose an unique username or modify respectively delete the old one!");
+            return;
+        }
+    }
+    if (newPasswordEmp.value.trim() === "") {
+        alert("Please add a password!");
+        return;
+    }
+    // username min length 5
+    if (!newUsernameEmp.value || newUsernameEmp.value.length < 5) {
+        alert("Please choose an username with minimal five characters!");
+        return
+    }
+    // password min 8 chars
+    if (!newPasswordEmp.value || newPasswordEmp.value.length < 8) {
+        alert("Please choose a password with minimal eight characters!");
+        return
+    }
+    // password (repeat) must match
+    if (
+        !newPasswordRepeatedEmp.value ||
+        newPasswordEmp.value != newPasswordRepeatedEmp.value
+    ) {
+        alert("Your passwords don't match.");
+        return
+    }
+    if (newFullNameEmp.value.length === 0) {
+        alert("Please add a name!");
+        return;
+    }
+    if (newCityEmp.value.length === 0) {
+        alert("Please add a city!");
+        return;
+    }
+    if (newAddressEmp.value.length === 0) {
+        alert("Please add an address!");
+        return;
+    }
+    if (!validateEMail(newEmailEmp.value)) {
+        alert("Please add a valid email!");
+        return;
+    }
+    if (!validatePhonenumber(newPhonenumberEmp.value)) {
+        alert("Please add a valid phonenumber!");
+        return;
+    }
+    if (!validatePostcode(newPostcodeEmp.value)) {
+        alert("Please add a valid postcode!");
+        return;
+    }
+    if ((newPhonenumberEmp.value.length === 0) && (newEmailEmp.value.length === 0)) {
+        alert("Please add a phonenumber or an email!");
+        return;
+    }
+    if (! (newAdminBool.value || newTechnicianBool.value || newReaderBool.value)) {
+        alert("Please choose at least one group!");
+        return;
+    }
+    try {
+        let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/signup`,
+            {
+                username: newUsernameEmp.value,
+                password: newPasswordEmp.value,
+                password_repeat: newPasswordRepeatedEmp.value,
+                fullName: newFullNameEmp.value,
+                email: newEmailEmp.value,
+                phonenumber: newPhonenumberEmp.value,
+                address: newAddressEmp.value,
+                city: newCityEmp.value,
+                postcode: newPostcodeEmp.value,
+                adminBool: newAdminBool.value,
+                technicianBool: newTechnicianBool.value,
+                readerBool: newReaderBool.value,
+                darkModeBool: newDarkModeBool.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToEmployeelist');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all employees
+const getEmployees = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        employees.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// to validate the email address
+const validateEMail = (email) => {
+    const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
+    if (email === "") {
+        return true
+    }
+    return emailRegex.test(email);
+}
+
+// to validate the phonenumber
+const validatePhonenumber = (number) => {
+    const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
+    const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
+    if (number === "") {
+        return true
+    }
+    if (mobilephonenumberRegex.test(number)) {
+        return true
+    } else if (landlineRegex.test(number)) {
+        return true;
+    }
+    return false;
+}
+
+// to validate the postcode
+const validatePostcode = (postcode) => {
+    const postcodeRegex = new RegExp(/^\d{5}$/);
+    if (postcode === "") {
+        return true
+    }
+    return postcodeRegex.test(postcode);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(() => {
+    getSession();
+    triggerBackendCallsWithDelay(getEmployeeById);
+    triggerBackendCallsWithDelay(getEmployees);
+});
+</script>
+
+<script>
+export default {
+    name: "EmployeeGroups",
+};
+</script>
+
+
+<style scoped>
+.group-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    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;
+}
+
+.data-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0.8rem 1.875rem;
+    gap: 1.25rem;
+    border-radius: 0.625rem;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.div-darkmode {
+    color: #fff;
+}
+
+.div-lightmode {
+    color: #000;
+}
+
+.label#network {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.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;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.asset-data {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+}
+
+.IPv4-MAC,
+.IPv6-subnetmask {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 0;
+    border-radius: 0.3125rem;
+}
+
+.saveNewEmployee-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewEmployee-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewEmployee-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewEmployee-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewEmployee {
+    text-align: center;
+}
+
+.input {
+    border: none;
+}
+
+.checkbox-container {
+    padding-bottom: 0.8rem;
+    display: flex;
+    justify-content: center;
+}
+
+.checkbox-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 20rem;
+}
+
+.checkbox-group label {
+    margin-bottom: 5px;
+}
+
+.checkbox-group input {
+    margin-bottom: 10px;
+}
+
+.label {
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+    color: #fff;
+}
+
+.pre-lightmode {
+    color: #000;
+}
+
+input[type=checkbox]{
+  accent-color:  #000;  
+  }
+</style>
\ No newline at end of file
diff --git a/components/server/EmployeeTable.vue b/components/server/EmployeeTable.vue
new file mode 100644
index 0000000..d4f3632
--- /dev/null
+++ b/components/server/EmployeeTable.vue
@@ -0,0 +1,264 @@
+<template>
+    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+        <table class="data-table" id="employeetable">
+            <tbody>
+                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
+                    <th
+                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        Name</th>
+                    <th
+                        :class="['Username', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Username-darkmode' : 'Username-lightmode']">
+                        Username</th>
+                    <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode']">ID</th>
+                </tr>
+                <tr v-for="u in userList" :key="u.id" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
+                    <td
+                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                        <nuxt-link to="/employees" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenEmployee(u.id)">
+                            {{ u.fullName }}
+                        </nuxt-link>
+                    </td>
+                    <td
+                        :class="['Username', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Username-darkmode' : 'Username-lightmode']">
+                        <nuxt-link to="/employees" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenEmployee(u.id)">
+                            {{ u.username }}
+                        </nuxt-link>
+                    </td>
+                    <td :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ u.id }}</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+// get accesss to the store
+const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const goToChosenEmployee = (id) => {
+    store.commit('setChosenEmployee', id);
+    store.commit('changeToEmployee');
+};
+const employeeFilter = computed(() => store.state.filteredByCustomer);
+
+const darkMode = ref('')
+const userList = ref([]);
+const adminBool = ref(false);
+
+//get all users
+const getEmployees = async () => {
+    if (adminBool.value) {
+        if (!(employeeFilter.value === '')) {
+            await getFilteredUsersByUser();
+        } else {
+            try {
+                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+                userList.value = response.data;
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        }
+    }
+}
+
+//get all users based on the searched user
+const getFilteredUsersByUser = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedEmployeesByEmployee/${employeeFilter.value}`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+watch(employeeFilter, getEmployees);
+
+const getSession = async () => {
+    const loggedInUserAdminBool = getItem('logged-in-user-adminBool');
+    if (loggedInUserAdminBool == 0) {
+        adminBool.value = false;
+    } else {
+        adminBool.value = true;
+    };
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getEmployees();
+});
+</script>
+
+<script>
+export default {
+    name: "AssetTable",
+};
+</script>
+
+
+<style scoped>
+.data {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    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);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.input {
+    border: none;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.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-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.Name {
+    width: 40%;
+}
+
+.Name-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Username {
+    width: 35%;
+}
+
+.Username-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Username-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.ID {
+    width: 25%;
+}
+
+#nuxt-link {
+    text-decoration: none;
+}
+
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+</style>
diff --git a/components/server/HardwareSpecifications.vue b/components/server/HardwareSpecifications.vue
index 307039c..18b5c66 100644
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@@ -1,7 +1,8 @@
 <template>
     <section v-if="hardwareBoolean && !addBool"
         :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:
+        </div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
@@ -55,7 +56,8 @@
         </div>
     </section>
     <section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:
+        </div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
@@ -101,16 +103,18 @@
         </div>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -123,7 +127,7 @@ const newRAM = ref('');
 const newStorageConfiguration = ref('');
 const newMiscellaneous = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const item = ref({});
 const hardwareBoolean = ref(false)
 
@@ -155,7 +159,7 @@ const updateAsset = () => {
         RAM: newRAM.value,
         storageConfig: newStorageConfiguration.value,
         miscellaneous: newMiscellaneous.value,
-    }; 
+    };
     store.commit('updateHardwareComponent', asset);
 }
 
@@ -204,8 +208,28 @@ const updateConfigItem = async () => {
     }
 }
 
-onMounted(() => {
-    getItemById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getItemById();
 });
 </script>
 
@@ -213,9 +237,9 @@ onMounted(() => {
 export default {
     name: "HardwareSpecifications",
 };
-</script>   
+</script>
+
 
-      
 <style scoped>
 .hardware-information {
     display: flex;
diff --git a/components/server/InstanceChecklist.vue b/components/server/InstanceChecklist.vue
index 2707f3e..80b8986 100644
--- a/components/server/InstanceChecklist.vue
+++ b/components/server/InstanceChecklist.vue
@@ -38,21 +38,49 @@
         </table>
     </div>
 </template>
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
     name: "InstanceChecklist",
 };
-</script>  
-    
-    
-    
+</script>
+
+
+
 <style scoped>
 .data {
     display: flex;
diff --git a/components/server/Issue.vue b/components/server/Issue.vue
index 9770bed..4687943 100644
--- a/components/server/Issue.vue
+++ b/components/server/Issue.vue
@@ -89,12 +89,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const issue = ref({});
 const issues = ref([]);
 
@@ -207,9 +209,28 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 }
 
 watch(deleteBool, confirmDeleteIssue);
+watch(modeChanged, getSession)
 
-onMounted(() => {
-    getIssueById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+onMounted(async () => {
+    await getSession();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssues);
 });
 </script>
diff --git a/components/server/IssueSlip.vue b/components/server/IssueSlip.vue
index 14d309b..0d049e8 100644
--- a/components/server/IssueSlip.vue
+++ b/components/server/IssueSlip.vue
@@ -112,12 +112,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const issueSlip = ref({});
 const customer = ref({});
 const productionOrders = ref([]);
@@ -279,11 +281,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteIssueSlip);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getIssueSlipById();
-    getProductionOrders();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueSlip);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getIssueSlipById();
+    await getProductionOrders();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
diff --git a/components/server/IssueSlipTable.vue b/components/server/IssueSlipTable.vue
index 9f9b89e..a8453b6 100644
--- a/components/server/IssueSlipTable.vue
+++ b/components/server/IssueSlipTable.vue
@@ -32,7 +32,7 @@
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         <nuxt-link to="/issueSlips" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssueSlip(issueSlip.primaryID)">
                             {{ issueSlip.primaryID }}
                         </nuxt-link>
@@ -60,6 +60,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenIssueSlip = (id) => {
     store.commit('setChosenIssueSlip', id);
     store.commit('changeToIssueSlip');
@@ -69,7 +71,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const issueSlipSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('')
 const issueSlips = ref([]);
 
 // update search term
@@ -119,8 +121,27 @@ const searchIssueSlip = async () => {
 watch(customerFilter, getIssueSlips);
 watch(searchable, updateSearchTerm);
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getIssueSlips();
 });
 </script>
@@ -154,9 +175,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .issue-slip-search {
     display: flex;
     align-items: center;
diff --git a/components/server/IssueSlipTableNoCustomer.vue b/components/server/IssueSlipTableNoCustomer.vue
deleted file mode 100644
index b5f5c37..0000000
--- a/components/server/IssueSlipTableNoCustomer.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
-        <table class="data-table" id="asset-table">
-            <tbody>
-                <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="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                        Ticket No.</th>
-                    <th
-                        :class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        Creation Date</th>
-                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-                </tr>
-                <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="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "IssueSlipTableNoCustomer",
-};
-</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-darkmode,
-.td-darkmode {
-    color: #ffffff;
-}
-
-.th-lightmode,
-.td-lightmode {
-    color: #000;
-}
-
-th {
-    font: 700 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-.ID {
-    width: 47.5%;
-}
-
-.ID-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.ID-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.TicketNo {
-    width: 23.75%;
-}
-
-.TicketNo-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.TicketNo-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.CreationDate {
-    width: 23.75%;
-}
-
-.CreationDate-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.CreationDate-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.User {
-    width: 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/components/server/IssueTable.vue b/components/server/IssueTable.vue
index 810b224..0ec64b5 100644
--- a/components/server/IssueTable.vue
+++ b/components/server/IssueTable.vue
@@ -25,7 +25,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/issueItems" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssue(issue.primaryID)">
                             {{ issue.name }}
                         </nuxt-link>
@@ -53,6 +53,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenIssue = (id) => {
     store.commit('setChosenIssue', id);
     store.commit('changeToIssueItem');
@@ -62,7 +64,7 @@ const stateFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const issueSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('');
 const issues = ref([]);
 
 // update search term
@@ -113,7 +115,27 @@ const searchIssue = async () => {
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
 onMounted(async () => {
+    getSession();
     await getIssues();
 });
 </script>
@@ -178,9 +200,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .issue-search {
     display: flex;
     align-items: center;
diff --git a/components/server/IssueVariant.vue b/components/server/IssueVariant.vue
index 9509387..4697949 100644
--- a/components/server/IssueVariant.vue
+++ b/components/server/IssueVariant.vue
@@ -8,8 +8,8 @@
             <div class="variantOf">
                 <div class="data-field" id="variantOf">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
-                    <pre
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" class="button" @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" :class="['button', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+ @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
                 </div>
             </div>
             <div class="info">
@@ -59,6 +59,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 const chosenIssueVariantId = computed(() => store.state.chosenIssueVariantId);
@@ -172,11 +174,30 @@ const getIssueById = async () => {
     }
 }
 
-watch(deleteBool, confirmDeleteIssueVariant);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getIssueVariantById();
-    getIssueById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueVariant);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getIssueVariantById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssueVariants);
 });
 
@@ -378,6 +399,13 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/IssueVariants.vue b/components/server/IssueVariants.vue
index 271ece5..b2ad4de 100644
--- a/components/server/IssueVariants.vue
+++ b/components/server/IssueVariants.vue
@@ -24,7 +24,7 @@
                     <td v-if="!editable"
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/issueItems" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssueVariant(issueVar.primaryID)">
                             {{ issueVar.name }}
                         </nuxt-link>
@@ -185,7 +185,7 @@ const newAmount = computed(() => store.state.newAmountII);
 const newProperties = computed(() => store.state.newPropertiesII);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const issueVariants = ref([])
 const issue = ref({})
@@ -411,9 +411,27 @@ const getAllIssues = async () => {
     }
 }
 
-onMounted(() => {
-    getIssueVariantsById();
-    getIssueById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+onMounted(async () => {
+    getSession();
+    await getIssueVariantsById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getAllIssues);
 });
 </script>
@@ -739,6 +757,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsInstance.vue b/components/server/MaintenanceVisitsInstance.vue
index 8ca9f50..a69a21e 100644
--- a/components/server/MaintenanceVisitsInstance.vue
+++ b/components/server/MaintenanceVisitsInstance.vue
@@ -69,12 +69,40 @@
         </div>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
@@ -82,8 +110,8 @@ export default {
     name: "MaintenanceVisitsInstance",
 };
 </script>
-      
-      
+
+
 <style scoped>
 .information {
     display: flex;
diff --git a/components/server/MaintenanceVisitsInstanceTable.vue b/components/server/MaintenanceVisitsInstanceTable.vue
index 0ad927e..b3dd61b 100644
--- a/components/server/MaintenanceVisitsInstanceTable.vue
+++ b/components/server/MaintenanceVisitsInstanceTable.vue
@@ -43,22 +43,50 @@
         </table>
     </div>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
     name: "MaintenanceVisitsInstanceTable",
 };
-</script>  
-    
-    
-    
+</script>
+
+
+
 <style scoped>
 .data {
     display: flex;
diff --git a/components/server/MaintenanceVisitsTemplate.vue b/components/server/MaintenanceVisitsTemplate.vue
index 9762aa8..9cb7688 100644
--- a/components/server/MaintenanceVisitsTemplate.vue
+++ b/components/server/MaintenanceVisitsTemplate.vue
@@ -103,12 +103,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenMVTId = computed(() => store.state.chosenMVTId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const mvt = ref({});
 const customers = ref([]);
 const customer = ref({});
@@ -265,10 +267,29 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteMVT);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getMVTById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteMVT);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getMVTById();
     triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
     triggerBackendCallsWithDelay(getCustomers);
 });
diff --git a/components/server/MaintenanceVisitsTemplateTable.vue b/components/server/MaintenanceVisitsTemplateTable.vue
index b21556f..ebf7b10 100644
--- a/components/server/MaintenanceVisitsTemplateTable.vue
+++ b/components/server/MaintenanceVisitsTemplateTable.vue
@@ -32,10 +32,11 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenMVT(template.checklistID)">
                             {{ template.name }}
-                        </nuxt-link></td>
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.checklistID }}</td>
@@ -48,8 +49,8 @@
         </table>
     </div>
 </template>
-  
-  
+
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -59,6 +60,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenMVT = (id) => {
     store.commit('setChosenMVT', id);
     store.commit('changeToTemplate');
@@ -68,7 +71,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 const mvtSearchFilter = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const maintenanceVisitTemplates = ref([]);
 
 //get all maintenance visit templates
@@ -115,10 +118,29 @@ const getFilteredMVTByCustomer = async () => {
     }
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 watch(searchable, updateSearchTerm);
 watch(customerFilter, getMaintenanceVisitTemplates);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getMaintenanceVisitTemplates();
 });
 </script>
@@ -127,10 +149,10 @@ onMounted(async () => {
 export default {
     name: "MaintenanceVisitsTemplateTable",
 };
-</script>  
-    
-    
-    
+</script>
+
+
+
 <style scoped>
 .data {
     display: flex;
@@ -176,9 +198,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .dataInput {
     display: flex;
     flex-direction: row;
diff --git a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue b/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
deleted file mode 100644
index e88951c..0000000
--- a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
-        <table class="data-table" id="maintenance-visits-templat-table-no-customer">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        Name</th>
-                    <th
-                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ID
-                    </th>
-                    <th
-                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        Type</th>
-                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "MaintenanceVisitsTemplateTableNoCustomer",
-};
-</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-darkmode,
-.td-darkmode {
-    color: #ffffff;
-}
-
-.th-lightmode,
-.td-lightmode {
-    color: #000;
-}
-
-th {
-    font: 700 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-.Name {
-    width: 50%;
-}
-
-.Name-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Name-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.ID {
-    width: 22.5%;
-}
-
-.ID-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.ID-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Type {
-    width: 22.5%;
-}
-
-.Type-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Type-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.User {
-    width: 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/components/server/NetworkSpecifications.vue b/components/server/NetworkSpecifications.vue
index f19f193..227c58f 100644
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@@ -70,16 +70,18 @@
         <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Save</button>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -106,7 +108,7 @@ const newSoftware = computed(() => store.state.newSoftware);
 const newVersion = computed(() => store.state.newVersion);
 const newLicense = computed(() => store.state.newLicense);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const item = ref({});
 const networkBoolean = ref(false);
 const inputIPv4 = ref('');
@@ -356,7 +358,27 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1000);
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
 onMounted(() => {
+    getSession();
     triggerBackendCallsWithDelay(getItemById);
     triggerBackendCallsWithDelay(getConfigItems);
 });
@@ -366,9 +388,9 @@ onMounted(() => {
 export default {
     name: "NetworkSpecifications",
 };
-</script>          
-      
-      
+</script>
+
+
 <style scoped>
 .network-information {
     display: flex;
diff --git a/components/server/OrderingInformation.vue b/components/server/OrderingInformation.vue
index 6ceee62..6003518 100644
--- a/components/server/OrderingInformation.vue
+++ b/components/server/OrderingInformation.vue
@@ -147,6 +147,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
@@ -159,7 +161,7 @@ const newPrice = ref('');
 const newComment = ref('');
 
 const newOIs = reactive([]);
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // delete new todo row
 const deleteNewRow = () => {
@@ -274,12 +276,32 @@ const deleteOrderingInfo = async (id) => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } 
+    }
     await getOIById();
 }
 
-onMounted(() => {
-    getOIById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getOIById();
 });
 </script>
 
diff --git a/components/server/ProductionOrdersInstance.vue b/components/server/ProductionOrdersInstance.vue
index f3bf3bc..f877864 100644
--- a/components/server/ProductionOrdersInstance.vue
+++ b/components/server/ProductionOrdersInstance.vue
@@ -19,7 +19,8 @@
             <div class="additional">
                 <div class="templateDescription">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateDescription">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">...</pre>
                 </div>
             </div>
             <div class="additional">
@@ -75,21 +76,49 @@
         </div>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
     name: "ProductionOrdersInstance",
 };
-</script> 
-      
-      
+</script>
+
+
 <style scoped>
 .information {
     display: flex;
diff --git a/components/server/ProductionOrdersInstanceTable.vue b/components/server/ProductionOrdersInstanceTable.vue
index 05f071f..f54c43a 100644
--- a/components/server/ProductionOrdersInstanceTable.vue
+++ b/components/server/ProductionOrdersInstanceTable.vue
@@ -49,21 +49,49 @@
         </table>
     </div>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>
 export default {
     name: "ProductionOrdersInstanceTable",
 };
-</script>   
-    
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
diff --git a/components/server/ProductionOrdersTemplate.vue b/components/server/ProductionOrdersTemplate.vue
index c0d810b..f092bb7 100644
--- a/components/server/ProductionOrdersTemplate.vue
+++ b/components/server/ProductionOrdersTemplate.vue
@@ -109,12 +109,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenPOTId = computed(() => store.state.chosenPOTId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const pot = ref({});
 const customers = ref([]);
 const customer = ref({});
@@ -270,11 +272,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeletePOT);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getPOTById();
-    getProductionOrderTemplates();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeletePOT);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getPOTById();
+    await getProductionOrderTemplates();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
diff --git a/components/server/ProductionOrdersTemplateTable.vue b/components/server/ProductionOrdersTemplateTable.vue
index 75c7679..69a4075 100644
--- a/components/server/ProductionOrdersTemplateTable.vue
+++ b/components/server/ProductionOrdersTemplateTable.vue
@@ -29,7 +29,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenPOT(template.templateID)">
                             {{ template.name }}
                         </nuxt-link>
@@ -43,8 +43,8 @@
         </table>
     </div>
 </template>
-  
-  
+
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -54,6 +54,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenPOT = (id) => {
     store.commit('setChosenPOT', id);
     store.commit('changeToTemplate');
@@ -63,7 +65,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const potSearchFilter = ref('');
-const darkMode = ref(true);
+const darkMode = ref('');
 const productionOrderTemplates = ref([]);
 
 //get all productionOrder templates
@@ -110,10 +112,29 @@ const getFilteredPOTByCustomer = async () => {
     }
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 watch(customerFilter, getProductionOrderTemplates);
 watch(searchable, updateSearchTerm);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getProductionOrderTemplates();
 });
 </script>
@@ -122,9 +143,9 @@ onMounted(async () => {
 export default {
     name: "ProductionOrdersTemplateTable",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .section-darkmode {
     background-color: #2c2c2c;
@@ -179,9 +200,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
diff --git a/components/server/ProductionOrdersTemplateTableNoCustomer.vue b/components/server/ProductionOrdersTemplateTableNoCustomer.vue
deleted file mode 100644
index 6b30e87..0000000
--- a/components/server/ProductionOrdersTemplateTableNoCustomer.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<!-- <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
-        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
-        <table class="data-table" id="production-orders-template-table-no-customer">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        Name</th>
-                    <th
-                        :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ID
-                    </th>
-                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "ProductionOrdersTemplateTableNoCustomer",
-};
-</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-darkmode,
-.td-darkmode {
-    color: #ffffff;
-}
-
-.th-lightmode,
-.td-lightmode {
-    color: #000;
-}
-
-th {
-    font: 700 0.875rem/1.875rem Overpass, sans-serif;
-}
-
-.Name {
-    width: 50%;
-}
-
-.Name-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Name-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.ID {
-    width: 40%;
-}
-
-.ID-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.ID-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.User {
-    width: 10%;
-}
-
-.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/SoftwareSpecifications.vue b/components/server/SoftwareSpecifications.vue
index f8a39aa..9e6254c 100644
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@@ -14,7 +14,8 @@
                                 Version</th>
                             <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                         </tr>
-                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                            id="row-1">
                             <td
                                 :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
                                 <input type="text" v-model="item.software" @change="updateConfigItem()"
@@ -30,7 +31,8 @@
                                     :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                             </td>
                         </tr>
-                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                            id="row-1">
                             <td
                                 :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
                                 {{ item.software }}</td>
@@ -80,15 +82,17 @@
         </div>
     </section>
 </template>
-    
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -98,7 +102,7 @@ const newSoftware = ref('');
 const newVersion = ref('');
 const newLicense = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const item = ref({});
 const softwareBoolean = ref(false)
 
@@ -176,8 +180,28 @@ const updateConfigItem = async () => {
     }
 }
 
-onMounted(() => {
-    getItemById();
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getItemById();
 });
 </script>
 
@@ -185,9 +209,9 @@ onMounted(() => {
 export default {
     name: "SoftwareSpecifications",
 };
-</script>      
-      
-      
+</script>
+
+
 <style scoped>
 .software-information {
     display: flex;
diff --git a/components/server/Solution.vue b/components/server/Solution.vue
index 1821015..c1f3f86 100644
--- a/components/server/Solution.vue
+++ b/components/server/Solution.vue
@@ -142,12 +142,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenSolutionId = computed(() => store.state.chosenSolutionId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const sol = ref({});
 const customer = ref({});
 const solutions = ref([]);
@@ -338,12 +340,31 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 watch(deleteBool, confirmDeleteSolution);
 watch(customerChanged, getSolutionById);
+watch(modeChanged, getSession)
 
-onMounted(() => {
-    getSolutionById();
-    getSolutions();
+onMounted(async () => {
+    getSession();
+    await getSolutionById();
+    await getSolutions();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
diff --git a/components/server/SolutionChecklist.vue b/components/server/SolutionChecklist.vue
index a5442e8..ed6a714 100644
--- a/components/server/SolutionChecklist.vue
+++ b/components/server/SolutionChecklist.vue
@@ -150,6 +150,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -168,7 +170,7 @@ const chosenSolId = computed(() => store.state.chosenSolutionId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const solutions = ref([]);
@@ -419,11 +421,30 @@ const deleteSolTodo = async (id) => {
     await getSolutionTodosById();
 }
 
-watch(customerChanged, getSolutionById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getSolutionTodosById();
-    getSolutionById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getSolutionById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getSolutionTodosById();
+    await getSolutionById();
     triggerBackendCallsWithDelay(getAllSolutions);
 });
 </script>
diff --git a/components/server/SolutionTable.vue b/components/server/SolutionTable.vue
index b2286fd..45441c1 100644
--- a/components/server/SolutionTable.vue
+++ b/components/server/SolutionTable.vue
@@ -31,7 +31,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/solutions" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenSolution(sol.primaryID)">
                             {{ sol.solutionName }}
                         </nuxt-link>
@@ -51,7 +51,7 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
@@ -59,6 +59,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenSolution = (id) => {
     store.commit('setChosenSolution', id);
     store.commit('changeToSolution');
@@ -68,7 +70,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const solutionSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('');
 const solutions = ref([]);
 
 // update search term
@@ -115,11 +117,29 @@ const searchSolution = async () => {
     }
 }
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 watch(customerFilter, getSolutions);
 watch(searchable, updateSearchTerm);
-
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getSolutions();
 });
 </script>
@@ -256,9 +276,16 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .customerLabel {
     width: 5.5625em;
     height: 1.875em;
diff --git a/components/server/SolutionTableNoCustomer.vue b/components/server/SolutionTableNoCustomer.vue
deleted file mode 100644
index a1f83d9..0000000
--- a/components/server/SolutionTableNoCustomer.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<!-- <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-table">
-            <tbody>
-                <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                    <th
-                        :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        Name</th>
-                    <th
-                        :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        Asset</th>
-                    <th
-                        :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        Type</th>
-                    <th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
-                </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                    <td
-                        :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
-                    <td
-                        :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
-                        ...</td>
-                    <td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-  
-  
-<script setup>
-import { ref } from 'vue';
-
-const darkMode = ref(true)
-</script>
-
-<script>
-export default {
-    name: "SolutionTableNoCustomer",
-};
-</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;
-}
-
-.Name {
-    width: 45%;
-}
-
-.Name-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Name-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Asset {
-    width: 22.5%;
-}
-
-.Asset-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Asset-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.Type {
-    width: 22.5%;
-}
-
-.Type-darkmode {
-    border-right: 0.0625rem solid #000000;
-}
-
-.Type-lightmode {
-    border-right: 0.0625rem solid #8e8e8e;
-}
-
-.User {
-    width: 10%;
-}
-
-.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/TemplateChecklist.vue b/components/server/TemplateChecklist.vue
index 560b4b7..f6547dd 100644
--- a/components/server/TemplateChecklist.vue
+++ b/components/server/TemplateChecklist.vue
@@ -42,16 +42,18 @@
                         <input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.comments
-                    }}</td>
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
-                            v-model="todo.comments" @change="updatePOTTodo(todo)"
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
+        todo.comments
+    }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.comments" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                             :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                    id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newStepTodo }}
@@ -141,7 +143,7 @@
         <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Save</button>
     </section>
 </template>
-  
+
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
@@ -151,6 +153,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -166,7 +170,7 @@ const chosenPOTId = computed(() => store.state.chosenPOTId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const productionOrderTemplates = ref([]);
@@ -189,7 +193,7 @@ const deleteNewRow = () => {
 const deletePOTTodoFromNewTodos = (index) => {
     newTodos.splice(index, 1);
     newTodos.forEach((todo, i) => {
-        todo.rowID = i 
+        todo.rowID = i
     })
 }
 
@@ -411,15 +415,34 @@ const deletePOTTodo = async (id) => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } 
+    }
     await getPOTTodosById();
 }
 
-watch(customerChanged, getPOTById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getPOTTodosById();
-    getPOTById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getPOTById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getPOTTodosById();
+    await getPOTById();
     triggerBackendCallsWithDelay(getProductionOrderTemplates);
 });
 </script>
@@ -428,9 +451,9 @@ onMounted(() => {
 export default {
     name: "TemplateChecklist",
 };
-</script> 
-  
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
diff --git a/components/server/TemplateChecklistMVT.vue b/components/server/TemplateChecklistMVT.vue
index 69b2b33..e76c688 100644
--- a/components/server/TemplateChecklistMVT.vue
+++ b/components/server/TemplateChecklistMVT.vue
@@ -42,16 +42,18 @@
                         <input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.commets
-                    }}</td>
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
-                            v-model="todo.commets" @change="updateMVTTodo(todo)"
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
+        todo.commets
+    }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.commets" @change="updateMVTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                             :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
                             @click="deleteMVTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                    id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newStepTodo }}
@@ -141,7 +143,7 @@
         <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Save</button>
     </section>
 </template>
-  
+
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
@@ -149,8 +151,12 @@ import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+// import VueInputAutowidth from 'vue-input-autowidth';
+// Vue.use(VueInputAutowidth);
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -166,7 +172,7 @@ const chosenMVTId = computed(() => store.state.chosenMVTId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const maintenanceVisitTemplates = ref([]);
@@ -415,11 +421,30 @@ const deleteMVTTodo = async (id) => {
     await getMvtTodosById();
 }
 
-watch(customerChanged, getMVTById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
-    getMvtTodosById();
-    getMVTById();
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getMVTById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getMvtTodosById();
+    await getMVTById();
     triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
 });
 </script>
@@ -428,9 +453,9 @@ onMounted(() => {
 export default {
     name: "TemplateChecklist",
 };
-</script> 
-  
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
diff --git a/components/server/UserAccount.vue b/components/server/UserAccount.vue
index 05a4caf..001ec18 100644
--- a/components/server/UserAccount.vue
+++ b/components/server/UserAccount.vue
@@ -1,33 +1,267 @@
 <template>
-    <section :class="['userAccount', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
+    <section :class="['userAccount', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', loggedInUserDarkModeBoolean ? '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 class="username-email">
+                <div class="data-field" id="username">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserUsername }}</pre>
+                    <input v-if="editable" v-model="loggedInUserUsername" @change="updateUsername()"
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="email">
+                    <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Email:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserEmail }}</pre>
+                    <input v-if="editable" v-model="loggedInUserEmail" @change="updateUser()"
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <input v-if="editable"
+                    :class="[loggedInUserDarkModeBoolean ? 'input-darkmode' : '', !loggedInUserDarkModeBoolean ? 'input-lightmode' : '',]"
+                    type="button" id="changePassword" value="Change Password" @click="changePassword">
             </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 v-if="changePasswordBool && editable" class="password">
+                <div class="data-field" id="password">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">New Password:</pre>
+                    <input v-if="editable" v-model="loggedInUserNewPassword"
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="passwordRepeated">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Repeat:</pre>
+                    <input v-if="editable" v-model="loggedInUserNewPasswordRepeated"
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <input
+                    :class="[loggedInUserDarkModeBoolean ? 'input-darkmode' : '', !loggedInUserDarkModeBoolean ? 'input-lightmode' : '',]"
+                    type="button" id="savePassword" value="Save Password" @click="savePassword">
             </div>
         </div>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const editable = computed(() => store.state.editable);
+const changePasswordBool = ref(false);
+
+const loggedInUserId = ref('');
+const loggedInUserUsername = ref('');
+const loggedInUserRegistered = ref('');
+const loggedInUserLastLogin = ref('');
+const loggedInUserFullName = ref('');
+const loggedInUserEmail = ref('');
+const loggedInUserPhonenumber = ref('');
+const loggedInUserAddress = ref('');
+const loggedInUserCity = ref('');
+const loggedInUserPostcode = ref('');
+const loggedInUserAdminBool = ref('');
+const loggedInUserTechnicianBool = ref('');
+const loggedInUserReaderBool = ref('');
+const loggedInUserNewPassword = ref('');
+const loggedInUserNewPasswordRepeated = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref('');
+const employees = ref([]);
+
+const changePassword = () => {
+    changePasswordBool.value = !changePasswordBool.value
+    loggedInUserNewPassword.value = '';
+    loggedInUserNewPasswordRepeated.value = '';
+}
+
+const savePassword = async () => {
+    // hier weiter machen
+    if (loggedInUserNewPassword.value.length < 8) {
+        alert("Please choose a password with minimal eight characters!");
+        return
+    }
+    // password (repeat) must match
+    if (loggedInUserNewPassword.value != loggedInUserNewPasswordRepeated.value) {
+        alert("Your passwords don't match.");
+        return
+    }
+    try {
+        await Axios.put(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePasswordEmployee`,
+            {
+                id: loggedInUserId.value,
+                password: loggedInUserNewPassword.value,
+            }
+        )
+        alert("Password successfully updatet!");
+        changePasswordBool.value = false;
+        loggedInUserNewPassword.value = '';
+        loggedInUserNewPasswordRepeated.value = '';
+    } catch (err) {
+        console.log(err);
+    };
+}
+
+const getSession = async () => {
+    loggedInUserId.value = getItem('logged-in-user-id');
+    loggedInUserUsername.value = getItem('logged-in-user-username');
+    loggedInUserRegistered.value = getItem('logged-in-user-registered');
+    loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
+    loggedInUserFullName.value = getItem('logged-in-user-fullName');
+    loggedInUserEmail.value = getItem('logged-in-user-email');
+    loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+    loggedInUserAddress.value = getItem('logged-in-user-address');
+    loggedInUserCity.value = getItem('logged-in-user-city');
+    loggedInUserPostcode.value = getItem('logged-in-user-postcode');
+    loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
+    loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
+    loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+const updateUsername = async () => {
+    if (loggedInUserUsername.value.length < 5) {
+        alert("Your username must have at least five characters!");
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+        return;
+    }
+    var counter = 0;
+    // check if the username already exists
+    employees.value.forEach(empl => {
+        if (empl.username === loggedInUserUsername.value) {
+            counter += 1;
+        }
+    });
+    if (counter == 1) {
+        alert("This username already exists. Please choose an unique username!");
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+        return;
+    }
+    await updateUser();
+}
+
+//update data
+const updateUser = async () => {
+    if (!validateEMail(loggedInUserEmail.value)) {
+        alert("Please add a valid email!");
+        loggedInUserEmail.value = getItem('logged-in-user-email');
+        return;
+    }
+    if ((loggedInUserPhonenumber.value.length === 0) && (loggedInUserEmail.value.length === 0)) {
+        alert("Please add a phonenumber or an email!");
+        loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+        loggedInUserEmail.value = getItem('logged-in-user-email')
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: loggedInUserId.value,
+                username: loggedInUserUsername.value,
+                fullName: loggedInUserFullName.value,
+                email: loggedInUserEmail.value,
+                phonenumber: loggedInUserPhonenumber.value,
+                address: loggedInUserAddress.value,
+                city: loggedInUserCity.value,
+                postcode: loggedInUserPostcode.value,
+                adminBool: loggedInUserAdminBool.value,
+                technicianBool: loggedInUserTechnicianBool.value,
+                readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
+            }
+        )
+        setItem('logged-in-user-username', loggedInUserUsername.value)
+        setItem('logged-in-user-fullName', loggedInUserFullName.value)
+        setItem('logged-in-user-email', loggedInUserEmail.value)
+        setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
+        setItem('logged-in-user-address', loggedInUserAddress.value)
+        setItem('logged-in-user-city', loggedInUserCity.value)
+        setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
+        getSession();
+        store.commit('setLocalStorageChanged');
+        store.commit('toggleUpdateDarkMode');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// to validate the email address
+const validateEMail = (email) => {
+    const emailRegex = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/, "gm");
+    if (email === "") {
+        return true
+    }
+    return emailRegex.test(email);
+}
+
+function setItem(item, value) {
+    if (process.client) {
+        localStorage.setItem(item, value)
+        return true
+    } else {
+        return false
+    }
+}
+
+//get all employees
+const getEmployees = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        employees.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1000);
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+    await triggerBackendCallsWithDelay(getEmployees);
+});
 </script>
-  
+
 <script>
 export default {
     name: "UserAccount",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .userAccount {
     display: flex;
@@ -53,6 +287,47 @@ export default {
     background-color: #fff;
 }
 
+.input-darkmode {
+    color: #fff;
+    background-color: #212121;
+}
+
+input#changePassword:hover,
+input#savePassword:hover {
+    background-color: #454545;
+}
+
+.input-lightmode {
+    color: #212121;
+    ;
+    background-color: #EBEBEB;
+}
+
+.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;
+}
+
+.input {
+    border: none;
+}
+
 .heading {
     letter-spacing: 5%;
     font: 400 1rem/2rem Overpass, sans-serif;
@@ -66,9 +341,21 @@ export default {
     color: #000;
 }
 
-.userData {
+.username-email,
+.password {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 1rem;
+    border-radius: 0.3125rem;
+}
+
+.userData {
+    display: flex;
+    flex-direction: row;
     align-content: center;
     gap: 0.625rem
 }
@@ -137,4 +424,22 @@ export default {
 .label {
     width: 6.25rem;
 }
+
+input#changePassword,
+input#savePassword {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 10rem;
+    height: 2.5rem;
+    margin-top: 1rem;
+    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);
+}
 </style>
\ No newline at end of file
diff --git a/components/server/UserAppearance.vue b/components/server/UserAppearance.vue
index 5ed77e9..4764b39 100644
--- a/components/server/UserAppearance.vue
+++ b/components/server/UserAppearance.vue
@@ -1,36 +1,142 @@
 <template>
-    <section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['userAppearance', loggedInUserDarkModeBoolean ? '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>
+                <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
+                <pre
+                    :class="['smallLabel', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
+                <Toggle v-model="loggedInUserDarkModeBoolean" id="toggleAppearance" />
+                <pre
+                    :class="['smallLabel', loggedInUserDarkModeBoolean ? '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>
+                <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
+                <pre :class="['data', loggedInUserDarkModeBoolean ? '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 setup>
+import { ref, onMounted, watch } from 'vue';
+import Toggle from '@vueform/toggle';
+import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js'
+
+const store = useStore();
+
+const loggedInUserId = ref('');
+const loggedInUserUsername = ref('');
+const loggedInUserRegistered = ref('');
+const loggedInUserLastLogin = ref('');
+const loggedInUserFullName = ref('');
+const loggedInUserEmail = ref('');
+const loggedInUserPhonenumber = ref('');
+const loggedInUserAddress = ref('');
+const loggedInUserCity = ref('');
+const loggedInUserPostcode = ref('');
+const loggedInUserAdminBool = ref('');
+const loggedInUserTechnicianBool = ref('');
+const loggedInUserReaderBool = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref(true);
+
+function setItem(item, value) {
+    if (process.client) {
+        localStorage.setItem(item, value)
+        return true
+    } else {
+        return false
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+//update data
+const updateUser = async () => {
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: loggedInUserId.value,
+                username: loggedInUserUsername.value,
+                fullName: loggedInUserFullName.value,
+                email: loggedInUserEmail.value,
+                phonenumber: loggedInUserPhonenumber.value,
+                address: loggedInUserAddress.value,
+                city: loggedInUserCity.value,
+                postcode: loggedInUserPostcode.value,
+                adminBool: loggedInUserAdminBool.value,
+                technicianBool: loggedInUserTechnicianBool.value,
+                readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
+            }
+        )
+        setItem('logged-in-user-username', loggedInUserUsername.value)
+        setItem('logged-in-user-fullName', loggedInUserFullName.value)
+        setItem('logged-in-user-email', loggedInUserEmail.value)
+        setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
+        setItem('logged-in-user-address', loggedInUserAddress.value)
+        setItem('logged-in-user-city', loggedInUserCity.value)
+        setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
+        getSession();
+        store.commit('setLocalStorageChanged');
+        store.commit('toggleUpdateDarkMode');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const getSession = async () => {
+    loggedInUserId.value = getItem('logged-in-user-id');
+    loggedInUserUsername.value = getItem('logged-in-user-username');
+    loggedInUserRegistered.value = getItem('logged-in-user-registered');
+    loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
+    loggedInUserFullName.value = getItem('logged-in-user-fullName');
+    loggedInUserEmail.value = getItem('logged-in-user-email');
+    loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+    loggedInUserAddress.value = getItem('logged-in-user-address');
+    loggedInUserCity.value = getItem('logged-in-user-city');
+    loggedInUserPostcode.value = getItem('logged-in-user-postcode');
+    loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
+    loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
+    loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+watch(loggedInUserDarkModeBoolean, updateUser)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "UserAppearance",
 };
-</script> 
-    
-<style src="@vueform/toggle/themes/default.css"></style>   
-    
+</script>
+
+<style src="@vueform/toggle/themes/default.css"></style>
+
 <style scoped>
 .userAppearance {
     display: flex;
diff --git a/components/server/UserProfile.vue b/components/server/UserProfile.vue
index 00a031a..2c1bf4c 100644
--- a/components/server/UserProfile.vue
+++ b/components/server/UserProfile.vue
@@ -1,32 +1,250 @@
 <template>
-    <section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
+    <section :class="['userProfile', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
+        <h2 :class="['heading', loggedInUserDarkModeBoolean ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
         <div class="userData">
             <div class="rectangle-container">
-                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+                <div :class="['rectangle', loggedInUserDarkModeBoolean ? '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 class="fullname-registered-lastLogin">
+                <div class="data-field" id="fullName">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
+                    <pre v-if="!editable"
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
+                    <input v-if="editable" v-model="loggedInUserFullName" @change="updateUser()"
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+                <div class="data-field" id="registered">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
+                    <pre
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
+                </div>
+                <div class="data-field" id="lastLogin">
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
+                    <pre
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
+                </div>
+            </div>
+            <div class="info">
+                <div class="city-phonenumber">
+                    <div class="data-field" id="city">
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
+                        <input v-if="editable" v-model="loggedInUserCity" @change="updateUser()"
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="phonenumber">
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
+                        <input v-if="editable" v-model="loggedInUserPhonenumber" @change="updateUser()"
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+                <div class="postcode-address">
+                    <div class="data-field" id="postcode">
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
+                        <input v-if="editable" v-model="loggedInUserPostcode" @change="updateUser()"
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="data-field" id="address">
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
+                        <input v-if="editable" v-model="loggedInUserAddress" @change="updateUser()"
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
             </div>
         </div>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const editable = computed(() => store.state.editable);
+const loggedInUserId = ref('');
+const loggedInUserUsername = ref('');
+const loggedInUserRegistered = ref('');
+const loggedInUserLastLogin = ref('');
+const loggedInUserFullName = ref('');
+const loggedInUserEmail = ref('');
+const loggedInUserPhonenumber = ref('');
+const loggedInUserAddress = ref('');
+const loggedInUserCity = ref('');
+const loggedInUserPostcode = ref('');
+const loggedInUserAdminBool = ref('');
+const loggedInUserTechnicianBool = ref('');
+const loggedInUserReaderBool = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref('');
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+const getSession = async () => {
+    loggedInUserId.value = getItem('logged-in-user-id');
+    loggedInUserUsername.value = getItem('logged-in-user-username');
+    loggedInUserRegistered.value = getItem('logged-in-user-registered');
+    loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
+    loggedInUserFullName.value = getItem('logged-in-user-fullName');
+    loggedInUserEmail.value = getItem('logged-in-user-email');
+    loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+    loggedInUserAddress.value = getItem('logged-in-user-address');
+    loggedInUserCity.value = getItem('logged-in-user-city');
+    loggedInUserPostcode.value = getItem('logged-in-user-postcode');
+    loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
+    loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
+    loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+//update data
+const updateUser = async () => {
+    if (loggedInUserFullName.value.length == 0) {
+        alert("Please add a valid name!");
+        loggedInUserFullName.value = getItem('logged-in-user-fullName');
+        return;
+    }
+    if (loggedInUserCity.value.length == 0) {
+        alert("Please add a city!");
+        loggedInUserCity.value = getItem('logged-in-user-city');
+        return;
+    }
+    if (loggedInUserAddress.value.length == 0) {
+        alert("Please add an address!");
+        loggedInUserAddress.value = getItem('logged-in-user-address');
+        return;
+    }
+    if (!validatePhonenumber(loggedInUserPhonenumber.value)) {
+        alert("Please add a valid phonenumber!");
+        loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+        return;
+    }
+    if (!validatePostcode(loggedInUserPostcode.value)) {
+        alert("Please add a valid postcode!");
+        loggedInUserPostcode.value = getItem('logged-in-user-postcode');
+        return;
+    }
+    if ((loggedInUserPhonenumber.value.length == 0) && (loggedInUserEmail.value.length == 0)) {
+        alert("Please add a phonenumber or an email!");
+        loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+        loggedInUserEmail.value = getItem('logged-in-user-email')
+        return;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: loggedInUserId.value,
+                username: loggedInUserUsername.value,
+                fullName: loggedInUserFullName.value,
+                email: loggedInUserEmail.value,
+                phonenumber: loggedInUserPhonenumber.value,
+                address: loggedInUserAddress.value,
+                city: loggedInUserCity.value,
+                postcode: loggedInUserPostcode.value,
+                adminBool: loggedInUserAdminBool.value,
+                technicianBool: loggedInUserTechnicianBool.value,
+                readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
+            }
+        )
+        setItem('logged-in-user-username', loggedInUserUsername.value)
+        setItem('logged-in-user-fullName', loggedInUserFullName.value)
+        setItem('logged-in-user-email', loggedInUserEmail.value)
+        setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
+        setItem('logged-in-user-address', loggedInUserAddress.value)
+        setItem('logged-in-user-city', loggedInUserCity.value)
+        setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
+        getSession();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function setItem(item, value) {
+    if (process.client) {
+        localStorage.setItem(item, value)
+        return true
+    } else {
+        return false
+    }
+}
+
+// to validate the phonenumber
+const validatePhonenumber = (number) => {
+    const mobilephonenumberRegex = new RegExp(/^(((((00|\+){1,2})49([ \-/]?|[ \()/]?))|0)[1]([0-2]|[4-7])([0-9]{1})([ \-/]?|[ \()/]?)([0-9]{8}))$/, "gm");
+    const landlineRegex = new RegExp(/^0(30|40|69|89|20[12389]|21[24]|228|234|335|340|3[3-9][15]|906|[2-9][1-9]1|3(?:3(?:[0237][127]|0[3-6]|2[89]|3[458]|[46][1246]|7[589]|8[1256]|9[145])|4(?:[2347][135]|[34]7|[69][146]|48|62|76|93)|5(?:[04679][14]|[238][135]|[2469]2|[4789]6|[278]8|63|73|37|29)|6(?:[024689][13]|[03789]5|06|2[2489]|3[1246]|44|47|7[1279]|82|86)|7(?:[236][135]|2[2467]|37|4[145]|62|64|7[1-4])|8(?:[234678]1|3[468]|4[347]|6[035-9]|7[467]|83|86)|9(?:[236][135]|[04689]4|[04789]1|[03468]7|02|09|28|4[369]|6[2689]|73|76|96|98))|3[3-9][0-9]{3}|13[078]|180[235]|18[01]|19[0-9]{3}|[789]00|[2-9][0-9]{3})([0-9]{1,})$/, "gm");
+    if (number === "") {
+        return true
+    }
+    if (mobilephonenumberRegex.test(number)) {
+        return true
+    } else if (landlineRegex.test(number)) {
+        return true;
+    }
+    return false;
+}
+
+// to validate the postcode
+const validatePostcode = (postcode) => {
+    const postcodeRegex = new RegExp(/^\d{5}$/);
+    if (postcode === "") {
+        return true
+    }
+    return postcodeRegex.test(postcode);
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "UserProfile",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .userProfile {
     display: flex;
@@ -52,11 +270,19 @@ export default {
     background-color: #fff;
 }
 
+.input {
+    border: none;
+}
+
 .heading {
     letter-spacing: 5%;
     font: 400 1rem/2rem Overpass, sans-serif;
 }
 
+.div#address.data-field {
+    padding-left: 3rem;
+}
+
 .heading-darkmode {
     color: #fff;
 }
@@ -65,6 +291,18 @@ export default {
     color: #000;
 }
 
+.fullname-registered-lastLogin,
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    line-height: normal;
+    width: 50%;
+    padding: 0 1rem;
+    border-radius: 0.3125rem;
+}
+
 .userData {
     display: flex;
     flex-direction: row;
@@ -74,6 +312,26 @@ export default {
     gap: 3.125rem
 }
 
+.city-phonenumber {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
+.postcode-address {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    align-self: stretch;
+    padding: 0 1.875rem 0 0;
+    gap: 0.625rem;
+}
+
 .rectangle-container {
     display: flex;
 }
diff --git a/components/server/UserRightsList.vue b/components/server/UserRightsList.vue
index 19a52e2..41c18d3 100644
--- a/components/server/UserRightsList.vue
+++ b/components/server/UserRightsList.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <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">
@@ -212,4 +212,4 @@ th {
 .label-lightmode {
     color: #000;
 }
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/documentation/.$Datenbankmodell.drawio.bkp b/documentation/.$Datenbankmodell.drawio.bkp
index 35fa7fe..28b2cf5 100644
--- a/documentation/.$Datenbankmodell.drawio.bkp
+++ b/documentation/.$Datenbankmodell.drawio.bkp
@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-02-27T19:18:30.556Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="pTIMz7977P7LLgTl7RJZ" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-03-11T18:43:59.748Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="Ub9Iakw2VLrdzjhM2iAH" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="395" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="409" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -395,7 +395,7 @@
           <mxGeometry y="510" width="150" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="2040" y="-560" width="140" height="540" as="geometry" />
+          <mxGeometry x="2040" y="-560" width="140" height="840" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-16" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -421,33 +421,63 @@
         <mxCell id="WukdXvazNq34soQIU5Al-21" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="240" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-23" value="supplierRequest" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-14" value="deliveryAddress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="270" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-32" value="supplierOffer" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-23" value="supplierRequestDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-33" value="customerOffer" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-5" value="supplierRequest" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="330" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-34" value="customerOrder" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-32" value="supplierOfferDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="360" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-35" value="supplierOrder" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-6" value="supplierOffer" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="390" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-36" value="ingress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-33" value="clientOfferDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="420" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-37" value="egress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-7" value="clientOffer" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="450" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-38" value="ingressBill" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="WukdXvazNq34soQIU5Al-34" value="clientOrderDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="480" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="WukdXvazNq34soQIU5Al-39" value="egressBill" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-8" value="clientOrder" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
           <mxGeometry y="510" width="140" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-35" value="supplierOrderDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="540" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-9" value="supplierOrder" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="570" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-36" value="ingressDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="600" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-10" value="ingress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="630" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-11" value="egressDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="660" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-37" value="egress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="690" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-12" value="ingressBillDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="720" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-38" value="ingressBill" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="750" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="6nz9YpIofWTpyD1iDkT1-13" value="egressBillDate" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="780" width="140" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="WukdXvazNq34soQIU5Al-39" value="egressBill" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-15" vertex="1">
+          <mxGeometry y="810" width="140" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-40" value="orderingInfoIssueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2220" y="-440" width="140" height="210" as="geometry" />
         </mxCell>
@@ -470,7 +500,7 @@
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-48" value="issues" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="2040" y="120" width="140" height="210" as="geometry" />
+          <mxGeometry x="2040" y="400" width="140" height="210" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-49" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-48" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
@@ -491,7 +521,7 @@
           <mxGeometry y="180" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-56" value="issueVariants" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
-          <mxGeometry x="2220" y="180" width="140" height="240" as="geometry" />
+          <mxGeometry x="2220" y="460" width="140" height="240" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-57" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-56" vertex="1">
           <mxGeometry y="30" width="140" height="30" as="geometry" />
diff --git a/documentation/Datenbankmodell.drawio b/documentation/Datenbankmodell.drawio
index 28b2cf5..d541929 100644
--- a/documentation/Datenbankmodell.drawio
+++ b/documentation/Datenbankmodell.drawio
@@ -1,11 +1,11 @@
-<mxfile host="Electron" modified="2024-03-11T18:43:59.748Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="Ub9Iakw2VLrdzjhM2iAH" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-03-26T21:49:41.086Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="AqTSSHc8H4ak1GACwEHF" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="409" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="411" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
         <mxCell id="DauqCNUrC7Z9yIe88X-r-1" value="customers" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#94FF4D;" parent="1" vertex="1">
-          <mxGeometry x="1060" y="-1240" width="120" height="300" as="geometry" />
+          <mxGeometry x="1060" y="-1240" width="120" height="600" as="geometry" />
         </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-126" value="customerID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="30" width="120" height="30" as="geometry" />
@@ -19,21 +19,51 @@
         <mxCell id="g533v6kp8f2wI3S2lvbX-2" value="EMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="120" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="g533v6kp8f2wI3S2lvbX-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-7" value="secondEMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="150" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;address&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-8" value="thirdEMail" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="180" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="g533v6kp8f2wI3S2lvbX-1" value="phonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="210" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-10" value="secondPhonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="240" width="120" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-9" value="thirdPhonenumber" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
           <mxGeometry y="270" width="120" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-4" value="&lt;div&gt;address&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="300" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-16" value="postcode" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="330" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="DauqCNUrC7Z9yIe88X-r-15" value="city" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="360" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="jym2pQnfcZ--NBFUidHV-1" value="notes" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="390" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-1" value="&lt;div&gt;secondAddress&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="420" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-2" value="&lt;div&gt;secondPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="450" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-3" value="&lt;div&gt;secondCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="480" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-4" value="thirdAddress" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="510" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-5" value="&lt;div&gt;thirdPostcode&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="540" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="EQ1vHiXafF4bEUqPIK37-6" value="&lt;div&gt;thirdCity&lt;/div&gt;" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-1" vertex="1">
+          <mxGeometry y="570" width="120" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="DauqCNUrC7Z9yIe88X-r-18" value="masterMaintenanceVisits" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="470" y="-560" width="140" height="270" as="geometry" />
         </mxCell>
@@ -341,7 +371,7 @@
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-1" value="users" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry y="-1570" width="150" height="540" as="geometry" />
+          <mxGeometry y="-1570" width="150" height="510" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-2" value="id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="30" width="150" height="30" as="geometry" />
@@ -379,21 +409,18 @@
         <mxCell id="ioDwbpDVXUhE7vu6D29p-8" value="adminBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="360" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-9" value="technician1Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technicianBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="390" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-10" value="technician2Bool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="readerBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="420" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-11" value="technicianMonitoringBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="YxEx8JsSJKZlR_KfoIc3-1" value="darkModeBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="450" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="merchantBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
+        <mxCell id="ESQ1TkVnqClHsEl95Prr-1" value="language" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="-K6vikdffkJQkB35vOLp-1">
           <mxGeometry y="480" width="150" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="UjUgOsnL5tA5fsC7Xk2_-1" value="internBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
-          <mxGeometry y="510" width="150" height="30" as="geometry" />
-        </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2040" y="-560" width="140" height="840" as="geometry" />
         </mxCell>
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 9258f6d..ec1369f 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,126 +1,145 @@
 <template>
   <aside
-    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
-      @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+    :class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
+      id="indicator-icon" @click="toggleActionbar">
+      <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
         src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
-      <button v-if="searchIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"
-        @click="toggleSearched">
+      <button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"
-        @click="toggleFiltered">
+      <button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button v-if="instancesIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
+      <button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions"
-        @click="changeToSolutions">
+      <button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="solutions" @click="changeToSolutions">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
         </Transition>
       </button>
-      <button v-if="attachmentsIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
+      <button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button v-if="sellIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
+      <button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button v-if="archiveIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
+      <button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button v-if="addIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
+      <button v-if="addIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
         </Transition>
       </button>
-      <button v-if="addInstanceIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+      <button v-if="addInstanceIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
         </Transition>
       </button>
-      <router-link v-if="addSolutionIcon" to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
-        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
+      <router-link v-if="addSolutionIcon && !loggedInUserReaderBool" to="/solutions" class="button"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
           @click="addSolution">
           <div class="icon" id="new-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="/icons/actionbar-icons/Add-New-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
           </Transition>
         </button>
       </router-link>
-      <button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
+      <button v-if="editIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button v-if="deleteIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete"
-        @click="deleteFunc">
+      <button v-if="deleteIcon && !loggedInUserReaderBool"
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
         </Transition>
       </button>
     </nav>
@@ -128,10 +147,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
+const changeToSet = computed(() => store.state.changeToSet);
 const addIcon = computed(() => store.state.addIcon);
 const addInstanceIcon = computed(() => store.state.addInstanceIcon);
 const addSolutionIcon = computed(() => store.state.addSolutionIcon);
@@ -145,8 +165,10 @@ const archiveIcon = computed(() => store.state.archiveIcon);
 const editIcon = computed(() => store.state.editIcon);
 const deleteIcon = computed(() => store.state.deleteIcon);
 
-const darkMode = ref(true)
-const isExpanded = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
+const isExpanded = ref(true);
+const modeChanged = computed(() => store.state.updateDarkMode);
+const loggedInUserReaderBool = ref(true);
 
 // get accesss to the store
 const store = useStore()
@@ -178,8 +200,48 @@ const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
 }
 
-onMounted(() => {
+// const changeToSettingsPage = () => {
+//   store.commit('changeToSettings');
+//   if (changeToSet.value) {
+//     store.commit('toggleChangeToSet');
+//   }
+//   console.log('set')
+// }
+
+// watch(changeToSet, changeToSettingsPage)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+  const readerBool = getItem('logged-in-user-readerBool');
+  if (readerBool == 1) {
+    loggedInUserReaderBool.value = true;
+  } else {
+    loggedInUserReaderBool.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
   store.commit('changeToAssetlist')
+  if (changeToSet.value) {
+    store.commit('toggleChangeToSet');
+    store.commit('changeToSettings');
+  }
 });
 </script>
 
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 2988ba1..401e317 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,63 +1,102 @@
 <template>
-  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside
+    :class="['navbar', loggedInUserDarkModeBoolean ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <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 v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
+        id="back-icon">
+        <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="/icons/Back-Icon.svg" />
       </div>
-      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+      <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
+        id="indicator-icon" @click="ToggleSidebar">
+        <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
-      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
-        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
+      <nav id="home-menu" :class="[loggedInUserDarkModeBoolean ? 'menu-darkmode' : 'menu-lightmode']">
+        <router-link to="/home" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Home-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Home</pre>
           </Transition>
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultMasterChecklistPage()" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Checklists-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
           </Transition>
         </router-link>
-        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
+        <nuxt-link to="/assets" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()"
+          id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Assets-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
           </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
+        <router-link to="/solutions" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()"
+          id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Solutions-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
           </Transition>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultIssueSlipPage()" id="accounting-button">
+        <router-link to="/issueSlips" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultIssueSlipPage()" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Accounting-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
           </Transition>
         </router-link>
-        <router-link to="/customers" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
+        <router-link to="/customers" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
           <div class="icon" id="customers-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Customers-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Customers-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
+          </Transition>
+        </router-link>
+        <router-link v-if="loggedInUserAdminBool" to="/employees" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultEmployeesPage()" id="employees-button">
+          <div class="icon" id="customers-icon">
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Customers-Icon.svg" />
+          </div>
+          <Transition name="fade">
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
           </Transition>
         </router-link>
       </nav>
@@ -65,17 +104,20 @@
   </aside>
 </template>
 
-
-
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
-const isExpanded = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+const modeChangedLocalstorage = computed(() => store.state.modeNavbar);
+
+const loggedInUserDarkModeBoolean = ref('');
+const isExpanded = ref(true);
+const loggedInUserAdminBool = ref(false);
 
 // get accesss to the store
-const store = useStore()
 const defaultAssetPage = () => {
   store.commit('resetStore');
   store.commit('changeToAssetlist');
@@ -96,9 +138,47 @@ const defaultIssueSlipPage = () => {
   store.commit('changeToIssueSliplist')
 }
 
+const defaultEmployeesPage = () => {
+  store.commit('resetStore');
+  store.commit('changeToEmployeelist')
+}
+
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
+
+const getSession = async () => {
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeNavbarChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+  const adminBool = getItem('logged-in-user-adminBool');
+  if (adminBool == 1) {
+    loggedInUserAdminBool.value = true;
+  } else {
+    loggedInUserAdminBool.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+watch(modeChangedLocalstorage, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -106,9 +186,9 @@ export default {
   name: "Navigationbar",
 }
 </script>
-  
-  
-  
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -130,21 +210,26 @@ aside.navbar {
   gap: 0.625rem;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
+}
+
 aside.is-expanded {
   animation: expand 0.5s linear both;
-} 
+}
+
 aside.is-not-expanded {
   animation: contract 0.5s linear both;
-} 
+}
+
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
-} 
+}
+
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
-} 
+}
+
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -184,10 +269,15 @@ nav {
   gap: 1.875rem;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
+}
 
-.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
-.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
+.menu-darkmode {
+  border-bottom: 0.0625rem solid #8E8E8E;
+}
+
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
 
 
 .button,
@@ -204,19 +294,31 @@ a {
   transition: 0.2s ease-in-out;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
-.button-darkmode { background-color: #2C2C2C; } 
-.button-lightmode { background-color: #FFFFFF; } 
+}
+
+.button-darkmode {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
 
 .button-darkmode:hover,
 .indicator-darkmode:hover,
-.back-darkmode:hover {  background-color: #444444; } 
+.back-darkmode:hover {
+  background-color: #444444;
+}
 
 .button-lightmode:hover,
 .indicator-lightmode:hover,
-.back-lightmode:hover { background-color: #ACACAC; }
+.back-lightmode:hover {
+  background-color: #ACACAC;
+}
 
-.is-not-expanded>button { align-self: center; }
+.is-not-expanded>button {
+  align-self: center;
+}
 
 
 .icon {
@@ -226,18 +328,22 @@ a {
   height: 2.1875rem;
   align-items: center;
   justify-content: center;
-} 
+}
+
 #back-icon,
 #indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
-} 
+}
+
 .back-darkmode:hover,
 .back-lightmode:hover,
 .indicator-darkmode:hover,
-.indicator-lightmode:hover { cursor: pointer; }
+.indicator-lightmode:hover {
+  cursor: pointer;
+}
 
 
 img {
@@ -246,8 +352,11 @@ img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-} 
-.img-darkmode { filter: invert(100%); }
+}
+
+.img-darkmode {
+  filter: invert(100%);
+}
 
 
 .label {
@@ -258,9 +367,15 @@ img {
   letter-spacing: 0.03rem;
   white-space: nowrap;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
-} 
-.label-darkmode { color: #FFFFFF; } 
-.label-lightmode { color: #000000; }
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 
 
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
index 09afce0..d2ba162 100644
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@@ -1,29 +1,113 @@
 <template>
     <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
         <img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
-        <div class="profile">
-            <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'>username</pre>
-            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
-                <img id="picture" loading="lazy" src="" />
+        <router-link v-if="visibilityBool" to="/settings" class="button"
+            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="goToSettings">
+            <div v-if="visibilityBool" class="profile">
+                <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']"
+                    id='username'>{{ loggedInUserUsername }}</pre>
+                <div v-if="visibilityBool"
+                    :class="['picture', visibilityBool && !darkMode ? 'picture-loggedin-lightmode' : '', !visibilityBool && !darkMode ? 'picture-not-loggedin-lightmode' : '', visibilityBool && darkMode ? 'picture-loggedin-darkmode' : '', !visibilityBool && darkMode ? 'picture-not-loggedin-darkmode' : '']">
+                    <img id="picture" loading="lazy" src="" />
+                </div>
             </div>
-        </div>
+        </router-link>
     </header>
 </template>
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
-const username = ref('username');
+const store = useStore();
+// const modeChanged = computed(() => store.state.updateDarkMode);
 
+// watch(modeChanged, getSession)
+
+const loggedInUserUsername = ref('');
+const loggedInBool = ref(false);
+const visibilityBool = computed(() => loggedInBool.value);
+const storeChanged = computed(() => store.state.localStorageChanged);
+
+const route = useRoute()
+const id = computed(() => route)
+
+const darkMode = ref('')
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+const goToSettings = () => {
+    store.commit('resetStore');
+    store.commit('toggleChangeToSet');
+    store.commit('changeToSettings');
+};
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+    if ((!(id.value.fullPath == '/login')) && (!(id.value.fullPath == '/settings'))) {
+        loggedInBool.value = false;
+        loggedInBool.value = getItem('logged-in-bool');
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+    }
+    if (storeChanged.value) {
+        loggedInBool.value = getItem('logged-in-bool');
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+        store.commit('resetLocalStorageChanged');
+    }
+    if (id.value.fullPath == '/login') {
+        darkMode.value = true;
+    }
+}
+
+const checkPath = async () => {
+    if (id.value.fullPath == '/login') {
+        loggedInBool.value = false;
+        localStorage.setItem('logged-in-bool', false);
+        localStorage.removeItem('logged-in-user-id');
+        localStorage.removeItem('logged-in-user-username');
+        localStorage.removeItem('logged-in-user-registered');
+        localStorage.removeItem('logged-in-user-lastLogin');
+        localStorage.removeItem('logged-in-user-fullName');
+        localStorage.removeItem('logged-in-user-email');
+        localStorage.removeItem('logged-in-user-phonenumber');
+        localStorage.removeItem('logged-in-user-address');
+        localStorage.removeItem('logged-in-user-city');
+        localStorage.removeItem('logged-in-user-postcode');
+        localStorage.removeItem('logged-in-user-adminBool');
+        localStorage.removeItem('logged-in-user-technicianBool');
+        localStorage.removeItem('logged-in-user-readerBool');
+        localStorage.removeItem('logged-in-user-darkMode');
+        store.commit('logout');
+    }
+}
+
+watch(storeChanged, getSession);
+watch(visibilityBool, getSession);
+
+onMounted(async () => {
+    await checkPath();
+    await getSession();
+});
 </script>
 
 
 <script>
 
 export default {
-  name: "PageHeader",
+    name: "PageHeader",
 }
 </script>
 
@@ -90,6 +174,10 @@ header {
     color: #000000;
 }
 
+.pre#username {
+    text-decoration: none;
+}
+
 .picture {
     display: flex;
     width: 1.875rem;
@@ -97,11 +185,19 @@ header {
     border-radius: 50%;
 }
 
-.picture-darkmode {
+.picture-loggedin-darkmode {
     background-color: #ffffff;
 }
 
-.picture-lightmode {
+.picture-not-loggedin-darkmode {
+    background-color: #212121;
+}
+
+.picture-loggedin-lightmode {
     background-color: #000000;
 }
+
+.picture-not-loggedin-lightmode {
+    background-color: #ebebeb;
+}
 </style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 1eabdbc..c676010 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+  <main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -9,22 +9,49 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
-  
+
 <script>
 export default {
   name: "default",
 }
 </script>
-  
+
 <style scoped>
 * {
   box-sizing: border-box;
diff --git a/layouts/empty.vue b/layouts/empty.vue
index 6cd337a..4186d43 100644
--- a/layouts/empty.vue
+++ b/layouts/empty.vue
@@ -1,25 +1,63 @@
 <template>
   <PageHeader />
-  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+  <main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
     <slot />
   </main>
 </template>
-  
-  
+
+
 <script setup>
+import { ref, onMounted, watch } from 'vue';
+
 import PageHeader from "../layouts/PageHeader.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const route = useRoute()
+const id = computed(() => route)
 
+const store = useStore();
+const modeChangedLocalstorage = computed(() => store.state.modeLayout);
+
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeLayoutChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+  if (id.value.fullPath == '/login') {
+    loggedInUserDarkModeBoolean.value = true;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChangedLocalstorage, getSession);
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "empty",
 }
-</script>    
-    
-    
+</script>
+
+
 <style scoped>
 * {
   box-sizing: border-box;
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 2cbd881..3badf05 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -21,7 +21,7 @@ export default defineNuxtConfig({
       type: 'refresh',
       endpoints: { 
         signIn: { path: '/login', method: 'post' },
-        signout: false,
+        signOut: { path: '/logout', method: 'get' },
         signUp: { path: '/signup', method: 'post' },
         getSession: { path: '/session', method: 'get' },
         refresh: { path: '/refresh', method: 'post' } 
diff --git a/package-lock.json b/package-lock.json
index 491d432..73c02e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "typescript": "^5.3.3",
         "uuid": "^9.0.1",
         "vite": "^5.1.0",
+        "vue-input-autowidth": "^1.0.11",
         "vue-tsc": "^2.0.5",
         "vuex": "^4.1.0"
       },
@@ -5260,6 +5261,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+    },
     "node_modules/esbuild": {
       "version": "0.20.1",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.1.tgz",
@@ -8404,6 +8410,11 @@
         }
       }
     },
+    "node_modules/nuxt-storage": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/nuxt-storage/-/nuxt-storage-1.2.2.tgz",
+      "integrity": "sha512-quJbZ87NO7QRCSp7YZolot6VwktciSLuTS/sRl8NPz5rAWA84U5Py0y9FmAsbKTiaqJtFcCKSaJGzky948jA3w=="
+    },
     "node_modules/nuxt/node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -12648,6 +12659,14 @@
       "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
       "dev": true
     },
+    "node_modules/vue-input-autowidth": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/vue-input-autowidth/-/vue-input-autowidth-1.0.11.tgz",
+      "integrity": "sha512-uwIUHBRfueDacjjS7/lTXMHE6bDRA/RH/Jgg7WnM+Z3NnOMXlOz3hMOOBPqZZn13dT78Pc835RX8eX+Z6qNG/w==",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
diff --git a/package.json b/package.json
index 8509c88..cc73c6b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "typescript": "^5.3.3",
     "uuid": "^9.0.1",
     "vite": "^5.1.0",
+    "vue-input-autowidth": "^1.0.11",
     "vue-tsc": "^2.0.5",
     "vuex": "^4.1.0"
   }
diff --git a/pages/assets.vue b/pages/assets.vue
index 531b563..a140066 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -2,13 +2,12 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onAssetlist" />
       <AssetTable v-if="onAssetlist" />
-      <!-- <AssetTableNoCustomer v-if="onCustomerAssetlist" /> -->
       <Asset v-if="onAsset" />
       <HardwareSpecifications v-if="onAsset" />
       <SoftwareSpecifications v-if="onAsset" />
@@ -21,11 +20,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
-
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
-// import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
 import Asset from "../components/server/Asset.vue";
 import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
@@ -37,9 +34,10 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onAssetlist = computed(() => store.state.onAssetlist);
-// const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
 const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
+const modeChanged = computed(() => store.state.updateDarkMode);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
@@ -51,7 +49,28 @@ const defaultAssetPage = () => {
   store.commit('changeToAssetlist')
 }
 
-const darkMode = ref(true)
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
diff --git a/pages/customers.vue b/pages/customers.vue
index 84b7d0f..72092af 100644
--- a/pages/customers.vue
+++ b/pages/customers.vue
@@ -1,23 +1,23 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
     </div>
     <div id="content-body">
-      <CustomerTable v-if="onCustomerlist"/>
-      <Customer v-if="onCustomer"/>
-      <CustomerQuickAccess v-if="onCustomer"/>
-      <CustomerEmployeeList v-if="onEmployeelist"/>
-      <CustomerEmployee v-if="onEmployee"/>
-      <CustomerDepartmentList v-if="onDepartmentlist"/>
-      <CustomerDepartment v-if="onDepartment"/>
-      <CustomerDepartmentEmployeeList v-if="onDepartment"/>
+      <CustomerTable v-if="onCustomerlist" />
+      <Customer v-if="onCustomer" />
+      <CustomerQuickAccess v-if="onCustomer" />
+      <CustomerEmployeeList v-if="onEmployeelist" />
+      <CustomerEmployee v-if="onEmployee" />
+      <CustomerDepartmentList v-if="onDepartmentlist" />
+      <CustomerDepartment v-if="onDepartment" />
+      <CustomerDepartmentEmployeeList v-if="onDepartment" />
     </div>
   </section>
 </template>
-  
+
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import CustomerTable from "../components/server/CustomerTable.vue";
 import Customer from "../components/server/Customer.vue";
@@ -27,13 +27,18 @@ import CustomerEmployee from "../components/server/CustomerEmployee.vue";
 import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
 import CustomerDepartment from '~/components/server/CustomerDepartment.vue';
 import CustomerDepartmentEmployeeList from '~/components/server/CustomerDepartmentEmployeeList.vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
   layout: 'default',
   title: 'Customers'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 // to render the right components
 const onCustomerlist = ref(true)
@@ -42,6 +47,29 @@ const onEmployeelist = ref(true)
 const onEmployee = ref(true)
 const onDepartmentlist = ref(true)
 const onDepartment = ref(true)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -49,8 +77,8 @@ export default {
   name: "CustomersPage",
 }
 </script>
-  
-    
+
+
 <style scoped>
 * {
   box-sizing: border-box;
diff --git a/pages/employees.vue b/pages/employees.vue
new file mode 100644
index 0000000..bbbfbf3
--- /dev/null
+++ b/pages/employees.vue
@@ -0,0 +1,134 @@
+<template>
+  <section id="content">
+    <div id="content-header">
+      <router-link to="/employees" class="button" id="employees-button" @click="defaultEmployeePage()">
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Employees</h1>
+      </router-link>
+    </div>
+    <div id="content-body">
+      <EmployeeSearch v-if="onEmployeelist" />
+      <Employeetable v-if="onEmployeelist" />
+      <Employee v-if="onEmployee" />
+      <EmployeeGroups v-if="onEmployee" />
+    </div>
+  </section>
+</template>
+
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+import EmployeeSearch from "../components/EmployeeSearch.vue";
+import Employeetable from "../components/server/EmployeeTable.vue";
+import Employee from "../components/server/Employee.vue";
+import EmployeeGroups from "../components/server/EmployeeGroups.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const router = useRouter()
+
+const store = useStore();
+const onEmployeelist = computed(() => store.state.onEmployeelist);
+const onEmployee = computed(() => store.state.onEmployee);
+const loggedInUserDarkModeBoolean = ref('');
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+definePageMeta({
+  layout: 'default',
+  title: 'Employees'
+})
+
+const defaultEmployeePage = () => {
+  store.commit('resetStore');
+  store.commit('changeToEmployeelist')
+}
+
+const getSession = async () => {
+  const loggedInUserAdminBool = getItem('logged-in-user-adminBool');
+  if (loggedInUserAdminBool == 0) {
+    router.push('/home');
+  };
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
+</script>
+
+<script>
+export default {
+  name: "EmployeePage",
+}
+</script>
+
+<style scoped>
+* {
+  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;
+}
+
+.h1-darkmode {
+  color: #fff;
+}
+
+.h1-lightmode {
+  color: #000;
+}
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+
+.button {
+  text-decoration: none;
+}
+</style>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
index c45fbce..f972764 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -2,7 +2,7 @@
   <Navigationbar />
   <section id="content">
     <div id="content-header">
-      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
+      <pre :class="[loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
     </div>
     <div id="content-body">
       <Dashboard />
@@ -10,30 +10,63 @@
     </div>
   </section>
 </template>
-  
-  
+
+
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import Navigationbar from "../layouts/Navigationbar.vue";
 import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+const modeChangedLocalstorage = computed(() => store.state.mode);
 
 definePageMeta({
   layout: 'empty',
   title: 'Home'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+watch(modeChangedLocalstorage, getSession)
+
+onMounted(() => {
+  getSession();
+});
 </script>
 
 <script>
 export default {
   name: "HomePage",
 }
-</script>   
-    
-    
+</script>
+
+
 <style>
 * {
   box-sizing: border-box;
diff --git a/pages/index.vue b/pages/index.vue
index 83d13bb..109bb73 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,24 +1,52 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
+      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
     </div>
     <div id="content-body">
-      <section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
+      <section :class="[loggedInUserDarkModeBoolean ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
     </div>
   </section>
 </template>
-  
-  
+
+
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
   layout: 'default',
   title: 'Test'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -26,9 +54,9 @@ export default {
   name: "Testpage",
 }
 </script>
-    
-    
-    
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;
diff --git a/pages/issueItems.vue b/pages/issueItems.vue
index 5c90e69..d506266 100644
--- a/pages/issueItems.vue
+++ b/pages/issueItems.vue
@@ -2,7 +2,8 @@
     <section id="content">
         <div id="content-header">
             <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips
+                </h1>
             </router-link>
             &nbsp;
             &nbsp;
@@ -21,23 +22,23 @@
             &nbsp;
             &nbsp;
             <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues
+                </h1>
             </router-link>
         </div>
         <div id="content-body">
             <IssueStateSearch v-if="onIssueItemList" />
-            <IssueTable v-if="onIssueItemList"/>
-            <Issue v-if="onIssueItem"/>
-            <IssueVariants v-if="onIssueItem"/>
-            <IssueVariant v-if="onIssueItemVariant"/>
+            <IssueTable v-if="onIssueItemList" />
+            <Issue v-if="onIssueItem" />
+            <IssueVariants v-if="onIssueItem" />
+            <IssueVariant v-if="onIssueItemVariant" />
         </div>
     </section>
 </template>
-    
-    
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
 import IssueStateSearch from "../components/IssueStateSearch.vue";
 import IssueTable from "../components/server/IssueTable.vue";
 import Issue from "../components/server/Issue.vue";
@@ -47,6 +48,7 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onIssueItemList = computed(() => store.state.onIssueItemList);
 const onIssueItem = computed(() => store.state.onIssueItem);
 const onIssueItemVariant = computed(() => store.state.onIssueItemVariant);
@@ -56,27 +58,50 @@ definePageMeta({
     title: 'Issue Items'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 const defaultIssueSlipPage = () => {
-  store.commit('resetStore');
-  store.commit('changeToIssueSliplist')
+    store.commit('resetStore');
+    store.commit('changeToIssueSliplist')
 }
 
 const defaultIssuePage = () => {
-  store.commit('resetStore');
-  store.commit('changeToIssueItemList')
+    store.commit('resetStore');
+    store.commit('changeToIssueItemList')
 }
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "IssueItemsPage",
 }
 </script>
-      
-      
-      
+
+
+
 <style scoped>
 * {
     box-sizing: border-box;
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index b6feba9..ab99199 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -2,7 +2,8 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips
+        </h1>
       </router-link>
       &nbsp;
       &nbsp;
@@ -21,13 +22,12 @@
       &nbsp;
       &nbsp;
       <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onIssueSliplist" />
       <IssueSlipTable v-if="onIssueSliplist" />
-      <!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
       <IssueSlip v-if="onIssueSlip" />
       <OrderingInformation v-if="onIssueSlip" />
       <Accounting v-if="onIssueSlip" />
@@ -37,11 +37,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
-
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
-// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
@@ -49,17 +47,16 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onIssueSliplist = computed(() => store.state.onIssueSliplist);
-// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
 const onIssueSlip = computed(() => store.state.onIssueSlip);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
   title: 'Issue Slips'
 })
 
-const darkMode = ref(true)
-
 const defaultIssueSlipPage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueSliplist')
@@ -69,6 +66,29 @@ const defaultIssuePage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueItemList')
 }
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
diff --git a/pages/login.vue b/pages/login.vue
index dd8039f..d741d43 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,7 +1,7 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name"> </pre>
+      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name-login"></pre>
     </div>
     <div id="content-body">
       <LoginForm />
@@ -11,7 +11,7 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 import LoginForm from "../components/LoginForm.vue";
 
@@ -21,7 +21,28 @@ definePageMeta({
   auth: false,
 })
 
-const darkMode = ref(true)
+const darkMode = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -29,9 +50,9 @@ export default {
   name: "LoginPage",
 }
 </script>
-  
-  
-  
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -59,7 +80,8 @@ export default {
   height: 3.125rem;
 }
 
-#page-name {
+#page-name-login {
+  text-decoration: none;
   letter-spacing: 5%;
   font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica, sans-serif;
 }
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index 32a20fb..cece5f1 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -3,7 +3,8 @@
     <div id="content-header">
       <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
         @click="defaultMasterChecklistPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance
+          visits</h1>
       </router-link>
       &nbsp;
       &nbsp;
@@ -23,13 +24,13 @@
       &nbsp;
       <router-link to="/productionOrders" class="button" id="productionOrders-button"
         @click="defaultMasterChecklistPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders
+        </h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onTemplatelist" />
       <MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
-      <!-- <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" /> -->
       <MaintenanceVisitsTemplate v-if="onTemplate" />
       <TemplateChecklistMVT v-if="onTemplate" />
       <TemplateSearch v-if="onInstancelist" />
@@ -39,14 +40,12 @@
     </div>
   </section>
 </template>
-      
-      
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
-// import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
 import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -57,33 +56,55 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
   title: 'Maintenance Visits'
 })
 
-const darkMode = ref(true)
-
 const defaultMasterChecklistPage = () => {
   store.commit('resetStore');
   store.commit('changeToTemplatelist')
 }
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
-    
+
 <script>
 export default {
   name: "MaintenanceVisitsPage",
 }
 </script>
-        
-        
-        
+
+
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -115,6 +136,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/productionOrders.vue b/pages/productionOrders.vue
index 57beea3..fac56f2 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -3,7 +3,7 @@
         <div id="content-header">
             <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
                 @click="defaultMasterChecklistPage">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
             </router-link>
             &nbsp;
             &nbsp;
@@ -22,31 +22,28 @@
             &nbsp;
             &nbsp;
             <router-link to="/productionOrders" class="button" id="productionOrders-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
                     @click="defaultMasterChecklistPage()">Production orders</h1>
             </router-link>
         </div>
         <div id="content-body">
-            <CustomerSearch v-if="onTemplatelist"/>
-            <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
-            <!-- <ProductionOrdersTemplateTableNoCustomer 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"/>
+            <CustomerSearch v-if="onTemplatelist" />
+            <ProductionOrdersTemplateTable v-if="onTemplatelist" />
+            <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>
-    
-    
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
-// import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
 import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
 import TemplateChecklist from "../components/server/TemplateChecklist.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -57,32 +54,54 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
     layout: 'default',
     title: 'Production Orders'
 })
 
-const darkMode = ref(true)
-
 const defaultMasterChecklistPage = () => {
     store.commit('resetStore');
     store.commit('changeToTemplatelist')
 }
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "ProductionOrdersPage",
 }
-</script>     
-      
-      
+</script>
+
+
 <style scoped>
 * {
     box-sizing: border-box;
@@ -114,6 +133,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/settings.vue b/pages/settings.vue
index 9abcd93..539be79 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,79 +1,121 @@
 <template>
     <section id="content">
         <div id="content-header">
-            <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
+            <pre :class="[loggedInUserDarkModeBoolean ? '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">
+                <input :class="[(loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-darkmode' : '',
+            (loggedInUserDarkModeBoolean && !accountSelected) ? 'input-darkmode' : '',
+            (!loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-lightmode' : '',
+            (!loggedInUserDarkModeBoolean && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account"
+                    value="Account" @click="ActivateAccount">
+                <input :class="[(loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-darkmode' : '',
+            (loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-darkmode' : '',
+            (!loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-lightmode' : '',
+            (!loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-lightmode' : '',]" type="button"
+                    id="appearance" value="Appearance" @click="ActivateAppearance">
+                <input :class="[(loggedInUserDarkModeBoolean) ? 'input-darkmode' : '',
+            (!loggedInUserDarkModeBoolean) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout"
+                    @click="handleLogout">
             </div>
-            <UserProfile v-if="accountSelected"/>
-            <UserAccount v-if="accountSelected"/>
-            <UserAppearance v-if="appearanceSelected"/>
-            <UserRightsList v-if="usersSelected"/>
+            <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 { ref, onMounted, watch } 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";
+import { useStore } from "vuex";
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const { signOut } = useAuth()
 
 definePageMeta({
     layout: 'default',
     title: 'Settings'
 })
 
-const darkMode = ref(true)
-
+const loggedInUserDarkModeBoolean = ref('');
 const accountSelected = ref(true)
 const appearanceSelected = ref(false)
-const usersSelected = ref(false)
+
+const handleLogout = async () => {
+    localStorage.setItem('logged-in-bool', false);
+    localStorage.removeItem('logged-in-user-id');
+    localStorage.removeItem('logged-in-user-username');
+    localStorage.removeItem('logged-in-user-registered');
+    localStorage.removeItem('logged-in-user-lastLogin');
+    localStorage.removeItem('logged-in-user-fullName');
+    localStorage.removeItem('logged-in-user-email');
+    localStorage.removeItem('logged-in-user-phonenumber');
+    localStorage.removeItem('logged-in-user-address');
+    localStorage.removeItem('logged-in-user-city');
+    localStorage.removeItem('logged-in-user-postcode');
+    localStorage.removeItem('logged-in-user-adminBool');
+    localStorage.removeItem('logged-in-user-technicianBool');
+    localStorage.removeItem('logged-in-user-readerBool');
+    localStorage.removeItem('logged-in-user-darkMode');
+    store.commit('resetChangeToSet');
+    store.commit('setLocalStorageChanged');
+    let res = await signOut({ callbackUrl: '/login' })
+    store.commit('resetStore');
+    store.commit('logout');
+}
 
 // fuctions to change the option button
 const ActivateAccount = () => {
     accountSelected.value = true;
     appearanceSelected.value = false;
-    usersSelected.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;
 };
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "SettingsPage",
 }
-</script>   
-      
-      
+</script>
+
+
 <style>
 * {
     box-sizing: border-box;
@@ -131,7 +173,7 @@ export default {
 
 input#account,
 input#appearance,
-input#users {
+input#logout {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -157,6 +199,10 @@ input#users {
     background-color: #454545;
 }
 
+input#logout:hover {
+    background-color: #454545;
+}
+
 .input-lightmode {
     color: #000;
     background-color: #E4E4E4;
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 83b5810..0026359 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -2,13 +2,12 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onSolutionlist" />
       <SolutionTable v-if="onSolutionlist" />
-      <!-- <SolutionTableNoCustomer v-if="onCustomerSolutionlist" /> -->
       <Solution v-if="onSolution" />
       <SolutionChecklist v-if="onSolution" />
     </div>
@@ -16,20 +15,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
+import { ref, onMounted, watch } from 'vue';
 import CustomerSearch from "../components/CustomerSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
-// import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onSolutionlist = computed(() => store.state.onSolutionlist);
-// const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
 const onSolution = computed(() => store.state.onSolution);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
@@ -41,7 +39,28 @@ const defaultSolutionPage = () => {
   store.commit('changeToSolutionlist')
 }
 
-const darkMode = ref(true)
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
diff --git a/pinia.js b/pinia.js
deleted file mode 100644
index e69de29..0000000
diff --git a/plugins/vuex.js b/plugins/vuex.js
index 8efaf70..415eb51 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -128,6 +128,42 @@ const store = createStore({
             newAmountII: '',
             newPropertiesII: '',
             chosenIssueVariantId: -1,
+
+            onEmployeelist: true,
+            onEmployee: false,
+            chosenEmployeeId: -1,
+            newUsernameEmp: '',
+            newPasswordEmp: '',
+            newPasswordRepeatedEmp: '',
+            newFullNameEmp: '',
+            newEmailEmp: '',
+            newPhonenumberEmp: '',
+            newAddressEmp: '',
+            newCityEmp: '',
+            newPostcodeEmp: '',
+
+            loggedInUserId: '',
+            loggedInUserUsername: '',
+            loggedInUserRegistered: '',
+            loggedInUserLastLogin: '',
+            loggedInUserFullName: '',
+            loggedInUserEmail: '',
+            loggedInUserPhonenumber: '',
+            loggedInUserAddress: '',
+            loggedInUserCity: '',
+            loggedInUserPostcode: '',
+            loggedInUserAdminBool: false,
+            loggedInUserTechnicianBool: false,
+            loggedInUserReaderBool: false,
+            localStorageChanged: false,
+            mode: false,
+            modeQuickAccess: false,
+            modeDashboard: false,
+            modeNavbar: false,
+            modeLayout: false,
+
+            changeToSet: false,
+            updateDarkMode: false,
         };
     },
     mutations: {
@@ -135,6 +171,18 @@ const store = createStore({
         toggleEditable(state) {
             state.editable = !state.editable
         },
+        toggleChangeToSet(state) {
+            state.changeToSet = !state.changeToSet
+        },
+        toggleUpdateDarkMode(state) {
+            state.updateDarkMode = !state.updateDarkMode
+        },
+        resetUpdateDarkMode(state) {
+            state.updateDarkMode = false
+        },
+        resetChangeToSet(state) {
+            state.changeToSet = false
+        },
         toggleFiltered(state) {
             if (state.filtered == false) {
                 state.filtered = true
@@ -159,10 +207,6 @@ const store = createStore({
             state.changedCustomerId = id
         },
 
-        refresh() {
-            //
-        },
-
         // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
@@ -458,8 +502,8 @@ const store = createStore({
             state.addSolutionIcon = false
             state.solutionIcon = false
             state.addInstanceIcon = false
-            state.filterIcon = true
-            state.searchIcon = true
+            state.filterIcon = false
+            state.searchIcon = false
             state.instancesIcon = false
             state.attachmentsIcon = false
             state.sellIcon = false
@@ -486,6 +530,57 @@ const store = createStore({
             state.deleteIcon = true
         },
 
+        // functions to change the user pages
+        changeToEmployeelist(state) {
+            state.onEmployeelist = true
+            state.onEmployee = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
+        },
+        changeToEmployee(state) {
+            state.onEmployeelist = false
+            state.onEmployee = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
+        },
+
+        changeToSettings(state) {
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = false
+        },
+
         // functions to update the asset
         updateAssetComponent(state, asset) {
             state.newAssetName = asset.assetName
@@ -556,7 +651,7 @@ const store = createStore({
             state.newUserIS = is.user
             state.newDeliveryAddressIS = is.deliveryAddress
         },
-        
+
         // functions to update the accounting info component
         updateOrderingInfoComponent(state, o) {
             state.newOIs = o.ois
@@ -593,6 +688,85 @@ const store = createStore({
             state.newPropertiesII = is.properties
         },
 
+        // functions to update the employee component
+        updateEmployeeComponent(state, employee) {
+            state.newUsernameEmp = employee.username
+            state.newPasswordEmp = employee.password
+            state.newPasswordRepeatedEmp = employee.passwordRepeated
+            state.newFullNameEmp = employee.fullName
+            state.newEmailEmp = employee.email
+            state.newPhonenumberEmp = employee.phonenumber
+            state.newAddressEmp = employee.address
+            state.newCityEmp = employee.city
+            state.newPostcodeEmp = employee.postcode
+        },
+
+        setLocalStorageChanged(state) {
+            state.localStorageChanged = !state.localStorageChanged
+        },
+        resetLocalStorageChanged(state) {
+            state.localStorageChanged = false
+        },
+        setModeChanged(state) {
+            state.mode = !state.mode
+        },
+        resetModeChanged(state) {
+            state.mode = false
+        },
+        setModeQuickAccessChanged(state) {
+            state.modeQuickAccess = !state.modeQuickAccess
+        },
+        resetModeQuickAccessChanged(state) {
+            state.modeQuickAccess = false
+        },
+        setModeDashboardChanged(state) {
+            state.modeDashboard = !state.modeDashboard
+        },
+        resetModeDashboardChanged(state) {
+            state.modeDashboard = false
+        },
+        setModeNavbarChanged(state) {
+            state.modeNavbar = !state.modeNavbar
+        },
+        resetModeNavbarChanged(state) {
+            state.modeNavbar = false
+        },
+        setModeLayoutChanged(state) {
+            state.modeLayout = !state.modeLayout
+        },
+        resetModeLayoutChanged(state) {
+            state.modeLayout = false
+        },
+
+        // function to set the logged in user
+        setLoggedInUser(state, user) {
+            state.loggedInUserId = user.id
+            state.loggedInUserUsername = user.username
+            state.loggedInUserRegistered = user.registered
+            state.loggedInUserLastLogin = user.lastLogin
+            state.loggedInUserFullName = user.fullName
+            state.loggedInUserEmail = user.email
+            state.loggedInUserPhonenumber = user.phonenumber
+            state.loggedInUserAddress = user.address
+            state.loggedInUserCity = user.city
+            state.loggedInUserPostcode = user.postcode
+            if (user.adminBool == 1) {
+                state.loggedInUserAdminBool = true
+            } else {
+                state.loggedInUserAdminBool = false
+            }
+            if (user.technicianBool == 1) {
+                state.loggedInUserTechnicianBool = true
+            } else {
+                state.loggedInUserTechnicianBool = false
+            }
+            if (user.readerBool == 1) {
+                state.loggedInUserReaderBool = true
+            } else {
+                state.loggedInUserReaderBool = false
+            }
+        },
+
         // function to set the chosen asset
         setChosenAsset(state, id) {
             state.chosenAssetId = id
@@ -623,11 +797,16 @@ const store = createStore({
             state.chosenIssueId = id
         },
 
-         // function to set the chosen issue variant
-         setChosenIssueVariant(state, id) {
+        // function to set the chosen issue variant
+        setChosenIssueVariant(state, id) {
             state.chosenIssueVariantId = id
         },
 
+        // function to set the chosen user
+        setChosenEmployee(state, id) {
+            state.chosenEmployeeId = id
+        },
+
         // function to reset the pages
         resetStore(state) {
             state.editable = false
@@ -732,6 +911,35 @@ const store = createStore({
             state.newStateII = ''
             state.newAmountII = ''
             state.newPropertiesII = ''
+
+            // reset the employee page variables
+            state.chosenEmployeeId = -1
+            state.newUsernameEmp = ''
+            state.newPasswordEmp = ''
+            state.newPasswordRepeatedEmp = ''
+            state.newFullNameEmp = ''
+            state.newEmailEmp = ''
+            state.newPhonenumberEmp = ''
+            state.newAddressEmp = ''
+            state.newCityEmp = ''
+            state.newPostcodeEmp = ''
+        },
+
+        // function to logout 
+        logout(state) {
+            state.loggedInUserId = ''
+            state.loggedInUserUsername = ''
+            state.loggedInUserRegistered = ''
+            state.loggedInUserLastLogin = ''
+            state.loggedInUserFullName = ''
+            state.loggedInUserEmail = ''
+            state.loggedInUserPhonenumber = ''
+            state.loggedInUserAddress = ''
+            state.loggedInUserCity = ''
+            state.loggedInUserPostcode = ''
+            state.loggedInUserAdminBool = false
+            state.loggedInUserTechnicianBool = false
+            state.loggedInUserReaderBool = false
         },
 
         // functions to (undo) delete an asset
@@ -777,6 +985,10 @@ const store = createStore({
             state.onIssueItemList = false
             state.onIssueItemVariant = false
             state.onIssueItem = true
+
+            // set the employee variables
+            state.onEmployeelist = false
+            state.onEmployee = true
         },
     },
 });
diff --git a/server/api/auth/login.ts b/server/api/auth/login.ts
index 3dedd5a..e652e65 100644
--- a/server/api/auth/login.ts
+++ b/server/api/auth/login.ts
@@ -2,9 +2,8 @@ import axios, { AxiosError } from 'axios';
 import serversideConfig from '../../../serversideConfig';
 import https from 'https';
 
+let loggedInUser = {};
 let errorMsg = 'error';
-//const { data } = useAuthState()
-
 
 export default eventHandler(async (event) => {
 
@@ -29,20 +28,19 @@ export default eventHandler(async (event) => {
             password: body.password,
         });
         const sessionToken = res.data.token;
-        const user = res.data.user;
+        loggedInUser = res.data.user;
 
-        console.log('sessionToken: ', sessionToken);
-        console.log('user: ', user);
+        // console.log('sessionToken: ', sessionToken);
 
         setResponseStatus(event, 200);
         const resBody = {
             token: sessionToken,
-            message: 'Login successful'
+            message: 'Login successful',
         };
         console.log('resBody: ', resBody);
 
         return resBody;
-    } 
+    }
     catch (err) {
         if (axios.isAxiosError(err)) {
             const axiosError = err as AxiosError;
@@ -67,8 +65,6 @@ export default eventHandler(async (event) => {
         statusCode: 400,
         statusMessage: errorMsg,
     })
-
-
 })
 
 
@@ -93,3 +89,5 @@ export default defineEventHandler(async (event) => {
     };
     return resBody;
 })*/
+
+export { loggedInUser, errorMsg };
\ No newline at end of file
diff --git a/server/api/auth/logout.ts b/server/api/auth/logout.ts
new file mode 100644
index 0000000..da75c24
--- /dev/null
+++ b/server/api/auth/logout.ts
@@ -0,0 +1,3 @@
+import { eventHandler } from 'h3'
+
+export default eventHandler(() => ({ status: 'OK ' }))
\ No newline at end of file
diff --git a/server/api/deleteEmployee/[id].ts b/server/api/deleteEmployee/[id].ts
new file mode 100644
index 0000000..90900c6
--- /dev/null
+++ b/server/api/deleteEmployee/[id].ts
@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/employees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})
diff --git a/server/api/getAllEmployees.ts b/server/api/getAllEmployees.ts
new file mode 100644
index 0000000..3d979e0
--- /dev/null
+++ b/server/api/getAllEmployees.ts
@@ -0,0 +1,23 @@
+import { employees, errorMsg } from "../middleware/employees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return employees
+})
diff --git a/server/api/getEmployee/[id].ts b/server/api/getEmployee/[id].ts
new file mode 100644
index 0000000..6ff6fb3
--- /dev/null
+++ b/server/api/getEmployee/[id].ts
@@ -0,0 +1,23 @@
+import { employee, errorMsg } from "../../middleware/employees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return employee
+})
diff --git a/server/api/getSelectedEmployeesByEmployee/[id].ts b/server/api/getSelectedEmployeesByEmployee/[id].ts
new file mode 100644
index 0000000..c8871ba
--- /dev/null
+++ b/server/api/getSelectedEmployeesByEmployee/[id].ts
@@ -0,0 +1,23 @@
+import { selectedEmployeesByEmployee, errorMsg } from "../../middleware/employees";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return selectedEmployeesByEmployee
+})
diff --git a/server/api/login.ts b/server/api/login.ts
new file mode 100644
index 0000000..72ea6a9
--- /dev/null
+++ b/server/api/login.ts
@@ -0,0 +1,16 @@
+import { loggedInUser } from "../api/auth/login";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    setResponseStatus(event, 200)
+    return loggedInUser
+})
diff --git a/server/api/updateEmployee.ts b/server/api/updateEmployee.ts
new file mode 100644
index 0000000..95e9057
--- /dev/null
+++ b/server/api/updateEmployee.ts
@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/employees";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})
\ No newline at end of file
diff --git a/server/api/updatePasswordEmployee.ts b/server/api/updatePasswordEmployee.ts
new file mode 100644
index 0000000..95e9057
--- /dev/null
+++ b/server/api/updatePasswordEmployee.ts
@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/employees";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})
\ No newline at end of file
diff --git a/server/middleware/employees.ts b/server/middleware/employees.ts
new file mode 100644
index 0000000..7ec75f6
--- /dev/null
+++ b/server/middleware/employees.ts
@@ -0,0 +1,271 @@
+import axios, { AxiosError } from 'axios';
+import serversideConfig from '../../serversideConfig';
+import https from 'https';
+
+let employees = [];
+let employee = {};
+let errorMsg = '';
+let selectedEmployeesByEmployee = [];
+let configItemsFromCustomer = [];
+let selectedConfigItemsByAsset = [];
+
+export default defineEventHandler(async (event) => {
+
+    const agent = new https.Agent({
+        rejectUnauthorized: false,
+    });
+
+    const axiosInstance = axios.create({
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: "*",
+        },
+        httpsAgent: agent
+    });
+
+    if (event.path.startsWith("/api/getAllEmployees")) {
+        // get all users object from backend
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/users`);
+            employees = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getEmployee")) {
+        // get employee object from backend
+        let employeeId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        employeeId = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/user/${employeeId}`);
+            employee = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    // if (event.path.startsWith("/api/getCIFromCustomer")) {
+    //     // get all config items from a customer from backend
+    //     let itemId = null;
+    //     const path = event._path;
+    //     const pathSegments = path.split('/');
+    //     itemId = pathSegments[pathSegments.length - 1];
+
+    //     try {
+    //         let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/configItemByCustomerID/${itemId}`);
+    //         configItemsFromCustomer = res.data;
+    //     } catch (err) {
+    //         if (axios.isAxiosError(err)) {
+    //             const axiosError = err as AxiosError;
+
+    //             if (axiosError.response) {
+    //                 // Axios error
+    //                 console.error(axiosError.response.data.message);
+    //                 errorMsg = axiosError.response.data.message;
+    //             } else if (axiosError.request) {
+    //                 // If error was caused by the request
+    //                 console.error(axiosError.request);
+    //             } else {
+    //                 // Other errors
+    //                 console.error('Error', axiosError.message);
+    //             }
+    //         } else {
+    //             // No AxiosError
+    //             console.error('Error', err);
+    //         }
+    //     }
+    // }
+
+    if (event.path.startsWith("/api/updateEmployee")) {
+        const body = await readBody(event)
+        // update the employee in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/user`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/updatePasswordEmployee")) {
+        const body = await readBody(event)
+        // update the employee in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/updatePassword`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/deleteEmployee")) {
+        let employeeId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        employeeId = pathSegments[pathSegments.length - 1];
+
+        // delete the user in the backend
+        try {
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/user/${employeeId}`);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    if (event.path.startsWith("/api/getSelectedEmployeesByEmployee")) {
+        // get selected employees object by employee from backend
+        let filteredEmployee = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredEmployee = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedUsersByUser/${filteredEmployee}`);
+            selectedEmployeesByEmployee = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
+
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
+
+    // if (event.path.startsWith("/api/getSelectedConfigItemsByAsset")) {
+    //     // get selected config items object by asset from backend
+    //     let filteredAsset = null;
+    //     const path = event._path;
+    //     const pathSegments = path.split('/');
+    //     filteredAsset = pathSegments[pathSegments.length - 1];
+
+    //     try {
+    //         let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedConfigItemsByAssetName/${filteredAsset}`);
+    //         selectedConfigItemsByAsset = res.data;
+    //     } catch (err) {
+    //         if (axios.isAxiosError(err)) {
+    //             const axiosError = err as AxiosError;
+
+    //             if (axiosError.response) {
+    //                 // Axios error
+    //                 console.error(axiosError.response.data.message);
+    //                 errorMsg = axiosError.response.data.message;
+    //             } else if (axiosError.request) {
+    //                 // If error was caused by the request
+    //                 console.error(axiosError.request);
+    //             } else {
+    //                 // Other errors
+    //                 console.error('Error', axiosError.message);
+    //             }
+    //         } else {
+    //             // No AxiosError
+    //             console.error('Error', err);
+    //         }
+    //     }
+    // }
+})
+
+export { employees, employee, selectedEmployeesByEmployee, selectedConfigItemsByAsset, configItemsFromCustomer, errorMsg };
\ No newline at end of file
diff --git a/server/middleware/signUp.ts b/server/middleware/signUp.ts
index ea0e7c7..2ef5a2e 100644
--- a/server/middleware/signUp.ts
+++ b/server/middleware/signUp.ts
@@ -17,7 +17,7 @@ export default defineEventHandler(async (event) => {
         httpsAgent: agent
     });
 
-    if (event.path.startsWith("/signup")) {
+    if (event.path.startsWith("/api/signup")) {
         const body = await readBody(event)
 
         // do the post request in the backend