diff --git a/web/assets.js b/web/assets.js
index b017c189f..dff6d19aa 100644
--- a/web/assets.js
+++ b/web/assets.js
@@ -1,24 +1,17 @@
 // @flow
 
 export const assetCacheURLPrefix = 'https://dh9fld3hutpxf.cloudfront.net';
 
-// Notifications Modal Illustration: "Focused"
-export const focusedNotificationsIllustrationAsset = {
-  fileName: 'all-notifs.svg',
-  height: '86px',
-  width: '46px',
-};
-
 // Notifications Modal Illustration: "Focused (badge only)"
 export const badgeOnlyNotificationsIllustrationAsset = {
   fileName: 'badge-notifs.svg',
   height: '86px',
   width: '46px',
 };
 
 // Notifications Modal Illustration: "Background"
 export const backgroundNotificationsIllustrationAsset = {
   fileName: 'muted-notifs.svg',
   height: '86px',
   width: '46px',
 };
diff --git a/web/assets/all-notifs.react.js b/web/assets/all-notifs.react.js
new file mode 100644
index 000000000..31f160785
--- /dev/null
+++ b/web/assets/all-notifs.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import * as React from 'react';
+
+function AllNotifsIllustration(): React.Node {
+  return (
+    <svg width={46} height={86} xmlns="http://www.w3.org/2000/svg">
+      <title>{'all-notifs'}</title>
+      <g transform="translate(.5 .5)" fill="none" fillRule="evenodd">
+        <path
+          d="M5.5 0h34A5.5 5.5 0 0 1 45 5.5v74a5.5 5.5 0 0 1-5.5 5.5h-34A5.5 5.5 0 0 1 0 79.5v-74A5.5 5.5 0 0 1 5.5 0Z"
+          stroke="#666"
+        />
+        <circle fill="#C4C4C4" fillRule="nonzero" cx={22.5} cy={75.5} r={3} />
+        <path
+          d="M41.5 13.643a3.143 3.143 0 0 0-3.143-3.143H6.643A3.143 3.143 0 0 0 3.5 13.643v4.714A3.143 3.143 0 0 0 6.643 21.5h31.714a3.143 3.143 0 0 0 3.143-3.143v-4.714Z"
+          fill="#7E57C2"
+          fillRule="nonzero"
+        />
+        <path
+          d="M16.9 46.5h11.2a1.4 1.4 0 0 1 1.4 1.4v11.2a1.4 1.4 0 0 1-1.4 1.4H16.9a1.4 1.4 0 0 1-1.4-1.4V47.9a1.4 1.4 0 0 1 1.4-1.4Z"
+          fill="gray"
+          fillRule="nonzero"
+        />
+        <path
+          d="M12.5 41.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Zm.62 5.701h-.78l-1.321.864v.766l1.268-.828h.03V52.5h.803v-5.299Z"
+          fill="#7E57C2"
+          fillRule="nonzero"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default AllNotifsIllustration;
diff --git a/web/modals/threads/notifications/notifications-modal.react.js b/web/modals/threads/notifications/notifications-modal.react.js
index ebf784ad7..23a95a879 100644
--- a/web/modals/threads/notifications/notifications-modal.react.js
+++ b/web/modals/threads/notifications/notifications-modal.react.js
@@ -1,229 +1,223 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   updateSubscription,
   updateSubscriptionActionTypes,
 } from 'lib/actions/user-actions';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import {
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import {
   assetCacheURLPrefix,
-  focusedNotificationsIllustrationAsset,
   badgeOnlyNotificationsIllustrationAsset,
   backgroundNotificationsIllustrationAsset,
 } from '../../../assets.js';
+import AllNotifsIllustration from '../../../assets/all-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 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 = (
-      <img
-        src={`${assetCacheURLPrefix}/${focusedNotificationsIllustrationAsset.fileName}`}
-        height={focusedNotificationsIllustrationAsset.height}
-        width={focusedNotificationsIllustrationAsset.width}
-      />
-    );
+    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 = (
       <img
         src={`${assetCacheURLPrefix}/${badgeOnlyNotificationsIllustrationAsset.fileName}`}
         height={badgeOnlyNotificationsIllustrationAsset.height}
         width={badgeOnlyNotificationsIllustrationAsset.width}
       />
     );
     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 = (
       <img
         src={`${assetCacheURLPrefix}/${backgroundNotificationsIllustrationAsset.fileName}`}
         height={backgroundNotificationsIllustrationAsset.height}
         width={backgroundNotificationsIllustrationAsset.width}
       />
     );
     return (
       <EnumSettingsOption
         selected={isBackgroundSelected}
         title="Background"
         statements={backgroundStatements}
         icon={icon}
         onSelect={onBackgroundSelected}
       />
     );
   }, [isBackgroundSelected, onBackgroundSelected]);
 
   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,
   ]);
 
   return (
     <Modal name="Channel notifications" 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;