diff --git a/app.vue b/app.vue
index ce479ee..a73fec8 100644
--- a/app.vue
+++ b/app.vue
@@ -9,7 +9,13 @@
 <script setup>
 
   //const layout = "empty";
+  //const route = useRoute();
 
+  useHead({
+    //title: `Tüit ERP - ${route.meta.title}`,
+    title: `Tüit ERP`,
+    link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
+  })
 </script>
 
 
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
index 411b896..d6766bf 100644
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@@ -4,13 +4,13 @@
       <span class="title-icon" id="logo-icon">
         <img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
       </span>
-      <pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
+      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
     </div>
     <div class="login-field">
       <div class="form-field" id="username-field">
         <label for="username-input" id="username-label">
           <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
-            <img loading="lazy" src="../icons/Mail-Icon.svg" />
+            <img loading="lazy" src="/icons/Mail-Icon.svg" />
           </span>
           <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
         </label>
@@ -21,14 +21,13 @@
       <div class="form-field" id="password-field">
         <label for="password-input" id="password-label">
           <span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
-            <img loading="lazy" src="../icons/Lock-Icon.svg" />
+            <img loading="lazy" src="/icons/Lock-Icon.svg" />
           </span>
           <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="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
         </div>
       </div>
     </div>
@@ -37,10 +36,10 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
       </label>
     </div>
-    <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="login-button" value="Signup"
-      @click="testFunctionSignup">
+    <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">
+    </div>
   </form>
 </template>
 
@@ -162,22 +161,22 @@ export default {
   align-items: center;
   justify-content: center;
   width: 31.25rem;
-  height: 33rem;
+  min-height: 33rem;
+  height: fit-content;
   border-radius: 0.625rem;
   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;
 }
 
+
 .title-field {
   display: flex;
   flex-direction: column;
@@ -192,7 +191,6 @@ export default {
   width: 3.125rem;
   height: 3.125rem;
 }
-
 .title-icon>img {
   width: 3.125rem;
   height: 3.125rem;
@@ -203,20 +201,14 @@ export default {
 
 .title {
   margin: 0;
-  letter-spacing: 5%;
+  letter-spacing: 0.05rem;
   white-space: nowrap;
   font: 400 1.875rem/1.875rem Overpass, sans-serif;
 }
+.title-darkmode { color: #ffffff; }
+.title-lightmode {  color: #000000; }
 
-.pre-darkmode,
-.title-darkmode {
-  color: #fff;
-}
 
-.pre-lightmode,
-.title-lightmode {
-  color: #000;
-}
 
 .login-field {
   display: flex;
@@ -227,6 +219,7 @@ export default {
   gap: 1.25rem;
 }
 
+
 .form-field {
   display: flex;
   flex-direction: column;
@@ -238,16 +231,6 @@ export default {
   gap: 0.625rem;
 }
 
-.form-field-error-msg {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 25rem;
-  height: 3rem;
-  gap: 0.4rem;
-}
-
 label {
   display: flex;
   flex-direction: row;
@@ -265,43 +248,28 @@ label {
   width: 1.875rem;
   height: 1.875rem;
 }
-
 .icon>img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
 }
-
-.icon-darkmode>img {
-  filter: invert(100%);
-}
-
-.icon-lightmode>img {
-  filter: invert(0%);
-}
-
 #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%); } 
 
 .label {
-  letter-spacing: 2%;
+  letter-spacing: 0.02rem;
   font: 400 0.9375rem/1.875rem Overpass, sans-serif;
 }
-
-.label-darkmode {
-  color: #fff;
-}
-
-.label-lightmode {
-  color: #000;
-}
+.label-darkmode { color: #ffffff; } 
+.label-lightmode { color: #000000; }
 
 .input-field {
   display: flex;
@@ -314,15 +282,9 @@ 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-darkmode { background-color: #212121; } 
+.input-lightmode { background-color: #EBEBEB; }
 
 input[type=text] {
   width: 100%;
@@ -330,40 +292,63 @@ input[type=text] {
   background-color: #00000000;
   border: none;
   color: #8e8e8e;
-  letter-spacing: 5%;
+  letter-spacing: 0.01rem;
   white-space: nowrap;
   font: 100 0.75rem/1.25rem Overpass, sans-serif;
 }
 
-input[type=button] {
+#show-password-toggle {
   width: fit-content;
+  height: auto;
   align-self: flex-end;
+  padding: 0;
+  border-radius: 0;
   background-color: #00000000;
+  background: none;
   border: none;
-  letter-spacing: 5%;
+  letter-spacing: 0.01rem;
   white-space: nowrap;
   font: 300 0.75rem/1.25rem Overpass, sans-serif;
 }
 
-.button-darkmode {
-  color: #fff;
+
+
+.form-field-error-msg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 25rem;
+  height: 3rem;
+  gap: 0.4rem;
 }
 
-.button-lightmode {
-  color: #000;
+
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+  height: fit-content;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0.625rem 0.625rem 0;
+  gap: 2.5rem;
 }
 
-#login-button {
-  width: 13.75rem;
-  height: 4.375rem;
+
+input[type=button] {
+  width: 9.375rem;
+  height: 3.125rem;
   padding: 0.625rem;
   border-radius: 0.625rem;
   align-self: center;
   border: none;
-  color: #000;
   background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
-  letter-spacing: 2%;
+  letter-spacing: 0.02rem;
   white-space: nowrap;
-  font: 600 1.25rem/1.875rem Overpass, sans-serif;
+  font: 600 1.125rem/1.875rem Overpass, sans-serif;
 }
+.button-darkmode { color: #ffffff; } 
+.button-lightmode { color: #000000; }
 </style>
\ No newline at end of file
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index f1c7dad..80331fb 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,12 +1,12 @@
 <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" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -14,7 +14,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -22,7 +22,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -30,7 +30,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -38,7 +38,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -46,7 +46,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -54,7 +54,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -62,7 +62,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -70,7 +70,7 @@
       </button>
       <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? '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>
@@ -129,7 +129,7 @@ aside.actionbar {
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: 5rem;
+  top: 3.75rem;
   height: fit-content;
   width: fit-content;
   inline-size: fit-content;
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index eb77c15..c67c28c 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -2,17 +2,17 @@
   <aside :class="['navbar', darkMode ? '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" />
+        <img :class="[darkMode ? '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" />
+        <img :class="[darkMode ? '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">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[darkMode ? '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>
@@ -22,7 +22,7 @@
       <nav id="site-menu">
         <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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="[darkMode ? '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>
@@ -30,7 +30,7 @@
         </router-link>
         <nuxt-link to="/assets" class="button" :class="[darkMode ? '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="[darkMode ? '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>
@@ -38,7 +38,7 @@
         </nuxt-link>
         <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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="[darkMode ? '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>
@@ -46,7 +46,7 @@
         </router-link>
         <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" 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="[darkMode ? '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>
@@ -54,7 +54,7 @@
         </router-link>
         <router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
           <div class="icon" id="clients-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
           </div>
           <Transition name="fade">
             <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
@@ -103,7 +103,7 @@ aside.navbar {
   display: flex;
   flex-direction: column;
   position: sticky;
-  top: 5rem;
+  top: 3.75rem;
   height: fit-content;
   width: fit-content;
   inline-size: fit-content;
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
index 5e6993e..97470e1 100644
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@@ -1,6 +1,6 @@
 <template>
     <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
-        <img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
+        <img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
         <div class="profile">
             <div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
             <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
@@ -36,28 +36,28 @@ header {
     position: sticky;
     top: 0;
     width: 100%;
-    height: 4.375rem;
+    height: 3.125rem;
     align-self: stretch;
     justify-content: space-between;
     align-items: center;
-    padding: 0.625rem 1.25rem;
+    padding: 0.375rem 1.875rem;
 }
 
 .header-darkmode {
     background-color: #212121;
-    border-bottom: 0.125em solid #000;
+    border-bottom: 0.125em solid #000000;
 }
 
 .header-lightmode {
-    background-color: #EBEBEB;
-    border-bottom: 0.125em solid #8e8e8e61;
+    background-color: #ebebeb;
+    border-bottom: 0.125em solid #8e8e8e;
 }
 
 #header-logo {
     object-fit: contain;
     object-position: center;
-    width: 5rem;
-    height: 2.5rem;
+    width: 4rem;
+    height: 2rem;
     justify-content: center;
     align-items: center;
     overflow: hidden;
@@ -68,37 +68,36 @@ header {
     flex-direction: row;
     align-items: flex-end;
     gap: 0.625rem;
-    padding: 0 0.625rem;
+    padding: 0 0.375rem;
 }
 
 .username {
     align-self: center;
-    margin: auto 0;
     text-align: right;
-    font: 200 0.875rem Overpass, sans-serif;
-    letter-spacing: 5%;
+    font: 200 0.75rem/1.25rem Overpass, sans-serif;
+    letter-spacing: 0.01rem;
 }
 
 .username-darkmode {
-    color: #fff;
+    color: #ffffff;
 }
 
 .username-lightmode {
-    color: #000;
+    color: #000000;
 }
 
 .picture {
     display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 1.875rem;
+    height: 1.875rem;
     border-radius: 50%;
 }
 
 .picture-darkmode {
-    background-color: #fff;
+    background-color: #ffffff;
 }
 
 .picture-lightmode {
-    background-color: #000;
+    background-color: #000000;
 }
 </style>
\ No newline at end of file
diff --git a/middleware/auth.js b/middleware/auth.js
index 22abc8d..3492512 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -1,12 +1,12 @@
-// export default function ({ route, redirect }) {
-//     // Check if user is not authenticated and trying to access a page other than /login
-//     if (!isAuthenticated() && route.path !== '/login') {
-//       return redirect('/login');
-//     }
-//   }
+export default function ({ route, redirect }) {
+    // Check if user is not authenticated and trying to access a page other than /login
+    if (!isAuthenticated() && route.path !== '/login') {
+        return redirect('/login');
+    }
+}
   
-//   function isAuthenticated() {
-//     // Implement authentication logic 
-//     return false
-//     // Return true if authenticated, false otherwise
-//   }
\ No newline at end of file
+function isAuthenticated() {
+    // Implement authentication logic 
+    return false
+    // Return true if authenticated, false otherwise
+}
\ No newline at end of file
diff --git a/pages/assets.vue b/pages/assets.vue
index 5abccfd..1f7e20b 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -40,7 +40,8 @@ const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Assets'
 })
 
 const darkMode = ref(true)
diff --git a/pages/clients.vue b/pages/clients.vue
index 5415c6e..e660964 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -30,18 +30,19 @@ import ClientDepartment from '~/components/server/ClientDepartment.vue';
 import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Clients'
 })
 
 const darkMode = ref(true)
 
 // to render the right components
 const onCustomerlist = ref(true)
-const onCustomer = ref(true)
-const onEmployeelist = ref(true)
-const onEmployee = ref(true)
-const onDepartmentlist = ref(true)
-const onDepartment = ref(true)
+const onCustomer = ref(false)
+const onEmployeelist = ref(false)
+const onEmployee = ref(false)
+const onDepartmentlist = ref(false)
+const onDepartment = ref(false)
 </script>
 
 <script>
diff --git a/pages/home.vue b/pages/home.vue
index c1f6f24..c45fbce 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -20,7 +20,8 @@ import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
 
 definePageMeta({
-  layout: 'empty'
+  layout: 'empty',
+  title: 'Home'
 })
 
 const darkMode = ref(true)
diff --git a/pages/index.vue b/pages/index.vue
index 7830ed5..83d13bb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,7 +14,8 @@
 import { ref } from 'vue';
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Test'
 })
 
 const darkMode = ref(true)
diff --git a/pages/issues.vue b/pages/issueItems.vue
similarity index 92%
rename from pages/issues.vue
rename to pages/issueItems.vue
index bca2ca5..4e06db2 100644
--- a/pages/issues.vue
+++ b/pages/issueItems.vue
@@ -20,8 +20,8 @@
             &nbsp;
             &nbsp;
             &nbsp;
-            <router-link to="/issues" class="button" id="issues-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
+            <router-link to="/issueItems" class="button" id="issues-button">
+                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
             </router-link>
         </div>
         <div id="content-body">
@@ -43,7 +43,8 @@ import IssueVariants from "../components/server/IssueVariants.vue";
 import IssueVariant from "../components/server/IssueVariant.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Issue Items'
 })
 
 const darkMode = ref(true)
@@ -56,7 +57,7 @@ const onIssueItemVariant = ref(false)
   
 <script>
 export default {
-    name: "IssuePage",
+    name: "IssueItemsPage",
 }
 </script>
       
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index 0cac0e8..37641b2 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -20,8 +20,8 @@
       &nbsp;
       &nbsp;
       &nbsp;
-      <router-link to="/issues" class="button" id="issues-button">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+      <router-link to="/issueItems" class="button" id="issues-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
       </router-link>
     </div>
     <div id="content-body">
@@ -47,7 +47,8 @@ import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Issue Slips'
 })
 
 const darkMode = ref(true)
diff --git a/pages/login.vue b/pages/login.vue
index f4af34b..c2b6339 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -16,7 +16,8 @@ import { ref } from 'vue';
 import LoginForm from "../components/LoginForm.vue";
 
 definePageMeta({
-  layout: 'empty'
+  layout: 'empty',
+  title: 'Login'
 })
 
 const darkMode = ref(true)
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index c7a1d0f..5b11e7a 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -53,7 +53,8 @@ import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsIns
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Maintenance Visits'
 })
 
 const darkMode = ref(true)
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index fc0e3fb..f597ce3 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -53,7 +53,8 @@ import ProductionOrdersInstance from "../components/server/ProductionOrdersInsta
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Production Orders'
 })
 
 const darkMode = ref(true)
diff --git a/pages/settings.vue b/pages/settings.vue
index 7017ac6..9abcd93 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -39,7 +39,8 @@ import UserAppearance from "../components/server/UserAppearance.vue";
 import UserRightsList from "../components/server/UserRightsList.vue";
 
 definePageMeta({
-    layout: 'default'
+    layout: 'default',
+    title: 'Settings'
 })
 
 const darkMode = ref(true)
diff --git a/pages/solutions.vue b/pages/solutions.vue
index c8068f3..5c41f65 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -24,7 +24,8 @@ import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 
 definePageMeta({
-  layout: 'default'
+  layout: 'default',
+  title: 'Solutions'
 })
 
 const darkMode = ref(true)