diff --git a/backend/controller/maintenanceVisitTodos.js b/backend/controller/maintenanceVisitTodos.js
index 707348a..6eb6f94 100644
--- a/backend/controller/maintenanceVisitTodos.js
+++ b/backend/controller/maintenanceVisitTodos.js
@@ -5,6 +5,8 @@ import {
   getMaintenanceVisitTodosByAsset,
   updateMaintenanceVisitTodoById,
   deleteMaintenanceVisitTodosByPrimaryID,
+  deleteMaintenanceVisitTodosByTemplateID,
+  getMaintenanceVisitTodosByTemplate,
 } from "../models/maintenanceVisitsTodosModel.js";
 
 //create new maintenance visit todo
@@ -41,6 +43,17 @@ export const showMaintenanceVisitTodosByAsset = (req, res) => {
   });
 };
 
+//get maintenance visit todos by assetname
+export const showMaintenanceVisitTodosByTemplateId = (req, res) => {
+  getMaintenanceVisitTodosByTemplate(req.params.id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
+};
+
 // Update maintenance visit todo
 export const updateMaintenanceVisitTodo = (req, res) => {
   const data = req.body;
@@ -63,4 +76,16 @@ export const deleteMaintenanceVisitTodos = (req, res) => {
       res.json(results);
     }
   });
+};
+
+// Delete maintenance visit todos by template id
+export const deleteMaintenanceVisitTodosBytemplateId = (req, res) => {
+  const id = req.params.id;
+  deleteMaintenanceVisitTodosByTemplateID(id, (err, results) => {
+    if (err) {
+      res.send(err);
+    } else {
+      res.json(results);
+    }
+  });
 };
\ No newline at end of file
diff --git a/backend/controller/maintenanceVisits.js b/backend/controller/maintenanceVisits.js
index e8d9d27..5344d32 100644
--- a/backend/controller/maintenanceVisits.js
+++ b/backend/controller/maintenanceVisits.js
@@ -9,7 +9,7 @@ import {
   insertMaintenanceVisit,
   getMaintenanceVisitByName,
   getMaintenanceVisitById,
-  updateMaintenanceVisitStateById,
+  updateMaintenanceVisitById,
   getSelectedMaintenanceVisitsByUser,
   getSelectedMaintenanceVisitsByTemplate,
 } from "../models/maintenanceVisitsModel.js";
@@ -138,9 +138,9 @@ export const showMaintenanceVisitById = (req, res) => {
 };
 
 // Update maintenance visit
-export const updateMaintenanceVisitState = (req, res) => {
+export const updateMaintenanceVisit = (req, res) => {
   const data = req.body;
-  updateMaintenanceVisitStateById(data, (err, results) => {
+  updateMaintenanceVisitById(data, (err, results) => {
     if (err) {
       res.send(err);
     } else {
diff --git a/backend/controller/productionOrderTodos.js b/backend/controller/productionOrderTodos.js
index 3dc758c..950360a 100644
--- a/backend/controller/productionOrderTodos.js
+++ b/backend/controller/productionOrderTodos.js
@@ -5,6 +5,7 @@ import {
     getProductionOrderTodosByAsset,
     updateProductionOrderTodoById,
     deleteProductionOrderTodosChecklistID,
+    getProductionOrderTodosByTemplate,
 } from "../models/productionOrdersTodosModel.js";
 
 //create new production order todo
@@ -41,6 +42,18 @@ export const showProductionOrderTodosByAsset = (req, res) => {
     });
 };
 
+
+//get production order todos by template
+export const showProductionOrderTodosByTemplate = (req, res) => {
+    getProductionOrderTodosByTemplate(req.params.id, (err, results) => {
+        if (err) {
+            res.send(err);
+        } else {
+            res.json(results);
+        }
+    });
+};
+
 // Update production order todo
 export const updateProductionOrderTodo = (req, res) => {
     const data = req.body;
diff --git a/backend/models/maintenanceVisitsModel.js b/backend/models/maintenanceVisitsModel.js
index 682e1cf..cea93f5 100644
--- a/backend/models/maintenanceVisitsModel.js
+++ b/backend/models/maintenanceVisitsModel.js
@@ -103,6 +103,7 @@ export const deleteMaintenanceVisitById = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisits WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
@@ -155,11 +156,11 @@ export const getMaintenanceVisitById = async (id, result) => {
 };
 
 // Update maintenance visit state to Database
-export const updateMaintenanceVisitStateById = async (data, result) => {
+export const updateMaintenanceVisitById = async (data, result) => {
   try {
     const id = data.primaryID;
-    let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
-    const results = await ownConn.query(sql, [data.state, id])
+    let sql = `UPDATE maintenancevisits SET primaryID = ?, name = ?, templateID = ?, maintenanceType = ?, state = ?, creationDate = ?, completionDate = ?, user = ?, customer = ?, customerID = ?, templateNotes = ?, type = ?, timeSpent = ?, notes = ? WHERE primaryID = ?`;
+    const results = await ownConn.query(sql, [data.primaryID, data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes, id])
     results.insertId = results.insertId.toString();
     result(null, results);
   }
diff --git a/backend/models/maintenanceVisitsTodosModel.js b/backend/models/maintenanceVisitsTodosModel.js
index 1c81333..2b27975 100644
--- a/backend/models/maintenanceVisitsTodosModel.js
+++ b/backend/models/maintenanceVisitsTodosModel.js
@@ -42,6 +42,20 @@ export const getMaintenanceVisitTodosByAsset = async (id, result) => {
   }
 };
 
+//get maintenance visit todo by template
+export const getMaintenanceVisitTodosByTemplate = async (id, result) => {
+  try {
+    let sql = `SELECT * FROM maintenancevisittodos WHERE templateID = ? ORDER BY primaryID ASC`;
+    const results = await ownConn.execute(sql, [id])
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
 // Update maintenance visit todo to Database
 export const updateMaintenanceVisitTodoById = async (data, result) => {
   try {
@@ -63,6 +77,22 @@ export const deleteMaintenanceVisitTodosByPrimaryID = async (id, result) => {
   try {
     let sql = `DELETE FROM maintenancevisittodos WHERE primaryID = ?`;
     const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
+    result(null, results);
+  }
+  catch (err) {
+    // Manage Errors
+    console.log("SQL error : ", err);
+    result(err, null);
+  }
+};
+
+// Delete maintenance visit todos by template to Database
+export const deleteMaintenanceVisitTodosByTemplateID = async (id, result) => {
+  try {
+    let sql = `DELETE FROM maintenancevisittodos WHERE templateID = ?`;
+    const results = await ownConn.query(sql, [id])
+    results.insertId = results.insertId.toString();
     result(null, results);
   }
   catch (err) {
diff --git a/backend/models/productionOrdersModel.js b/backend/models/productionOrdersModel.js
index 8daebfa..d19194d 100644
--- a/backend/models/productionOrdersModel.js
+++ b/backend/models/productionOrdersModel.js
@@ -3,7 +3,7 @@ import ownConn from "../dbConfig.js";
 //get all production orders
 export const getProductionOrders = async (result) => {
     try {
-        let sql = `SELECT * FROM productionorders ORDER BY name ASC`;
+        let sql = `SELECT * FROM productionorders ORDER BY ticketNumber ASC`;
         const results = await ownConn.execute(sql)
         result(null, results);
     }
@@ -117,6 +117,7 @@ export const deleteProductionOrderById = async (id, result) => {
     try {
         let sql = `DELETE FROM productionorders WHERE ticketNumber = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
diff --git a/backend/models/productionOrdersTodosModel.js b/backend/models/productionOrdersTodosModel.js
index 790bc5c..faa4be1 100644
--- a/backend/models/productionOrdersTodosModel.js
+++ b/backend/models/productionOrdersTodosModel.js
@@ -4,6 +4,7 @@ import ownConn from "../dbConfig.js";
 export const insertProductionOrderTodo = async (data, result) => {
     try {
         const results = await ownConn.query(`INSERT INTO productionordertodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done]);
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -27,7 +28,7 @@ export const getProductionOrderTodosById = async (id, result) => {
     }
 };
 
-//get single production order todo by asset
+//get production order todo by asset
 export const getProductionOrderTodosByAsset = async (id, result) => {
     try {
         let sql = `SELECT * FROM productionordertodos WHERE asset = ? ORDER BY primaryID ASC`;
@@ -41,12 +42,27 @@ export const getProductionOrderTodosByAsset = async (id, result) => {
     }
 };
 
+//get production order todo by template
+export const getProductionOrderTodosByTemplate = async (id, result) => {
+    try {
+        let sql = `SELECT * FROM productionordertodos WHERE templateID = ? ORDER BY primaryID ASC`;
+        const results = await ownConn.execute(sql, [id])
+        result(null, results);
+    }
+    catch (err) {
+        // Manage Errors
+        console.log("SQL error : ", err);
+        result(err, null);
+    }
+};
+
 // Update production order todo to Database
 export const updateProductionOrderTodoById = async (data, result) => {
     try {
         const id = data.primaryID;
         let sql = `UPDATE productionordertodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
         const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, data.done, id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
@@ -61,6 +77,7 @@ export const deleteProductionOrderTodosChecklistID = async (id, result) => {
     try {
         let sql = `DELETE FROM productionordertodos WHERE templateID = ?`;
         const results = await ownConn.query(sql, [id])
+        results.insertId = results.insertId.toString();
         result(null, results);
     }
     catch (err) {
diff --git a/backend/routes/routes.js b/backend/routes/routes.js
index c6b2d77..e180fb2 100644
--- a/backend/routes/routes.js
+++ b/backend/routes/routes.js
@@ -25,7 +25,7 @@ import {
     createMaintenanceVisit,
     showMaintenanceVisitByName,
     showMaintenanceVisitById,
-    updateMaintenanceVisitState,
+    updateMaintenanceVisit,
 } from "../controller/maintenanceVisits.js"
 
 import {
@@ -34,6 +34,8 @@ import {
     showMaintenanceVisitTodosByAsset,
     updateMaintenanceVisitTodo,
     deleteMaintenanceVisitTodos,
+    deleteMaintenanceVisitTodosBytemplateId,
+    showMaintenanceVisitTodosByTemplateId,
 } from "../controller/maintenanceVisitTodos.js"
 
 import {
@@ -75,6 +77,7 @@ import {
     createProductionOrderTodos,
     showProductionOrderTodosById,
     showProductionOrderTodosByAsset,
+    showProductionOrderTodosByTemplate,
     updateProductionOrderTodo,
     deleteProductionOrderTodos,
 } from "../controller/productionOrderTodos.js";
@@ -448,6 +451,9 @@ router.get("/productionOrderTodos/:id", showProductionOrderTodosById);
 //get all production order todos by assetname
 router.get("/productionOrderTodosByAsset/:id", showProductionOrderTodosByAsset);
 
+//get all production order todos by template id
+router.get("/productionOrderTodosByTemplateID/:id", showProductionOrderTodosByTemplate);
+
 // Update production order todo
 router.put("/productionOrderTodos", updateProductionOrderTodo);
 
@@ -490,8 +496,8 @@ router.get("/maintenanceVisitByName/:id", showMaintenanceVisitByName);
 //get single maintenance visit by primaryId
 router.get("/maintenanceVisit/:id", showMaintenanceVisitById);
 
-// Update maintenance visit state
-router.put("/maintenanceVisitState", updateMaintenanceVisitState);
+// Update maintenance visit
+router.put("/maintenanceVisit", updateMaintenanceVisit);
 
 
 
@@ -505,12 +511,18 @@ router.get("/maintenanceVisitTodos/:id", showMaintenanceVisitTodosById);
 //get all maintenance visit todos by assetname
 router.get("/maintenanceVisitTodosByAsset/:id", showMaintenanceVisitTodosByAsset);
 
+//get all maintenance visit todos by template id
+router.get("/maintenanceVisitTodosByTemplateId/:id", showMaintenanceVisitTodosByTemplateId);
+
 // Update maintenance visit todo
 router.put("/maintenanceVisitTodos", updateMaintenanceVisitTodo);
 
 // Delete maintenance visit todos
 router.delete("/maintenanceVisitTodos/:id", deleteMaintenanceVisitTodos);
 
+// Delete maintenance visit todos by template id
+router.delete("/maintenanceVisitTodosByTemplateID/:id", deleteMaintenanceVisitTodosBytemplateId);
+
 
 
 // routes with issue slips:
diff --git a/components/TemplateSearch.vue b/components/TemplateSearch.vue
index 96ada2e..96452c7 100644
--- a/components/TemplateSearch.vue
+++ b/components/TemplateSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :class="['template-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section v-if="notAllInstancesIcon" :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>
@@ -21,6 +21,7 @@ const modeChanged = computed(() => store.state.updateDarkMode);
 const template = ref({});
 const chosenMVTId = computed(() => store.state.chosenMVTId);
 const chosenPOTId = computed(() => store.state.chosenPOTId);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 
 const darkMode = ref('');
 
@@ -34,24 +35,26 @@ const getSession = async () => {
 }
 
 // get maintenance visit template from id
-const getMVTById = async () => {
-  if (id.value.fullPath == '/maintenanceVisits') {
-    try {
-      const response = await Axios.get(
-        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
-      );
-      template.value = response.data;
-    } catch (err) {
-      console.log(err.response.statusText);
-    }
-  } else if (id.value.fullPath == '/productionOrders') {
-    try {
-      const response = await Axios.get(
-        `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
-      );
-      template.value = response.data;
-    } catch (err) {
-      console.log(err.response.statusText);
+const getTById = async () => {
+  if (notAllInstancesIcon.value) {
+    if (id.value.fullPath == '/maintenanceVisits') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
+    } else if (id.value.fullPath == '/productionOrders') {
+      try {
+        const response = await Axios.get(
+          `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+        );
+        template.value = response.data;
+      } catch (err) {
+        console.log(err.response.statusText);
+      }
     }
   }
 }
@@ -68,7 +71,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
   getSession();
-  await getMVTById();
+  await getTById();
 });
 </script>
 
diff --git a/components/server/Asset.vue b/components/server/Asset.vue
index 21dfba7..9f17d2c 100644
--- a/components/server/Asset.vue
+++ b/components/server/Asset.vue
@@ -331,7 +331,14 @@ const updateNewCustomerID = async () => {
 const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     setTimeout(() => {
         fetchDataFunc();
-    }, 1500);
+    }, 2000);
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithSmallDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 500);
 }
 
 const getSession = async () => {
@@ -356,7 +363,7 @@ watch(modeChanged, getSession)
 
 onMounted(async () => {
     await getSession();
-    await getItemById();
+    triggerBackendCallsWithSmallDelay(getItemById);
     triggerBackendCallsWithDelay(getConfigItems);
     triggerBackendCallsWithDelay(getCustomers);
 });
diff --git a/components/server/InstanceChecklist.vue b/components/server/InstanceChecklist.vue
index 80b8986..8560bde 100644
--- a/components/server/InstanceChecklist.vue
+++ b/components/server/InstanceChecklist.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
         <table class="data-table" id="instance-checklist">
             <tbody>
@@ -16,38 +16,70 @@
                     <th
                         :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
                         Comments</th>
-                    <th :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="todo in poiTodos" :key="todo.primaryID"
+                    :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>
+                        {{ todo.rowID }}</td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        ...</td>
+                        {{ todo.asset }}</td>
                     <td
                         :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
-                        ...</td>
-                    <td
+                        {{ todo.task }}</td>
+                    <td v-if="!editable"
                         :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
-                        ...</td>
-                    <td :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="checkbox"
+                        {{ todo.comments }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.comments" @change="updatePOITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
                             :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
                 </tr>
             </tbody>
         </table>
-    </div>
+    </section>
+    <section v-if="addBool" id="saveNewPOI">
+        <button :class="[darkMode ? 'saveNewPOI-darkmode' : 'saveNewPOI-lightmode']" @click="addPOI()">Save</button>
+    </section>
 </template>
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 import { computed } from 'vue';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
-const darkMode = ref('')
+const chosenPOTId = computed(() => store.state.chosenPOTId);
+const chosenPOIId = computed(() => store.state.chosenPOIId);
+
+const addBool = computed(() => store.state.new);
+const newNamePOI = computed(() => store.state.newNamePOI);
+const newTemplateIDPOI = computed(() => store.state.newTemplateIDPOI);
+const newCustomerIDPOI = computed(() => store.state.newCustomerIDPOI);
+const newCustomerPOI = computed(() => store.state.newCustomerPOI);
+const newAssetPOI = computed(() => store.state.newAssetPOI);
+const newStatePOI = computed(() => store.state.newStatePOI);
+const newCreationDatePOI = computed(() => store.state.newCreationDatePOI);
+const newCompletionDatePOI = computed(() => store.state.newCompletionDatePOI);
+const newUserPOI = computed(() => store.state.newUserPOI);
+const newTemplateDescriptionPOI = computed(() => store.state.newTemplateDescriptionPOI);
+const newTemplateNotesPOI = computed(() => store.state.newTemplateNotesPOI);
+const newTimeSpentPOI = computed(() => store.state.newTimeSpentPOI);
+const newNotesPOI = computed(() => store.state.newNotes);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const poiTodos = ref([]);
+const productionOrderInstances = ref([]);
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -58,6 +90,81 @@ const getSession = async () => {
     }
 }
 
+// get production order template todos from id
+const getPOITodosById = async () => {
+    if (chosenPOTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            poiTodos.value = response.data;
+            store.commit('updateProductionOrderInstanceTemplateID', chosenPOTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDPOI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${newTemplateIDPOI.value}`
+            );
+            poiTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderInstance/${chosenPOIId.value}`
+            );
+            const poiTodosComment = response.data;
+            // change the comment und step field name to comments and rowID
+            poiTodos.value = poiTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    poiTodos.value = poiTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updatePOITodo(todo, true, doneInput);
+}
+
+//update data
+const updatePOITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePOITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getPOITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
 function getItem(item) {
     if (process.client) {
         return localStorage.getItem(item)
@@ -66,10 +173,100 @@ function getItem(item) {
     }
 }
 
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new production order instance
+const addPOI = async () => {
+    // check if all input data is valid
+    if (newNamePOI.value.trim() === "") {
+        alert("Please add a production order instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(productionOrderInstances.value.length == null)) {
+            // check if production order instance name already exists
+            productionOrderInstances.value.forEach(p => {
+                if (p.name === newNamePOI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerPOI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOI`,
+            {
+                name: newNamePOI.value,
+                templateID: newTemplateIDPOI.value,
+                customerID: newCustomerIDPOI.value,
+                customer: newCustomerPOI.value,
+                asset: newAssetPOI.value,
+                state: newStatePOI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDatePOI.value,
+                user: newUserPOI.value,
+                templateDescription: newTemplateDescriptionPOI.value,
+                templateNotes: newTemplateNotesPOI.value,
+                timeSpent: newTimeSpentPOI.value,
+                notes: newNotesPOI.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        poiTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
 watch(modeChanged, getSession)
+watch(newTemplateIDPOI, getPOITodosById)
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getPOITodosById();
+    triggerBackendCallsWithDelay(getProductionOrderInstances);
 });
 </script>
 
@@ -84,15 +281,13 @@ export default {
 <style scoped>
 .data {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     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);
+    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;
 }
 
 .div-darkmode {
@@ -110,6 +305,20 @@ export default {
     border-collapse: collapse;
 }
 
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;
@@ -119,6 +328,42 @@ export default {
     gap: 0.625rem;
 }
 
+.saveNewPOI-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOI-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewPOI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewPOI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewPOI {
+    text-align: center;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
@@ -164,11 +409,28 @@ th {
     filter: invert(100%);
 }
 
-
 .checkbox-lightmode {
     filter: invert(0%);
 }
 
+.instance-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
 .Step {
     width: 7%;
 }
diff --git a/components/server/InstanceChecklistMVI.vue b/components/server/InstanceChecklistMVI.vue
new file mode 100644
index 0000000..7954105
--- /dev/null
+++ b/components/server/InstanceChecklistMVI.vue
@@ -0,0 +1,504 @@
+<template>
+    <section :class="['instance-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
+        <table class="data-table" id="instance-checklist">
+            <tbody>
+                <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="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        Comments</th>
+                    <th v-if="!addBool" :class="['Done', darkMode ? 'th-darkmode' : 'th-lightmode']">Done</th>
+                </tr>
+                <tr v-for="todo in mviTodos" :key="todo.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                    <td
+                        :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
+                        {{ todo.rowID }}</td>
+                    <td
+                        :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
+                        {{ todo.asset }}</td>
+                    <td
+                        :class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
+                        {{ todo.task }}</td>
+                    <td v-if="!editable"
+                        :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Comments-darkmode' : 'Comments-lightmode']">
+                        {{ todo.comments }}</td>
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.comments" @change="updateMVITodo(todo)"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </td>
+                    <td v-if="!addBool" :class="['Done', darkMode ? 'td-darkmode' : 'td-lightmode']"><input
+                            @change="toggleTodo(todo)" type="checkbox" v-model="todo.done"
+                            :class="[darkMode ? 'checkbox-darkmode' : 'checkbox-lightmode']" /></td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+    <section v-if="addBool" id="saveNewMVI">
+        <button :class="[darkMode ? 'saveNewMVI-darkmode' : 'saveNewMVI-lightmode']" @click="addMVI()">Save</button>
+    </section>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+
+const addBool = computed(() => store.state.new);
+const newNameMVI = computed(() => store.state.newNameMVI);
+const newTemplateIDMVI = computed(() => store.state.newTemplateIDMVI);
+const newMaintenanceTypeMVI = computed(() => store.state.newMaintenanceTypeMVI);
+const newStateMVI = computed(() => store.state.newStateMVI);
+const newCreationDateMVI = computed(() => store.state.newCreationDateMVI);
+const newCompletionDateMVI = computed(() => store.state.newCompletionDateMVI);
+const newUserMVI = computed(() => store.state.newUserMVI);
+const newCustomerIDMVI = computed(() => store.state.newCustomerIDMVI);
+const newCustomerMVI = computed(() => store.state.newCustomerMVI);
+const newTemplateNotesMVI = computed(() => store.state.newTemplateNotesMVI);
+const newTypeMVI = computed(() => store.state.newTypeMVI);
+const newTimeSpentMVI = computed(() => store.state.newTimeSpentMVI);
+const newNotesMVI = computed(() => store.state.newNotes);
+const editable = computed(() => store.state.editable);
+
+const darkMode = ref('');
+const mviTodos = ref([]);
+const maintenanceVisitInstances = ref([]);
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+// get maintenance visit template todos from id
+const getMVITodosById = async () => {
+    if (chosenMVTId.value != -1 && addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mviTodos.value = response.data;
+            store.commit('updateMaintenanceVisitInstanceTemplateID', chosenMVTId.value)
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else if (addBool.value && !(newTemplateIDMVI.value == '')) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${newTemplateIDMVI.value}`
+            );
+            mviTodos.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            const mviTodosComment = response.data;
+            // change the comment und step field name to comments and rowID
+            mviTodos.value = mviTodosComment.map(obj => {
+                const { step: rowID, comment: comments, ...rest } = obj;
+                return { ...rest, rowID, comments };
+            });
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    mviTodos.value = mviTodos.value.map(obj => ({
+        // convert 'done' to boolean
+        ...obj,
+        done: obj.done === "1"
+    }));
+}
+
+const toggleTodo = (todo) => {
+    let doneInput = false;
+    doneInput = todo.done;
+    updateMVITodo(todo, true, doneInput);
+}
+
+//update data
+const updateMVITodo = async (todo, doneChanged = false, doneInput = false) => {
+    if (doneChanged) {
+        todo.done = doneInput;
+    }
+    if (todo.done) {
+        todo.done = 1;
+    }
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMVITodo`,
+            {
+                primaryID: todo.primaryID,
+                step: todo.rowID,
+                asset: todo.asset,
+                task: todo.task,
+                comment: todo.comments,
+                done: todo.done,
+            }
+        );
+        await getMVITodosById();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// add new maintenance visit instance
+const addMVI = async () => {
+    // check if all input data is valid
+    if (newNameMVI.value.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        if (!(maintenanceVisitInstances.value.length == null)) {
+            // check if maintenance visit instance name already exists
+            maintenanceVisitInstances.value.forEach(m => {
+                if (m.name === newNameMVI.value) {
+                    counter += 1;
+                }
+            });
+            if (counter == 1) {
+                alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+                return;
+            }
+        }
+    }
+    if (newCustomerMVI.value.length === 0) {
+        alert("Please choose a customer!");
+        return;
+    }
+    // get the time and date
+    const today = new Date();
+    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
+    const time = today.getHours() + ":" + today.getMinutes();
+    const dateTime = date + ' ' + time;
+    try {
+        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addMVI`,
+            {
+                name: newNameMVI.value,
+                templateID: newTemplateIDMVI.value,
+                maintenanceType: newMaintenanceTypeMVI.value,
+                state: newStateMVI.value,
+                creationDate: dateTime,
+                completionDate: newCompletionDateMVI.value,
+                user: newUserMVI.value,
+                customerID: newCustomerIDMVI.value,
+                customer: newCustomerMVI.value,
+                templateNotes: newTemplateNotesMVI.value,
+                type: newTypeMVI.value,
+                timeSpent: newTimeSpentMVI.value,
+                notes: newNotesMVI.value,
+            });
+        store.commit('resetStore');
+        store.commit('changeToInstancelist');
+        store.commit('seeAllIcon');
+        mviTodos.value.forEach(async todo => {
+            try {
+                const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVI`,
+                    {
+                        templateID: response.data,
+                        step: todo.rowID,
+                        asset: todo.asset,
+                        task: todo.task,
+                        comment: todo.comments,
+                        done: false,
+                    });
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        })
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
+
+watch(modeChanged, getSession)
+watch(newTemplateIDMVI, getMVITodosById)
+
+onMounted(async () => {
+    getSession();
+    await getMVITodosById();
+    triggerBackendCallsWithDelay(getMaintenanceVisitInstances);
+});
+</script>
+
+<script>
+export default {
+    name: "InstanceChecklistMVI",
+};
+</script>
+
+
+
+<style scoped>
+.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;
+}
+
+.div-darkmode {
+    background-color: #2c2c2c;
+}
+
+.div-lightmode {
+    background-color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    padding: 0 0.625rem;
+    table-layout: fixed;
+    border-collapse: collapse;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.input {
+    border: none;
+}
+
+.table-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 3.125rem;
+    padding: 0.625rem;
+    gap: 0.625rem;
+}
+
+.saveNewMVI-darkmode {
+    background: #2c2c2c;
+    color: #fff;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewMVI-lightmode {
+    background: #EBEBEB;
+    color: #212121;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+    border: none;
+    padding: 1rem 1.875rem;
+    width: 8%;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.saveNewMVI-darkmode:hover {
+    background-color: #444444;
+    cursor: pointer;
+}
+
+.saveNewMVI-lightmode:hover {
+    background-color: #ACACAC;
+    cursor: pointer;
+}
+
+#saveNewMVI {
+    text-align: center;
+}
+
+.tr-head-darkmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #000000;
+}
+
+.tr-head-lightmode {
+    border-top: none;
+    border-bottom: 0.0625rem solid #8e8e8e;
+}
+
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
+    height: 1.875rem;
+    text-align: left;
+    padding: 0;
+    letter-spacing: 5%;
+    font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
+    color: #ffffff;
+}
+
+.th-lightmode,
+.td-lightmode {
+    color: #000;
+}
+
+.checkbox-darkmode {
+    filter: invert(100%);
+}
+
+.checkbox-lightmode {
+    filter: invert(0%);
+}
+
+.instance-checklist-information {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.25rem 1.875rem;
+    border-radius: 0.625rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.Step {
+    width: 7%;
+}
+
+.Step-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Step-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Asset {
+    width: 28%;
+}
+
+.Asset-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Asset-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Task {
+    width: 30%;
+}
+
+.Task-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Task-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Comments {
+    width: 30%;
+}
+
+.Comments-darkmode {
+    border-right: 0.0625rem solid #000000;
+}
+
+.Comments-lightmode {
+    border-right: 0.0625rem solid #8e8e8e;
+}
+
+.Done {
+    width: 5%;
+}
+
+.label {
+    width: 6.0625em;
+    height: 1.875em;
+    font-family: 'Overpass';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1em;
+    line-height: 1.875em;
+    letter-spacing: 0.05em;
+}
+
+.label-darkmode {
+    color: #FFFFFF;
+}
+
+.label-lightmode {
+    color: #000;
+}
+</style>
\ No newline at end of file
diff --git a/components/server/Issue.vue b/components/server/Issue.vue
index 4687943..6958b26 100644
--- a/components/server/Issue.vue
+++ b/components/server/Issue.vue
@@ -106,6 +106,23 @@ const newState = ref('');
 const newAmount = ref('');
 const newProperties = ref('');
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 //get all issue
 const getIssues = async () => {
     try {
@@ -211,23 +228,6 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 watch(deleteBool, confirmDeleteIssue);
 watch(modeChanged, getSession)
 
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 onMounted(async () => {
     await getSession();
     await getIssueById();
diff --git a/components/server/IssueTable.vue b/components/server/IssueTable.vue
index 0ec64b5..1cc30e4 100644
--- a/components/server/IssueTable.vue
+++ b/components/server/IssueTable.vue
@@ -67,6 +67,23 @@ const issueSearchFilter = ref('');
 const darkMode = ref('');
 const issues = ref([]);
 
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
 // update search term
 const updateSearchTerm = async () => {
     issueSearchFilter.value = '';
@@ -114,24 +131,6 @@ const searchIssue = async () => {
 
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
-
-const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        darkMode.value = true;
-    } else {
-        darkMode.value = false;
-    }
-}
-
-function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
-}
-
 watch(modeChanged, getSession)
 
 onMounted(async () => {
diff --git a/components/server/MaintenanceVisitsInstance.vue b/components/server/MaintenanceVisitsInstance.vue
index a69a21e..a2ba2bb 100644
--- a/components/server/MaintenanceVisitsInstance.vue
+++ b/components/server/MaintenanceVisitsInstance.vue
@@ -1,29 +1,38 @@
 <template>
-    <section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Instance ID</h2>
+    <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <h2 v-if="!editable" :class="['maintenance-visits-instance-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
+        mvi.name }}</h2>
+        <input v-if="editable" v-model="mvi.name" @change="updateMVI()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="maintenance-visits-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer-type" id="templateID">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.templateID }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
                     </div>
                     <div class="templateId-customer-type" id="type">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.type }}</pre>
+                        <input v-if="editable" v-model="mvi.type" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
         </div>
         <div class="maintenance-visits-instance-data">
-            <div class="additional">
+            <div class="additionaFl">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">...</pre>
+                    <pre v-if="!editable" :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateNotes">{{ mvi.templateNotes }}</pre>
+                    <input v-if="editable" v-model="mvi.templateNotes" @change="updateMVI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                 </div>
             </div>
         </div>
@@ -32,15 +41,126 @@
                 <div class="data-field" id="info">
                     <div class="maintenanceType-state-user" id="maintenanceType">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.maintenanceType }}</pre>
+                        <input v-if="editable" v-model="mvi.maintenanceType" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.state }}</pre>
+                        <input v-if="editable" v-model="mvi.state" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="maintenanceType-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.user }}</pre>
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="mvi.user" @change="updateMVI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+                <div class="data-field" id="info">
+                    <div class="creationDate-completionDate-timeSpent" id="creationDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
+                        <pre
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.creationDate }}</pre>
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="completionDate">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.completionDate }}</pre>
+                        <input v-if="editable" v-model="mvi.completionDate" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="creationDate-completionDate-timeSpent" id="timeSpent">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
+                        <pre v-if="!editable"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.timeSpent }}</pre>
+                        <input v-if="editable" v-model="mvi.timeSpent" @change="updateMVI()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additional">
+                <div class="notes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
+                    <input v-model="mvi.notes" :readonly="!editable" @change="updateMVI()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
+                </div>
+            </div>
+        </div>
+    </section>
+    <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <input v-model="newName" @change="updateMaintenanceVisitInstance()"
+            :class="['data', 'mvi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="templateId-customer-type" id="templateID">
+                        <pre v-if="mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!mvtSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="mvtSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenMVTId }}</pre>
+                        <select v-if="!mvtSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateMaintenanceVisitInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in maintenanceVisitTemplates" :key="template.checklistID">
+                                {{ template.name }}
+                            </option>
+                        </select>
+                    </div>
+                    <div class="templateId-customer-type" id="customer">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvi.customer }}</pre>
+                    </div>
+                    <div class="templateId-customer-type" id="type">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
+                        <input v-model="newType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="additionaFl">
+                <div class="templateNotes">
+                    <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
+                    <input v-model="newTemplateNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                </div>
+            </div>
+        </div>
+        <div class="maintenance-visits-instance-data">
+            <div class="instanceInfo">
+                <div class="data-field" id="info">
+                    <div class="maintenanceType-state-user" id="maintenanceType">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Maintenance type:</pre>
+                        <input v-model="newMaintenanceType" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="state">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
+                        <input v-model="newState" @change="updateMaintenanceVisitInstance()"
+                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                    </div>
+                    <div class="maintenanceType-state-user" id="user">
+                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateMaintenanceVisitInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -63,7 +183,8 @@
             <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">...</pre>
+                    <input v-model="newNotes" @change="updateMaintenanceVisitInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
@@ -75,11 +196,257 @@
 import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
 const modeChanged = computed(() => store.state.updateDarkMode);
 
+const editable = computed(() => store.state.editable);
+const chosenMVIId = computed(() => store.state.chosenMITId);
+const chosenMVTId = computed(() => store.state.chosenMVTId);
+const deleteBool = computed(() => store.state.deleteBool);
+const addBool = computed(() => store.state.new);
+
 const darkMode = ref('');
+const mvtSelected = ref('');
+
+const mvi = ref({});
+const mvt = ref({});
+const customers = ref([]);
+
+const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
+const newCustomerID = ref('');
+const newCustomer = ref('');
+const newMaintenanceType = ref('');
+const newUser = ref('');
+const newState = ref('');
+const newNotes = ref('');
+const newTemplateNotes = ref('');
+const newType = ref('');
+const newCreationDate = ref('');
+const newCompletionDate = ref('');
+const newTimeSpent = ref('');
+const maintenanceVisitInstances = ref([]);
+const maintenanceVisitTemplates = ref([]);
+const userList = ref([]);
+
+//get all customers
+const getCustomers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
+        );
+        customers.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all maintenance visit templates
+const getMaintenanceVisitTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
+        maintenanceVisitTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// get maintenance visit template from id
+const getMVTById = async () => {
+    if (chosenMVTId.value == '-1') {
+        mvtSelected.value = false;
+        await getMaintenanceVisitTemplates();
+    } else {
+        mvtSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.value = response.data;
+            mvi.value.customer = mvt.value.customer;
+            mvi.value.customerID = mvt.value.customerID;
+            newCustomer.value = mvt.value.customer;
+            newCustomerID.value = mvt.value.customerID;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getMaintenanceVisitInstances();
+}
+
+// get maintenance visit template from id
+const getChosenMVTById = async (newMvtId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${newMvtId}`
+        );
+        mvt.value = response.data;
+        mvi.value.customer = mvt.value.customer;
+        mvi.value.customerID = mvt.value.customerID;
+        newCustomer.value = mvt.value.customer;
+        newCustomerID.value = mvt.value.customerID;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const confirmDeleteMVI = async () => {
+    if (deleteBool.value === true) {
+        if (confirm("Do you really want to delete this maintenance visit instance? It cannot be undone!")) {
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitInstance/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            try {
+                await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosMVI/${chosenMVIId.value}`);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+            store.commit('undoDelete');
+            store.commit('resetStore');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
+        } else {
+            store.commit('undoDelete');
+        }
+    }
+}
+
+//get all users
+const getUsers = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//update data
+const updateMVI = async () => {
+    if (mvi.value.name.trim() === "") {
+        alert("Please add a maintenance visit instance name!");
+        return;
+    } else {
+        var counter = 0;
+        // check if maintenance visit instance name already exists
+        maintenanceVisitInstances.value.forEach(m => {
+            if (m.name === mvi.value.name) {
+                counter += 1;
+            }
+        });
+        if (counter == 2) {
+            alert("This maintenance visit instance name already exists. Please choose an unique maintenance visit instance name or modify respectively delete the old one!");
+            mvi.value.name = '';
+            return;
+        }
+        try {
+            await Axios.put(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMaintenanceVisitInstance`,
+                {
+                    primaryID: mvi.value.primaryID,
+                    name: mvi.value.name,
+                    templateID: mvi.value.templateID,
+                    maintenanceType: mvi.value.maintenanceType,
+                    state: mvi.value.state,
+                    creationDate: mvi.value.creationDate,
+                    completionDate: mvi.value.completionDate,
+                    user: mvi.value.user,
+                    customerID: mvi.value.customerID,
+                    customer: mvi.value.customer,
+                    type: mvi.value.type,
+                    templateNotes: mvi.value.templateNotes,
+                    timeSpent: mvi.value.timeSpent,
+                    notes: mvi.value.notes,
+                }
+            )
+            await getMVIById();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all maintenance visit instances
+const getMaintenanceVisitInstances = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+        maintenanceVisitInstances.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update maintenance visit instance fields in the store
+const updateMaintenanceVisitInstance = async (newMvtId = -1) => {
+    let maintenanceVisitInstance = {};
+    if (mvtSelected.value) {
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: chosenMVTId.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newMvtId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = maintenanceVisitTemplates.value.find(obj => obj.name === newMvtId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.checklistID : null;
+            await getChosenMVTById(newTemplateID.value);
+        }
+        maintenanceVisitInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            maintenanceType: newMaintenanceType.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            templateNotes: newTemplateNotes.value,
+            type: newType.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateMaintenanceVisitInstanceComponent', maintenanceVisitInstance);
+}
+
+// get maintenance visit instance from id
+const getMVIById = async () => {
+    if (!addBool.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitInstance/${chosenMVIId.value}`
+            );
+            mvi.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+// include delay to avoid 503 error
+const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
+    setTimeout(() => {
+        fetchDataFunc();
+    }, 1500);
+}
 
 const getSession = async () => {
     const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
@@ -99,9 +466,13 @@ function getItem(item) {
 }
 
 watch(modeChanged, getSession)
+watch(deleteBool, confirmDeleteMVI);
 
 onMounted(async () => {
-    await getSession();
+    getSession();
+    await getMVIById();
+    await getMVTById();
+    triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
 
@@ -143,6 +514,22 @@ export default {
         sans-serif;
 }
 
+.select-lightmode {
+    border: none;
+    color: black;
+    background: #EBEBEB;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
+.select-darkmode {
+    border: none;
+    color: white;
+    background: #212121;
+    padding: 0.4rem;
+    border-radius: 0.3125rem;
+}
+
 .h2-darkmode {
     color: #fff;
 }
@@ -199,6 +586,36 @@ export default {
     font: 400 0.75rem/250% Overpass, sans-serif;
 }
 
+.h2-darkmode {
+    color: #fff;
+}
+
+.h2-lightmode {
+    color: #000;
+}
+
+.h2-input-darkmode {
+    background-color: #212121;
+}
+
+.h2-input-lightmode {
+    background-color: #EBEBEB;
+}
+
+.input {
+    border: none;
+}
+
+.mvi-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;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
diff --git a/components/server/MaintenanceVisitsInstanceTable.vue b/components/server/MaintenanceVisitsInstanceTable.vue
index 95fd64d..6afb68e 100644
--- a/components/server/MaintenanceVisitsInstanceTable.vue
+++ b/components/server/MaintenanceVisitsInstanceTable.vue
@@ -73,6 +73,7 @@ const modeChanged = computed(() => store.state.updateDarkMode);
 const chosenMVTId = computed(() => store.state.chosenMVTId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 const userSearchFilter = ref('');
 const stateSearchFilter = ref('');
 const maintenanceVisitInstances = ref([]);
@@ -89,11 +90,20 @@ const goToChosenMVI = (id) => {
 
 //get all maintenance visit instances
 const getMaintenanceVisitInstances = async () => {
-    try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByMVT/${mvt.value.checklistID}`);
-        maintenanceVisitInstances.value = response.data;
-    } catch (err) {
-        console.log(err.response.statusText);
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVIByMVT/${mvt.value.checklistID}`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitInstances`);
+            maintenanceVisitInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
     }
 }
 
@@ -111,15 +121,17 @@ const updateFilterTerm = async () => {
 
 // get maintenance visit template from id
 const getMVTById = async () => {
-  try {
-    const response = await Axios.get(
-      `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
-    );
-    mvt.value = response.data;
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
+            );
+            mvt.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
     await getMaintenanceVisitInstances();
-  } catch (err) {
-    console.log(err.response.statusText);
-  }
 }
 
 //get all instances based on the searched state
@@ -178,6 +190,7 @@ function getItem(item) {
 watch(modeChanged, getSession)
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getMaintenanceVisitInstances);
 
 onMounted(async () => {
     getSession();
diff --git a/components/server/ProductionOrdersInstance.vue b/components/server/ProductionOrdersInstance.vue
index 5eb2317..dc6a156 100644
--- a/components/server/ProductionOrdersInstance.vue
+++ b/components/server/ProductionOrdersInstance.vue
@@ -13,14 +13,7 @@
                     </div>
                     <div class="templateId-customer" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <pre v-if="!editable"
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
-                        <select v-if="editable" id="customersDropDownChosenCI" v-model="poi.customer"
-                            @change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
-                            <option v-for="cust in customers" :key="cust.primaryID">
-                                {{ cust.customername }}
-                            </option>
-                        </select>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
                     </div>
                 </div>
             </div>
@@ -72,8 +65,12 @@
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
                         <pre v-if="!editable"
                             :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ poi.user }}</pre>
-                        <input v-if="editable" v-model="poi.user" @change="updatePOI()"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        <select v-if="editable" id="assetsDropDownChosenCI" v-model="poi.user" @change="updatePOI()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
@@ -110,23 +107,29 @@
         </div>
     </section>
     <section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <input v-model="newName"
+        <input v-model="newName" @change="updateProductionOrderInstance()"
             :class="['data', 'poi-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="production-orders-instance-data">
             <div class="instanceInfo">
                 <div class="data-field" id="info">
                     <div class="templateId-customer" id="templateID">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
-                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenPOTId }}</pre>
+                        <pre v-if="potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template ID:</pre>
+                        <pre v-if="!potSelected"
+                            :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name:</pre>
+                        <pre v-if="potSelected"
+                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ chosenPOTId }}</pre>
+                        <select v-if="!potSelected" id="assetsDropDownChosenCI" v-model="chosenTemplate"
+                            @change="updateProductionOrderInstance(chosenTemplate)"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="template in productionOrderTemplates" :key="template.templateID">
+                                {{ template.name }}
+                            </option>
+                        </select>
                     </div>
                     <div class="templateId-customer" id="customer">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
-                        <select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
-                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
-                            <option v-for="cust in customers" :key="cust.primaryID">
-                                {{ cust.customername }}
-                            </option>
-                        </select>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ poi.customer }}</pre>
                     </div>
                 </div>
             </div>
@@ -135,7 +138,7 @@
             <div class="additional">
                 <div class="templateDescription">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
-                    <input v-model="newTemplateDescription"
+                    <input v-model="newTemplateDescription" @change="updateProductionOrderInstance()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
                         id="templateDescription">
                 </div>
@@ -143,7 +146,7 @@
             <div class="additional">
                 <div class="templateNotes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template notes:</h3>
-                    <input v-model="newTemplateNotes"
+                    <input v-model="newTemplateNotes" @change="updateProductionOrderInstance()"
                         :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateNotes">
                 </div>
             </div>
@@ -157,7 +160,7 @@
                     </div>
                     <div class="ticketNo-asset-state-user" id="asset">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
-                        <select id="assetsDropDownChosenCI" v-model="newAsset"
+                        <select id="assetsDropDownChosenCI" v-model="newAsset" @change="updateProductionOrderInstance()"
                             :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
                             <option v-for="asset in assets" :key="asset.primaryID">
                                 {{ asset.assetName }}
@@ -166,25 +169,27 @@
                     </div>
                     <div class="ticketNo-asset-state-user" id="state">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
-                        <input v-model="newState"
+                        <input v-model="newState" @change="updateProductionOrderInstance()"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="ticketNo-asset-state-user" id="user">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
-                        <input v-model="newUser"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        <select id="assetsDropDownChosenCI" v-model="newUser" @change="updateProductionOrderInstance()"
+                            :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
+                            <option v-for="user in userList" :key="user.id">
+                                {{ user.username }}
+                            </option>
+                        </select>
                     </div>
                 </div>
                 <div class="data-field" id="info">
                     <div class="creationDate-completionDate-timeSpent" id="creationDate">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Creation date:</pre>
-                        <pre
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="creationDate-completionDate-timeSpent" id="completionDate">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Completion date:</pre>
-                        <pre
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
                     </div>
                     <div class="creationDate-completionDate-timeSpent" id="timeSpent">
                         <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Time spent:</pre>
@@ -197,15 +202,12 @@
             <div class="additional">
                 <div class="notes">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
-                    <input v-model="newNotes" :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"
-                        id="notes">
+                    <input v-model="newNotes" @change="updateProductionOrderInstance()"
+                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
                 </div>
             </div>
         </div>
     </section>
-    <section v-if="addBool" id="saveNewPOI">
-        <button :class="[darkMode ? 'saveNewPOI-darkmode' : 'saveNewPOI-lightmode']" @click="addPOI()">Save</button>
-    </section>
 </template>
 
 
@@ -226,14 +228,16 @@ const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
 const darkMode = ref('');
+const potSelected = ref('');
 
 const poi = ref({});
+const pot = ref({});
 const customers = ref([]);
-const customer = ref({});
-const productionOrderInstances = ref([]);
 const assets = ref([]);
 
 const newName = ref('');
+const newTemplateID = ref('');
+const chosenTemplate = ref('');
 const newCustomerID = ref('');
 const newCustomer = ref('');
 const newUser = ref('');
@@ -242,8 +246,12 @@ const newNotes = ref('');
 const newTemplateDescription = ref('');
 const newTemplateNotes = ref('');
 const newAsset = ref('');
+const newCreationDate = ref('');
 const newCompletionDate = ref('');
 const newTimeSpent = ref('');
+const productionOrderInstances = ref([]);
+const productionOrderTemplates = ref([]);
+const userList = ref([]);
 
 //get all customers
 const getCustomers = async () => {
@@ -256,6 +264,57 @@ const getCustomers = async () => {
     }
 }
 
+//get all productionOrder templates
+const getProductionOrderTemplates = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
+        productionOrderTemplates.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// get production order template from id
+const getPOTById = async () => {
+    if (chosenPOTId.value == '-1') {
+        potSelected.value = false;
+        await getProductionOrderTemplates();
+    } else {
+        potSelected.value = true;
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+            poi.value.customer = pot.value.customer;
+            poi.value.customerID = pot.value.customerID;
+            newCustomer.value = pot.value.customer;
+            newCustomerID.value = pot.value.customerID;
+            await getConfigItemsFromCustomer();
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getProductionOrderInstances();
+}
+
+// get production order template from id
+const getChosenPOTById = async (newPotId) => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${newPotId}`
+        );
+        pot.value = response.data;
+        poi.value.customer = pot.value.customer;
+        poi.value.customerID = pot.value.customerID;
+        newCustomer.value = pot.value.customer;
+        newCustomerID.value = pot.value.customerID;
+        await getConfigItemsFromCustomer();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
 const confirmDeletePOI = async () => {
     if (deleteBool.value === true) {
         if (confirm("Do you really want to delete this production order instance? It cannot be undone!")) {
@@ -271,18 +330,19 @@ const confirmDeletePOI = async () => {
             }
             store.commit('undoDelete');
             store.commit('resetStore');
-            store.commit('changeToTemplatelist');
+            store.commit('changeToInstancelist');
+            store.commit('seeAllIcon');
         } else {
             store.commit('undoDelete');
         }
     }
 }
 
-//get all productionOrder instances
-const getProductionOrderInstances = async () => {
+//get all users
+const getUsers = async () => {
     try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
-        productionOrderInstances.value = response.data;
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
+        userList.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
@@ -333,98 +393,60 @@ const updatePOI = async () => {
     }
 }
 
-// add new production order instance
-const addPOI = async () => {
-    // check if all input data is valid
-    if (newName.value.trim() === "") {
-        alert("Please add a production order instance name!");
-        return;
-    } else {
-        var counter = 0;
-        if (!(productionOrderInstances.value.length == null)) {
-            // check if production order instance name already exists
-            productionOrderInstances.value.forEach(p => {
-                if (p.name === newName.value) {
-                    counter += 1;
-                }
-            });
-            if (counter == 1) {
-                alert("This production order instance name already exists. Please choose an unique production order instance name or modify respectively delete the old one!");
-                return;
-            }
-        }
-    }
-    if (newCustomer.value.length === 0) {
-        alert("Please choose a customer!");
-        return;
-    }
-    // get the time and date
-    const today = new Date();
-    const date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
-    const time = today.getHours() + ":" + today.getMinutes();
-    const dateTime = date + ' ' + time;
-    // add todos
-    // let allFine = true;
-    // newTodos.forEach(todo => {
-    //     if (todo.asset.length === 0) {
-    //         alert(`Please choose a config item for all todos.`);
-    //         allFine = false
-    //     }
-    // })
-    // if (!allFine) {
-    //     return
-    // }
+//get all productionOrder instances
+const getProductionOrderInstances = async () => {
     try {
-        const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOI`,
-            {
-                name: newName.value,
-                templateID: chosenPOTId.value,
-                customerID: newCustomerID.value,
-                customer: newCustomer.value,
-                asset: newAsset.value,
-                state: newState.value,
-                creationDate: dateTime,
-                completionDate: newCompletionDate.value,
-                user: newUser.value,
-                templateDescription: newTemplateDescription.value,
-                templateNotes: newTemplateNotes.value,
-                timeSpent: newTimeSpent.value,
-                notes: newNotes.value,
-            });
-        store.commit('resetStore');
-        store.commit('changeToTemplatelist');
-        // newTodos.forEach(async todo => {
-        //     try {
-        //         const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
-        //             {
-        //                 templateID: response.data,
-        //                 rowID: todo.rowID,
-        //                 asset: todo.asset,
-        //                 task: todo.task,
-        //                 comment: todo.comments,
-        //             });
-        //     } catch (err) {
-        //         console.log(err.response.statusText);
-        //     }
-        // })
-    } catch (err) {
-        // console.log(err.response.statusText);
-        console.log(err);
-    }
-}
-
-// update customerid if customer was changed
-const updateCustomerID = async () => {
-    try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${poi.value.customer}`);
-        customer.value = response.data;
-        poi.value.customerID = customer.value.customerID;
-        store.commit('toggleCustomerChanged');
-        store.commit('toggleCustomerId', poi.value.customerID);
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+        productionOrderInstances.value = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
-    await updatePOI();
+}
+
+// update production order instance fields in the store
+const updateProductionOrderInstance = async (newPotId = -1) => {
+    let productionOrderInstance = {};
+    if (potSelected.value) {
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: chosenPOTId.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    } else {
+        if (!(newPotId == '-1')) {
+            // Find the object with the selected Name
+            const selectedObject = productionOrderTemplates.value.find(obj => obj.name === newPotId);
+            // Get the templateID
+            newTemplateID.value = selectedObject ? selectedObject.templateID : null;
+            await getChosenPOTById(newTemplateID.value);
+        }
+        productionOrderInstance = {
+            name: newName.value,
+            templateID: newTemplateID.value,
+            customerID: newCustomerID.value,
+            customer: newCustomer.value,
+            asset: newAsset.value,
+            state: newState.value,
+            creationDate: newCreationDate.value,
+            completionDate: newCompletionDate.value,
+            user: newUser.value,
+            templateDescription: newTemplateDescription.value,
+            templateNotes: newTemplateNotes.value,
+            timeSpent: newTimeSpent.value,
+            notes: newNotes.value,
+        };
+    }
+    store.commit('updateProductionOrderInstanceComponent', productionOrderInstance);
 }
 
 // get production order instance from id
@@ -439,18 +461,6 @@ const getPOIById = async () => {
             console.log(err.response.statusText);
         }
     }
-    await getConfigItemsFromCustomer();
-}
-
-// update customerid if customer was changed
-const updateNewCustomerID = async () => {
-    try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
-        newCustomerID.value = response.data.customerID;
-    } catch (err) {
-        console.log(err.response.statusText);
-    }
-    await getConfigItemsFromCustomer();
 }
 
 // include delay to avoid 503 error
@@ -478,14 +488,12 @@ const getConfigItemsFromCustomer = async () => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } else {
-        if (newCustomerID.value.length != 0) {
-            try {
-                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${newCustomerID.value}`);
-                assets.value = response.data;
-            } catch (err) {
-                console.log(err.response.statusText);
-            }
+    } else if (!(newCustomerID.value == '')) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromCustomer/${newCustomerID.value}`);
+            assets.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
         }
     }
 }
@@ -500,12 +508,14 @@ function getItem(item) {
 
 watch(modeChanged, getSession);
 watch(deleteBool, confirmDeletePOI);
+watch(editable, getConfigItemsFromCustomer);
 
 onMounted(async () => {
     getSession();
     await getPOIById();
-    await getProductionOrderInstances();
+    await getPOTById();
     triggerBackendCallsWithDelay(getCustomers);
+    triggerBackendCallsWithDelay(getUsers);
 });
 </script>
 
@@ -564,42 +574,6 @@ export default {
         sans-serif;
 }
 
-.saveNewPOI-darkmode {
-    background: #2c2c2c;
-    color: #fff;
-    font: 400 0.875rem/1.875rem Overpass, sans-serif;
-    border: none;
-    padding: 1rem 1.875rem;
-    width: 8%;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-}
-
-.saveNewPOI-lightmode {
-    background: #EBEBEB;
-    color: #212121;
-    font: 400 0.875rem/1.875rem Overpass, sans-serif;
-    border: none;
-    padding: 1rem 1.875rem;
-    width: 8%;
-    border-radius: 0.625rem;
-    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-}
-
-.saveNewPOI-darkmode:hover {
-    background-color: #444444;
-    cursor: pointer;
-}
-
-.saveNewPOI-lightmode:hover {
-    background-color: #ACACAC;
-    cursor: pointer;
-}
-
-#saveNewPOI {
-    text-align: center;
-}
-
 .h2-darkmode {
     color: #fff;
 }
diff --git a/components/server/ProductionOrdersInstanceTable.vue b/components/server/ProductionOrdersInstanceTable.vue
index f4e7558..722ece7 100644
--- a/components/server/ProductionOrdersInstanceTable.vue
+++ b/components/server/ProductionOrdersInstanceTable.vue
@@ -43,7 +43,12 @@
                     </td>
                     <td
                         :class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
-                        {{ instance.asset }}</td>
+                        <nuxt-link to="/assets" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
+                            @click="goToChosenAsset(instance.asset)">
+                            {{ instance.asset }}
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
                         {{ instance.state }}</td>
@@ -74,6 +79,7 @@ const modeChanged = computed(() => store.state.updateDarkMode);
 const chosenPOTId = computed(() => store.state.chosenPOTId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 const userSearchFilter = ref('');
 const stateSearchFilter = ref('');
 const productionOrderInstances = ref([]);
@@ -90,11 +96,20 @@ const goToChosenPOI = (id) => {
 
 //get all production order instances
 const getProductionOrderInstances = async () => {
-    try {
-        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByPOT/${pot.value.templateID}`);
-        productionOrderInstances.value = response.data;
-    } catch (err) {
-        console.log(err.response.statusText);
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOIsByPOT/${pot.value.templateID}`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderInstances`);
+            productionOrderInstances.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
     }
 }
 
@@ -112,16 +127,34 @@ const updateFilterTerm = async () => {
 
 // get production order template from id
 const getPOTById = async () => {
+    if (notAllInstancesIcon.value) {
+        try {
+            const response = await Axios.get(
+                `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            );
+            pot.value = response.data;
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+    await getProductionOrderInstances();
+}
+
+const goToChosenAsset = async (name) => {
+    let ci = {}
     try {
         const response = await Axios.get(
-            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedConfigItemsByAsset/${name}`
         );
-        pot.value = response.data;
-        await getProductionOrderInstances();
+        ci = response.data;
     } catch (err) {
         console.log(err.response.statusText);
     }
-}
+    store.commit('setChosenAsset', ci[0].primaryID);
+    setTimeout(() => {
+    }, 1000);
+    store.commit('changeToAsset');
+};
 
 //get all instances based on the searched state
 const filterPOIByState = async () => {
@@ -179,6 +212,7 @@ function getItem(item) {
 watch(modeChanged, getSession)
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
+watch(notAllInstancesIcon, getProductionOrderInstances);
 
 onMounted(async () => {
     getSession();
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index 9183f2d..74e6c19 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -120,6 +120,17 @@
           </Transition>
         </button>
       </router-link>
+      <button v-if="notAllInstancesIcon && !addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+        id="allInstances" @click="changeToAllInstances">
+        <div class="icon" id="instances-icon">
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded"
+            :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">See all</pre>
+        </Transition>
+      </button>
       <button v-if="editIcon && !loggedInUserReaderBool"
         :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
@@ -177,6 +188,7 @@ const archiveIcon = computed(() => store.state.archiveIcon);
 const editIcon = computed(() => store.state.editIcon);
 const editUserIcon = computed(() => store.state.editUserIcon);
 const deleteIcon = computed(() => store.state.deleteIcon);
+const notAllInstancesIcon = computed(() => store.state.notAllInstancesIcon);
 
 const loggedInUserDarkModeBoolean = ref('');
 const isExpanded = ref(true);
@@ -224,6 +236,10 @@ const changeToInstancelist = () => {
   store.commit('changeToInstancelist');
 }
 
+const changeToAllInstances = () => {
+  store.commit('changeToInstancelist');
+  store.commit('seeAllIcon');
+}
 
 // const changeToSettingsPage = () => {
 //   store.commit('changeToSettings');
diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 401e317..fa2a306 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -2,11 +2,11 @@
   <aside
     :class="['navbar', loggedInUserDarkModeBoolean ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
-      <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
+      <!-- <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
         id="back-icon">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
           src="/icons/Back-Icon.svg" />
-      </div>
+      </div> -->
       <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
         id="indicator-icon" @click="ToggleSidebar">
         <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index cece5f1..6e5cb50 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -51,7 +51,7 @@ import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.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";
+import InstanceChecklist from "../components/server/InstanceChecklistMVI.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
diff --git a/plugins/vuex.js b/plugins/vuex.js
index c7c1acb..6a3ce0d 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -26,6 +26,7 @@ const store = createStore({
             editIcon: false,
             editUserIcon: false,
             deleteIcon: false,
+            notAllInstancesIcon: false,
 
             onAssetlist: true,
             onAsset: false,
@@ -169,6 +170,34 @@ const store = createStore({
 
             changeToSet: false,
             updateDarkMode: false,
+
+            newNamePOI: '',
+            newTemplateIDPOI: '',
+            newCustomerIDPOI: '',
+            newCustomerPOI: '',
+            newAssetPOI: '',
+            newStatePOI: '',
+            newCreationDatePOI: '',
+            newCompletionDatePOI: '',
+            newUserPOI: '',
+            newTemplateDescriptionPOI: '',
+            newTemplateNotesPOI: '',
+            newTimeSpentPOI: '',
+            newNotesPOI: '',
+
+            newNameMVI: '',
+            newTemplateIDMVI: '',
+            newMaintenanceTypeMVI: '',
+            newStateMVI: '',
+            newCreationDateMVI: '',
+            newCompletionDateMVI: '',
+            newUserMVI: '',
+            newCustomerIDMVI: '',
+            newCustomerMVI: '',
+            newTemplateNotesMVI: '',
+            newTypeMVI: '',
+            newTimeSpentMVI: '',
+            newNotesMVI: '',
         };
     },
     mutations: {
@@ -234,6 +263,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
@@ -253,6 +283,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToAsset(state) {
             state.onAssetlist = false
@@ -272,6 +303,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
@@ -291,6 +323,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the production order and maintenance visit pages
@@ -313,6 +346,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
@@ -333,6 +367,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
@@ -353,6 +388,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
@@ -373,6 +409,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = true
         },
         changeToInstance(state) {
             state.onTemplatelist = false
@@ -393,6 +430,12 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = true
+        },
+        seeAllIcon(state) {
+            state.notAllInstancesIcon = false
+            state.chosenPOTId = -1
+            state.chosenMVTId = -1
         },
         addNewAsset(state) {
             state.newAsset = true
@@ -423,6 +466,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
@@ -441,6 +485,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToSolution(state) {
             state.onSolutionlist = false
@@ -459,6 +504,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue slip pages
@@ -479,6 +525,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
@@ -497,6 +544,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
@@ -515,6 +563,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the issue pages
@@ -536,6 +585,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToIssueItem(state) {
             state.onIssueItemList = false
@@ -555,6 +605,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
         changeToIssueItemVariant(state) {
             state.onIssueItemList = false
@@ -574,6 +625,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         // functions to change the user pages
@@ -594,6 +646,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = false
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
         changeToEmployee(state) {
             state.onEmployeelist = false
@@ -612,6 +665,7 @@ const store = createStore({
             state.editIcon = true
             state.editUserIcon = false
             state.deleteIcon = true
+            state.notAllInstancesIcon = false
         },
 
         changeToSettings(state) {
@@ -628,6 +682,7 @@ const store = createStore({
             state.editIcon = false
             state.editUserIcon = true
             state.deleteIcon = false
+            state.notAllInstancesIcon = false
         },
 
         // functions to update the asset
@@ -750,6 +805,47 @@ const store = createStore({
             state.newPostcodeEmp = employee.postcode
         },
 
+        // function to update production order instance component
+        updateProductionOrderInstanceComponent(state, productionOrderInstance) {
+            state.newNamePOI = productionOrderInstance.name
+            state.newTemplateIDPOI = productionOrderInstance.templateID
+            state.newCustomerIDPOI = productionOrderInstance.customerID
+            state.newCustomerPOI = productionOrderInstance.customer
+            state.newAssetPOI = productionOrderInstance.asset
+            state.newStatePOI = productionOrderInstance.state
+            state.newCreationDatePOI = productionOrderInstance.creationDate
+            state.newCompletionDatePOI = productionOrderInstance.completionDate
+            state.newUserPOI = productionOrderInstance.user
+            state.newTemplateDescriptionPOI = productionOrderInstance.templateDescription
+            state.newTemplateNotesPOI = productionOrderInstance.templateNotes
+            state.newTimeSpentPOI = productionOrderInstance.timeSpent
+            state.newNotesPOI = productionOrderInstance.notes
+        },
+        updateProductionOrderInstanceTemplateID(state, id) {
+            state.newTemplateIDPOI = id
+        },
+
+        // function to update maintenance visit instance component
+        updateMaintenanceVisitInstanceComponent(state, maintenanceVisitInstance) {
+            state.newNameMVI = maintenanceVisitInstance.name
+            state.newTemplateIDMVI = maintenanceVisitInstance.templateID
+            state.newMaintenanceTypeMVI = maintenanceVisitInstance.maintenanceType
+            state.newStateMVI = maintenanceVisitInstance.state
+            state.newCreationDateMVI = maintenanceVisitInstance.creationDate
+            state.newCompletionDateMVI = maintenanceVisitInstance.completionDate
+            state.newUserMVI = maintenanceVisitInstance.user
+            state.newCustomerIDMVI = maintenanceVisitInstance.customerID
+            state.newCustomerMVI = maintenanceVisitInstance.customer
+            state.newTemplateNotesMVI = maintenanceVisitInstance.templateNotes
+            state.newTypeMVI = maintenanceVisitInstance.type
+            state.newTimeSpentMVI = maintenanceVisitInstance.timeSpent
+            state.newNotesMVI = maintenanceVisitInstance.notes
+        },
+        updateMaintenanceVisitInstanceTemplateID(state, id) {
+            state.newTemplateIDMVI = id
+        },
+
+
         setLocalStorageChanged(state) {
             state.localStorageChanged = !state.localStorageChanged
         },
@@ -987,6 +1083,36 @@ const store = createStore({
             state.newAddressEmp = ''
             state.newCityEmp = ''
             state.newPostcodeEmp = ''
+
+            // reset the poi page variables
+            state.newNamePOI = ''
+            state.newTemplateIDPOI = ''
+            state.newCustomerIDPOI = ''
+            state.newCustomerPOI = ''
+            state.newAssetPOI = ''
+            state.newStatePOI = ''
+            state.newCreationDatePOI = ''
+            state.newCompletionDatePOI = ''
+            state.newUserPOI = ''
+            state.newTemplateDescriptionPOI = ''
+            state.newTemplateNotesPOI = ''
+            state.newTimeSpentPOI = ''
+            state.newNotesPOI = ''
+
+            // reset the mvi page variables
+            state.newNameMVI = ''
+            state.newTemplateIDMVI = ''
+            state.newMaintenanceTypeMVI = ''
+            state.newStateMVI = ''
+            state.newCreationDateMVI = '' 
+            state.newCompletionDateMVI = ''
+            state.newUserMVI = ''
+            state.newCustomerIDMVI = '' 
+            state.newCustomerMVI = ''
+            state.newTemplateNotesMVI = ''
+            state.newTypeMVI = ''
+            state.newTimeSpentMVI = ''
+            state.newNotesMVI = ''
         },
 
         // function to logout 
diff --git a/server/api/addMVI.ts b/server/api/addMVI.ts
new file mode 100644
index 0000000..5a11d12
--- /dev/null
+++ b/server/api/addMVI.ts
@@ -0,0 +1,23 @@
+import { insertId, errorMsg } from "../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return insertId
+})
diff --git a/server/api/addTodoMVI.ts b/server/api/addTodoMVI.ts
new file mode 100644
index 0000000..e343db7
--- /dev/null
+++ b/server/api/addTodoMVI.ts
@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})
\ No newline at end of file
diff --git a/server/api/addTodoPOI.ts b/server/api/addTodoPOI.ts
new file mode 100644
index 0000000..7033ffe
--- /dev/null
+++ b/server/api/addTodoPOI.ts
@@ -0,0 +1,22 @@
+import { errorMsg } from "../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+})
\ No newline at end of file
diff --git a/server/api/deleteMaintenanceVisitInstance/[id].ts b/server/api/deleteMaintenanceVisitInstance/[id].ts
new file mode 100644
index 0000000..5ee2aa2
--- /dev/null
+++ b/server/api/deleteMaintenanceVisitInstance/[id].ts
@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})
diff --git a/server/api/deleteTodosMVI/[id].ts b/server/api/deleteTodosMVI/[id].ts
new file mode 100644
index 0000000..3959cea
--- /dev/null
+++ b/server/api/deleteTodosMVI/[id].ts
@@ -0,0 +1,23 @@
+import { errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return
+})
\ No newline at end of file
diff --git a/server/api/getMaintenanceVisitInstance/[id].ts b/server/api/getMaintenanceVisitInstance/[id].ts
new file mode 100644
index 0000000..30f665e
--- /dev/null
+++ b/server/api/getMaintenanceVisitInstance/[id].ts
@@ -0,0 +1,23 @@
+import { mvi, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mvi
+})
diff --git a/server/api/getTodosMaintenanceVisitInstance/[id].ts b/server/api/getTodosMaintenanceVisitInstance/[id].ts
new file mode 100644
index 0000000..de29421
--- /dev/null
+++ b/server/api/getTodosMaintenanceVisitInstance/[id].ts
@@ -0,0 +1,23 @@
+import { mviTodosByTemplateId, errorMsg } from "../../middleware/maintenanceVisitInstances";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return mviTodosByTemplateId
+})
diff --git a/server/api/getTodosProductionOrderInstance/[id].ts b/server/api/getTodosProductionOrderInstance/[id].ts
new file mode 100644
index 0000000..97d8a64
--- /dev/null
+++ b/server/api/getTodosProductionOrderInstance/[id].ts
@@ -0,0 +1,23 @@
+import { poiTodosByTemplateId, errorMsg } from "../../middleware/productionOrders";
+import { OutgoingMessage } from 'http';
+
+export default defineEventHandler(async (event) => {
+
+    const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
+        'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
+        'Access-Control-Allow-Headers': 'authorization, content-type',
+        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
+        'Access-Control-Allow-Credentials': 'true',
+    };
+    setResponseHeaders(event, headers)
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return poiTodosByTemplateId
+})
diff --git a/server/api/updateMVITodo.ts b/server/api/updateMVITodo.ts
new file mode 100644
index 0000000..1695bd3
--- /dev/null
+++ b/server/api/updateMVITodo.ts
@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})
\ No newline at end of file
diff --git a/server/api/updateMaintenanceVisitInstance.ts b/server/api/updateMaintenanceVisitInstance.ts
new file mode 100644
index 0000000..1b56e96
--- /dev/null
+++ b/server/api/updateMaintenanceVisitInstance.ts
@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/maintenanceVisitInstances";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})
diff --git a/server/api/updatePOITodo.ts b/server/api/updatePOITodo.ts
new file mode 100644
index 0000000..3e841bf
--- /dev/null
+++ b/server/api/updatePOITodo.ts
@@ -0,0 +1,14 @@
+import { errorMsg } from "../middleware/productionOrders";
+
+export default defineEventHandler(async (event) => {
+
+    if (!(errorMsg === '')) {
+        throw createError({
+            statusCode: 400,
+            statusMessage: errorMsg,
+        })
+    }
+
+    setResponseStatus(event, 200)
+    return errorMsg
+})
\ No newline at end of file
diff --git a/server/middleware/maintenanceVisitInstances.ts b/server/middleware/maintenanceVisitInstances.ts
index 35703eb..a329c9d 100644
--- a/server/middleware/maintenanceVisitInstances.ts
+++ b/server/middleware/maintenanceVisitInstances.ts
@@ -8,8 +8,8 @@ let selectedMITsByMVT = [];
 let selectedMITsByState = [];
 let selectedMITsByUser = [];
 let selectedMITsByCustomer = [];
-let mitTodosByTemplateId = [];
-let mit = [];
+let mviTodosByTemplateId = [];
+let mvi = [];
 let insertId = -1;
 let errorMsg = '';
 
@@ -55,11 +55,11 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/addMVTasd")) {
+    if (event.path.startsWith("/api/addMVI")) {
         const body = await readBody(event)
-        // add the mvt in the backend
+        // add the mvi in the backend
         try {
-            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit`, body);
             insertId = res.data.insertId
         } catch (err) {
             if (axios.isAxiosError(err)) {
@@ -84,11 +84,11 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/addTodoMVTasd")) {
+    if (event.path.startsWith("/api/addTodoMVI")) {
         const body = await readBody(event)
-        // add the mvt todo in the backend
+        // add the mvi todo in the backend
         try {
-            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodos`, body);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -305,15 +305,15 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/deleteMaintenanceVisitTemplateasd")) {
-        let mvtId = null;
+    if (event.path.startsWith("/api/deleteMaintenanceVisitInstance")) {
+        let mviId = null;
         const path = event._path;
         const pathSegments = path.split('/');
-        mvtId = pathSegments[pathSegments.length - 1];
+        mviId = pathSegments[pathSegments.length - 1];
 
         // delete the mvt in the backend
         try {
-            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits/${mvtId}`);
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit/${mviId}`);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -337,16 +337,16 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/getTodosMaintenanceVisitTemplateasd")) {
-        // get maintenance visit template todos object from backend
+    if (event.path.startsWith("/api/getTodosMaintenanceVisitInstance")) {
+        // get maintenance visit instance todos object from backend
         let itemId = null;
         const path = event._path;
         const pathSegments = path.split('/');
         itemId = pathSegments[pathSegments.length - 1];
 
         try {
-            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${itemId}`);
-            mitTodosByTemplateId = res.data;
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodosByTemplateId/${itemId}`);
+            mviTodosByTemplateId = res.data;
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -369,15 +369,15 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/deleteTodosMVTasd")) {
-        let mvtId = null;
+    if (event.path.startsWith("/api/deleteTodosMVI")) {
+        let mviId = null;
         const path = event._path;
         const pathSegments = path.split('/');
-        mvtId = pathSegments[pathSegments.length - 1];
+        mviId = pathSegments[pathSegments.length - 1];
 
-        // delete the mvt todos in the backend
+        // delete the mv todos in the backend
         try {
-            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodosByTemplateid/${mvtId}`);
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodosByTemplateID/${mviId}`);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -401,11 +401,11 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/updateMaintenanceVisitTemplateasd")) {
+    if (event.path.startsWith("/api/updateMaintenanceVisitInstance")) {
         const body = await readBody(event)
-        // update the maintenance visit template in the backend
+        // update the maintenance visit instance in the backend
         try {
-            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit`, body);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -429,16 +429,16 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/getMaintenanceVisitTemplateasd")) {
-        // get maintenance visit template object from backend
-        let mvtId = null;
+    if (event.path.startsWith("/api/getMaintenanceVisitInstance")) {
+        // get maintenance visit instance object from backend
+        let mviId = null;
         const path = event._path;
         const pathSegments = path.split('/');
-        mvtId = pathSegments[pathSegments.length - 1];
+        mviId = pathSegments[pathSegments.length - 1];
 
         try {
-            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisit/${mvtId}`);
-            mit = res.data;
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisit/${mviId}`);
+            mvi = res.data;
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -461,11 +461,11 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    if (event.path.startsWith("/api/updateMVTTodoasd")) {
+    if (event.path.startsWith("/api/updateMVITodo")) {
         const body = await readBody(event)
-        // update the maintenance visit template todo in the backend
+        // update the maintenance visit instance todo in the backend
         try {
-            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/maintenanceVisitTodos`, body);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -490,14 +490,14 @@ export default defineEventHandler(async (event) => {
     }
 
     if (event.path.startsWith("/api/deleteMVTTodoasd")) {
-        let mvtId = null;
+        let mviId = null;
         const path = event._path;
         const pathSegments = path.split('/');
-        mvtId = pathSegments[pathSegments.length - 1];
+        mviId = pathSegments[pathSegments.length - 1];
 
         // delete the mvt in the backend
         try {
-            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mvtId}`);
+            let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${mviId}`);
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -522,4 +522,4 @@ export default defineEventHandler(async (event) => {
     }
 })
 
-export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mitTodosByTemplateId, mit, insertId, errorMsg };
\ No newline at end of file
+export { maintenanceVisitInstances, selectedMITsByState, selectedMITsByUser, selectedMITsByMVT, selectedMITsByMIT, selectedMITsByCustomer, mviTodosByTemplateId, mvi, insertId, errorMsg };
\ No newline at end of file
diff --git a/server/middleware/productionOrders.ts b/server/middleware/productionOrders.ts
index e9f3190..cb7ef8f 100644
--- a/server/middleware/productionOrders.ts
+++ b/server/middleware/productionOrders.ts
@@ -55,40 +55,40 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    // if (event.path.startsWith("/api/addMVTasd")) {
-    //     const body = await readBody(event)
-    //     // add the mvt in the backend
-    //     try {
-    //         let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisits`, body);
-    //         insertId = res.data.insertId
-    //     } catch (err) {
-    //         if (axios.isAxiosError(err)) {
-    //             const axiosError = err as AxiosError;
+    if (event.path.startsWith("/api/addTodoPOI")) {
+        const body = await readBody(event)
+        // add the poi in the backend
+        try {
+            let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
 
-    //             if (axiosError.response) {
-    //                 // Axios error
-    //                 console.error(axiosError.response.data.message);
-    //                 errorMsg = axiosError.response.data.message;
-    //             } else if (axiosError.request) {
-    //                 console.log(err)
-    //                 // If error was caused by the request
-    //                 console.error(axiosError.request);
-    //             } else {
-    //                 // Other errors
-    //                 console.error('Error', axiosError.message);
-    //             }
-    //         } else {
-    //             // No AxiosError
-    //             console.error('Error', err);
-    //         }
-    //     }
-    // }
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 
     if (event.path.startsWith("/api/addPOI")) {
         const body = await readBody(event)
         // add the poi todo in the backend
         try {
             let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrder`, body);
+            insertId = res.data.insertId
         } catch (err) {
             if (axios.isAxiosError(err)) {
                 const axiosError = err as AxiosError;
@@ -209,38 +209,6 @@ export default defineEventHandler(async (event) => {
     }
 
 
-    // if (event.path.startsWith("/api/getSelectedMITsByCustomer")) {
-    //     // get selected maintenance visit instances object by customer from backend
-    //     let filteredCustomer = null;
-    //     const path = event._path;
-    //     const pathSegments = path.split('/');
-    //     filteredCustomer = pathSegments[pathSegments.length - 1];
-
-    //     try {
-    //         let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedMaintenanceVisitsByCustomer/${filteredCustomer}`);
-    //         selectedMITsByCustomer = res.data;
-    //     } catch (err) {
-    //         if (axios.isAxiosError(err)) {
-    //             const axiosError = err as AxiosError;
-
-    //             if (axiosError.response) {
-    //                 // Axios error
-    //                 console.error(axiosError.response.data.message);
-    //                 errorMsg = axiosError.response.data.message;
-    //             } else if (axiosError.request) {
-    //                 // If error was caused by the request
-    //                 console.error(axiosError.request);
-    //             } else {
-    //                 // Other errors
-    //                 console.error('Error', axiosError.message);
-    //             }
-    //         } else {
-    //             // No AxiosError
-    //             console.error('Error', err);
-    //         }
-    //     }
-    // }
-
     if (event.path.startsWith("/api/getSelectedPOIsByUser")) {
         // get selected production order instances object by user from backend
         let filteredUser = null;
@@ -337,37 +305,37 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    // if (event.path.startsWith("/api/getTodosMaintenanceVisitTemplateasd")) {
-    //     // get maintenance visit template todos object from backend
-    //     let itemId = null;
-    //     const path = event._path;
-    //     const pathSegments = path.split('/');
-    //     itemId = pathSegments[pathSegments.length - 1];
+    if (event.path.startsWith("/api/getTodosProductionOrderInstance")) {
+        // get maintenance visit instance todos object from backend
+        let itemId = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        itemId = pathSegments[pathSegments.length - 1];
 
-    //     try {
-    //         let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${itemId}`);
-    //         mitTodosByTemplateId = res.data;
-    //     } catch (err) {
-    //         if (axios.isAxiosError(err)) {
-    //             const axiosError = err as AxiosError;
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodosByTemplateID/${itemId}`);
+            poiTodosByTemplateId = res.data;
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
 
-    //             if (axiosError.response) {
-    //                 // Axios error
-    //                 console.error(axiosError.response.data.message);
-    //                 errorMsg = axiosError.response.data.message;
-    //             } else if (axiosError.request) {
-    //                 // If error was caused by the request
-    //                 console.error(axiosError.request);
-    //             } else {
-    //                 // Other errors
-    //                 console.error('Error', axiosError.message);
-    //             }
-    //         } else {
-    //             // No AxiosError
-    //             console.error('Error', err);
-    //         }
-    //     }
-    // }
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 
     if (event.path.startsWith("/api/deleteTodosPOI")) {
         let poiId = null;
@@ -375,7 +343,7 @@ export default defineEventHandler(async (event) => {
         const pathSegments = path.split('/');
         poiId = pathSegments[pathSegments.length - 1];
 
-        // delete the mvt todos in the backend
+        // delete the poi todos in the backend
         try {
             let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos/${poiId}`);
         } catch (err) {
@@ -461,65 +429,33 @@ export default defineEventHandler(async (event) => {
         }
     }
 
-    // if (event.path.startsWith("/api/updateMVTTodoasd")) {
-    //     const body = await readBody(event)
-    //     // update the maintenance visit template todo in the backend
-    //     try {
-    //         let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos`, body);
-    //     } catch (err) {
-    //         if (axios.isAxiosError(err)) {
-    //             const axiosError = err as AxiosError;
+    if (event.path.startsWith("/api/updatePOITodo")) {
+        const body = await readBody(event)
+        // update the production order instance todo in the backend
+        try {
+            let res = await axiosInstance.put(`https://${serversideConfig.url}:${serversideConfig.port}/productionOrderTodos`, body);
+        } catch (err) {
+            if (axios.isAxiosError(err)) {
+                const axiosError = err as AxiosError;
 
-    //             if (axiosError.response) {
-    //                 // Axios error
-    //                 console.error(axiosError.response.data.message);
-    //                 errorMsg = axiosError.response.data.message;
-    //             } else if (axiosError.request) {
-    //                 console.log(err)
-    //                 // If error was caused by the request
-    //                 console.error(axiosError.request);
-    //             } else {
-    //                 // Other errors
-    //                 console.error('Error', axiosError.message);
-    //             }
-    //         } else {
-    //             // No AxiosError
-    //             console.error('Error', err);
-    //         }
-    //     }
-    // }
-
-    // if (event.path.startsWith("/api/deleteMVTTodoasd")) {
-    //     let poiId = null;
-    //     const path = event._path;
-    //     const pathSegments = path.split('/');
-    //     poiId = pathSegments[pathSegments.length - 1];
-
-    //     // delete the mvt in the backend
-    //     try {
-    //         let res = await axiosInstance.delete(`https://${serversideConfig.url}:${serversideConfig.port}/masterMaintenanceVisitTodos/${poiId}`);
-    //     } catch (err) {
-    //         if (axios.isAxiosError(err)) {
-    //             const axiosError = err as AxiosError;
-
-    //             if (axiosError.response) {
-    //                 // Axios error
-    //                 console.error(axiosError.response.data.message);
-    //                 errorMsg = axiosError.response.data.message;
-    //             } else if (axiosError.request) {
-    //                 console.log(err)
-    //                 // If error was caused by the request
-    //                 console.error(axiosError.request);
-    //             } else {
-    //                 // Other errors
-    //                 console.error('Error', axiosError.message);
-    //             }
-    //         } else {
-    //             // No AxiosError
-    //             console.error('Error', err);
-    //         }
-    //     }
-    // }
+                if (axiosError.response) {
+                    // Axios error
+                    console.error(axiosError.response.data.message);
+                    errorMsg = axiosError.response.data.message;
+                } else if (axiosError.request) {
+                    console.log(err)
+                    // If error was caused by the request
+                    console.error(axiosError.request);
+                } else {
+                    // Other errors
+                    console.error('Error', axiosError.message);
+                }
+            } else {
+                // No AxiosError
+                console.error('Error', err);
+            }
+        }
+    }
 })
 
 export { productionOrderInstances, selectedPOIsByState, selectedPOIsByUser, selectedPOIsByPOT, selectedPOIsByPOI, selectedPOIsByCustomer, poiTodosByTemplateId, poi, insertId, errorMsg };
\ No newline at end of file