diff --git a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
index a254498..7a8ebc3 100644
--- a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
@@ -15,8 +15,9 @@
             <component
                 :is="SubmodelElementWrapper"
                 v-if="SubmodelElementWrapper"
-                :SubmodelElementObject="SubmodelElement"
-                :card-style="'outlined'"></component>
+                :submodel-element-object="SubmodelElement"
+                :card-style="'outlined'"
+                :is-editable="isEditable"></component>
         </div>
     </v-container>
 </template>
@@ -32,7 +33,16 @@
             RelationshipElement,
             // SubmodelElementWrapper,
         },
-        props: ['annotatedRelationshipElementObject'],
+        props: {
+            annotatedRelationshipElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const SubmodelElementWrapper = shallowRef(null) as any;
diff --git a/aas-web-ui/src/components/SubmodelElements/Blob.vue b/aas-web-ui/src/components/SubmodelElements/Blob.vue
index a9c6aee..1fe4e73 100644
--- a/aas-web-ui/src/components/SubmodelElements/Blob.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Blob.vue
@@ -34,7 +34,8 @@
                             variant="outlined"
                             density="compact"
                             :hide-details="isTruncated ? false : true"
-                            clearable
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
                             :hint="isTruncated ? 'Blob string is truncated!' : ''"
                             persistent-hint
                             @keydown.enter="updateBlob()"
@@ -43,7 +44,7 @@
                             <!-- Update Blob Button -->
                             <template #append-inner="{ isFocused }">
                                 <v-btn
-                                    v-if="isFocused"
+                                    v-if="isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
@@ -59,7 +60,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Action Button to upload a File as Blob -->
-            <v-list nav class="bg-elevatedCard pa-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard pa-0">
                 <v-list-item>
                     <template #title>
                         <!-- Upload-Button -->
@@ -99,7 +100,16 @@
     export default defineComponent({
         name: 'Blob',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['blobObject'],
+        props: {
+            blobObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
index 287522f..8922023 100644
--- a/aas-web-ui/src/components/SubmodelElements/Entity.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -77,7 +77,12 @@
             SubmodelElementGroup,
         },
         mixins: [SubmodelElementHandling],
-        props: ['entityObject'],
+        props: {
+            entityObject: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/File.vue b/aas-web-ui/src/components/SubmodelElements/File.vue
index 3b20841..ae87048 100644
--- a/aas-web-ui/src/components/SubmodelElements/File.vue
+++ b/aas-web-ui/src/components/SubmodelElements/File.vue
@@ -35,14 +35,15 @@
                             variant="outlined"
                             density="compact"
                             hide-details
-                            clearable
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
                             @keydown.enter="updatePath()"
                             @click:clear="clearPath()"
                             @update:focused="setFocus">
                             <!-- Update Path Button -->
                             <template #append-inner="{ isFocused }">
                                 <v-btn
-                                    v-if="isFocused"
+                                    v-if="isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
@@ -69,7 +70,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Action Button to upload a File -->
-            <v-list nav class="bg-elevatedCard pa-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard pa-0">
                 <v-list-item>
                     <template #title>
                         <!-- Upload-Button -->
@@ -109,7 +110,16 @@
     export default defineComponent({
         name: 'File',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['fileObject'],
+        props: {
+            fileObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
index 5305900..1265b72 100644
--- a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
+++ b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
@@ -14,8 +14,9 @@
                             variant="outlined"
                             density="compact"
                             hide-details
-                            clearable
-                            append-icon="mdi-delete"
+                            :clearable="isEditable"
+                            :readonly="!isEditable"
+                            :append-icon="isEditable ? 'mdi-delete' : undefined"
                             @click:append="removeEntry(i)"
                             @update:focused="setFocus($event, value)"
                             @keydown.enter="updateValue()">
@@ -23,9 +24,11 @@
                                 <!-- language -->
                                 <v-chip label size="x-small" border>
                                     <span>{{ value.language ? value.language : 'no-lang' }}</span>
-                                    <v-icon site="x-small" style="margin-right: -3px">mdi-chevron-down</v-icon>
+                                    <v-icon v-if="isEditable" site="x-small" style="margin-right: -3px">
+                                        mdi-chevron-down
+                                    </v-icon>
                                     <!-- Menu to select the Language -->
-                                    <v-menu activator="parent">
+                                    <v-menu v-if="isEditable" activator="parent">
                                         <v-list density="compact" class="pa-0">
                                             <v-list-item
                                                 v-for="language in languages"
@@ -40,7 +43,7 @@
                             <!-- Update Value Button -->
                             <template #append-inner>
                                 <v-btn
-                                    v-if="value.isFocused"
+                                    v-if="value.isFocused && isEditable"
                                     size="small"
                                     variant="elevated"
                                     color="primary"
@@ -68,7 +71,7 @@
             </v-list>
             <v-divider></v-divider>
             <!-- Edit the MultiLanguageProperty -->
-            <v-list nav class="bg-elevatedCard py-0">
+            <v-list v-if="isEditable" nav class="bg-elevatedCard py-0">
                 <v-list-item>
                     <template #append>
                         <v-btn
@@ -95,7 +98,16 @@
     export default defineComponent({
         name: 'MultiLanguageProperty',
         mixins: [RequestHandling],
-        props: ['multiLanguagePropertyObject'],
+        props: {
+            multiLanguagePropertyObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Operation.vue b/aas-web-ui/src/components/SubmodelElements/Operation.vue
index aa96e13..075bbdf 100644
--- a/aas-web-ui/src/components/SubmodelElements/Operation.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Operation.vue
@@ -39,12 +39,14 @@
                                         :property-object="variable.value"
                                         :is-operation-variable="true"
                                         :variable-type="variableType.type"
+                                        :is-editable="isEditable"
                                         @update-value="updateOperationVariable($event, variable.value)"></Property>
                                     <ReferenceElement
                                         v-else-if="variable.value.modelType === 'ReferenceElement'"
                                         :reference-element-object="variable.value"
                                         :is-operation-variable="true"
                                         :variable-type="variableType.type"
+                                        :is-editable="isEditable"
                                         @update-value="
                                             updateOperationVariable($event, variable.value)
                                         "></ReferenceElement>
@@ -80,7 +82,13 @@
                 <v-list-item>
                     <template #append>
                         <!-- Clear-Button -->
-                        <v-btn size="small" variant="outlined" color="primary" class="mr-3" @click="clearFields()"
+                        <v-btn
+                            v-if="isEditable"
+                            size="small"
+                            variant="outlined"
+                            color="primary"
+                            class="mr-3"
+                            @click="clearFields()"
                             >clear</v-btn
                         >
                         <!-- Execute-Button -->
@@ -120,7 +128,16 @@
             InvalidElement,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['operationObject'],
+        props: {
+            operationObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const navigationStore = useNavigationStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Property.vue b/aas-web-ui/src/components/SubmodelElements/Property.vue
index 7d09eb8..3c46b27 100644
--- a/aas-web-ui/src/components/SubmodelElements/Property.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Property.vue
@@ -46,24 +46,28 @@
                     :number-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></NumberType>
                 <BooleanType
                     v-else-if="propertyObject.valueType == 'xs:boolean'"
                     :boolean-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></BooleanType>
                 <DateTimeStampType
                     v-else-if="propertyObject.valueType == 'xs:dateTime'"
                     :date-time-stamp-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></DateTimeStampType>
                 <StringType
                     v-else
                     :string-value="propertyObject"
                     :is-operation-variable="isOperationVariable"
                     :variable-type="variableType"
+                    :is-editable="isEditable"
                     @update-value="updateValue"></StringType>
             </v-list>
         </v-card>
@@ -90,7 +94,24 @@
             DateTimeStampType,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['propertyObject', 'isOperationVariable', 'variableType'],
+        props: {
+            propertyObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'string',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/Range.vue b/aas-web-ui/src/components/SubmodelElements/Range.vue
index 724a9f8..9a66e06 100644
--- a/aas-web-ui/src/components/SubmodelElements/Range.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Range.vue
@@ -36,7 +36,12 @@
     export default defineComponent({
         name: 'Range',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['rangeObject'],
+        props: {
+            rangeObject: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
index 1e2beea..613fb44 100644
--- a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -38,7 +38,8 @@
                                 variant="outlined"
                                 density="compact"
                                 hide-details
-                                clearable
+                                :clearable="isEditable"
+                                :readonly="!isEditable"
                                 append-icon="mdi-delete"
                                 @click:append="removeReferenceEntry(i)"
                                 @update:focused="setFocus($event)"
@@ -49,7 +50,7 @@
                                         <span>{{ value.type ? value.type : 'no-selection' }}</span>
                                         <v-icon site="x-small" style="margin-right: -3px">mdi-chevron-down</v-icon>
                                         <!-- Menu to select the Type of Element -->
-                                        <v-menu activator="parent">
+                                        <v-menu v-if="isEditable" activator="parent">
                                             <v-list density="compact" class="pa-0">
                                                 <v-list-item
                                                     v-for="elementType in elementTypes"
@@ -66,7 +67,7 @@
                                 <!-- Update Value Button -->
                                 <template #append-inner>
                                     <v-btn
-                                        v-if="value.isFocused"
+                                        v-if="value.isFocused && isEditable"
                                         size="small"
                                         variant="elevated"
                                         color="primary"
@@ -100,7 +101,7 @@
                         >
                         <!-- Add new Reference Entry -->
                         <v-btn
-                            v-if="IsOperationVariable && !IsOutputVariable"
+                            v-if="isEditable && IsOperationVariable && !IsOutputVariable"
                             size="small"
                             class="text-buttonText"
                             color="primary"
@@ -126,7 +127,24 @@
     export default defineComponent({
         name: 'ReferenceElement',
         mixins: [SubmodelElementHandling],
-        props: ['referenceElementObject', 'isOperationVariable', 'variableType'],
+        props: {
+            referenceElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
index 845e34d..8efc9d4 100644
--- a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
@@ -20,13 +20,13 @@
                             </v-tooltip>
                             <!-- Reference Title -->
                             <template #title>
-                                <div class="text-subtitle-2 mt-2" v-html="'Description:'"></div>
+                                <div class="text-subtitle-2 mt-2">Description:</div>
                             </template>
                             <!-- Reference Representation -->
                             <template #subtitle>
                                 <div class="pt-2">
                                     <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
-                                    <span v-html="value.value"></span>
+                                    <span>{{ value.value }}</span>
                                 </div>
                             </template>
                         </v-list-item>
@@ -73,7 +73,12 @@
     export default defineComponent({
         name: 'RelationshipElement',
         mixins: [SubmodelElementHandling],
-        props: ['relationshipElementObject'],
+        props: {
+            relationshipElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
index ea8f15b..d1f02ca 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
@@ -5,7 +5,7 @@
                 v-model="newBooleanValue"
                 inset
                 density="compact"
-                :readonly="IsOutputVariable"
+                :readonly="IsOutputVariable || !isEditable"
                 color="primary"
                 :messages="
                     isOperationVariable ? '' : 'greyed out value on the right shows the current value in the AAS'
@@ -17,9 +17,10 @@
                 </template>
             </v-switch>
         </template>
+        <!-- Update Value Button -->
         <template #append>
             <v-btn
-                v-if="!IsOperationVariable"
+                v-if="!IsOperationVariable && isEditable"
                 size="small"
                 variant="elevated"
                 color="primary"
@@ -40,7 +41,24 @@
     export default defineComponent({
         name: 'BooleanType',
         mixins: [RequestHandling],
-        props: ['booleanValue', 'isOperationVariable', 'variableType'],
+        props: {
+            booleanValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
index 22d1df1..f7c1a25 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
@@ -6,7 +6,8 @@
                 type="text"
                 variant="outlined"
                 density="compact"
-                clearable
+                :clearable="isEditable"
+                :readonly="!isEditable"
                 :color="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'warning'"
                 :persistent-hint="!IsOperationVariable"
                 :hint="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'Current Value not yet saved.'"
@@ -18,7 +19,7 @@
                 <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(dateTimeStampValue) }}</span>
                     <v-btn
-                        v-if="!IsOperationVariable"
+                        v-if="!IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
@@ -54,7 +55,24 @@
     export default defineComponent({
         name: 'DateTimeStampType',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['dateTimeStampValue', 'isOperationVariable', 'variableType'],
+        props: {
+            dateTimeStampValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
index 6e438b5..6cf413a 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
@@ -6,8 +6,8 @@
                 type="number"
                 variant="outlined"
                 density="compact"
-                clearable
-                :readonly="IsOutputVariable"
+                :clearable="isEditable"
+                :readonly="IsOutputVariable || !isEditable"
                 :hint="isOperationVariable ? '' : 'greyed out value on the left shows the current value in the AAS'"
                 :label="isOperationVariable ? numberValue.idShort : ''"
                 :hide-details="IsOperationVariable ? true : false"
@@ -36,7 +36,7 @@
                 <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(numberValue) }}</span>
                     <v-btn
-                        v-if="isFocused && !IsOperationVariable"
+                        v-if="isFocused && !IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
@@ -60,7 +60,24 @@
     export default defineComponent({
         name: 'NumberType',
         mixins: [RequestHandling, SubmodelElementHandling],
-        props: ['numberValue', 'isOperationVariable', 'variableType'],
+        props: {
+            numberValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
index 9716cbd..1c3f47c 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
@@ -5,8 +5,8 @@
                 v-model="newStringValue"
                 variant="outlined"
                 density="compact"
-                clearable
-                :readonly="IsOutputVariable"
+                :clearable="isEditable"
+                :readonly="IsOutputVariable || !isEditable"
                 auto-grow
                 :rows="1"
                 :label="isOperationVariable ? stringValue.idShort : ''"
@@ -15,7 +15,7 @@
                 <!-- Update Value Button -->
                 <template #append-inner>
                     <v-btn
-                        v-if="!IsOperationVariable"
+                        v-if="!IsOperationVariable && isEditable"
                         size="small"
                         variant="elevated"
                         color="primary"
@@ -38,7 +38,24 @@
     export default defineComponent({
         name: 'StringType',
         mixins: [RequestHandling],
-        props: ['stringValue', 'isOperationVariable', 'variableType'],
+        props: {
+            stringValue: {
+                type: Object,
+                default: () => ({}),
+            },
+            isOperationVariable: {
+                type: Boolean,
+                default: false,
+            },
+            variableType: {
+                type: String,
+                default: 'number',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         setup() {
             const aasStore = useAASStore();
diff --git a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
index c1cccf7..e3cedf9 100644
--- a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
+++ b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
@@ -8,24 +8,38 @@
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
                     <GenericDataVisu
-                        v-if="Array.isArray(submodelElement.value) && submodelElement.value.length > 0"
+                        v-if="
+                            Array.isArray(submodelElement.value) &&
+                            submodelElement.value.length > 0 &&
+                            submodelElement.modelType !== 'MultiLanguageProperty'
+                        "
                         :submodel-element-data="submodelElement.value"></GenericDataVisu>
                     <v-list v-else nav class="px-4 pt-0 pb-0">
                         <!-- SubmodelELement Representation for different modelTypes -->
                         <Property
                             v-if="submodelElement.modelType === 'Property'"
-                            :property-object="submodelElement"></Property>
+                            :property-object="submodelElement"
+                            :is-editable="false"></Property>
                         <MultyLanguageProperty
                             v-else-if="submodelElement.modelType === 'MultiLanguageProperty'"
-                            :multi-language-property-object="submodelElement"></MultyLanguageProperty>
+                            :multi-language-property-object="submodelElement"
+                            :is-editable="false"></MultyLanguageProperty>
                         <Operation
                             v-else-if="submodelElement.modelType === 'Operation'"
-                            :operation-object="submodelElement"></Operation>
-                        <File v-else-if="submodelElement.modelType === 'File'" :file-object="submodelElement"></File>
-                        <Blob v-else-if="submodelElement.modelType === 'Blob'" :blob-object="submodelElement"></Blob>
+                            :operation-object="submodelElement"
+                            :is-editable="false"></Operation>
+                        <File
+                            v-else-if="submodelElement.modelType === 'File'"
+                            :file-object="submodelElement"
+                            :is-editable="false"></File>
+                        <Blob
+                            v-else-if="submodelElement.modelType === 'Blob'"
+                            :blob-object="submodelElement"
+                            :is-editable="false"></Blob>
                         <ReferenceElement
                             v-else-if="submodelElement.modelType === 'ReferenceElement'"
-                            :reference-element-object="submodelElement"></ReferenceElement>
+                            :reference-element-object="submodelElement"
+                            :is-editable="false"></ReferenceElement>
                         <Range
                             v-else-if="submodelElement.modelType === 'Range'"
                             :range-object="submodelElement"></Range>
@@ -37,7 +51,8 @@
                             :relationship-element-object="submodelElement"></RelationshipElement>
                         <AnnotatedRelationshipElement
                             v-else-if="submodelElement.modelType === 'AnnotatedRelationshipElement'"
-                            :annotated-relationship-element-object="submodelElement"></AnnotatedRelationshipElement>
+                            :annotated-relationship-element-object="submodelElement"
+                            :is-editable="false"></AnnotatedRelationshipElement>
                         <InvalidElement v-else :invalid-element-object="submodelElement"></InvalidElement>
                     </v-list>
                 </v-expansion-panel-text>
diff --git a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
index b516440..455a391 100644
--- a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
+++ b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
@@ -3,27 +3,35 @@
         <v-card :variant="cardStyle ? cardStyle : 'elevated'">
             <v-list nav class="pt-0">
                 <MultiLanguageProperty
-                    v-if="SubmodelElementObject.modelType == 'MultiLanguageProperty'"
-                    :multi-language-property-object="SubmodelElementObject"></MultiLanguageProperty>
+                    v-if="submodelElementObject.modelType == 'MultiLanguageProperty'"
+                    :multi-language-property-object="submodelElementObject"
+                    :is-editable="isEditable"></MultiLanguageProperty>
                 <Property
-                    v-if="SubmodelElementObject.modelType == 'Property'"
-                    :property-object="SubmodelElementObject"
+                    v-if="submodelElementObject.modelType == 'Property'"
+                    :property-object="submodelElementObject"
+                    :is-editable="isEditable"
                     @update-value="updatePropertyValue"></Property>
-                <File v-if="SubmodelElementObject.modelType == 'File'" :file-object="SubmodelElementObject"></File>
-                <Blob v-if="SubmodelElementObject.modelType == 'Blob'" :blob-object="SubmodelElementObject"></Blob>
+                <File
+                    v-if="submodelElementObject.modelType == 'File'"
+                    :file-object="submodelElementObject"
+                    :is-editable="isEditable"></File>
+                <Blob v-if="submodelElementObject.modelType == 'Blob'" :blob-object="submodelElementObject"></Blob>
                 <Operation
-                    v-if="SubmodelElementObject.modelType == 'Operation'"
-                    :operation-object="SubmodelElementObject"></Operation>
+                    v-if="submodelElementObject.modelType == 'Operation'"
+                    :operation-object="submodelElementObject"
+                    :is-editable="isEditable"></Operation>
                 <ReferenceElement
-                    v-if="SubmodelElementObject.modelType == 'ReferenceElement'"
-                    :reference-element-object="SubmodelElementObject"></ReferenceElement>
-                <Range v-if="SubmodelElementObject.modelType == 'Range'" :range-object="SubmodelElementObject"></Range>
+                    v-if="submodelElementObject.modelType == 'ReferenceElement'"
+                    :reference-element-object="submodelElementObject"
+                    :is-editable="isEditable"></ReferenceElement>
+                <Range v-if="submodelElementObject.modelType == 'Range'" :range-object="submodelElementObject"></Range>
                 <RelationshipElement
-                    v-if="SubmodelElementObject.modelType == 'RelationshipElement'"
-                    :relationship-element-object="SubmodelElementObject"></RelationshipElement>
+                    v-if="submodelElementObject.modelType == 'RelationshipElement'"
+                    :relationship-element-object="submodelElementObject"></RelationshipElement>
                 <AnnotatedRelationshipElement
-                    v-if="SubmodelElementObject.modelType == 'AnnotatedRelationshipElement'"
-                    :annotated-relationship-element-object="SubmodelElementObject"></AnnotatedRelationshipElement>
+                    v-if="submodelElementObject.modelType == 'AnnotatedRelationshipElement'"
+                    :annotated-relationship-element-object="submodelElementObject"
+                    :is-editable="isEditable"></AnnotatedRelationshipElement>
             </v-list>
         </v-card>
     </v-container>
@@ -41,6 +49,8 @@
     import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
     import RelationshipElement from '@/components/SubmodelElements/RelationshipElement.vue';
 
+    type Variant = 'elevated' | 'outlined' | 'flat' | 'text' | 'tonal' | 'plain' | undefined;
+
     export default defineComponent({
         name: 'SubmodelELementWrapper',
         components: {
@@ -55,7 +65,20 @@
             RelationshipElement,
             AnnotatedRelationshipElement,
         },
-        props: ['SubmodelElementObject', 'cardStyle'],
+        props: {
+            submodelElementObject: {
+                type: Object,
+                default: () => ({}),
+            },
+            cardStyle: {
+                type: String as () => Variant,
+                default: 'elevated',
+            },
+            isEditable: {
+                type: Boolean,
+                default: true,
+            },
+        },
 
         methods: {
             // Function to update the value of a property