diff --git a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
index 087c8a528b..0db8b2d666 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { getLogContextStatic } from '@dailydotdev/shared/src/contexts/LogContext';
+import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
+import {
+  AuthDisplay,
+  SocialProvider,
+} from '@dailydotdev/shared/src/components/auth/common';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
 import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
@@ -14,10 +20,54 @@ jest.mock('@dailydotdev/shared/src/contexts/AuthContext', () => ({
   useAuthContext: jest.fn(),
 }));
 
+jest.mock('@dailydotdev/shared/src/hooks/auth/useSignBack', () => ({
+  useSignBack: jest.fn(),
+}));
+
+jest.mock('@dailydotdev/shared/src/components/auth/AuthOptions', () => {
+  const { AuthDisplay: MockAuthDisplay } = jest.requireActual(
+    '@dailydotdev/shared/src/components/auth/common',
+  );
+
+  return {
+    __esModule: true,
+    default: ({
+      onAuthStateUpdate,
+    }: {
+      onAuthStateUpdate?: (props: { defaultDisplay?: string }) => void;
+    }) => (
+      <div>
+        <button type="button">Continue with Google</button>
+        <button type="button">Continue with GitHub</button>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({
+              defaultDisplay: MockAuthDisplay.Registration,
+            })
+          }
+        >
+          Continue with email
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            onAuthStateUpdate?.({ defaultDisplay: MockAuthDisplay.Default })
+          }
+        >
+          Log in
+        </button>
+        <p>By continuing, you agree to the Terms of Service</p>
+      </div>
+    ),
+  };
+});
+
 const LogContext = getLogContextStatic();
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<
   typeof useAuthContext
 >;
+const mockUseSignBack = useSignBack as jest.MockedFunction<typeof useSignBack>;
 const logEvent = jest.fn();
 const showLogin = jest.fn();
 
@@ -61,40 +111,155 @@ const renderComponent = (
     ...authContext,
   });
 
-  return render(
-    <LogContext.Provider
-      value={{
-        logEvent,
-        logEventStart: jest.fn(),
-        logEventEnd: jest.fn(),
-        sendBeacon: jest.fn(),
-      }}
-    >
-      <HijackingLoginStrip />
-    </LogContext.Provider>,
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+
+  const Wrapper = ({
+    children,
+  }: {
+    children: React.ReactNode;
+  }): React.ReactElement => (
+    <QueryClientProvider client={queryClient}>
+      <LogContext.Provider
+        value={{
+          logEvent,
+          logEventStart: jest.fn(),
+          logEventEnd: jest.fn(),
+          sendBeacon: jest.fn(),
+        }}
+      >
+        {children}
+      </LogContext.Provider>
+    </QueryClientProvider>
   );
+
+  return render(<HijackingLoginStrip />, { wrapper: Wrapper });
 };
 
 beforeEach(() => {
   jest.clearAllMocks();
+  mockUseSignBack.mockReturnValue({
+    isLoaded: true,
+    signBack: undefined,
+    provider: undefined,
+    onUpdateSignBack: jest.fn(),
+  });
 });
 
 describe('HijackingLoginStrip', () => {
-  it('shows a login CTA for logged out users', () => {
+  it('encourages signup for logged out users without a remembered account', () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole('heading', {
+        name: 'Where developers make every tab count.',
+      }),
+    ).toBeVisible();
+
+    expect(
+      screen.getByRole('button', { name: 'Continue with Google' }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Continue with GitHub' }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole('button', { name: 'Continue with email' }),
+    ).toBeVisible();
+    expect(
+      screen.getByText(/By continuing, you agree to the Terms of Service/),
+    ).toBeVisible();
+
+    fireEvent.click(
+      screen.getByRole('button', { name: 'Continue with email' }),
+    );
+
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.Onboarding,
+      options: {
+        isLogin: false,
+        defaultDisplay: AuthDisplay.Registration,
+        formValues: undefined,
+      },
+    });
+  });
+
+  it('logs a signup impression for new visitors', () => {
     renderComponent();
 
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.SignupButton,
+      target_id: 'hijacking',
+    });
+  });
+
+  it('waits for remembered account storage before logging the impression', () => {
+    let signBackState: ReturnType<typeof useSignBack> = {
+      isLoaded: false,
+      signBack: undefined,
+      provider: undefined,
+      onUpdateSignBack: jest.fn(),
+    };
+
+    mockUseSignBack.mockImplementation(() => signBackState);
+
+    const { rerender } = renderComponent();
+
+    expect(logEvent).not.toHaveBeenCalled();
+
+    signBackState = {
+      isLoaded: true,
+      signBack: {
+        name: 'Tsahi Matsliah',
+        email: 'tsahi@daily.dev',
+        image: 'https://daily.dev/tsahi.png',
+      },
+      provider: SocialProvider.Google,
+      onUpdateSignBack: jest.fn(),
+    };
+
+    rerender(<HijackingLoginStrip />);
+
     expect(
-      screen.getByText('Unlock the full daily.dev experience'),
+      screen.getByRole('heading', { name: /Welcome back, Tsahi/ }),
     ).toBeVisible();
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+    expect(logEvent).not.toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.SignupButton,
+      target_id: 'hijacking',
+    });
+  });
+
+  it('offers a welcome-back "Continue as" for users with a remembered account', () => {
+    mockUseSignBack.mockReturnValue({
+      isLoaded: true,
+      signBack: {
+        name: 'Tsahi Matsliah',
+        email: 'tsahi@daily.dev',
+        image: 'https://daily.dev/tsahi.png',
+      },
+      provider: SocialProvider.Google,
+      onUpdateSignBack: jest.fn(),
+    });
+
+    renderComponent();
+
     expect(
-      screen.getByText('Log in to pick up where you left off.'),
+      screen.getByRole('heading', { name: /Welcome back, Tsahi/ }),
     ).toBeVisible();
+    expect(screen.getByText('tsahi@daily.dev')).toBeVisible();
 
-    const cta = screen.getByRole('button', { name: 'Log in to continue' });
+    const cta = screen.getByRole('button', { name: /Continue as Tsahi/ });
     fireEvent.click(cta);
 
     expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
+      event_name: LogEvent.Impression,
       target_type: TargetType.LoginButton,
       target_id: 'hijacking',
     });
@@ -104,16 +269,38 @@ describe('HijackingLoginStrip', () => {
     });
   });
 
+  it('lets remembered users create a different account', () => {
+    mockUseSignBack.mockReturnValue({
+      isLoaded: true,
+      signBack: {
+        name: 'Tsahi Matsliah',
+        email: 'tsahi@daily.dev',
+        image: 'https://daily.dev/tsahi.png',
+      },
+      provider: SocialProvider.Google,
+      onUpdateSignBack: jest.fn(),
+    });
+
+    renderComponent();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Create an account' }));
+
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: false },
+    });
+  });
+
   it('shows an onboarding CTA for logged in users who still need onboarding', () => {
     renderComponent({ user: loggedUser, isLoggedIn: true });
 
     expect(
       screen.getByText(
-        'You still have a few onboarding steps left. Finish them to unlock the full experience.',
+        'Finish onboarding to unlock the full daily.dev experience.',
       ),
     ).toBeVisible();
 
-    const cta = screen.getByRole('link', { name: 'Continue onboarding' });
+    const cta = screen.getByRole('link', { name: /Continue/ });
     const expectedUrl = new URL(onboardingUrl);
     expectedUrl.searchParams.append('r', 'extension');
 
diff --git a/packages/extension/src/newtab/HijackingLoginStrip.tsx b/packages/extension/src/newtab/HijackingLoginStrip.tsx
index 7185dbc58a..2508a53dae 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.tsx
@@ -1,22 +1,253 @@
-import type { ReactElement } from 'react';
-import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import {
   Button,
+  ButtonSize,
   ButtonVariant,
 } from '@dailydotdev/shared/src/components/buttons/Button';
+import { ClickableText } from '@dailydotdev/shared/src/components/buttons/ClickableText';
+import AuthOptions from '@dailydotdev/shared/src/components/auth/AuthOptions';
+import {
+  ProfileImageSize,
+  ProfilePicture,
+} from '@dailydotdev/shared/src/components/ProfilePicture';
+import {
+  AuthDisplay,
+  type AuthOptionsProps,
+  providerMap,
+  type SocialProvider,
+} from '@dailydotdev/shared/src/components/auth/common';
+import { onboardingGradientClasses } from '@dailydotdev/shared/src/components/onboarding/common';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
 import { onboardingUrl } from '@dailydotdev/shared/src/lib/constants';
+import {
+  cloudinaryOnboardingFullBackgroundDesktop,
+  cloudinaryOnboardingFullBackgroundMobile,
+  cloudinaryReadingReminderCat,
+} from '@dailydotdev/shared/src/lib/image';
 import { LogEvent, TargetType } from '@dailydotdev/shared/src/lib/log';
 import feedStyles from '@dailydotdev/shared/src/components/Feed.module.css';
-import { cloudinaryReadingReminderCat } from '@dailydotdev/shared/src/lib/image';
+import LogoIcon from '@dailydotdev/shared/src/svg/LogoIcon';
+import LogoText from '@dailydotdev/shared/src/svg/LogoText';
+
+type CoverVariant = 'continue' | 'signin' | 'onboarding';
+type SigninHeroVariation = 'catStage' | 'onboardingSignup';
+
+const signinHeroVariation: SigninHeroVariation = 'onboardingSignup';
+
+const primaryCta =
+  'transition-transform duration-200 ease-out hover:-translate-y-0.5';
+
+const glassCta =
+  '!border-white/20 !bg-white/[0.06] !text-white backdrop-blur-sm transition-colors duration-200 hover:!bg-white/[0.12]';
+
+function BrandLockup(): ReactElement {
+  return (
+    <span className="flex items-center gap-2 text-white">
+      <LogoIcon className={{ container: 'h-7 w-auto' }} />
+      <LogoText className={{ container: 'h-6 w-auto' }} />
+    </span>
+  );
+}
+
+function CatHeroImage(): ReactElement {
+  return (
+    <div className="relative w-full max-w-[26rem] tablet:max-w-[30rem]">
+      <img
+        src={cloudinaryReadingReminderCat}
+        alt="Sleeping cat on laptop"
+        className="relative z-1 w-full rounded-16 object-contain"
+      />
+    </div>
+  );
+}
+
+interface SigninHeroProps {
+  onSignupClick: () => void;
+  onLoginClick: () => void;
+  formRef: AuthOptionsProps['formRef'];
+  onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'];
+}
+
+type HeroActionButtonsProps = Pick<
+  SigninHeroProps,
+  'onSignupClick' | 'onLoginClick'
+>;
+
+function HeroActionButtons({
+  onSignupClick,
+  onLoginClick,
+}: HeroActionButtonsProps): ReactElement {
+  return (
+    <div className="mt-8 flex w-full max-w-[23rem] flex-row gap-3 tablet:mx-0">
+      <Button
+        type="button"
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Large}
+        className={classNames('flex-1', primaryCta)}
+        onClick={onSignupClick}
+      >
+        Sign up
+      </Button>
+      <Button
+        type="button"
+        variant={ButtonVariant.Secondary}
+        size={ButtonSize.Large}
+        className={classNames('flex-1', glassCta)}
+        onClick={onLoginClick}
+      >
+        Log in
+      </Button>
+    </div>
+  );
+}
+
+function CatStageHero({
+  onSignupClick,
+  onLoginClick,
+}: SigninHeroProps): ReactElement {
+  return (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <div className="top-hero-stage pointer-events-none absolute inset-0" />
+        <div className="top-hero-aurora opacity-70 pointer-events-none absolute inset-0" />
+        <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/[0.06] to-transparent" />
+        <div className="via-white/25 pointer-events-none absolute left-1/2 top-0 h-px w-2/3 -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="bg-accent-cabbage-default/20 pointer-events-none absolute -bottom-8 left-1/2 h-32 w-[82%] -translate-x-1/2 rounded-[100%] blur-2xl" />
+        <div className="via-accent-cabbage-default/80 pointer-events-none absolute bottom-0 left-1/2 h-px w-[86%] -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="bg-accent-cabbage-default/12 pointer-events-none absolute -left-28 bottom-0 hidden h-72 w-72 rounded-full blur-3xl tablet:block" />
+        <div className="bg-accent-onion-default/14 pointer-events-none absolute -right-28 top-4 hidden h-72 w-72 rounded-full blur-3xl tablet:block" />
+        <div className="dark relative z-1 mx-auto grid min-h-[22rem] w-full max-w-[64rem] items-center gap-8 px-6 py-14 text-center tablet:min-h-[28rem] tablet:grid-cols-[minmax(0,1fr)_24rem] tablet:px-10 tablet:py-16 tablet:text-left">
+          <div className="flex flex-col items-center tablet:items-start">
+            <BrandLockup />
+            <h2 className="mt-7 max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+              Own your new tab. Make it your dev briefing.
+            </h2>
+            <div className="via-accent-cabbage-default/70 mt-5 h-px w-40 bg-gradient-to-r from-transparent to-transparent" />
+            <p className="text-white/70 mt-4 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
+              Sign in and daily.dev will remember the topics, saves, upvotes,
+              and discussions that matter to you.
+            </p>
+            <HeroActionButtons
+              onSignupClick={onSignupClick}
+              onLoginClick={onLoginClick}
+            />
+          </div>
+          <div className="flex justify-center tablet:justify-end">
+            <CatHeroImage />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function OnboardingSignupHero({
+  formRef,
+  onAuthStateUpdate,
+}: SigninHeroProps): ReactElement {
+  return (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <picture>
+          <source
+            media="(max-width: 655px)"
+            srcSet={cloudinaryOnboardingFullBackgroundMobile}
+          />
+          <source
+            media="(min-width: 656px)"
+            srcSet={cloudinaryOnboardingFullBackgroundDesktop}
+          />
+          <img
+            alt=""
+            aria-hidden
+            className="opacity-55 pointer-events-none absolute inset-0 size-full object-cover"
+            role="presentation"
+            src={cloudinaryOnboardingFullBackgroundDesktop}
+          />
+        </picture>
+        <div className="bg-raw-pepper-90/55 pointer-events-none absolute inset-0" />
+        <div className="via-raw-pepper-90/80 from-raw-pepper-90/60 pointer-events-none absolute inset-0 bg-gradient-to-b to-raw-pepper-90/40" />
+        <div className="via-raw-pepper-90/70 pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
+        <div className="top-hero-aurora opacity-80 pointer-events-none absolute inset-0" />
+        <div className="via-accent-cabbage-default/80 pointer-events-none absolute bottom-0 left-1/2 h-px w-[86%] -translate-x-1/2 bg-gradient-to-r from-transparent to-transparent" />
+        <div className="dark relative z-1 mx-auto flex min-h-[20rem] w-full max-w-[48rem] flex-col items-center justify-center gap-5 px-6 py-10 text-center tablet:min-h-[24rem] tablet:px-10 tablet:py-12">
+          <div className="flex flex-col items-center">
+            <h2 className="max-w-[42rem] text-balance font-bold text-white typo-title1 tablet:typo-mega2">
+              Where developers make every tab count.
+            </h2>
+            <p className="text-white/75 mt-3 max-w-[31rem] text-balance typo-callout tablet:typo-title3">
+              Sign in to turn daily.dev into your personalized feed, reputation,
+              saves, and community in every new tab.
+            </p>
+          </div>
+          <div className="w-full max-w-[22rem] rounded-24 border border-border-subtlest-tertiary bg-white/[0.045] p-3 text-center backdrop-blur-md tablet:p-4">
+            <AuthOptions
+              ignoreMessages
+              compact
+              formRef={formRef}
+              trigger={AuthTriggers.Onboarding}
+              simplified
+              defaultDisplay={AuthDisplay.OnboardingSignup}
+              forceDefaultDisplay
+              className={{
+                container: 'mx-auto !max-w-none !overflow-visible',
+                onboardingSignup: '!gap-3',
+              }}
+              onAuthStateUpdate={onAuthStateUpdate}
+              onboardingSignupButton={{
+                variant: ButtonVariant.Primary,
+                size: ButtonSize.Large,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const SigninHeroVariationMap = {
+  catStage: CatStageHero,
+  onboardingSignup: OnboardingSignupHero,
+} satisfies Record<
+  SigninHeroVariation,
+  (props: SigninHeroProps) => ReactElement
+>;
 
 export default function HijackingLoginStrip(): ReactElement {
   const { showLogin, user } = useAuthContext();
   const { logEvent } = useLogContext();
+  const { signBack, provider, isLoaded: isSignBackLoaded } = useSignBack();
+  const hasLoggedImpression = useRef(false);
+  const authFormRef = useRef<HTMLFormElement>(
+    null,
+  ) as unknown as AuthOptionsProps['formRef'];
+
   const isLoggedOut = !user;
+  const hasContinueAs = isLoggedOut && isSignBackLoaded && !!signBack?.name;
+  const firstName = signBack?.name?.split(' ')[0] ?? signBack?.name;
+  const socialProvider =
+    provider && provider !== 'password'
+      ? (provider as SocialProvider)
+      : undefined;
+  const providerIcon = socialProvider
+    ? providerMap[socialProvider]?.icon
+    : undefined;
+
+  const variant: CoverVariant = (() => {
+    if (!isLoggedOut) {
+      return 'onboarding';
+    }
+
+    return hasContinueAs ? 'continue' : 'signin';
+  })();
+  const isReadyToLogImpression = !isLoggedOut || isSignBackLoaded;
+
   const onboardingHref = (() => {
     const base = new URL(onboardingUrl);
     base.searchParams.append('r', 'extension');
@@ -24,72 +255,161 @@ export default function HijackingLoginStrip(): ReactElement {
     return base.toString();
   })();
 
-  const logHijackingClick = (): void => {
+  const logClick = (targetType: TargetType): void => {
     logEvent({
       event_name: LogEvent.Click,
-      target_type: TargetType.LoginButton,
+      target_type: targetType,
       target_id: 'hijacking',
     });
   };
 
-  return (
-    <section className={classNames('mb-4 w-full px-4 pb-0', feedStyles.cards)}>
-      <div className="relative overflow-hidden rounded-b-none rounded-t-16 px-px pb-0 pt-px">
-        <div className="top-hero-panel-border absolute inset-0 rounded-b-none rounded-t-16" />
-        <div className="top-hero-glow pointer-events-none absolute -right-12 top-1/2 h-40 w-40 -translate-y-1/2 rounded-full blur-3xl" />
-        <div className="pointer-events-none absolute bottom-0 left-0 h-10 w-5 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
-        <div className="pointer-events-none absolute bottom-0 right-0 h-10 w-5 bg-gradient-to-t from-raw-pepper-90 to-transparent" />
-        <div className="relative overflow-hidden rounded-b-none rounded-t-[0.9375rem] bg-raw-pepper-90 shadow-2">
-          <div className="flex flex-col tablet:flex-row tablet:items-stretch">
-            <div className="flex flex-1 flex-col items-center p-5 text-center tablet:items-start tablet:p-6 tablet:text-left">
-              <div className="flex flex-col items-center gap-1 tablet:items-start">
-                <h3 className="font-bold text-white typo-title2">
-                  Unlock the full daily.dev experience
-                </h3>
-                <p className="text-white/80 text-sm">
-                  {isLoggedOut
-                    ? 'Log in to pick up where you left off.'
-                    : 'You still have a few onboarding steps left. Finish them to unlock the full experience.'}
-                </p>
-                {isLoggedOut ? (
-                  <Button
-                    type="button"
-                    variant={ButtonVariant.Primary}
-                    className="mt-4 w-fit"
-                    onClick={() => {
-                      logHijackingClick();
-
-                      showLogin({
-                        trigger: AuthTriggers.Onboarding,
-                        options: { isLogin: true },
-                      });
-                    }}
-                  >
-                    Log in to continue
-                  </Button>
-                ) : (
-                  <Button
-                    tag="a"
-                    href={onboardingHref}
-                    variant={ButtonVariant.Primary}
-                    className="mt-4 w-fit"
-                    onClick={logHijackingClick}
-                  >
-                    Continue onboarding
-                  </Button>
-                )}
-              </div>
-            </div>
-            <div className="bg-black/20 flex h-[12.5rem] w-full items-center justify-center p-2 tablet:h-auto tablet:w-[14.5rem] tablet:p-3 laptopL:w-[16rem]">
-              <img
-                src={cloudinaryReadingReminderCat}
-                alt="Sleeping cat on laptop"
-                className="m-0 h-full w-full max-w-none scale-105 object-contain laptopL:scale-110"
-              />
-            </div>
-          </div>
-        </div>
+  useEffect(() => {
+    if (!isReadyToLogImpression) {
+      return;
+    }
+
+    if (hasLoggedImpression.current) {
+      return;
+    }
+    hasLoggedImpression.current = true;
+
+    logEvent({
+      event_name: LogEvent.Impression,
+      target_type:
+        variant === 'signin' ? TargetType.SignupButton : TargetType.LoginButton,
+      target_id: 'hijacking',
+    });
+  }, [isReadyToLogImpression, variant, logEvent]);
+
+  const onSignupClick = (): void => {
+    logClick(TargetType.SignupButton);
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: false },
+    });
+  };
+
+  const onLoginClick = (): void => {
+    logClick(TargetType.LoginButton);
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: true },
+    });
+  };
+  const onAuthStateUpdate: AuthOptionsProps['onAuthStateUpdate'] = (props) => {
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: {
+        isLogin: !!props.isLoginFlow,
+        defaultDisplay: props.defaultDisplay,
+        formValues: props.email ? { email: props.email } : undefined,
+      },
+    });
+  };
+  const SigninHero = SigninHeroVariationMap[signinHeroVariation];
+
+  const chrome = (children: ReactNode): ReactElement => (
+    <section className={classNames('mb-4 w-full pb-0', feedStyles.cards)}>
+      <div className="relative overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-raw-pepper-90 shadow-2">
+        <div className="top-hero-aurora pointer-events-none absolute inset-0" />
+        <div className="dark relative z-1">{children}</div>
       </div>
     </section>
   );
+
+  if (variant === 'onboarding') {
+    return chrome(
+      <div className="flex flex-col items-center px-6 py-14 text-center tablet:py-16">
+        <BrandLockup />
+        <h2
+          className={classNames(
+            'mt-6 text-balance typo-title1 tablet:typo-mega2',
+            onboardingGradientClasses,
+          )}
+        >
+          Let&apos;s jump back in!
+        </h2>
+        <p className="text-white/70 mt-3 max-w-[24rem] text-balance typo-callout tablet:typo-title3">
+          Finish onboarding to unlock the full daily.dev experience.
+        </p>
+        <Button
+          tag="a"
+          href={onboardingHref}
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          className={classNames('mt-7', primaryCta)}
+          onClick={() => logClick(TargetType.LoginButton)}
+        >
+          Continue&nbsp;➔
+        </Button>
+      </div>,
+    );
+  }
+
+  if (variant === 'continue' && signBack) {
+    return chrome(
+      <div className="flex flex-col items-center px-6 py-14 text-center tablet:py-16">
+        <div className="relative">
+          <ProfilePicture
+            user={signBack}
+            size={ProfileImageSize.XXXXLarge}
+            nativeLazyLoading
+            className="ring-white/20 ring-2"
+          />
+          {!!providerIcon && (
+            <span className="absolute -bottom-1.5 -right-1.5 flex size-8 items-center justify-center rounded-10 bg-white text-surface-invert shadow-2 ring-2 ring-raw-pepper-90">
+              {providerIcon}
+            </span>
+          )}
+        </div>
+        <h2
+          className={classNames(
+            'mt-6 text-balance typo-title1 tablet:typo-mega2',
+            onboardingGradientClasses,
+          )}
+        >
+          Welcome back, {firstName}!
+        </h2>
+        {!!signBack?.email && (
+          <p className="text-white/70 mt-2 typo-callout">{signBack.email}</p>
+        )}
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Large}
+          className={classNames('mt-6 w-full max-w-80', primaryCta)}
+          onClick={onLoginClick}
+        >
+          Continue as {firstName}&nbsp;➔
+        </Button>
+        <div className="text-white/60 mt-5 flex items-center gap-1.5 typo-footnote">
+          Not you?
+          <ClickableText
+            className="font-bold !text-white"
+            onClick={onLoginClick}
+          >
+            Use another account
+          </ClickableText>
+        </div>
+        <div className="text-white/60 mt-2 flex items-center gap-1.5 typo-footnote">
+          New here?
+          <ClickableText
+            className="font-bold !text-white"
+            onClick={onSignupClick}
+          >
+            Create an account
+          </ClickableText>
+        </div>
+      </div>,
+    );
+  }
+
+  return (
+    <SigninHero
+      onSignupClick={onSignupClick}
+      onLoginClick={onLoginClick}
+      formRef={authFormRef}
+      onAuthStateUpdate={onAuthStateUpdate}
+    />
+  );
 }
diff --git a/packages/shared/src/styles/base.css b/packages/shared/src/styles/base.css
index c0d5403440..37eb23d294 100644
--- a/packages/shared/src/styles/base.css
+++ b/packages/shared/src/styles/base.css
@@ -1080,6 +1080,57 @@ meter::-webkit-meter-bar {
     background: rgb(255 0 168 / 35%);
   }
 
+  .top-hero-aurora {
+    background:
+      radial-gradient(
+        80% 95% at 50% 122%,
+        color-mix(in srgb, var(--theme-accent-cabbage-default), transparent 18%)
+          0%,
+        transparent 62%
+      ),
+      radial-gradient(
+        64% 82% at 16% 128%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 32%) 0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        64% 82% at 84% 128%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 32%) 0%,
+        transparent 58%
+      );
+  }
+
+  .top-hero-stage {
+    background:
+      linear-gradient(
+        118deg,
+        transparent 0%,
+        rgb(255 255 255 / 5%) 42%,
+        transparent 58%
+      ),
+      radial-gradient(
+        78% 88% at 76% 112%,
+        color-mix(in srgb, var(--theme-accent-cabbage-default), transparent 6%)
+          0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        70% 84% at 16% 112%,
+        color-mix(in srgb, var(--theme-accent-onion-default), transparent 20%) 0%,
+        transparent 62%
+      ),
+      radial-gradient(
+        62% 72% at 92% 4%,
+        color-mix(in srgb, var(--theme-accent-bacon-default), transparent 54%) 0%,
+        transparent 58%
+      ),
+      radial-gradient(
+        42% 48% at 26% 16%,
+        rgb(255 255 255 / 8%) 0%,
+        transparent 64%
+      );
+  }
+
   @keyframes enable-notification-bell-ring {
     0%,
     100% {