diff --git a/web/modals/threads/notifications/enum-settings-option-info.css b/web/modals/threads/notifications/enum-settings-option-info.css
new file mode 100644
index 000000000..cae703a4f
--- /dev/null
+++ b/web/modals/threads/notifications/enum-settings-option-info.css
@@ -0,0 +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 {
+  color: var(--notification-settings-option-invalid-selected-color);
+}
diff --git a/web/modals/threads/notifications/enum-settings-option-info.react.js b/web/modals/threads/notifications/enum-settings-option-info.react.js
index a1b96c816..eb8ef4383 100644
--- a/web/modals/threads/notifications/enum-settings-option-info.react.js
+++ b/web/modals/threads/notifications/enum-settings-option-info.react.js
@@ -1,37 +1,37 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import SWMansionIcon from '../../../SWMansionIcon.react';
-import css from './notifications-modal.css';
+import css from './enum-settings-option-info.css';
 
 type Props = {
   +valid: boolean,
   +children: React.Node,
 };
 
 function EnumSettingsOptionInfo(props: Props): React.Node {
   const { valid, children } = props;
 
   const optionInfoClasses = React.useMemo(
     () =>
       classnames(css.optionInfo, {
         [css.optionInfoInvalid]: !valid,
       }),
     [valid],
   );
 
   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/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/enum-settings-option.css
similarity index 56%
copy from web/modals/threads/notifications/notifications-modal.css
copy to web/modals/threads/notifications/enum-settings-option.css
index 41cb92f30..9e07c678e 100644
--- a/web/modals/threads/notifications/notifications-modal.css
+++ b/web/modals/threads/notifications/enum-settings-option.css
@@ -1,66 +1,36 @@
-div.container {
-  display: flex;
-  flex-direction: column;
-  color: var(--fg);
-  margin: 24px 32px;
-  row-gap: 40px;
-  min-width: 343px;
-}
-
-div.optionsContainer {
-  display: flex;
-  flex-direction: column;
-  row-gap: 12px;
-}
-
 div.optionContainer {
   display: flex;
   padding: 16px 32px 16px 16px;
   align-items: center;
   border-radius: 8px;
 }
 
 div.optionContainerSelected {
   background: var(--notification-settings-option-selected-bg);
 }
 
 div.optionIcon {
   margin-right: 24px;
 }
 
 div.optionContent {
   display: flex;
   flex-direction: column;
   flex: 1;
   line-height: var(--line-height-text);
 }
 
 div.optionTitle {
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   color: var(--notification-settings-option-title-color);
   margin-bottom: 4px;
 }
 
 div.optionDescription {
   font-size: var(--xs-font-12);
   color: var(--notification-settings-option-color);
   display: flex;
   flex-direction: column;
   row-gap: 4px;
 }
-
-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 {
-  color: var(--notification-settings-option-invalid-selected-color);
-}
diff --git a/web/modals/threads/notifications/enum-settings-option.react.js b/web/modals/threads/notifications/enum-settings-option.react.js
index e72f11d47..7a56f4ebc 100644
--- a/web/modals/threads/notifications/enum-settings-option.react.js
+++ b/web/modals/threads/notifications/enum-settings-option.react.js
@@ -1,50 +1,50 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import Radio from '../../../components/radio.react';
 import EnumSettingsOptionInfo from './enum-settings-option-info.react';
-import css from './notifications-modal.css';
+import css from './enum-settings-option.css';
 
 type Props = {
   +selected: boolean,
   +onSelect: () => void,
   +icon: React.Node,
   +title: string,
   +description: $ReadOnlyArray<[string, boolean]>,
 };
 
 function EnumSettingsOption(props: Props): React.Node {
   const { icon, title, description, selected, onSelect } = props;
 
   const descriptionItems = React.useMemo(
     () =>
       description.map(([text, isValid]) => (
         <EnumSettingsOptionInfo key={text} valid={isValid}>
           {text}
         </EnumSettingsOptionInfo>
       )),
     [description],
   );
 
   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;
diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css
index 41cb92f30..e0522e224 100644
--- a/web/modals/threads/notifications/notifications-modal.css
+++ b/web/modals/threads/notifications/notifications-modal.css
@@ -1,66 +1,14 @@
 div.container {
   display: flex;
   flex-direction: column;
   color: var(--fg);
   margin: 24px 32px;
   row-gap: 40px;
   min-width: 343px;
 }
 
 div.optionsContainer {
   display: flex;
   flex-direction: column;
   row-gap: 12px;
 }
-
-div.optionContainer {
-  display: flex;
-  padding: 16px 32px 16px 16px;
-  align-items: center;
-  border-radius: 8px;
-}
-
-div.optionContainerSelected {
-  background: var(--notification-settings-option-selected-bg);
-}
-
-div.optionIcon {
-  margin-right: 24px;
-}
-
-div.optionContent {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  line-height: var(--line-height-text);
-}
-
-div.optionTitle {
-  font-size: var(--m-font-16);
-  font-weight: var(--semi-bold);
-  color: var(--notification-settings-option-title-color);
-  margin-bottom: 4px;
-}
-
-div.optionDescription {
-  font-size: var(--xs-font-12);
-  color: var(--notification-settings-option-color);
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-}
-
-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 {
-  color: var(--notification-settings-option-invalid-selected-color);
-}