diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js
index 3e99ddd1d..345226593 100644
--- a/web/components/enum-settings-option.react.js
+++ b/web/components/enum-settings-option.react.js
@@ -1,97 +1,102 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import Checkbox from './checkbox.react';
 import EnumSettingsOptionInfo from './enum-settings-option-info.react.js';
 import css from './enum-settings-option.css';
 import Radio from './radio.react';
 
 const iconPositionClassnames = {
   top: css.optionIconTop,
   center: css.optionIconCenter,
   bottom: css.optionIconBottom,
 };
 
 type InputType = 'radio' | 'checkbox';
 type IconPosition = $Keys<typeof iconPositionClassnames>;
 
 type Props = {
   +selected: boolean,
   +onSelect: () => void,
+  +disabled?: boolean,
   +icon: React.Node,
   +title: string,
   +type?: InputType,
   +iconPosition?: IconPosition,
   +statements: $ReadOnlyArray<{
     +statement: string,
     +isStatementValid: boolean,
     +styleStatementBasedOnValidity: boolean,
   }>,
 };
 
 function EnumSettingsOption(props: Props): React.Node {
   const {
     icon,
     title,
     statements,
     selected,
     onSelect,
+    disabled = false,
     type = 'radio',
     iconPosition = 'center',
   } = props;
 
   const descriptionItems = React.useMemo(
     () =>
       statements.map(
         ({ statement, isStatementValid, styleStatementBasedOnValidity }) => (
           <EnumSettingsOptionInfo
             key={statement}
             optionSelected={selected}
             valid={isStatementValid}
             styleStatementBasedOnValidity={styleStatementBasedOnValidity}
           >
             {statement}
           </EnumSettingsOptionInfo>
         ),
       ),
     [selected, statements],
   );
 
-  const inputIcon = React.useMemo(
-    () =>
-      type === 'checkbox' ? (
-        <Checkbox checked={selected} />
-      ) : (
-        <Radio checked={selected} />
-      ),
-    [type, selected],
-  );
+  const inputIcon = React.useMemo(() => {
+    if (disabled) {
+      return null;
+    } else if (type === 'checkbox') {
+      return <Checkbox checked={selected} />;
+    } else if (type === 'radio') {
+      return <Radio checked={selected} />;
+    }
+  }, [disabled, type, selected]);
 
   const optionContainerClasses = React.useMemo(
     () =>
       classnames(css.optionContainer, {
         [css.optionContainerSelected]: selected,
       }),
     [selected],
   );
 
   const optionIconClasses = React.useMemo(
     () => classnames(css.optionIcon, iconPositionClassnames[iconPosition]),
     [iconPosition],
   );
 
   return (
-    <div className={optionContainerClasses} onClick={onSelect}>
+    <div
+      className={optionContainerClasses}
+      onClick={disabled ? null : onSelect}
+    >
       <div className={optionIconClasses}>{icon}</div>
       <div className={css.optionContent}>
         <div className={css.optionTitle}>{title}</div>
         <div className={css.optionDescription}>{descriptionItems}</div>
       </div>
       {inputIcon}
     </div>
   );
 }
 
 export default EnumSettingsOption;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
index 8e1d85b22..7737f2cd8 100644
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -1,214 +1,215 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateSubscription,
   updateSubscriptionActionTypes,
 } from 'lib/actions/user-actions';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { threadIsSidebar } from 'lib/shared/thread-utils';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import AllNotifsIllustration from '../../../assets/all-notifs.react.js';
 import BadgeNotifsIllustration from '../../../assets/badge-notifs.react.js';
 import MutedNotifsIllustration from '../../../assets/muted-notifs.react.js';
 import Button from '../../../components/button.react';
 import EnumSettingsOption from '../../../components/enum-settings-option.react';
 import { useSelector } from '../../../redux/redux-utils';
 import Modal from '../../modal.react';
 import css from './notifications-modal.css';
 
 type NotificationSettings = 'focused' | 'badge-only' | 'background';
 
 const BANNER_NOTIFS = 'Banner notifs';
 const BADGE_COUNT = 'Badge count';
 const IN_FOCUSED_TAB = 'Lives in Focused tab';
 const IN_BACKGROUND_TAB = 'Lives in Background tab';
 
 const focusedStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_FOCUSED_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 const badgeOnlyStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_FOCUSED_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 const backgroundStatements = [
   {
     statement: BANNER_NOTIFS,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: BADGE_COUNT,
     isStatementValid: false,
     styleStatementBasedOnValidity: true,
   },
   {
     statement: IN_BACKGROUND_TAB,
     isStatementValid: true,
     styleStatementBasedOnValidity: true,
   },
 ];
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 function NotificationsModal(props: Props): React.Node {
   const { onClose, threadID } = props;
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { subscription } = threadInfo.currentUser;
   const isSidebar = threadIsSidebar(threadInfo);
 
   const initialThreadSetting = React.useMemo<NotificationSettings>(() => {
     if (!subscription.home) {
       return 'background';
     }
     if (!subscription.pushNotifs) {
       return 'badge-only';
     }
     return 'focused';
   }, [subscription.home, subscription.pushNotifs]);
 
   const [
     notificationSettings,
     setNotificationSettings,
   ] = React.useState<NotificationSettings>(initialThreadSetting);
 
   const onFocusedSelected = React.useCallback(
     () => setNotificationSettings('focused'),
     [],
   );
   const onBadgeOnlySelected = React.useCallback(
     () => setNotificationSettings('badge-only'),
     [],
   );
   const onBackgroundSelected = React.useCallback(
     () => setNotificationSettings('background'),
     [],
   );
 
   const isFocusedSelected = notificationSettings === 'focused';
   const focusedItem = React.useMemo(() => {
     const icon = <AllNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isFocusedSelected}
         title="Focused (enabled)"
         statements={focusedStatements}
         icon={icon}
         onSelect={onFocusedSelected}
       />
     );
   }, [isFocusedSelected, onFocusedSelected]);
 
   const isFocusedBadgeOnlySelected = notificationSettings === 'badge-only';
   const focusedBadgeOnlyItem = React.useMemo(() => {
     const icon = <BadgeNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isFocusedBadgeOnlySelected}
         title="Focused (badge only)"
         statements={badgeOnlyStatements}
         icon={icon}
         onSelect={onBadgeOnlySelected}
       />
     );
   }, [isFocusedBadgeOnlySelected, onBadgeOnlySelected]);
 
   const isBackgroundSelected = notificationSettings === 'background';
   const backgroundItem = React.useMemo(() => {
     const icon = <MutedNotifsIllustration />;
     return (
       <EnumSettingsOption
         selected={isBackgroundSelected}
         title="Background"
         statements={backgroundStatements}
         icon={icon}
+        disabled={isSidebar}
         onSelect={onBackgroundSelected}
       />
     );
-  }, [isBackgroundSelected, onBackgroundSelected]);
+  }, [isBackgroundSelected, onBackgroundSelected, isSidebar]);
 
   const dispatchActionPromise = useDispatchActionPromise();
 
   const callUpdateSubscription = useServerCall(updateSubscription);
 
   const onClickSave = React.useCallback(() => {
     dispatchActionPromise(
       updateSubscriptionActionTypes,
       callUpdateSubscription({
         threadID: threadID,
         updatedFields: {
           home: notificationSettings !== 'background',
           pushNotifs: notificationSettings === 'focused',
         },
       }),
     );
     onClose();
   }, [
     callUpdateSubscription,
     dispatchActionPromise,
     notificationSettings,
     onClose,
     threadID,
   ]);
 
   const modalName = isSidebar
     ? 'Thread notifications'
     : 'Channel notifications';
 
   return (
     <Modal name={modalName} size="fit-content" onClose={onClose}>
       <div className={css.container}>
         <div className={css.optionsContainer}>
           {focusedItem}
           {focusedBadgeOnlyItem}
           {backgroundItem}
         </div>
         <Button
           type="primary"
           onClick={onClickSave}
           disabled={notificationSettings === initialThreadSetting}
         >
           Save
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default NotificationsModal;