diff --git a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
index 087c8a528b..90aa7d28ba 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.spec.tsx
@@ -1,8 +1,13 @@
 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 { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
+import { useSignBack } from '@dailydotdev/shared/src/hooks/auth/useSignBack';
+import { SocialProvider } from '@dailydotdev/shared/src/components/auth/common';
+import { HijackingVariant } from '@dailydotdev/shared/src/lib/featureManagement';
 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,12 +19,41 @@ jest.mock('@dailydotdev/shared/src/contexts/AuthContext', () => ({
   useAuthContext: jest.fn(),
 }));
 
+jest.mock('@dailydotdev/shared/src/hooks', () => ({
+  ...jest.requireActual('@dailydotdev/shared/src/hooks'),
+  useConditionalFeature: jest.fn(),
+}));
+
+jest.mock('@dailydotdev/shared/src/hooks/auth/useSignBack', () => ({
+  useSignBack: jest.fn(),
+}));
+
+const signupHref = (() => {
+  const url = new URL(onboardingUrl);
+  url.searchParams.append('r', 'extension');
+
+  return url.toString();
+})();
+
+const loginHref = (() => {
+  const url = new URL(onboardingUrl);
+  url.searchParams.append('r', 'extension');
+  url.searchParams.append('action', 'login');
+
+  return url.toString();
+})();
+
 const LogContext = getLogContextStatic();
 const mockUseAuthContext = useAuthContext as jest.MockedFunction<
   typeof useAuthContext
 >;
+const mockUseSignBack = useSignBack as jest.MockedFunction<typeof useSignBack>;
+const mockUseConditionalFeature = useConditionalFeature as jest.MockedFunction<
+  typeof useConditionalFeature
+>;
 const logEvent = jest.fn();
 const showLogin = jest.fn();
+const assignMock = jest.fn();
 
 const defaultAuthContext = {
   user: undefined,
@@ -53,6 +87,16 @@ const defaultAuthContext = {
   isFunnel: false,
 } satisfies AuthContextData;
 
+const setVariant = (
+  variant: HijackingVariant,
+  { isLoading = false }: { isLoading?: boolean } = {},
+): void => {
+  mockUseConditionalFeature.mockReturnValue({
+    value: variant,
+    isLoading,
+  });
+};
+
 const renderComponent = (
   authContext: Partial<AuthContextData> = {},
 ): ReturnType<typeof render> => {
@@ -61,71 +105,321 @@ 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 });
 };
 
+beforeAll(() => {
+  Object.defineProperty(window, 'location', {
+    configurable: true,
+    value: { ...window.location, assign: assignMock },
+  });
+});
+
 beforeEach(() => {
   jest.clearAllMocks();
+  setVariant(HijackingVariant.Default);
+  mockUseSignBack.mockReturnValue({
+    isLoaded: true,
+    signBack: undefined,
+    provider: undefined,
+    onUpdateSignBack: jest.fn(),
+  });
 });
 
 describe('HijackingLoginStrip', () => {
-  it('shows a login CTA for logged out users', () => {
-    renderComponent();
-
-    expect(
-      screen.getByText('Unlock the full daily.dev experience'),
-    ).toBeVisible();
-    expect(
-      screen.getByText('Log in to pick up where you left off.'),
-    ).toBeVisible();
-
-    const cta = screen.getByRole('button', { name: 'Log in to continue' });
-    fireEvent.click(cta);
-
-    expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
-      target_type: TargetType.LoginButton,
-      target_id: 'hijacking',
+  it('renders nothing while the experiment is loading', () => {
+    setVariant(HijackingVariant.Default, { isLoading: true });
+
+    const { container } = renderComponent();
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  describe('default variant', () => {
+    it('shows the original banner with a log in CTA for logged out users', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Unlock the full daily.dev experience',
+        }),
+      ).toBeVisible();
+      expect(
+        screen.getByText('Log in to pick up where you left off.'),
+      ).toBeVisible();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Log in to continue' }),
+      );
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).toHaveBeenCalledWith({
+        trigger: AuthTriggers.Onboarding,
+        options: { isLogin: true },
+      });
+    });
+
+    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/),
+      ).toBeVisible();
+
+      const cta = screen.getByRole('link', { name: 'Continue onboarding' });
+
+      expect(cta).toHaveAttribute('href', signupHref);
+
+      fireEvent.click(cta);
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('cta variant', () => {
+    beforeEach(() => {
+      setVariant(HijackingVariant.CTA);
+    });
+
+    it('redirects to the webapp onboarding from the cat stage hero CTAs', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Own your new tab. Make it your dev briefing.',
+        }),
+      ).toBeVisible();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Sign up' }));
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
+
+      fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
     });
-    expect(showLogin).toHaveBeenCalledWith({
-      trigger: AuthTriggers.Onboarding,
-      options: { isLogin: true },
+
+    it('logs a signup impression for new visitors', () => {
+      renderComponent();
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
     });
   });
 
-  it('shows an onboarding CTA for logged in users who still need onboarding', () => {
-    renderComponent({ user: loggedUser, isLoggedIn: true });
+  describe('auth variant', () => {
+    beforeEach(() => {
+      setVariant(HijackingVariant.Auth);
+    });
+
+    it('redirects social and email sign-up options to the webapp onboarding', () => {
+      renderComponent();
+
+      expect(
+        screen.getByRole('heading', {
+          name: 'Where developers make every tab count.',
+        }),
+      ).toBeVisible();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Continue with GitHub' }),
+      );
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.SignupButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
+
+      fireEvent.click(
+        screen.getByRole('button', { name: 'Signup using email' }),
+      );
+      expect(assignMock).toHaveBeenCalledWith(signupHref);
+    });
+
+    it('redirects the log in link to the webapp onboarding login flow', () => {
+      renderComponent();
+
+      fireEvent.click(screen.getByRole('button', { name: 'Log in' }));
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
+    });
+
+    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.toHaveBeenCalledWith(
+        expect.objectContaining({ event_name: LogEvent.Impression }),
+      );
+
+      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.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" that redirects to the login flow', () => {
+      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.getByRole('heading', { name: /Welcome back, Tsahi/ }),
+      ).toBeVisible();
+      expect(screen.getByText('tsahi@daily.dev')).toBeVisible();
+
+      fireEvent.click(
+        screen.getByRole('button', { name: /Continue as Tsahi/ }),
+      );
+
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(assignMock).toHaveBeenCalledWith(loginHref);
+    });
+
+    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(assignMock).toHaveBeenCalledWith(signupHref);
+    });
+
+    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.',
-      ),
-    ).toBeVisible();
+      expect(
+        screen.getByText(
+          'Finish onboarding to unlock the full daily.dev experience.',
+        ),
+      ).toBeVisible();
 
-    const cta = screen.getByRole('link', { name: 'Continue onboarding' });
-    const expectedUrl = new URL(onboardingUrl);
-    expectedUrl.searchParams.append('r', 'extension');
+      const cta = screen.getByRole('link', { name: /Continue/ });
 
-    expect(cta).toHaveAttribute('href', expectedUrl.toString());
+      expect(cta).toHaveAttribute('href', signupHref);
 
-    fireEvent.click(cta);
+      fireEvent.click(cta);
 
-    expect(logEvent).toHaveBeenCalledWith({
-      event_name: LogEvent.Click,
-      target_type: TargetType.LoginButton,
-      target_id: 'hijacking',
+      expect(logEvent).toHaveBeenCalledWith({
+        event_name: LogEvent.Click,
+        target_type: TargetType.LoginButton,
+        target_id: 'hijacking',
+      });
+      expect(showLogin).not.toHaveBeenCalled();
     });
-    expect(showLogin).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/extension/src/newtab/HijackingLoginStrip.tsx b/packages/extension/src/newtab/HijackingLoginStrip.tsx
index 7185dbc58a..ed8562ee06 100644
--- a/packages/extension/src/newtab/HijackingLoginStrip.tsx
+++ b/packages/extension/src/newtab/HijackingLoginStrip.tsx
@@ -1,28 +1,231 @@
-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 { OnboardingRegistrationForm } from '@dailydotdev/shared/src/components/auth/OnboardingRegistrationForm';
+import {
+  ProfileImageSize,
+  ProfilePicture,
+} from '@dailydotdev/shared/src/components/ProfilePicture';
+import {
+  OnboardingActions,
+  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 { useConditionalFeature } from '@dailydotdev/shared/src/hooks';
+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 {
+  featureHijackingVariants,
+  HijackingVariant,
+} from '@dailydotdev/shared/src/lib/featureManagement';
 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';
+
+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]';
+
+// The extension can't run social OAuth from its own origin (the API rejects it
+// with a 403). Instead we hand auth off to the webapp onboarding flow, which
+// runs on a trusted origin and auto-triggers the relevant auth screen.
+const buildOnboardingHref = (action?: OnboardingActions): string => {
+  const base = new URL(onboardingUrl);
+  base.searchParams.append('r', 'extension');
+  if (action) {
+    base.searchParams.append('action', action);
+  }
+
+  return base.toString();
+};
+
+const onboardingHref = buildOnboardingHref();
+const loginHref = buildOnboardingHref(OnboardingActions.Login);
+
+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 {
+  onSignup: () => void;
+  onLogin: () => void;
+}
+
+type HeroActionButtonsProps = SigninHeroProps;
+
+function HeroActionButtons({
+  onSignup,
+  onLogin,
+}: 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={onSignup}
+      >
+        Sign up
+      </Button>
+      <Button
+        type="button"
+        variant={ButtonVariant.Secondary}
+        size={ButtonSize.Large}
+        className={classNames('flex-1', glassCta)}
+        onClick={onLogin}
+      >
+        Log in
+      </Button>
+    </div>
+  );
+}
+
+function CatStageHero({ onSignup, onLogin }: 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 onSignup={onSignup} onLogin={onLogin} />
+          </div>
+          <div className="flex justify-center tablet:justify-end">
+            <CatHeroImage />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function OnboardingSignupHero({
+  onSignup,
+  onLogin,
+}: 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">
+            <OnboardingRegistrationForm
+              isReady
+              compact
+              trigger={AuthTriggers.Onboarding}
+              onProviderClick={onSignup}
+              onContinueWithEmail={onSignup}
+              onExistingEmail={onLogin}
+              className={{
+                onboardingSignup: '!gap-3',
+              }}
+              onboardingSignupButton={{
+                variant: ButtonVariant.Primary,
+                size: ButtonSize.Large,
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
 
-export default function HijackingLoginStrip(): ReactElement {
+const SigninHeroMap = {
+  [HijackingVariant.CTA]: CatStageHero,
+  [HijackingVariant.Auth]: OnboardingSignupHero,
+} satisfies Record<
+  HijackingVariant.CTA | HijackingVariant.Auth,
+  (props: SigninHeroProps) => ReactElement
+>;
+
+function DefaultHijackingStrip(): ReactElement {
   const { showLogin, user } = useAuthContext();
   const { logEvent } = useLogContext();
   const isLoggedOut = !user;
-  const onboardingHref = (() => {
-    const base = new URL(onboardingUrl);
-    base.searchParams.append('r', 'extension');
-
-    return base.toString();
-  })();
 
   const logHijackingClick = (): void => {
     logEvent({
@@ -93,3 +296,185 @@ export default function HijackingLoginStrip(): ReactElement {
     </section>
   );
 }
+
+function HijackingHeroStrip({
+  variant: experimentVariant,
+}: {
+  variant: HijackingVariant.CTA | HijackingVariant.Auth;
+}): ReactElement {
+  const { user } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const { signBack, provider, isLoaded: isSignBackLoaded } = useSignBack();
+  const hasLoggedImpression = useRef(false);
+
+  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 logClick = (targetType: TargetType): void => {
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: targetType,
+      target_id: 'hijacking',
+    });
+  };
+
+  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 onSignup = (): void => {
+    logClick(TargetType.SignupButton);
+    window.location.assign(onboardingHref);
+  };
+
+  const onLogin = (): void => {
+    logClick(TargetType.LoginButton);
+    window.location.assign(loginHref);
+  };
+  const SigninHero = SigninHeroMap[experimentVariant];
+
+  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={onLogin}
+        >
+          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={onLogin}>
+            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={onSignup}>
+            Create an account
+          </ClickableText>
+        </div>
+      </div>,
+    );
+  }
+
+  return <SigninHero onSignup={onSignup} onLogin={onLogin} />;
+}
+
+export default function HijackingLoginStrip(): ReactElement | null {
+  const { value, isLoading } = useConditionalFeature({
+    feature: featureHijackingVariants,
+    shouldEvaluate: true,
+  });
+
+  if (isLoading) {
+    return null;
+  }
+
+  const hijackingVariant = value as HijackingVariant;
+
+  if (
+    hijackingVariant === HijackingVariant.CTA ||
+    hijackingVariant === HijackingVariant.Auth
+  ) {
+    return <HijackingHeroStrip variant={hijackingVariant} />;
+  }
+
+  return <DefaultHijackingStrip />;
+}
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index ce3fcde32a..e3ba54fbf3 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -210,6 +210,16 @@ export const featureFeedChips = new Feature<FeedChipsVariant>(
   FeedChipsVariant.None,
 );
 
+export enum HijackingVariant {
+  Default = 'default',
+  CTA = 'cta',
+  Auth = 'auth',
+}
+export const featureHijackingVariants = new Feature<HijackingVariant>(
+  'hijacking_variants',
+  HijackingVariant.Default,
+);
+
 export const featureLayoutV2 = new Feature('layout_v2', false);
 
 export const featureEngagementBarV2 = new Feature('engagement_bar_v2', false);
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% {