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..c1d824c7e5a 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,88 @@ 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 : undefined
+          }
+        >
+          {!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}
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..fd8fd68a267 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,7 +1996,7 @@ const HotAndColdModal = ({
     [
       currentTake,
       currentOnboardingCard,
-      isOnboardingMode,
+      hasOnboardingCards,
       isAnimating,
       startDismissAnimation,
       toggleDownvote,
@@ -1913,7 +2010,7 @@ const HotAndColdModal = ({
 
   const handleSkip = useCallback(
     (source: 'swipe' | 'button' = 'button') => {
-      const currentItemId = isOnboardingMode
+      const currentItemId = hasOnboardingCards
         ? currentOnboardingCard?.id
         : currentTake?.id;
 
@@ -1944,7 +2041,7 @@ const HotAndColdModal = ({
       cancelHotTakeVote,
       currentTake,
       currentOnboardingCard,
-      isOnboardingMode,
+      hasOnboardingCards,
       isAnimating,
       startDismissAnimation,
       logEvent,
@@ -1953,7 +2050,7 @@ const HotAndColdModal = ({
     ],
   );
 
-  const currentCardId = isOnboardingMode
+  const currentCardId = hasOnboardingCards
     ? currentOnboardingCard?.id
     : currentTake?.id;
   const isCurrentTakeAnimating =
@@ -1962,11 +2059,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 +2133,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 +2204,7 @@ const HotAndColdModal = ({
       )}
     </div>
   );
+  const showOnboardingSideActions = onboardingActionLayout === 'sides';
 
   return (
     <Modal
@@ -2121,10 +2219,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 +2249,145 @@ 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>
-                {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"
-                    />
+                {hasOnboardingContent ? (
+                  onboardingContent
+                ) : 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>
+                  </>
                 )}
                 {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>
+            </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..a7281a622f0 100644
--- a/packages/shared/src/components/onboarding/EditTag.tsx
+++ b/packages/shared/src/components/onboarding/EditTag.tsx
@@ -1,5 +1,6 @@
 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';
@@ -11,10 +12,12 @@ 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 +34,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/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/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/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..9d26cc34a9d 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';
 
@@ -17,10 +19,28 @@ const BATCH_SIZE = 8;
 function toSwipeCard(post: PostSummary): OnboardingSwipeCard {
   return {
     id: post.post_id,
+    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.post_id,
+    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;
@@ -87,16 +108,24 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
         saturated_tags: getSaturatedTags(),
         n,
       });
-      const posts = result.posts;
-      for (const p of posts) {
+      const { posts } = result;
+      posts.forEach((p) => {
         seenIdsRef.current.add(p.post_id);
         postLookupRef.current.set(p.post_id, 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
@@ -133,11 +164,11 @@ export function useAdaptiveSwipeDeck(): AdaptiveSwipeDeck {
           saturated_tags: getSaturatedTags(),
           n: BATCH_SIZE,
         });
-        const posts = result.posts;
-        for (const p of posts) {
+        const { posts } = result;
+        posts.forEach((p) => {
           seenIdsRef.current.add(p.post_id);
           postLookupRef.current.set(p.post_id, 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/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/pages/onboarding/swipe.tsx b/packages/webapp/pages/onboarding/swipe.tsx
index ac9ea863686..f4ccda8557b 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,
@@ -205,19 +357,31 @@ function SwipeOnboardingPage(): ReactElement {
         setSwipesCount((value) => value + 1);
         if (meta?.onboardingCardId) {
           handleAdaptiveSwipe(direction, meta.onboardingCardId);
+          if (direction === 'right') {
+            const bookmarkPost = getBookmarkablePost(meta.onboardingCardId);
+            if (bookmarkPost) {
+              toggleBookmark({
+                post: bookmarkPost,
+                origin: Origin.Onboarding,
+                disableToast: true,
+              }).catch(() => null);
+            }
+          }
         }
       }
     },
-    [handleAdaptiveSwipe],
+    [getBookmarkablePost, handleAdaptiveSwipe, toggleBookmark],
   );
 
   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 +391,7 @@ function SwipeOnboardingPage(): ReactElement {
         variant: ButtonVariant.Primary,
       },
     }),
-    [],
+    [hasIncompleteSocialSignup],
   );
   useEffect(() => {
     if (onboardingUiMode !== 'tags') {
@@ -287,15 +451,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 +498,193 @@ 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
+              feedSettings={feedSettings}
+              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);
+      }}
+    />
   );
 }