diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index 6055d3f..88f6558 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -1,31 +1,48 @@
 <template>
     <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
+        <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ item.assetName }}</h2>
+        <input v-if="editable" v-model="item.assetName"
+            :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
             <div class="client-location">
                 <div class="data-field" id="client">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
+                    <input v-if="editable" v-model="item.customer"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="location">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Location:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.location }}</pre>
+                    <input v-if="editable" v-model="item.location"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="info">
                 <div class="id-type">
                     <div class="data-field" id="id">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.primaryID }}</pre>
+                        <input v-if="editable" v-model="item.primaryID"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.type }}</pre>
+                        <input v-if="editable" v-model="item.type"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
                 <div class="data-field" id="remote-location">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Remote location:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.remoteLocation }}</pre>
+                    <input v-if="editable" v-model="item.remoteLocation"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="rectangle-container">
@@ -36,13 +53,19 @@
             <div class="additional">
                 <div class="description">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">{{ item.description }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="description">{{ item.description }}</pre>
+                    <input v-if="editable" v-model="item.description"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
                 </div>
             </div>
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">{{ item.notes }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="notes">{{ item.notes }}</pre>
+                    <input v-if="editable" v-model="item.notes"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -56,6 +79,7 @@ import Axios from '../axios.config.js';
 import serversideConfig from '../serversideConfig.js';
 
 const darkMode = ref(true)
+// const editable = ref(false)
 const item = ref({});
 
 // get config item from id
@@ -74,13 +98,20 @@ const getItemById = async () => {
 
 onMounted(() => {
     getItemById();
+    // console.log(editable.value)
 });
+
 </script>
 
 <script>
 export default {
     name: "Asset",
-};
+    computed: {
+        editable() {
+            return this.$store.state.assetEditable
+        }
+    },
+}
 </script>
       
       
@@ -114,6 +145,16 @@ export default {
         sans-serif;
 }
 
+.asset-name-input {
+    padding: 1rem 0;
+    margin: 1rem;
+    font-size: initial;
+    letter-spacing: 5%;
+    text-decoration-line: underline;
+    font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
+        sans-serif;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -133,6 +174,14 @@ export default {
     border-radius: 0.625rem;
 }
 
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
 .data-field#street-name {
     width: 70%;
 }
@@ -154,6 +203,10 @@ export default {
     color: #000;
 }
 
+.input {
+    border: none;
+}
+
 .data {
     display: flex;
     flex-direction: row;
diff --git a/components/server/HardwareSpecifications.vue b/components/server/HardwareSpecifications.vue
index 805e68e..1b0a68f 100644
--- a/components/server/HardwareSpecifications.vue
+++ b/components/server/HardwareSpecifications.vue
@@ -5,21 +5,33 @@
             <div class="model-CPU">
                 <div class="data-field" id="model">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Model:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.model }}</pre>
+                    <input v-if="editable" v-model="item.model"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="CPU">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">CPU:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.CPU }}</pre>
+                    <input v-if="editable" v-model="item.CPU"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
             <div class="serial-number-RAM">
                 <div class="data-field" id="serial-number">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Serial number:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.serialnumber }}</pre>
+                    <input v-if="editable" v-model="item.serialnumber"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="RAM">
                     <pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">RAM:</pre>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
+                    <pre v-if="!editable"
+                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ item.RAM }}</pre>
+                    <input v-if="editable" v-model="item.RAM"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -27,14 +39,20 @@
             <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']"
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
                         id="storage-configuration">{{ item.storageConfiguration }}</pre>
+                    <input v-if="editable" v-model="item.storageConfiguration"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="storage-configuration">
                 </div>
             </div>
             <div class="additional">
                 <div class="miscellaneous">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Miscellaneous:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">{{ item.miscellaneous }}</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="miscellaneous">{{ item.miscellaneous }}</pre>
+                    <input v-if="editable" v-model="item.miscellaneous"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="miscellaneous">
                 </div>
             </div>
         </div>
@@ -80,6 +98,11 @@ onMounted(() => {
 <script>
 export default {
     name: "HardwareSpecifications",
+    computed: {
+        editable() {
+            return this.$store.state.assetEditable
+        }
+    },
 };
 </script>   
 
@@ -147,6 +170,10 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.input {
+    border: none;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
diff --git a/components/server/NetworkSpecifications.vue b/components/server/NetworkSpecifications.vue
index f13bdb8..2b11843 100644
--- a/components/server/NetworkSpecifications.vue
+++ b/components/server/NetworkSpecifications.vue
@@ -47,7 +47,6 @@ const getItemById = async () => {
             `https://${serversideConfig.url}:3000/api/getConfigItem/${itemIndex}`
         );
         item.value = response.data;
-        console.log(item.value)
         if ((item.value.networkBool == 1) && (item.value.IPv4 === (null | "")) && (item.value.IPv6 === (null | "")) && (item.value.subnetmask === (null | "")) && (item.value.MAC === (null | ""))) {
             item.value.networkBool = 0;
             networkBoolean.value = false;
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 1457e83..dfc00c1 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,79 +1,91 @@
 <template>
-  <aside :class="[ 'actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleActionbar">
-      <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
+  <aside
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+        src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
-    <nav class="actions" >
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="search" >
+    <nav class="actions">
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search">
         <div class="icon" id="search-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Search</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="filter" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter">
         <div class="icon" id="filter-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Filter</pre>
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="instances" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Instances-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Instances</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="attachments" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Attachments</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="sell" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Sell-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Sell</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="archive" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Archive-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Archive</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="new" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new">
         <div class="icon" id="new-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">New</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="edit" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Edit-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Edit</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="delete" >
+      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete">
         <div class="icon" id="delete-icon">
-          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="../icons/actionbar-icons/Delete-Icon.svg" />
         </div>
-        <Transition name="fade" >
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Delete</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
         </Transition>
       </button>
     </nav>
@@ -84,228 +96,256 @@
 
 <script>
 
-  export default {
-    name: "Actionbar",
-    data() {
-      return {
-        darkMode: true,
-        isExpanded: true,
-      };
-    },                                            
-    methods: {
-      toggleActionbar() {
-        console.log('Actionbar toggled');
-        this.isExpanded = !this.isExpanded;
-      },
+export default {
+  name: "Actionbar",
+  data() {
+    return {
+      darkMode: true,
+      isExpanded: true,
+    };
+  },
+  methods: {
+    toggleActionbar() {
+      console.log('Actionbar toggled');
+      this.isExpanded = !this.isExpanded;
     },
-  }
+    toggleEditable() {
+      this.$store.commit('toggleEditableAsset')
+    }
+  },
+}
 
 </script>
 
 
 
 <style scoped>
-
-  * {
-    box-sizing: border-box;
-  }
+* {
+  box-sizing: border-box;
+}
 
 
-  aside.actionbar {
-    display: flex;
-    flex-direction: column;
-    position: sticky;
-    top: 5rem;
-    height: fit-content;
-    width: fit-content;
-    inline-size: fit-content;
-    border-radius: 0.625rem;
-    flex: 0 0 0;
-    align-items: stretch;
-    justify-content: center;
-    padding: 1.875rem 0.625rem;
-    gap: 1.25rem;
-    transition: all 10s ease-in-out 0s;
-    overflow: clip;
-  }
-  .actionbar-darkmode {
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2C2C2C;
-  }
-  .actionbar-lightmode {
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #FFFFFF;
-  }
-  aside.is-expanded {
-    animation: expand 0.5s linear both;
-  }
-  aside.is-not-expanded {
-    animation: contract 0.5s linear both;
-    width: stretch;
-    inline-size: stretch;
-  }
+aside.actionbar {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 5rem;
+  height: fit-content;
+  width: fit-content;
+  inline-size: fit-content;
+  border-radius: 0.625rem;
+  flex: 0 0 0;
+  align-items: stretch;
+  justify-content: center;
+  padding: 1.875rem 0.625rem;
+  gap: 1.25rem;
+  transition: all 10s ease-in-out 0s;
+  overflow: clip;
+}
+
+.actionbar-darkmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #2C2C2C;
+}
+
+.actionbar-lightmode {
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+}
+
+aside.is-expanded {
+  animation: expand 0.5s linear both;
+}
+
+aside.is-not-expanded {
+  animation: contract 0.5s linear both;
+  width: stretch;
+  inline-size: stretch;
+}
 
 
-  .actions {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    padding: 1.25rem 0;
-    gap: 1.25rem;
-    overflow: clip;
-  }
+.actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1.25rem 0;
+  gap: 1.25rem;
+  overflow: clip;
+}
 
 
-  button {
-    display: flex;
-    flex-direction: row;
-    align-self: stretch;
-    height: 1.875rem;
-    border-radius: 0.625rem;
-    align-items: center;
-    justify-content: flex-start;
-    border: none;
-    transition: 0.2s ease-in-out;
-    overflow: clip;
-    gap: 0.125rem
-  }
-  .button-darkmode {
-    background-color: #2C2C2C;
-  }
-  .button-lightmode {
-    background-color: #FFFFFF;
-  }
-  .button-darkmode:hover, .indicator-darkmode:hover {
-    background-color: #444444;
-  }
-  .button-lightmode:hover, .indicator-lightmode:hover {
-    background-color: #ACACAC;
-  }
-  .is-not-expanded > button {
-    align-self: center;
-    gap: 0.5rem;
-  }
+button {
+  display: flex;
+  flex-direction: row;
+  align-self: stretch;
+  height: 1.875rem;
+  border-radius: 0.625rem;
+  align-items: center;
+  justify-content: flex-start;
+  border: none;
+  transition: 0.2s ease-in-out;
+  overflow: clip;
+  gap: 0.125rem
+}
+
+.button-darkmode {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
+
+.button-darkmode:hover,
+.indicator-darkmode:hover {
+  background-color: #444444;
+}
+
+.button-lightmode:hover,
+.indicator-lightmode:hover {
+  background-color: #ACACAC;
+}
+
+.is-not-expanded>button {
+  align-self: center;
+  gap: 0.5rem;
+}
 
 
-  .icon {
-    display: flex;
-    flex-direction: row;
-    /*width: 0.875rem;*/
-    height: 1.875rem;
-    align-items: center;
-    justify-content: center;
-    padding: 0 0.5rem;
-    transition: padding 0.5s linear
-  }
-  #indicator-icon {
-    width: 1.875rem;
-    height: 1.875rem;
-    border-radius: 0.3125rem;
-    transition: 0.2s ease-in-out;
-  }
-  .is-not-expanded .icon {
-    align-self: center;
-    padding: 0 0.375rem;
-  }
-  .is-not-expanded #indicator-icon {
-    transform: rotate(180deg);
-  }
+.icon {
+  display: flex;
+  flex-direction: row;
+  /*width: 0.875rem;*/
+  height: 1.875rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.5rem;
+  transition: padding 0.5s linear
+}
 
-  img {
-    width: 0.875rem;
-    height: 0.875rem;
-    object-fit: contain;
-    object-position: center;
-    overflow: hidden;
-  }
-  #indicator-icon > img {
-    height: 1.25rem;
-  }
-  .img-darkmode {
-    filter: invert(100%);
-  }
+#indicator-icon {
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.3125rem;
+  transition: 0.2s ease-in-out;
+}
+
+.is-not-expanded .icon {
+  align-self: center;
+  padding: 0 0.375rem;
+}
+
+.is-not-expanded #indicator-icon {
+  transform: rotate(180deg);
+}
+
+img {
+  width: 0.875rem;
+  height: 0.875rem;
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+}
+
+#indicator-icon>img {
+  height: 1.25rem;
+}
+
+.img-darkmode {
+  filter: invert(100%);
+}
 
 
-  .label {
-    display: inline-flex;
-    min-width: 0;
-    padding: 0rem 0.3125rem 0rem 0rem;
-    letter-spacing: 5%;
-    align-self: center;
-    white-space: nowrap;
-    font: 400 0.875rem/1.25rem Overpass, sans-serif;
-  }
-  .label-darkmode {
-    color: #FFFFFF;
-  }
-  .label-lightmode {
-    color: #000000;
-  }
+.label {
+  display: inline-flex;
+  min-width: 0;
+  padding: 0rem 0.3125rem 0rem 0rem;
+  letter-spacing: 5%;
+  align-self: center;
+  white-space: nowrap;
+  font: 400 0.875rem/1.25rem Overpass, sans-serif;
+}
+
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 
-  .fade-enter-from, .fade-leave-to {
-    opacity: 0;
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+  max-width: 0;
+}
+
+.fade-enter-active {
+  transition: all 0.75s;
+  overflow: clip;
+  animation: fade-in 0.5s linear forwards;
+}
+
+.fade-leave-active {
+  transition: all 0.75s;
+  animation: fade-out 0.5s linear forwards;
+}
+
+.fade-move {
+  transition: transform 5s
+}
+
+@keyframes expand {
+  from {
+    max-inline-size: 3.25rem;
+    max-width: 3.25rem;
   }
-  .fade-enter-to, .fade-leave-from {
-    opacity: 1;
+
+  to {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+}
+
+@keyframes contract {
+  from {
+    max-inline-size: 9.0625rem;
+    max-width: 9.0625rem;
+  }
+
+  to {
+    max-inline-size: 3.25rem;
+    max-width: 3.25rem;
+  }
+}
+
+@keyframes fade-in {
+  from {
     max-width: 0;
-  }
-  .fade-enter-active {
-    transition: all 0.75s;
-    overflow: clip;
-    animation: fade-in 0.5s linear forwards;
-  }
-  .fade-leave-active {
-    transition: all 0.75s;
-    animation: fade-out 0.5s linear forwards;
-  }
-  .fade-move {
-    transition: transform 5s
+    max-inline-size: 0;
   }
 
-  @keyframes expand {
-    from {
-      max-inline-size: 3.25rem;
-      max-width: 3.25rem;
-    }
-    to {
-      max-inline-size: 9.0625rem;
-      max-width: 9.0625rem;
-    }
+  to {
+    max-width: 7.5rem;
+    width: fit-content;
   }
-  @keyframes contract {
-    from {
-      max-inline-size: 9.0625rem;
-      max-width: 9.0625rem;
-    }
-    to {
-      max-inline-size: 3.25rem;
-      max-width: 3.25rem;
-    }
+}
+
+@keyframes fade-out {
+  from {
+    max-width: 7.5rem;
+    width: fit-content;
   }
 
-  @keyframes fade-in {
-    from {
-      max-width: 0;
-      max-inline-size: 0;
-    }
-    to {
-      max-width: 7.5rem;
-      width: fit-content;
-    }
+  to {
+    max-width: 0;
+    max-inline-size: 0;
   }
-  @keyframes fade-out {
-    from {
-      max-width: 7.5rem;
-      width: fit-content;
-    }
-    to {
-      max-width: 0;
-      max-inline-size: 0;
-    }
-  }
-
-
-
-</style>
\ No newline at end of file
+}</style>
\ No newline at end of file
diff --git a/pages/assets.vue b/pages/assets.vue
index 4a2cceb..a3a74da 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -40,7 +40,7 @@ const darkMode = ref(true)
 // to render the right components
 const onAssetlist = ref(true)
 const onCustomerAssetlist = ref(false)
-const onAsset = ref(false)
+const onAsset = ref(true)
 const onSolutionlistAsset = ref(false)
 </script>
 
diff --git a/routerFrontend/index.js b/routerFrontend/index.js
index 6113f9f..3b7b30f 100644
--- a/routerFrontend/index.js
+++ b/routerFrontend/index.js
@@ -13,6 +13,10 @@ import SettingsPage from '../pages/settings.vue';
 const router = createRouter({
     history: createWebHistory(),
     routes: [
+        {
+            path: '/asset',
+            component: AssetPage
+        },
         {
             path: '/login',
             component: LoginPage
@@ -20,11 +24,11 @@ const router = createRouter({
         {
             path: '/home',
             component: HomePage
-        }, 
+        },
         {
             path: '/productionOrders',
             component: ProductionOrdersPage
-        },  
+        },
         {
             path: '/maintenanceVisits',
             component: MaintenanceVisitsPage
@@ -32,31 +36,27 @@ const router = createRouter({
         {
             path: '/assets',
             component: AssetPage
-        },  
-        {
-            path: '/chosenAsset',
-            component: AssetPage
-        },  
+        },
         {
             path: '/solutions',
             component: SolutionPage
-        },  
+        },
         {
             path: '/issueSlips',
             component: IssueSlipPage
-        }, 
+        },
         {
             path: '/issues',
             component: IssuesPages
-        },  
+        },
         {
             path: '/clients',
             component: ClientsPage
-        },  
+        },
         {
             path: '/settings',
             component: SettingsPage
-        },      
+        },
     ]
 })
 
diff --git a/server/api/login.ts b/server/api/login.ts
index 6eda633..a1e6e4d 100644
--- a/server/api/login.ts
+++ b/server/api/login.ts
@@ -5,11 +5,14 @@ export default defineEventHandler(async (event) => {
 
     const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
         'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
-        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Headers': 'origin, authorization, content-type',
         'Access-Control-Allow-Methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Max-Age': '86400',
     };
     setResponseHeaders(event, headers)
 
+    console.log(event)
+
     if (!loginSuccessful) {
         throw createError({
             statusCode: 400,