diff --git a/components/ClientSearch.vue b/components/ClientSearch.vue
index a39e00c..4734068 100644
--- a/components/ClientSearch.vue
+++ b/components/ClientSearch.vue
@@ -5,14 +5,15 @@
   </section>
 </template>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
 <script>
 export default {
   name: "ClientSearch",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 };
 </script>
 
diff --git a/components/Dashboard.vue b/components/Dashboard.vue
index 97a47f8..53c25a5 100644
--- a/components/Dashboard.vue
+++ b/components/Dashboard.vue
@@ -14,21 +14,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
 
-<script>
-
-export default {
-  name: "Dashboard",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
-
+const darkMode = ref(true)
 </script>
 
-  
+<script>
+export default {
+  name: "Dashboard",
+};
+</script> 
   
   
 <style scoped>
@@ -99,4 +95,5 @@ input {
 .input-lightmode {
   color: #000;
   background-color: #E4E4E4;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/LoginForm.vue b/components/LoginForm.vue
index 4b537f3..ede85ec 100644
--- a/components/LoginForm.vue
+++ b/components/LoginForm.vue
@@ -27,7 +27,8 @@
         </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>
@@ -36,20 +37,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
 
 <script>
-
 export default {
   name: "LoginForm",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
-
-</script>
-  
+};
+</script> 
   
 
 <style scoped>
diff --git a/components/QuickAccess.vue b/components/QuickAccess.vue
index 1451986..790f614 100644
--- a/components/QuickAccess.vue
+++ b/components/QuickAccess.vue
@@ -12,20 +12,17 @@
 </template>
 
 
-<script>
-
-export default {
-  name: "QuickAccess",
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
 </script>
 
-
+<script>
+export default {
+  name: "QuickAccess",
+};
+</script> 
 
 
 <style scoped>
diff --git a/components/TemplateSearch.vue b/components/TemplateSearch.vue
index 01e5d44..cf23c40 100644
--- a/components/TemplateSearch.vue
+++ b/components/TemplateSearch.vue
@@ -1,79 +1,82 @@
 <template>
-    <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-      <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
-      <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
-    </section>
-  </template>
+  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
+    <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
+  </section>
+</template>
   
-  <script>
-  export default {
-    name: "TemplateSearch",
-    data() {
-      return {
-        darkMode: true,
-      };
-    },
-  };
-  </script>
   
-  <style scoped>
-  .template-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;
-  }
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
+export default {
+  name: "TemplateSearch",
+};
+</script> 
+
   
-  .section-darkmode {
-    background-color: #2c2c2c;
-  }
-  
-  .section-lightmode {
-    background-color: #fff;
-  }
-  
-  .label {
-    width: 4.188em;
-    height: 1.875em;
-    font-family: "Overpass";
-    font-style: normal;
-    font-weight: 400;
-    font-size: 0.875em;
-    line-height: 1.875;
-    letter-spacing: 0.05em;
-  }
-  
-  .label-darkmode {
-    color: #FFFFFF;
-  }
-  
-  .label-lightmode {
-    color: #000;
-  }
-  
-  .data {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 0 0.625rem;
-    border-radius: 0.3125rem;
-    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-    letter-spacing: 5%;
-    font: 400 0.75rem/250% Overpass, sans-serif;
-  }
-  
-  .pre-darkmode {
-    background-color: #212121;
-    color: #fff;
-  }
-  
-  .pre-lightmode {
-    background-color: #EBEBEB;
-    color: #000;
-  }
-  </style>
+<style scoped>
+.template-search {
+  display: flex;
+  align-items: center;
+  padding: 0.625em 1.875em;
+  gap: 1.25em;
+  width: 30.125em;
+  height: 3.125em;
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+  border-radius: 0.625em;
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #fff;
+}
+
+.label {
+  width: 4.188em;
+  height: 1.875em;
+  font-family: "Overpass";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.875;
+  letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000;
+}
+
+.data {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: 0 0.625rem;
+  border-radius: 0.3125rem;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  letter-spacing: 5%;
+  font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.pre-darkmode {
+  background-color: #212121;
+  color: #fff;
+}
+
+.pre-lightmode {
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>
   
\ No newline at end of file
diff --git a/components/server/Accounting.vue b/components/server/Accounting.vue
index c851880..57e6ad8 100644
--- a/components/server/Accounting.vue
+++ b/components/server/Accounting.vue
@@ -4,53 +4,93 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Action</th>
-                        <th :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">Date</th>
+                        <th
+                            :class="['Action', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Action</th>
+                        <th
+                            :class="['Date', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            Date</th>
                         <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'first-tr-darkmode' : 'first-tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier request</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier request</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier offer</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier offer</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client offer</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Client offer</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Client order</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Client order</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Supplier order</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Supplier order</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Ingress</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Egress</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-2">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Ingress bill</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Ingress bill</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'final-tr-darkmode' : 'final-tr-lightmode']" id="row-1">
-                        <td :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">Egress bill</td>
-                        <td :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Date-darkmode' : 'Date-lightmode']">...</td>
+                        <td
+                            :class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
+                            Egress bill</td>
+                        <td
+                            :class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -59,22 +99,17 @@
     </section>
 </template>
     
-    
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "Accounting",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-    
-      
+};
+</script>      
       
       
 <style scoped>
@@ -222,5 +257,4 @@ tr#row-2 {
 
 .Comments {
     width: 40%;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index d86ec46..cadb524 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -50,22 +50,17 @@
     </section>
 </template>
     
-    
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "Asset",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
+};
 </script>
-    
-      
       
       
 <style scoped>
@@ -150,13 +145,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .data#notes,
@@ -207,6 +202,7 @@ export default {
 .h3-lightmode {
     color: #000;
 }
+
 .id-type {
     display: flex;
     flex-direction: row;
@@ -241,10 +237,10 @@ export default {
 }
 
 .rectangle-darkmode {
-  background-color: #212121;
+    background-color: #212121;
 }
 
 .rectangle-lightmode {
-  background-color: #EBEBEB;
+    background-color: #EBEBEB;
 }
 </style>
\ No newline at end of file
diff --git a/components/server/AssetTable.vue b/components/server/AssetTable.vue
index 887c0a9..66af23d 100644
--- a/components/server/AssetTable.vue
+++ b/components/server/AssetTable.vue
@@ -3,39 +3,50 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <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="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    Client</th>
+                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    ...</td>
+                <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>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "AssetTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script>    
     
     
 <style scoped>
@@ -186,5 +197,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/AssetTableNoClient.vue b/components/server/AssetTableNoClient.vue
index fc59530..6ef1e2d 100644
--- a/components/server/AssetTableNoClient.vue
+++ b/components/server/AssetTableNoClient.vue
@@ -3,38 +3,44 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-client">
             <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="['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="['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>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "AssetTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
-    
+};
+</script>    
     
 <style scoped>
 .data {
@@ -158,14 +164,14 @@ th {
 }
 
 .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;
+    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 {
diff --git a/components/server/Client.vue b/components/server/Client.vue
index 50edb49..bdd0322 100644
--- a/components/server/Client.vue
+++ b/components/server/Client.vue
@@ -40,7 +40,7 @@
         <div class="data-field" id="city">
           <pre class="label">City:</pre>
           <pre class="data">...</pre>
-        </div> 
+        </div>
       </div>
     </div>
     <div class="notes">
@@ -51,129 +51,129 @@
 </template>
   
   
-  
-<script>
-  
-  export default {
-    name: "Client",
-    
-  }
-  
+<script setup>
+import { ref } from 'vue';
 </script>
-  
-    
+
+<script>
+export default {
+  name: "Client",
+};
+</script>   
     
     
 <style scoped>
-  
-  .information {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    width: 100%;
-    padding: 1.25rem 1.875rem;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
-  
-  
-  .client-name {
-    align-self: stretch;
-    padding: 1.25rem 0;
-    color: #fff;
-    letter-spacing: 5%;
-    text-decoration-line: underline;
-    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
-  }
-  
-  .data-field {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    width: 100%;
-    padding: 0 1.875rem;
-    gap: 1.25rem;
-    border-radius: 0.625rem;
-  }
-  .data-field#client-id {
-    padding: 0.625rem 1.875rem;
-  }
-  .data-field#street-name {
-    width: 70%;
-  }
-  .data-field#street-no {
-    width: 30%;
-  }
-  
-  .label {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 0.875rem/1.875rem Overpass, sans-serif;
-  }
-  .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;
-    background-color: #212121;
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 0.75rem/250% Overpass, sans-serif;
-  }
-  .data#notes {
-    align-self: stretch;
-  }
+.information {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  padding: 1.25rem 1.875rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2c2c2c;
+}
 
-  .client-data {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    align-self: stretch;
-    padding: 0 0.625rem;
-  }
 
-  .contact, .address {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    line-height: normal;
-    width: 50%;
-    padding: 1.25rem 0.625rem;
-    border-radius: 0.3125rem;
-  }
-  
-  .area-title {
-    color: #fff;
-    letter-spacing: 5%;
-    font: 400 0.875rem/1.875rem Overpass, sans-serif;
-  }
-  
-  .street-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;
-  }
-  
-  .notes {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    align-self: stretch;
-    padding: 0.625rem 1.875rem 0.625rem 1.25rem;
-  }
-  
-  
-</style>
\ No newline at end of file
+.client-name {
+  align-self: stretch;
+  padding: 1.25rem 0;
+  color: #fff;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+}
+
+.data-field {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0 1.875rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+}
+
+.data-field#client-id {
+  padding: 0.625rem 1.875rem;
+}
+
+.data-field#street-name {
+  width: 70%;
+}
+
+.data-field#street-no {
+  width: 30%;
+}
+
+.label {
+  color: #fff;
+  letter-spacing: 5%;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.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;
+  background-color: #212121;
+  color: #fff;
+  letter-spacing: 5%;
+  font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.data#notes {
+  align-self: stretch;
+}
+
+.client-data {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+  padding: 0 0.625rem;
+}
+
+.contact,
+.address {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  line-height: normal;
+  width: 50%;
+  padding: 1.25rem 0.625rem;
+  border-radius: 0.3125rem;
+}
+
+.area-title {
+  color: #fff;
+  letter-spacing: 5%;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.street-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;
+}
+
+.notes {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  padding: 0.625rem 1.875rem 0.625rem 1.25rem;
+}</style>
\ No newline at end of file
diff --git a/components/server/ClientQuickAccess.vue b/components/server/ClientQuickAccess.vue
index 92b6240..f4f5225 100644
--- a/components/server/ClientQuickAccess.vue
+++ b/components/server/ClientQuickAccess.vue
@@ -12,68 +12,62 @@
 </template>
   
   
-  
-<script>
-  
-  export default {
-    name: "ClientQuickAccess",
-    
-  }
-  
+<script setup>
+import { ref } from 'vue';
 </script>
-  
-    
+
+<script>
+export default {
+  name: "Asset",
+};
+</script>    
     
     
 <style scoped>
-    
-    .quick-access {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      justify-content: center;
-      align-self: stretch;
-      width: 100%;
-      padding: 1.875rem 1.875rem 3.125rem;
-      gap: 1.25rem;
-      border-radius: 0.625rem;
-      box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-      background-color: #2c2c2c;
-    }
-    
-    .heading {
-      color: #fff;
-      letter-spacing: 5%;
-      text-decoration-line: underline;
-      font: 400 1rem/2rem Overpass, sans-serif;
-    }
-    
-    .shortcuts {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-content: center;
-      padding: 0.625rem 1.875rem;
-      gap: 2.5rem;
-    }
-    
-    input {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      width: 15rem;
-      height: 4rem;
-      border-radius: 0.625rem;
-      padding: 0.9375rem 1.25rem;
-      border: none;
-      color: #fff;
-      text-align: center;
-      letter-spacing: 5%;
-      font: 400 0.875rem/2rem Overpass, sans-serif;
-      background-color: #343434;
-    }
-    
-    
-    
- </style>
\ No newline at end of file
+.quick-access {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  align-self: stretch;
+  width: 100%;
+  padding: 1.875rem 1.875rem 3.125rem;
+  gap: 1.25rem;
+  border-radius: 0.625rem;
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2c2c2c;
+}
+
+.heading {
+  color: #fff;
+  letter-spacing: 5%;
+  text-decoration-line: underline;
+  font: 400 1rem/2rem Overpass, sans-serif;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  padding: 0.625rem 1.875rem;
+  gap: 2.5rem;
+}
+
+input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 15rem;
+  height: 4rem;
+  border-radius: 0.625rem;
+  padding: 0.9375rem 1.25rem;
+  border: none;
+  color: #fff;
+  text-align: center;
+  letter-spacing: 5%;
+  font: 400 0.875rem/2rem Overpass, sans-serif;
+  background-color: #343434;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/ClientTable.vue b/components/server/ClientTable.vue
index 535fc7c..25f2931 100644
--- a/components/server/ClientTable.vue
+++ b/components/server/ClientTable.vue
@@ -3,7 +3,7 @@
         <table class="data-table" id="client-table">
             <tr class="table-row" id="table-head">
                 <th class="ID">ID</th>
-                <th  class="Name">Name</th>
+                <th class="Name">Name</th>
             </tr>
             <tr class="table-row" id="row-1">
                 <td class="ID">...</td>
@@ -18,73 +18,74 @@
 </template>
   
   
-  
+<script setup>
+import { ref } from 'vue';
+</script>
+
 <script>
-  
-  export default {
+export default {
     name: "ClientTable",
-    
-  }
-  
+};
 </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);
-        background-color: #2c2c2c;
-    }
-    
-    .data-table {
-        width: 100%;
-        padding: 0 0.625rem;
-        table-layout: fixed;
-        border-collapse: collapse;
-    }
+.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);
+    background-color: #2c2c2c;
+}
 
-    .table-row {
-        display: flex;
-        flex-direction: row;
-        height: 3.125rem;
-        padding: 0.625rem;
-        gap: 0.625rem;
-        border-top: 0.0625rem solid #000000;
-    }
-    #table-head {
-        border-top: none;
-        border-bottom: 0.0625rem solid #000000;
-    }
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
 
-    th, td {
-        height: 1.875rem;
-        padding: 0;
-        color: #ffffff;
-        letter-spacing: 5%;
-        font: 400 0.875rem/1.875rem Overpass, sans-serif;
-    }
-    th {
-        font: 700 0.875rem/1.875rem Overpass, sans-serif;
-    }
-    .ID {
-        width: 40%;
-        border-right: 0.0625rem solid #000000;
-    }
-    .Name {
-        width: 60%;
-    }
-    
-    
-    
+.table-row {
+    display: flex;
+    flex-direction: row;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+    border-top: 0.0625rem solid #000000;
+}
+
+#table-head {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+th,
+td {
+    height: 1.875rem;
+    padding: 0;
+    color: #ffffff;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.ID {
+    width: 40%;
+    border-right: 0.0625rem solid #000000;
+}
+
+.Name {
+    width: 60%;
+}
 </style>
\ No newline at end of file
diff --git a/components/server/HardwareSpecifications.vue b/components/server/HardwareSpecifications.vue
index fd587db..69da2b3 100644
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@@ -27,7 +27,8 @@
             <div class="additional">
                 <div class="storage-configuration">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Storage configuration:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="storage-configuration">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">...</pre>
                 </div>
             </div>
             <div class="additional">
@@ -40,23 +41,19 @@
     </section>
 </template>
     
-    
-    
-<script>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "HardwareSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
+};
+</script>   
 
-</script>
-    
-      
-      
       
 <style scoped>
 .hardware-information {
@@ -122,13 +119,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .data#miscellaneous,
@@ -182,5 +179,4 @@ export default {
     align-self: stretch;
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/server/InstanceChecklist.vue b/components/server/InstanceChecklist.vue
index 7a59823..6570d0c 100644
--- a/components/server/InstanceChecklist.vue
+++ b/components/server/InstanceChecklist.vue
@@ -30,27 +30,24 @@
                 <td
                     :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
                     ...</td>
-                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox" :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']"/></td>
+                <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
             </tr>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "InstanceChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
@@ -211,4 +208,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/Issue.vue b/components/server/Issue.vue
index 445583f..a4c335a 100644
--- a/components/server/Issue.vue
+++ b/components/server/Issue.vue
@@ -33,20 +33,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "Issue",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
+};
+</script>   
       
       
       
@@ -133,13 +130,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .issue-data {
@@ -209,5 +206,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/server/IssueSlip.vue b/components/server/IssueSlip.vue
index cb164e3..297cb14 100644
--- a/components/server/IssueSlip.vue
+++ b/components/server/IssueSlip.vue
@@ -33,20 +33,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueSlip",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
+};
+</script>   
       
       
       
@@ -133,13 +130,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .issueSlip-data {
@@ -209,5 +206,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/server/IssueSlipTable.vue b/components/server/IssueSlipTable.vue
index 75dde8c..ca5cd30 100644
--- a/components/server/IssueSlipTable.vue
+++ b/components/server/IssueSlipTable.vue
@@ -3,17 +3,31 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="asset-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <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="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    Client</th>
+                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    ...</td>
+                <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>
         </table>
@@ -21,20 +35,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueSlipTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
+};
 </script>
-  
     
     
     
@@ -186,5 +197,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/IssueSlipTableNoClient.vue b/components/server/IssueSlipTableNoClient.vue
index a2f4098..20990bf 100644
--- a/components/server/IssueSlipTableNoClient.vue
+++ b/components/server/IssueSlipTableNoClient.vue
@@ -3,15 +3,25 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
         <table class="data-table" id="asset-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="['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="['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="['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>
         </table>
@@ -19,20 +29,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueSlipTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
@@ -114,6 +121,7 @@ td {
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .ID {
     width: 47.5%;
 }
@@ -171,5 +179,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/IssueTable.vue b/components/server/IssueTable.vue
index 4e38eb7..3ca558b 100644
--- a/components/server/IssueTable.vue
+++ b/components/server/IssueTable.vue
@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issues:</div>
         <table class="data-table" id="asset-table">
             <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="['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="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode']">Amount</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="['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="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,20 +31,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
@@ -114,6 +123,7 @@ td {
 th {
     font: 700 0.875rem/1.875rem Overpass, sans-serif;
 }
+
 .Name {
     width: 33.3%;
 }
@@ -171,5 +181,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/IssueVariant.vue b/components/server/IssueVariant.vue
index 46d0772..b4e4e01 100644
--- a/components/server/IssueVariant.vue
+++ b/components/server/IssueVariant.vue
@@ -37,20 +37,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueVariant",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
+};
+</script>   
       
       
       
@@ -137,13 +134,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .issue-variant-data {
@@ -213,5 +210,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/server/IssueVariants.vue b/components/server/IssueVariants.vue
index 4e2422c..fa3af27 100644
--- a/components/server/IssueVariants.vue
+++ b/components/server/IssueVariants.vue
@@ -3,38 +3,50 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Variants:</div>
         <table class="data-table" id="issue-variants-table">
             <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="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">Properties</th>
-                <th :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">State</th>
-                <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['Properties', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                    Properties</th>
+                <th
+                    :class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    State</th>
+                <th
+                    :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                    Amount</th>
                 <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode']">Price</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="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">...</td>
-                <td :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">...</td>
-                <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">...</td>
+                <td
+                    :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Properties', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Properties-darkmode' : 'Properties-lightmode']">
+                    ...</td>
+                <td
+                    :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                    ...</td>
                 <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "IssueVariants",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>   
     
     
     
@@ -170,14 +182,14 @@ th {
 }
 
 .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;
+    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 {
@@ -186,5 +198,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsInstance.vue b/components/server/MaintenanceVisitsInstance.vue
index 5aa72a5..d8706c4 100644
--- a/components/server/MaintenanceVisitsInstance.vue
+++ b/components/server/MaintenanceVisitsInstance.vue
@@ -70,22 +70,18 @@
     </section>
 </template>
     
-    
-    
-<script>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "MaintenanceVisitsInstance",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
+};
 </script>
-   
-      
       
       
 <style scoped>
diff --git a/components/server/MaintenanceVisitsInstanceTable.vue b/components/server/MaintenanceVisitsInstanceTable.vue
index 0b88231..e2c4776 100644
--- a/components/server/MaintenanceVisitsInstanceTable.vue
+++ b/components/server/MaintenanceVisitsInstanceTable.vue
@@ -41,20 +41,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "MaintenanceVisitsInstanceTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
diff --git a/components/server/MaintenanceVisitsTemplate.vue b/components/server/MaintenanceVisitsTemplate.vue
index 605e4b4..d7d8726 100644
--- a/components/server/MaintenanceVisitsTemplate.vue
+++ b/components/server/MaintenanceVisitsTemplate.vue
@@ -35,20 +35,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "MaintenanceVisitsTemplate",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
+};
+</script>   
       
       
       
diff --git a/components/server/MaintenanceVisitsTemplateTable.vue b/components/server/MaintenanceVisitsTemplateTable.vue
index ae25212..26356db 100644
--- a/components/server/MaintenanceVisitsTemplateTable.vue
+++ b/components/server/MaintenanceVisitsTemplateTable.vue
@@ -35,20 +35,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "MaintenanceVisitsTemplateTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
+};
+</script>  
     
     
     
@@ -200,4 +197,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsTemplateTableNoClient.vue b/components/server/MaintenanceVisitsTemplateTableNoClient.vue
index 6d10733..27ecfca 100644
--- a/components/server/MaintenanceVisitsTemplateTableNoClient.vue
+++ b/components/server/MaintenanceVisitsTemplateTableNoClient.vue
@@ -29,20 +29,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "MaintenanceVisitsTemplateTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
+};
 </script>
-  
     
     
     
@@ -182,4 +179,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/NetworkSpecifications.vue b/components/server/NetworkSpecifications.vue
index 2e6b165..aee9743 100644
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@@ -26,22 +26,18 @@
     </section>
 </template>
     
-    
-    
-<script>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "NetworkSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-    
-      
+};
+</script>          
       
       
 <style scoped>
@@ -105,13 +101,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .asset-data {
diff --git a/components/server/OrderingInformation.vue b/components/server/OrderingInformation.vue
index bede4bb..84b8abf 100644
--- a/components/server/OrderingInformation.vue
+++ b/components/server/OrderingInformation.vue
@@ -4,15 +4,27 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">Article</th>
-                        <th :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">Amount</th>
-                        <th :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">Price</th>
+                        <th
+                            :class="['Article', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                            Article</th>
+                        <th
+                            :class="['Amount', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                            Amount</th>
+                        <th
+                            :class="['Price', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                            Price</th>
                         <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">...</td>
-                        <td :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Amount-darkmode' : 'Amount-lightmode']">...</td>
-                        <td :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Price-darkmode' : 'Price-lightmode']">...</td>
+                        <td
+                            :class="['Article', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Article-darkmode' : 'Article-lightmode']">
+                            ...</td>
+                        <td
+                            :class="['Amount', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Amount-darkmode' : 'Amount-lightmode']">
+                            ...</td>
+                        <td
+                            :class="['Price', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Price-darkmode' : 'Price-lightmode']">
+                            ...</td>
                         <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -22,20 +34,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "OrderingInformation",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
+};
 </script>
-    
       
       
       
diff --git a/components/server/ProductionOrdersInstance.vue b/components/server/ProductionOrdersInstance.vue
index 7633eae..9794405 100644
--- a/components/server/ProductionOrdersInstance.vue
+++ b/components/server/ProductionOrdersInstance.vue
@@ -76,22 +76,18 @@
     </section>
 </template>
     
-    
-    
-<script>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "ProductionOrdersInstance",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
-      
+};
+</script> 
       
       
 <style scoped>
diff --git a/components/server/ProductionOrdersInstanceTable.vue b/components/server/ProductionOrdersInstanceTable.vue
index ebebf3f..1160d8a 100644
--- a/components/server/ProductionOrdersInstanceTable.vue
+++ b/components/server/ProductionOrdersInstanceTable.vue
@@ -47,21 +47,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "ProductionOrdersInstanceTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script>   
     
     
 <style scoped>
diff --git a/components/server/ProductionOrdersTemplate.vue b/components/server/ProductionOrdersTemplate.vue
index d0f71d9..42195d4 100644
--- a/components/server/ProductionOrdersTemplate.vue
+++ b/components/server/ProductionOrdersTemplate.vue
@@ -14,7 +14,7 @@
             </div>
             <div class="user">
                 <div class="data-field" id="empty">
-                   &nbsp;
+                    &nbsp;
                 </div>
                 <div class="data-field" id="user">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
@@ -40,21 +40,17 @@
 </template>
     
     
-    
-<script>
-
-export default {
-    name: "MaintenanceVisitsTemplate",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
 </script>
-   
-      
+
+<script>
+export default {
+    name: "ProductionOrdersTemplate",
+};
+</script>       
       
       
 <style scoped>
diff --git a/components/server/ProductionOrdersTemplateTable.vue b/components/server/ProductionOrdersTemplateTable.vue
index 27e09a8..d594038 100644
--- a/components/server/ProductionOrdersTemplateTable.vue
+++ b/components/server/ProductionOrdersTemplateTable.vue
@@ -29,21 +29,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "ProductionOrdersTemplateTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script> 
     
     
 <style scoped>
@@ -182,4 +178,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplateTableNoClient.vue b/components/server/ProductionOrdersTemplateTableNoClient.vue
index d1c1545..b6e3053 100644
--- a/components/server/ProductionOrdersTemplateTableNoClient.vue
+++ b/components/server/ProductionOrdersTemplateTableNoClient.vue
@@ -23,21 +23,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "ProductionOrdersTemplateTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script>     
     
     
 <style scoped>
@@ -164,4 +160,5 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/components/server/SoftwareSpecifications.vue b/components/server/SoftwareSpecifications.vue
index 479303f..12902da 100644
--- a/components/server/SoftwareSpecifications.vue
+++ b/components/server/SoftwareSpecifications.vue
@@ -4,13 +4,21 @@
             <div class="asset-data">
                 <table class="data-table" id="asset-table-no-client">
                     <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                        <th :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">Software</th>
-                        <th :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">Version</th>
+                        <th
+                            :class="['Software', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                            Software</th>
+                        <th
+                            :class="['Version', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                            Version</th>
                         <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                     </tr>
                     <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                        <td :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">...</td>
-                        <td :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ?  'Version-darkmode' : 'Version-lightmode']">...</td>
+                        <td
+                            :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
+                            ...</td>
+                        <td
+                            :class="['Version', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Version-darkmode' : 'Version-lightmode']">
+                            ...</td>
                         <td :class="['License', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
                     </tr>
                 </table>
@@ -19,22 +27,17 @@
     </section>
 </template>
     
-    
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "SoftwareSpecifications",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-    
-      
+};
+</script>      
       
       
 <style scoped>
@@ -169,5 +172,4 @@ th {
 
 .License {
     width: 25%;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/Solution.vue b/components/server/Solution.vue
index f025ee5..619c235 100644
--- a/components/server/Solution.vue
+++ b/components/server/Solution.vue
@@ -32,7 +32,8 @@
         <div class="solution-data">
             <div class="additional">
                 <div class="description">
-                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the problem/intended use:</h3>
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
+                        problem/intended use:</h3>
                     <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
                 </div>
             </div>
@@ -49,21 +50,17 @@
 </template>
     
     
-    
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "Solution",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-   
-      
+};
+</script> 
       
       
 <style scoped>
@@ -149,13 +146,13 @@ export default {
 }
 
 .data-darkmode {
-  background-color: #212121;
-  color: #fff;
+    background-color: #212121;
+    color: #fff;
 }
 
 .data-lightmode {
-  background-color: #EBEBEB;
-  color: #000;
+    background-color: #EBEBEB;
+    color: #000;
 }
 
 .solution-data {
@@ -235,5 +232,4 @@ export default {
     padding: 0.625rem 1.875rem 0.625rem 1.25rem;
     padding-top: 0rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/server/SolutionChecklist.vue b/components/server/SolutionChecklist.vue
index f91a507..f06822c 100644
--- a/components/server/SolutionChecklist.vue
+++ b/components/server/SolutionChecklist.vue
@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="solution-checkklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
-                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
+                <th
+                    :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                    Step</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    Task</th>
                 <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
-                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
+                <td
+                    :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    ...</td>
                 <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
@@ -19,21 +31,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "SolutionChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script> 
     
     
 <style scoped>
@@ -156,14 +164,14 @@ th {
 }
 
 .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;
+    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 {
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/SolutionTable.vue b/components/server/SolutionTable.vue
index 2e153d4..47159c7 100644
--- a/components/server/SolutionTable.vue
+++ b/components/server/SolutionTable.vue
@@ -3,17 +3,33 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
         <table class="data-table" id="solution-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">Client</th>
-                <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="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    Client</th>
+                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">...</td>
-                <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="['Client', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
+                    ...</td>
+                <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>
         </table>
@@ -21,21 +37,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "SolutionTable",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script> 
     
     
 <style scoped>
@@ -170,14 +182,14 @@ th {
 }
 
 .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;
+    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 {
diff --git a/components/server/SolutionTableNoClient.vue b/components/server/SolutionTableNoClient.vue
index 09391c7..315ea65 100644
--- a/components/server/SolutionTableNoClient.vue
+++ b/components/server/SolutionTableNoClient.vue
@@ -3,15 +3,27 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
             <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="['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="['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>
         </table>
@@ -19,21 +31,17 @@
 </template>
   
   
-  
-<script>
+<script setup>
+import { ref } from 'vue';
 
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "SolutionTableNoClient",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
-  
-    
+};
+</script>     
     
     
 <style scoped>
@@ -156,14 +164,14 @@ th {
 }
 
 .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;
+    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 {
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/components/server/TemplateChecklist.vue b/components/server/TemplateChecklist.vue
index 45aba75..ee1a576 100644
--- a/components/server/TemplateChecklist.vue
+++ b/components/server/TemplateChecklist.vue
@@ -3,39 +3,47 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="template-checkklist">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">Step</th>
-                <th :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">Asset</th>
-                <th :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">Task</th>
+                <th
+                    :class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                    Step</th>
+                <th
+                    :class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    Asset</th>
+                <th
+                    :class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    Task</th>
                 <th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">...</td>
-                <td :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">...</td>
-                <td :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">...</td>
+                <td
+                    :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                    ...</td>
                 <td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
             </tr>
         </table>
     </div>
 </template>
   
-  
-  
-<script>
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
     name: "TemplateChecklist",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
-}
-
-</script>
+};
+</script> 
   
     
-    
-    
 <style scoped>
 .data {
     display: flex;
@@ -156,14 +164,14 @@ th {
 }
 
 .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;
+    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 {
@@ -172,5 +180,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 93ede28..7053c3e 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -6,7 +6,7 @@
         <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">
+        @click="ToggleSidebar">
         <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
@@ -23,28 +23,32 @@
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
+        <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" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</span>
         </router-link>
-        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="assets-button">
+        <router-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+          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" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Config Items</span>
         </router-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <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" />
           </div>
           <span v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</span>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
+        <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" />
@@ -66,22 +70,22 @@
 
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+const isExpanded = ref(true)
+
+const ToggleSidebar = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+</script>
+
 <script>
 export default {
   name: "Navigationbar",
-  data() {
-    return {
-      darkMode: true,
-      isExpanded: true,
-    };
-  },
-  methods: {
-    toggleSidebar() {
-      this.isExpanded = !this.isExpanded;
-    }
-  }
 }
-
 </script>
   
   
@@ -263,5 +267,4 @@ img {
 
 .label-lightmode {
   color: #000000;
-}
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/layouts/PageHeader.vue b/layouts/PageHeader.vue
index 7b6362a..5e6993e 100644
--- a/layouts/PageHeader.vue
+++ b/layouts/PageHeader.vue
@@ -11,17 +11,17 @@
 </template>
 
 
+<script setup>
+import { ref } from 'vue';
+
+const darkMode = ref(true)
+
+</script>
+
 <script>
-
 export default {
-    name: "PageHeader",
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
+  name: "PageHeader",
 }
-
 </script>
 
 
diff --git a/layouts/default.vue b/layouts/default.vue
index a60d942..1eabdbc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,28 +8,22 @@
 </template>
 
 
-<script>
+<script setup>
+import { ref } from 'vue';
+
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
 
-export default {
-  name: "Page",
-  components: {
-    PageHeader,
-    Navigationbar,
-    Actionbar,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
+const darkMode = ref(true)
 
 </script>
   
-  
+<script>
+export default {
+  name: "default",
+}
+</script>
   
 <style scoped>
 * {
diff --git a/layouts/empty.vue b/layouts/empty.vue
index 35e92ab..6cd337a 100644
--- a/layouts/empty.vue
+++ b/layouts/empty.vue
@@ -6,23 +6,18 @@
 </template>
   
   
-<script>
+<script setup>
 import PageHeader from "../layouts/PageHeader.vue";
 
-export default {
-  name: "Page",
-  components: {
-    PageHeader,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
-}
+const darkMode = ref(true)
 
 </script>
-    
+
+<script>
+export default {
+  name: "empty",
+}
+</script>    
     
     
 <style scoped>
diff --git a/pages/assets.vue b/pages/assets.vue
index ea58dc9..d7a3c50 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -17,12 +17,8 @@
   
   
 <script setup>
-definePageMeta({
-  layout: 'default'
-})
-</script>
+import { ref } from 'vue';
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
 import AssetTableNoClient from "../components/server/AssetTableNoClient.vue";
@@ -31,26 +27,18 @@ import HardwareSpecifications from "../components/server/HardwareSpecifications.
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
 import NetworkSpecifications from "../components/server/NetworkSpecifications.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
   name: "AssetPage",
-  components: {
-    ClientSearch,
-    AssetTable,
-    AssetTableNoClient,
-    Asset,
-    HardwareSpecifications,
-    SoftwareSpecifications,
-    NetworkSpecifications,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
-</script>
-    
+</script>   
     
     
 <style scoped>
diff --git a/pages/clients.vue b/pages/clients.vue
index faf4d85..d9c357c 100644
--- a/pages/clients.vue
+++ b/pages/clients.vue
@@ -12,36 +12,28 @@
   
   
 <script setup>
-definePageMeta({
-  layout: 'default'
-})
-</script>
+import { ref } from 'vue';
 
-<script>
 import ClientTable from "../components/server/ClientTable.vue";
 import Client from "../components/server/Client.vue";
 import ClientQuickAccess from "../components/server/ClientQuickAccess.vue";
 //import ClientEmployees from "../components/server/ClientEmployees.vue";
 //import ClientEmployee from "../components/server/ClientEmployee.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
   name: "ClientsPage",
-  components: {
-    ClientTable,
-    Client,
-    ClientQuickAccess,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
   
     
-    
 <style scoped>
 * {
   box-sizing: border-box;
diff --git a/pages/home.vue b/pages/home.vue
index 514a6e6..c1f6f24 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -13,32 +13,24 @@
   
   
 <script setup>
-definePageMeta({
-  layout: 'empty'
-})
-</script>
+import { ref } from 'vue';
 
-<script>
 import Navigationbar from "../layouts/Navigationbar.vue";
 import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
 
+definePageMeta({
+  layout: 'empty'
+})
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
   name: "HomePage",
-  components: {
-    Navigationbar,
-    Dashboard,
-    QuickAccess,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
-</script>
-    
+</script>   
     
     
 <style>
diff --git a/pages/index.vue b/pages/index.vue
index 3c4197e..7830ed5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,23 +11,19 @@
   
   
 <script setup>
+import { ref } from 'vue';
+
 definePageMeta({
   layout: 'default'
 })
+
+const darkMode = ref(true)
 </script>
 
 <script>
 export default {
   name: "Testpage",
-  components: {
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
     
     
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index b78563d..d69d169 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -37,12 +37,8 @@
     
     
 <script setup>
-definePageMeta({
-  layout: 'default'
-})
-</script>
-  
-<script>
+import { ref } from 'vue';
+
 import ClientSearch from "../components/ClientSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
 import IssueSlipTableNoClient from "../components/server/IssueSlipTableNoClient.vue";
@@ -50,23 +46,17 @@ import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
 export default {
   name: "IssueSlipPage",
-  components: {
-    ClientSearch,
-    IssueSlipTable,
-    IssueSlipTableNoClient,
-    IssueSlip,
-    OrderingInformation,
-    Accounting,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
       
       
diff --git a/pages/issues.vue b/pages/issues.vue
index daf305d..3873068 100644
--- a/pages/issues.vue
+++ b/pages/issues.vue
@@ -35,32 +35,24 @@
     
     
 <script setup>
-definePageMeta({
-    layout: 'default'
-})
-</script>
-  
-<script>
+import { ref } from 'vue';
+
 import IssueTable from "../components/server/IssueTable.vue";
 import Issue from "../components/server/Issue.vue";
 import IssueVariants from "../components/server/IssueVariants.vue";
 import IssueVariant from "../components/server/IssueVariant.vue";
 
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
 export default {
     name: "IssuePage",
-    components: {
-        IssueTable,
-        Issue,
-        IssueVariants,
-        IssueVariant,
-    },
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
 }
-
 </script>
       
       
diff --git a/pages/login.vue b/pages/login.vue
index 3c83326..f4af34b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -11,26 +11,21 @@
 
 
 <script setup>
+import { ref } from 'vue';
+
+import LoginForm from "../components/LoginForm.vue";
+
 definePageMeta({
   layout: 'empty'
 })
+
+const darkMode = ref(true)
 </script>
 
 <script>
-import LoginForm from "../components/LoginForm.vue";
-
 export default {
   name: "LoginPage",
-  components: {
-    LoginForm,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>
   
   
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index fd48a45..f0169f2 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -1,143 +1,130 @@
 <template>
-    <section id="content">
-      <div id="content-header">
-        <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
-          <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
-        </router-link>
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        &nbsp;
-        <router-link to="/productionOrders" class="button" id="productionOrders-button">
-          <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
-        </router-link>
-      </div>
-      <div id="content-body">
-        <ClientSearch />
-        <MaintenanceVisitsTemplateTable />
-        <MaintenanceVisitsTemplateTableNoClient />
-        <MaintenanceVisitsTemplate />
-        <TemplateChecklist />
-        <TemplateSearch />
-        <MaintenanceVisitsInstanceTable />
-        <MaintenanceVisitsInstance />
-        <InstanceChecklist />
-      </div>
-    </section>
-  </template>
+  <section id="content">
+    <div id="content-header">
+      <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
+      </router-link>
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      &nbsp;
+      <router-link to="/productionOrders" class="button" id="productionOrders-button">
+        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
+      </router-link>
+    </div>
+    <div id="content-body">
+      <ClientSearch />
+      <MaintenanceVisitsTemplateTable />
+      <MaintenanceVisitsTemplateTableNoClient />
+      <MaintenanceVisitsTemplate />
+      <TemplateChecklist />
+      <TemplateSearch />
+      <MaintenanceVisitsInstanceTable />
+      <MaintenanceVisitsInstance />
+      <InstanceChecklist />
+    </div>
+  </section>
+</template>
       
       
-  <script setup>
-  definePageMeta({
-    layout: 'default'
-  })
-  </script>
+<script setup>
+import { ref } from 'vue';
+
+import ClientSearch from "../components/ClientSearch.vue";
+import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
+import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
+import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
+import TemplateChecklist from "../components/server/TemplateChecklist.vue";
+import TemplateSearch from "../components/TemplateSearch.vue";
+import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
+import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
+import InstanceChecklist from "../components/server/InstanceChecklist.vue";
+
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
     
-  <script>
-  import ClientSearch from "../components/ClientSearch.vue";
-  import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
-  import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
-  import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
-  import TemplateChecklist from "../components/server/TemplateChecklist.vue";
-  import TemplateSearch from "../components/TemplateSearch.vue";
-  import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
-  import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
-  import InstanceChecklist from "../components/server/InstanceChecklist.vue";
-  
-  export default {
-    name: "MaintenanceVisitsPage",
-    components: {
-      ClientSearch,
-      MaintenanceVisitsTemplateTable,
-      MaintenanceVisitsTemplateTableNoClient,
-      MaintenanceVisitsTemplate,
-      TemplateChecklist,
-      TemplateSearch,
-      MaintenanceVisitsInstanceTable,
-      MaintenanceVisitsInstance,
-      InstanceChecklist,
-    },
-    data() {
-      return {
-        darkMode: true,
-      };
-    },
-  }
-  
-  </script>
+<script>
+export default {
+  name: "MaintenanceVisitsPage",
+}
+</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;
-  }
-  
-  #active-page-name {
-    letter-spacing: 5%;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
-      sans-serif;
-    text-decoration: underline;
-  }
-  
-  .button {
-    text-decoration: none;
-  }
-  
-  .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;
-  }
-  </style>
\ No newline at end of file
+<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;
+}
+
+#active-page-name {
+  letter-spacing: 5%;
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+    sans-serif;
+  text-decoration: underline;
+}
+
+.button {
+  text-decoration: none;
+}
+
+.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;
+}
+</style>
\ No newline at end of file
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index f692fde..252ed99 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -40,12 +40,8 @@
     
     
 <script setup>
-definePageMeta({
-    layout: 'default'
-})
-</script>
-  
-<script>
+import { ref } from 'vue';
+
 import ClientSearch from "../components/ClientSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
 import ProductionOrdersTemplateTableNoClient from "../components/server/ProductionOrdersTemplateTableNoClient.vue";
@@ -56,28 +52,18 @@ import ProductionOrdersInstanceTable from "../components/server/ProductionOrders
 import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
 import InstanceChecklist from "../components/server/InstanceChecklist.vue";
 
+definePageMeta({
+    layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+  
+<script>
 export default {
     name: "ProductionOrdersPage",
-    components: {
-        ClientSearch,
-        ProductionOrdersTemplateTable,
-        ProductionOrdersTemplateTableNoClient,
-        ProductionOrdersTemplate,
-        TemplateChecklist,
-        TemplateSearch,
-        ProductionOrdersInstanceTable,
-        ProductionOrdersInstance,
-        InstanceChecklist,
-    },
-    data() {
-        return {
-            darkMode: true,
-        };
-    },
 }
-
-</script>
-      
+</script>     
       
       
 <style scoped>
@@ -121,7 +107,7 @@ export default {
 }
 
 .button {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .h1-darkmode {
diff --git a/pages/solutions.vue b/pages/solutions.vue
index dfa572b..8d8d168 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -15,34 +15,25 @@
   
   
 <script setup>
-definePageMeta({
-  layout: 'default'
-})
-</script>
+import { ref } from 'vue';
 
-<script>
 import ClientSearch from "../components/ClientSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
 import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 
+definePageMeta({
+  layout: 'default'
+})
+
+const darkMode = ref(true)
+</script>
+
+<script>
 export default {
   name: "AssetPage",
-  components: {
-    ClientSearch,
-    SolutionTable,
-    SolutionTableNoClient,
-    Solution,
-    SolutionChecklist,
-  },
-  data() {
-    return {
-      darkMode: true,
-    };
-  },
 }
-
 </script>