diff --git a/frontend/src/components/EnumComponent.tsx b/frontend/src/components/EnumComponent.tsx
index 70f2f0d..f8ef4bd 100644
--- a/frontend/src/components/EnumComponent.tsx
+++ b/frontend/src/components/EnumComponent.tsx
@@ -73,7 +73,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
 
           {readOnly ? (
             // Display the Form.Control when readOnly is true
-            <Form.Control value={enumValue} name={name} disabled={true} />
+            <Form.Control value={enumDict[enumValue]} name={name} disabled={true} />
           ) : (
             // Display the Form.Select when readOnly is false
             <Form.Select
@@ -83,7 +83,7 @@ export const EnumComponent = React.memo((props: EnumComponentProps) => {
               onChange={(event) => changeCallback(event.target.value)}>
               {Object.entries(enumDict).map(([key, val]) => (
                 <option key={key} value={key}>
-                  {key} - {val}
+                  {val}
                 </option>
               ))}
             </Form.Select>