diff --git a/packages/shared/src/components/MainLayout.tsx b/packages/shared/src/components/MainLayout.tsx
index 6e1ba91063a..bccdd76faf6 100644
--- a/packages/shared/src/components/MainLayout.tsx
+++ b/packages/shared/src/components/MainLayout.tsx
@@ -33,8 +33,6 @@ import PlusMobileEntryBanner from './banners/PlusMobileEntryBanner';
 import usePlusEntry from '../hooks/usePlusEntry';
 import { SearchProvider } from '../contexts/search/SearchContext';
 import { FeedbackWidget } from './feedback';
-import { useConditionalFeature } from '../hooks/useConditionalFeature';
-import { swipeOnboardingFeature } from '../lib/featureManagement';
 
 const GoBackHeaderMobile = dynamic(
   () =>
@@ -99,10 +97,6 @@ function MainLayoutComponent({
   const { isNotificationsReady, unreadCount } = useNotificationContext();
   const isPageReady =
     (growthbook?.ready && router?.isReady && isAuthReady) || isTesting;
-  const { value: isSwipeOnboardingEnabled } = useConditionalFeature({
-    feature: swipeOnboardingFeature,
-    shouldEvaluate: !user,
-  });
   const swipeOnboardingPreviewQuery =
     router.query[swipeOnboardingPreviewQueryKey];
   const isSwipeOnboardingPreviewForced =
@@ -142,9 +136,7 @@ function MainLayoutComponent({
 
     if (entries.length === 0) {
       router.push(
-        isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
-          ? swipeOnboardingUrl
-          : onboardingUrl,
+        isSwipeOnboardingPreviewForced ? swipeOnboardingUrl : onboardingUrl,
       );
       return;
     }
@@ -155,17 +147,11 @@ function MainLayoutComponent({
       params.append(key, value as string);
     });
 
-    const destination =
-      isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
-        ? swipeOnboardingUrl
-        : onboardingUrl;
+    const destination = isSwipeOnboardingPreviewForced
+      ? swipeOnboardingUrl
+      : onboardingUrl;
     router.push(`${destination}?${params.toString()}`);
-  }, [
-    isSwipeOnboardingEnabled,
-    isSwipeOnboardingPreviewForced,
-    shouldRedirectOnboarding,
-    router,
-  ]);
+  }, [isSwipeOnboardingPreviewForced, shouldRedirectOnboarding, router]);
 
   const ignoredUtmMediumForLogin = ['slack'];
   const utmSource = router?.query?.utm_source;
diff --git a/packages/shared/src/components/filters/MyFeedHeading.spec.tsx b/packages/shared/src/components/filters/MyFeedHeading.spec.tsx
new file mode 100644
index 00000000000..64f9976a271
--- /dev/null
+++ b/packages/shared/src/components/filters/MyFeedHeading.spec.tsx
@@ -0,0 +1,254 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useRouter } from 'next/router';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useActiveFeedNameContext } from '../../contexts';
+import { useSettingsContext } from '../../contexts/SettingsContext';
+import { useActions, useFeedLayout, useViewSize, ViewSize } from '../../hooks';
+import { useShortcutsUser } from '../../features/shortcuts/hooks/useShortcutsUser';
+import { ActionType } from '../../graphql/actions';
+import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
+import { getHasSeenTags, setHasSeenTags } from '../../lib/feedSettings';
+import { SharedFeedPage } from '../utilities';
+import MyFeedHeading from './MyFeedHeading';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+
+jest.mock('../../contexts', () => ({
+  useActiveFeedNameContext: jest.fn(),
+}));
+
+jest.mock('../../contexts/SettingsContext', () => ({
+  useSettingsContext: jest.fn(),
+}));
+
+jest.mock('../../hooks', () => ({
+  useActions: jest.fn(),
+  useFeedLayout: jest.fn(),
+  useViewSize: jest.fn(),
+  ViewSize: {
+    MobileL: 'mobile',
+    Laptop: 'laptop',
+  },
+}));
+
+jest.mock('../../features/shortcuts/hooks/useShortcutsUser', () => ({
+  useShortcutsUser: jest.fn(),
+}));
+
+jest.mock('../../hooks/feed/useCustomDefaultFeed', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+jest.mock('../AlertDot', () => ({
+  AlertDot: ({ className }: { className?: string }) => (
+    <div data-testid="alert-dot" className={className} />
+  ),
+  AlertColor: { Bun: 'bg-accent-bun-default' },
+}));
+
+jest.mock('../feeds/FeedSettingsButton', () => ({
+  FeedSettingsButton: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick: () => void;
+  }) => (
+    <button type="button" onClick={onClick}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock('../../lib/constants', () => ({
+  ...jest.requireActual('../../lib/constants'),
+  webappUrl: 'https://app.daily.dev/',
+  settingsUrl: 'https://app.daily.dev/settings',
+}));
+
+jest.mock('../../lib/feedSettings', () => ({
+  getHasSeenTags: jest.fn(),
+  setHasSeenTags: jest.fn(),
+}));
+
+const mockUseRouter = useRouter as jest.Mock;
+const mockUseAuthContext = useAuthContext as jest.Mock;
+const mockUseActiveFeedNameContext = useActiveFeedNameContext as jest.Mock;
+const mockUseSettingsContext = useSettingsContext as jest.Mock;
+const mockUseActions = useActions as jest.Mock;
+const mockUseFeedLayout = useFeedLayout as jest.Mock;
+const mockUseViewSize = useViewSize as jest.Mock;
+const mockUseShortcutsUser = useShortcutsUser as jest.Mock;
+const mockUseCustomDefaultFeed = useCustomDefaultFeed as jest.Mock;
+const mockGetHasSeenTags = getHasSeenTags as jest.Mock;
+const mockSetHasSeenTags = setHasSeenTags as jest.Mock;
+
+const push = jest.fn();
+const completeAction = jest.fn();
+
+const renderComponent = () => render(<MyFeedHeading />);
+
+describe('MyFeedHeading', () => {
+  beforeEach(() => {
+    push.mockReset();
+    push.mockResolvedValue(true);
+    completeAction.mockReset();
+    completeAction.mockResolvedValue(undefined);
+    mockGetHasSeenTags.mockReset();
+    mockGetHasSeenTags.mockReturnValue(null);
+    mockSetHasSeenTags.mockReset();
+
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/',
+      query: {},
+    });
+    mockUseAuthContext.mockReturnValue({
+      user: { id: 'user-1' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.MyFeed,
+    });
+    mockUseSettingsContext.mockReturnValue({
+      toggleShowTopSites: jest.fn(),
+    });
+    mockUseActions.mockReturnValue({
+      completeAction,
+      checkHasCompleted: jest.fn().mockReturnValue(false),
+      isActionsFetched: true,
+    });
+    mockUseFeedLayout.mockReturnValue({
+      shouldUseListFeedLayout: false,
+    });
+    mockUseViewSize.mockImplementation((size) => size === ViewSize.Laptop);
+    mockUseShortcutsUser.mockReturnValue({
+      isOldUserWithNoShortcuts: false,
+      showToggleShortcuts: false,
+    });
+    mockUseCustomDefaultFeed.mockReturnValue({
+      isCustomDefaultFeed: false,
+      defaultFeedId: 'user-1',
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('routes the home custom default feed to its edit page', async () => {
+    mockUseCustomDefaultFeed.mockReturnValue({
+      isCustomDefaultFeed: true,
+      defaultFeedId: 'feed-1',
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/feed-1/edit',
+    );
+  });
+
+  it('routes the home For you feed to the user edit page with the tags tab open', async () => {
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+
+  it('routes the For you feed to the user edit page with the tags tab open', async () => {
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/my-feed',
+      query: {},
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+
+  it('routes custom feeds to their slug or id edit page', async () => {
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/feeds/[slugOrId]',
+      query: { slugOrId: 'feed-2' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.Custom,
+    });
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/feed-2/edit',
+    );
+  });
+
+  it('shows the tags reminder dot for the For you feed when tags were not seen yet', () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+
+    renderComponent();
+
+    expect(screen.getByTestId('alert-dot')).toBeInTheDocument();
+  });
+
+  it('does not show the tags reminder dot for custom feeds', () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+    mockUseRouter.mockReturnValue({
+      push,
+      pathname: '/feeds/[slugOrId]',
+      query: { slugOrId: 'feed-2' },
+    });
+    mockUseActiveFeedNameContext.mockReturnValue({
+      feedName: SharedFeedPage.Custom,
+    });
+
+    renderComponent();
+
+    expect(screen.queryByTestId('alert-dot')).not.toBeInTheDocument();
+  });
+
+  it('marks tags as seen before navigating from the For you feed settings button', async () => {
+    mockGetHasSeenTags.mockReturnValue(false);
+
+    renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Feed settings' }),
+    );
+
+    expect(mockSetHasSeenTags).toHaveBeenCalledWith('user-1', true);
+    expect(completeAction).toHaveBeenCalledWith(ActionType.HasSeenTags);
+    expect(push).toHaveBeenCalledWith(
+      'https://app.daily.dev/feeds/user-1/edit?dview=tags',
+    );
+  });
+});
diff --git a/packages/shared/src/components/filters/MyFeedHeading.tsx b/packages/shared/src/components/filters/MyFeedHeading.tsx
index 70f9a0d5cc9..333976ec477 100644
--- a/packages/shared/src/components/filters/MyFeedHeading.tsx
+++ b/packages/shared/src/components/filters/MyFeedHeading.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { FilterIcon, PlusIcon } from '../icons';
 import {
@@ -12,9 +12,13 @@ import { useActions, useFeedLayout, useViewSize, ViewSize } from '../../hooks';
 import { ActionType } from '../../graphql/actions';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { FeedSettingsButton } from '../feeds/FeedSettingsButton';
+import { AlertColor, AlertDot } from '../AlertDot';
+import { FeedSettingsMenu } from '../feeds/FeedSettings/types';
 import { useShortcutsUser } from '../../features/shortcuts/hooks/useShortcutsUser';
 import useCustomDefaultFeed from '../../hooks/feed/useCustomDefaultFeed';
+import { useAuthContext } from '../../contexts/AuthContext';
 import { settingsUrl, webappUrl } from '../../lib/constants';
+import { getHasSeenTags, setHasSeenTags } from '../../lib/feedSettings';
 import { SharedFeedPage } from '../utilities';
 import { useActiveFeedNameContext } from '../../contexts';
 
@@ -26,7 +30,7 @@ function MyFeedHeading({
   onOpenFeedFilters,
 }: MyFeedHeadingProps): ReactElement {
   const { push, pathname, query } = useRouter();
-  const { completeAction } = useActions();
+  const { completeAction, checkHasCompleted, isActionsFetched } = useActions();
   const { toggleShowTopSites } = useSettingsContext();
   const { isOldUserWithNoShortcuts, showToggleShortcuts } = useShortcutsUser();
   const isMobile = useViewSize(ViewSize.MobileL);
@@ -34,38 +38,90 @@ function MyFeedHeading({
   const isLaptop = useViewSize(ViewSize.Laptop);
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const { feedName } = useActiveFeedNameContext();
+  const { user } = useAuthContext();
+  const [hasSeenTagsState, setHasSeenTagsState] = useState<boolean | null>(
+    null,
+  );
+
+  const hasSeenTagsAction =
+    isActionsFetched && checkHasCompleted(ActionType.HasSeenTags);
 
   const editFeedUrl = useMemo(() => {
     if (isCustomDefaultFeed && pathname === '/') {
       return `${webappUrl}feeds/${defaultFeedId}/edit`;
     }
 
+    if (feedName === SharedFeedPage.MyFeed && user?.id) {
+      return `${webappUrl}feeds/${user.id}/edit?dview=${FeedSettingsMenu.Tags}`;
+    }
+
     if (feedName === SharedFeedPage.Custom) {
       return `${webappUrl}feeds/${query.slugOrId}/edit`;
     }
 
     return `${settingsUrl}/feed/general`;
-  }, [defaultFeedId, feedName, isCustomDefaultFeed, pathname, query]);
+  }, [defaultFeedId, feedName, isCustomDefaultFeed, pathname, query, user?.id]);
+
+  useEffect(() => {
+    if (!user?.id) {
+      setHasSeenTagsState(null);
+      return;
+    }
+
+    if (hasSeenTagsAction) {
+      setHasSeenTags(user.id, true);
+      setHasSeenTagsState(true);
+      return;
+    }
+
+    setHasSeenTagsState(getHasSeenTags(user.id));
+  }, [hasSeenTagsAction, user?.id]);
+
+  const shouldShowTagsReminder =
+    feedName === SharedFeedPage.MyFeed && hasSeenTagsState === false;
 
   const onClick = useCallback(() => {
+    if (shouldShowTagsReminder && user?.id) {
+      setHasSeenTags(user.id, true);
+      setHasSeenTagsState(true);
+      completeAction(ActionType.HasSeenTags).catch(() => null);
+    }
+
     onOpenFeedFilters?.();
 
     return push(editFeedUrl);
-  }, [editFeedUrl, onOpenFeedFilters, push]);
+  }, [
+    completeAction,
+    editFeedUrl,
+    onOpenFeedFilters,
+    push,
+    shouldShowTagsReminder,
+    user?.id,
+  ]);
 
   return (
     <>
-      <FeedSettingsButton
-        onClick={onClick}
-        size={ButtonSize.Medium}
-        variant={isLaptop ? ButtonVariant.Float : ButtonVariant.Tertiary}
-        icon={<FilterIcon />}
-        iconPosition={
-          shouldUseListFeedLayout ? ButtonIconPosition.Right : undefined
-        }
-      >
-        {!isMobile ? 'Feed settings' : null}
-      </FeedSettingsButton>
+      <div className="relative">
+        <FeedSettingsButton
+          onClick={onClick}
+          size={ButtonSize.Medium}
+          variant={isLaptop ? ButtonVariant.Float : ButtonVariant.Tertiary}
+          icon={<FilterIcon />}
+          iconPosition={
+            shouldUseListFeedLayout
+              ? ButtonIconPosition.Right
+              : ButtonIconPosition.Left
+          }
+        >
+          {!isMobile ? 'Feed settings' : null}
+        </FeedSettingsButton>
+        {shouldShowTagsReminder && (
+          <AlertDot
+            color={AlertColor.Bun}
+            className="pointer-events-none right-2 top-2 border border-background-default"
+          />
+        )}
+      </div>
       {showToggleShortcuts && (
         <Button
           size={ButtonSize.Medium}
@@ -80,7 +136,9 @@ function MyFeedHeading({
           }}
           icon={<PlusIcon />}
           iconPosition={
-            shouldUseListFeedLayout ? ButtonIconPosition.Right : undefined
+            shouldUseListFeedLayout
+              ? ButtonIconPosition.Right
+              : ButtonIconPosition.Left
           }
         >
           Shortcuts
diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.spec.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.spec.tsx
index b3564855588..78d88a6f433 100644
--- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.spec.tsx
+++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.spec.tsx
@@ -282,4 +282,42 @@ describe('HotAndColdModal', () => {
       'line-clamp-3',
     );
   });
+
+  it('should keep onboarding mode clipped and scrollable inside the modal shell', () => {
+    render(
+      <HotAndColdModal
+        isOpen
+        onRequestClose={jest.fn()}
+        ariaHideApp={false}
+        onboardingCards={[
+          {
+            id: 'onboarding-card-1',
+            title: 'Figma launches MCP tool for AI agents to design on canvas',
+            summary:
+              'A generated TLDR keeps the onboarding card readable while the modal stays within its shell.',
+            tags: ['ai-agents', 'figma', 'mcp'],
+            source: { name: 'daily.dev' },
+          },
+        ]}
+        topSlot={<div>Progress header</div>}
+        bottomSlot={<div>Starter feed ready</div>}
+      />,
+    );
+
+    const modalBody = document.querySelector('section');
+    expect(modalBody).toHaveClass('overflow-y-auto', 'overflow-x-hidden');
+    expect(modalBody).not.toHaveClass(
+      'tablet:!overflow-x-visible',
+      'tablet:!overflow-y-visible',
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Not interesting' }),
+    ).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Interesting' })).toBeVisible();
+    expect(
+      screen.getByRole('img', { name: 'daily.dev source icon' }),
+    ).toBeVisible();
+    expect(screen.getByText('Starter feed ready')).toBeVisible();
+  });
 });
diff --git a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
index d58821bd584..6dc4d4f5875 100644
--- a/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
+++ b/packages/shared/src/components/modals/hotTakes/HotAndColdModal.tsx
@@ -31,6 +31,7 @@ import { ReputationUserBadge } from '../../ReputationUserBadge';
 import { VerifiedCompanyUserBadge } from '../../VerifiedCompanyUserBadge';
 import { PlusUserBadge } from '../../PlusUserBadge';
 import { Loader } from '../../Loader';
+import LogoIcon from '../../../svg/LogoIcon';
 import type { HotTake } from '../../../graphql/user/userHotTake';
 
 const SWIPE_THRESHOLD = 80;
@@ -54,9 +55,9 @@ const HOT_TAKE_CARD_HEIGHT = '28rem';
 /** Title3 × 3 lines (typo-title3 line-height 1.625rem in tailwind/typography.ts). */
 const ONBOARDING_CARD_TITLE_MIN_HEIGHT = '4.875rem';
 /** Fixed onboarding post card (source + 3-line title + 4:3 image + padding). */
-const ONBOARDING_POST_CARD_HEIGHT = '24rem';
+const ONBOARDING_POST_CARD_HEIGHT = 'clamp(19.5rem, 42dvh, 24rem)';
 /** Swipe stack area: card height plus back-card vertical offset (8px). */
-const ONBOARDING_SWIPE_AREA_HEIGHT = '24.5rem';
+const ONBOARDING_SWIPE_AREA_HEIGHT = `calc(${ONBOARDING_POST_CARD_HEIGHT} + 0.5rem)`;
 
 const smoothstep01 = (t: number): number => {
   const x = Math.min(Math.max(t, 0), 1);
@@ -453,6 +454,72 @@ const OnboardingCardBehindParticles = (): ReactElement => (
   </>
 );
 
+const OnboardingSwipeHintButton = ({
+  deltaX,
+  direction,
+  disabled,
+  onClick,
+}: {
+  deltaX: number;
+  direction: 'left' | 'right';
+  disabled: boolean;
+  onClick: () => void;
+}): ReactElement => {
+  const swipeVisualIntensity = Math.min(Math.abs(deltaX) / SWIPE_THRESHOLD, 1);
+  const isLeftDirection = direction === 'left';
+  let visualStrength = 0;
+  if (isLeftDirection && deltaX < 0) {
+    visualStrength = swipeVisualIntensity;
+  }
+  if (!isLeftDirection && deltaX > 0) {
+    visualStrength = swipeVisualIntensity;
+  }
+  const accentColor = isLeftDirection
+    ? 'var(--theme-accent-bacon-default)'
+    : 'var(--theme-accent-avocado-default)';
+  const isEmphasized = visualStrength > 0;
+  const restingClassName = isLeftDirection
+    ? 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-bacon-default enabled:hover:text-accent-bacon-default enabled:focus-visible:border-accent-bacon-default enabled:focus-visible:text-accent-bacon-default enabled:active:border-accent-bacon-default enabled:active:text-accent-bacon-default'
+    : 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-avocado-default enabled:hover:text-accent-avocado-default enabled:focus-visible:border-accent-avocado-default enabled:focus-visible:text-accent-avocado-default enabled:active:border-accent-avocado-default enabled:active:text-accent-avocado-default';
+
+  return (
+    <button
+      type="button"
+      aria-label={isLeftDirection ? 'Not interesting' : 'Interesting'}
+      disabled={disabled}
+      className={classNames(
+        'shadow-1 flex size-14 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
+        'disabled:cursor-not-allowed disabled:opacity-40',
+        isEmphasized ? 'opacity-100' : restingClassName,
+      )}
+      style={{
+        transform: `scale(${1 + visualStrength * 0.1})`,
+        ...(isEmphasized
+          ? {
+              color: accentColor,
+              borderColor: accentColor,
+              backgroundColor: `color-mix(in srgb, ${accentColor} ${Math.round(
+                visualStrength * 16,
+              )}%, transparent)`,
+              boxShadow: `0 0 ${
+                8 + visualStrength * 10
+              }px color-mix(in srgb, ${accentColor} ${Math.round(
+                visualStrength * 45,
+              )}%, transparent)`,
+            }
+          : {}),
+      }}
+      onClick={onClick}
+    >
+      {isLeftDirection ? (
+        <MiniCloseIcon size={IconSize.Large} />
+      ) : (
+        <VIcon size={IconSize.Large} />
+      )}
+    </button>
+  );
+};
+
 const OnboardingSwipeHintIcons = ({
   deltaX,
   disabled,
@@ -464,81 +531,20 @@ const OnboardingSwipeHintIcons = ({
   onNotInteresting: () => void;
   onInteresting: () => void;
 }): ReactElement => {
-  const swipeVisualIntensity = Math.min(Math.abs(deltaX) / SWIPE_THRESHOLD, 1);
-  const leftVisualStrength = deltaX < 0 ? swipeVisualIntensity : 0;
-  const rightVisualStrength = deltaX > 0 ? swipeVisualIntensity : 0;
-
-  const leftAccentColor = 'var(--theme-accent-bacon-default)';
-  const rightAccentColor = 'var(--theme-accent-avocado-default)';
-  const leftSwipeEmphasized = leftVisualStrength > 0;
-  const rightSwipeEmphasized = rightVisualStrength > 0;
-
   return (
     <div className="flex items-center justify-center gap-6 px-1">
-      <button
-        type="button"
-        aria-label="Not interesting"
+      <OnboardingSwipeHintButton
+        deltaX={deltaX}
+        direction="left"
         disabled={disabled}
-        className={classNames(
-          'shadow-1 flex size-14 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
-          'disabled:cursor-not-allowed disabled:opacity-40',
-          leftSwipeEmphasized
-            ? 'opacity-100'
-            : 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-bacon-default enabled:hover:text-accent-bacon-default enabled:focus-visible:border-accent-bacon-default enabled:focus-visible:text-accent-bacon-default enabled:active:border-accent-bacon-default enabled:active:text-accent-bacon-default',
-        )}
-        style={{
-          transform: `scale(${1 + leftVisualStrength * 0.1})`,
-          ...(leftSwipeEmphasized
-            ? {
-                color: leftAccentColor,
-                borderColor: leftAccentColor,
-                backgroundColor: `color-mix(in srgb, ${leftAccentColor} ${Math.round(
-                  leftVisualStrength * 16,
-                )}%, transparent)`,
-                boxShadow: `0 0 ${
-                  8 + leftVisualStrength * 10
-                }px color-mix(in srgb, ${leftAccentColor} ${Math.round(
-                  leftVisualStrength * 45,
-                )}%, transparent)`,
-              }
-            : {}),
-        }}
         onClick={onNotInteresting}
-      >
-        <MiniCloseIcon size={IconSize.Large} />
-      </button>
-      <button
-        type="button"
-        aria-label="Interesting"
+      />
+      <OnboardingSwipeHintButton
+        deltaX={deltaX}
+        direction="right"
         disabled={disabled}
-        className={classNames(
-          'shadow-1 flex size-14 cursor-pointer items-center justify-center rounded-full border transition-all duration-150 ease-out',
-          'disabled:cursor-not-allowed disabled:opacity-40',
-          rightSwipeEmphasized
-            ? 'opacity-100'
-            : 'border-border-subtlest-secondary text-text-secondary enabled:hover:border-accent-avocado-default enabled:hover:text-accent-avocado-default enabled:focus-visible:border-accent-avocado-default enabled:focus-visible:text-accent-avocado-default enabled:active:border-accent-avocado-default enabled:active:text-accent-avocado-default',
-        )}
-        style={{
-          transform: `scale(${1 + rightVisualStrength * 0.1})`,
-          ...(rightSwipeEmphasized
-            ? {
-                color: rightAccentColor,
-                borderColor: rightAccentColor,
-                backgroundColor: `color-mix(in srgb, ${rightAccentColor} ${Math.round(
-                  rightVisualStrength * 16,
-                )}%, transparent)`,
-                boxShadow: `0 0 ${
-                  8 + rightVisualStrength * 10
-                }px color-mix(in srgb, ${rightAccentColor} ${Math.round(
-                  rightVisualStrength * 45,
-                )}%, transparent)`,
-              }
-            : {}),
-        }}
         onClick={onInteresting}
-      >
-        <VIcon size={IconSize.Large} />
-      </button>
+      />
     </div>
   );
 };
@@ -1322,6 +1328,8 @@ const OnboardingPostCard = ({
   dismissDurationMs: number;
   useInstantSwipeTransform?: boolean;
 }): ReactElement => {
+  const sourceName = card.source?.name || 'daily.dev';
+  const sourceImage = card.source?.image;
   const isSkipAnimating = isTop && isDismissAnimating && skipDeltaY !== 0;
   let swipeDirection: 'left' | 'right' | null = null;
   if (isTop && Math.abs(swipeDelta) > 20) {
@@ -1361,6 +1369,30 @@ const OnboardingPostCard = ({
     }
   }
 
+  let sourceAvatar: ReactElement;
+  if (sourceImage) {
+    sourceAvatar = (
+      <img
+        alt={`${sourceName} source icon`}
+        className="size-6 rounded-full object-cover"
+        draggable={false}
+        src={sourceImage}
+      />
+    );
+  } else if (sourceName === 'daily.dev') {
+    sourceAvatar = (
+      <div
+        role="img"
+        aria-label="daily.dev source icon"
+        className="flex size-6 items-center justify-center rounded-full bg-surface-hover"
+      >
+        <LogoIcon className={{ container: 'h-2.5 w-auto' }} />
+      </div>
+    );
+  } else {
+    sourceAvatar = <div className="size-6 rounded-full bg-surface-hover" />;
+  }
+
   return (
     <div
       className={classNames(
@@ -1386,39 +1418,32 @@ const OnboardingPostCard = ({
           : '0 0.75rem 1.75rem -0.75rem rgba(0, 0, 0, 0.32)',
       }}
     >
-      {swipeDirection && (
-        <div
-          className={classNames(
-            'z-20 absolute left-1/2 top-3 -translate-x-1/2 rounded-10 px-3 py-1 font-bold text-white typo-callout',
-            swipeDirection === 'right'
-              ? 'bg-accent-avocado-default'
-              : 'bg-accent-bacon-default',
-          )}
-          style={{ opacity: swipeIntensity }}
-        >
-          {swipeDirection === 'right' ? 'INTERESTING' : 'NOT'}
-        </div>
-      )}
       <div className="flex min-h-0 flex-1 flex-col gap-4 p-4">
-        <div className="flex shrink-0 items-center gap-2">
-          {card.source?.image ? (
-            <img
-              alt={card.source.name ?? 'Source'}
-              className="size-6 rounded-full object-cover"
-              draggable={false}
-              src={card.source.image}
-            />
-          ) : (
-            <div className="size-6 rounded-full bg-surface-hover" />
-          )}
-          <Typography
-            type={TypographyType.Footnote}
-            color={TypographyColor.Secondary}
-            className="truncate"
-            bold
-          >
-            {card.source?.name || 'daily.dev'}
-          </Typography>
+        <div className="flex shrink-0 items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">
+            {sourceAvatar}
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Secondary}
+              className="min-w-0 truncate"
+              bold
+            >
+              {sourceName}
+            </Typography>
+          </div>
+          {swipeDirection ? (
+            <div
+              className={classNames(
+                'shrink-0 rounded-10 px-3 py-1 font-bold text-white typo-callout',
+                swipeDirection === 'right'
+                  ? 'bg-accent-avocado-default'
+                  : 'bg-accent-bacon-default',
+              )}
+              style={{ opacity: swipeIntensity }}
+            >
+              {swipeDirection === 'right' ? 'INTERESTING' : 'UNINTERESTING'}
+            </div>
+          ) : null}
         </div>
         <div
           className="shrink-0"
@@ -1433,16 +1458,55 @@ const OnboardingPostCard = ({
             {card.title || 'Popular developer story'}
           </Typography>
         </div>
-        <div className="aspect-[4/3] w-full shrink-0 overflow-hidden rounded-12">
-          {card.image ? (
-            <img
-              alt={card.title ?? 'Popular post'}
-              className="size-full rounded-12 object-cover"
-              draggable={false}
-              src={card.image}
-            />
+        {card.tags && card.tags.length > 0 && (
+          <div className="flex shrink-0 flex-wrap gap-1.5">
+            {card.tags.slice(0, 5).map((tag) => (
+              <span
+                key={tag}
+                className="rounded-8 bg-surface-hover px-2 py-0.5 text-text-tertiary typo-footnote"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="bg-surface-hover/60 flex min-h-0 flex-1 flex-col overflow-hidden rounded-12 border border-border-subtlest-tertiary p-4">
+          {card.summary ? (
+            <>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Secondary}
+                className="shrink-0 uppercase tracking-[0.08em]"
+                bold
+              >
+                TLDR
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Primary}
+                className="mt-2 line-clamp-6 overflow-hidden text-pretty"
+              >
+                {card.summary}
+              </Typography>
+            </>
           ) : (
-            <div className="size-full rounded-12 bg-surface-hover" />
+            <>
+              <Typography
+                type={TypographyType.Footnote}
+                color={TypographyColor.Secondary}
+                className="shrink-0 uppercase tracking-[0.08em]"
+                bold
+              >
+                TLDR
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+                className="mt-2"
+              >
+                No summary available for this post yet.
+              </Typography>
+            </>
           )}
         </div>
       </div>
@@ -1458,9 +1522,7 @@ const OnboardingFeedEmptyState = ({
   isRefetching: boolean;
 }): ReactElement => (
   <div className="flex flex-1 flex-col items-center justify-center gap-4 p-6">
-    {isRefetching ? (
-      <Loader />
-    ) : null}
+    {isRefetching ? <Loader /> : null}
     <Typography
       type={TypographyType.Title3}
       color={TypographyColor.Primary}
@@ -1539,6 +1601,7 @@ export type OnboardingSwipeActionMeta = {
 export interface OnboardingSwipeCard {
   id: string;
   title?: string;
+  summary?: string | null;
   image?: string | null;
   tags?: string[];
   source?: {
@@ -1552,6 +1615,7 @@ interface HotAndColdModalProps extends ModalProps {
   headerSlot?: ReactNode;
   topSlot?: ReactNode;
   bottomSlot?: ReactNode;
+  onboardingContent?: ReactNode;
   showHeader?: boolean;
   showDefaultActions?: boolean;
   showAddHotTakeButton?: boolean;
@@ -1568,6 +1632,8 @@ interface HotAndColdModalProps extends ModalProps {
   onOnboardingFeedRetry?: () => void;
   /** True while onboarding deck query is fetching (initial or retry). */
   onboardingFeedRefetching?: boolean;
+  /** Renders onboarding swipe actions under the card or beside it on wider viewports. */
+  onboardingActionLayout?: 'bottom' | 'sides';
 }
 
 const HotAndColdModal = ({
@@ -1576,6 +1642,7 @@ const HotAndColdModal = ({
   headerSlot,
   topSlot,
   bottomSlot,
+  onboardingContent,
   showHeader = true,
   showDefaultActions = true,
   showAddHotTakeButton = true,
@@ -1586,6 +1653,7 @@ const HotAndColdModal = ({
   onDismissedOnboardingCardsChange,
   onOnboardingFeedRetry,
   onboardingFeedRefetching = false,
+  onboardingActionLayout = 'bottom',
   className,
   ...props
 }: HotAndColdModalProps): ReactElement => {
@@ -1636,7 +1704,9 @@ const HotAndColdModal = ({
     setOnboardingIntroDelta(0);
   }, []);
 
-  const isOnboardingMode = !!onboardingCards;
+  const hasOnboardingCards = !!onboardingCards;
+  const hasOnboardingContent = onboardingContent !== undefined;
+  const isOnboardingMode = hasOnboardingCards || hasOnboardingContent;
   const availableOnboardingCards = useMemo(
     () =>
       (onboardingCards ?? []).filter((card) => !dismissedCardIds.has(card.id)),
@@ -1646,7 +1716,7 @@ const HotAndColdModal = ({
   const nextOnboardingCard = availableOnboardingCards[1];
   const isModalLoading = isOnboardingMode ? onboardingCardsLoading : isLoading;
   const isModalEmpty = isOnboardingMode
-    ? !isModalLoading && !currentOnboardingCard
+    ? !isModalLoading && !hasOnboardingContent && !currentOnboardingCard
     : isEmpty;
   const swipeAreaHeight = isOnboardingMode
     ? ONBOARDING_SWIPE_AREA_HEIGHT
@@ -1679,7 +1749,7 @@ const HotAndColdModal = ({
 
   useEffect(() => {
     if (
-      !isOnboardingMode ||
+      !hasOnboardingCards ||
       isModalLoading ||
       !currentOnboardingCard ||
       onboardingIntroRepeatCancelledRef.current
@@ -1753,7 +1823,34 @@ const HotAndColdModal = ({
       setOnboardingIntroDelta(0);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- depend on card id only, not currentOnboardingCard reference
-  }, [isOnboardingMode, isModalLoading, currentOnboardingCard?.id]);
+  }, [hasOnboardingCards, isModalLoading, currentOnboardingCard?.id]);
+
+  useEffect(() => {
+    if (hasOnboardingCards) {
+      return;
+    }
+
+    abortOnboardingIntro();
+
+    if (flyTimerRef.current) {
+      clearTimeout(flyTimerRef.current);
+      flyTimerRef.current = null;
+    }
+    if (dismissTimerRef.current) {
+      clearTimeout(dismissTimerRef.current);
+      dismissTimerRef.current = null;
+    }
+
+    animatingTakeIdRef.current = null;
+    setAnimatingTakeId(null);
+    setDismissDurationMs(DISMISS_ANIMATION_MS);
+    setIsAnimating(false);
+    setIsDragging(false);
+    setSwipeDelta(0);
+    swipeDeltaRef.current = 0;
+    setSkipDelta(0);
+    swipeDeltaYRef.current = 0;
+  }, [hasOnboardingCards, abortOnboardingIntro]);
 
   const startDismissAnimation = useCallback(
     ({
@@ -1800,7 +1897,7 @@ const HotAndColdModal = ({
         swipeDeltaYRef.current = 0;
         animatingTakeIdRef.current = null;
         setAnimatingTakeId(null);
-        if (isOnboardingMode && currentOnboardingCard) {
+        if (hasOnboardingCards && currentOnboardingCard) {
           updateDismissedCardIds((prev) => {
             const next = new Set(prev);
             next.add(currentOnboardingCard.id);
@@ -1820,7 +1917,7 @@ const HotAndColdModal = ({
     [
       currentOnboardingCard,
       dismissCurrent,
-      isOnboardingMode,
+      hasOnboardingCards,
       onboardingCards,
       updateDismissedCardIds,
     ],
@@ -1828,7 +1925,7 @@ const HotAndColdModal = ({
 
   const handleDismiss = useCallback(
     (direction: 'left' | 'right', source: 'swipe' | 'button' = 'swipe') => {
-      const currentItemId = isOnboardingMode
+      const currentItemId = hasOnboardingCards
         ? currentOnboardingCard?.id
         : currentTake?.id;
 
@@ -1865,7 +1962,7 @@ const HotAndColdModal = ({
       }
       onSwipeAction?.(
         direction,
-        isOnboardingMode ? { onboardingCardId: currentItemId } : undefined,
+        hasOnboardingCards ? { onboardingCardId: currentItemId } : undefined,
       );
 
       let initialPush: number;
@@ -1899,8 +1996,9 @@ const HotAndColdModal = ({
     [
       currentTake,
       currentOnboardingCard,
-      isOnboardingMode,
+      hasOnboardingCards,
       isAnimating,
+      isOnboardingMode,
       startDismissAnimation,
       toggleDownvote,
       toggleUpvote,
@@ -1913,7 +2011,7 @@ const HotAndColdModal = ({
 
   const handleSkip = useCallback(
     (source: 'swipe' | 'button' = 'button') => {
-      const currentItemId = isOnboardingMode
+      const currentItemId = hasOnboardingCards
         ? currentOnboardingCard?.id
         : currentTake?.id;
 
@@ -1944,8 +2042,9 @@ const HotAndColdModal = ({
       cancelHotTakeVote,
       currentTake,
       currentOnboardingCard,
-      isOnboardingMode,
+      hasOnboardingCards,
       isAnimating,
+      isOnboardingMode,
       startDismissAnimation,
       logEvent,
       onSwipeAction,
@@ -1953,7 +2052,7 @@ const HotAndColdModal = ({
     ],
   );
 
-  const currentCardId = isOnboardingMode
+  const currentCardId = hasOnboardingCards
     ? currentOnboardingCard?.id
     : currentTake?.id;
   const isCurrentTakeAnimating =
@@ -1962,11 +2061,11 @@ const HotAndColdModal = ({
     isAnimating && !isCurrentTakeAnimating ? 0 : swipeDelta;
   const cardSkipDelta = isAnimating && !isCurrentTakeAnimating ? 0 : skipDelta;
   const combinedOnboardingSwipeX =
-    isOnboardingMode && !isDragging && !isCurrentTakeAnimating
+    hasOnboardingCards && !isDragging && !isCurrentTakeAnimating
       ? cardSwipeDelta + onboardingIntroDelta
       : cardSwipeDelta;
   const onboardingIntroPlaying =
-    isOnboardingMode &&
+    hasOnboardingCards &&
     !isDragging &&
     !isCurrentTakeAnimating &&
     onboardingIntroDelta !== 0;
@@ -2036,10 +2135,10 @@ const HotAndColdModal = ({
     <div
       {...handlers}
       className={classNames(
-        'relative mx-4 select-none self-center',
+        'relative select-none self-center',
         isOnboardingMode ? 'touch-pan-x' : 'touch-none',
         isOnboardingMode
-          ? 'mt-2 w-[calc(100%-3rem)] max-w-[20rem]'
+          ? 'mt-2 w-full max-w-[20rem]'
           : 'mt-4 w-[calc(100%-2rem)]',
       )}
       style={
@@ -2107,6 +2206,50 @@ const HotAndColdModal = ({
       )}
     </div>
   );
+  const showOnboardingSideActions = onboardingActionLayout === 'sides';
+  const onboardingSwipeActions = showOnboardingSideActions ? (
+    <div className="grid grid-cols-1 items-center gap-4 tablet:grid-cols-[minmax(0,3.5rem)_minmax(0,20rem)_minmax(0,3.5rem)] tablet:justify-center tablet:gap-3">
+      <div className="hidden justify-end tablet:flex">
+        <OnboardingSwipeHintButton
+          deltaX={combinedOnboardingSwipeX}
+          direction="left"
+          disabled={isAnimating}
+          onClick={() => handleDismiss('left', 'button')}
+        />
+      </div>
+      <div className="flex justify-center px-4 tablet:px-0">
+        {cardSwipeArea}
+      </div>
+      <div className="hidden justify-start tablet:flex">
+        <OnboardingSwipeHintButton
+          deltaX={combinedOnboardingSwipeX}
+          direction="right"
+          disabled={isAnimating}
+          onClick={() => handleDismiss('right', 'button')}
+        />
+      </div>
+      <div className="flex justify-center px-4 tablet:hidden">
+        <OnboardingSwipeHintIcons
+          deltaX={combinedOnboardingSwipeX}
+          disabled={isAnimating}
+          onInteresting={() => handleDismiss('right', 'button')}
+          onNotInteresting={() => handleDismiss('left', 'button')}
+        />
+      </div>
+    </div>
+  ) : (
+    <>
+      <div className="flex justify-center px-4">{cardSwipeArea}</div>
+      <div className="flex justify-center px-4">
+        <OnboardingSwipeHintIcons
+          deltaX={combinedOnboardingSwipeX}
+          disabled={isAnimating}
+          onInteresting={() => handleDismiss('right', 'button')}
+          onNotInteresting={() => handleDismiss('left', 'button')}
+        />
+      </div>
+    </>
+  );
 
   return (
     <Modal
@@ -2121,10 +2264,10 @@ const HotAndColdModal = ({
       {showHeader && <Modal.Header title={title} />}
       <Modal.Body
         className={classNames(
-          'bg-overlay-quaternary-onion !p-0',
+          '!p-0',
           isOnboardingMode
-            ? 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden tablet:flex-none tablet:!overflow-x-visible tablet:!overflow-y-visible'
-            : 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden',
+            ? 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-background-default'
+            : 'min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-overlay-quaternary-onion',
         )}
       >
         {headerSlot}
@@ -2151,99 +2294,101 @@ const HotAndColdModal = ({
           <EmptyState onClose={onRequestClose} username={user?.username} />
         )}
 
-        {!isModalLoading && !isModalEmpty && currentCardId && (
+        {!isModalLoading && !isModalEmpty && isOnboardingMode && (
           <>
-            {!isOnboardingMode && topSlot}
-            {isOnboardingMode ? (
-              <div className="mt-0 flex min-h-0 w-full flex-1 flex-col items-center justify-start gap-4 px-4 pb-6 pt-6 tablet:flex-none tablet:pb-8">
+            <div className="mt-0 flex min-h-0 w-full flex-1 flex-col items-center justify-start px-4 pb-6 pt-3 tablet:flex-none tablet:px-6 tablet:pb-8">
+              <div
+                key={hasOnboardingContent ? 'tags-box' : 'swipe-box'}
+                className="flex min-h-0 w-full max-w-[32rem] flex-1 flex-col items-stretch gap-4"
+              >
                 {topSlot}
-                {cardSwipeArea}
-                <div className="px-4">
-                  <OnboardingSwipeHintIcons
-                    deltaX={combinedOnboardingSwipeX}
-                    disabled={isAnimating}
-                    onInteresting={() => handleDismiss('right', 'button')}
-                    onNotInteresting={() => handleDismiss('left', 'button')}
-                  />
-                </div>
+                {hasOnboardingContent
+                  ? onboardingContent
+                  : onboardingSwipeActions}
                 {bottomSlot}
               </div>
-            ) : (
-              <>
-                {cardSwipeArea}
-                {showDefaultActions && (
-                  <div className="flex items-center justify-center gap-4 p-4 pt-3">
-                    <Button
-                      variant={ButtonVariant.Float}
-                      size={ButtonSize.Large}
-                      icon={
-                        <span
-                          className="text-[1.375rem] leading-none"
-                          aria-hidden
-                        >
-                          ❄️
-                        </span>
-                      }
-                      onClick={() => handleDismiss('left', 'button')}
-                      disabled={isAnimating}
-                      className="!size-14 rounded-full"
-                      aria-label="Cold take - downvote"
-                    />
-                    <Button
-                      variant={ButtonVariant.Float}
-                      size={ButtonSize.Large}
-                      icon={
-                        <span
-                          className="text-[1.375rem] leading-none"
-                          aria-hidden
-                        >
-                          😐
-                        </span>
-                      }
-                      onClick={() => handleSkip('button')}
-                      disabled={isAnimating}
-                      className="!size-12 rounded-full"
-                      aria-label="Skip hot take"
-                    />
-                    <Button
-                      variant={ButtonVariant.Float}
-                      size={ButtonSize.Large}
-                      icon={
-                        <span
-                          className="text-[1.375rem] leading-none"
-                          aria-hidden
-                        >
-                          🔥
-                        </span>
-                      }
-                      onClick={() => handleDismiss('right', 'button')}
-                      disabled={isAnimating}
-                      className="!size-14 rounded-full"
-                      aria-label="Hot take - upvote"
-                    />
-                  </div>
-                )}
-                {bottomSlot}
-                {showAddHotTakeButton && user?.username && (
-                  <div className="px-4 pb-4">
-                    <Button
-                      variant={ButtonVariant.Tertiary}
-                      size={ButtonSize.Medium}
-                      tag="a"
-                      href={`${webappUrl}${user.username}#hot-takes`}
-                      className="w-full"
-                      onClick={(e: React.MouseEvent) => {
-                        onRequestClose?.(e);
-                      }}
-                    >
-                      Add your own hot take
-                    </Button>
-                  </div>
-                )}
-              </>
-            )}
+            </div>
           </>
         )}
+
+        {!isModalLoading &&
+          !isModalEmpty &&
+          !isOnboardingMode &&
+          currentCardId && (
+            <>
+              {topSlot}
+              {cardSwipeArea}
+              {showDefaultActions && (
+                <div className="flex items-center justify-center gap-4 p-4 pt-3">
+                  <Button
+                    variant={ButtonVariant.Float}
+                    size={ButtonSize.Large}
+                    icon={
+                      <span
+                        className="text-[1.375rem] leading-none"
+                        aria-hidden
+                      >
+                        ❄️
+                      </span>
+                    }
+                    onClick={() => handleDismiss('left', 'button')}
+                    disabled={isAnimating}
+                    className="!size-14 rounded-full"
+                    aria-label="Cold take - downvote"
+                  />
+                  <Button
+                    variant={ButtonVariant.Float}
+                    size={ButtonSize.Large}
+                    icon={
+                      <span
+                        className="text-[1.375rem] leading-none"
+                        aria-hidden
+                      >
+                        😐
+                      </span>
+                    }
+                    onClick={() => handleSkip('button')}
+                    disabled={isAnimating}
+                    className="!size-12 rounded-full"
+                    aria-label="Skip hot take"
+                  />
+                  <Button
+                    variant={ButtonVariant.Float}
+                    size={ButtonSize.Large}
+                    icon={
+                      <span
+                        className="text-[1.375rem] leading-none"
+                        aria-hidden
+                      >
+                        🔥
+                      </span>
+                    }
+                    onClick={() => handleDismiss('right', 'button')}
+                    disabled={isAnimating}
+                    className="!size-14 rounded-full"
+                    aria-label="Hot take - upvote"
+                  />
+                </div>
+              )}
+              {bottomSlot}
+              {showAddHotTakeButton && user?.username && (
+                <div className="px-4 pb-4">
+                  <Button
+                    variant={ButtonVariant.Tertiary}
+                    size={ButtonSize.Medium}
+                    tag="a"
+                    href={`${webappUrl}${user.username}#hot-takes`}
+                    className="w-full"
+                    onClick={(e: React.MouseEvent) => {
+                      onRequestClose?.(e);
+                    }}
+                  >
+                    Add your own hot take
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
       </Modal.Body>
     </Modal>
   );
diff --git a/packages/shared/src/components/onboarding/EditTag.tsx b/packages/shared/src/components/onboarding/EditTag.tsx
index 9f19d54c9ae..6d55aff3839 100644
--- a/packages/shared/src/components/onboarding/EditTag.tsx
+++ b/packages/shared/src/components/onboarding/EditTag.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import { Origin } from '../../lib/log';
-import type { FeedSettings } from '../../graphql/feedSettings';
 import { TagSelection } from '../tags/TagSelection';
 import useDebounceFn from '../../hooks/useDebounceFn';
 import { useTagSearch } from '../../hooks/useTagSearch';
@@ -9,12 +9,12 @@ import { useViewSize, ViewSize } from '../../hooks/useViewSize';
 import { SearchField } from '../fields/SearchField';
 
 interface EditTagProps {
-  feedSettings: FeedSettings;
   headline?: string;
+  headlineClassName?: string;
 }
 export const EditTag = ({
-  feedSettings,
   headline,
+  headlineClassName,
 }: EditTagProps): ReactElement => {
   const isMobile = useViewSize(ViewSize.MobileL);
 
@@ -31,7 +31,12 @@ export const EditTag = ({
 
   return (
     <>
-      <h2 className="text-center font-bold typo-large-title">
+      <h2
+        className={classNames(
+          'text-center font-bold',
+          headlineClassName ?? 'typo-large-title',
+        )}
+      >
         {headline || 'Pick tags that are relevant to you'}
       </h2>
       <TagSelection
diff --git a/packages/shared/src/features/onboarding/shared/FunnelStepper.tsx b/packages/shared/src/features/onboarding/shared/FunnelStepper.tsx
index 8bf6df7728f..bbc5419d8f8 100644
--- a/packages/shared/src/features/onboarding/shared/FunnelStepper.tsx
+++ b/packages/shared/src/features/onboarding/shared/FunnelStepper.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { ComponentType, ReactElement } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import type { PaddleEventData } from '@paddle/paddle-js';
@@ -56,6 +56,8 @@ export interface FunnelStepperProps {
   onComplete?: () => void;
   session: FunnelSession;
   showCookieBanner?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- step types have heterogeneous props and are selected by step.type at runtime
+  stepComponentOverrides?: Partial<Record<FunnelStepType, ComponentType<any>>>;
 }
 
 const stepComponentMap = {
@@ -79,9 +81,18 @@ const stepComponentMap = {
   [FunnelStepType.UploadCv]: FunnelUploadCv,
 } as const;
 
-function FunnelStepComponent<Step extends FunnelStep>(props: Step) {
-  const { type } = props;
-  const Component = stepComponentMap[type];
+function FunnelStepComponent(props: {
+  stepComponentOverrides?: FunnelStepperProps['stepComponentOverrides'];
+  [key: string]: unknown;
+}) {
+  const { stepComponentOverrides, type } = props;
+  const stepType = type as FunnelStepType;
+  const Component =
+    stepComponentOverrides?.[stepType] ??
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- step types have heterogeneous props and are selected by step.type at runtime
+    (stepComponentMap as Partial<Record<FunnelStepType, ComponentType<any>>>)[
+      stepType
+    ];
 
   if (!Component) {
     return null;
@@ -96,7 +107,8 @@ export const FunnelStepper = ({
   session,
   showCookieBanner,
   onComplete,
-}: FunnelStepperProps): ReactElement => {
+  stepComponentOverrides,
+}: FunnelStepperProps): ReactElement | null => {
   const steps = useMemo(
     () => funnel?.chapters?.flatMap((chapter) => chapter?.steps),
     [funnel?.chapters],
@@ -123,7 +135,9 @@ export const FunnelStepper = ({
     defaultOpen: showCookieBanner,
     trackFunnelEvent,
   });
-  useEventListener(globalThis, 'scrollend', trackOnScroll, { passive: true });
+  useEventListener(globalThis.window, 'scrollend', trackOnScroll, {
+    passive: true,
+  });
 
   const shouldSkipRef = useRef<Partial<Record<FunnelStepType, boolean>>>({});
   const currentNavigationRef = useRef({ step, position });
@@ -187,11 +201,12 @@ export const FunnelStepper = ({
   );
 
   const successCallback = useCallback(
-    (event?: PaddleEventData) =>
+    (event: unknown) =>
       onTransition({
         type: FunnelStepTransitionType.Complete,
         details: {
-          subscribed: event?.data?.customer?.email,
+          subscribed: (event as PaddleEventData | undefined)?.data?.customer
+            ?.email,
         },
       }),
     [onTransition],
@@ -254,7 +269,7 @@ export const FunnelStepper = ({
             !layout.isFullWidth && 'tablet:max-w-md laptopXL:max-w-lg',
           )}
         >
-          {layout.hasBanner && (
+          {layout.hasBanner && funnel.parameters.banner && (
             <FunnelBannerMessage {...funnel.parameters.banner} />
           )}
           <Header
@@ -295,6 +310,7 @@ export const FunnelStepper = ({
                       isActive={isActive}
                       onTransition={onTransition}
                       onRegisterStepToSkip={onRegisterStepToSkip}
+                      stepComponentOverrides={stepComponentOverrides}
                     />
                   </div>
                 );
diff --git a/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx b/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
index 831dfdc91a2..d0c3af8d5b8 100644
--- a/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
+++ b/packages/shared/src/features/onboarding/steps/FunnelEditTags.tsx
@@ -42,7 +42,7 @@ function FunnelEditTagsComponent({
       containerClassName="flex w-full flex-1 flex-col items-center laptop:justify-center overflow-hidden"
     >
       <div className="flex w-full flex-col items-center gap-6 p-6 pt-10 tablet:max-w-md laptop:max-w-screen-laptop">
-        <EditTag headline={headline} feedSettings={feedSettings} />
+        <EditTag headline={headline} />
       </div>
     </FunnelStepCtaWrapper>
   );
diff --git a/packages/shared/src/graphql/actions.ts b/packages/shared/src/graphql/actions.ts
index 1b918eb10d9..89e5309a70b 100644
--- a/packages/shared/src/graphql/actions.ts
+++ b/packages/shared/src/graphql/actions.ts
@@ -39,6 +39,7 @@ export enum ActionType {
   FetchedSmartTitle = 'fetched_smart_title',
   EditTag = 'edit_tag',
   ContentTypes = 'content_types',
+  HasSeenTags = 'has_seen_tags',
   StreakTimezoneMismatch = 'streak_timezone_mismatch',
   SmartPrompt = 'smart_prompt',
   CheckedCoresRole = 'checked_cores_role',
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index f8d5ab1f86d..5fa84f62a93 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -151,7 +151,7 @@ export const sharedPostPreviewFeature = new Feature(
   false,
 );
 
-export const swipeOnboardingFeature = new Feature('swipe_onboarding', false);
+export const swipeOnboardingFeature = new Feature('swipe_onboarding', true);
 
 export const featureUpvoteCountThreshold = new Feature<{
   threshold: number;
diff --git a/packages/shared/src/lib/feedSettings.ts b/packages/shared/src/lib/feedSettings.ts
new file mode 100644
index 00000000000..98057213a1a
--- /dev/null
+++ b/packages/shared/src/lib/feedSettings.ts
@@ -0,0 +1,25 @@
+import { generateStorageKey, StorageTopic } from './storage';
+import { storageWrapper } from './storageWrapper';
+
+const hasSeenTagsStorageKey = 'hasSeenTags';
+
+export const getHasSeenTagsStorageKey = (userId: string): string =>
+  generateStorageKey(StorageTopic.Onboarding, hasSeenTagsStorageKey, userId);
+
+export const getHasSeenTags = (userId?: string | null): boolean | null => {
+  if (!userId) {
+    return null;
+  }
+
+  const value = storageWrapper.getItem(getHasSeenTagsStorageKey(userId));
+
+  if (value === null) {
+    return null;
+  }
+
+  return value === 'true';
+};
+
+export const setHasSeenTags = (userId: string, hasSeenTags: boolean): void => {
+  storageWrapper.setItem(getHasSeenTagsStorageKey(userId), String(hasSeenTags));
+};
diff --git a/packages/webapp/.env b/packages/webapp/.env
index 3f3cf591931..3b23f637971 100644
--- a/packages/webapp/.env
+++ b/packages/webapp/.env
@@ -17,4 +17,3 @@ NEXT_PUBLIC_ANDROID_APP="https://play.google.com/store/apps/details?id=dev.daily
 
 NEXT_PUBLIC_TURNSTILE_KEY=1x00000000000000000000AA
 
-NEXT_PUBLIC_SWIPING_BACKEND_URL=http://localhost:8000
diff --git a/packages/webapp/components/onboarding/FunnelSwipeOnboardingStep.tsx b/packages/webapp/components/onboarding/FunnelSwipeOnboardingStep.tsx
new file mode 100644
index 00000000000..404c34105c2
--- /dev/null
+++ b/packages/webapp/components/onboarding/FunnelSwipeOnboardingStep.tsx
@@ -0,0 +1,425 @@
+import type { ReactElement } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { ArrowIcon } from '@dailydotdev/shared/src/components/icons';
+import HotAndColdModal from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
+import { useBookmarkPost } from '@dailydotdev/shared/src/hooks/useBookmarkPost';
+import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
+import useTagAndSource from '@dailydotdev/shared/src/hooks/useTagAndSource';
+import { Origin } from '@dailydotdev/shared/src/lib/log';
+import { withIsActiveGuard } from '@dailydotdev/shared/src/features/onboarding/shared/withActiveGuard';
+import type { FunnelStepEditTags } from '@dailydotdev/shared/src/features/onboarding/types/funnel';
+import { FunnelStepTransitionType } from '@dailydotdev/shared/src/features/onboarding/types/funnel';
+import { useAdaptiveSwipeDeck } from '../../hooks/useAdaptiveSwipeDeck';
+import { extractTags } from '../../lib/swipingBackendApi';
+import { SwipeOnboardingProgressHeader } from './SwipeOnboardingProgressHeader';
+import {
+  SWIPE_ONBOARDING_IMPROVE_MILESTONE,
+  SWIPE_ONBOARDING_MIN_TO_UNLOCK,
+  SWIPE_ONBOARDING_REFINE_TARGET,
+} from '../../lib/swipeOnboardingGuidance';
+
+const SWIPE_ONBOARDING_PROGRESS_MILESTONES: readonly number[] = [
+  SWIPE_ONBOARDING_MIN_TO_UNLOCK,
+  SWIPE_ONBOARDING_IMPROVE_MILESTONE,
+  SWIPE_ONBOARDING_REFINE_TARGET,
+];
+
+const SWIPE_ONBOARDING_TAG_SEED_MAX = 25;
+const SWIPE_ONBOARDING_LOADING_LABELS = [
+  'cooking',
+  'optimizing',
+  'thinking',
+  'shuffling the good stuff',
+  'bribing the feed gremlins',
+  'warming up the swipe deck',
+] as const;
+
+const swipeOnboardingModalShellClassName =
+  'tablet:!h-[calc(100vh-2rem)] tablet:!max-h-[calc(100vh-2rem)] tablet:!w-[42rem] tablet:!max-w-[calc(100vw-2rem)] tablet:!overflow-hidden tablet:!rounded-[2rem] tablet:!border-border-subtlest-secondary tablet:shadow-[0_32px_120px_-48px_rgba(0,0,0,0.58)]';
+
+const swipeOnboardingSurfaceClassName =
+  'w-full overflow-hidden rounded-[2rem] border border-border-subtlest-secondary bg-background-default shadow-[0_24px_90px_-48px_rgba(0,0,0,0.58)]';
+
+const swipeOnboardingPanelClassName =
+  'rounded-[1.5rem] border border-border-subtlest-tertiary bg-surface-float';
+
+function useAnimatedLoadingLabel(isActive: boolean): string {
+  const [labelIndex, setLabelIndex] = useState(0);
+  const [dotCount, setDotCount] = useState(1);
+
+  useEffect(() => {
+    if (!isActive) {
+      setLabelIndex(0);
+      setDotCount(1);
+      return undefined;
+    }
+
+    const interval = window.setInterval(() => {
+      setDotCount((currentDotCount) => {
+        if (currentDotCount === 3) {
+          setLabelIndex(
+            (currentLabelIndex) =>
+              (currentLabelIndex + 1) % SWIPE_ONBOARDING_LOADING_LABELS.length,
+          );
+          return 1;
+        }
+
+        return currentDotCount + 1;
+      });
+    }, 550);
+
+    return () => window.clearInterval(interval);
+  }, [isActive]);
+
+  return `${SWIPE_ONBOARDING_LOADING_LABELS[labelIndex]}${'.'.repeat(
+    dotCount,
+  )}`;
+}
+
+function SwipeOnboardingToolbar({
+  onBack,
+}: {
+  onBack: () => void;
+}): ReactElement {
+  return (
+    <div className="pointer-events-none flex w-full justify-center px-4 pb-1 pt-4 tablet:px-6">
+      <div className="flex w-full max-w-[32rem] items-center justify-between gap-3 px-2 py-2">
+        <Button
+          className="pointer-events-auto !rounded-full"
+          icon={<ArrowIcon className="-rotate-90" />}
+          size={ButtonSize.Small}
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          onClick={onBack}
+        />
+        <div aria-hidden className="pointer-events-none h-8 min-w-8" />
+      </div>
+    </div>
+  );
+}
+
+function FunnelSwipeOnboardingStepComponent({
+  parameters: { cta },
+  onTransition,
+}: FunnelStepEditTags): ReactElement {
+  const router = useRouter();
+  const [swipesCount, setSwipesCount] = useState(0);
+  const [milestoneBurstKey, setMilestoneBurstKey] = useState(0);
+  const [promptText, setPromptText] = useState('');
+  const [promptLoading, setPromptLoading] = useState(false);
+  const [isCompleting, setIsCompleting] = useState(false);
+  const [isSwipeMode, setIsSwipeMode] = useState(false);
+  const [dismissedOnboardingCardIds, setDismissedOnboardingCardIds] = useState<
+    Set<string>
+  >(() => new Set());
+  const prevSwipesForMilestoneRef = useRef<number | null>(null);
+  const animatedPromptLoadingLabel = useAnimatedLoadingLabel(promptLoading);
+  const { feedSettings } = useFeedSettings();
+  const { onFollowTags } = useTagAndSource({
+    origin: Origin.Onboarding,
+  });
+  const { toggleBookmark } = useBookmarkPost();
+  const {
+    cards: adaptiveCards,
+    getBookmarkablePost,
+    isLoading: isAdaptiveLoading,
+    startDeck,
+    handleSwipe: handleAdaptiveSwipe,
+    retryFetch,
+    selectedTags: adaptiveSelectedTags,
+  } = useAdaptiveSwipeDeck();
+
+  useEffect(() => {
+    const prev = prevSwipesForMilestoneRef.current;
+    prevSwipesForMilestoneRef.current = swipesCount;
+    if (prev === null) {
+      return;
+    }
+    const crossedMilestone = SWIPE_ONBOARDING_PROGRESS_MILESTONES.find(
+      (milestone) => prev < milestone && swipesCount >= milestone,
+    );
+    if (crossedMilestone !== undefined) {
+      setMilestoneBurstKey((currentKey) => currentKey + 1);
+    }
+  }, [swipesCount]);
+
+  const handlePromptSubmit = useCallback(async () => {
+    if (promptLoading) {
+      return;
+    }
+
+    setPromptLoading(true);
+    try {
+      let initialTags: string[] = [];
+      if (promptText.trim()) {
+        initialTags = await extractTags(promptText.trim());
+      }
+      await startDeck({ prompt: promptText.trim(), initialTags });
+      setIsSwipeMode(true);
+    } finally {
+      setPromptLoading(false);
+    }
+  }, [promptLoading, promptText, startDeck]);
+
+  const handleSkipPrompt = useCallback(async () => {
+    if (promptLoading) {
+      return;
+    }
+
+    setPromptLoading(true);
+    try {
+      await startDeck();
+      setIsSwipeMode(true);
+    } finally {
+      setPromptLoading(false);
+    }
+  }, [promptLoading, startDeck]);
+
+  const bookmarkRightSwipePost = useCallback(
+    (cardId: string) => {
+      const bookmarkPost = getBookmarkablePost(cardId);
+      if (!bookmarkPost) {
+        return;
+      }
+
+      // Capture the current card payload before deck state changes.
+      toggleBookmark({
+        post: bookmarkPost,
+        origin: Origin.Onboarding,
+        disableToast: true,
+      }).catch(() => null);
+    },
+    [getBookmarkablePost, toggleBookmark],
+  );
+
+  const handleSwipeInteraction = useCallback(
+    (
+      direction: 'left' | 'right' | 'skip',
+      meta?: { onboardingCardId?: string },
+    ) => {
+      if (direction === 'left' || direction === 'right') {
+        setSwipesCount((currentValue) => currentValue + 1);
+        if (meta?.onboardingCardId) {
+          if (direction === 'right') {
+            bookmarkRightSwipePost(meta.onboardingCardId);
+          }
+          handleAdaptiveSwipe(direction, meta.onboardingCardId);
+        }
+      }
+    },
+    [bookmarkRightSwipePost, handleAdaptiveSwipe],
+  );
+
+  const tagsFromSwipes = useMemo(
+    () => adaptiveSelectedTags.slice(0, SWIPE_ONBOARDING_TAG_SEED_MAX),
+    [adaptiveSelectedTags],
+  );
+
+  const handleComplete = useCallback(async () => {
+    if (isCompleting) {
+      return;
+    }
+
+    setIsCompleting(true);
+    const currentTags = feedSettings?.includeTags ?? [];
+    const currentTagsSet = new Set(currentTags);
+    const tagsToFollow = tagsFromSwipes.filter(
+      (tag) => !currentTagsSet.has(tag),
+    );
+    const finalTags = [...currentTags, ...tagsToFollow];
+
+    try {
+      if (tagsToFollow.length) {
+        await onFollowTags({ tags: tagsToFollow });
+      }
+    } catch {
+      // Let the funnel continue even if persisting tags fails.
+    } finally {
+      setIsCompleting(false);
+    }
+
+    onTransition({
+      type: FunnelStepTransitionType.Complete,
+      details: {
+        tags: finalTags,
+      },
+    });
+  }, [
+    feedSettings?.includeTags,
+    isCompleting,
+    onFollowTags,
+    onTransition,
+    tagsFromSwipes,
+  ]);
+
+  const canContinue = swipesCount >= SWIPE_ONBOARDING_MIN_TO_UNLOCK;
+
+  if (!isSwipeMode) {
+    return (
+      <div className="flex w-full flex-1 flex-col justify-center px-4 pb-6 pt-4 tablet:px-6 tablet:pb-8">
+        <div className="mx-auto flex w-full max-w-[46rem] flex-1 flex-col justify-center">
+          <div className={swipeOnboardingSurfaceClassName}>
+            <div className="flex flex-col gap-5 p-5 tablet:gap-6 tablet:p-7">
+              <div className="flex flex-col items-center gap-3 text-center">
+                <span className="text-text-secondary typo-footnote">
+                  Personalize your daily.dev feed
+                </span>
+                <div className="space-y-3">
+                  <h1 className="text-balance text-center font-bold text-text-primary typo-title1">
+                    What do you want to read more about?
+                  </h1>
+                  <p className="mx-auto max-w-[32rem] text-balance text-center text-text-tertiary typo-body">
+                    Describe your interests and we&apos;ll turn that into a
+                    swipe deck that feels closer to a real conversation than a
+                    blank setup form.
+                  </p>
+                </div>
+              </div>
+              <div
+                className={classNames(
+                  swipeOnboardingPanelClassName,
+                  'overflow-hidden',
+                )}
+              >
+                <textarea
+                  className="min-h-[8.5rem] w-full resize-none bg-transparent px-5 py-4 text-text-primary typo-body placeholder:text-text-quaternary focus:outline-none tablet:min-h-[9rem]"
+                  placeholder="e.g. I'm a backend engineer interested in Rust, distributed systems, infrastructure, and system design..."
+                  value={promptText}
+                  onChange={(e) => setPromptText(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && !promptLoading) {
+                      e.preventDefault();
+                      handlePromptSubmit();
+                    }
+                  }}
+                />
+                <div className="flex flex-col gap-2 border-t border-border-subtlest-tertiary px-4 py-3 tablet:flex-row tablet:items-center tablet:justify-between">
+                  <Button
+                    aria-disabled={promptLoading}
+                    className={classNames('w-full tablet:w-auto', {
+                      readOnly: promptLoading,
+                    })}
+                    size={ButtonSize.Medium}
+                    variant={ButtonVariant.Tertiary}
+                    type="button"
+                    onClick={() => {
+                      handleSkipPrompt();
+                    }}
+                  >
+                    Show popular posts
+                  </Button>
+                  <Button
+                    aria-disabled={promptLoading}
+                    className={classNames('w-full tablet:w-auto', {
+                      readOnly: promptLoading,
+                    })}
+                    size={ButtonSize.Medium}
+                    variant={
+                      promptLoading
+                        ? ButtonVariant.Float
+                        : ButtonVariant.Primary
+                    }
+                    type="button"
+                    onClick={() => {
+                      handlePromptSubmit();
+                    }}
+                  >
+                    {promptLoading
+                      ? animatedPromptLoadingLabel
+                      : 'Start swiping'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const bottomContinueSlot = canContinue ? (
+    <div className="w-full min-w-0 self-stretch px-4">
+      <div className="mx-auto flex w-full min-w-0 max-w-[32rem] flex-col gap-3 rounded-[1.5rem] border border-border-subtlest-secondary bg-background-default p-3 shadow-[0_24px_72px_-44px_rgba(0,0,0,0.7)] laptop:flex-row laptop:flex-wrap laptop:items-center">
+        <div className="min-w-0 px-2 laptop:flex-1 laptop:basis-0">
+          <p className="font-medium text-text-secondary typo-footnote">
+            Starter feed ready
+          </p>
+          <p className="text-balance text-text-tertiary typo-caption1">
+            We have enough signal to build your first pass. You can keep
+            refining it after this.
+          </p>
+        </div>
+        <Button
+          className="w-full min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap laptop:ml-auto laptop:w-auto"
+          size={ButtonSize.Medium}
+          variant={ButtonVariant.Primary}
+          type="button"
+          disabled={isCompleting}
+          onClick={() => {
+            handleComplete().catch(() => null);
+          }}
+        >
+          {cta || 'Next'}
+        </Button>
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <HotAndColdModal
+      isOpen
+      className={swipeOnboardingModalShellClassName}
+      overlayClassName="supports-[backdrop-filter]:backdrop-blur-md"
+      showHeader={false}
+      showDefaultActions={false}
+      showAddHotTakeButton={false}
+      shouldCloseOnOverlayClick={false}
+      dismissedOnboardingCardIds={dismissedOnboardingCardIds}
+      onDismissedOnboardingCardsChange={setDismissedOnboardingCardIds}
+      onboardingActionLayout="sides"
+      onboardingCards={adaptiveCards}
+      onboardingCardsLoading={isAdaptiveLoading}
+      onboardingFeedRefetching={isAdaptiveLoading}
+      onOnboardingFeedRetry={() => {
+        retryFetch();
+      }}
+      onSwipeAction={(direction, meta) => {
+        handleSwipeInteraction(direction, meta);
+      }}
+      headerSlot={
+        <SwipeOnboardingToolbar
+          onBack={() => {
+            router.back();
+          }}
+        />
+      }
+      topSlot={
+        <SwipeOnboardingProgressHeader
+          milestoneBurstKey={milestoneBurstKey}
+          progressCount={swipesCount}
+        />
+      }
+      bottomSlot={bottomContinueSlot}
+      onRequestClose={() => {
+        router.back();
+      }}
+    />
+  );
+}
+
+export const FunnelSwipeOnboardingStep = withIsActiveGuard(
+  FunnelSwipeOnboardingStepComponent,
+);
diff --git a/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx b/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
index 64ff996b483..3a5fcc4b594 100644
--- a/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
+++ b/packages/webapp/components/onboarding/SwipeOnboardingProgressHeader.tsx
@@ -10,16 +10,16 @@ import {
   getSwipeOnboardingBarProgress,
   getSwipeOnboardingGuidanceMessage,
   getSwipeOnboardingHeadline,
+  SWIPE_ONBOARDING_REFINE_TARGET,
   type SwipeOnboardingProgressCopyVariant,
 } from '../../lib/swipeOnboardingGuidance';
 
 /** Typing speed; full headline refresh when swipe tier copy changes. */
 const SWIPE_HEADLINE_TYPING_MS_PER_CHAR = 12;
 /**
- * Stable min height = 3 × typo-title2 line-height (1.875rem) so headline changes do not
- * shift the progress bar.
+ * Stable min height keeps the typed copy from jumping while the progress bar updates.
  */
-const SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS = 'min-h-[5.625rem]';
+const SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS = 'min-h-[4.75rem]';
 
 function SwipeOnboardingTypingHeadline({
   line1,
@@ -59,14 +59,14 @@ function SwipeOnboardingTypingHeadline({
   return (
     <div
       aria-live="polite"
-      className={`flex w-full max-w-[20rem] flex-col items-center justify-center text-center ${SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS}`}
+      className={`flex w-full flex-col items-start justify-start text-left ${SWIPE_HEADLINE_BLOCK_MIN_HEIGHT_CLASS}`}
     >
       <Typography
         bold
-        center
         tag={TypographyTag.H2}
-        type={TypographyType.Title2}
+        type={TypographyType.Title3}
         color={TypographyColor.Primary}
+        className="w-full text-balance"
       >
         {shownLine1}
         {shownLine2 !== undefined ? (
@@ -117,9 +117,10 @@ export function SwipeOnboardingProgressHeader({
   const progress = getSwipeOnboardingBarProgress(progressCount);
   const { line1: headlineLine1, line2: headlineLine2 } =
     getSwipeOnboardingHeadline(progressCount, copyVariant);
+  const progressValue = Math.min(progressCount, SWIPE_ONBOARDING_REFINE_TARGET);
 
   return (
-    <div className="pointer-events-none flex w-full max-w-[20rem] select-none flex-col items-center gap-8 self-center px-4 pb-2 pt-0 text-center">
+    <div className="pointer-events-none flex w-full max-w-[32rem] select-none flex-col gap-4 self-center rounded-[1.75rem] border border-border-subtlest-secondary bg-background-default px-5 py-4 shadow-[0_24px_72px_-42px_rgba(0,0,0,0.58)]">
       {/* eslint-disable-next-line react/no-unknown-property -- scoped keyframes for progress bar */}
       <style>{`
               @keyframes swipeOnboardingProgressShimmer {
@@ -376,16 +377,20 @@ export function SwipeOnboardingProgressHeader({
             </div>
           )}
         </div>
-        <Typography
-          bold
-          center
-          className="text-balance"
-          tag={TypographyTag.P}
-          type={TypographyType.Caption1}
-          color={TypographyColor.Secondary}
-        >
-          {getSwipeOnboardingGuidanceMessage(progressCount, copyVariant)}
-        </Typography>
+        <div className="flex items-start justify-between gap-3">
+          <Typography
+            bold
+            className="flex-1 text-balance"
+            tag={TypographyTag.P}
+            type={TypographyType.Caption1}
+            color={TypographyColor.Secondary}
+          >
+            {getSwipeOnboardingGuidanceMessage(progressCount, copyVariant)}
+          </Typography>
+          <span className="whitespace-nowrap font-medium text-text-tertiary typo-footnote">
+            {progressValue} / {SWIPE_ONBOARDING_REFINE_TARGET}
+          </span>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/webapp/hooks/useAdaptiveSwipeDeck.ts b/packages/webapp/hooks/useAdaptiveSwipeDeck.ts
index cbb7f9ed4d7..62d16c35688 100644
--- a/packages/webapp/hooks/useAdaptiveSwipeDeck.ts
+++ b/packages/webapp/hooks/useAdaptiveSwipeDeck.ts
@@ -1,5 +1,7 @@
 import { useCallback, useRef, useState } from 'react';
 import type { OnboardingSwipeCard } from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
+import type { Post } from '@dailydotdev/shared/src/graphql/posts';
+import { PostType } from '@dailydotdev/shared/src/graphql/posts';
 import type { PostSummary } from '../lib/swipingBackendApi';
 import { discoverPosts } from '../lib/swipingBackendApi';
 
@@ -16,11 +18,29 @@ const BATCH_SIZE = 8;
 
 function toSwipeCard(post: PostSummary): OnboardingSwipeCard {
   return {
-    id: post.post_id,
+    id: post.postId,
+    summary: post.summary,
     title: post.title,
     image: null,
     tags: post.tags,
-    source: null,
+    source: {
+      name: 'daily.dev',
+      image: null,
+    },
+  };
+}
+
+function toBookmarkablePost(post: PostSummary): Post {
+  return {
+    id: post.postId,
+    title: post.title,
+    summary: post.summary,
+    permalink: post.url,
+    commentsPermalink: post.url,
+    image: '',
+    tags: post.tags,
+    bookmarked: false,
+    type: PostType.Article,
   };
 }
 
@@ -31,6 +51,7 @@ interface StartDeckOptions {
 
 interface AdaptiveSwipeDeck {
   cards: OnboardingSwipeCard[];
+  getBookmarkablePost: (cardId: string) => Post | undefined;
   isLoading: boolean;
   startDeck: (options?: StartDeckOptions) => Promise<void>;
   handleSwipe: (direction: 'left' | 'right', cardId: string) => void;
@@ -80,23 +101,31 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
   const doFetch = useCallback(
     async (n = BATCH_SIZE): Promise<PostSummary[]> => {
       const result = await discoverPosts({
-        selected_tags: selectedTagsRef.current,
-        confirmed_tags: getConfirmedTags(),
-        liked_titles: likedTitlesRef.current,
-        exclude_ids: [...seenIdsRef.current],
-        saturated_tags: getSaturatedTags(),
+        selectedTags: selectedTagsRef.current,
+        confirmedTags: getConfirmedTags(),
+        likedTitles: likedTitlesRef.current,
+        excludeIds: [...seenIdsRef.current],
+        saturatedTags: getSaturatedTags(),
         n,
       });
-      const posts = result.posts;
-      for (const p of posts) {
-        seenIdsRef.current.add(p.post_id);
-        postLookupRef.current.set(p.post_id, p);
-      }
+      const { posts } = result;
+      posts.forEach((p) => {
+        seenIdsRef.current.add(p.postId);
+        postLookupRef.current.set(p.postId, p);
+      });
       return posts;
     },
     [getSaturatedTags, getConfirmedTags],
   );
 
+  const getBookmarkablePost = useCallback(
+    (cardId: string): Post | undefined => {
+      const post = postLookupRef.current.get(cardId);
+      return post ? toBookmarkablePost(post) : undefined;
+    },
+    [],
+  );
+
   const loadBatch = useCallback((posts: PostSummary[]) => {
     setCards(posts.map(toSwipeCard));
     batchSizeRef.current = posts.length;
@@ -106,7 +135,9 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
 
   const startDeck = useCallback(
     async (options?: StartDeckOptions) => {
-      if (isFetchingRef.current) return;
+      if (isFetchingRef.current) {
+        return;
+      }
       isFetchingRef.current = true;
       setIsLoading(true);
       try {
@@ -116,9 +147,9 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
           selectedTagsRef.current = options.initialTags;
           // Initialize tag scores for seeded tags
           const scores: Record<string, number> = {};
-          for (const t of options.initialTags) {
+          options.initialTags.forEach((t) => {
             scores[t] = ADD_THRESHOLD;
-          }
+          });
           tagScoresRef.current = scores;
         }
         // Store the initial prompt for future fetches
@@ -127,17 +158,17 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
         }
         const result = await discoverPosts({
           prompt: options?.prompt ?? '',
-          selected_tags: selectedTagsRef.current,
-          liked_titles: likedTitlesRef.current,
-          exclude_ids: [...seenIdsRef.current],
-          saturated_tags: getSaturatedTags(),
+          selectedTags: selectedTagsRef.current,
+          likedTitles: likedTitlesRef.current,
+          excludeIds: [...seenIdsRef.current],
+          saturatedTags: getSaturatedTags(),
           n: BATCH_SIZE,
         });
-        const posts = result.posts;
-        for (const p of posts) {
-          seenIdsRef.current.add(p.post_id);
-          postLookupRef.current.set(p.post_id, p);
-        }
+        const { posts } = result;
+        posts.forEach((p) => {
+          seenIdsRef.current.add(p.postId);
+          postLookupRef.current.set(p.postId, p);
+        });
         loadBatch(posts);
       } finally {
         setIsLoading(false);
@@ -152,7 +183,9 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
   }, [startDeck]);
 
   const triggerPrefetch = useCallback(async () => {
-    if (prefetchedRef.current) return;
+    if (prefetchedRef.current) {
+      return;
+    }
     try {
       prefetchedRef.current = await doFetch();
     } catch {
@@ -179,10 +212,12 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
   const handleSwipe = useCallback(
     (direction: 'left' | 'right', cardId: string) => {
       const post = postLookupRef.current.get(cardId);
-      if (!post) return;
+      if (!post) {
+        return;
+      }
 
       const delta = direction === 'right' ? LIKE_SCORE : DISLIKE_SCORE;
-      const tags = post.tags;
+      const { tags } = post;
 
       // Track liked posts
       if (direction === 'right') {
@@ -201,16 +236,13 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
       const promoted: string[] = [];
       const demoted: string[] = [];
 
-      for (const tag of tags) {
+      tags.forEach((tag) => {
         const isSelected = selectedSet.has(tag);
-        tagSeenCountRef.current[tag] =
-          (tagSeenCountRef.current[tag] || 0) + 1;
+        tagSeenCountRef.current[tag] = (tagSeenCountRef.current[tag] || 0) + 1;
 
-        if (!isSelected) {
-          if (tagSeenCountRef.current[tag] >= IGNORE_AFTER) {
-            delete scores[tag];
-            continue;
-          }
+        if (!isSelected && tagSeenCountRef.current[tag] >= IGNORE_AFTER) {
+          delete scores[tag];
+          return;
         }
 
         const newScore = (scores[tag] || 0) + delta;
@@ -230,7 +262,7 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
         ) {
           scores[tag] = SATURATE_THRESHOLD;
         }
-      }
+      });
 
       tagScoresRef.current = scores;
 
@@ -265,6 +297,7 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
 
   return {
     cards,
+    getBookmarkablePost,
     isLoading,
     startDeck,
     handleSwipe,
diff --git a/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts b/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
index 5ed289ab8ff..54e7f8ab0e6 100644
--- a/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
+++ b/packages/webapp/lib/swipeOnboardingEligiblePosts.spec.ts
@@ -21,37 +21,46 @@ function post(
 
 describe('isSwipeOnboardingEligiblePost', () => {
   it('accepts article, video, and poll from machine sources', () => {
-    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Machine)))
-      .toBe(true);
     expect(
-      isSwipeOnboardingEligiblePost(post(PostType.VideoYouTube, SourceType.Machine)),
+      isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Machine)),
+    ).toBe(true);
+    expect(
+      isSwipeOnboardingEligiblePost(
+        post(PostType.VideoYouTube, SourceType.Machine),
+      ),
+    ).toBe(true);
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.Poll, SourceType.Machine)),
     ).toBe(true);
-    expect(isSwipeOnboardingEligiblePost(post(PostType.Poll, SourceType.Machine))).toBe(
-      true,
-    );
   });
 
   it('rejects non-machine sources', () => {
-    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Squad))).toBe(
-      false,
-    );
-    expect(isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.User))).toBe(
-      false,
-    );
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.Squad)),
+    ).toBe(false);
+    expect(
+      isSwipeOnboardingEligiblePost(post(PostType.Article, SourceType.User)),
+    ).toBe(false);
   });
 
   it('rejects collection, share, freeform, and social posts even from machine', () => {
     expect(
-      isSwipeOnboardingEligiblePost(post(PostType.Collection, SourceType.Machine)),
+      isSwipeOnboardingEligiblePost(
+        post(PostType.Collection, SourceType.Machine),
+      ),
     ).toBe(false);
-    expect(isSwipeOnboardingEligiblePost(post(PostType.Share, SourceType.Machine))).toBe(
-      false,
-    );
     expect(
-      isSwipeOnboardingEligiblePost(post(PostType.Freeform, SourceType.Machine)),
+      isSwipeOnboardingEligiblePost(post(PostType.Share, SourceType.Machine)),
     ).toBe(false);
     expect(
-      isSwipeOnboardingEligiblePost(post(PostType.SocialTwitter, SourceType.Machine)),
+      isSwipeOnboardingEligiblePost(
+        post(PostType.Freeform, SourceType.Machine),
+      ),
+    ).toBe(false);
+    expect(
+      isSwipeOnboardingEligiblePost(
+        post(PostType.SocialTwitter, SourceType.Machine),
+      ),
     ).toBe(false);
   });
 
diff --git a/packages/webapp/lib/swipeOnboardingGuidance.spec.ts b/packages/webapp/lib/swipeOnboardingGuidance.spec.ts
index 89422ed4efc..f55b39320a5 100644
--- a/packages/webapp/lib/swipeOnboardingGuidance.spec.ts
+++ b/packages/webapp/lib/swipeOnboardingGuidance.spec.ts
@@ -5,53 +5,37 @@ import {
 } from './swipeOnboardingGuidance';
 
 describe('getSwipeOnboardingGuidanceMessage', () => {
-  it('returns starter tier with remaining count for 0 to 9 (swipe)', () => {
-    expect(getSwipeOnboardingGuidanceMessage(0)).toBe(
-      'Swipe 10 posts to get started.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(1)).toBe(
-      'Swipe 9 more posts to get started.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(9)).toBe(
-      'Swipe 1 more post to get started.',
-    );
+  it('returns fixed copy for 0 to 4 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(0)).toBe('Start swiping');
+    expect(getSwipeOnboardingGuidanceMessage(1)).toBe('Keep swiping!');
+    expect(getSwipeOnboardingGuidanceMessage(4)).toBe('Keep swiping!');
   });
 
-  it('returns improve tier with remaining until 20 (swipe)', () => {
-    expect(getSwipeOnboardingGuidanceMessage(10)).toBe(
-      'Swipe 10 more posts.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(15)).toBe(
-      'Swipe 5 more posts.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(19)).toBe(
-      'Swipe 1 more post.',
-    );
+  it('returns countdown copy from 5 to 9 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(5)).toBe('Swipe 5 more posts.');
+    expect(getSwipeOnboardingGuidanceMessage(9)).toBe('Swipe 1 more post.');
   });
 
-  it('returns refine tier with remaining until 40 (swipe)', () => {
-    expect(getSwipeOnboardingGuidanceMessage(20)).toBe(
-      'Swipe 20 more posts.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(30)).toBe(
-      'Swipe 10 more posts.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(39)).toBe(
-      'Swipe 1 more post.',
-    );
+  it('returns improve tier with remaining until 20 (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(10)).toBe('Swipe 10 more posts.');
+    expect(getSwipeOnboardingGuidanceMessage(15)).toBe('Swipe 5 more posts.');
+    expect(getSwipeOnboardingGuidanceMessage(19)).toBe('Swipe 1 more post.');
   });
 
-  it('returns fine-tune copy for 40 or more (swipe)', () => {
-    expect(getSwipeOnboardingGuidanceMessage(40)).toBe('Swipe for fine-tune.');
+  it('returns fine-tune copy for 20 or more (swipe)', () => {
+    expect(getSwipeOnboardingGuidanceMessage(20)).toBe('Swipe for fine-tune.');
     expect(getSwipeOnboardingGuidanceMessage(100)).toBe('Swipe for fine-tune.');
   });
 
   it('returns tag variant with remaining counts per tier', () => {
     expect(getSwipeOnboardingGuidanceMessage(0, 'tags')).toBe(
-      'Pick 10 tags to get started.',
+      'Pick 5 tags to get started.',
     );
     expect(getSwipeOnboardingGuidanceMessage(3, 'tags')).toBe(
-      'Pick 7 more tags to get started.',
+      'Pick 2 more tags to get started.',
+    );
+    expect(getSwipeOnboardingGuidanceMessage(5, 'tags')).toBe(
+      'Pick 5 more tags.',
     );
     expect(getSwipeOnboardingGuidanceMessage(10, 'tags')).toBe(
       'Pick 10 more tags.',
@@ -59,57 +43,42 @@ describe('getSwipeOnboardingGuidanceMessage', () => {
     expect(getSwipeOnboardingGuidanceMessage(19, 'tags')).toBe(
       'Pick 1 more tag.',
     );
-    expect(getSwipeOnboardingGuidanceMessage(25, 'tags')).toBe(
-      'Pick 15 more tags.',
-    );
-    expect(getSwipeOnboardingGuidanceMessage(40, 'tags')).toBe(
+    expect(getSwipeOnboardingGuidanceMessage(20, 'tags')).toBe(
       'Add tags for fine-tune.',
     );
   });
 });
 
 describe('getSwipeOnboardingHeadline', () => {
-  it('returns fixed two-line starter for 0–9 (swipe)', () => {
+  it('returns fixed starter headline for 0–4 (swipe)', () => {
     expect(getSwipeOnboardingHeadline(0)).toEqual({
-      line1: 'Tune your feed.',
-      line2: 'Swipe on at least 10 posts to get started.',
+      line1: 'Swipe on at least 5 posts to tune your feed.',
+    });
+    expect(getSwipeOnboardingHeadline(4)).toEqual({
+      line1: 'Swipe on at least 5 posts to tune your feed.',
     });
+  });
+
+  it('returns fixed improve-tier headline for 5–9 (swipe)', () => {
     expect(getSwipeOnboardingHeadline(5)).toEqual({
-      line1: 'Tune your feed.',
-      line2: 'Swipe on at least 10 posts to get started.',
+      line1: 'Keep going, 5 more and it gets better.',
     });
     expect(getSwipeOnboardingHeadline(9)).toEqual({
-      line1: 'Tune your feed.',
-      line2: 'Swipe on at least 10 posts to get started.',
+      line1: 'Keep going, 5 more and it gets better.',
     });
   });
 
-  it('returns fixed improve-tier headline for 10–19 (swipe)', () => {
+  it('returns fixed refine-tier headline for 10–19 (swipe)', () => {
     expect(getSwipeOnboardingHeadline(10)).toEqual({
-      line1: 'Keep going, 10 more and it gets better.',
-    });
-    expect(getSwipeOnboardingHeadline(15)).toEqual({
-      line1: 'Keep going, 10 more and it gets better.',
+      line1: "You're getting there, 10 more to dial it in.",
     });
     expect(getSwipeOnboardingHeadline(19)).toEqual({
-      line1: 'Keep going, 10 more and it gets better.',
+      line1: "You're getting there, 10 more to dial it in.",
     });
   });
 
-  it('returns fixed refine-tier headline for 20–39 (swipe)', () => {
+  it('returns completion headline at 20 and above (swipe)', () => {
     expect(getSwipeOnboardingHeadline(20)).toEqual({
-      line1: "You're getting there, 20 more to dial it in.",
-    });
-    expect(getSwipeOnboardingHeadline(30)).toEqual({
-      line1: "You're getting there, 20 more to dial it in.",
-    });
-    expect(getSwipeOnboardingHeadline(39)).toEqual({
-      line1: "You're getting there, 20 more to dial it in.",
-    });
-  });
-
-  it('returns completion headline at 40 and above (swipe)', () => {
-    expect(getSwipeOnboardingHeadline(40)).toEqual({
       line1: "You're all set! Keep swiping to fine-tune.",
     });
   });
@@ -117,39 +86,38 @@ describe('getSwipeOnboardingHeadline', () => {
   it('uses fixed tag wording per tier when variant is tags', () => {
     expect(getSwipeOnboardingHeadline(0, 'tags')).toEqual({
       line1: 'Tune your feed.',
-      line2: 'Pick at least 10 tags to get started.',
+      line2: 'Pick at least 5 tags to get started.',
     });
-    expect(getSwipeOnboardingHeadline(7, 'tags')).toEqual({
+    expect(getSwipeOnboardingHeadline(4, 'tags')).toEqual({
       line1: 'Tune your feed.',
-      line2: 'Pick at least 10 tags to get started.',
+      line2: 'Pick at least 5 tags to get started.',
     });
-    expect(getSwipeOnboardingHeadline(12, 'tags')).toEqual({
-      line1: 'Keep going, 10 more and it gets better.',
+    expect(getSwipeOnboardingHeadline(7, 'tags')).toEqual({
+      line1: 'Keep going, 5 more and it gets better.',
     });
-    expect(getSwipeOnboardingHeadline(35, 'tags')).toEqual({
-      line1: "You're getting there, 20 more to dial it in.",
+    expect(getSwipeOnboardingHeadline(12, 'tags')).toEqual({
+      line1: "You're getting there, 10 more to dial it in.",
     });
-    expect(getSwipeOnboardingHeadline(40, 'tags')).toEqual({
+    expect(getSwipeOnboardingHeadline(20, 'tags')).toEqual({
       line1: "You're all set! Keep adding tags to fine-tune.",
     });
   });
 });
 
 describe('getSwipeOnboardingBarProgress', () => {
-  it('fills 0 to 100% for swipes 0 to 9, then shows 25% at swipe 10 (first quarter)', () => {
+  it('fills 0 to 100% linearly for swipes 0 to 4 (first phase)', () => {
     expect(getSwipeOnboardingBarProgress(0)).toBe(0);
-    expect(getSwipeOnboardingBarProgress(5)).toBe(50);
-    expect(getSwipeOnboardingBarProgress(9)).toBe(90);
-    expect(getSwipeOnboardingBarProgress(10)).toBe(25);
+    expect(getSwipeOnboardingBarProgress(2)).toBe(40);
+    expect(getSwipeOnboardingBarProgress(4)).toBe(80);
   });
 
-  it('advances each 25% segment over the next 10 swipes through 40', () => {
-    expect(getSwipeOnboardingBarProgress(15)).toBe(37.5);
-    expect(getSwipeOnboardingBarProgress(19)).toBe(47.5);
-    expect(getSwipeOnboardingBarProgress(20)).toBe(50);
-    expect(getSwipeOnboardingBarProgress(30)).toBe(75);
-    expect(getSwipeOnboardingBarProgress(39)).toBe(97.5);
-    expect(getSwipeOnboardingBarProgress(40)).toBe(100);
+  it('shows 25% at swipe 5 (start of first quarter) then advances each 25% segment through 20', () => {
+    expect(getSwipeOnboardingBarProgress(5)).toBe(25);
+    expect(getSwipeOnboardingBarProgress(9)).toBe(45);
+    expect(getSwipeOnboardingBarProgress(10)).toBe(50);
+    expect(getSwipeOnboardingBarProgress(15)).toBe(75);
+    expect(getSwipeOnboardingBarProgress(19)).toBe(95);
+    expect(getSwipeOnboardingBarProgress(20)).toBe(100);
     expect(getSwipeOnboardingBarProgress(99)).toBe(100);
   });
 
diff --git a/packages/webapp/lib/swipeOnboardingGuidance.ts b/packages/webapp/lib/swipeOnboardingGuidance.ts
index 882b4b9a55f..0c47084476a 100644
--- a/packages/webapp/lib/swipeOnboardingGuidance.ts
+++ b/packages/webapp/lib/swipeOnboardingGuidance.ts
@@ -1,11 +1,11 @@
 /** Minimum swipes before “Continue” unlocks (tier 0 ends at this minus 1). */
-export const SWIPE_ONBOARDING_MIN_TO_UNLOCK = 10;
+export const SWIPE_ONBOARDING_MIN_TO_UNLOCK = 5;
 
 /** Second staircase (refine tier starts at this count). */
-export const SWIPE_ONBOARDING_IMPROVE_MILESTONE = 20;
+export const SWIPE_ONBOARDING_IMPROVE_MILESTONE = 10;
 
 /** Swipe count at which the bar is full and “all set” copy starts. */
-export const SWIPE_ONBOARDING_REFINE_TARGET = 40;
+export const SWIPE_ONBOARDING_REFINE_TARGET = 20;
 
 /** Number of equal segments on the onboarding progress bar (25% each). */
 export const SWIPE_ONBOARDING_BAR_STAGE_COUNT = 4;
@@ -54,11 +54,7 @@ export type SwipeOnboardingHeadline = {
 /** Same progress tiers as swipes; copy refers to tags instead. */
 export type SwipeOnboardingProgressCopyVariant = 'swipe' | 'tags';
 
-function unitWord(
-  count: number,
-  singular: string,
-  plural: string,
-): string {
+function unitWord(count: number, singular: string, plural: string): string {
   return count === 1 ? singular : plural;
 }
 
@@ -74,11 +70,12 @@ export function getSwipeOnboardingHeadline(
 
   if (n < SWIPE_ONBOARDING_MIN_TO_UNLOCK) {
     return {
-      line1: 'Tune your feed.',
-      line2:
+      line1:
         variant === 'tags'
-          ? 'Pick at least 10 tags to get started.'
-          : 'Swipe on at least 10 posts to get started.',
+          ? 'Tune your feed.'
+          : 'Swipe on at least 5 posts to tune your feed.',
+      line2:
+        variant === 'tags' ? 'Pick at least 5 tags to get started.' : undefined,
     };
   }
 
@@ -92,10 +89,10 @@ export function getSwipeOnboardingHeadline(
   }
 
   if (n < SWIPE_ONBOARDING_IMPROVE_MILESTONE) {
-    return { line1: 'Keep going, 10 more and it gets better.' };
+    return { line1: 'Keep going, 5 more and it gets better.' };
   }
 
-  return { line1: "You're getting there, 20 more to dial it in." };
+  return { line1: "You're getting there, 10 more to dial it in." };
 }
 
 /**
@@ -108,7 +105,9 @@ export function getSwipeOnboardingGuidanceMessage(
   const n = Math.max(0, progressCount);
 
   if (n >= SWIPE_ONBOARDING_REFINE_TARGET) {
-    return variant === 'tags' ? 'Add tags for fine-tune.' : 'Swipe for fine-tune.';
+    return variant === 'tags'
+      ? 'Add tags for fine-tune.'
+      : 'Swipe for fine-tune.';
   }
 
   if (n >= SWIPE_ONBOARDING_IMPROVE_MILESTONE) {
@@ -127,15 +126,18 @@ export function getSwipeOnboardingGuidanceMessage(
 
   if (variant === 'tags') {
     if (n === 0) {
-      return 'Pick 10 tags to get started.';
+      return 'Pick 5 tags to get started.';
     }
     const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
-    return `Pick ${remaining} more ${unitWord(remaining, 'tag', 'tags')} to get started.`;
+    return `Pick ${remaining} more ${unitWord(
+      remaining,
+      'tag',
+      'tags',
+    )} to get started.`;
   }
 
   if (n === 0) {
-    return 'Swipe 10 posts to get started.';
+    return 'Start swiping';
   }
-  const remaining = SWIPE_ONBOARDING_MIN_TO_UNLOCK - n;
-  return `Swipe ${remaining} more ${unitWord(remaining, 'post', 'posts')} to get started.`;
+  return 'Keep swiping!';
 }
diff --git a/packages/webapp/lib/swipeOnboardingPopularDeck.ts b/packages/webapp/lib/swipeOnboardingPopularDeck.ts
index c99c87689ef..e54f0fdce6a 100644
--- a/packages/webapp/lib/swipeOnboardingPopularDeck.ts
+++ b/packages/webapp/lib/swipeOnboardingPopularDeck.ts
@@ -19,59 +19,89 @@ type MostUpvotedFeedResponse = {
   page?: Connection<Post>;
 };
 
-/**
- * Paginates mostUpvotedFeed for swipe onboarding: prefers machine-sourced posts, then
- * fills with the same post types from any source when the strict list is short.
- */
-export async function fetchSwipeOnboardingPopularDeck(): Promise<Post[]> {
-  const seenIds = new Set<string>();
-  const strictPosts: Post[] = [];
-  const relaxedPosts: Post[] = [];
-
-  let cursor: string | undefined;
-  let pages = 0;
-
-  while (pages < MAX_PAGES) {
-    const data = await gqlClient.request<MostUpvotedFeedResponse>(
-      MOST_UPVOTED_FEED_QUERY,
-      {
-        first: PAGE_SIZE,
-        period: 30,
-        ...(cursor !== undefined ? { after: cursor } : {}),
-        supportedTypes: [...SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES],
-      },
-    );
-
-    const conn = data.page;
-    const edges = conn?.edges ?? [];
-
-    for (const { node } of edges) {
-      if (seenIds.has(node.id)) {
-        continue;
-      }
-      seenIds.add(node.id);
-      if (isSwipeOnboardingEligiblePost(node)) {
-        strictPosts.push(node);
-      } else if (isSwipeOnboardingRelaxedEligiblePost(node)) {
-        relaxedPosts.push(node);
-      }
+type SwipeOnboardingDeckState = {
+  seenIds: Set<string>;
+  strictPosts: Post[];
+  relaxedPosts: Post[];
+};
+
+function appendEligiblePosts(
+  edges: NonNullable<Connection<Post>['edges']>,
+  state: SwipeOnboardingDeckState,
+): void {
+  edges.reduce((acc, { node }) => {
+    if (acc.seenIds.has(node.id)) {
+      return acc;
     }
 
-    pages += 1;
+    acc.seenIds.add(node.id);
 
-    const hasNext = conn?.pageInfo?.hasNextPage === true;
-    const endCursor = conn?.pageInfo?.endCursor ?? undefined;
+    if (isSwipeOnboardingEligiblePost(node)) {
+      acc.strictPosts.push(node);
+      return acc;
+    }
 
-    if (strictPosts.length >= TARGET_STRICT_COUNT || !hasNext || !endCursor) {
-      break;
+    if (isSwipeOnboardingRelaxedEligiblePost(node)) {
+      acc.relaxedPosts.push(node);
     }
-    cursor = endCursor;
+
+    return acc;
+  }, state);
+}
+
+async function collectSwipeOnboardingPosts(
+  state: SwipeOnboardingDeckState,
+  pages = 0,
+  cursor?: string,
+): Promise<void> {
+  if (pages >= MAX_PAGES) {
+    return;
+  }
+
+  const data = await gqlClient.request<MostUpvotedFeedResponse>(
+    MOST_UPVOTED_FEED_QUERY,
+    {
+      first: PAGE_SIZE,
+      period: 30,
+      ...(cursor !== undefined ? { after: cursor } : {}),
+      supportedTypes: [...SWIPE_ONBOARDING_FEED_SUPPORTED_TYPES],
+    },
+  );
+
+  const conn = data.page;
+  const edges = conn?.edges ?? [];
+
+  appendEligiblePosts(edges, state);
+
+  const hasNext = conn?.pageInfo?.hasNextPage === true;
+  const endCursor = conn?.pageInfo?.endCursor ?? undefined;
+  const shouldStop =
+    state.strictPosts.length >= TARGET_STRICT_COUNT || !hasNext || !endCursor;
+
+  if (shouldStop) {
+    return;
   }
 
-  if (strictPosts.length >= STRICT_MIN_BEFORE_RELAXED) {
-    return strictPosts.slice(0, MAX_DECK_POSTS);
+  await collectSwipeOnboardingPosts(state, pages + 1, endCursor);
+}
+
+/**
+ * Paginates mostUpvotedFeed for swipe onboarding: prefers machine-sourced posts, then
+ * fills with the same post types from any source when the strict list is short.
+ */
+export async function fetchSwipeOnboardingPopularDeck(): Promise<Post[]> {
+  const state: SwipeOnboardingDeckState = {
+    seenIds: new Set<string>(),
+    strictPosts: [],
+    relaxedPosts: [],
+  };
+
+  await collectSwipeOnboardingPosts(state);
+
+  if (state.strictPosts.length >= STRICT_MIN_BEFORE_RELAXED) {
+    return state.strictPosts.slice(0, MAX_DECK_POSTS);
   }
 
-  const merged = [...strictPosts, ...relaxedPosts];
+  const merged = [...state.strictPosts, ...state.relaxedPosts];
   return merged.slice(0, MAX_DECK_POSTS);
 }
diff --git a/packages/webapp/lib/swipingBackendApi.ts b/packages/webapp/lib/swipingBackendApi.ts
index a518c322b0a..0bf64eaf629 100644
--- a/packages/webapp/lib/swipingBackendApi.ts
+++ b/packages/webapp/lib/swipingBackendApi.ts
@@ -1,60 +1,82 @@
-const BASE =
-  process.env.NEXT_PUBLIC_SWIPING_BACKEND_URL || 'http://localhost:8000';
+import { gql } from 'graphql-request';
+import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
 
 export interface PostSummary {
-  post_id: string;
+  postId: string;
   title: string;
   summary: string;
   tags: string[];
   url: string;
-  source_id: string;
+  sourceId: string;
 }
 
 export interface DiscoverPostsRequest {
   prompt?: string;
-  selected_tags?: string[];
-  confirmed_tags?: string[];
-  liked_titles?: string[];
-  exclude_ids?: string[];
-  saturated_tags?: string[];
+  selectedTags?: string[];
+  confirmedTags?: string[];
+  likedTitles?: string[];
+  excludeIds?: string[];
+  saturatedTags?: string[];
   n?: number;
 }
 
 export interface DiscoverPostsResponse {
   posts: PostSummary[];
-  sub_prompts: string[];
+  subPrompts: string[];
 }
 
+const ONBOARDING_DISCOVER_POSTS_MUTATION = gql`
+  mutation OnboardingDiscoverPosts(
+    $prompt: String
+    $selectedTags: [String!]
+    $confirmedTags: [String!]
+    $likedTitles: [String!]
+    $excludeIds: [String!]
+    $saturatedTags: [String!]
+    $n: Int
+  ) {
+    onboardingDiscoverPosts(
+      prompt: $prompt
+      selectedTags: $selectedTags
+      confirmedTags: $confirmedTags
+      likedTitles: $likedTitles
+      excludeIds: $excludeIds
+      saturatedTags: $saturatedTags
+      n: $n
+    ) {
+      posts {
+        postId
+        title
+        summary
+        tags
+        url
+        sourceId
+      }
+      subPrompts
+    }
+  }
+`;
+
 export async function discoverPosts(
   req: DiscoverPostsRequest,
 ): Promise<DiscoverPostsResponse> {
-  const res = await fetch(`${BASE}/api/discover-posts`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      prompt: req.prompt ?? '',
-      selected_tags: req.selected_tags ?? [],
-      confirmed_tags: req.confirmed_tags ?? [],
-      liked_titles: req.liked_titles ?? [],
-      exclude_ids: req.exclude_ids ?? [],
-      saturated_tags: req.saturated_tags ?? [],
-      n: req.n ?? 8,
-    }),
-  });
-  return res.json();
+  const data = await gqlClient.request<{
+    onboardingDiscoverPosts: DiscoverPostsResponse;
+  }>(ONBOARDING_DISCOVER_POSTS_MUTATION, req);
+  return data.onboardingDiscoverPosts;
 }
 
-export async function extractTags(prompt: string): Promise<string[]> {
-  const res = await fetch(`${BASE}/api/extract-tags`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ prompt }),
-  });
-  const data = await res.json();
-  return data.tags;
-}
+const ONBOARDING_EXTRACT_TAGS_MUTATION = gql`
+  mutation OnboardingExtractTags($prompt: String!) {
+    onboardingExtractTags(prompt: $prompt) {
+      tags
+    }
+  }
+`;
 
-export async function fetchAllTags(): Promise<string[]> {
-  const res = await fetch(`${BASE}/api/tags`);
-  return res.json();
+export async function extractTags(prompt: string): Promise<string[]> {
+  const data = await gqlClient.request<{
+    onboardingExtractTags: { tags: string[] };
+  }>(ONBOARDING_EXTRACT_TAGS_MUTATION, { prompt });
+  return data.onboardingExtractTags.tags;
 }
diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx
index 971778867a8..c30026134bd 100644
--- a/packages/webapp/pages/_app.tsx
+++ b/packages/webapp/pages/_app.tsx
@@ -46,8 +46,6 @@ import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structu
 import { fromCDN } from '@dailydotdev/shared/src/lib';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
 import { useCheckCoresRole } from '@dailydotdev/shared/src/hooks/useCheckCoresRole';
-import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
-import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
 import {
   messageHandlerExists,
   postWebKitMessage,
@@ -144,12 +142,6 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
   const { unreadCount } = useNotificationContext();
   const unreadText = getUnreadText(unreadCount);
   const { user, trackingId, isFunnel } = useAuthContext();
-  const {
-    value: isSwipeOnboardingEnabled,
-    isLoading: isSwipeOnboardingLoading,
-  } = useConditionalFeature({
-    feature: swipeOnboardingFeature,
-  });
   const { showBanner, onAcceptCookies, onOpenBanner, onHideBanner } =
     useCookieBanner();
   useWebVitals();
@@ -213,22 +205,18 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     if (
       !isFunnel &&
       isOnboardingActionsReady &&
-      (!isSwipeOnboardingLoading || isSwipeOnboardingPreviewForced) &&
       !isOnboardingComplete &&
       !isOnboardingExcludedPath(router.pathname)
     ) {
-      const destination =
-        isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
-          ? '/onboarding/swipe'
-          : '/onboarding';
+      const destination = isSwipeOnboardingPreviewForced
+        ? '/onboarding/swipe'
+        : '/onboarding';
       router.replace(destination);
     }
   }, [
     isFunnel,
     isOnboardingActionsReady,
     isOnboardingComplete,
-    isSwipeOnboardingEnabled,
-    isSwipeOnboardingLoading,
     isSwipeOnboardingPreviewForced,
     router,
   ]);
diff --git a/packages/webapp/pages/onboarding.tsx b/packages/webapp/pages/onboarding.tsx
index d0aa98a22b2..88d396a1388 100644
--- a/packages/webapp/pages/onboarding.tsx
+++ b/packages/webapp/pages/onboarding.tsx
@@ -62,7 +62,11 @@ import { FunnelStepper } from '@dailydotdev/shared/src/features/onboarding/share
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
 import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import { isLocalhost } from '@dailydotdev/shared/src/lib/config';
+import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
+import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
+import { FunnelStepType } from '@dailydotdev/shared/src/features/onboarding/types/funnel';
 import { getPageSeoTitles } from '../components/layouts/utils';
+import { FunnelSwipeOnboardingStep } from '../components/onboarding/FunnelSwipeOnboardingStep';
 import { defaultOpenGraph, defaultSeo } from '../next-seo';
 
 const seoTitles = getPageSeoTitles('Get started');
@@ -158,14 +162,15 @@ const isValidAction = (
 };
 
 const useOnboardingAuth = () => {
-  const formRef = useRef<HTMLFormElement>();
+  const formRef = useRef<HTMLFormElement>(null as unknown as HTMLFormElement);
   const isMobile = useViewSize(ViewSize.MobileL);
   const { isAuthReady, anonymous, loginState, isLoggedIn } = useAuthContext();
   const router = useRouter();
-  const action = isValidAction(router.query.action) && router.query.action;
-  const {
-    data: { funnelState },
-  } = useOnboardingBoot();
+  const action = isValidAction(router.query.action)
+    ? router.query.action
+    : undefined;
+  const { data } = useOnboardingBoot();
+  const funnelState = data?.funnelState;
 
   const [auth, setAuth] = useAtom(authAtom);
   const { isLoginFlow, defaultDisplay } = auth;
@@ -239,8 +244,10 @@ const useOnboardingAuth = () => {
       targetId: ExperimentWinner.OnboardingV4,
       onSuccessfulRegistration: () => updateAuth({ isAuthenticating: false }),
       onSuccessfulLogin: () => updateAuth({ isAuthenticating: false }),
-      onAuthStateUpdate: (props: AuthProps) =>
-        updateAuth({ isAuthenticating: true, ...props }),
+      onAuthStateUpdate: (props: Partial<AuthProps>) => {
+        const { isAuthenticating: incoming, ...rest } = props;
+        updateAuth({ isAuthenticating: incoming ?? true, ...rest });
+      },
       onboardingSignupButton: {
         size: isMobile ? ButtonSize.Medium : ButtonSize.Large,
         variant: ButtonVariant.Primary,
@@ -268,7 +275,7 @@ const useOnboardingAuth = () => {
   };
 };
 
-function Onboarding({ initialStepId }: PageProps): ReactElement {
+function Onboarding({ initialStepId }: PageProps): ReactElement | null {
   const router = useRouter();
   const {
     isAuthenticating,
@@ -280,6 +287,25 @@ function Onboarding({ initialStepId }: PageProps): ReactElement {
   const { isOnboardingComplete, isOnboardingActionsReady, completeStep } =
     useOnboardingActions();
   const [isFunnelReady, setFunnelReady] = useState(false);
+  const { value: isSwipeOnboardingEnabled } = useConditionalFeature({
+    feature: swipeOnboardingFeature,
+  });
+  const swipeOnboardingPreviewQuery = router.query.swipeOnboardingPreview;
+  const isSwipeOnboardingPreviewForced =
+    swipeOnboardingPreviewQuery === '1' ||
+    swipeOnboardingPreviewQuery === 'true' ||
+    (Array.isArray(swipeOnboardingPreviewQuery) &&
+      (swipeOnboardingPreviewQuery.includes('1') ||
+        swipeOnboardingPreviewQuery.includes('true')));
+  const stepComponentOverrides = useMemo(
+    () =>
+      isSwipeOnboardingEnabled || isSwipeOnboardingPreviewForced
+        ? {
+            [FunnelStepType.EditTags]: FunnelSwipeOnboardingStep,
+          }
+        : undefined,
+    [isSwipeOnboardingEnabled, isSwipeOnboardingPreviewForced],
+  );
 
   const onComplete = useCallback(async () => {
     completeStep(ActionType.CompletedOnboarding);
@@ -343,17 +369,20 @@ function Onboarding({ initialStepId }: PageProps): ReactElement {
     );
   }
 
+  if (!isFunnelReady || !funnelState) {
+    return null;
+  }
+
   return (
-    isFunnelReady && (
-      <div className="flex min-h-dvh min-w-full flex-col">
-        <FunnelStepper
-          {...funnelState}
-          initialStepId={initialStepId}
-          onComplete={onComplete}
-        />
-        {/* <HotJarTracking hotjarId="3871311" /> */}
-      </div>
-    )
+    <div className="flex min-h-dvh min-w-full flex-col">
+      <FunnelStepper
+        {...funnelState}
+        initialStepId={initialStepId}
+        onComplete={onComplete}
+        stepComponentOverrides={stepComponentOverrides}
+      />
+      {/* <HotJarTracking hotjarId="3871311" /> */}
+    </div>
   );
 }
 
diff --git a/packages/webapp/pages/onboarding/swipe.tsx b/packages/webapp/pages/onboarding/swipe.tsx
index ac9ea863686..1ff0bae70cc 100644
--- a/packages/webapp/pages/onboarding/swipe.tsx
+++ b/packages/webapp/pages/onboarding/swipe.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 import React, {
   useCallback,
   useEffect,
@@ -16,8 +16,6 @@ import {
   EditTag,
   OnboardingHeader,
 } from '@dailydotdev/shared/src/components/onboarding';
-import { Modal } from '@dailydotdev/shared/src/components/modals/common/Modal';
-import { ModalSize } from '@dailydotdev/shared/src/components/modals/common/types';
 import {
   FooterLinks,
   withFeaturesBoundary,
@@ -29,6 +27,7 @@ import { redirectToApp } from '@dailydotdev/shared/src/features/onboarding/lib/u
 import { ActionType } from '@dailydotdev/shared/src/graphql/actions';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
 import {
   Button,
   ButtonSize,
@@ -36,10 +35,12 @@ import {
 } from '@dailydotdev/shared/src/components/buttons/Button';
 import { ArrowIcon } from '@dailydotdev/shared/src/components/icons';
 import HotAndColdModal from '@dailydotdev/shared/src/components/modals/hotTakes/HotAndColdModal';
+import { useBookmarkPost } from '@dailydotdev/shared/src/hooks/useBookmarkPost';
 import { useConditionalFeature } from '@dailydotdev/shared/src/hooks/useConditionalFeature';
 import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
 import useTagAndSource from '@dailydotdev/shared/src/hooks/useTagAndSource';
 import { swipeOnboardingFeature } from '@dailydotdev/shared/src/lib/featureManagement';
+import { setHasSeenTags } from '@dailydotdev/shared/src/lib/feedSettings';
 import { Origin } from '@dailydotdev/shared/src/lib/log';
 import { getPageSeoTitles } from '../../components/layouts/utils';
 import { SwipeOnboardingProgressHeader } from '../../components/onboarding/SwipeOnboardingProgressHeader';
@@ -68,6 +69,14 @@ const SWIPE_ONBOARDING_PROGRESS_MILESTONES: readonly number[] = [
 ];
 
 const SWIPE_ONBOARDING_TAG_SEED_MAX = 25;
+const SWIPE_ONBOARDING_LOADING_LABELS = [
+  'cooking',
+  'optimizing',
+  'thinking',
+  'shuffling the good stuff',
+  'bribing the feed gremlins',
+  'warming up the swipe deck',
+] as const;
 
 /**
  * Test-only: clears legacy followed tags when opening "Use tags instead" (unfollows
@@ -75,18 +84,138 @@ const SWIPE_ONBOARDING_TAG_SEED_MAX = 25;
  * also set `NEXT_PUBLIC_SWIPE_ONBOARDING_TEST_CLEAR_TAGS=true` in `.env.local` instead
  * of using the toggle.
  */
-const SWIPE_ONBOARDING_TEST_CLEAR_PRESELECTED_TAGS_TOGGLE = true;
+const SWIPE_ONBOARDING_TEST_CLEAR_PRESELECTED_TAGS_TOGGLE = false;
 const shouldClearPreselectedTagsForSwipeOnboardingTest =
   SWIPE_ONBOARDING_TEST_CLEAR_PRESELECTED_TAGS_TOGGLE ||
   process.env.NEXT_PUBLIC_SWIPE_ONBOARDING_TEST_CLEAR_TAGS === 'true';
 
+const swipeOnboardingPageBackdropStyle: CSSProperties = {
+  backgroundImage: `radial-gradient(circle at top, rgb(from var(--theme-accent-cabbage-default) r g b / 0.12), transparent 34%), radial-gradient(circle at bottom right, rgb(from var(--theme-accent-avocado-default) r g b / 0.1), transparent 28%), linear-gradient(180deg, rgb(from var(--theme-background-default) r g b / 1) 0%, rgb(from var(--theme-background-default) r g b / 0.98) 100%)`,
+};
+
+const swipeOnboardingToolbarActionButtonStyle = {
+  '--button-hover-background': 'transparent',
+  '--button-hover-border-color': 'transparent',
+  '--button-hover-box-shadow': 'none',
+  '--button-active-background': 'transparent',
+  '--button-active-border-color': 'transparent',
+  '--button-active-box-shadow': 'none',
+} as CSSProperties;
+
+const swipeOnboardingModalShellClassName =
+  'tablet:!h-[calc(100vh-2rem)] tablet:!max-h-[calc(100vh-2rem)] tablet:!w-[42rem] tablet:!max-w-[calc(100vw-2rem)] tablet:!overflow-hidden tablet:!rounded-[2rem] tablet:!border-border-subtlest-secondary tablet:shadow-[0_32px_120px_-48px_rgba(0,0,0,0.58)]';
+
+const swipeOnboardingSurfaceClassName =
+  'w-full overflow-hidden rounded-[2rem] border border-border-subtlest-secondary bg-background-default shadow-[0_24px_90px_-48px_rgba(0,0,0,0.58)]';
+
+const swipeOnboardingPanelClassName =
+  'rounded-[1.5rem] border border-border-subtlest-tertiary bg-surface-float';
+
+const isIncompleteSocialSignupUser = (user?: LoggedUser): boolean =>
+  !!user &&
+  user.infoConfirmed === false &&
+  user.providers.some((provider) => provider !== 'password');
+
+function SwipeOnboardingViewport({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): ReactElement {
+  return (
+    <div
+      className={classNames(
+        'relative isolate min-h-dvh overflow-hidden bg-background-default',
+        className,
+      )}
+      style={swipeOnboardingPageBackdropStyle}
+    >
+      <div className="relative z-[1] flex min-h-dvh w-full flex-col items-center px-4 pb-6 pt-4 tablet:px-6 tablet:pb-8">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function SwipeOnboardingToolbar({
+  actionLabel,
+  onAction,
+  onBack,
+}: {
+  actionLabel: string;
+  onAction: () => void;
+  onBack: () => void;
+}): ReactElement {
+  return (
+    <div className="pointer-events-none flex w-full justify-center px-4 pb-1 pt-4 tablet:px-6">
+      <div className="flex w-full max-w-[32rem] items-center justify-between gap-3 px-2 py-2">
+        <Button
+          className="pointer-events-auto !rounded-full"
+          icon={<ArrowIcon className="-rotate-90" />}
+          size={ButtonSize.Small}
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          onClick={onBack}
+        />
+        <Button
+          className="pointer-events-auto shrink-0 !rounded-full"
+          size={ButtonSize.Small}
+          style={swipeOnboardingToolbarActionButtonStyle}
+          type="button"
+          variant={ButtonVariant.Tertiary}
+          onClick={onAction}
+        >
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function useAnimatedLoadingLabel(isActive: boolean): string {
+  const [labelIndex, setLabelIndex] = useState(0);
+  const [dotCount, setDotCount] = useState(1);
+
+  useEffect(() => {
+    if (!isActive) {
+      setLabelIndex(0);
+      setDotCount(1);
+      return undefined;
+    }
+
+    const interval = window.setInterval(() => {
+      setDotCount((currentDotCount) => {
+        if (currentDotCount === 3) {
+          setLabelIndex(
+            (currentLabelIndex) =>
+              (currentLabelIndex + 1) % SWIPE_ONBOARDING_LOADING_LABELS.length,
+          );
+          return 1;
+        }
+
+        return currentDotCount + 1;
+      });
+    }, 550);
+
+    return () => window.clearInterval(interval);
+  }, [isActive]);
+
+  return `${SWIPE_ONBOARDING_LOADING_LABELS[labelIndex]}${'.'.repeat(
+    dotCount,
+  )}`;
+}
+
 function SwipeOnboardingPage(): ReactElement {
   const router = useRouter();
   const formRef = useRef<HTMLFormElement>(null as unknown as HTMLFormElement);
-  const { isAuthReady, isLoggedIn } = useAuthContext();
+  const { isAuthReady, isLoggedIn, user } = useAuthContext();
   const { completeStep } = useOnboardingActions();
   const [swipesCount, setSwipesCount] = useState(0);
   const [milestoneBurstKey, setMilestoneBurstKey] = useState(0);
+  const [authDisplay, setAuthDisplay] = useState<AuthDisplay>(
+    AuthDisplay.OnboardingSignup,
+  );
   const [onboardingUiMode, setOnboardingUiMode] = useState<
     'prompt' | 'swipe' | 'tags'
   >('prompt');
@@ -97,18 +226,24 @@ function SwipeOnboardingPage(): ReactElement {
   >(() => new Set());
   const swipeOnboardingTestTagsClearDoneForSessionRef = useRef(false);
   const prevSwipesForMilestoneRef = useRef<number | null>(null);
+  const animatedPromptLoadingLabel = useAnimatedLoadingLabel(promptLoading);
 
   const {
     cards: adaptiveCards,
+    getBookmarkablePost,
     isLoading: isAdaptiveLoading,
     startDeck,
     handleSwipe: handleAdaptiveSwipe,
     retryFetch,
     selectedTags: adaptiveSelectedTags,
-    rightSwipedPostIds,
   } = useAdaptiveSwipeDeck();
+  const { toggleBookmark } = useBookmarkPost();
 
   const handlePromptSubmit = useCallback(async () => {
+    if (promptLoading) {
+      return;
+    }
+
     setPromptLoading(true);
     try {
       let initialTags: string[] = [];
@@ -120,9 +255,13 @@ function SwipeOnboardingPage(): ReactElement {
     } finally {
       setPromptLoading(false);
     }
-  }, [promptText, startDeck]);
+  }, [promptLoading, promptText, startDeck]);
 
   const handleSkipPrompt = useCallback(async () => {
+    if (promptLoading) {
+      return;
+    }
+
     setPromptLoading(true);
     try {
       await startDeck();
@@ -130,13 +269,22 @@ function SwipeOnboardingPage(): ReactElement {
     } finally {
       setPromptLoading(false);
     }
-  }, [startDeck]);
+  }, [promptLoading, startDeck]);
   const {
     value: isSwipeOnboardingEnabled,
     isLoading: isSwipeOnboardingLoading,
   } = useConditionalFeature({
     feature: swipeOnboardingFeature,
   });
+  const hasIncompleteSocialSignup = isIncompleteSocialSignupUser(user);
+  const shouldShowSwipeAuth = !isLoggedIn || hasIncompleteSocialSignup;
+  const shouldShowAuthIntro =
+    !hasIncompleteSocialSignup &&
+    ![
+      AuthDisplay.Registration,
+      AuthDisplay.SocialRegistration,
+      AuthDisplay.EmailVerification,
+    ].includes(authDisplay);
   const swipeOnboardingPreviewQuery =
     router.query[swipeOnboardingPreviewQueryKey];
   const isSwipeOnboardingPreviewForced =
@@ -165,11 +313,15 @@ function SwipeOnboardingPage(): ReactElement {
   ]);
 
   const onComplete = useCallback(async () => {
+    if (user?.id) {
+      setHasSeenTags(user.id, false);
+    }
+
     completeStep(ActionType.CompletedOnboarding);
     completeStep(ActionType.EditTag);
     completeStep(ActionType.ContentTypes);
     await redirectToApp(router);
-  }, [completeStep, router]);
+  }, [completeStep, router, user?.id]);
 
   const { feedSettings, isLoading: isFeedSettingsLoading } = useFeedSettings({
     enabled: isLoggedIn,
@@ -196,6 +348,23 @@ function SwipeOnboardingPage(): ReactElement {
     }
   }, [onboardingProgressCount]);
 
+  const bookmarkRightSwipePost = useCallback(
+    (cardId: string) => {
+      const bookmarkPost = getBookmarkablePost(cardId);
+      if (!bookmarkPost) {
+        return;
+      }
+
+      // Capture the current card payload before deck state changes.
+      toggleBookmark({
+        post: bookmarkPost,
+        origin: Origin.Onboarding,
+        disableToast: true,
+      }).catch(() => null);
+    },
+    [getBookmarkablePost, toggleBookmark],
+  );
+
   const handleSwipeInteraction = useCallback(
     (
       direction: 'left' | 'right' | 'skip',
@@ -204,20 +373,25 @@ function SwipeOnboardingPage(): ReactElement {
       if (direction === 'left' || direction === 'right') {
         setSwipesCount((value) => value + 1);
         if (meta?.onboardingCardId) {
+          if (direction === 'right') {
+            bookmarkRightSwipePost(meta.onboardingCardId);
+          }
           handleAdaptiveSwipe(direction, meta.onboardingCardId);
         }
       }
     },
-    [handleAdaptiveSwipe],
+    [bookmarkRightSwipePost, handleAdaptiveSwipe],
   );
 
   const authOptionProps: AuthOptionsProps = useMemo(
     () => ({
       simplified: true,
-      forceDefaultDisplay: true,
       trigger: AuthTriggers.Onboarding,
       formRef,
-      defaultDisplay: AuthDisplay.OnboardingSignup,
+      defaultDisplay: hasIncompleteSocialSignup
+        ? AuthDisplay.SocialRegistration
+        : AuthDisplay.OnboardingSignup,
+      onDisplayChange: (display) => setAuthDisplay(display as AuthDisplay),
       className: {
         container: classNames('w-full rounded-none tablet:max-w-[30rem]'),
         onboardingSignup: '!gap-5 !pb-5 tablet:gap-8 tablet:pb-8',
@@ -227,7 +401,7 @@ function SwipeOnboardingPage(): ReactElement {
         variant: ButtonVariant.Primary,
       },
     }),
-    [],
+    [hasIncompleteSocialSignup],
   );
   useEffect(() => {
     if (onboardingUiMode !== 'tags') {
@@ -287,15 +461,42 @@ function SwipeOnboardingPage(): ReactElement {
     return <div className="min-h-dvh bg-background-default" />;
   }
 
-  if (!isLoggedIn) {
+  if (shouldShowSwipeAuth) {
     return (
-      <div className="flex min-h-dvh w-full flex-col items-center bg-background-default">
-        <OnboardingHeader />
-        <div className="flex w-full flex-1 items-center justify-center px-4">
-          <AuthOptions {...authOptionProps} />
+      <SwipeOnboardingViewport>
+        <div className="w-full max-w-[42rem]">
+          <OnboardingHeader />
         </div>
-        <FooterLinks className="mx-auto pb-6" />
-      </div>
+        <div className="flex w-full flex-1 items-center justify-center">
+          <div
+            className={classNames(
+              swipeOnboardingSurfaceClassName,
+              'max-w-[34rem]',
+            )}
+          >
+            <div className="flex flex-col gap-6 p-6 tablet:p-8">
+              {shouldShowAuthIntro && (
+                <div className="flex flex-col items-center gap-4 text-center">
+                  <span className="text-text-secondary typo-footnote">
+                    Personalize your daily.dev feed
+                  </span>
+                  <div className="space-y-3">
+                    <h1 className="text-balance text-center font-bold text-text-primary typo-title1">
+                      Sign in to start shaping your feed
+                    </h1>
+                    <p className="text-balance text-center text-text-tertiary typo-body">
+                      We&apos;ll turn your interests and swipes into a smarter
+                      starter feed in just a few steps.
+                    </p>
+                  </div>
+                </div>
+              )}
+              <AuthOptions {...authOptionProps} />
+            </div>
+          </div>
+        </div>
+        <FooterLinks className="mx-auto pt-4" />
+      </SwipeOnboardingViewport>
     );
   }
 
@@ -307,190 +508,192 @@ function SwipeOnboardingPage(): ReactElement {
 
   const bottomContinueSlot = canContinue ? (
     <div className="w-full min-w-0 self-stretch px-4">
-      <Button
-        className="w-full min-w-0"
-        size={ButtonSize.Medium}
-        variant={ButtonVariant.Primary}
-        type="button"
-        onClick={() => {
-          onComplete().catch(() => null);
-        }}
-      >
-        Go to my feed
-      </Button>
+      <div className="mx-auto flex w-full min-w-0 max-w-[32rem] flex-col gap-3 rounded-[1.5rem] border border-border-subtlest-secondary bg-background-default p-3 shadow-[0_24px_72px_-44px_rgba(0,0,0,0.7)] laptop:flex-row laptop:flex-wrap laptop:items-center">
+        <div className="min-w-0 px-2 laptop:flex-1 laptop:basis-0">
+          <p className="font-medium text-text-secondary typo-footnote">
+            Starter feed ready
+          </p>
+          <p className="text-balance text-text-tertiary typo-caption1">
+            We have enough signal to build your first pass. You can keep
+            refining it after this.
+          </p>
+        </div>
+        <Button
+          className="w-full min-w-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap laptop:ml-auto laptop:w-auto"
+          size={ButtonSize.Medium}
+          variant={ButtonVariant.Primary}
+          type="button"
+          onClick={() => {
+            onComplete().catch(() => null);
+          }}
+        >
+          Go to my feed
+        </Button>
+      </div>
     </div>
   ) : null;
 
   if (onboardingUiMode === 'prompt') {
     return (
-      <div className="flex min-h-dvh flex-col items-center justify-center bg-background-default px-4 pb-6 pt-2">
-        <div className="flex w-full max-w-md flex-col items-center gap-6">
-          <h1 className="text-center font-bold typo-title1 text-text-primary">
-            What are you interested in?
-          </h1>
-          <p className="text-center typo-body text-text-tertiary">
-            Describe your interests and we&apos;ll find the best content for
-            you.
-          </p>
-          <textarea
-            className="min-h-[8rem] w-full resize-none rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 typo-body text-text-primary placeholder:text-text-quaternary focus:border-accent-cabbage-default focus:outline-none"
-            placeholder="e.g. I'm a backend engineer interested in Rust, distributed systems, and system design..."
-            value={promptText}
-            onChange={(e) => setPromptText(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                handlePromptSubmit();
-              }
-            }}
-          />
-          <div className="flex w-full flex-col gap-3">
-            <Button
-              className="w-full"
-              size={ButtonSize.Medium}
-              variant={ButtonVariant.Primary}
-              type="button"
-              disabled={promptLoading}
-              onClick={() => {
-                handlePromptSubmit();
-              }}
-            >
-              {promptLoading ? 'Finding posts...' : 'Start swiping'}
-            </Button>
-            <Button
-              className="w-full"
-              size={ButtonSize.Medium}
-              variant={ButtonVariant.Tertiary}
-              type="button"
-              disabled={promptLoading}
-              onClick={() => {
-                handleSkipPrompt();
-              }}
-            >
-              Skip — show me popular posts
-            </Button>
+      <SwipeOnboardingViewport>
+        <div className="flex w-full max-w-[46rem] flex-1 flex-col justify-center">
+          <div className={swipeOnboardingSurfaceClassName}>
+            <div className="flex flex-col gap-5 p-5 tablet:gap-6 tablet:p-7">
+              <div className="flex flex-col items-center gap-3 text-center">
+                <span className="text-text-secondary typo-footnote">
+                  Personalize your daily.dev feed
+                </span>
+                <div className="space-y-3">
+                  <h1 className="text-balance text-center font-bold text-text-primary typo-title1">
+                    What do you want to read more about?
+                  </h1>
+                  <p className="mx-auto max-w-[32rem] text-balance text-center text-text-tertiary typo-body">
+                    Describe your interests and we&apos;ll turn that into a
+                    swipe deck that feels closer to a real conversation than a
+                    blank setup form.
+                  </p>
+                </div>
+              </div>
+              <div
+                className={classNames(
+                  swipeOnboardingPanelClassName,
+                  'overflow-hidden',
+                )}
+              >
+                <textarea
+                  className="min-h-[8.5rem] w-full resize-none bg-transparent px-5 py-4 text-text-primary typo-body placeholder:text-text-quaternary focus:outline-none tablet:min-h-[9rem]"
+                  placeholder="e.g. I'm a backend engineer interested in Rust, distributed systems, infrastructure, and system design..."
+                  value={promptText}
+                  onChange={(e) => setPromptText(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey && !promptLoading) {
+                      e.preventDefault();
+                      handlePromptSubmit();
+                    }
+                  }}
+                />
+                <div className="flex flex-col gap-2 border-t border-border-subtlest-tertiary px-4 py-3 tablet:flex-row tablet:items-center tablet:justify-between">
+                  <Button
+                    aria-disabled={promptLoading}
+                    className={classNames('w-full tablet:w-auto', {
+                      readOnly: promptLoading,
+                    })}
+                    size={ButtonSize.Medium}
+                    variant={ButtonVariant.Tertiary}
+                    type="button"
+                    onClick={() => {
+                      handleSkipPrompt();
+                    }}
+                  >
+                    Show popular posts
+                  </Button>
+                  <Button
+                    aria-disabled={promptLoading}
+                    className={classNames('w-full tablet:w-auto', {
+                      readOnly: promptLoading,
+                    })}
+                    size={ButtonSize.Medium}
+                    variant={
+                      promptLoading
+                        ? ButtonVariant.Float
+                        : ButtonVariant.Primary
+                    }
+                    type="button"
+                    onClick={() => {
+                      handlePromptSubmit();
+                    }}
+                  >
+                    {promptLoading
+                      ? animatedPromptLoadingLabel
+                      : 'Start swiping'}
+                  </Button>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+      </SwipeOnboardingViewport>
     );
   }
 
-  return (
-    <div className="flex min-h-dvh flex-col items-center justify-end bg-background-default px-4 pb-6 pt-2">
-      {onboardingUiMode === 'swipe' ? (
-        <HotAndColdModal
-          isOpen
-          showHeader={false}
-          showDefaultActions={false}
-          showAddHotTakeButton={false}
-          dismissedOnboardingCardIds={dismissedOnboardingCardIds}
-          onDismissedOnboardingCardsChange={setDismissedOnboardingCardIds}
-          onboardingFeedRefetching={isAdaptiveLoading}
-          onOnboardingFeedRetry={() => {
-            retryFetch();
-          }}
-          onSwipeAction={(direction, meta) => {
-            handleSwipeInteraction(direction, meta);
-          }}
-          onboardingCards={adaptiveCards}
-          onboardingCardsLoading={isAdaptiveLoading}
-          headerSlot={
-            <div className="pointer-events-none flex w-full select-none items-center justify-between gap-2 px-4 py-2">
-              <Button
-                className="pointer-events-auto"
-                icon={<ArrowIcon className="-rotate-90" />}
-                size={ButtonSize.Small}
-                type="button"
-                variant={ButtonVariant.Tertiary}
-                onClick={() => {
-                  router.back();
-                }}
-              />
-              <Button
-                className="pointer-events-auto shrink-0"
-                size={ButtonSize.Small}
-                type="button"
-                variant={ButtonVariant.Tertiary}
-                onClick={() => {
-                  setOnboardingUiMode('tags');
-                }}
-              >
-                Use tags instead
-              </Button>
+  const tagsOnboardingContent = (
+    <div
+      className={classNames(
+        swipeOnboardingSurfaceClassName,
+        'flex min-h-0 min-w-0 flex-1 flex-col rounded-[1.75rem]',
+      )}
+    >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col items-center overflow-y-auto overflow-x-hidden px-4 pb-2 pt-6">
+          {isFeedSettingsLoading || !feedSettings ? (
+            <div className="flex flex-1 items-center justify-center py-10">
+              <Loader />
             </div>
-          }
-          topSlot={
-            <SwipeOnboardingProgressHeader
-              milestoneBurstKey={milestoneBurstKey}
-              progressCount={onboardingProgressCount}
+          ) : (
+            <EditTag
+              headline="Pick tags that are relevant to you"
+              headlineClassName="text-balance text-text-primary typo-title1"
             />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <HotAndColdModal
+      isOpen
+      className={swipeOnboardingModalShellClassName}
+      overlayClassName="supports-[backdrop-filter]:backdrop-blur-md"
+      showHeader={false}
+      showDefaultActions={false}
+      showAddHotTakeButton={false}
+      dismissedOnboardingCardIds={dismissedOnboardingCardIds}
+      onDismissedOnboardingCardsChange={setDismissedOnboardingCardIds}
+      onboardingActionLayout="sides"
+      onboardingCards={onboardingUiMode === 'swipe' ? adaptiveCards : undefined}
+      onboardingCardsLoading={
+        onboardingUiMode === 'swipe' ? isAdaptiveLoading : false
+      }
+      onboardingContent={
+        onboardingUiMode === 'tags' ? tagsOnboardingContent : undefined
+      }
+      onboardingFeedRefetching={isAdaptiveLoading}
+      onOnboardingFeedRetry={() => {
+        retryFetch();
+      }}
+      onSwipeAction={(direction, meta) => {
+        handleSwipeInteraction(direction, meta);
+      }}
+      headerSlot={
+        <SwipeOnboardingToolbar
+          actionLabel={
+            onboardingUiMode === 'swipe'
+              ? 'Use tags instead'
+              : 'Switch to swipe'
           }
-          bottomSlot={bottomContinueSlot}
-          onRequestClose={() => {
-            onComplete().catch(() => null);
+          onAction={() => {
+            setOnboardingUiMode((currentMode) =>
+              currentMode === 'swipe' ? 'tags' : 'swipe',
+            );
           }}
-        />
-      ) : (
-        <Modal
-          isOpen
-          className="tablet:!max-h-[calc(100vh-2rem)]"
-          onRequestClose={() => {
-            onComplete().catch(() => null);
+          onBack={() => {
+            router.back();
           }}
-          size={ModalSize.Small}
-        >
-          <Modal.Body className="flex min-h-0 w-full flex-1 flex-col overflow-hidden overflow-x-hidden bg-overlay-quaternary-onion !p-0 tablet:flex-none tablet:!overflow-x-visible">
-            <div className="pointer-events-none flex w-full shrink-0 select-none items-center justify-between gap-2 px-4 py-2">
-              <Button
-                className="pointer-events-auto"
-                icon={<ArrowIcon className="-rotate-90" />}
-                size={ButtonSize.Small}
-                type="button"
-                variant={ButtonVariant.Tertiary}
-                onClick={() => {
-                  router.back();
-                }}
-              />
-              <Button
-                className="pointer-events-auto shrink-0"
-                size={ButtonSize.Small}
-                type="button"
-                variant={ButtonVariant.Tertiary}
-                onClick={() => {
-                  setOnboardingUiMode('swipe');
-                }}
-              >
-                Switch to swipe
-              </Button>
-            </div>
-            <SwipeOnboardingProgressHeader
-              copyVariant="tags"
-              milestoneBurstKey={milestoneBurstKey}
-              progressCount={onboardingProgressCount}
-            />
-            <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-              <div className="flex min-h-0 min-w-0 flex-1 flex-col items-center overflow-y-auto overflow-x-hidden px-2 pb-2 pt-2 tablet:max-w-md tablet:self-center">
-                {isFeedSettingsLoading || !feedSettings ? (
-                  <div className="flex flex-1 items-center justify-center py-10">
-                    <Loader />
-                  </div>
-                ) : (
-                  <EditTag
-                    feedSettings={feedSettings}
-                    headline="Pick tags that are relevant to you"
-                  />
-                )}
-              </div>
-              {canContinue ? (
-                <div className="relative z-10 shrink-0 border-t border-border-subtlest-tertiary bg-overlay-quaternary-onion pb-safe-or-2 pt-3 shadow-2">
-                  {bottomContinueSlot}
-                </div>
-              ) : null}
-            </div>
-          </Modal.Body>
-        </Modal>
-      )}
-    </div>
+        />
+      }
+      topSlot={
+        <SwipeOnboardingProgressHeader
+          copyVariant={onboardingUiMode === 'tags' ? 'tags' : 'swipe'}
+          milestoneBurstKey={milestoneBurstKey}
+          progressCount={onboardingProgressCount}
+        />
+      }
+      bottomSlot={bottomContinueSlot}
+      onRequestClose={() => {
+        onComplete().catch(() => null);
+      }}
+    />
   );
 }