diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index 24cc24e..a1f7fe9 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -47,6 +47,20 @@
                             "
                             :semantic-id-object="submodelElementData.semanticId"
                             :semantic-title="'SemanticID'"></SemanticID>
+                        <v-divider
+                            v-if="
+                                submodelElementData.supplementalSemanticIds &&
+                                submodelElementData.supplementalSemanticIds.length > 0
+                            "
+                            class="mt-2"></v-divider>
+                        <!-- SubmodelELement SupplementalSemanticID -->
+                        <SupplementalSemanticID
+                            v-if="
+                                submodelElementData.supplementalSemanticIds &&
+                                submodelElementData.supplementalSemanticIds.length > 0
+                            "
+                            :supplemental-semantic-ids-array="submodelElementData.supplementalSemanticIds"
+                            :supplemental-semantic-ids-title="'Supplemental Semantic ID'"></SupplementalSemanticID>
                     </v-list>
                     <v-divider></v-divider>
                     <v-list nav class="px-4 pt-0 pb-0">
@@ -160,6 +174,7 @@
     import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
     import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
     import SemanticID from '@/components/UIComponents/SemanticID.vue';
+    import SupplementalSemanticID from '@/components/UIComponents/SupplementalSemanticID.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
     import { useAASStore } from '@/store/AASDataStore';
@@ -173,6 +188,7 @@
             DisplayNameElement,
             DescriptionElement,
             SemanticID,
+            SupplementalSemanticID,
             ConceptDescription,
 
             Submodel,
diff --git a/aas-web-ui/src/components/UIComponents/SemanticID.vue b/aas-web-ui/src/components/UIComponents/SemanticID.vue
index cf3117b..c1910c4 100644
--- a/aas-web-ui/src/components/UIComponents/SemanticID.vue
+++ b/aas-web-ui/src/components/UIComponents/SemanticID.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-list-item :class="semanticTitle && semanticTitle.trim().length > 0 ? '' : 'pa-0'">
+        <v-list-item :class="semanticTitle && semanticTitle.trim().length > 0 && !small ? '' : 'pa-0'">
             <!-- Tooltip with SemanticId -->
             <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
                 <div v-for="(semanticId, i) in semanticIdObject.keys" :key="i" class="text-caption">
@@ -10,11 +10,11 @@
             </v-tooltip>
             <!-- SemanticIId Title -->
             <template v-if="semanticTitle && semanticTitle.trim().length > 0" #title>
-                <div class="text-subtitle-2 mt-2">{{ semanticTitle + ':' }}</div>
+                <div class="mt-2" :class="small ? 'text-caption' : 'text-subtitle-2 '">{{ semanticTitle + ':' }}</div>
             </template>
             <!-- SemanticId List -->
             <v-list-item-subtitle v-for="(semanticId, i) in semanticIdObject.keys" :key="i">
-                <div :class="semanticTitle && semanticTitle.trim().length > 0 ? 'pt-2' : ''">
+                <div :class="semanticTitle && semanticTitle.trim().length > 0 && !small ? 'pt-2' : 'pt-1'">
                     <v-chip label size="x-small" border class="mr-2">{{ semanticId.type }}</v-chip>
                     <span>{{ semanticId.value }}</span>
                 </div>
@@ -28,6 +28,6 @@
 
     export default defineComponent({
         name: 'SemanticID',
-        props: ['semanticIdObject', 'semanticTitle'],
+        props: ['semanticIdObject', 'semanticTitle', 'small'],
     });
 </script>
diff --git a/aas-web-ui/src/components/UIComponents/SupplementalSemanticID.vue b/aas-web-ui/src/components/UIComponents/SupplementalSemanticID.vue
new file mode 100644
index 0000000..6aa4ec1
--- /dev/null
+++ b/aas-web-ui/src/components/UIComponents/SupplementalSemanticID.vue
@@ -0,0 +1,37 @@
+<template>
+    <v-container fluid class="pa-0">
+        <v-list-item
+            :class="supplementalSemanticIdsTitle && supplementalSemanticIdsTitle.trim().length > 0 ? '' : 'pa-0'">
+            <!-- SupplementalSemanticIds Title -->
+            <template v-if="supplementalSemanticIdsTitle && supplementalSemanticIdsTitle.trim().length > 0" #title>
+                <div class="text-subtitle-2 mt-2">{{ supplementalSemanticIdsTitle + ':' }}</div>
+            </template>
+            <!-- SupplementalSemanticIds List -->
+            <template
+                v-for="(supplementalSemanticId, supplementalSemanticIdIndex) in supplementalSemanticIdsArray"
+                :key="supplementalSemanticIdIndex">
+                <SemanticID
+                    v-if="
+                        supplementalSemanticId && supplementalSemanticId.keys && supplementalSemanticId.keys.length > 0
+                    "
+                    :semantic-id-object="supplementalSemanticId"></SemanticID>
+                <v-divider
+                    v-if="supplementalSemanticIdIndex < supplementalSemanticIdsArray.length - 1"
+                    class="mt-2 mb-1"></v-divider>
+            </template>
+        </v-list-item>
+    </v-container>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import SemanticID from '@/components/UIComponents/SemanticID.vue';
+
+    export default defineComponent({
+        name: 'SupplementalSemanticID',
+        components: {
+            SemanticID,
+        },
+        props: ['supplementalSemanticIdsArray', 'supplementalSemanticIdsTitle'],
+    });
+</script>