diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index aaa23a5..6b5d6b9 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -69,7 +69,12 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
           {readOnly ? (
             // Display the Form.Control when readOnly is true
             <Form.Control
-              value={enumDict[enumValue]}
+              style={
+                attribute.type == 'ColouredEnum'
+                  ? { backgroundColor: enumDict[enumValue] }
+                  : {}
+              }
+              value={attribute.type == 'ColouredEnum' ? enumValue : enumDict[enumValue]}
               name={fullAccessPath}
               disabled={true}
             />