diff --git a/web/components/enum-settings-option-info.css b/web/components/enum-settings-option-info.css
index cae703a4f..fc1332338 100644
--- a/web/components/enum-settings-option-info.css
+++ b/web/components/enum-settings-option-info.css
@@ -1,14 +1,14 @@
 div.optionInfo {
   display: flex;
   align-items: center;
   column-gap: 4px;
 }
 
 div.optionInfoInvalid {
   text-decoration: line-through;
   color: var(--notification-settings-option-invalid-color);
 }
 
-div.optionContainerSelected div.optionInfoInvalid {
+div.optionInfoInvalidSelected {
   color: var(--notification-settings-option-invalid-selected-color);
 }
diff --git a/web/components/enum-settings-option-info.react.js b/web/components/enum-settings-option-info.react.js
index dbcb88474..1807e7328 100644
--- a/web/components/enum-settings-option-info.react.js
+++ b/web/components/enum-settings-option-info.react.js
@@ -1,37 +1,40 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './enum-settings-option-info.css';
 
 type Props = {
+  +optionSelected: boolean,
   +valid: boolean,
   +children: React.Node,
 };
 
 function EnumSettingsOptionInfo(props: Props): React.Node {
-  const { valid, children } = props;
+  const { valid, children, optionSelected } = props;
 
   const optionInfoClasses = React.useMemo(
     () =>
-      classnames(css.optionInfo, {
+      classnames({
+        [css.optionInfo]: true,
         [css.optionInfoInvalid]: !valid,
+        [css.optionInfoInvalidSelected]: !valid && optionSelected,
       }),
-    [valid],
+    [valid, optionSelected],
   );
 
   const icon = React.useMemo(
     () => <SWMansionIcon icon={valid ? 'check' : 'cross'} size={12} />,
     [valid],
   );
   return (
     <div className={optionInfoClasses}>
       {icon}
       {children}
     </div>
   );
 }
 
 export default EnumSettingsOptionInfo;
diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js
index 1cc865ef3..e6d639d61 100644
--- a/web/components/enum-settings-option.react.js
+++ b/web/components/enum-settings-option.react.js
@@ -1,53 +1,57 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import EnumSettingsOptionInfo from './enum-settings-option-info.react.js';
 import css from './enum-settings-option.css';
 import Radio from './radio.react';
 
 type Props = {
   +selected: boolean,
   +onSelect: () => void,
   +icon: React.Node,
   +title: string,
   +statements: $ReadOnlyArray<{
     +statement: string,
     +isStatementValid: boolean,
   }>,
 };
 
 function EnumSettingsOption(props: Props): React.Node {
   const { icon, title, statements, selected, onSelect } = props;
 
   const descriptionItems = React.useMemo(
     () =>
       statements.map(({ statement, isStatementValid }) => (
-        <EnumSettingsOptionInfo key={statement} valid={isStatementValid}>
+        <EnumSettingsOptionInfo
+          key={statement}
+          optionSelected={selected}
+          valid={isStatementValid}
+        >
           {statement}
         </EnumSettingsOptionInfo>
       )),
-    [statements],
+    [selected, statements],
   );
 
   const optionContainerClasses = React.useMemo(
     () =>
       classnames(css.optionContainer, {
         [css.optionContainerSelected]: selected,
       }),
     [selected],
   );
   return (
     <div className={optionContainerClasses} onClick={onSelect}>
       <div className={css.optionIcon}>{icon}</div>
       <div className={css.optionContent}>
         <div className={css.optionTitle}>{title}</div>
         <div className={css.optionDescription}>{descriptionItems}</div>
       </div>
       <Radio checked={selected} />
     </div>
   );
 }
 
 export default EnumSettingsOption;