diff --git a/aas-web-ui/src/components.d.ts b/aas-web-ui/src/components.d.ts
index 188153b3..b37cee58 100644
--- a/aas-web-ui/src/components.d.ts
+++ b/aas-web-ui/src/components.d.ts
@@ -102,6 +102,7 @@ declare module 'vue' {
     SubmodelElementWrapper: typeof import('./components/UIComponents/SubmodelElementWrapper.vue')['default']
     SubmodelForm: typeof import('./components/EditorComponents/SubmodelForm.vue')['default']
     SubmodelList: typeof import('./components/SubmodelList.vue')['default']
+    SubmodelSelection: typeof import('./components/AppNavigation/SubmodelSelection.vue')['default']
     SubmodelTree: typeof import('./components/SubmodelTree.vue')['default']
     SupplementalSemanticID: typeof import('./components/UIComponents/SupplementalSemanticID.vue')['default']
     TechnicalData_v1_2: typeof import('./components/Plugins/Submodels/TechnicalData_v1_2.vue')['default']
diff --git a/aas-web-ui/src/components/AppNavigation/DeleteAAS.vue b/aas-web-ui/src/components/AppNavigation/DeleteAAS.vue
index 1e0d00a2..4205a0f4 100644
--- a/aas-web-ui/src/components/AppNavigation/DeleteAAS.vue
+++ b/aas-web-ui/src/components/AppNavigation/DeleteAAS.vue
@@ -11,6 +11,11 @@
                 <v-alert v-if="deleteSubmodels" class="mb-2" variant="tonal" border color="warning">
                     Warning: If other shells refer to the same submodels, those references are not deleted!
                 </v-alert>
+                <SubmodelSelection
+                    v-if="deleteSubmodels"
+                    :selected="selected"
+                    :submodel-ids="submodelIds"
+                    @update:selected="updateSelectedSubmodels" />
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
@@ -24,6 +29,8 @@
 <script lang="ts" setup>
     import { computed, ref, watch } from 'vue';
     import { useRouter } from 'vue-router';
+    import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
+    import { useSMRepositoryClient } from '@/composables/Client/SMRepositoryClient';
     import { useRequestHandling } from '@/composables/RequestHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useNavigationStore } from '@/store/NavigationStore';
@@ -36,6 +43,8 @@
     const navigationStore = useNavigationStore();
 
     const { getRequest, deleteRequest } = useRequestHandling();
+    const { getSubmodelRefsById } = useAASRepositoryClient();
+    const { fetchSmById } = useSMRepositoryClient();
 
     const props = defineProps<{
         modelValue: boolean;
@@ -50,13 +59,23 @@
     const deleteDialog = ref(false); // Variable to store if the delete dialog is open
     const deleteLoading = ref(false); // Variable to store if the AAS is being deleted
     const deleteSubmodels = ref(false); // Variable to store if the Submodels should be deleted
+    const submodelIds = ref<any[]>([]); // Variable to store the Submodel Ids of the AAS
+    const selected = ref<string[]>([]); // Variable to store the selected Submodel Ids
 
     const submodelRegistryURL = computed(() => navigationStore.getSubmodelRegistryURL); // Get Submodel Registry URL from Store
 
     watch(
         () => props.modelValue,
-        (value) => {
+        async (value) => {
             deleteDialog.value = value;
+            const submodelRefs = await getSubmodelRefsById(props.aas.id);
+            submodelIds.value = [];
+            selected.value = [];
+            for (const submodelRef of submodelRefs) {
+                const submodel = await fetchSmById(submodelRef.keys[0].value);
+                submodelIds.value.push({ smId: submodelRef.keys[0].value, smIdShort: submodel.idShort, submodel });
+                selected.value.push(submodelRef.keys[0].value);
+            }
         }
     );
 
@@ -67,39 +86,34 @@
         }
     );
 
+    function updateSelectedSubmodels(value: string[]): void {
+        selected.value = value;
+    }
+
     async function confirmDelete() {
         deleteLoading.value = true;
         let error = false;
         try {
             if (deleteSubmodels.value) {
-                const aasEndpopint = extractEndpointHref(props.aas, 'AAS-3.0');
-                const aasRepoPath = aasEndpopint + '/submodel-refs';
-                const aasRepoContext = 'retrieving Submodel References';
+                // Extract all references in an array called submodelIds from each keys[0].value
+                const submodelIds = selected.value;
                 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);
-                    await removeAAS(props.aas);
-                    // Remove each submodel
-                    for (const submodelId of submodelIds) {
-                        const submodelRegistryPath = `${submodelRegistryURL.value}/${base64Encode(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;
-                        }
+                await removeAAS(props.aas);
+                // Remove each submodel
+                for (const submodelId of submodelIds) {
+                    const submodelRegistryPath = `${submodelRegistryURL.value}/${base64Encode(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 {
-                    error = true;
                 }
             } else {
                 await removeAAS(props.aas);
diff --git a/aas-web-ui/src/components/AppNavigation/DownloadAAS.vue b/aas-web-ui/src/components/AppNavigation/DownloadAAS.vue
index f9cbf33c..324fdfd3 100644
--- a/aas-web-ui/src/components/AppNavigation/DownloadAAS.vue
+++ b/aas-web-ui/src/components/AppNavigation/DownloadAAS.vue
@@ -7,29 +7,10 @@
                 <div>You selected the AAS with the ID</div>
                 <span class="text-primary font-weight-bold">{{ aas.id }}</span>
                 <span> for download.</span><br />
-                <v-sheet border rounded class="mt-4">
-                    <v-data-table-virtual
-                        v-model="selected"
-                        density="compact"
-                        :headers="headers"
-                        :items="submodelIds"
-                        style="overflow-y: auto; max-height: 300px"
-                        item-value="smId"
-                        fixed-header
-                        show-select>
-                        <template #[`header.smId`]>
-                            <div class="font-weight-bold">Submodel</div>
-                        </template>
-                        <template #[`item.smId`]="{ item }">
-                            <div>
-                                {{ nameToDisplay(item.submodel) }}
-                            </div>
-                            <div class="text-medium-emphasis">
-                                {{ item.smId }}
-                            </div>
-                        </template>
-                    </v-data-table-virtual>
-                </v-sheet>
+                <SubmodelSelection
+                    :selected="selected"
+                    :submodel-ids="submodelIds"
+                    @update:selected="updateSelectedSubmodels" />
                 <v-checkbox v-model="downloadCDs" label="Also download Concept Descriptions" hide-details></v-checkbox>
             </v-card-text>
             <v-divider></v-divider>
@@ -44,7 +25,6 @@
 
 <script lang="ts" setup>
     import { ref, watch } from 'vue';
-    import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
     import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
     import { useSMRepositoryClient } from '@/composables/Client/SMRepositoryClient';
     import { useIDUtils } from '@/composables/IDUtils';
@@ -55,7 +35,6 @@
     const { getSubmodelRefsById } = useAASRepositoryClient();
     const { fetchSmById } = useSMRepositoryClient();
     const { generateUUIDFromString } = useIDUtils();
-    const { nameToDisplay } = useReferableUtils();
 
     const { getRequest } = useRequestHandling();
 
@@ -71,8 +50,6 @@
     const downloadDialog = ref(false);
     const downloadLoading = ref(false);
 
-    const headers = [{ title: 'Submodel', align: 'start', sortable: false, key: 'smId' }] as any;
-
     const selected = ref<string[]>([]);
     const submodelIds = ref<any[]>([]);
     const downloadEndpoint = ref<string>('');
@@ -105,6 +82,10 @@
         }
     );
 
+    function updateSelectedSubmodels(value: string[]): void {
+        selected.value = value;
+    }
+
     async function download(): Promise<void> {
         downloadLoading.value = true;
         let aasSerializationPath = downloadEndpoint.value;
diff --git a/aas-web-ui/src/components/AppNavigation/SubmodelSelection.vue b/aas-web-ui/src/components/AppNavigation/SubmodelSelection.vue
new file mode 100644
index 00000000..10489867
--- /dev/null
+++ b/aas-web-ui/src/components/AppNavigation/SubmodelSelection.vue
@@ -0,0 +1,59 @@
+<template>
+    <v-sheet border rounded class="mt-4">
+        <v-data-table-virtual
+            v-model="selectedSubmodels"
+            density="compact"
+            :headers="headers"
+            :items="submodelIds"
+            style="overflow-y: auto; max-height: 300px"
+            item-value="smId"
+            fixed-header
+            show-select>
+            <template #[`header.smId`]>
+                <div class="font-weight-bold">Submodel</div>
+            </template>
+            <template #[`item.smId`]="{ item }">
+                <div>
+                    {{ nameToDisplay(item.submodel) }}
+                </div>
+                <div class="text-medium-emphasis">
+                    {{ item.smId }}
+                </div>
+            </template>
+        </v-data-table-virtual>
+    </v-sheet>
+</template>
+
+<script setup lang="ts">
+    import { ref, watch } from 'vue';
+    import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
+
+    const { nameToDisplay } = useReferableUtils();
+
+    const props = defineProps<{
+        selected: string[];
+        submodelIds: any[];
+    }>();
+
+    const selectedSubmodels = ref<string[]>([]);
+    const headers = [{ title: 'Submodel', align: 'start', sortable: false, key: 'smId' }] as any;
+
+    watch(
+        () => selectedSubmodels.value,
+        (value) => {
+            emit('update:selected', value);
+        }
+    );
+
+    watch(
+        () => props.selected,
+        (value) => {
+            selectedSubmodels.value = value;
+        },
+        { immediate: true }
+    );
+
+    const emit = defineEmits<{
+        (event: 'update:selected', value: string[]): void;
+    }>();
+</script>