diff --git a/ts/components/Stories.tsx b/ts/components/Stories.tsx
index f6228f27a..8ba51b6e6 100644
--- a/ts/components/Stories.tsx
+++ b/ts/components/Stories.tsx
@@ -24,6 +24,7 @@ import { MyStories } from './MyStories';
 import { StoriesPane } from './StoriesPane';
 import { Theme, themeClassName } from '../util/theme';
 import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
+import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
 export type PropsType = {
   deleteStoryForEveryone: (story: StoryViewType) => unknown;
@@ -45,6 +46,8 @@ export type PropsType = {
   toggleStoriesView: () => unknown;
   viewUserStories: ViewUserStoriesActionCreatorType;
   viewStory: ViewStoryActionCreatorType;
+  isViewingStory: boolean;
+  isStoriesSettingsVisible: boolean;
 };
 
 type AddStoryType =
@@ -75,6 +78,8 @@ export const Stories = ({
   toggleStoriesView,
   viewUserStories,
   viewStory,
+  isViewingStory,
+  isStoriesSettingsVisible,
 }: PropsType): JSX.Element => {
   const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
     requiresFullWidth: true,
@@ -83,6 +88,15 @@ export const Stories = ({
   const [addStoryData, setAddStoryData] = useState<AddStoryType>();
   const [isMyStories, setIsMyStories] = useState(false);
 
+  // only handle ESC if not showing a child that handles their own ESC
+  useEscapeHandling(
+    (isMyStories && myStories.length) ||
+      isViewingStory ||
+      isStoriesSettingsVisible
+      ? undefined
+      : toggleStoriesView
+  );
+
   return (
     <div className={classNames('Stories', themeClassName(Theme.Dark))}>
       {addStoryData &&
diff --git a/ts/state/smart/Stories.tsx b/ts/state/smart/Stories.tsx
index 2bfa3b3f5..327933253 100644
--- a/ts/state/smart/Stories.tsx
+++ b/ts/state/smart/Stories.tsx
@@ -13,7 +13,11 @@ import { getMe } from '../selectors/conversations';
 import { getIntl } from '../selectors/user';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getPreferredLeftPaneWidth } from '../selectors/items';
-import { getStories, shouldShowStoriesView } from '../selectors/stories';
+import {
+  getSelectedStoryData,
+  getStories,
+  shouldShowStoriesView,
+} from '../selectors/stories';
 import { saveAttachment } from '../../util/saveAttachment';
 import { useConversationsActions } from '../ducks/conversations';
 import { useGlobalModalActions } from '../ducks/globalModals';
@@ -49,6 +53,12 @@ export function SmartStories(): JSX.Element | null {
 
   const me = useSelector(getMe);
 
+  const selectedStoryData = useSelector(getSelectedStoryData);
+
+  const isStoriesSettingsVisible = useSelector(
+    (state: StateType) => state.globalModals.isStoriesSettingsVisible
+  );
+
   if (!isShowingStoriesView) {
     return null;
   }
@@ -75,6 +85,8 @@ export function SmartStories(): JSX.Element | null {
       showToast={showToast}
       stories={stories}
       toggleHideStories={toggleHideStories}
+      isViewingStory={selectedStoryData !== undefined}
+      isStoriesSettingsVisible={isStoriesSettingsVisible}
       {...storiesActions}
     />
   );