diff --git a/app.vue b/app.vue
index 2dfae6a..1051332 100644
--- a/app.vue
+++ b/app.vue
@@ -19,7 +19,7 @@
 
 useHead({
   //title: `Tüit ERP - ${route.meta.title}`,
-  title: `Tüit ERP`,
+  title: `tüit app`,
   link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
 })
 </script>
diff --git a/backend/models/solutionsModel.js b/backend/models/solutionsModel.js
index f014466..d92317d 100644
--- a/backend/models/solutionsModel.js
+++ b/backend/models/solutionsModel.js
@@ -103,8 +103,8 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
 //get all selected solutions by asset name
 export const getSelectedSolutionsByAssetName = async (selected, result) => {
     try {
-        let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
-        const results = await ownConn.execute(sql)
+        let sql = `SELECT * FROM solutions WHERE assetName = ? ORDER BY solutionName ASC`;
+        const results = await ownConn.execute(sql, [selected])
         result(null, results);
     }
     catch (err) {
diff --git a/components/AssetSearch.vue b/components/AssetSearch.vue
index f7a909d..61ee3b8 100644
--- a/components/AssetSearch.vue
+++ b/components/AssetSearch.vue
@@ -1,15 +1,40 @@
 <template>
     <section :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Asset:</div>
-        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset name</pre>
+        <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ asset.assetName }}</pre>
     </section>
 </template>
     
     
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
+const store = useStore();
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+
+const asset = ref({});
 const darkMode = ref(true)
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        asset.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+onMounted(() => {
+    getItemById();
+});
+
 </script>
   
 <script>
diff --git a/components/server/AssetSolutionList.vue b/components/server/AssetSolutionList.vue
index c17c152..6762a18 100644
--- a/components/server/AssetSolutionList.vue
+++ b/components/server/AssetSolutionList.vue
@@ -1,4 +1,14 @@
 <template>
+    <section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['solutionLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
+        <input v-model="solutionSearchFilter" @change="searchSolution()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
+    <section v-if="filtered" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+        <div :class="['solutionLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Type</div>
+        <input v-model="typeSearchFilter" @change="filterSolutionByType()"
+            :class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+    </section>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-checkklist">
@@ -9,32 +19,135 @@
                         Solution</th>
                     <th :class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode']">Type</th>
                 </tr>
-                <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-for="sol in solutions" :key="sol.primaryID"
+                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
                     <td
                         :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
-                        ...</td>
-                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
+                        <nuxt-link to="/solutions" id="nuxt-link" class="button"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            @click="goToChosenSolution(sol.primaryID)">
+                            {{ sol.solutionName }}
+                        </nuxt-link>
+                    </td>
+                    <td :class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode']">{{ sol.type }}</td>
                 </tr>
             </tbody>
-
         </table>
     </div>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const chosenAssetId = computed(() => store.state.chosenAssetId);
+const searchable = computed(() => store.state.searchable);
+const filtered = computed(() => store.state.filtered);
+const solutionSearchFilter = ref('');
+const typeSearchFilter = ref('');
+
+const asset = ref({});
+const solutions = ref([]);
+const solutionsBySol = ref([]);
+const solutionsByType = ref([]);
 const darkMode = ref(true)
+
+//get all solutions from the chosen asset
+const getSolutions = async () => {
+    try {
+        const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByAsset/${asset.value.assetName}`);
+        solutions.value = response.data;
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+// update search term
+const updateSearchTerm = async () => {
+    solutionSearchFilter.value = '';
+    await getSolutions();
+}
+
+// update filter term
+const updateFilterTerm = async () => {
+    typeSearchFilter.value = '';
+    await getSolutions();
+}
+
+const goToChosenSolution = (id) => {
+    store.commit('setChosenSolution', id);
+    store.commit('changeToSolution');
+};
+
+// get config item from id
+const getItemById = async () => {
+    try {
+        const response = await Axios.get(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
+        );
+        asset.value = response.data;
+        await getSolutions();
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+//get all solutions based on the searched solution name
+const searchSolution = async () => {
+    if (solutionSearchFilter.value === '') {
+        await getSolutions();
+    } else {
+        try {
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
+            solutionsBySol.value = response.data;
+            solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsBySol.value);
+        } catch (err) {
+            console.log(err.response.statusText);
+        }
+    }
+}
+
+//get all solutions based on the searched solution name
+const filterSolutionByType = async () => {
+        if (typeSearchFilter.value === '') {
+            await getSolutions();
+        } else {
+            try {
+                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
+                solutionsByType.value = response.data;
+                solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
+            } catch (err) {
+                console.log(err.response.statusText);
+            }
+        }
+    }
+
+const filterObjectsWithMatchingIds = (arr1, arr2) => {
+    return arr1.filter(obj1 => {
+        return arr2.some(obj2 => obj2.primaryID === obj1.primaryID);
+    });
+};
+
+watch(searchable, updateSearchTerm);
+watch(filtered, updateFilterTerm);
+
+onMounted(() => {
+    getItemById();
+});
 </script>
 
 <script>
 export default {
     name: "AssetSolutionList",
 };
-</script> 
-    
-    
+</script>
+
+
 <style scoped>
 .data {
     display: flex;
@@ -57,6 +170,62 @@ export default {
     background-color: #fff;
 }
 
+.solutionLabel {
+    width: 5.5625em;
+    height: 1.875em;
+    font-family: "Overpass";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.875;
+    letter-spacing: 0.05em;
+}
+
+.data-darkmode {
+    background-color: #212121;
+    color: #fff;
+}
+
+.data-lightmode {
+    background-color: #EBEBEB;
+    color: #000;
+}
+
+.dataInput {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0 0.625rem;
+    border-radius: 0.3125rem;
+    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+    letter-spacing: 5%;
+    font: 400 0.75rem/250% Overpass, sans-serif;
+}
+
+.input {
+    border: none;
+}
+
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #fff;
+}
+
+.solution-search {
+    display: flex;
+    align-items: center;
+    padding: 0.625em 1.875em;
+    gap: 1.25em;
+    width: 30.125em;
+    height: 3.125em;
+    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+    border-radius: 0.625em;
+    box-sizing: border-box;
+}
+
 .data-table {
     width: 100%;
     padding: 0 0.625rem;
@@ -73,6 +242,11 @@ export default {
     gap: 0.625rem;
 }
 
+#nuxt-link {
+    text-decoration: none;
+    color: white;
+}
+
 .tr-head-darkmode {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
diff --git a/components/server/AssetTableNoCustomer.vue b/components/server/AssetTableNoCustomer.vue
index 0124550..3d04857 100644
--- a/components/server/AssetTableNoCustomer.vue
+++ b/components/server/AssetTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
         <table class="data-table" id="asset-table-no-customer">
@@ -183,4 +183,4 @@ th {
 .label-lightmode {
     color: #000;
 }
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/components/server/IssueSlipTableNoCustomer.vue b/components/server/IssueSlipTableNoCustomer.vue
index 87a0501..b5f5c37 100644
--- a/components/server/IssueSlipTableNoCustomer.vue
+++ b/components/server/IssueSlipTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
         <table class="data-table" id="asset-table">
@@ -184,4 +184,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue b/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
index 1b9e07e..e88951c 100644
--- a/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
+++ b/components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="maintenance-visits-templat-table-no-customer">
@@ -184,4 +184,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/ProductionOrdersTemplateTableNoCustomer.vue b/components/server/ProductionOrdersTemplateTableNoCustomer.vue
index dcbca8e..6b30e87 100644
--- a/components/server/ProductionOrdersTemplateTableNoCustomer.vue
+++ b/components/server/ProductionOrdersTemplateTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
         <table class="data-table" id="production-orders-template-table-no-customer">
@@ -165,4 +165,4 @@ th {
 
 .label-lightmode {
     color: #000;
-}</style>
\ No newline at end of file
+}</style> -->
\ No newline at end of file
diff --git a/components/server/SolutionTableNoCustomer.vue b/components/server/SolutionTableNoCustomer.vue
index d657eda..a1f83d9 100644
--- a/components/server/SolutionTableNoCustomer.vue
+++ b/components/server/SolutionTableNoCustomer.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
     <div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
         <table class="data-table" id="solution-table">
@@ -183,4 +183,4 @@ th {
 .label-lightmode {
     color: #000;
 }
-</style>
\ No newline at end of file
+</style> -->
\ No newline at end of file
diff --git a/layouts/Actionbar.vue b/layouts/Actionbar.vue
index be99abc..9258f6d 100644
--- a/layouts/Actionbar.vue
+++ b/layouts/Actionbar.vue
@@ -1,76 +1,123 @@
 <template>
-  <aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
+  <aside
+    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+      @click="toggleActionbar">
+      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+        src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
+      <button v-if="searchIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"
+        @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
+      <button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"
+        @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Filter-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
+      <button v-if="instancesIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
+      <button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions"
+        @click="changeToSolutions">
+        <div class="icon" id="instances-icon">
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Instances-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+        </Transition>
+      </button>
+      <button v-if="attachmentsIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
+      <button v-if="sellIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
+      <button v-if="archiveIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
+      <button v-if="addIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
+      <button v-if="addInstanceIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+        <div class="icon" id="new-icon">
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Add-New-Icon.svg" />
+        </div>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
+        </Transition>
+      </button>
+      <router-link v-if="addSolutionIcon" to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
+          @click="addSolution">
+          <div class="icon" id="new-icon">
+            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/actionbar-icons/Add-New-Icon.svg" />
+          </div>
+          <Transition name="fade">
+            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
+          </Transition>
+        </button>
+      </router-link>
+      <button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
+        @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
+      <button v-if="deleteIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete"
+        @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
+          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            src="/icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
@@ -81,8 +128,22 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const addIcon = computed(() => store.state.addIcon);
+const addInstanceIcon = computed(() => store.state.addInstanceIcon);
+const addSolutionIcon = computed(() => store.state.addSolutionIcon);
+const solutionIcon = computed(() => store.state.solutionIcon);
+const filterIcon = computed(() => store.state.filterIcon);
+const searchIcon = computed(() => store.state.searchIcon);
+const instancesIcon = computed(() => store.state.instancesIcon);
+const attachmentsIcon = computed(() => store.state.attachmentsIcon);
+const sellIcon = computed(() => store.state.sellIcon);
+const archiveIcon = computed(() => store.state.archiveIcon);
+const editIcon = computed(() => store.state.editIcon);
+const deleteIcon = computed(() => store.state.deleteIcon);
 
 const darkMode = ref(true)
 const isExpanded = ref(true)
@@ -108,6 +169,18 @@ const toggleSearched = () => {
 const add = () => {
   store.commit('add');
 };
+
+const addSolution = () => {
+  store.commit('add');
+};
+
+const changeToSolutions = () => {
+  store.commit('changeToSolutionlistAsset');
+}
+
+onMounted(() => {
+  store.commit('changeToAssetlist')
+});
 </script>
 
 
@@ -345,4 +418,5 @@ img {
     max-width: 0;
     max-inline-size: 0;
   }
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file
diff --git a/pages/assets.vue b/pages/assets.vue
index 546bcb5..531b563 100644
--- a/pages/assets.vue
+++ b/pages/assets.vue
@@ -6,9 +6,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onAssetlist || onCustomerAssetlist" />
+      <CustomerSearch v-if="onAssetlist" />
       <AssetTable v-if="onAssetlist" />
-      <AssetTableNoCustomer v-if="onCustomerAssetlist" />
+      <!-- <AssetTableNoCustomer v-if="onCustomerAssetlist" /> -->
       <Asset v-if="onAsset" />
       <HardwareSpecifications v-if="onAsset" />
       <SoftwareSpecifications v-if="onAsset" />
@@ -25,7 +25,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
-import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
+// import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
 import Asset from "../components/server/Asset.vue";
 import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
@@ -37,7 +37,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onAssetlist = computed(() => store.state.onAssetlist);
-const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
+// const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
 const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
 
diff --git a/pages/issueSlips.vue b/pages/issueSlips.vue
index 0bad698..b6feba9 100644
--- a/pages/issueSlips.vue
+++ b/pages/issueSlips.vue
@@ -25,9 +25,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onIssueSliplist || onCustomerIssueSliplist" />
+      <CustomerSearch v-if="onIssueSliplist" />
       <IssueSlipTable v-if="onIssueSliplist" />
-      <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" />
+      <!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
       <IssueSlip v-if="onIssueSlip" />
       <OrderingInformation v-if="onIssueSlip" />
       <Accounting v-if="onIssueSlip" />
@@ -41,7 +41,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
-import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
+// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
@@ -50,7 +50,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onIssueSliplist = computed(() => store.state.onIssueSliplist);
-const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
+// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
 const onIssueSlip = computed(() => store.state.onIssueSlip);
 
 definePageMeta({
diff --git a/pages/maintenanceVisits.vue b/pages/maintenanceVisits.vue
index c3dcb72..32a20fb 100644
--- a/pages/maintenanceVisits.vue
+++ b/pages/maintenanceVisits.vue
@@ -27,9 +27,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist" />
+      <CustomerSearch v-if="onTemplatelist" />
       <MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
-      <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" />
+      <!-- <MaintenanceVisitsTemplateTableNoCustomer v-if="onCustomerTemplatelist" /> -->
       <MaintenanceVisitsTemplate v-if="onTemplate" />
       <TemplateChecklistMVT v-if="onTemplate" />
       <TemplateSearch v-if="onInstancelist" />
@@ -46,7 +46,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
-import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
+// import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
 import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -58,7 +58,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
diff --git a/pages/productionOrders.vue b/pages/productionOrders.vue
index ea041d3..57beea3 100644
--- a/pages/productionOrders.vue
+++ b/pages/productionOrders.vue
@@ -27,9 +27,9 @@
             </router-link>
         </div>
         <div id="content-body">
-            <CustomerSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
+            <CustomerSearch v-if="onTemplatelist"/>
             <ProductionOrdersTemplateTable v-if="onTemplatelist"/>
-            <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/>
+            <!-- <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/> -->
             <ProductionOrdersTemplate v-if="onTemplate"/>
             <TemplateChecklist v-if="onTemplate"/>
             <TemplateSearch v-if="onInstancelist"/>
@@ -46,7 +46,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
-import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
+// import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
 import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
 import TemplateChecklist from "../components/server/TemplateChecklist.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -58,7 +58,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
+// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
diff --git a/pages/solutions.vue b/pages/solutions.vue
index 8c5d696..83b5810 100644
--- a/pages/solutions.vue
+++ b/pages/solutions.vue
@@ -6,9 +6,9 @@
       </router-link>
     </div>
     <div id="content-body">
-      <CustomerSearch v-if="onSolutionlist || onCustomerSolutionlist" />
+      <CustomerSearch v-if="onSolutionlist" />
       <SolutionTable v-if="onSolutionlist" />
-      <SolutionTableNoCustomer v-if="onCustomerSolutionlist" />
+      <!-- <SolutionTableNoCustomer v-if="onCustomerSolutionlist" /> -->
       <Solution v-if="onSolution" />
       <SolutionChecklist v-if="onSolution" />
     </div>
@@ -20,7 +20,7 @@ import { ref } from 'vue';
 
 import CustomerSearch from "../components/CustomerSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
-import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
+// import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 import { useStore } from 'vuex';
@@ -28,7 +28,7 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onSolutionlist = computed(() => store.state.onSolutionlist);
-const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
+// const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
 const onSolution = computed(() => store.state.onSolution);
 
 definePageMeta({
diff --git a/plugins/vuex.js b/plugins/vuex.js
index c1974df..8efaf70 100644
--- a/plugins/vuex.js
+++ b/plugins/vuex.js
@@ -12,8 +12,20 @@ const store = createStore({
             changedCustomerId: -1,
             filteredByCustomer: '',
 
+            addIcon: false,
+            addSolutionIcon: false,
+            solutionIcon: false,
+            addInstanceIcon: false,
+            filterIcon: false,
+            searchIcon: false,
+            instancesIcon: false,
+            attachmentsIcon: false,
+            sellIcon: false,
+            archiveIcon: false,
+            editIcon: false,
+            deleteIcon: false,
+
             onAssetlist: true,
-            onCustomerAssetlist: false,
             onAsset: false,
             onSolutionlistAsset: false,
             chosenAssetId: -1,
@@ -42,7 +54,6 @@ const store = createStore({
             newLicense: '',
 
             onTemplatelist: true,
-            onCustomerTemplatelist: false,
             onTemplate: false,
             onInstancelist: false,
             onInstance: false,
@@ -66,7 +77,6 @@ const store = createStore({
             chosenMVTId: -1,
 
             onSolutionlist: true,
-            onCustomerSolutionlist: false,
             onSolution: false,
             chosenSolutionId: -1,
             newSolutionNameSol: '',
@@ -80,7 +90,6 @@ const store = createStore({
             newNotesSol: '',
 
             onIssueSliplist: true,
-            onCustomerIssueSliplist: false,
             onIssueSlip: false,
             chosenIssueSlipId: -1,
             newTicketNoIS: '',
@@ -150,137 +159,160 @@ const store = createStore({
             state.changedCustomerId = id
         },
 
+        refresh() {
+            //
+        },
+
         // functions to change the asset pages
         changeToAssetlist(state) {
             state.onAssetlist = true
-            state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerAssetlist(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = true
             state.onAsset = false
             state.onSolutionlistAsset = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToAsset(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = true
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToSolutionlistAsset(state) {
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = false
             state.onSolutionlistAsset = true
-        },
-        setChosenAsset(state, id) {
-            state.chosenAssetId = id
-        },
-        resetAssetStore(state) {
-            state.editable = false
-            state.filtered = false
-            state.searchable = false
-            state.deleteAsset = false
-            state.chosenAssetId = -1
-            state.filteredByCustomer = ''
-            state.newAssetName = ''
-            state.newCustomerID = ''
-            state.newCustomer = ''
-            state.newLocation = ''
-            state.newRemoteLocation = ''
-            state.newType = ''
-            state.newDescription = ''
-            state.newNotes = ''
-            state.newState = ''
-            state.newLastView = ''
-            state.newUser = ''
-            state.hardwareBool = false
-            state.newModel = ''
-            state.newSerialnumber = ''
-            state.newCPU = ''
-            state.newRAM = ''
-            state.newStorageConfiguration = ''
-            state.newMiscellaneous = ''
-            state.softwareBool = false
-            state.newSoftware = ''
-            state.newVersion = ''
-            state.newLicense = ''
-        },
-        // functions to change the production order and maintenance visit pages
-        changeToTemplatelist(state) {
-            state.onTemplatelist = true
-            state.onCustomerTemplatelist = false
-            state.onTemplate = false
-            state.onInstancelist = false
-            state.onInstance = false
-        },
-        changeToCustomerTemplatelist(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = true
-            state.onTemplate = false
-            state.onInstancelist = false
-            state.onInstance = false
-        },
-        changeToTemplate(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
-            state.onTemplate = true
-            state.onInstancelist = false
-            state.onInstance = false
-        },
-        changeToInstancelist(state) {
-            state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
-            state.onTemplate = false
-            state.onInstancelist = true
-            state.onInstance = false
+
+            state.addIcon = false
+            state.addSolutionIcon = true
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
 
         // functions to change the production order and maintenance visit pages
         changeToTemplatelist(state) {
             state.onTemplatelist = true
-            state.onCustomerTemplatelist = false
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerTemplatelist(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = true
             state.onTemplate = false
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToTemplate(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = true
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = true
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToInstancelist(state) {
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = false
             state.onInstancelist = true
             state.onInstance = false
-        },
-        doDeleteAsset(state) {
-            state.deleteAsset = true
-        },
-        undoDeleteAsset(state) {
-            state.deleteAsset = false
-        },
-        toggleAssetSearchable(state) {
-            if (state.searchable == false) {
-                state.searchable = true
-                state.filtered = false
-            } else {
-                state.searchable = false
-            }
-            state.filteredByCustomer = ''
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = true
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         addNewAsset(state) {
             state.newAsset = true
@@ -288,7 +320,6 @@ const store = createStore({
             state.filtered = false
             state.searchable = false
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
         },
@@ -296,35 +327,107 @@ const store = createStore({
         // functions to change the solution pages
         changeToSolutionlist(state) {
             state.onSolutionlist = true
-            state.onCustomerSolutionlist = false
             state.onSolution = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerSolutionlist(state) {
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = true
             state.onSolution = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToSolution(state) {
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = false
             state.onSolution = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to change the issue slip pages
         changeToIssueSliplist(state) {
             state.onIssueSliplist = true
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToCustomerIssueSliplist(state) {
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = true
             state.onIssueSlip = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToIssueSlip(state) {
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = true
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to change the issue pages
@@ -332,16 +435,55 @@ const store = createStore({
             state.onIssueItemList = true
             state.onIssueItem = false
             state.onIssueItemVariant = false
+
+            state.addIcon = true
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = false
+            state.editIcon = false
+            state.deleteIcon = false
         },
         changeToIssueItem(state) {
             state.onIssueItemList = false
             state.onIssueItem = true
             state.onIssueItemVariant = false
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = true
+            state.searchIcon = true
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = false
+            state.archiveIcon = true
+            state.editIcon = true
+            state.deleteIcon = true
         },
         changeToIssueItemVariant(state) {
             state.onIssueItemList = false
             state.onIssueItem = false
             state.onIssueItemVariant = true
+
+            state.addIcon = false
+            state.addSolutionIcon = false
+            state.solutionIcon = false
+            state.addInstanceIcon = false
+            state.filterIcon = false
+            state.searchIcon = false
+            state.instancesIcon = false
+            state.attachmentsIcon = false
+            state.sellIcon = true
+            state.archiveIcon = true
+            state.editIcon = true
+            state.deleteIcon = true
         },
 
         // functions to update the asset
@@ -614,25 +756,21 @@ const store = createStore({
 
             // set the asset variables
             state.onAssetlist = false
-            state.onCustomerAssetlist = false
             state.onAsset = true
             state.onSolutionlistAsset = false
 
             // set the production order and maintenance visit variables
             state.onTemplatelist = false
-            state.onCustomerTemplatelist = false
             state.onTemplate = true
             state.onInstancelist = false
             state.onInstance = false
 
             // set the solution variables
             state.onSolutionlist = false
-            state.onCustomerSolutionlist = false
             state.onSolution = true
 
             // set the issue slips variables
             state.onIssueSliplist = false
-            state.onCustomerIssueSliplist = false
             state.onIssueSlip = true
 
             // set the issue variables
diff --git a/server/api/getSelectedSolutionsByAsset/[id].ts b/server/api/getSelectedSolutionsByAsset/[id].ts
new file mode 100644
index 0000000..6643c7b
--- /dev/null
+++ b/server/api/getSelectedSolutionsByAsset/[id].ts
@@ -0,0 +1,23 @@
+import { selectedSolutionsByAsset, errorMsg } from "../../middleware/solutions";
+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 selectedSolutionsByAsset
+})
diff --git a/server/api/getSelectedSolutionsByType/[id].ts b/server/api/getSelectedSolutionsByType/[id].ts
new file mode 100644
index 0000000..8735b17
--- /dev/null
+++ b/server/api/getSelectedSolutionsByType/[id].ts
@@ -0,0 +1,23 @@
+import { selectedSolutionsByType, errorMsg } from "../../middleware/solutions";
+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 selectedSolutionsByType
+})
diff --git a/server/middleware/solutions.ts b/server/middleware/solutions.ts
index 6bc9d3c..e979b1c 100644
--- a/server/middleware/solutions.ts
+++ b/server/middleware/solutions.ts
@@ -6,7 +6,9 @@ let solutions = [];
 let solution = {};
 let selectedSolutionsByCustomer = [];
 let selectedSolutionsBySolution = [];
+let selectedSolutionsByAsset = [];
 let solTodosBySolutionId = [];
+let selectedSolutionsByType =  [];
 let insertId = -1;
 let errorMsg = '';
 
@@ -84,6 +86,70 @@ export default defineEventHandler(async (event) => {
         }
     }
 
+    if (event.path.startsWith("/api/getSelectedSolutionsByAsset")) {
+        // get selected solutions object by asset from backend
+        let filteredAsset = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredAsset = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByAssetName/${filteredAsset}`);
+            selectedSolutionsByAsset = 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/getSelectedSolutionsByType")) {
+        // get selected solutions object by type from backend
+        let filteredType = null;
+        const path = event._path;
+        const pathSegments = path.split('/');
+        filteredType = pathSegments[pathSegments.length - 1];
+
+        try {
+            let res = await axiosInstance.get(`https://${serversideConfig.url}:${serversideConfig.port}/selectedSolutionsByType/${filteredType}`);
+            selectedSolutionsByType = 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/getSelectedSolutionsBySolution")) {
         // get selected solutions object by asset from backend
         let filteredSolution = null;
@@ -391,4 +457,4 @@ export default defineEventHandler(async (event) => {
 
 })
 
-export { solutions, solution, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file
+export { solutions, solution, selectedSolutionsByType, selectedSolutionsByAsset, selectedSolutionsByCustomer, selectedSolutionsBySolution, solTodosBySolutionId, insertId, errorMsg };
\ No newline at end of file