From f660613bc73df7135586bcb6e28858db1920b152 Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zielstorff@iese.fraunhofer.de>
Date: Thu, 19 Dec 2024 18:20:36 +0100
Subject: [PATCH] Updates all components in the AppNavigation directory to the
 composition API (#162)

* updates theme switch to composition api

* Updates Auto Sync component to composition API

* Removes unused register AAS component

* Updates settings component to composition API

* Updates Upload AAS to composition API

* Updates AASList component to composition API

* Fix list details heights and improve style

* Updates AASListDetails to composition API

* Updates MainMenu component to composition API

* Updates AppNavigation Component to composition API
---
 .../src/components/AppNavigation/AASList.vue  | 870 ++++++++----------
 .../AppNavigation/AASListDetails.vue          | 225 +++--
 .../AppNavigation/AppNavigation.vue           | 626 ++++---------
 .../src/components/AppNavigation/AutoSync.vue |  82 +-
 .../src/components/AppNavigation/MainMenu.vue | 549 ++++-------
 .../components/AppNavigation/RegisterAAS.vue  | 195 ----
 .../src/components/AppNavigation/Settings.vue |  26 +-
 .../AppNavigation/Settings/StatusSwitch.vue   |  45 +-
 .../AppNavigation/Settings/ThemeSwitch.vue    |  76 +-
 .../components/AppNavigation/UploadAAS.vue    |  84 +-
 .../composables/Client/AASRepositoryClient.ts |  34 +-
 .../src/composables/DashboardHandling.ts      |  17 +
 aas-web-ui/src/store/NavigationStore.ts       |  39 +-
 aas-web-ui/src/types/BaSyx.ts                 |  18 +
 aas-web-ui/src/utils/generalUtils.ts          |  22 +
 15 files changed, 1059 insertions(+), 1849 deletions(-)
 delete mode 100644 aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
 create mode 100644 aas-web-ui/src/types/BaSyx.ts

diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
index 3474a6d..a2fde89 100644
--- a/aas-web-ui/src/components/AppNavigation/AASList.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -3,7 +3,7 @@
         <v-card color="card" elevation="0">
             <!-- Title Bar in the AAS List -->
             <v-card-title v-if="singleAas && !isMobile" style="padding: 16px 16px 16px"> Asset & AAS </v-card-title>
-            <v-card-title v-else-if="!isMobile">
+            <v-card-title v-if="!singleAas">
                 <v-row align="center">
                     <v-col cols="auto" class="px-0">
                         <v-tooltip open-delay="600" location="bottom" :disabled="isMobile">
@@ -34,12 +34,11 @@
                     </v-col>
                     <!-- Add existing AAS -->
                     <v-col cols="auto" class="px-0">
-                        <!-- <RegisterAAS></RegisterAAS> -->
                         <UploadAAS></UploadAAS>
                     </v-col>
                 </v-row>
             </v-card-title>
-            <v-divider></v-divider>
+            <v-divider v-if="!singleAas"></v-divider>
             <!-- AAS List -->
             <v-list
                 v-if="!singleAas"
@@ -48,15 +47,9 @@
                 :style="{
                     display: 'flex',
                     'flex-direction': 'column',
-                    height: isMobile
-                        ? selectedAAS && Object.keys(selectedAAS).length > 0
-                            ? '176px' // 3x AAS items
-                            : 'calc(100vh - 64px - 64px - 40px - 2px)' // Full height - header - title - footer - 2x divider
-                        : selectedAAS && Object.keys(selectedAAS).length > 0
-                          ? 'calc(50vh - 64px - 40px - 2px - 1px)' // Half height - header - footer - 2x divider - border
-                          : 'calc(100vh - 64px - 64px - 48px - 40px - 2px)', // Full height - header - title - collapse button - footer - 2x divider
+                    height: listHeight,
                 }">
-                <v-virtual-scroll ref="virtualScroll" :items="AASData" :item-height="56" class="pb-2 bg-card">
+                <v-virtual-scroll ref="virtualScrollRef" :items="AASData" :item-height="56" class="pb-2 bg-card">
                     <template #default="{ item }">
                         <!-- Single AAS -->
                         <v-list-item
@@ -129,7 +122,7 @@
                 </v-virtual-scroll>
             </v-list>
             <!-- AAS Details (only visible if the Information Button is pressed on an AAS) -->
-            <AASListDetails v-if="selectedAAS && Object.keys(selectedAAS).length > 0" />
+            <AASListDetails v-if="selectedAAS && Object.keys(selectedAAS).length > 0" :status="AASStatus" />
             <!-- Collapse/extend Sidebar Button -->
             <v-list v-if="!isMobile" nav style="width: 100%; z-index: 9000" class="bg-detailsCard pa-0">
                 <v-divider style="margin-left: -8px; margin-right: -8px"></v-divider>
@@ -163,492 +156,425 @@
     </v-dialog>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import type { ComponentPublicInstance } from 'vue';
+    import { computed, onActivated, onMounted, Ref, ref, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import AASListDetails from '@/components/AppNavigation/AASListDetails.vue';
+    import UploadAAS from '@/components/AppNavigation/UploadAAS.vue';
+    import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
+    import { useRequestHandling } from '@/composables/RequestHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
-    import AASListDetails from './AASListDetails.vue';
-    // import RegisterAAS from './RegisterAAS.vue';
-    import UploadAAS from './UploadAAS.vue';
-
-    export default defineComponent({
-        name: 'AASList',
-        components: {
-            AASListDetails, // AAS Details Component
-            // RegisterAAS,    // Register AAS Component
-            UploadAAS, // Upload AAS Component
-        },
-        mixins: [RequestHandling, SubmodelElementHandling],
-
-        setup() {
-            const theme = useTheme();
-            const navigationStore = useNavigationStore();
-            const aasStore = useAASStore();
-            const envStore = useEnvStore();
-            const route = useRoute();
-            const router = useRouter();
-
-            return {
-                theme, // Theme Object
-                navigationStore, // NavigationStore Object
-                aasStore, // AASStore Object
-                envStore, // EnvironmentStore Object
-                route, // Route Object
-                router, // Router Object
-            };
-        },
-
-        data() {
-            return {
-                AASData: [], // Variable to store the AAS Data
-                unfilteredAASData: [], // Variable to store the AAS Data before filtering
-                listLoading: false, // Variable to store if the AAS List is loading
-                deleteDialogShowing: false, // Variable to store if the Delete Dialog should be shown
-                deleteSubmodels: false, // Variable to store if the Submodels should be deleted
-                aasToDelete: {} as any, // Variable to store the AAS to be deleted
-                deleteLoading: false, // Variable to store if the AAS is being deleted
-            };
-        },
-
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-
-            // get Drawer State from store
-            drawerState() {
-                // Computed Property to control the state of the Navigation Drawer (true -> collapsed, false -> extended)
-                return this.navigationStore.getDrawerState;
-            },
-
-            // get AAS Registry URL from Store
-            aasRegistryURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-
-            // get Submodel Registry URL from Store
-            submodelRegistryURL() {
-                return this.navigationStore.getSubmodelRegistryURL;
-            },
-
-            // get the selected AAS from Store
-            selectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // gets loading State from Store
-            loading() {
-                return this.aasStore.getLoadingState;
-            },
-
-            // returns the primary color of the current theme
-            primaryColor() {
-                if (this.isDark) {
-                    return this.$vuetify.theme.themes.dark.colors.primary;
-                } else {
-                    return this.$vuetify.theme.themes.light.colors.primary;
-                }
-            },
-
-            // get the status-check state from the store
-            statusCheck() {
-                return this.navigationStore.getStatusCheck;
-            },
-
-            // get trigger signal for AAS List reload from store
-            triggerAASListReload() {
-                return this.navigationStore.getTriggerAASListReload;
-            },
-
-            // get trigger signal for AAS List scroll from store
-            triggerAASListScroll() {
-                return this.navigationStore.getTriggerAASListScroll;
-            },
-
-            // Get the AAS Repository URL from the Store
-            aasRepoURL() {
-                return this.navigationStore.getAASRepoURL;
-            },
-
-            singleAas() {
-                return this.envStore.getSingleAas;
-            },
-        },
-
-        watch: {
-            // Watch the AAS Registry URL for changes and reload the AAS List if the URL changes
-            aasRegistryURL() {
-                if (this.aasRegistryURL !== '') {
-                    this.loadAASListData();
-                    if (this.statusCheck) {
-                        this.addConnectionInterval();
-                    }
-                } else {
-                    this.AASData = [];
-                }
-            },
+    import { extractEndpointHref } from '@/utils/DescriptorUtils';
+    import { URLEncode } from '@/utils/EncodeDecodeUtils';
+    import { downloadFile, nameToDisplay } from '@/utils/generalUtils';
 
-            // watch for changes in the status-check state and add/remove the connection interval
-            statusCheck() {
-                if (this.statusCheck) {
-                    this.addConnectionInterval();
-                }
-            },
+    // Extend the ComponentPublicInstance type to include scrollToIndex
+    interface VirtualScrollInstance extends ComponentPublicInstance {
+        scrollToIndex: (index: number) => void;
+    }
 
-            // watch for changes in the trigger for AAS List reload
-            triggerAASListReload(triggerVal) {
-                if (triggerVal === true) {
-                    this.loadAASListData();
-                    this.navigationStore.dispatchTriggerAASListReload(false);
-                }
-            },
-
-            // watch for changes in the trigger for AAS List scroll
-            triggerAASListScroll() {
-                this.scrollToSelectedAAS();
-            },
-        },
-
-        mounted() {
-            // Load the AAS List on Startup if the AAS Registry URL is set
-            if (this.aasRegistryURL !== '' && !this.singleAas) {
-                this.loadAASListData();
+    // Vue Router
+    const route = useRoute();
+    const router = useRouter();
+
+    // composables
+    const { getRequest, deleteRequest } = useRequestHandling();
+    const { fetchAndDispatchAas } = useAASRepositoryClient();
+
+    // Stores
+    const navigationStore = useNavigationStore();
+    const aasStore = useAASStore();
+    const envStore = useEnvStore();
+
+    // Vuetify
+    const theme = useTheme();
+
+    // Data
+    const AASData = ref([]); // Variable to store the AAS Data
+    const unfilteredAASData = ref([]); // Variable to store the AAS Data before filtering
+    const listLoading = ref(false); // Variable to store if the AAS List is loading
+    const deleteDialogShowing = ref(false); // Variable to store if the Delete Dialog should be shown
+    const deleteSubmodels = ref(false); // Variable to store if the Submodels should be deleted
+    const aasToDelete = ref({}); // Variable to store the AAS to be deleted
+    const deleteLoading = ref(false); // Variable to store if the AAS is being deleted
+    const virtualScrollRef: Ref<VirtualScrollInstance | null> = ref(null); // Reference to the Virtual Scroll Component
+    const AASStatus = ref(''); // Variable to store the AAS Status
+
+    // Computed Properties
+    const isMobile = computed(() => navigationStore.getIsMobile); // Check if the current Device is a Mobile Device
+    const isDark = computed(() => theme.global.current.value.dark); // Check if the current Theme is dark
+    const drawerState = computed(() => navigationStore.getDrawerState); // Get Drawer State from store (true -> collapsed, false -> extended)
+    const aasRepoURL = computed(() => navigationStore.getAASRepoURL); // Get the AAS Repository URL from the Store
+    const aasRegistryURL = computed(() => navigationStore.getAASRegistryURL); // Get AAS Registry URL from Store
+    const submodelRegistryURL = computed(() => navigationStore.getSubmodelRegistryURL); // Get Submodel Registry URL from Store
+    const selectedAAS = computed(() => aasStore.getSelectedAAS); // Get the selected AAS from Store
+    const loading = computed(() => aasStore.getLoadingState); // Get the loading State from Store
+    const primaryColor = computed(() => theme.current.value.colors.primary); // returns the primary color of the current theme
+    const statusCheck = computed(() => navigationStore.getStatusCheck); // Get the status-check state from the store
+    const triggerAASListReload = computed(() => navigationStore.getTriggerAASListReload); // Get the trigger signal for AAS List reload from store
+    const triggerAASListScroll = computed(() => navigationStore.getTriggerAASListScroll); // Get the trigger signal for AAS List scroll from store
+    const singleAas = computed(() => envStore.getSingleAas); // Get the single AAS state from the Store
+    const listHeight = computed(() => {
+        if (isMobile.value) {
+            if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0) {
+                return '231px'; // 4x AAS items
+            } else {
+                return 'calc(100vh - 64px - 40px - 64px - 2px)'; // Full height - header - footer - Searchbar - 2x divider
             }
-
-            // check if the status-check is set in the local storage and if so set the status-check state in the store
-            const statusCheck = localStorage.getItem('statusCheck');
-            if (statusCheck) {
-                // console.log('Status Check is set: ', statusCheck);
-                this.navigationStore.dispatchUpdateStatusCheck(statusCheck === 'true');
+        } else {
+            if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0) {
+                return 'calc(50vh - 64px - 64px - 2px - 1px)'; // Half height - header - title - 2x divider - border
+            } else {
+                return 'calc(100vh - 64px - 64px - 48px - 40px - 2px)'; // Full height - header - title - collapse button - footer - 2x divider
             }
-        },
-
-        activated() {
-            this.scrollToSelectedAAS();
-        },
-
-        methods: {
-            // Function to collapse the Sidebar
-            collapseSidebar() {
-                this.navigationStore.dispatchDrawerState(false);
-            },
-            // Function to get the AAS Data from the Registry Server
-            loadAASListData() {
-                this.listLoading = true;
-                // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
-                if (!this.aasRegistryURL.includes('/shell-descriptors')) {
-                    this.aasRegistryURL += '/shell-descriptors';
-                }
-                let path = this.aasRegistryURL;
-                let context = 'retrieving AAS Data';
-                let disableMessage = false;
-                this.getRequest(path, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        // execute if the AAS Registry is found
-                        // sort data by identification id (ascending) and store it in the AASData variable
-                        let registeredAAS = response.data.result;
-                        let sortedData = registeredAAS.sort((a: { [x: string]: number }, b: { [x: string]: number }) =>
-                            a['id'] > b['id'] ? 1 : -1
-                        );
+        }
+    });
 
-                        // add status online to the AAS Data
-                        sortedData.forEach((AAS: any) => {
-                            AAS['status'] = 'check disabled';
-                        });
-                        this.AASData = Object.freeze(sortedData); // store the sorted data in the AASData variable
-                        this.unfilteredAASData = sortedData; // make a copy of the sorted data and store it in the unfilteredAASData variable
-                        this.scrollToSelectedAAS(); // scroll to the selected AAS
-                        if (this.statusCheck) {
-                            this.checkAASStatus(); // check the AAS Status
-                        }
-                    } else {
-                        // execute if the AAS Registry Server is not found
-                        this.navigationStore.dispatchAASRegistryURL(''); // clear the URL in the NavigationStore
-                    }
-                    this.listLoading = false;
-                });
-            },
-
-            // Function which adds an Interval to check if the Shells in the AAS Registry are still available
-            addConnectionInterval() {
-                // check if the AAS Registry URL is set
-                if (this.aasRegistryURL !== '') {
-                    // add an Interval to check if the Shells in the AAS Registry are still available
-                    setInterval(() => {
-                        // Check if the AAS is online
-                        this.checkAASStatus();
-                    }, 30000); // check every 60 seconds
+    // Watchers
+    // Watch the AAS Registry URL for changes and reload the AAS List if the URL changes
+    watch(
+        () => aasRegistryURL.value,
+        (newValue) => {
+            if (newValue !== '') {
+                loadAASListData();
+                if (statusCheck.value) {
+                    addConnectionInterval();
                 }
-            },
-
-            // Function to check the AAS Status
-            checkAASStatus() {
-                // console.log('Check AAS Status: ', AAS);
-                // iterate over all AAS in the AAS List
-                this.AASData.forEach((AAS: any) => {
-                    const aasEndpopint = this.extractEndpointHref(AAS, 'AAS-3.0');
-                    let path = aasEndpopint;
-                    let context = 'evaluating AAS Status';
-                    let disableMessage = true;
-                    this.getRequest(path, context, disableMessage).then((response: any) => {
-                        if (response.success) {
-                            // execute if the AAS Registry is found
-                            AAS.status = 'online';
-                        } else {
-                            // execute if the AAS Registry is not found
-                            AAS.status = 'offline';
-                        }
-                    });
+            } else {
+                AASData.value = [];
+            }
+        }
+    );
+
+    // watch for changes in the status-check state and add/remove the connection interval
+    watch(
+        () => statusCheck.value,
+        (newValue) => {
+            if (newValue) {
+                addConnectionInterval();
+            }
+        }
+    );
+
+    // watch for changes in the trigger for AAS List reload
+    watch(
+        () => triggerAASListReload.value,
+        (triggerVal) => {
+            if (triggerVal === true) {
+                loadAASListData();
+                navigationStore.dispatchTriggerAASListReload(false);
+            }
+        }
+    );
+
+    // watch for changes in the trigger for AAS List scroll
+    watch(
+        () => triggerAASListScroll.value,
+        () => {
+            scrollToSelectedAAS();
+        }
+    );
+
+    onMounted(() => {
+        // Load the AAS List on Startup if the AAS Registry URL is set
+        if (aasRegistryURL.value !== '' && !singleAas.value) {
+            loadAASListData();
+        }
+
+        // check if the status-check is set in the local storage and if so set the status-check state in the store
+        const statusCheck = localStorage.getItem('statusCheck');
+        if (statusCheck) {
+            navigationStore.dispatchUpdateStatusCheck(statusCheck === 'true');
+        }
+    });
+
+    onActivated(() => {
+        scrollToSelectedAAS();
+    });
+
+    function collapseSidebar() {
+        navigationStore.dispatchDrawerState(false);
+    }
+
+    // Function to get the AAS Data from the Registry Server
+    function loadAASListData() {
+        listLoading.value = true;
+
+        // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
+        let aasRegURL = aasRegistryURL.value;
+        if (!aasRegistryURL.value.includes('/shell-descriptors')) {
+            aasRegURL += '/shell-descriptors';
+        }
+
+        const path = aasRegURL;
+        const context = 'retrieving AAS Data';
+        const disableMessage = false;
+
+        getRequest(path, context, disableMessage).then((response: any) => {
+            if (response.success) {
+                // execute if the AAS Registry is found
+                // sort data by identification id (ascending) and store it in the AASData variable
+                let registeredAAS = response.data.result;
+                let sortedData = registeredAAS.sort((a: { [x: string]: number }, b: { [x: string]: number }) =>
+                    a['id'] > b['id'] ? 1 : -1
+                );
+
+                // add status online to the AAS Data
+                sortedData.forEach((AAS: any) => {
+                    AAS['status'] = 'check disabled';
                 });
-            },
-
-            // Function to filter the AAS List
-            filterAASList(value: string) {
-                // console.log('Filter AAS List: ', value);
-                // if the Search Field is empty, show all AAS
-                if (value === '' || value === null) {
-                    this.AASData = this.unfilteredAASData;
+                AASData.value = Object.freeze(sortedData); // store the sorted data in the AASData variable
+                unfilteredAASData.value = sortedData; // make a copy of the sorted data and store it in the unfilteredAASData variable
+                scrollToSelectedAAS(); // scroll to the selected AAS
+                if (statusCheck.value) checkAASStatus(); // check the AAS Status
+            }
+            listLoading.value = false;
+        });
+    }
+
+    // Function which adds an Interval to check if the Shells in the AAS Registry are still available
+    function addConnectionInterval() {
+        // check if the AAS Registry URL is set
+        if (aasRegistryURL.value !== '') {
+            // add an Interval to check if the Shells in the AAS Registry are still available
+            setInterval(() => {
+                // Check if the AAS is online
+                checkAASStatus();
+            }, 30000); // check every 60 seconds
+        }
+    }
+
+    // Function to check the AAS Status
+    function checkAASStatus() {
+        // console.log('Check AAS Status');
+        // iterate over all AAS in the AAS List
+        AASData.value.forEach((AAS: any) => {
+            const aasEndpopint = extractEndpointHref(AAS, 'AAS-3.0');
+            let path = aasEndpopint;
+            let context = 'evaluating AAS Status';
+            let disableMessage = true;
+            getRequest(path, context, disableMessage).then((response: any) => {
+                if (response.success) {
+                    // execute if the AAS Registry is found
+                    AAS.status = 'online';
                 } else {
-                    // filter the AAS List by the Search Field Value
-                    let filteredAASData = this.unfilteredAASData.filter((AAS: { [x: string]: string }) =>
-                        AAS['idShort'].toLowerCase().includes(value.toLowerCase())
-                    );
-                    this.AASData = filteredAASData;
-                }
-            },
-
-            // Function to select an AAS
-            async selectAAS(AAS: any) {
-                // console.log('Select AAS: ', AAS);
-                // return if loading state is true -> prevents multiple requests
-                if (this.loading) {
-                    this.navigationStore.dispatchSnackbar({
-                        status: true,
-                        timeout: 4000,
-                        color: 'error',
-                        btnColor: 'buttonText',
-                        text: 'Please wait for the current Request to finish.',
-                    });
-                    return;
+                    // execute if the AAS Registry is not found
+                    AAS.status = 'offline';
                 }
-                if (this.selectedAAS && Object.keys(this.selectedAAS).length > 0 && this.selectedAAS.id === AAS.id) {
-                    // Deselect AAS
-                    this.router.push({ query: {} });
-                    this.aasStore.dispatchSelectedAAS({});
-                } else {
-                    let scrollToAasAfterDispatch = false;
-                    if (!this.selectAAS || Object.keys(this.selectAAS).length === 0) {
-                        scrollToAasAfterDispatch = true;
-                    }
-                    // Select AAS
-                    const aasEndpoint = this.extractEndpointHref(AAS, 'AAS-3.0');
-                    // Add AAS Endpoint as Query to the Router
-                    this.router.push({ query: { aas: aasEndpoint } });
-                    // dispatch the selected AAS to the Store
-                    await this.fetchAndDispatchAas(aasEndpoint);
-                    if (scrollToAasAfterDispatch) this.scrollToSelectedAAS();
+            });
+        });
+    }
+
+    // Function to filter the AAS List
+    function filterAASList(value: string) {
+        // console.log('Filter AAS List: ', value);
+        // if the Search Field is empty, show all AAS
+        if (value === '' || value === null) {
+            AASData.value = unfilteredAASData.value;
+        } else {
+            // filter the AAS List by the Search Field Value
+            let filteredAASData = unfilteredAASData.value.filter((AAS: { [x: string]: string }) =>
+                AAS['idShort'].toLowerCase().includes(value.toLowerCase())
+            );
+            AASData.value = filteredAASData;
+        }
+    }
+
+    // Function to select an AAS
+    async function selectAAS(AAS: any) {
+        // console.log('Select AAS: ', AAS);
+        // return if loading state is true -> prevents multiple requests
+        if (loading.value) {
+            navigationStore.dispatchSnackbar({
+                status: true,
+                timeout: 4000,
+                color: 'error',
+                btnColor: 'buttonText',
+                text: 'Please wait for the current Request to finish.',
+            });
+            return;
+        }
+        if (selectedAAS.value && Object.keys(selectedAAS.value).length > 0 && selectedAAS.value.id === AAS.id) {
+            // Deselect AAS
+            AASStatus.value = '';
+            router.push({ query: {} });
+            aasStore.dispatchSelectedAAS({});
+        } else {
+            let scrollToAasAfterDispatch = false;
+            if (!selectedAAS.value || Object.keys(selectedAAS.value).length === 0) {
+                scrollToAasAfterDispatch = true;
+            }
+            // Select AAS
+            AASStatus.value = AAS.status;
+            const aasEndpoint = extractEndpointHref(AAS, 'AAS-3.0');
+            // Add AAS Endpoint as Query to the Router
+            router.push({ query: { aas: aasEndpoint } });
+            // dispatch the selected AAS to the Store
+            await fetchAndDispatchAas(aasEndpoint);
+            if (scrollToAasAfterDispatch) scrollToSelectedAAS();
+        }
+    }
+
+    // checks if the AAS is selected
+    function isSelected(AAS: any) {
+        if (
+            selectedAAS.value === undefined ||
+            selectedAAS.value === null ||
+            Object.keys(selectedAAS.value).length === 0
+        ) {
+            return false;
+        }
+        const aasEndpointFromList = extractEndpointHref(AAS, 'AAS-3.0');
+        const aasEndpointSelected = extractEndpointHref(selectedAAS.value, 'AAS-3.0');
+        let isSelected = aasEndpointFromList === aasEndpointSelected;
+        if (isSelected) {
+            AASStatus.value = AAS.status;
+        }
+        return isSelected;
+    }
+
+    // Function to scroll to the selected AAS
+    async function scrollToSelectedAAS() {
+        // Find the index of the selected item
+        const index = AASData.value.findIndex((item: any) => isSelected(item));
+
+        if (index !== -1) {
+            const intervalId = setInterval(() => {
+                if (
+                    virtualScrollRef.value &&
+                    virtualScrollRef.value?.$el.querySelector('.v-virtual-scroll__container').children.length > 0
+                ) {
+                    // Access the scrollable container
+                    virtualScrollRef.value.scrollToIndex(index);
+                    clearInterval(intervalId);
                 }
-            },
-
-            // Function to download the AAS
-            downloadAAS(AAS: any) {
-                // console.log('Download AAS: ', AAS);
-                // request the Submodel references for the AAS
-                const aasEndpopint = this.extractEndpointHref(AAS, 'AAS-3.0');
-                let path = aasEndpopint + '/submodel-refs';
-                let context = 'retrieving Submodel References';
+            }, 50);
+        }
+    }
+
+    // Function to download the AAS
+    function downloadAAS(AAS: any) {
+        // console.log('Download AAS: ', AAS);
+        // request the Submodel references for the AAS
+        const aasEndpopint = extractEndpointHref(AAS, 'AAS-3.0');
+        let path = aasEndpopint + '/submodel-refs';
+        let context = 'retrieving Submodel References';
+        let disableMessage = false;
+        getRequest(path, context, disableMessage).then(async (response: any) => {
+            if (response.success) {
+                // execute if the Request was successful
+                const submodelRefs = response.data.result;
+                const aasIds = URLEncode(AAS.id);
+                // extract all references in an Array calles submodelIds from each keys[0].value
+                let submodelIds = [] as any;
+                submodelRefs.forEach((submodelRef: any) => {
+                    submodelIds.push(URLEncode(submodelRef.keys[0].value));
+                });
+                // console.log('aasIds: ', aasIds, ' submodelIds: ', submodelIds);
+                // strip the everything after the last slash from the getAASRepoURL (http://localhost:1500/shells -> http://localhost:1500)
+                let path = aasRepoURL.value.substring(0, aasRepoURL.value.lastIndexOf('/'));
+                // add the aasIds and submodelIds to the path (example: http://localhost:1500/serialization?aasIds=abc&submodelIds=def&submodelIds=ghi&includeConceptDescriptions=true)
+                path +=
+                    '/serialization?aasIds=' +
+                    aasIds +
+                    '&submodelIds=' +
+                    submodelIds.join('&submodelIds=') +
+                    '&includeConceptDescriptions=true';
+                let context = 'retrieving AAS serialization';
                 let disableMessage = false;
-                this.getRequest(path, context, disableMessage).then(async (response: any) => {
+                let headers = new Headers();
+                headers.append('Accept', 'application/asset-administration-shell-package+xml');
+                getRequest(path, context, disableMessage, headers).then(async (response: any) => {
                     if (response.success) {
                         // execute if the Request was successful
-                        const submodelRefs = response.data.result;
-                        const aasIds = this.URLEncode(AAS.id);
-                        // extract all references in an Array calles submodelIds from each keys[0].value
-                        let submodelIds = [] as any;
-                        submodelRefs.forEach((submodelRef: any) => {
-                            submodelIds.push(this.URLEncode(submodelRef.keys[0].value));
-                        });
-                        // console.log('aasIds: ', aasIds, ' submodelIds: ', submodelIds);
-                        // strip the everything after the last slash from the getAASRepoURL (http://localhost:1500/shells -> http://localhost:1500)
-                        let path = this.aasRepoURL.substring(0, this.aasRepoURL.lastIndexOf('/'));
-                        // add the aasIds and submodelIds to the path (example: http://localhost:1500/serialization?aasIds=abc&submodelIds=def&submodelIds=ghi&includeConceptDescriptions=true)
-                        path +=
-                            '/serialization?aasIds=' +
-                            aasIds +
-                            '&submodelIds=' +
-                            submodelIds.join('&submodelIds=') +
-                            '&includeConceptDescriptions=true';
-                        let context = 'retrieving AAS serialization';
-                        let disableMessage = false;
-                        let headers = new Headers();
-                        headers.append('Accept', 'application/asset-administration-shell-package+xml');
-                        this.getRequest(path, context, disableMessage, headers).then(async (response: any) => {
-                            if (response.success) {
-                                // execute if the Request was successful
-                                let aasSerialization = response.data;
-                                this.downloadFile(AAS.idShort + '.aasx', aasSerialization);
-                            }
-                        });
+                        let aasSerialization = response.data;
+                        downloadFile(AAS.idShort + '.aasx', aasSerialization);
                     }
                 });
-            },
+            }
+        });
+    }
 
-            // checks if the AAS is selected
-            isSelected(AAS: any) {
-                if (
-                    this.selectedAAS === undefined ||
-                    this.selectedAAS === null ||
-                    Object.keys(this.selectedAAS).length === 0
-                ) {
-                    return false;
-                }
-                const aasEndpointFromList = this.extractEndpointHref(AAS, 'AAS-3.0');
-                const aasEndpointSelected = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
-                let isSelected = aasEndpointFromList === aasEndpointSelected;
-                return isSelected;
-            },
-
-            // Function to remove the AAS from the AAS Registry
-            removeFromAASRegistry(AAS: any) {
-                // console.log('Remove AAS: ', AAS);
-                // return if loading state is true -> prevents multiple requests
-                if (this.loading) {
-                    this.navigationStore.dispatchSnackbar({
-                        status: true,
-                        timeout: 4000,
-                        color: 'error',
-                        btnColor: 'buttonText',
-                        text: 'Please wait for the current Request to finish.',
-                    });
-                    return;
-                }
-                // show a confirmation Dialog to delete the AAS
-                if (confirm('Are you sure you want to delete the AAS from the AAS Registry?')) {
-                    // execute if the user confirms the removal
-                    // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
-                    if (!this.aasRegistryURL.includes('/shell-descriptors')) {
-                        this.aasRegistryURL += '/shell-descriptors';
-                    }
-                    let path = this.aasRegistryURL + '/' + this.URLEncode(AAS.id);
-                    let context = 'removing AAS from AAS Registry';
-                    let disableMessage = false;
-                    this.deleteRequest(path, context, disableMessage).then((response: any) => {
-                        if (response.success) {
-                            // execute if deletion was successful
-                            this.loadAASListData(); // reload the AAS List
-                        }
-                    });
-                }
-            },
-
-            removeAAS(AAS: any) {
-                // console.log('Remove AAS: ', AAS);
-                // return if loading state is true -> prevents multiple requests
-                if (this.loading) {
-                    this.navigationStore.dispatchSnackbar({
-                        status: true,
-                        timeout: 4000,
-                        color: 'error',
-                        btnColor: 'buttonText',
-                        text: 'Please wait for the current Request to finish.',
-                    });
-                    return;
-                }
-                // console.log('Remove AAS: ', AAS);
-                const aasEndpopint = this.extractEndpointHref(AAS, 'AAS-3.0');
-                let path = aasEndpopint;
-                let context = 'removing AAS';
-                let disableMessage = false;
-                this.deleteRequest(path, context, disableMessage);
-            },
-
-            async confirmDelete() {
-                this.deleteLoading = true;
-                let error = false;
-                try {
-                    if (this.deleteSubmodels) {
-                        const aasEndpopint = this.extractEndpointHref(this.aasToDelete, 'AAS-3.0');
-                        const aasRepoPath = aasEndpopint + '/submodel-refs';
-                        const aasRepoContext = 'retrieving Submodel References';
-                        const disableMessage = false;
-                        const aasRepoResponse = await this.getRequest(aasRepoPath, aasRepoContext, disableMessage);
-                        if (aasRepoResponse.success) {
-                            const submodelRefs = aasRepoResponse.data.result;
-                            // Extract all references in an array called submodelIds from each keys[0].value
-                            const submodelIds = submodelRefs.map((ref: any) => ref.keys[0].value);
-                            this.removeAAS(this.aasToDelete);
-                            // Remove each submodel
-                            for (const submodelId of submodelIds) {
-                                const submodelRegistryPath = `${this.submodelRegistryURL}/${this.URLEncode(submodelId)}`;
-                                const submodelRegistryResponse = await this.getRequest(
-                                    submodelRegistryPath,
-                                    'Removing Submodels',
-                                    disableMessage
-                                );
-                                if (submodelRegistryResponse.success) {
-                                    const submodelHref = this.extractEndpointHref(
-                                        submodelRegistryResponse.data,
-                                        'SUBMODEL-3.0'
-                                    );
-                                    const deletePath = submodelHref;
-                                    await this.deleteRequest(deletePath, 'removing Submodel', disableMessage);
-                                } else {
-                                    error = true;
-                                }
-                            }
+    function showDeleteDialog(AAS: any) {
+        deleteDialogShowing.value = true;
+        aasToDelete.value = AAS;
+    }
+
+    async function confirmDelete() {
+        deleteLoading.value = true;
+        let error = false;
+        try {
+            if (deleteSubmodels.value) {
+                const aasEndpopint = extractEndpointHref(aasToDelete.value, 'AAS-3.0');
+                const aasRepoPath = aasEndpopint + '/submodel-refs';
+                const aasRepoContext = 'retrieving Submodel References';
+                const disableMessage = false;
+                const aasRepoResponse = await getRequest(aasRepoPath, aasRepoContext, disableMessage);
+                if (aasRepoResponse.success) {
+                    const submodelRefs = aasRepoResponse.data.result;
+                    // Extract all references in an array called submodelIds from each keys[0].value
+                    const submodelIds = submodelRefs.map((ref: any) => ref.keys[0].value);
+                    removeAAS(aasToDelete.value);
+                    // Remove each submodel
+                    for (const submodelId of submodelIds) {
+                        const submodelRegistryPath = `${submodelRegistryURL.value}/${URLEncode(submodelId)}`;
+                        const submodelRegistryResponse = await getRequest(
+                            submodelRegistryPath,
+                            'Removing Submodels',
+                            disableMessage
+                        );
+                        if (submodelRegistryResponse.success) {
+                            const submodelHref = extractEndpointHref(submodelRegistryResponse.data, 'SUBMODEL-3.0');
+                            const deletePath = submodelHref;
+                            await deleteRequest(deletePath, 'removing Submodel', disableMessage);
                         } else {
                             error = true;
                         }
-                    } else {
-                        this.removeAAS(this.aasToDelete);
                     }
-                } finally {
-                    this.deleteDialogShowing = false;
-                    this.aasToDelete = {};
-                    this.deleteSubmodels = false;
-                    if (!error) {
-                        //remove query from URL
-                        this.router.push({ path: this.route.path, query: {} });
-                        this.aasStore.dispatchSelectedAAS({});
-                        this.loadAASListData(); // reload the AAS List
-                    }
-                    this.deleteLoading = false;
-                }
-            },
-
-            showDeleteDialog(AAS: any) {
-                this.deleteDialogShowing = true;
-                this.aasToDelete = AAS;
-            },
-
-            async scrollToSelectedAAS() {
-                // Find the index of the selected item
-                const index = this.AASData.findIndex((item: any) => this.isSelected(item));
-                const virtualScrollRef = this.$refs.virtualScroll as any;
-
-                if (index !== -1 && virtualScrollRef) {
-                    const intervalId = setInterval(() => {
-                        if (virtualScrollRef.$el.querySelector('.v-virtual-scroll__container').children.length > 0) {
-                            // Access the scrollable container
-                            virtualScrollRef.scrollToIndex(index);
-                            clearInterval(intervalId);
-                        }
-                    }, 50);
+                } else {
+                    error = true;
                 }
-            },
-        },
-    });
+            } else {
+                removeAAS(aasToDelete.value);
+            }
+        } finally {
+            deleteDialogShowing.value = false;
+            aasToDelete.value = {};
+            deleteSubmodels.value = false;
+            if (!error) {
+                //remove query from URL
+                router.push({ path: route.path, query: {} });
+                aasStore.dispatchSelectedAAS({});
+                loadAASListData(); // reload the AAS List
+            }
+            deleteLoading.value = false;
+        }
+    }
+
+    function removeAAS(AAS: any) {
+        // console.log('Remove AAS: ', AAS);
+        // return if loading state is true -> prevents multiple requests
+        if (loading.value) {
+            navigationStore.dispatchSnackbar({
+                status: true,
+                timeout: 4000,
+                color: 'error',
+                btnColor: 'buttonText',
+                text: 'Please wait for the current Request to finish.',
+            });
+            return;
+        }
+        // console.log('Remove AAS: ', AAS);
+        const aasEndpopint = extractEndpointHref(AAS, 'AAS-3.0');
+        let path = aasEndpopint;
+        let context = 'removing AAS';
+        let disableMessage = false;
+        deleteRequest(path, context, disableMessage);
+    }
 </script>
 
 <style>
diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index 83267a4..071e616 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -1,21 +1,30 @@
 <template>
     <v-container class="pa-0" fluid>
-        <v-divider v-if="!singleAas"></v-divider>
-        <!-- AAS Details Card (only visible if the Information Button is pressed on an AAS) -->
-        <v-expand-transition>
-            <v-card-text
-                class="bg-detailsCard pa-0"
-                :class="isMobile ? 'v-card--reveal-mobile' : 'v-card--reveal-desktop'"
-                style="overflow-y: auto"
-                :style="{
-                    height: isMobile
-                        ? singleAas
-                            ? ''
-                            : 'calc(100vh - 176px - 40px - 64px)' // Full height - 3x AAS items - footer - header
-                        : singleAas
-                          ? 'calc(100vh - 64px - 64px - 48px - 40px - 2px)' // Full height - header - title - collapse button - footer - 2x divider
-                          : 'calc(50vh - 64px - 48px)', // Half height - header - collapse button
-                }">
+        <v-sheet>
+            <v-divider v-if="!singleAas || !isMobile"></v-divider>
+            <v-card-title class="bg-detailsHeader pl-3">
+                <v-row align="center" class="pl-4" style="height: 40px">
+                    <!-- AAS Status -->
+                    <div class="text-caption">{{ 'Status: ' }}</div>
+                    <div class="text-caption ml-1" :class="statusColor">
+                        {{ status }}
+                    </div>
+                    <!-- Jump to Submodel List on mobile -->
+                    <v-spacer v-if="isMobile"></v-spacer>
+                    <v-btn
+                        v-if="isMobile"
+                        color="primary"
+                        density="compact"
+                        variant="tonal"
+                        border
+                        append-icon="mdi-chevron-right"
+                        class="text-none"
+                        text="Submodels"
+                        @click="gotoSubmodelList()" />
+                </v-row>
+            </v-card-title>
+            <v-divider></v-divider>
+            <v-card-text class="bg-detailsCard pa-0" style="overflow-y: auto" :style="{ height: detailsListHeight }">
                 <!-- Asset Information -->
                 <!-- 1) AssetInformation is mandatory for an AssetAdministrationShell -->
                 <!-- 2) Minimal (empty) AssetInformation (generated with aas4j) will be { assetKind: null } -->
@@ -58,133 +67,109 @@
                         :description-object="selectedAAS.description"
                         :description-title="'Description'"
                         :small="false"></DescriptionElement>
-                    <template v-if="isMobile">
-                        <v-divider class="mt-2"></v-divider>
-                        <v-list-item>
-                            <template #title>
-                                <div class="mt-2 text-subtitle-2">
-                                    {{ 'Submodel List' }}
-                                    <v-btn
-                                        class="ml-2"
-                                        variant="plain"
-                                        icon="mdi-chevron-right"
-                                        @click="gotoSubmodelList()"></v-btn>
-                                </div>
-                            </template>
-                        </v-list-item>
-                    </template>
                 </v-list>
             </v-card-text>
-        </v-expand-transition>
+        </v-sheet>
     </v-container>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { computed, onMounted, ref, watch } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import AdministrativeInformationElement from '@/components/UIComponents/AdministrativeInformationElement.vue';
     import AssetInformation from '@/components/UIComponents/AssetInformation.vue';
     import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
     import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
     import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useRequestHandling } from '@/composables/RequestHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
+    import { extractEndpointHref } from '@/utils/DescriptorUtils';
 
-    export default defineComponent({
-        name: 'AASListDetails',
-        components: {
-            IdentificationElement,
-            AdministrativeInformationElement,
-            DisplayNameElement,
-            DescriptionElement,
-            AssetInformation,
-        },
-        mixins: [RequestHandling, SubmodelElementHandling],
+    // Vue Router
+    const route = useRoute();
+    const router = useRouter();
 
-        setup() {
-            const navigationStore = useNavigationStore();
-            const aasStore = useAASStore();
-            const envStore = useEnvStore();
-            const route = useRoute();
-            const router = useRouter();
+    // Composables
+    const { getRequest } = useRequestHandling();
 
-            return {
-                navigationStore, // NavigationStore Object
-                aasStore, // AASStore Object
-                envStore, // EnvironmentStore Object
-                route, // Route Object
-                router, // Router Object
-            };
-        },
+    // Stores
+    const navigationStore = useNavigationStore();
+    const aasStore = useAASStore();
+    const envStore = useEnvStore();
 
-        data() {
-            return {
-                assetInformation: null as any, // Asset Information Object
-            };
+    const props = defineProps({
+        status: {
+            type: String,
+            default: 'check disabled',
         },
+    });
 
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-
-            // get the selected AAS from Store
-            selectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
+    const assetInformation = ref(null as any | null);
 
-            singleAas() {
-                return this.envStore.getSingleAas;
-            },
-        },
+    const isMobile = computed(() => navigationStore.getIsMobile);
+    const selectedAAS = computed(() => aasStore.getSelectedAAS);
+    const singleAas = computed(() => envStore.getSingleAas);
+    const detailsListHeight = computed(() => {
+        if (isMobile.value) {
+            if (singleAas.value) {
+                return 'calc(100vh - 40px - 64px - 34px)'; // Full height - footer - header - details header (divider)
+            } else {
+                return 'calc(100vh - 231px - 40px - 64px - 36px - 64px)'; // Full height - 4x AAS items - footer - header - details header (divider) - Searchbar
+            }
+        } else {
+            if (singleAas.value) {
+                return 'calc(100vh - 64px - 64px - 48px - 40px - 35px)'; // Full height - header - title - collapse button - footer - details header (divider)
+            } else {
+                return 'calc(50vh - 40px - 48px - 33px)'; // Half height - footer - collapse button - details header (divider)
+            }
+        }
+    });
+    const statusColor = computed(() => {
+        if (props.status === 'online') {
+            return 'text-success';
+        } else if (props.status === 'check disabled') {
+            return 'text-warning';
+        } else {
+            return 'text-error';
+        }
+    });
 
-        watch: {
-            selectedAAS() {
-                this.fetchAssetDetails();
-            },
-        },
+    watch(selectedAAS, () => {
+        fetchAssetDetails();
+    });
 
-        mounted() {
-            this.fetchAssetDetails();
-        },
+    onMounted(() => {
+        fetchAssetDetails();
+    });
 
-        methods: {
-            // Function to fetch the Asset Details from the AAS Repository
-            fetchAssetDetails() {
-                // console.log('fetch asset details: ', this.selectedAAS);
-                const aasEndpopint = this.extractEndpointHref(this.selectedAAS, 'AAS-3.0');
-                const assetInformationEndpoint = aasEndpopint + '/asset-information';
-                // console.log('aasRepoEndpoint: ', assetInformationEndpoint);
-                let path = assetInformationEndpoint;
-                let context = 'retrieving asset information';
-                let disableMessage = false;
-                this.getRequest(path, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        // console.log('asset information: ', response.data);
-                        let assetInformation = response.data;
-                        if (
-                            assetInformation.defaultThumbnail &&
-                            assetInformation.defaultThumbnail.path &&
-                            !assetInformation.defaultThumbnail.path.startsWith('http')
-                        ) {
-                            let assetInformationThumbnailEndpoint = assetInformationEndpoint + '/thumbnail';
-                            assetInformation.defaultThumbnail.path = assetInformationThumbnailEndpoint;
-                        }
-                        // console.log('asset information thumbnail: ', assetInformation.defaultThumbnail);
-                        this.assetInformation = assetInformation;
-                    }
-                });
-            },
+    function fetchAssetDetails() {
+        const aasEndpopint = extractEndpointHref(selectedAAS.value, 'AAS-3.0');
+        const assetInformationEndpoint = aasEndpopint + '/asset-information';
+        const path = assetInformationEndpoint;
+        const context = 'retrieving asset information';
+        const disableMessage = false;
+        getRequest(path, context, disableMessage).then((response: any) => {
+            if (response.success) {
+                let fetchedAssetInformation = response.data;
+                if (
+                    fetchedAssetInformation.defaultThumbnail &&
+                    fetchedAssetInformation.defaultThumbnail.path &&
+                    !fetchedAssetInformation.defaultThumbnail.path.startsWith('http')
+                ) {
+                    let assetInformationThumbnailEndpoint = assetInformationEndpoint + '/thumbnail';
+                    fetchedAssetInformation.defaultThumbnail.path = assetInformationThumbnailEndpoint;
+                }
+                assetInformation.value = fetchedAssetInformation;
+            }
+        });
+    }
 
-            gotoSubmodelList() {
-                this.router.push({
-                    path: '/submodellist',
-                });
-            },
-        },
-    });
+    function gotoSubmodelList() {
+        router.push({
+            path: '/submodellist',
+            query: { aas: route.query.aas },
+        });
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
index f0d50f8..d6a3484 100644
--- a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
+++ b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
@@ -195,458 +195,222 @@
     </v-container>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
-    import { mergeProps } from 'vue';
+<script lang="ts" setup>
+    import type { BaSyxComponent, RepositoryKey } from '@/types/BaSyx';
+    import { computed, mergeProps, onMounted, reactive, ref, watch } from 'vue';
     import { useRoute } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import RequestHandling from '@/mixins/RequestHandling';
+    import AASList from '@/components/AppNavigation/AASList.vue';
+    import AutoSync from '@/components/AppNavigation/AutoSync.vue';
+    import MainMenu from '@/components/AppNavigation/MainMenu.vue';
+    import Settings from '@/components/AppNavigation/Settings.vue';
+    import ThemeSwitch from '@/components/AppNavigation/Settings/ThemeSwitch.vue';
+    import { useDashboardHandling } from '@/composables/DashboardHandling';
     import { useAuthStore } from '@/store/AuthStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
-    import AASList from './AASList.vue';
-    import AutoSync from './AutoSync.vue';
-    import MainMenu from './MainMenu.vue';
-    import Settings from './Settings.vue';
-    import ThemeSwitch from './Settings/ThemeSwitch.vue';
 
-    export default defineComponent({
-        name: 'AppNavigation', // Name of the Component
-        components: {
-            AASList, // Component to display the AAS List
-            AutoSync, // Component to display the Auto-Sync Settings
-            ThemeSwitch, // Component to display the Theme Switch
-            MainMenu, // Component to display the Main Menu
-            Settings, // Component to display the Settings Menu
-        },
-        mixins: [RequestHandling],
-
-        setup() {
-            const theme = useTheme();
-            const navigationStore = useNavigationStore();
-            const envStore = useEnvStore();
-            const authStore = useAuthStore();
-            const route = useRoute();
-
-            return {
-                theme, // Theme Object
-                navigationStore, // NavigationStore Object
-                envStore, // EnvironmentStore Object
-                authStore, // AuthorizationStore Object
-                route, // Route Object
-            };
-        },
-
-        data() {
-            return {
-                loadingAASDiscovery: false, // Variable to show the loading animation on the Connect Button for the AAS Discovery
-                loadingAASRegistry: false, // Variable to show the loading animation on the Connect Button for the AAS Registry
-                loadingSubmodelRegistry: false, // Variable to show the loading animation on the Connect Button for the Submodel Registry
-                aasDiscoveryURL: '', // Variable to store the AAS Discovery URL
-                aasRegistryURL: '', // Variable to store the AAS Registry URL
-                submodelRegistryURL: '', // Variable to store the Submodel Registry URL
-                AASRepoURL: '', // Variable to store the AAS Repository URL
-                SubmodelRepoURL: '', // Variable to store the Submodel Repository URL
-                ConceptDescriptionRepoURL: '', // Variable to store the Concept Description Repository URL
-                mainMenu: false, // Variable to show the Main Menu
-                mobileMenu: false, // Variable to show the Mobile Menu
-                dashboardAvailable: false, // Dashboard Availability
-                endpointConfigAvailable: true,
-                drawerVisibility: true, // Variable to show the AAS List Drawer
-            };
-        },
-
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-
-            // get snackbar data from store
-            Snackbar() {
-                return this.navigationStore.getSnackbar;
-            },
-
-            // to check if the MainWindow is the current Route
-            showAASList() {
-                return ['MainWindow', 'AASViewer'].includes(this.route.name as string);
-            },
-
-            // get Drawer State from store
-            drawerState() {
-                // Computed Property to control the state of the Navigation Drawer (true -> collapsed, false -> extended)
-                return this.navigationStore.getDrawerState;
-            },
-
-            // Get the Env Variable for the AAS Discovery URL from the store
-            EnvAASDiscoveryPath() {
-                return this.envStore.getEnvAASDiscoveryPath;
-            },
+    // Vue Router
+    const route = useRoute();
 
-            // Get the Env Variable for the AAS Registry URL from the store
-            EnvAASRegistryPath() {
-                return this.envStore.getEnvAASRegistryPath;
-            },
-
-            // Get the Env Variable for the Submodel Registry URL from the store
-            EnvSubmodelRegistryPath() {
-                return this.envStore.getEnvSubmodelRegistryPath;
-            },
-
-            // Get the Env Variable for the AAS Repo URL from the store
-            EnvAASRepoPath() {
-                return this.envStore.getEnvAASRepoPath;
-            },
-
-            // Get the Env Variable for the Submodel Repo URL from the store
-            EnvSubmodelRepoPath() {
-                return this.envStore.getEnvSubmodelRepoPath;
-            },
-
-            // Get the Env Variable for the Concept Description Repo URL from the store
-            EnvConceptDescriptionRepoPath() {
-                return this.envStore.getEnvConceptDescriptionRepoPath;
-            },
-
-            // Get the Env Variable for the logo path from the store
-            LogoPath() {
-                if (this.isDark && this.envStore.getEnvLogoDarkPath.trim().length > 0) {
-                    return this.envStore.getEnvLogoDarkPath;
-                } else {
-                    return this.envStore.getEnvLogoLightPath;
-                }
-            },
-
-            getEndpointConfigAvailable() {
-                return this.envStore.getEndpointConfigAvailable;
-            },
-
-            dashboardServicePath() {
-                return this.envStore.getEnvDashboardServicePath;
-            },
-
-            // Determine if Mobile Menu should be shown
-            showMobileMenu() {
-                let showMenu = false;
-                if (this.isMobile && !this.mainMenu) {
-                    showMenu = true;
-                }
-                return showMenu;
-            },
+    // Composables
+    const { checkDashboardAvailability } = useDashboardHandling();
 
-            // Determine if Auto-Sync should be shown
-            showAutoSync() {
-                let showAutoSync = false;
-                if (
-                    this.route.name === 'MainWindow' ||
-                    this.route.name === 'AASList' ||
-                    this.route.name === 'SubmodelList' ||
-                    this.route.name === 'ComponentVisualization' ||
-                    this.route.name === 'AASViewer'
-                ) {
-                    showAutoSync = true;
-                }
-                return showAutoSync;
-            },
+    // Stores
+    const navigationStore = useNavigationStore();
+    const envStore = useEnvStore();
+    const authStore = useAuthStore();
 
-            // get the keycloak authStatus from the store
-            authStatus() {
-                return this.authStore.getAuthStatus ? 'Authenticated' : 'Not Authenticated';
-            },
+    // Vuetify
+    const theme = useTheme();
 
-            // Determine if Authorization is enabled
-            isAuthEnabled() {
-                return this.authStore.getAuthEnabled;
-            },
+    // Reactive BaSyx Components Configurations
+    const basyxComponents = reactive<Record<RepositoryKey, BaSyxComponent>>({
+        AASDiscovery: {
+            url: ref(navigationStore.getAASDiscoveryURL), // Ensure the getter is invoked
+            loading: ref(false),
+            connect: () => connectComponent('AASDiscovery'),
+            label: 'AAS Discovery URL',
         },
-
-        watch: {
-            // Watch for changes in the Snackbar Object and close it after the Timeout
-            Snackbar() {
-                if (this.Snackbar.status) {
-                    setTimeout(() => this.closeSnackbar(), this.Snackbar.timeout);
-                }
-            },
-
-            drawerState() {
-                this.drawerVisibility = this.drawerState;
-            },
+        AASRegistry: {
+            url: ref(navigationStore.getAASRegistryURL),
+            loading: ref(false),
+            connect: () => connectComponent('AASRegistry'),
+            label: 'AAS Registry URL',
         },
+        SubmodelRegistry: {
+            url: ref(navigationStore.getSubmodelRegistryURL),
+            loading: ref(false),
+            connect: () => connectComponent('SubmodelRegistry'),
+            label: 'Submodel Registry URL',
+        },
+        AASRepo: {
+            url: ref(navigationStore.getAASRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('AASRepo'),
+            label: 'AAS Repository URL',
+        },
+        SubmodelRepo: {
+            url: ref(navigationStore.getSubmodelRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('SubmodelRepo'),
+            label: 'Submodel Repository URL',
+        },
+        ConceptDescriptionRepo: {
+            url: ref(navigationStore.getConceptDescriptionRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('ConceptDescriptionRepo'),
+            label: 'Concept Description Repository URL',
+        },
+    });
 
-        mounted() {
-            this.isDashboardAvailable();
-            this.endpointConfigAvailable = this.getEndpointConfigAvailable;
-            // check the local storage for a saved theme preference
-            let theme = localStorage.getItem('theme');
-            if (theme) {
-                if (theme == 'dark' || theme == 'light') {
-                    this.theme.global.name.value = theme;
-                } else {
-                    // sets the Theme according to the Users preferred Theme
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        this.theme.global.name.value = 'dark';
-                    } else {
-                        this.theme.global.name.value = 'light';
-                    }
-                }
-            } else {
-                // sets the Theme according to the Users preferred Theme
-                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                    this.theme.global.name.value = 'dark';
-                } else {
-                    this.theme.global.name.value = 'light';
-                }
-            }
-
-            // auto connect to aas discovery that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let aasDiscoveryURL = window.localStorage.getItem('aasDiscoveryURL');
-                if (aasDiscoveryURL) {
-                    this.aasDiscoveryURL = aasDiscoveryURL;
-                    this.connectToAASDiscovery();
-                    // console.log('DiscoveryURL was found in local storage', DiscoveryURL);
-                }
-            }
-
-            if (!this.aasDiscoveryURL && this.EnvAASDiscoveryPath && this.EnvAASDiscoveryPath != '') {
-                this.aasDiscoveryURL = this.EnvAASDiscoveryPath;
-                this.connectToAASDiscovery();
-            }
-
-            // auto connect to aas registry that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let aasRegistryURL = window.localStorage.getItem('aasRegistryURL');
-                if (aasRegistryURL) {
-                    this.aasRegistryURL = aasRegistryURL;
-                    this.connectToAASRegistry();
-                    // console.log('RegistryURL was found in local storage', RegistryURL);
-                }
-            }
-
-            if (!this.aasRegistryURL && this.EnvAASRegistryPath && this.EnvAASRegistryPath != '') {
-                this.aasRegistryURL = this.EnvAASRegistryPath;
-                this.connectToAASRegistry();
-            }
-
-            // auto connect to submodel registry that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let submodelRegistryURL = window.localStorage.getItem('submodelRegistryURL');
-                if (submodelRegistryURL) {
-                    this.submodelRegistryURL = submodelRegistryURL;
-                    this.connectToSubmodelRegistry();
-                    // console.log('SubmodelRegistryURL was found in local storage', SubmodelRegistryURL);
-                }
-            }
-            if (!this.submodelRegistryURL && this.EnvSubmodelRegistryPath && this.EnvSubmodelRegistryPath != '') {
-                this.submodelRegistryURL = this.EnvSubmodelRegistryPath;
-                this.connectToSubmodelRegistry();
+    // Data
+    const mainMenu = ref(false); // Variable to show the Main Menu
+    const mobileMenu = ref(false); // Variable to show the Mobile Menu
+    const dashboardAvailable = ref(false); // Dashboard Availability
+    const endpointConfigAvailable = ref(envStore.getEndpointConfigAvailable);
+    const drawerVisibility = ref(true); // Variable to show the AAS List Drawer
+
+    // Computed Properties
+    const isMobile = computed(() => navigationStore.getIsMobile);
+    const isDark = computed(() => theme.global.current.value.dark);
+    const Snackbar = computed(() => navigationStore.getSnackbar);
+    const showAASList = computed(() => ['MainWindow', 'AASViewer'].includes(route.name as string));
+    const drawerState = computed(() => navigationStore.getDrawerState);
+    const EnvAASDiscoveryPath = computed(() => envStore.getEnvAASDiscoveryPath);
+    const EnvAASRegistryPath = computed(() => envStore.getEnvAASRegistryPath);
+    const EnvSubmodelRegistryPath = computed(() => envStore.getEnvSubmodelRegistryPath);
+    const EnvAASRepoPath = computed(() => envStore.getEnvAASRepoPath);
+    const EnvSubmodelRepoPath = computed(() => envStore.getEnvSubmodelRepoPath);
+    const EnvConceptDescriptionRepoPath = computed(() => envStore.getEnvConceptDescriptionRepoPath);
+    const LogoPath = computed(() => {
+        if (isDark.value && envStore.getEnvLogoDarkPath.trim().length > 0) {
+            return envStore.getEnvLogoDarkPath;
+        } else {
+            return envStore.getEnvLogoLightPath;
+        }
+    });
+    const showMobileMenu = computed(() => isMobile.value && !mainMenu.value);
+    const showAutoSync = computed(() => {
+        return (
+            route.name === 'MainWindow' ||
+            route.name === 'AASList' ||
+            route.name === 'SubmodelList' ||
+            route.name === 'ComponentVisualization' ||
+            route.name === 'AASViewer'
+        );
+    });
+    const authStatus = computed(() => (authStore.getAuthStatus ? 'Authenticated' : 'Not Authenticated'));
+    const isAuthEnabled = computed(() => authStore.getAuthEnabled);
+
+    // Watch for changes in the Snackbar Object and close it after the Timeout
+    watch(
+        () => Snackbar.value,
+        () => {
+            if (Snackbar.value.status) {
+                setTimeout(() => closeSnackbar(), Snackbar.value.timeout);
             }
-
-            // auto connect to AAS Repository that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let aasRepoURL = window.localStorage.getItem('AASRepoURL');
-                if (aasRepoURL) {
-                    this.AASRepoURL = aasRepoURL;
-                    this.connectToEnvironment('AAS');
-                    // console.log('AASRepoURL was found in local storage', AASRepoURL);
+        }
+    );
+
+    watch(
+        () => drawerState.value,
+        () => {
+            drawerVisibility.value = drawerState.value;
+        }
+    );
+
+    onMounted(async () => {
+        dashboardAvailable.value = await checkDashboardAvailability();
+        applyTheme();
+
+        // Auto connect to BaSyx Components
+        Object.keys(basyxComponents).forEach((key) => {
+            const repoKey = key as RepositoryKey;
+            const storedURL = window.localStorage.getItem(repoKey);
+
+            // console.log('storedURL: ', storedURL, repoKey);
+
+            if (endpointConfigAvailable.value && storedURL) {
+                basyxComponents[repoKey].url = storedURL;
+                basyxComponents[repoKey].connect();
+            } else {
+                // Check environment path
+                let envPath = '';
+                switch (repoKey) {
+                    case 'AASDiscovery':
+                        envPath = EnvAASDiscoveryPath.value;
+                        break;
+                    case 'AASRegistry':
+                        envPath = EnvAASRegistryPath.value;
+                        break;
+                    case 'SubmodelRegistry':
+                        envPath = EnvSubmodelRegistryPath.value;
+                        break;
+                    case 'AASRepo':
+                        envPath = EnvAASRepoPath.value;
+                        break;
+                    case 'SubmodelRepo':
+                        envPath = EnvSubmodelRepoPath.value;
+                        break;
+                    case 'ConceptDescriptionRepo':
+                        envPath = EnvConceptDescriptionRepoPath.value;
+                        break;
+                    default:
+                        break;
                 }
-            }
 
-            if (!this.AASRepoURL && this.EnvAASRepoPath && this.EnvAASRepoPath != '') {
-                this.AASRepoURL = this.EnvAASRepoPath;
-                this.connectToEnvironment('AAS');
-            }
-
-            // auto connect to Submodel Repository that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let submodelRepoURL = window.localStorage.getItem('SubmodelRepoURL');
-                if (submodelRepoURL) {
-                    this.SubmodelRepoURL = submodelRepoURL;
-                    this.connectToEnvironment('Submodel');
-                    //     // console.log('SubmodelRepoURL was found in local storage', SubmodelRepoURL);
+                if (!basyxComponents[repoKey].url && envPath && envPath.trim() !== '') {
+                    basyxComponents[repoKey].url = envPath;
+                    basyxComponents[repoKey].connect();
                 }
             }
+        });
+    });
 
-            if (!this.SubmodelRepoURL && this.EnvSubmodelRepoPath && this.EnvSubmodelRepoPath != '') {
-                this.SubmodelRepoURL = this.EnvSubmodelRepoPath;
-                this.connectToEnvironment('Submodel');
-            }
+    function closeSnackbar() {
+        navigationStore.dispatchSnackbar({ status: false });
+    }
 
-            // auto connect to Concept Description Repository that was saved in local storage
-            if (this.endpointConfigAvailable) {
-                let conceptDescriptionRepoURL = window.localStorage.getItem('ConceptDescriptionRepoURL');
-                if (conceptDescriptionRepoURL) {
-                    this.ConceptDescriptionRepoURL = conceptDescriptionRepoURL;
-                    this.connectToEnvironment('ConceptDescription');
-                    // console.log('ConceptDescriptionRepoURL was found in local storage', ConceptDescriptionRepoURL);
+    function applyTheme() {
+        // check the local storage for a saved theme preference
+        const storedTheme = localStorage.getItem('theme');
+        if (storedTheme) {
+            if (storedTheme === 'dark' || storedTheme === 'light') {
+                theme.global.name.value = storedTheme;
+            } else {
+                // sets the Theme according to the Users preferred Theme
+                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    theme.global.name.value = 'dark';
+                } else {
+                    theme.global.name.value = 'light';
                 }
             }
-
-            if (
-                !this.ConceptDescriptionRepoURL &&
-                this.EnvConceptDescriptionRepoPath &&
-                this.EnvConceptDescriptionRepoPath != ''
-            ) {
-                this.ConceptDescriptionRepoURL = this.EnvConceptDescriptionRepoPath;
-                this.connectToEnvironment('ConceptDescription');
+        } else {
+            // sets the Theme according to the Users preferred Theme
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                theme.global.name.value = 'dark';
+            } else {
+                theme.global.name.value = 'light';
             }
-        },
-
-        methods: {
-            mergeProps,
-
-            // Function to connect to the AAS Discovery
-            connectToAASDiscovery() {
-                // console.log('connect to aas discovery: ' + this.aasDiscoveryURL);
-                if (this.aasDiscoveryURL != '') {
-                    this.loadingAASDiscovery = true;
-                    // check if aasDiscoveryURL includes "/lookup/shells" and add id if not (backward compatibility)
-                    if (!this.aasDiscoveryURL.includes('/lookup/shells')) {
-                        this.aasDiscoveryURL += '/lookup/shells';
-                    }
-
-                    /* Check for automatic connection is disabled. Only user entered connections in the frontend will be tested from now on (signed off Aaron Zielstorff, 13.04.2024) */
-                    // let path = this.aasDiscoveryURL;
-                    // let context = 'connecting to AAS Discovery'
-                    // let disableMessage = false;
-                    // this.getRequest(path, context, disableMessage).then((response: any) => {
-                    //     this.loadingAASDiscovery = false;
-                    //     if (response.success) {
-                    //         this.navigationStore.dispatchAASDiscoveryURL(this.aasDiscoveryURL); // save the URL in the NavigationStore
-                    //         window.localStorage.setItem('aasDiscoveryURL', this.aasDiscoveryURL); // save the URL in the local storage
-                    //     } else {
-                    //         this.navigationStore.dispatchAASDiscoveryURL(''); // clear the AAS Discovery URL in the NavigationStore
-                    //         window.localStorage.removeItem('aasDiscoveryURL'); // remove the URL from the local storage
-                    //     }
-                    // });
-
-                    /* Connection will be set directly in the centralized store (even if it could potentially be false -> wrong Docker config or old config data in the browsers local storage) */
-                    this.navigationStore.dispatchAASDiscoveryURL(this.aasDiscoveryURL); // save the URL in the NavigationStore
-                }
-            },
-
-            // Function to connect to the AAS Registry
-            connectToAASRegistry() {
-                // console.log('connect to aas registry: ' + this.aasRegistryURL);
-                if (this.aasRegistryURL != '') {
-                    this.loadingAASRegistry = true;
-                    // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
-                    if (!this.aasRegistryURL.includes('/shell-descriptors')) {
-                        this.aasRegistryURL += '/shell-descriptors';
-                    }
-
-                    /* Check for automatic connection is disabled. Only user entered connections in the frontend will be tested from now on (signed off Aaron Zielstorff, 13.04.2024) */
-                    // let path = this.aasRegistryURL;
-                    // let context = 'connecting to AAS Registry'
-                    // let disableMessage = false;
-                    // this.getRequest(path, context, disableMessage).then((response: any) => {
-                    //     this.loadingAASRegistry = false;
-                    //     if (response.success) {
-                    //         this.navigationStore.dispatchAASRegistryURL(this.aasRegistryURL, false); // save the URL in the NavigationStore
-                    //         window.localStorage.setItem('aasRegistryURL', this.aasRegistryURL); // save the URL in the local storage
-                    //     } else {
-                    //         this.navigationStore.dispatchAASRegistryURL('', false); // clear the AAS Registry URL in the NavigationStore
-                    //         window.localStorage.removeItem('aasRegistryURL'); // remove the URL from the local storage
-                    //     }
-                    // });
-
-                    /* Connection will be set directly in the centralized store (even if it could potentially be false -> wrong Docker config or old config data in the browsers local storage) */
-                    this.navigationStore.dispatchAASRegistryURL(this.aasRegistryURL, false); // save the URL in the NavigationStore
-                }
-            },
-
-            // Function to connect to the Submodel Registry
-            connectToSubmodelRegistry() {
-                // console.log('connect to submodel registry: ' + this.submodelRegistryURL);
-                if (this.submodelRegistryURL != '') {
-                    this.loadingSubmodelRegistry = true;
-                    // check if submodelRegistryURL includes "/submodel-descriptors" and add id if not (backward compatibility)
-                    if (!this.submodelRegistryURL.includes('/submodel-descriptors')) {
-                        this.submodelRegistryURL += '/submodel-descriptors';
-                    }
-
-                    /* Check for automatic connection is disabled. Only user entered connections in the frontend will be tested from now on (signed off Aaron Zielstorff, 13.04.2024) */
-                    // let path = this.submodelRegistryURL;
-                    // let context = 'connecting to Submodel Registry'
-                    // let disableMessage = false;
-                    // this.getRequest(path, context, disableMessage).then((response: any) => {
-                    //     this.loadingSubmodelRegistry = false;
-                    //     if (response.success) {
-                    //         this.navigationStore.dispatchSubmodelRegistryURL(this.submodelRegistryURL, false); // save the URL in the NavigationStore
-                    //         window.localStorage.setItem('submodelRegistryURL', this.submodelRegistryURL); // save the URL in the local storage
-                    //     } else {
-                    //         this.navigationStore.dispatchSubmodelRegistryURL('', false); // clear the Submodel Registry URL in the NavigationStore
-                    //         window.localStorage.removeItem('submodelRegistryURL'); // remove the URL from the local storage
-                    //     }
-                    // });
-
-                    /* Connection will be set directly in the centralized store (even if it could potentially be false -> wrong Docker config or old config data in the browsers local storage) */
-                    this.navigationStore.dispatchSubmodelRegistryURL(this.submodelRegistryURL, false); // save the URL in the NavigationStore
-                }
-            },
-
-            // Function to connect to the respective Repository
-            connectToEnvironment(RepoType: string) {
-                // console.log('connect to ' + RepoType + ' Repository: ' + (this as any)[RepoType + 'RepoURL']);
-                if ((this as any)[RepoType + 'RepoURL'] != '') {
-                    /* Check for automatic connection is disabled. Only user entered connections in the frontend will be tested from now on (signed off Aaron Zielstorff, 13.04.2024) */
-                    (this as any)['loading' + RepoType + 'Repo'] = true;
-                    // let path = (this as any)[RepoType + 'RepoURL'] + '?limit=1' + (RepoType == 'Submodel' ? '&level=core' : '');
-                    // let context = 'connecting to ' + RepoType + ' Repository'
-                    // let disableMessage = false;
-                    // this.getRequest(path, context, disableMessage).then((response: any) => {
-                    //     (this as any)['loading' + RepoType + 'Repo'] = false;
-                    //     if (response.success) {
-                    //         this.navigationStore.dispatchRepoURL(RepoType, (this as any)[RepoType + 'RepoURL']); // save the URL in the NavigationStore
-                    //         window.localStorage.setItem(RepoType + 'RepoURL', (this as any)[RepoType + 'RepoURL']); // save the URL in the local storage
-                    //     } else {
-                    //         this.navigationStore.dispatchRepoURL(RepoType, ''); // clear the URL in the NavigationStore
-                    //         window.localStorage.removeItem(RepoType + 'RepoURL'); // remove the URL from the local storage
-                    //     }
-                    // });
-
-                    /* Connection will be set directly in the centralized store (even if it could potentially be false -> wrong Docker config or old config data in the browsers local storage) */
-                    this.navigationStore.dispatchRepoURL(RepoType, (this as any)[RepoType + 'RepoURL']); // save the URL in the NavigationStore
-                }
-            },
-
-            // Function to close the Snackbar
-            closeSnackbar() {
-                this.navigationStore.dispatchSnackbar({ status: false });
-            },
-
-            extendSidebar() {
-                this.drawerVisibility = true;
-                this.navigationStore.dispatchDrawerState(true);
-            },
-
-            updateDrawerState(value: boolean) {
-                // console.log('updateDrawerState: ', value);
-                this.navigationStore.dispatchDrawerState(value);
-            },
-
-            isDashboardAvailable() {
-                if (!this.dashboardServicePath || this.dashboardServicePath == '') return;
-                // the path is this.dashboardServicePath but with /api/elements stripped and /test added
-                let path = this.dashboardServicePath.replace('/api/elements', '/test');
-                let context = 'checking if dashboard is available';
-                let disableMessage = true;
-                this.getRequest(path, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        this.dashboardAvailable = true;
-                    } else {
-                        this.dashboardAvailable = false;
-                    }
-                });
-            },
-            logout() {
-                this.authStore.getKeycloak?.logout();
-            },
-        },
-    });
+        }
+    }
+
+    function connectComponent(repoKey: keyof typeof basyxComponents) {
+        navigationStore.dispatchComponentURL(repoKey, basyxComponents[repoKey].url, false);
+    }
+
+    function extendSidebar() {
+        drawerVisibility.value = true;
+        navigationStore.dispatchDrawerState(true);
+    }
+
+    function updateDrawerState(value: boolean) {
+        // console.log('updateDrawerState: ', value);
+        navigationStore.dispatchDrawerState(value);
+    }
+
+    function logout() {
+        authStore.getKeycloak?.logout();
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/AutoSync.vue b/aas-web-ui/src/components/AppNavigation/AutoSync.vue
index dcb457e..3667991 100644
--- a/aas-web-ui/src/components/AppNavigation/AutoSync.vue
+++ b/aas-web-ui/src/components/AppNavigation/AutoSync.vue
@@ -66,69 +66,35 @@
     </v-btn>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import StatusSwitch from '@/components/AppNavigation/Settings/StatusSwitch.vue';
     import { useNavigationStore } from '@/store/NavigationStore';
-    import StatusSwitch from './Settings/StatusSwitch.vue';
 
-    export default defineComponent({
-        name: 'AutoSync',
-        components: {
-            StatusSwitch,
-        },
-        props: ['submodelObject'],
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
+    const autoSyncStatus = ref(navigationStore.getAutoSync ? navigationStore.getAutoSync.state : false);
+    const intervalTime = ref(1000);
 
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
+    const isMobile = computed(() => navigationStore.getIsMobile);
 
-        data() {
-            return {
-                autoSyncStatus: false, // Status of the auto-sync (true = active, false = inactive)
-                intervalTime: 1000, // Interval time for the auto-sync
-            };
-        },
+    // Checks if the input is smaller than 100ms and sets it to 100ms if it is
+    function checkMin(e: boolean) {
+        if (intervalTime.value < 100 && !e) intervalTime.value = 100;
+        if (!e) updateAutoSync();
+    }
 
-        computed: {
-            // Get the auto-sync state from the store
-            autoSync() {
-                return this.navigationStore.getAutoSync ? this.navigationStore.getAutoSync.state : false;
-            },
+    // Updates the auto-sync (+ interval) in the store
+    function updateAutoSync() {
+        navigationStore.dispatchUpdateAutoSync({
+            state: autoSyncStatus.value,
+            interval: intervalTime.value,
+        });
+    }
 
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-        },
-
-        mounted() {
-            this.autoSyncStatus = this.autoSync;
-        },
-
-        methods: {
-            // Checks if the input is smaller than 100ms and sets it to 100ms if it is
-            checkMin(e: boolean) {
-                if (this.intervalTime < 100 && !e) this.intervalTime = 100;
-                if (!e) this.updateAutoSync();
-            },
-
-            // Updates the auto-sync (+ interval) in the store
-            updateAutoSync() {
-                this.navigationStore.dispatchUpdateAutoSync({
-                    state: this.autoSyncStatus,
-                    interval: this.intervalTime,
-                });
-            },
-
-            // Toggles the auto-sync
-            toggleAutoSync() {
-                this.autoSyncStatus = !this.autoSyncStatus;
-                this.updateAutoSync();
-            },
-        },
-    });
+    // Toggles the auto-sync
+    function toggleAutoSync() {
+        autoSyncStatus.value = !autoSyncStatus.value;
+        updateAutoSync();
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/MainMenu.vue b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
index 9412c52..b6196f0 100644
--- a/aas-web-ui/src/components/AppNavigation/MainMenu.vue
+++ b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
@@ -2,17 +2,21 @@
     <v-container fluid class="pa-0">
         <v-card
             :min-width="isMobile || !endpointConfigAvailable ? 200 : 700"
-            :flat="isMobile ? true : false"
+            :flat="isMobile"
             :color="isMobile ? 'card' : 'navigationMenu'"
-            :style="{ 'border-style': isMobile ? '' : 'solid', 'border-width': isMobile ? '' : '1px' }">
+            :style="{
+                'border-style': isMobile ? '' : 'solid',
+                'border-width': isMobile ? '' : '1px',
+            }">
             <v-row>
+                <!-- Navigation Column -->
                 <v-col
                     :cols="isMobile || !endpointConfigAvailable ? 12 : 4"
                     :class="isMobile ? 'bg-card' : 'bg-navigationMenuSecondary'">
                     <v-card
                         variant="flat"
-                        style="border-radius: 0px"
                         class="pt-3"
+                        :style="{ borderRadius: '0px' }"
                         :color="isMobile ? 'card' : 'navigationMenuSecondary'">
                         <template v-if="!isMobile && endpointConfigAvailable">
                             <span class="mx-3 text-primary">General Settings</span>
@@ -47,148 +51,37 @@
                         </v-list>
                     </v-card>
                 </v-col>
+
+                <!-- Configuration Column -->
                 <v-col
                     v-if="endpointConfigAvailable"
                     :cols="isMobile ? 12 : 8"
                     :class="isMobile ? 'pt-0 mb-2 px-6 bg-card' : 'pt-4 bg-navigationMenu'">
-                    <!-- Configure AAS Discovery URL -->
-                    <v-text-field
-                        v-model="aasDiscoveryURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="AAS Discovery URL"
-                        @keydown.enter="connectToAASDiscovery()">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingAASDiscovery"
-                                @click.stop="connectToAASDiscovery()"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
-                    <!-- Configure AAS Registry URL -->
-                    <v-text-field
-                        v-model="aasRegistryURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="AAS Registry URL"
-                        @keydown.enter="connectToAASRegistry()">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingAASRegistry"
-                                @click.stop="connectToAASRegistry()"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
-                    <!-- Configure Submodel Registry URL -->
-                    <v-text-field
-                        v-model="submodelRegistryURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="Submodel Registry URL"
-                        @keydown.enter="connectToSubmodelRegistry()">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingSubmodelRegistry"
-                                @click.stop="connectToSubmodelRegistry()"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
-                    <!-- Configure AAS Repository URL -->
-                    <v-text-field
-                        v-model="AASRepoURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="AAS Repository URL"
-                        @keydown.enter="connectToEnvironment('AAS')">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingAASRepo"
-                                @click.stop="connectToEnvironment('AAS')"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
-                    <!-- Configure Submodel Repository URL -->
-                    <v-text-field
-                        v-model="SubmodelRepoURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="Submodel Repository URL"
-                        @keydown.enter="connectToEnvironment('Submodel')">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingSubmodelRepo"
-                                @click.stop="connectToEnvironment('Submodel')"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
-                    <!-- Configure Concept Description Repository URL -->
-                    <v-text-field
-                        v-model="ConceptDescriptionRepoURL"
-                        variant="outlined"
-                        density="compact"
-                        hide-details
-                        class="my-3"
-                        :class="isMobile ? '' : 'mr-3'"
-                        label="Concept Description Repository URL"
-                        @keydown.enter="connectToEnvironment('ConceptDescription')">
-                        <template #append-inner>
-                            <v-btn
-                                size="small"
-                                variant="elevated"
-                                color="primary"
-                                class="text-buttonText"
-                                style="right: -4px"
-                                :loading="loadingConceptDescriptionRepo"
-                                @click.stop="connectToEnvironment('ConceptDescription')"
-                                >Connect</v-btn
-                            >
-                        </template>
-                    </v-text-field>
+                    <!-- Iterate over repositories to generate form fields -->
+                    <div v-for="(repo, key) in basyxComponents" :key="key">
+                        <v-text-field
+                            v-model="repo.url"
+                            :label="repo.label"
+                            variant="outlined"
+                            density="compact"
+                            hide-details
+                            class="my-3"
+                            :class="isMobile ? '' : 'mr-3'"
+                            @keydown.enter="repo.connect">
+                            <template #append-inner>
+                                <v-btn
+                                    size="small"
+                                    variant="elevated"
+                                    color="primary"
+                                    class="text-buttonText"
+                                    style="right: -4px"
+                                    :loading="repo.loading"
+                                    @click.stop="repo.connect">
+                                    Connect
+                                </v-btn>
+                            </template>
+                        </v-text-field>
+                    </div>
                 </v-col>
             </v-row>
             <!-- Platform I 4.0 Logo -->
@@ -205,259 +98,157 @@
     </v-container>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import type { BaSyxComponent, RepositoryKey } from '@/types/BaSyx';
+    import { computed, onMounted, reactive, ref, watch } from 'vue';
     import { useRoute } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import DashboardHandling from '@/mixins/DashboardHandling';
-    import RequestHandling from '@/mixins/RequestHandling';
+    import { useDashboardHandling } from '@/composables/DashboardHandling';
+    import { useRequestHandling } from '@/composables/RequestHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
 
-    export default defineComponent({
-        name: 'MainMenu',
-        mixins: [RequestHandling, DashboardHandling],
-
-        setup() {
-            const theme = useTheme();
-            const navigationStore = useNavigationStore();
-            const aasStore = useAASStore();
-            const envStore = useEnvStore();
-            const route = useRoute();
-
-            return {
-                theme, // Theme Object
-                navigationStore, // NavigationStore Object
-                aasStore, // AASStore Object
-                envStore, // EnvironmentStore Object
-                route, // Route Object
-            };
+    // Vue Router
+    const route = useRoute();
+
+    // Composables
+    const { checkDashboardAvailability } = useDashboardHandling();
+    const { getRequest } = useRequestHandling();
+
+    // Stores
+    const navigationStore = useNavigationStore();
+    const aasStore = useAASStore();
+    const envStore = useEnvStore();
+
+    // Vuetify
+    const theme = useTheme();
+
+    // Emit
+    const emit = defineEmits<{
+        (e: 'closeMenu'): void;
+    }>();
+
+    // Reactive BaSyx Components Configurations
+    const basyxComponents = reactive<Record<RepositoryKey, BaSyxComponent>>({
+        AASDiscovery: {
+            url: ref(navigationStore.getAASDiscoveryURL), // Ensure the getter is invoked
+            loading: ref(false),
+            connect: () => connectComponent('AASDiscovery'),
+            label: 'AAS Discovery URL',
+            pathCheck: '/lookup/shells',
+            additionalParams: () => `?limit=1`,
         },
-
-        data() {
-            return {
-                aasDiscoveryURL: '', // AAS Discovery Service URL
-                aasRegistryURL: '', // AAS Registry URL
-                submodelRegistryURL: '', // Submodel Registry URL
-                AASRepoURL: '', // AAS Repository URL
-                SubmodelRepoURL: '', // Submodel Repository URL
-                ConceptDescriptionRepoURL: '', // Concept Description Repository URL
-                loadingAASDiscovery: false, // Loading State of the AAS Discovery Service Connection
-                loadingAASRegistry: false, // Loading State of the AAS Registry Connection
-                loadingSubmodelRegistry: false, // Loading State of the Submodel Registry Connection
-                loadingAASRepo: false, // Loading State of the AAS Repository Connection
-                loadingSubmodelRepo: false, // Loading State of the Submodel Repository Connection
-                loadingConceptDescriptionRepo: false, // Loading State of the Concept Description Repository Connection
-                dashboardAvailable: false, // Dashboard Availability
-                endpointConfigAvailable: true,
-            };
+        AASRegistry: {
+            url: ref(navigationStore.getAASRegistryURL),
+            loading: ref(false),
+            connect: () => connectComponent('AASRegistry'),
+            label: 'AAS Registry URL',
+            pathCheck: '/shell-descriptors',
+            additionalParams: () => `?limit=1`,
         },
-
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-
-            // get AAS Discovery URL from Store
-            aasDiscoveryServerURL() {
-                return this.navigationStore.getAASDiscoveryURL;
-            },
-
-            // get AAS Registry URL from Store
-            aasRegistryServerURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-
-            // get Submodel Registry URL from Store
-            submodelRegistryServerURL() {
-                return this.navigationStore.getSubmodelRegistryURL;
-            },
-
-            // Get the AAS Repository URL from the Store
-            aasRepoURL() {
-                return this.navigationStore.getAASRepoURL;
-            },
-
-            // Get the Submodel Repository URL from the Store
-            submodelRepoURL() {
-                return this.navigationStore.getSubmodelRepoURL;
-            },
-
-            // Get the Concept Description Repository URL from the Store
-            conceptDescriptionRepoURL() {
-                return this.navigationStore.getConceptDescriptionRepoURL;
-            },
-
-            getEndpointConfigAvailable() {
-                return this.envStore.getEndpointConfigAvailable;
-            },
-
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-
-            // get the current route name
-            currentRoute() {
-                return this.route.name;
-            },
+        SubmodelRegistry: {
+            url: ref(navigationStore.getSubmodelRegistryURL),
+            loading: ref(false),
+            connect: () => connectComponent('SubmodelRegistry'),
+            label: 'Submodel Registry URL',
+            pathCheck: '/submodel-descriptors',
+            additionalParams: () => `?limit=1`,
         },
-
-        watch: {
-            // watch for route changes (name) and reset selected AAS and selected Node
-            currentRoute() {
-                this.aasStore.dispatchSelectedAAS({});
-            },
+        AASRepo: {
+            url: ref(navigationStore.getAASRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('AASRepo'),
+            label: 'AAS Repository URL',
+            additionalParams: () => `?limit=1`,
         },
-
-        mounted() {
-            this.aasDiscoveryURL = this.aasDiscoveryServerURL;
-            this.aasRegistryURL = this.aasRegistryServerURL;
-            this.submodelRegistryURL = this.submodelRegistryServerURL;
-            this.AASRepoURL = this.aasRepoURL;
-            this.SubmodelRepoURL = this.submodelRepoURL;
-            this.ConceptDescriptionRepoURL = this.conceptDescriptionRepoURL;
-            this.endpointConfigAvailable = this.getEndpointConfigAvailable;
-            this.isDashboardAvailable();
+        SubmodelRepo: {
+            url: ref(navigationStore.getSubmodelRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('SubmodelRepo'),
+            label: 'Submodel Repository URL',
+            additionalParams: () => `?limit=1&level=core`,
         },
+        ConceptDescriptionRepo: {
+            url: ref(navigationStore.getConceptDescriptionRepoURL),
+            loading: ref(false),
+            connect: () => connectComponent('ConceptDescriptionRepo'),
+            label: 'Concept Description Repository URL',
+            additionalParams: () => `?limit=1`,
+        },
+    });
 
-        methods: {
-            // Function to connect to the AAS Discovery Service
-            connectToAASDiscovery() {
-                // console.log('connect to aas discovery service: ' + this.aasDiscoveryServiceURL);
-                if (this.aasDiscoveryURL != '') {
-                    this.loadingAASDiscovery = true;
-                    // check if aasDiscoveryURL includes "/lookup/shells" and add id if not (backward compatibility)
-                    if (!this.aasDiscoveryURL.includes('/lookup/shells')) {
-                        this.aasDiscoveryURL += '/lookup/shells';
-                    }
-                    let path = this.aasDiscoveryURL;
-                    let context = 'connecting to AAS Discovery Service';
-                    let disableMessage = false;
-                    this.getRequest(path, context, disableMessage).then((response: any) => {
-                        this.loadingAASDiscovery = false;
-                        if (response.success) {
-                            this.navigationStore.dispatchAASDiscoveryURL(this.aasDiscoveryURL); // save the URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.setItem('aasDiscoveryURL', this.aasDiscoveryURL); // save the URL in the local storage
-                            }
-                        } else {
-                            this.navigationStore.dispatchAASDiscoveryURL(''); // clear the AAS Discovery Service URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.removeItem('aasDiscoveryURL'); // remove the URL from the local storage
-                            }
-                        }
-                    });
-                }
-            },
+    // Additional States
+    const dashboardAvailable = ref(false);
+    const endpointConfigAvailable = ref(envStore.getEndpointConfigAvailable);
 
-            // Function to connect to the AAS Registry
-            connectToAASRegistry() {
-                // console.log('connect to aas registry: ' + this.aasRegistryURL);
-                if (this.aasRegistryURL != '') {
-                    this.loadingAASRegistry = true;
-                    // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
-                    if (!this.aasRegistryURL.includes('/shell-descriptors')) {
-                        this.aasRegistryURL += '/shell-descriptors';
-                    }
-                    let path = this.aasRegistryURL;
-                    let context = 'connecting to AAS Registry';
-                    let disableMessage = false;
-                    this.getRequest(path, context, disableMessage).then((response: any) => {
-                        this.loadingAASRegistry = false;
-                        if (response.success) {
-                            this.navigationStore.dispatchAASRegistryURL(this.aasRegistryURL); // save the URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.setItem('aasRegistryURL', this.aasRegistryURL); // save the URL in the local storage
-                            }
-                        } else {
-                            this.navigationStore.dispatchAASRegistryURL(''); // clear the AAS Registry URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.removeItem('aasRegistryURL'); // remove the URL from the local storage
-                            }
-                        }
-                    });
-                }
-            },
+    // Computed Properties
+    const isMobile = computed(() => navigationStore.getIsMobile); // Check if the current Device is a Mobile Device
+    const isDark = computed(() => theme.global.current.value.dark); // Check if the current Theme is dark
+    const currentRoute = computed(() => route.name); // get the current route name
 
-            // Function to connect to the Submodel Registry
-            connectToSubmodelRegistry() {
-                // console.log('connect to submodel registry: ' + this.submodelRegistryURL);
-                if (this.submodelRegistryURL != '') {
-                    this.loadingSubmodelRegistry = true;
-                    // check if submodelRegistryURL includes "/submodel-descriptors" and add id if not (backward compatibility)
-                    if (!this.submodelRegistryURL.includes('/submodel-descriptors')) {
-                        this.submodelRegistryURL += '/submodel-descriptors';
-                    }
-                    let path = this.submodelRegistryURL;
-                    let context = 'connecting to Submodel Registry';
-                    let disableMessage = false;
-                    this.getRequest(path, context, disableMessage).then((response: any) => {
-                        this.loadingSubmodelRegistry = false;
-                        if (response.success) {
-                            this.navigationStore.dispatchSubmodelRegistryURL(this.submodelRegistryURL); // save the URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.setItem('submodelRegistryURL', this.submodelRegistryURL); // save the URL in the local storage
-                            }
-                        } else {
-                            this.navigationStore.dispatchSubmodelRegistryURL(''); // clear the Submodel Registry URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.removeItem('submodelRegistryURL'); // remove the URL from the local storage
-                            }
-                        }
-                    });
-                }
-            },
-
-            // Function to connect to the respective Repository
-            connectToEnvironment(RepoType: string) {
-                // console.log('connect to ' + RepoType + ' Repository: ' + (this as any)[RepoType + 'RepoURL']);
-                if ((this as any)[RepoType + 'RepoURL'] != '') {
-                    (this as any)['loading' + RepoType + 'Repo'] = true;
-                    let path =
-                        (this as any)[RepoType + 'RepoURL'] +
-                        '?limit=1' +
-                        (RepoType == 'Submodel' ? '&level=core' : '');
-                    let context = 'connecting to ' + RepoType + ' Repository';
-                    let disableMessage = false;
-                    this.getRequest(path, context, disableMessage).then((response: any) => {
-                        (this as any)['loading' + RepoType + 'Repo'] = false;
-                        if (response.success) {
-                            this.navigationStore.dispatchRepoURL(RepoType, (this as any)[RepoType + 'RepoURL']); // save the URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.setItem(RepoType + 'RepoURL', (this as any)[RepoType + 'RepoURL']); // save the URL in the local storage
-                            }
-                        } else {
-                            this.navigationStore.dispatchRepoURL(RepoType, ''); // clear the URL in the NavigationStore
-                            if (this.endpointConfigAvailable) {
-                                window.localStorage.removeItem(RepoType + 'RepoURL'); // remove the URL from the local storage
-                            }
-                        }
-                    });
-                }
-            },
+    watch(currentRoute, () => {
+        aasStore.dispatchSelectedAAS({}); // reset selected AAS
+    });
 
-            // Function to close the menu
-            closeMenu() {
-                this.$emit('closeMenu');
-            },
+    onMounted(async () => {
+        dashboardAvailable.value = await checkDashboardAvailability();
+    });
 
-            isDashboardAvailable() {
-                if (!this.dashboardServicePath || this.dashboardServicePath == '') return;
-                // the path is this.dashboardServicePath but with /api/elements stripped and /test added
-                let path = this.dashboardServicePath.replace('/api/elements', '/test');
-                let context = 'checking if dashboard is available';
-                let disableMessage = true;
-                this.getRequest(path, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        this.dashboardAvailable = true;
-                    } else {
-                        this.dashboardAvailable = false;
+    // Functions
+    async function connectComponent(repoKey: keyof typeof basyxComponents) {
+        const repo = basyxComponents[repoKey];
+        if (repo.url && repo.url.trim() !== '') {
+            repo.loading = true;
+            let path = repo.url;
+
+            // Append path check for backward compatibility if defined
+            if (repo.pathCheck && !path.includes(repo.pathCheck)) {
+                path += repo.pathCheck;
+            }
+
+            // Append additional parameters if any
+            if (repo.additionalParams) {
+                path += repo.additionalParams(repoKey);
+            }
+
+            const context = `connecting to ${repo.label}`;
+            const disableMessage = false;
+
+            try {
+                const response = await getRequest(path, context, disableMessage);
+                repo.loading = false;
+
+                if (response.success) {
+                    // Dispatch to the navigation store
+                    navigationStore.dispatchComponentURL(repoKey, repo.url);
+
+                    // Save to localStorage if endpoint config is available
+                    if (endpointConfigAvailable.value) {
+                        // console.log(`Saving ${repoKey} URL to localStorage:`, repo.url);
+                        window.localStorage.setItem(repoKey, repo.url);
                     }
-                });
-            },
-        },
-    });
+                } else {
+                    // Clear the URL in the navigation store
+                    navigationStore.dispatchComponentURL(repoKey, '');
+
+                    // Remove from localStorage if endpoint config is available
+                    if (endpointConfigAvailable.value) {
+                        // console.log(`Removing ${repoKey} URL from localStorage:`, repo.url);
+                        window.localStorage.removeItem(repoKey);
+                    }
+                }
+            } catch (error) {
+                repo.loading = false;
+                console.error(`Error connecting to ${repo.label}:`, error);
+                // Optionally, handle the error (e.g., show a notification)
+            }
+        } else {
+            console.warn(`Repository URL for ${repoKey} is not defined or empty.`);
+        }
+    }
+
+    function closeMenu() {
+        emit('closeMenu');
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue b/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
deleted file mode 100644
index a947f60..0000000
--- a/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-    <v-btn variant="plain">
-        <v-icon size="x-large">mdi-plus</v-icon>
-        <v-tooltip activator="parent" open-delay="600" location="bottom">Add existing AAS to AAS Registry</v-tooltip>
-        <v-dialog v-model="RegisterAASDialog" activator="parent" width="600">
-            <v-card>
-                <v-card-title>
-                    <span class="text-subtile-1">Add existing AAS to AAS Registry</span>
-                </v-card-title>
-                <v-divider></v-divider>
-                <v-card-text>
-                    <!-- Endpoint Textfield of the AAS to be registered -->
-                    <v-text-field
-                        v-model="aasEndpoint"
-                        variant="outlined"
-                        density="compact"
-                        label="AAS Endpoint"
-                        hint="E.g. http://localhost:4000/shells/<UTF8_BASE64_encoded_aasIdentification>"
-                        persistent-hint
-                        clearable></v-text-field>
-                </v-card-text>
-                <v-divider></v-divider>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn size="small" variant="outlined" color="primary" @click="RegisterAASDialog = false"
-                        >Cancel</v-btn
-                    >
-                    <v-btn
-                        size="small"
-                        class="text-buttonText"
-                        variant="elevated"
-                        color="primary"
-                        :loading="registrationLoading"
-                        @click="addAAS()"
-                        >Add</v-btn
-                    >
-                </v-card-actions>
-                <v-divider></v-divider>
-                <!-- aasIdentification converter -->
-                <v-expansion-panels>
-                    <v-expansion-panel title="Need help encoding the aasIdentification?">
-                        <v-expansion-panel-text class="px-2">
-                            <v-card-text>
-                                <v-row>
-                                    <v-col cols="6">
-                                        <v-text-field
-                                            v-model="aasIdentification"
-                                            variant="outlined"
-                                            density="compact"
-                                            label="aasIdentification"
-                                            clearable
-                                            hide-details
-                                            class="mb-2"
-                                            @change="encodeIdentification()"></v-text-field>
-                                    </v-col>
-                                    <v-col cols="6">
-                                        <v-text-field
-                                            v-model="EncodedAasIdentification"
-                                            variant="outlined"
-                                            density="compact"
-                                            label="Encoded Identification"
-                                            hide-details
-                                            class="mb-2"
-                                            readonly>
-                                            <template #append-inner>
-                                                <v-btn
-                                                    size="small"
-                                                    variant="elevated"
-                                                    color="primary"
-                                                    class="text-buttonText"
-                                                    style="right: -4px"
-                                                    @click.stop="copyToClipboard()">
-                                                    <v-icon>mdi-clipboard-file-outline</v-icon>
-                                                </v-btn>
-                                            </template>
-                                        </v-text-field>
-                                    </v-col>
-                                </v-row>
-                            </v-card-text>
-                        </v-expansion-panel-text>
-                    </v-expansion-panel>
-                </v-expansion-panels>
-            </v-card>
-        </v-dialog>
-    </v-btn>
-</template>
-
-<script lang="ts">
-    import { defineComponent } from 'vue';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-    import { useNavigationStore } from '@/store/NavigationStore';
-
-    export default defineComponent({
-        name: 'RegisterAAS',
-        mixins: [RequestHandling, SubmodelElementHandling],
-
-        setup() {
-            const navigationStore = useNavigationStore();
-
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
-
-        data() {
-            return {
-                RegisterAASDialog: false, // Dialog State Handler
-                registrationLoading: false, // Loading State Handler
-                aasEndpoint: '', // AAS Endpoint
-                aasIdentification: '', // AAS Identification
-                EncodedAasIdentification: '', // Encoded AAS Identification
-            };
-        },
-
-        computed: {
-            // get AAS Registry URL from Store
-            aasRegistryURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-        },
-
-        methods: {
-            // Function to add a new AAS to the AAS Registry
-            addAAS() {
-                this.registrationLoading = true;
-                let path = this.aasEndpoint;
-                let context = 'retrieving to be registered AAS';
-                let disableMessage = false;
-                this.getRequest(path, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        // execute if the AAS exists
-                        let aas = response.data;
-
-                        // add method call here to create json content for registering AAS
-                        const createRegisterContent = (fetchedAAS: any) => {
-                            return {
-                                ...fetchedAAS, // Spread to include all existing properties
-                                endpoints: [
-                                    // Add or update the endpoints
-                                    {
-                                        interface: 'HTTP-REST',
-                                        protocolInformation: {
-                                            href: this.aasEndpoint,
-                                            endpointProtocol: this.aasEndpoint.split(':')[0],
-                                            endpointProtocolVersion: ['1.1'],
-                                        },
-                                    },
-                                ],
-                            };
-                        };
-
-                        // Create the registration content
-                        let registrationContent = createRegisterContent(aas);
-                        // remove administration key
-                        delete registrationContent['administration'];
-                        // check if aasRegistryURL includes "/shell-descriptors" and add id if not (backward compatibility)
-                        if (!this.aasRegistryURL.includes('/shell-descriptors')) {
-                            this.aasRegistryURL += '/shell-descriptors';
-                        }
-                        let path = this.aasRegistryURL;
-                        let content = JSON.stringify(registrationContent);
-                        let headers = new Headers();
-                        headers.append('Content-Type', 'application/json');
-                        let context = 'registering AAS';
-                        let disableMessage = false;
-                        this.postRequest(path, content, headers, context, disableMessage).then((response: any) => {
-                            if (response.success) {
-                                // execute if the AAS is successfully registered
-                                this.navigationStore.dispatchTriggerAASListReload(true); // trigger AAS List reload
-                                this.RegisterAASDialog = false; // close dialog
-                            }
-                        });
-                    }
-                    this.registrationLoading = false;
-                });
-            },
-            // Function to encode the AAS Identification
-            encodeIdentification() {
-                this.EncodedAasIdentification = this.URLEncode(this.aasIdentification);
-            },
-            // Function to copy the encoded AAS Identification to the clipboard
-            copyToClipboard() {
-                navigator.clipboard.writeText(this.EncodedAasIdentification);
-                this.navigationStore.dispatchSnackbar({
-                    status: true,
-                    timeout: 2000,
-                    color: 'success',
-                    btnColor: 'buttonText',
-                    text: 'Path copied to Clipboard.',
-                });
-            },
-        },
-    });
-</script>
diff --git a/aas-web-ui/src/components/AppNavigation/Settings.vue b/aas-web-ui/src/components/AppNavigation/Settings.vue
index 9c32222..0240042 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings.vue
@@ -15,30 +15,12 @@
     </v-menu>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { computed } from 'vue';
     import { useNavigationStore } from '@/store/NavigationStore';
     import ThemeSwitch from './Settings/ThemeSwitch.vue';
 
-    export default defineComponent({
-        name: 'Settings',
-        components: {
-            ThemeSwitch,
-        },
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
-
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
-
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-        },
-    });
+    const isMobile = computed(() => navigationStore.getIsMobile);
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue b/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
index f711a2f..c443a9d 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
@@ -8,45 +8,16 @@
         @change="updateStatusCheck()"></v-switch>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { ref } from 'vue';
     import { useNavigationStore } from '@/store/NavigationStore';
 
-    export default defineComponent({
-        name: 'StatusSwitch',
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
+    const statusCheckStatus = ref(navigationStore.getStatusCheck);
 
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
-
-        data() {
-            return {
-                statusCheckStatus: false, // Status of the status-check (true = active, false = inactive)
-            };
-        },
-
-        computed: {
-            // get the status-check state from the store
-            statusCheck() {
-                return this.navigationStore.getStatusCheck;
-            },
-        },
-
-        mounted() {
-            this.statusCheckStatus = this.statusCheck;
-        },
-
-        methods: {
-            // Function to toggle the status-check
-            updateStatusCheck() {
-                this.navigationStore.dispatchUpdateStatusCheck(this.statusCheckStatus);
-                // save status-check preference in local storage
-                localStorage.setItem('statusCheck', this.statusCheckStatus.toString());
-            },
-        },
-    });
+    function updateStatusCheck() {
+        navigationStore.dispatchUpdateStatusCheck(statusCheckStatus.value);
+        localStorage.setItem('statusCheck', statusCheckStatus.value.toString()); // save status-check preference in local storage
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue b/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
index 30754c9..241e6e1 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
@@ -21,59 +21,37 @@
     </v-list-item>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { computed, onMounted, ref } from 'vue';
     import { useTheme } from 'vuetify';
 
-    export default defineComponent({
-        name: 'ThemeSwitch',
+    const theme = useTheme();
 
-        setup() {
-            const theme = useTheme();
+    const themeOption = ref('system'); // Variable to store the current Theme option: 'system', 'light' or 'dark
+    const dark = ref(false); // Variable reflecting the current Theme
 
-            return {
-                theme, // Theme Object
-            };
-        },
+    const isDark = computed(() => theme.global.current.value.dark);
 
-        data() {
-            return {
-                themeOption: 'system', // Variable to store the current Theme option: 'system', 'light' or 'dark
-                dark: false, // Variable reflecting the current Theme
-            };
-        },
-
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-        },
-
-        mounted() {
-            this.dark = this.isDark;
-            // get the theme preference from local storage
-            this.themeOption = localStorage.getItem('theme') || 'system';
-        },
-
-        methods: {
-            // Function to toggle between dark and light Theme
-            toggleTheme() {
-                if (this.themeOption == 'dark') {
-                    this.theme.global.name.value = 'dark';
-                } else if (this.themeOption == 'system') {
-                    // sets the Theme according to the Users preferred Theme
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-                        this.theme.global.name.value = 'dark';
-                    } else {
-                        this.theme.global.name.value = 'light';
-                    }
-                } else {
-                    this.theme.global.name.value = 'light';
-                }
-                // save theme preference in local storage
-                localStorage.setItem('theme', this.themeOption);
-            },
-        },
+    onMounted(() => {
+        dark.value = isDark.value;
+        // get the theme preference from local storage
+        themeOption.value = localStorage.getItem('theme') || 'system';
     });
+
+    function toggleTheme() {
+        if (themeOption.value === 'dark') {
+            theme.global.name.value = 'dark';
+        } else if (themeOption.value === 'system') {
+            // sets the Theme according to the Users preferred Theme
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                theme.global.name.value = 'dark';
+            } else {
+                theme.global.name.value = 'light';
+            }
+        } else {
+            theme.global.name.value = 'light';
+        }
+        // save theme preference in local storage
+        localStorage.setItem('theme', themeOption.value);
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/UploadAAS.vue b/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
index ae25ff2..df26643 100644
--- a/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
+++ b/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
@@ -27,7 +27,7 @@
                                         color="primary"
                                         class="text-buttonText"
                                         style="right: -4px"
-                                        @click.stop="uploadAASXFile()"
+                                        @click.stop="uploadAASFile()"
                                         >Upload</v-btn
                                     >
                                 </template>
@@ -41,77 +41,29 @@
     </v-tooltip>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
     import { useNavigationStore } from '@/store/NavigationStore';
 
-    export default defineComponent({
-        name: 'UploadAAS',
-        mixins: [RequestHandling, SubmodelElementHandling],
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
+    const { uploadAas } = useAASRepositoryClient();
 
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
+    const uploadAASDialog = ref(false);
+    const aasFile = ref(null as File | null);
+    const loadingUpload = ref(false);
 
-        data() {
-            return {
-                uploadAASDialog: false, // Dialog State Handler
-                aasFile: [] as any, // AASX File to upload
-                loadingUpload: false, // Loading State
-            };
-        },
+    const isMobile = computed(() => navigationStore.getIsMobile);
 
-        computed: {
-            // Get the upload URL
-            uploadURL() {
-                let aasRepoURL = this.navigationStore.getAASRepoURL;
-                // remove '/shells' from the URL
-                return aasRepoURL.replace('/shells', '') + '/upload';
-            },
+    async function uploadAASFile() {
+        if (!aasFile.value) return;
+        loadingUpload.value = true;
 
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-        },
+        await uploadAas(aasFile.value);
 
-        methods: {
-            // Function to upload the AASX File to the AAS-Server (TODO: Update AASX Upload to AAS V3 API when available)
-            uploadAASXFile() {
-                // console.log('upload aasx file: ' + this.aasxFile);
-                // check if a file is selected
-                if (this.aasFile.length == 0) return;
-                this.loadingUpload = true;
-                let context = 'uploading AASX File';
-                let disableMessage = false;
-                let path = this.uploadURL;
-                var headers = new Headers();
-                var formData = new FormData();
-                formData.append('file', this.aasFile);
-                // Send Request to upload the file
-                this.postRequest(path, formData, headers, context, disableMessage).then((response: any) => {
-                    if (response.success) {
-                        this.navigationStore.dispatchSnackbar({
-                            status: true,
-                            timeout: 4000,
-                            color: 'success',
-                            btnColor: 'buttonText',
-                            text: 'AASX-File uploaded.',
-                        }); // Show Success Snackbar
-                    }
-                    this.aasFile = []; // clear the AASX File
-                    // reload the AAS list
-                    this.navigationStore.dispatchTriggerAASListReload(true);
-                    this.uploadAASDialog = false;
-                    this.loadingUpload = false;
-                });
-            },
-        },
-    });
+        aasFile.value = null;
+        uploadAASDialog.value = false;
+        loadingUpload.value = false;
+    }
 </script>
diff --git a/aas-web-ui/src/composables/Client/AASRepositoryClient.ts b/aas-web-ui/src/composables/Client/AASRepositoryClient.ts
index e762f9d..4d31d1d 100644
--- a/aas-web-ui/src/composables/Client/AASRepositoryClient.ts
+++ b/aas-web-ui/src/composables/Client/AASRepositoryClient.ts
@@ -6,7 +6,7 @@ import { useNavigationStore } from '@/store/NavigationStore';
 import { extractEndpointHref } from '@/utils/DescriptorUtils';
 
 export function useAASRepositoryClient() {
-    const { getRequest } = useRequestHandling();
+    const { getRequest, postRequest } = useRequestHandling();
     const { fetchAasDescriptorById } = useAASRegistryClient();
 
     const aasStore = useAASStore();
@@ -14,6 +14,13 @@ export function useAASRepositoryClient() {
 
     const aasRepositoryUrl = computed(() => navigationStore.getAASRepoURL);
 
+    const uploadURL = computed(() => {
+        const aasRepoURL = navigationStore.getAASRepoURL;
+        // remove '/shells' AAS Repository URL and add '/upload' to construct the upload URL
+        // TODO: This is a workaround, as the AAS Repository does not provide an upload endpoint but rather the AAS Environment. This should be changed in the future.
+        return aasRepoURL.replace('/shells', '') + '/upload';
+    });
+
     // Fetch List of all available AAS
     async function fetchAasList(): Promise<Array<any>> {
         const failResponse = [] as Array<any>;
@@ -93,10 +100,35 @@ export function useAASRepositoryClient() {
         aasStore.dispatchSelectedAAS(aas);
     }
 
+    // Upload an AAS to the AAS Repository
+    async function uploadAas(aasFile: File) {
+        const context = 'uploading AAS';
+        const disableMessage = false;
+        const path = uploadURL.value;
+        const headers = new Headers();
+        const formData = new FormData();
+        formData.append('file', aasFile);
+
+        // Send Request to upload the file
+        postRequest(path, formData, headers, context, disableMessage).then((response: any) => {
+            if (response.success) {
+                navigationStore.dispatchSnackbar({
+                    status: true,
+                    timeout: 4000,
+                    color: 'success',
+                    btnColor: 'buttonText',
+                    text: 'AASX-File uploaded.',
+                }); // Show Success Snackbar
+                navigationStore.dispatchTriggerAASListReload(true); // Reload AAS List
+            }
+        });
+    }
+
     return {
         fetchAasList,
         fetchAasById,
         fetchAas,
         fetchAndDispatchAas,
+        uploadAas,
     };
 }
diff --git a/aas-web-ui/src/composables/DashboardHandling.ts b/aas-web-ui/src/composables/DashboardHandling.ts
index 55f7fdd..66bebf0 100644
--- a/aas-web-ui/src/composables/DashboardHandling.ts
+++ b/aas-web-ui/src/composables/DashboardHandling.ts
@@ -23,6 +23,22 @@ export function useDashboardHandling() {
         return useEnvStore().getEnvDashboardServicePath;
     });
 
+    async function checkDashboardAvailability(): Promise<boolean> {
+        if (!dashboardServicePath.value || dashboardServicePath.value === '') return false;
+
+        const path = dashboardServicePath.value.replace('/api/elements', '/test');
+        const context = 'checking if dashboard is available';
+        const disableMessage = true;
+
+        try {
+            const response = await getRequest(path, context, disableMessage);
+            if (response.success) return true;
+            return false;
+        } catch {
+            return false;
+        }
+    }
+
     async function dashboardAdd(item: any) {
         // console.log(item)
         const group = await getAAS();
@@ -149,6 +165,7 @@ export function useDashboardHandling() {
     }
 
     return {
+        checkDashboardAvailability,
         dashboardAdd,
         getGroups,
         getElements,
diff --git a/aas-web-ui/src/store/NavigationStore.ts b/aas-web-ui/src/store/NavigationStore.ts
index 824057b..e90b12d 100644
--- a/aas-web-ui/src/store/NavigationStore.ts
+++ b/aas-web-ui/src/store/NavigationStore.ts
@@ -77,33 +77,34 @@ export const useNavigationStore = defineStore({
     },
 
     actions: {
-        dispatchDrawerState(drawerState: boolean) {
-            this.drawerState = drawerState;
-        },
-        dispatchAASDiscoveryURL(url: string) {
-            this.AASDiscoveryURL = url;
-        },
-        dispatchAASRegistryURL(url: string, clearSelectedNode: boolean = true) {
-            this.AASRegistryURL = url;
-            if (clearSelectedNode) useAASStore().dispatchSelectedNode({});
-        },
-        dispatchSubmodelRegistryURL(url: string, clearSelectedNode: boolean = true) {
-            this.SubmodelRegistryURL = url;
-            if (clearSelectedNode) useAASStore().dispatchSelectedNode({});
-        },
-        dispatchRepoURL(type: string, url: string) {
-            switch (type) {
-                case 'AAS':
+        dispatchComponentURL(componentKey: string, url: string, clearSelectedNode: boolean = true) {
+            // console.log('dispatchComponentURL', componentKey, url, clearSelectedNode);
+            switch (componentKey) {
+                case 'AASDiscovery':
+                    this.AASDiscoveryURL = url;
+                    break;
+                case 'AASRegistry':
+                    this.AASRegistryURL = url;
+                    if (clearSelectedNode) useAASStore().dispatchSelectedNode({});
+                    break;
+                case 'SubmodelRegistry':
+                    this.SubmodelRegistryURL = url;
+                    if (clearSelectedNode) useAASStore().dispatchSelectedNode({});
+                    break;
+                case 'AASRepo':
                     this.AASRepoURL = url;
                     break;
-                case 'Submodel':
+                case 'SubmodelRepo':
                     this.SubmodelRepoURL = url;
                     break;
-                case 'ConceptDescription':
+                case 'ConceptDescriptionRepo':
                     this.ConceptDescriptionRepoURL = url;
                     break;
             }
         },
+        dispatchDrawerState(drawerState: boolean) {
+            this.drawerState = drawerState;
+        },
         dispatchSnackbar(snackbarObj: SnackbarType) {
             this.Snackbar = snackbarObj;
         },
diff --git a/aas-web-ui/src/types/BaSyx.ts b/aas-web-ui/src/types/BaSyx.ts
new file mode 100644
index 0000000..d428391
--- /dev/null
+++ b/aas-web-ui/src/types/BaSyx.ts
@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+
+export interface BaSyxComponent {
+    url: Ref<string>;
+    loading: Ref<boolean>;
+    connect: () => void;
+    label: string;
+    pathCheck?: string;
+    additionalParams?: (type?: string) => string;
+}
+
+export type RepositoryKey =
+    | 'AASDiscovery'
+    | 'AASRegistry'
+    | 'SubmodelRegistry'
+    | 'AASRepo'
+    | 'SubmodelRepo'
+    | 'ConceptDescriptionRepo';
diff --git a/aas-web-ui/src/utils/generalUtils.ts b/aas-web-ui/src/utils/generalUtils.ts
index b951a7d..911e72d 100644
--- a/aas-web-ui/src/utils/generalUtils.ts
+++ b/aas-web-ui/src/utils/generalUtils.ts
@@ -60,3 +60,25 @@ export function downloadFile(filename: string, fileContent: Blob) {
     link.click();
     document.body.removeChild(link);
 }
+
+// Function to extract the english display name from a referable
+export function nameToDisplay(referable: any, defaultNameToDisplay = '') {
+    if (referable && referable?.displayName) {
+        const displayNameEn = referable.displayName.find((displayName: any) => {
+            return displayName.language === 'en' && displayName.text !== '';
+        });
+        if (displayNameEn && displayNameEn.text) return displayNameEn.text;
+    }
+    return !defaultNameToDisplay && referable?.idShort ? referable.idShort : defaultNameToDisplay;
+}
+
+// Function to extract the english description from a referable
+export function descriptionToDisplay(referable: any) {
+    if (referable && referable?.description) {
+        const descriptionEn = referable.description.find(
+            (description: any) => description && description.language === 'en' && description.text !== ''
+        );
+        if (descriptionEn && descriptionEn.text) return descriptionEn.text;
+    }
+    return '';
+}