diff --git a/public/images/news_desktop_image.webp b/public/images/news_desktop_image.webp
new file mode 100644
index 00000000000..81b4fc4a3a5
Binary files /dev/null and b/public/images/news_desktop_image.webp differ
diff --git a/public/images/news_mobile_image.webp b/public/images/news_mobile_image.webp
new file mode 100644
index 00000000000..aad92f918d1
Binary files /dev/null and b/public/images/news_mobile_image.webp differ
diff --git a/public/images/news_tablet_image.webp b/public/images/news_tablet_image.webp
new file mode 100644
index 00000000000..3d95321f243
Binary files /dev/null and b/public/images/news_tablet_image.webp differ
diff --git a/src/app/components/Account/AccountPromotionalBanner/index.stories.tsx b/src/app/components/Account/AccountPromotionalBanner/index.stories.tsx
index 40836d9ae12..4f25ada5a26 100644
--- a/src/app/components/Account/AccountPromotionalBanner/index.stories.tsx
+++ b/src/app/components/Account/AccountPromotionalBanner/index.stories.tsx
@@ -2,6 +2,7 @@ import AccountPromotionalBanner from '.';
 import mockIdctaConfig from '#app/contexts/AccountContext/mocks';
 import readme from './README.md';
 import { DISPLAY_ACCOUNT_PROMOTIONAL_BANNER_CSS_CLASS } from './utilities';
+import AccountSignInModal from '../AccountSignInModal';
 
 export default {
   title: 'Account/AccountPromotionalBanner',
@@ -30,3 +31,11 @@ export const SignedIn = () => <AccountPromotionalBanner />;
 SignedIn.globals = {
   idctaConfig: { ...mockIdctaConfig, initialIsSignedIn: true },
 };
+
+export const SignedOutModal = () => (
+  <AccountSignInModal
+    onClose={() => {}}
+    signInUrl="https://example.com/signin"
+    registerUrl="https://example.com/register"
+  />
+);
diff --git a/src/app/components/Account/AccountPromotionalBanner/index.tsx b/src/app/components/Account/AccountPromotionalBanner/index.tsx
index e78ea84b643..d5e83dbbb38 100644
--- a/src/app/components/Account/AccountPromotionalBanner/index.tsx
+++ b/src/app/components/Account/AccountPromotionalBanner/index.tsx
@@ -1,6 +1,8 @@
 import { use, useState, useCallback } from 'react';
 import { Helmet } from 'react-helmet';
+import type { Interpolation, Theme } from '@emotion/react';
 import PromotionalBanner from '#app/components/PromotionalBanner';
+import type { PromotionalBannerStyleOverrides } from '#app/components/PromotionalBanner/index.types';
 import AccountActionButtons from '#app/components/Account/AccountActionButtons';
 import { AccountContext } from '#contexts/AccountContext';
 import { ServiceContext } from '#app/contexts/ServiceContext';
@@ -17,7 +19,15 @@ import {
 } from './utilities';
 import styles from './index.styles';
 
-const AccountPromotionalBanner = () => {
+type AccountPromotionalBannerProps = {
+  styleOverrides?: PromotionalBannerStyleOverrides & {
+    signInImage?: Interpolation<Theme>;
+  };
+};
+
+const AccountPromotionalBanner = ({
+  styleOverrides,
+}: AccountPromotionalBannerProps) => {
   const { enabled: accountEnabled } = useToggle('account');
   const { isSignedIn, isIdctaAvailable, signInUrl, registerUrl } =
     use(AccountContext);
@@ -62,6 +72,9 @@ const AccountPromotionalBanner = () => {
 
   const { title, description, closeLabel, buttonSeparatorText } =
     accountPromoBannerTranslations;
+  const { signInImage, ...promotionalBannerStyleOverrides } =
+    styleOverrides ?? {};
+  const signInBannerImage = <div css={signInImage} aria-hidden="true" />;
 
   return (
     <>
@@ -81,6 +94,8 @@ const AccountPromotionalBanner = () => {
           bannerLabel={title}
           closeLabel={closeLabel}
           buttonSeparatorText={buttonSeparatorText}
+          topImage={signInBannerImage}
+          styleOverrides={promotionalBannerStyleOverrides}
           isDismissible
           onClose={handleCloseClick}
         >
diff --git a/src/app/components/Account/AccountSignInModal/index.styles.tsx b/src/app/components/Account/AccountSignInModal/index.styles.tsx
new file mode 100644
index 00000000000..3518b71e21e
--- /dev/null
+++ b/src/app/components/Account/AccountSignInModal/index.styles.tsx
@@ -0,0 +1,239 @@
+import { Theme, css } from '@emotion/react';
+import {
+  GROUP_A_MAX_WIDTH,
+  GROUP_B_MIN_WIDTH,
+  GROUP_B_ONLY,
+} from '#app/components/ThemeProvider/fontMediaQueries';
+import {
+  GROUP_3_ONLY,
+  GROUP_4_MIN_WIDTH,
+} from '#app/components/ThemeProvider/mediaQueries';
+import pixelsToRem from '#app/utilities/pixelsToRem';
+
+export default {
+  modal: css({
+    position: 'fixed',
+    inset: 0,
+    zIndex: 2147483647,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+
+  backdrop: css({
+    position: 'absolute',
+    inset: 0,
+    backgroundColor: 'rgba(20, 20, 20, 0.9)',
+    backdropFilter: 'blur(0.2rem)',
+    zIndex: 0,
+  }),
+
+  modalContent: ({ palette }: Theme) =>
+    css({
+      position: 'relative',
+      zIndex: 1,
+      width: `${pixelsToRem(288)}rem`,
+      overflow: 'hidden',
+      display: 'flex',
+      flexDirection: 'column',
+      background: `linear-gradient(to bottom left, ${palette.POSTBOX} 0%, ${palette.BLACK} 50%, ${palette.POSTBOX} 100%)`,
+      // 0px - 319px
+      [GROUP_A_MAX_WIDTH]: {
+        width: `${pixelsToRem(222)}rem`,
+      },
+      // 320px - 599px
+      [GROUP_B_ONLY]: {
+        width: `${pixelsToRem(288)}rem`,
+      },
+      // 600px - 1007px
+      [GROUP_3_ONLY]: {
+        width: `${pixelsToRem(510)}rem`,
+      },
+      // 1008px and above
+      [GROUP_4_MIN_WIDTH]: {
+        width: `${pixelsToRem(792)}rem`,
+        minHeight: `${pixelsToRem(488)}rem`,
+      },
+    }),
+
+  promotionalBannerOverrides: {
+    banner: css({
+      background: 'transparent',
+    }),
+
+    content: ({ spacings }: Theme) =>
+      css({
+        alignItems: 'center',
+        textAlign: 'center',
+        paddingInlineStart: '1rem',
+        paddingInlineEnd: '1rem',
+        paddingBottom: `${pixelsToRem(20)}rem`,
+        // 0px - 319px
+        [GROUP_A_MAX_WIDTH]: {
+          paddingInlineStart: `${spacings.FULL}rem`,
+          paddingInlineEnd: `${spacings.FULL}rem`,
+          paddingBottom: `${pixelsToRem(20)}rem`,
+        },
+        // 600px - 1007px
+        [GROUP_3_ONLY]: {
+          paddingInlineStart: `${pixelsToRem(56)}rem`,
+          paddingInlineEnd: `${pixelsToRem(56)}rem`,
+          paddingBottom: `${pixelsToRem(24)}rem`,
+        },
+        // 1008px and above
+        [GROUP_4_MIN_WIDTH]: {
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          alignItems: 'start',
+          textAlign: 'start',
+          paddingTop: `${pixelsToRem(44)}rem`,
+          paddingInlineStart: `${pixelsToRem(48)}rem`,
+          paddingInlineEnd: `${pixelsToRem(48)}rem`,
+          paddingBottom: 0,
+        },
+      }),
+
+    textContainer: css({
+      width: '100%',
+      // 1008px and above
+      [GROUP_4_MIN_WIDTH]: {
+        gridColumn: 1,
+        gridRow: 1,
+        width: '100%',
+      },
+    }),
+
+    title: ({ fontSizes }: Theme) =>
+      css({
+        // 0px - 319px
+        [GROUP_A_MAX_WIDTH]: {
+          marginTop: `${pixelsToRem(16)}rem`,
+          paddingTop: `${pixelsToRem(20)}rem`,
+          ...fontSizes.trafalgar,
+        },
+        // 320px - 599px
+        [GROUP_B_ONLY]: {
+          marginTop: 0,
+          paddingTop: 0,
+        },
+        // 1008px and above
+        [GROUP_4_MIN_WIDTH]: {
+          marginTop: `${pixelsToRem(36)}rem`,
+          paddingTop: 0,
+        },
+      }),
+
+    description: ({ fontSizes }: Theme) =>
+      css({
+        // 0px - 319px
+        [GROUP_A_MAX_WIDTH]: {
+          ...fontSizes.longPrimer,
+          paddingTop: `${pixelsToRem(6)}rem`,
+        },
+        // 320px - 599px
+        [GROUP_B_ONLY]: {
+          paddingTop: `${pixelsToRem(16)}rem`,
+          marginTop: 0,
+        },
+        // 600px - 1007px
+        [GROUP_3_ONLY]: {
+          paddingTop: `${pixelsToRem(16)}rem`,
+          marginTop: 0,
+        },
+        // 1008px and above
+        [GROUP_4_MIN_WIDTH]: {
+          paddingTop: `${pixelsToRem(16)}rem`,
+          marginTop: 0,
+        },
+      }),
+
+    actionsContainer: css({
+      // 0px - 319px
+      [GROUP_A_MAX_WIDTH]: {
+        marginTop: `${pixelsToRem(20)}rem`,
+      },
+      // 320px - 599px
+      [GROUP_B_ONLY]: {
+        marginTop: `${pixelsToRem(32)}rem`,
+      },
+      // 600px - 1007px
+      [GROUP_3_ONLY]: {
+        marginTop: `${pixelsToRem(32)}rem`,
+      },
+      // 1008px and above
+      [GROUP_4_MIN_WIDTH]: {
+        gridRow: 2,
+        width: '100%',
+        marginTop: 0,
+        paddingBottom: 0,
+      },
+    }),
+
+    closeButton: css({
+      display: 'none',
+    }),
+
+    signInImage: css({
+      display: 'none',
+      // 320px and above
+      [GROUP_B_MIN_WIDTH]: {
+        display: 'block',
+      },
+      // 320px - 599px
+      [GROUP_B_ONLY]: {
+        marginBottom: `${pixelsToRem(20)}rem`,
+        marginTop: `${pixelsToRem(16)}rem`,
+        width: '100%',
+        aspectRatio: '256 / 242',
+        backgroundImage: 'var(--sign-in-image-mobile)',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+      },
+      // 600px - 1007px
+      [GROUP_3_ONLY]: {
+        marginBottom: `${pixelsToRem(24)}rem`,
+        marginTop: `${pixelsToRem(16)}rem`,
+        display: 'block',
+        width: '100%',
+        aspectRatio: '395 / 328',
+        backgroundImage: 'var(--sign-in-image-tablet)',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+      },
+      // 1008px and above
+      [GROUP_4_MIN_WIDTH]: {
+        gridColumn: 2,
+        gridRow: '1 / span 2',
+        display: 'block',
+        width: '100%',
+        marginTop: `${pixelsToRem(36)}rem`,
+        alignSelf: 'start',
+        aspectRatio: '274 / 400;',
+        backgroundImage: 'var(--sign-in-image-desktop)',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+      },
+    }),
+  },
+
+  closeButton: ({ palette }: Theme) =>
+    css({
+      position: 'absolute',
+      top: `${pixelsToRem(4)}rem`,
+      insetInlineEnd: `${pixelsToRem(4)}rem`,
+      background: 'none',
+      border: 'none',
+      color: palette.WHITE,
+      fill: palette.WHITE,
+      cursor: 'pointer',
+      zIndex: 2,
+      width: `${pixelsToRem(38)}rem`,
+      height: `${pixelsToRem(38)}rem`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+};
diff --git a/src/app/components/Account/AccountSignInModal/index.tsx b/src/app/components/Account/AccountSignInModal/index.tsx
new file mode 100644
index 00000000000..e3729c030c5
--- /dev/null
+++ b/src/app/components/Account/AccountSignInModal/index.tsx
@@ -0,0 +1,147 @@
+import { css, Global } from '@emotion/react';
+import { useEffect, useMemo } from 'react';
+import { ToggleContextProvider } from '#app/contexts/ToggleContext';
+import ThemeProvider from '#app/components/ThemeProvider';
+import { AccountContext } from '#app/contexts/AccountContext';
+import { Close } from '#app/components/icons';
+import { getEnvConfig } from '#app/lib/utilities/getEnvConfig';
+import useTrappedFocus from '#app/hooks/useTrappedFocus';
+import AccountPromotionalBanner from '../AccountPromotionalBanner';
+import styles from './index.styles';
+import { DISPLAY_ACCOUNT_PROMOTIONAL_BANNER_CSS_CLASS } from '../AccountPromotionalBanner/utilities';
+
+type AccountSignInModalProps = {
+  onClose: () => void;
+  signInUrl: string | undefined;
+  registerUrl: string | undefined;
+};
+
+const AccountSignInModal = ({
+  onClose,
+  signInUrl,
+  registerUrl,
+}: AccountSignInModalProps) => {
+  const { containerRef, firstElementRef } = useTrappedFocus<
+    HTMLDivElement,
+    HTMLButtonElement
+  >();
+
+  useEffect(() => {
+    const modal = document.getElementById('account-sign-in-modal-container');
+    const reactRootElement = document.getElementById('root');
+
+    const handleBackdropClick = (event: MouseEvent | TouchEvent) => {
+      if (event.target === event.currentTarget) onClose();
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose();
+    };
+
+    if (modal) {
+      reactRootElement?.setAttribute('inert', 'true');
+      modal.addEventListener('mousedown', handleBackdropClick);
+      modal.addEventListener('touchstart', handleBackdropClick);
+      modal.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => {
+      reactRootElement?.removeAttribute('inert');
+      modal?.removeEventListener('mousedown', handleBackdropClick);
+      modal?.removeEventListener('touchstart', handleBackdropClick);
+      modal?.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    document
+      .querySelector('html')
+      ?.classList.add(DISPLAY_ACCOUNT_PROMOTIONAL_BANNER_CSS_CLASS);
+
+    return () => {
+      document
+        .querySelector('html')
+        ?.classList.remove(DISPLAY_ACCOUNT_PROMOTIONAL_BANNER_CSS_CLASS);
+    };
+  }, []);
+
+  const accountContextValue = useMemo(
+    () => ({
+      isSignedIn: false,
+      isIdctaAvailable: true,
+      signInUrl,
+      registerUrl,
+      isPersonalizationAvailable: false,
+      isPersonalizationEnabled: false,
+      signOutUrl: undefined,
+      settingsUrl: undefined,
+      forYouUrl: undefined,
+      hashedUserId: undefined,
+    }),
+    [signInUrl, registerUrl],
+  );
+
+  const staticAssetsPath = `${getEnvConfig().SIMORGH_PUBLIC_STATIC_ASSETS_ORIGIN}${getEnvConfig().SIMORGH_PUBLIC_STATIC_ASSETS_PATH}`;
+  const imagesPath = `${staticAssetsPath}images`;
+
+  // const signInImageVariables = {
+  //   '--sign-in-image-mobile': `url(${imagesPath}/news_mobile_image.webp)`,
+  //   '--sign-in-image-tablet': `url(${imagesPath}/news_tablet_image.webp)`,
+  //   '--sign-in-image-desktop': `url(${imagesPath}/news_desktop_image.webp)`,
+  // } as React.CSSProperties;
+
+  const signInImageVariables = {
+    '--sign-in-image-mobile':
+      'url(https://raw.githubusercontent.com/bbc/simorgh/2b8b3cd5ac254a544b8450326f676b66fe43b8e4/public/images/news_mobile_image.webp)',
+    '--sign-in-image-tablet':
+      'url(https://raw.githubusercontent.com/bbc/simorgh/2b8b3cd5ac254a544b8450326f676b66fe43b8e4/public/images/news_tablet_image.webp)',
+    '--sign-in-image-desktop':
+      'url(https://raw.githubusercontent.com/bbc/simorgh/2b8b3cd5ac254a544b8450326f676b66fe43b8e4/public/images/news_desktop_image.webp)',
+  } as React.CSSProperties;
+  return (
+    <>
+      <Global
+        styles={css`
+          body {
+            overflow: hidden;
+          }
+        `}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Sign in to BBC"
+        css={styles.modal}
+        id="account-sign-in-modal-container"
+      >
+        <div aria-hidden="true" onClick={onClose} css={styles.backdrop} />
+        <div
+          ref={containerRef}
+          css={styles.modalContent}
+          style={signInImageVariables}
+        >
+          <button
+            ref={firstElementRef}
+            type="button"
+            onClick={onClose}
+            css={styles.closeButton}
+            aria-label="Close modal"
+          >
+            <Close />
+          </button>
+          <ToggleContextProvider>
+            <ThemeProvider service="ws">
+              <AccountContext.Provider value={accountContextValue}>
+                <AccountPromotionalBanner
+                  styleOverrides={styles.promotionalBannerOverrides}
+                />
+              </AccountContext.Provider>
+            </ThemeProvider>
+          </ToggleContextProvider>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AccountSignInModal;
diff --git a/src/app/components/PromotionalBanner/index.test.tsx b/src/app/components/PromotionalBanner/index.test.tsx
index 68059337f97..85242e43691 100644
--- a/src/app/components/PromotionalBanner/index.test.tsx
+++ b/src/app/components/PromotionalBanner/index.test.tsx
@@ -41,6 +41,24 @@ describe('PromotionalBanner', () => {
     expect(screen.getByText('Not now')).toBeInTheDocument();
   });
 
+  it('renders top content above the title when provided', () => {
+    render(
+      <PromotionalBanner
+        {...defaultProps}
+        topImage={<div data-testid="top-image">Banner image</div>}
+      />,
+    );
+
+    const topImage = screen.getByTestId('top-image');
+    const title = screen.getByText('Install our app');
+
+    expect(topImage).toBeInTheDocument();
+    expect(topImage.compareDocumentPosition(title)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    expect(topImage.parentElement?.firstChild).toBe(topImage);
+  });
+
   it('calls the primary button click handler when short text is present', () => {
     render(<PromotionalBanner {...defaultProps} />);
     fireEvent.click(screen.getByText('Install'));
diff --git a/src/app/components/PromotionalBanner/index.tsx b/src/app/components/PromotionalBanner/index.tsx
index d8d17d53679..7000936f29d 100644
--- a/src/app/components/PromotionalBanner/index.tsx
+++ b/src/app/components/PromotionalBanner/index.tsx
@@ -20,24 +20,40 @@ const PromotionalBanner = ({
   closeLabel,
   id = 'promotional-banner',
   children,
+  topImage,
+  styleOverrides,
 }: PromotionalBannerProps) => {
   return (
-    <aside css={styles.banner} role="complementary" aria-labelledby={id}>
+    <aside
+      css={[styles.banner, styleOverrides?.banner]}
+      role="complementary"
+      aria-labelledby={id}
+    >
       <VisuallyHiddenText as="strong" id={id}>
         {bannerLabel}
       </VisuallyHiddenText>
       <div css={styles.innerContainer}>
-        <div css={styles.content}>
-          <div css={styles.textContainer}>
-            <Heading level={2} css={styles.title} size="paragon">
+        <div css={[styles.content, styleOverrides?.content]}>
+          {topImage}
+          <div css={[styles.textContainer, styleOverrides?.textContainer]}>
+            <Heading
+              level={2}
+              css={[styles.title, styleOverrides?.title]}
+              size="paragon"
+            >
               {title}
             </Heading>
-            <Paragraph css={styles.description} size="longPrimer">
+            <Paragraph
+              css={[styles.description, styleOverrides?.description]}
+              size="longPrimer"
+            >
               {description}
             </Paragraph>
           </div>
 
-          <div css={styles.actionsContainer}>
+          <div
+            css={[styles.actionsContainer, styleOverrides?.actionsContainer]}
+          >
             {children ?? (
               <>
                 {primaryButton && (
@@ -86,7 +102,7 @@ const PromotionalBanner = ({
           <Text
             as="button"
             type="button"
-            css={styles.closeButton}
+            css={[styles.closeButton, styleOverrides?.closeButton]}
             onClick={onClose}
           >
             <VisuallyHiddenText>{closeLabel}</VisuallyHiddenText>
diff --git a/src/app/components/PromotionalBanner/index.types.ts b/src/app/components/PromotionalBanner/index.types.ts
index 8a905b15515..bea5bdef46c 100644
--- a/src/app/components/PromotionalBanner/index.types.ts
+++ b/src/app/components/PromotionalBanner/index.types.ts
@@ -1,8 +1,20 @@
+import type { Interpolation, Theme } from '@emotion/react';
+
 export interface PromotionalBannerButtonData {
   text: string;
   longText?: string;
 }
 
+export type PromotionalBannerStyleOverrides = Partial<{
+  banner: Interpolation<Theme>;
+  content: Interpolation<Theme>;
+  textContainer: Interpolation<Theme>;
+  title: Interpolation<Theme>;
+  description: Interpolation<Theme>;
+  actionsContainer: Interpolation<Theme>;
+  closeButton: Interpolation<Theme>;
+}>;
+
 export interface PromotionalBannerConfig {
   title: string;
   description: string;
@@ -20,4 +32,6 @@ export interface PromotionalBannerProps extends PromotionalBannerConfig {
   onSecondaryClick?: (event?: React.MouseEvent) => void;
   onClose?: (event?: React.MouseEvent) => void;
   children?: React.ReactNode;
+  topImage?: React.ReactNode;
+  styleOverrides?: PromotionalBannerStyleOverrides;
 }
diff --git a/src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx b/src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx
index 72daa06a986..31ed1277715 100644
--- a/src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx
+++ b/src/app/components/SaveArticleButton/SaveArticleButtonGuest/index.tsx
@@ -1,13 +1,16 @@
 import { ServiceContext } from '#contexts/ServiceContext';
 import SaveButton from '#app/components/SaveButton';
-import { use } from 'react';
+import { use, useState } from 'react';
 import useHydrationDetection from '#app/hooks/useHydrationDetection';
+import { AccountContext } from '#app/contexts/AccountContext';
+import AccountSignInModal from '#app/components/Account/AccountSignInModal';
 
-// TODO: This will contain the guest user experience for the SaveArticleButton,
-// which will likely involve prompting the user to sign in or create an account to save articles.
 const SaveArticleButtonGuest = () => {
   const { translations } = use(ServiceContext);
+  const { signInUrl, registerUrl } = use(AccountContext);
   const isHydrated = useHydrationDetection();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const getButtonText = () => {
     if (!isHydrated) {
       return translations.saveArticleButton?.loading;
@@ -16,15 +19,21 @@ const SaveArticleButtonGuest = () => {
   };
 
   return (
-    <SaveButton
-      onClick={() => {
-        // eslint-disable-next-line no-alert
-        alert('Please sign in to save articles.');
-      }}
-      buttonText={getButtonText()}
-      testId="save-article-btn-guest"
-      isLoading={!isHydrated}
-    />
+    <>
+      <SaveButton
+        onClick={() => setIsModalOpen(true)}
+        buttonText={getButtonText()}
+        testId="save-article-btn-guest"
+        isLoading={!isHydrated}
+      />
+      {isModalOpen && (
+        <AccountSignInModal
+          onClose={() => setIsModalOpen(false)}
+          signInUrl={signInUrl}
+          registerUrl={registerUrl}
+        />
+      )}
+    </>
   );
 };
 
diff --git a/src/app/hooks/useTrappedFocus/index.ts b/src/app/hooks/useTrappedFocus/index.ts
new file mode 100644
index 00000000000..70fc88a06fe
--- /dev/null
+++ b/src/app/hooks/useTrappedFocus/index.ts
@@ -0,0 +1,61 @@
+import { useEffect, useRef } from 'react';
+
+const FOCUSABLE_SELECTOR =
+  'button:not([disabled]), a[href], [tabindex]:not([tabindex="-1"])';
+
+const useTrappedFocus = <
+  C extends HTMLElement = HTMLElement,
+  F extends HTMLElement = HTMLElement,
+  L extends HTMLElement = HTMLElement,
+>() => {
+  const containerRef = useRef<C>(null);
+  const firstElementRef = useRef<F>(null);
+  const lastElementRef = useRef<L>(null);
+
+  useEffect(() => {
+    const onDismissFocusElement = document.activeElement as HTMLElement | null;
+    let currentModalFocusRef: Element | null = null;
+
+    const focusListenerWithErrorWrapper = (event: FocusEvent) => {
+      try {
+        if (!containerRef.current) return;
+
+        const isInModal = containerRef.current.contains(event.target as Node);
+
+        if (isInModal && event.target !== containerRef.current) {
+          currentModalFocusRef = event.target as Element;
+        } else {
+          const wasFirstElementFocused =
+            currentModalFocusRef === firstElementRef.current;
+
+          const lastElement: HTMLElement | null =
+            lastElementRef.current ??
+            Array.from(
+              containerRef.current.querySelectorAll<HTMLElement>(
+                FOCUSABLE_SELECTOR,
+              ),
+            ).pop() ??
+            null;
+
+          if (wasFirstElementFocused) {
+            lastElement?.focus();
+          } else {
+            firstElementRef.current?.focus();
+          }
+        }
+      } catch (error) {} // eslint-disable-line no-empty
+    };
+
+    window.addEventListener('focus', focusListenerWithErrorWrapper, true);
+    firstElementRef.current?.focus();
+
+    return () => {
+      window.removeEventListener('focus', focusListenerWithErrorWrapper, true);
+      onDismissFocusElement?.focus();
+    };
+  }, []);
+
+  return { containerRef, firstElementRef, lastElementRef };
+};
+
+export default useTrappedFocus;