diff --git a/typescripts/controlnet/ControlNetUnit.tsx b/typescripts/controlnet/ControlNetUnit.tsx
index ae7cb18..2a8ac69 100644
--- a/typescripts/controlnet/ControlNetUnit.tsx
+++ b/typescripts/controlnet/ControlNetUnit.tsx
@@ -616,27 +616,42 @@ export default class ControlNetUnit extends React.Component<
                     </SpCheckBox>
                     {this.props.appState.controlnetApiVersion > 1 && (
                         <sp-radio-group
-                            id={`rgControlNetMode_${this.props.index}`}
                             style={{ display: 'flex' }}
+                            selected={
+                                this.props.appState.controlNetUnitData[
+                                    this.props.index
+                                ].control_mode
+                            }
+                            onClick={(event: any) => {
+                                this.props.appState.controlNetUnitData[
+                                    this.props.index
+                                ].control_mode = event.target.value
+                            }}
                         >
                             <sp-label slot="label">
                                 {Locale('Control Mode')}
                             </sp-label>
-                            <sp-radio checked value="0">
-                                {Locale('Balanced')}
-                            </sp-radio>
-                            <sp-radio
-                                title="My prompt is more important"
-                                value="1"
-                            >
-                                {Locale('My prompt is more important')}
-                            </sp-radio>
-                            <sp-radio
-                                title="ControlNet is more important"
-                                value="2"
-                            >
-                                {Locale('ControlNet is more important')}
-                            </sp-radio>
+                            {controlnetModes.map(
+                                (mode: ControlnetMode, index: number) => {
+                                    console.log('mode:', mode, ' index:', index)
+                                    return (
+                                        <sp-radio
+                                            key={`mode-${index}`}
+                                            checked={
+                                                this.props.appState
+                                                    .controlNetUnitData[
+                                                    this.props.index
+                                                ].control_mode === mode
+                                                    ? true
+                                                    : void 0
+                                            }
+                                            value={`${mode}`}
+                                        >
+                                            {Locale(mode)}
+                                        </sp-radio>
+                                    )
+                                }
+                            )}
                         </sp-radio-group>
                     )}
 
diff --git a/typescripts/controlnet/store.ts b/typescripts/controlnet/store.ts
index 4cea5e2..2a42711 100644
--- a/typescripts/controlnet/store.ts
+++ b/typescripts/controlnet/store.ts
@@ -23,6 +23,13 @@ export const DefaultControlNetUnitData = {
     auto_image: true,
 }
 
+export const controlnetModes = [
+    'Balanced',
+    'My prompt is more important',
+    'ControlNet is more important',
+] as const
+export type ControlnetMode = (typeof controlnetModes)[number]
+
 export interface controlNetUnitData {
     enabled: boolean
     input_image: string
@@ -44,10 +51,7 @@ export interface controlNetUnitData {
     guidance_end: number
     guessmode: boolean
 
-    control_mode:
-        | 'Balanced'
-        | 'My prompt is more important'
-        | 'ControlNet is more important'
+    control_mode: ControlnetMode
     pixel_perfect: boolean
     auto_image: boolean // sync CtrlNet image with sd input image
 }