diff --git a/client/src/components/settings/toggle-radio-setting.tsx b/client/src/components/settings/toggle-radio-setting.tsx
index bf0db5866a3..59002521eef 100644
--- a/client/src/components/settings/toggle-radio-setting.tsx
+++ b/client/src/components/settings/toggle-radio-setting.tsx
@@ -40,7 +40,7 @@ export default function ToggleRadioSetting({
         {explain ? <p id={`desc${flagName}`}>{explain}</p> : null}
       </div>
       <div className='toggle-radio-group'>
-        <label htmlFor={firstRadioId}>
+        <label className={!flag ? 'not-checked' : ''} htmlFor={firstRadioId}>
           <input
             id={firstRadioId}
             type='radio'
@@ -52,7 +52,7 @@ export default function ToggleRadioSetting({
           <span className='custom-circle'></span>
           <span>{onLabel}</span>
         </label>
-        <label htmlFor={secondRadioId}>
+        <label className={flag ? 'not-checked' : ''} htmlFor={secondRadioId}>
           <input
             id={secondRadioId}
             type='radio'
diff --git a/client/src/components/settings/toggle-setting.css b/client/src/components/settings/toggle-setting.css
index b93cc77cf6d..ce460067194 100644
--- a/client/src/components/settings/toggle-setting.css
+++ b/client/src/components/settings/toggle-setting.css
@@ -75,6 +75,10 @@
   margin-inline-start: 2rem;
 }
 
+.toggle-radio-group label.not-checked {
+  cursor: pointer;
+}
+
 .toggle-radio-group input {
   position: absolute;
   left: -9999px;