diff --git a/aas-web-ui/src/composables/DashboardHandling.ts b/aas-web-ui/src/composables/DashboardHandling.ts
new file mode 100644
index 0000000..46af950
--- /dev/null
+++ b/aas-web-ui/src/composables/DashboardHandling.ts
@@ -0,0 +1,160 @@
+import { computed } from 'vue';
+import { useAASStore } from '@/store/AASDataStore';
+import { useEnvStore } from '@/store/EnvironmentStore';
+import { extractEndpointHref } from '@/utils/DescriptorUtils';
+import { URLEncode } from '@/utils/EncodeDecodeUtils';
+import { UUID } from '@/utils/IDUtils';
+import { useRequestHandling } from './RequestHandling';
+
+export function useDashboardHandling() {
+    const { getRequest, postRequest, putRequest, deleteRequest } = useRequestHandling();
+
+    const aasStore = useAASStore();
+
+    const SelectedNode = computed(() => {
+        return aasStore.getSelectedNode;
+    });
+
+    const SelectedAAS = computed(() => {
+        return aasStore.getSelectedAAS;
+    });
+
+    const dashboardServicePath = computed(() => {
+        return useEnvStore().getEnvDashboardServicePath;
+    });
+
+    async function dashboardAdd(item: any) {
+        // console.log(item)
+        const group = await getAAS();
+        // console.log(group);
+        const dashboardObj = {
+            title: item.title,
+            endpoint: SelectedNode.value.path,
+            group: {
+                groupName: group.idShort,
+                groupId: group.id,
+            },
+            configObject: {
+                semanticId: SelectedNode.value.semanticId,
+                chartType: item.chartType,
+                chartOptions: item.chartOptions,
+                timeVal: item.timeValue,
+                yvals: item.yValues,
+                segment: item.segment,
+                apiToken: item.apiToken,
+            },
+            visibility: true,
+        };
+        // console.log('Add Element to Dasboard: ', dashboardObj);
+        // construct the request
+        const path = dashboardServicePath.value + '/addElement';
+        const headers: Headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('accept', '*/*');
+        const content = JSON.stringify(dashboardObj);
+        const context = 'adding element to dashboard';
+        const disableMessage = false;
+        // send the request
+        postRequest(path, content, headers, context, disableMessage).then((response: any) => {
+            if (response.success) {
+                // console.log('Successfully added Element to Dashboard: ', response.data);
+            }
+        });
+    }
+
+    async function getGroups() {
+        const path = dashboardServicePath.value + '/groups/summary';
+        const context = 'fetching all groups';
+        const disableMessage = false;
+        const response: any = await getRequest(path, context, disableMessage);
+        if (response.success) {
+            // console.log(response.data)
+            return response.data;
+        }
+    }
+
+    async function getElements(group: any) {
+        const pathGroup = URLEncode(group);
+        const path = dashboardServicePath.value + '/findGroup/' + pathGroup;
+        const context = 'fetching all elements of a group';
+        const disableMessage = false;
+        const response: any = await getRequest(path, context, disableMessage);
+        if (response.success) {
+            // console.log(response);
+            return response.data;
+        }
+    }
+
+    async function deleteGroup(groups: any, groupId: any): Promise<any[]> {
+        // console.log(groups)
+        const pathGroup = URLEncode(groupId);
+        const path = dashboardServicePath.value + '/deleteGroup/' + pathGroup;
+        const context = 'deleting all elements of a group';
+        const disableMessage = false;
+        const response: any = await deleteRequest(path, context, disableMessage);
+        if (response.success) {
+            // console.log(response);
+            const index = groups.findIndex((element: any) => element.groupId === groupId);
+            // console.log(index)
+            groups = groups.filter((item: any) => item !== groups[index]);
+            // console.log(groups)
+            return groups;
+        }
+        return groups;
+    }
+
+    async function deleteSingle(elementId: any): Promise<string | undefined> {
+        const path = dashboardServicePath.value + '/deleteElement/' + elementId;
+        const context = 'deleting one element of a group';
+        const disableMessage = false;
+        const response: any = await deleteRequest(path, context, disableMessage);
+        if (response.success) {
+            return elementId;
+        }
+        return undefined;
+    }
+
+    async function updateElement(element: any): Promise<any | undefined> {
+        // console.log(element)
+        const path = dashboardServicePath.value + '/updateElement/' + element.id;
+        const headers: Headers = new Headers();
+        headers.append('Content-Type', 'application/json');
+        headers.append('accept', '*/*');
+        const content = JSON.stringify(element);
+        const context = 'adding element to dashboard';
+        const disableMessage = false;
+        // send the request
+        const response: any = await putRequest(path, content, headers, context, disableMessage);
+        if (response.success) {
+            return response.data;
+        }
+        return undefined;
+    }
+
+    async function getAAS(): Promise<any> {
+        if ((SelectedAAS.value.idShort && SelectedAAS.value.id) != null) {
+            // console.log(this.SelectedAAS)
+            return SelectedAAS.value;
+        } else {
+            const shellHref = extractEndpointHref(SelectedAAS.value, 'AAS-3.0');
+            const path = shellHref;
+            const context = 'getting aas from endpoint';
+            const disableMessage = false;
+            const response = await getRequest(path, context, disableMessage);
+            if (response && response.success) {
+                return response.data;
+            }
+            return { idShort: 'new Group', id: UUID() };
+        }
+    }
+
+    return {
+        dashboardAdd,
+        getGroups,
+        getElements,
+        deleteGroup,
+        deleteSingle,
+        updateElement,
+        getAAS,
+    };
+}
diff --git a/aas-web-ui/src/utils/DescriptorUtils.ts b/aas-web-ui/src/utils/DescriptorUtils.ts
new file mode 100644
index 0000000..05fc062
--- /dev/null
+++ b/aas-web-ui/src/utils/DescriptorUtils.ts
@@ -0,0 +1,28 @@
+// Extract the right endpoints href from a descriptor
+export function extractEndpointHref(descriptor: any, interfaceShortName: string): string {
+    const interfaceShortNames = [
+        'AAS',
+        'SUBMODEL',
+        'SERIALIZE',
+        'DESCRIPTION',
+        'AASX-FILE',
+        'AAS-REGISTRY',
+        'SUBMODEL-REGISTRY',
+        'AAS-REPOSITORY',
+        'SUBMODEL-REPOSITORY',
+        'CD-REPOSITORY',
+        'AAS-DISCOVERY',
+    ];
+    if (!interfaceShortNames.some((iShortName) => interfaceShortName.startsWith(`${iShortName}-`))) {
+        return '';
+    }
+    if (!Array.isArray(descriptor?.endpoints) || descriptor?.endpoints.length === 0 || interfaceShortName === '') {
+        return '';
+    }
+    const endpoints = descriptor.endpoints;
+    // find the right endpoint based on the interfaceShortName (has to match endpoint.interface)
+    const endpoint = endpoints.find((endpoint: any) => {
+        return endpoint?.interface === interfaceShortName;
+    });
+    return endpoint?.protocolInformation?.href ? endpoint.protocolInformation.href : '';
+}
diff --git a/aas-web-ui/src/utils/IDUtils.ts b/aas-web-ui/src/utils/IDUtils.ts
new file mode 100644
index 0000000..d2b977b
--- /dev/null
+++ b/aas-web-ui/src/utils/IDUtils.ts
@@ -0,0 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
+export function UUID(): string {
+    return uuidv4();
+}