diff --git a/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx b/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
index b20f9f8c617..9fb96afdda6 100644
--- a/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
+++ b/packages/shared/src/components/ProfileMenu/sections/AccountSection.tsx
@@ -25,7 +25,7 @@ export const AccountSection = (): ReactElement => {
       icon: SettingsIcon,
     },
     {
-      title: 'Subscriptions',
+      title: 'Payment & Subscription',
       href: `${settingsUrl}/subscription`,
       icon: CreditCardIcon,
     },
diff --git a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
index 23e2cc32b2c..313d64b2be7 100644
--- a/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
+++ b/packages/shared/src/components/cards/common/SquadOptionsButton.tsx
@@ -27,6 +27,7 @@ import useFeedSettings from '../../../hooks/useFeedSettings';
 import { useShareOrCopyLink } from '../../../hooks/useShareOrCopyLink';
 import { LogEvent } from '../../../lib/log';
 import { plusUrl } from '../../../lib/constants';
+import { visibleOnGroupHover } from './common';
 
 interface SquadOptionsButtonProps {
   squad: Squad;
@@ -39,7 +40,7 @@ export function SquadOptionsButton({
 }: SquadOptionsButtonProps): ReactElement {
   const { openModal } = useLazyModal();
   const { user } = useAuthContext();
-  const { data: campaign } = useCampaignById(squad.flags.campaignId);
+  const { data: campaign } = useCampaignById(squad.flags?.campaignId ?? '');
   const isBooster = campaign && user?.id === campaign.user.id;
   const [, onShareOrCopy] = useShareOrCopyLink({
     link: squad.permalink,
@@ -57,7 +58,11 @@ export function SquadOptionsButton({
   const options = useMemo(() => {
     const blockAction = isSourceBlocked ? unblockSource : blockSource;
     const list: MenuItemProps[] = [
-      { label: 'Share via', icon: <ShareIcon />, action: onShareOrCopy },
+      {
+        label: 'Share via',
+        icon: <ShareIcon />,
+        action: () => onShareOrCopy(),
+      },
       {
         label: 'Hide',
         icon: <EyeIcon />,
@@ -81,7 +86,7 @@ export function SquadOptionsButton({
 
     if (isBooster) {
       list.unshift({
-        label: 'Manade Ad',
+        label: 'Manage ad',
         icon: <TrendingIcon />,
         action: () =>
           openModal({
@@ -110,7 +115,7 @@ export function SquadOptionsButton({
           variant={ButtonVariant.Tertiary}
           icon={<MenuIcon />}
           size={ButtonSize.Small}
-          className={classNames('invisible z-1 group-hover:visible', className)}
+          className={classNames(visibleOnGroupHover, 'z-1', className)}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
diff --git a/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx b/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
index 0f8e49352cb..d930163b7c3 100644
--- a/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
+++ b/packages/shared/src/components/cards/highlight/HighlightCardOptions.tsx
@@ -5,6 +5,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import { EyeCancelIcon, MenuIcon as KebabIcon, PinIcon } from '../../icons';
 import { MenuIcon } from '../../MenuIcon';
+import { visibleOnGroupHover } from '../common/common';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -70,10 +71,7 @@ const HighlightCardOptionsContent = ({
           variant={ButtonVariant.Tertiary}
           size={ButtonSize.Small}
           icon={<KebabIcon />}
-          className={classNames(
-            'invisible z-1 my-auto group-hover:visible',
-            className,
-          )}
+          className={classNames(visibleOnGroupHover, 'z-1 my-auto', className)}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
diff --git a/packages/shared/src/components/comments/CommentActionButtons.tsx b/packages/shared/src/components/comments/CommentActionButtons.tsx
index 39080de4568..5fd6d3f317e 100644
--- a/packages/shared/src/components/comments/CommentActionButtons.tsx
+++ b/packages/shared/src/components/comments/CommentActionButtons.tsx
@@ -12,6 +12,7 @@ import {
   FlagIcon,
   DownvoteIcon,
   AddUserIcon,
+  RemoveUserIcon,
   BlockIcon,
   GiftIcon,
   MenuIcon,
@@ -258,7 +259,7 @@ function CommentActionButtonsV1({
     const isFollowingUser = isFollowingContent(author?.contentPreference);
 
     commentOptions.push({
-      icon: <AddUserIcon />,
+      icon: isFollowingUser ? <RemoveUserIcon /> : <AddUserIcon />,
       label: `${isFollowingUser ? 'Unfollow' : 'Follow'} ${authorName}`,
       action: () => {
         const opts = {
diff --git a/packages/shared/src/components/comments/CommentActionButtons.v2.tsx b/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
index 53cd6e9f485..cbc4ecce6ee 100644
--- a/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
+++ b/packages/shared/src/components/comments/CommentActionButtons.v2.tsx
@@ -12,6 +12,7 @@ import {
   FlagIcon,
   DownvoteIcon,
   AddUserIcon,
+  RemoveUserIcon,
   BlockIcon,
   GiftIcon,
   MenuIcon,
@@ -258,7 +259,7 @@ export default function CommentActionButtons({
     const isFollowingUser = isFollowingContent(author?.contentPreference);
 
     commentOptions.push({
-      icon: <AddUserIcon />,
+      icon: isFollowingUser ? <RemoveUserIcon /> : <AddUserIcon />,
       label: `${isFollowingUser ? 'Unfollow' : 'Follow'} ${authorName}`,
       action: () => {
         const opts = {
diff --git a/packages/shared/src/components/feeds/MobileFeedActions.tsx b/packages/shared/src/components/feeds/MobileFeedActions.tsx
index 567d341fd1d..cf1085a8b10 100644
--- a/packages/shared/src/components/feeds/MobileFeedActions.tsx
+++ b/packages/shared/src/components/feeds/MobileFeedActions.tsx
@@ -66,6 +66,7 @@ export function MobileFeedActions(): ReactElement {
             <Button
               icon={<SettingsIcon />}
               variant={ButtonVariant.Tertiary}
+              className="shell-press"
               onClick={() => setIsMenuOpen(true)}
             />
             <RootPortal>
@@ -75,7 +76,7 @@ export function MobileFeedActions(): ReactElement {
               />
             </RootPortal>
             <Link href={`${webappUrl}${user.username}`} passHref>
-              <a>
+              <a className="shell-press">
                 <ProfilePictureWithIndicator user={user} />
               </a>
             </Link>
diff --git a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
index 02c3ed275d5..f2e160c5bd4 100644
--- a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
+++ b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
@@ -37,7 +37,7 @@ interface ChipItem {
 const GROUP_ORDER: ChipGroup[] = ['forYou', 'categories', 'rest'];
 
 const chipBaseClass =
-  'shrink-0 rounded-10 border px-2.5 py-1.5 font-bold transition-colors typo-callout';
+  'shell-press shrink-0 rounded-10 border px-2.5 py-1.5 font-bold typo-callout';
 const chipActiveClass =
   'border-border-subtlest-tertiary bg-surface-float text-text-primary hover:bg-surface-hover';
 const chipInactiveClass =
diff --git a/packages/shared/src/components/header/FeedExploreHeader.tsx b/packages/shared/src/components/header/FeedExploreHeader.tsx
index b52c13b45ca..6b763526613 100644
--- a/packages/shared/src/components/header/FeedExploreHeader.tsx
+++ b/packages/shared/src/components/header/FeedExploreHeader.tsx
@@ -133,6 +133,7 @@ export function FeedExploreHeader({
                 icon={<CalendarIcon size={IconSize.Medium} />}
                 selectedIndex={period}
                 options={periodTexts}
+                drawerProps={{ displayCloseButton: true }}
                 onChange={(_, index) => setPeriod(index)}
               />
             )}
diff --git a/packages/shared/src/components/notifications/NotificationItem.tsx b/packages/shared/src/components/notifications/NotificationItem.tsx
index cc70a88de81..aaabd2e585e 100644
--- a/packages/shared/src/components/notifications/NotificationItem.tsx
+++ b/packages/shared/src/components/notifications/NotificationItem.tsx
@@ -160,7 +160,7 @@ const NotificationOptionsButton = ({
           // Tertiary is the flat variant — transparent, no background or
           // border (Float carries a faint surface-float background).
           variant={ButtonVariant.Tertiary}
-          icon={<MenuIcon className="rotate-90" />}
+          icon={<MenuIcon />}
           size={ButtonSize.XSmall}
         />
       </DropdownMenuTrigger>
diff --git a/packages/shared/src/components/post/MobilePostFloatingBar.tsx b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
index 4f595daff2a..fb3ee45d774 100644
--- a/packages/shared/src/components/post/MobilePostFloatingBar.tsx
+++ b/packages/shared/src/components/post/MobilePostFloatingBar.tsx
@@ -121,6 +121,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Avocado}
         size={ButtonSize.Medium}
+        className="shell-press"
       >
         {upvoteCount > 0 && (
           <InteractionCounter className={counterClasses} value={upvoteCount} />
@@ -135,6 +136,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Ketchup}
         size={ButtonSize.Medium}
+        className="shell-press"
       />
       <QuaternaryButton
         id="mobile-comment-post-btn"
@@ -143,7 +145,7 @@ function MobilePostFloatingBarV1({
         onClick={() => onCommentClick(LogOrigin.PostCommentButton)}
         icon={<CommentIcon secondary={post.commented} />}
         size={ButtonSize.Medium}
-        className="btn-tertiary-blueCheese"
+        className="shell-press btn-tertiary-blueCheese"
       >
         {commentCount > 0 && (
           <InteractionCounter className={counterClasses} value={commentCount} />
@@ -157,7 +159,7 @@ function MobilePostFloatingBarV1({
           pressed: post.bookmarked,
           onClick: onToggleBookmark,
           size: ButtonSize.Medium,
-          className: 'btn-tertiary-bun',
+          className: 'shell-press btn-tertiary-bun',
         }}
       />
       <QuaternaryButton
@@ -168,6 +170,7 @@ function MobilePostFloatingBarV1({
         variant={ButtonVariant.Tertiary}
         color={ButtonColor.Cabbage}
         size={ButtonSize.Medium}
+        className="shell-press"
       />
     </div>
   );
diff --git a/packages/shared/src/components/post/PostContent.tsx b/packages/shared/src/components/post/PostContent.tsx
index 385f490c703..0be30c3cc1b 100644
--- a/packages/shared/src/components/post/PostContent.tsx
+++ b/packages/shared/src/components/post/PostContent.tsx
@@ -200,7 +200,7 @@ export function PostContentRaw({
             />
           </div>
           <h1
-            className="break-words font-bold typo-large-title"
+            className="text-balance break-words font-bold typo-large-title"
             data-testid="post-modal-title"
           >
             <ArticleLink href={post.permalink} onClick={onReadArticle}>
diff --git a/packages/shared/src/components/post/collection/CollectionPostContent.tsx b/packages/shared/src/components/post/collection/CollectionPostContent.tsx
index 6d274674249..0045e87648f 100644
--- a/packages/shared/src/components/post/collection/CollectionPostContent.tsx
+++ b/packages/shared/src/components/post/collection/CollectionPostContent.tsx
@@ -159,7 +159,7 @@ export const CollectionPostContentRaw = ({
               />
             </div>
             <h1
-              className="break-words font-bold typo-large-title"
+              className="text-balance break-words font-bold typo-large-title"
               data-testid="post-modal-title"
             >
               {post.title}
diff --git a/packages/shared/src/components/post/focus/PostFocusCard.tsx b/packages/shared/src/components/post/focus/PostFocusCard.tsx
index f0162b2b825..606485b2b99 100644
--- a/packages/shared/src/components/post/focus/PostFocusCard.tsx
+++ b/packages/shared/src/components/post/focus/PostFocusCard.tsx
@@ -684,7 +684,7 @@ const PostFocusCardRaw = ({
                 <div className="flex min-w-0 flex-1 flex-col gap-4">
                   <h1
                     className={classNames(
-                      'break-words font-bold text-text-primary typo-title3 tablet:typo-title1',
+                      'text-balance break-words font-bold text-text-primary typo-title3 tablet:typo-title1',
                       // On the post page the reader came to read, so the title is
                       // always shown in full and the button flows below it; only
                       // the modal (a feed preview) clamps it.
diff --git a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
index 00e5d52a5d6..917856a648d 100644
--- a/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
+++ b/packages/shared/src/components/profile/ProfileSettingsMenu.tsx
@@ -99,7 +99,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
           title: null,
           items: {
             profile: {
-              title: 'Profile details',
+              title: 'Profile',
               icon: UserIcon,
               href: `${settingsUrl}/profile`,
             },
@@ -139,7 +139,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               href: `${settingsUrl}/composition`,
             },
             invite: {
-              title: 'Invite Friends',
+              title: 'Invite friends',
               icon: InviteIcon,
               href: `${settingsUrl}/invite`,
             },
@@ -199,7 +199,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               href: `${settingsUrl}/profile/experience/certification`,
             },
             openSource: {
-              title: 'Open Source',
+              title: 'Open source',
               icon: TerminalIcon,
               href: `${settingsUrl}/profile/experience/opensource`,
             },
@@ -227,7 +227,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
               },
             }),
             gamification: {
-              title: 'Feature visibility',
+              title: 'Streaks & gamification',
               icon: EyeIcon,
               href: `${settingsUrl}/customization/gamification`,
             },
@@ -275,7 +275,7 @@ const useAccountPageItems = ({ onClose }: { onClose?: () => void } = {}) => {
           title: 'Billing and Monetization',
           items: {
             subscription: {
-              title: 'Subscriptions',
+              title: 'Payment & Subscription',
               icon: CreditCardIcon,
               href: `${settingsUrl}/subscription`,
             },
diff --git a/packages/shared/src/components/shell/constants.ts b/packages/shared/src/components/shell/constants.ts
new file mode 100644
index 00000000000..e0950311a75
--- /dev/null
+++ b/packages/shared/src/components/shell/constants.ts
@@ -0,0 +1,8 @@
+// The numbers of the phone shell (Mobile UX review, chapter 10).
+export const swipe = {
+  lockDistance: 10,
+  commitDistance: 56,
+  coneRatio: 2,
+  velocity: 0.3,
+  velocityDistance: 32,
+};
diff --git a/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx b/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
index 0906f85fe9e..2678f908a63 100644
--- a/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
+++ b/packages/shared/src/components/sidebar/SidebarDesktopV2.tsx
@@ -599,7 +599,7 @@ const SidebarSettingsButton = (): ReactElement => {
 
   const billingItems: ProfileSectionItemProps[] = [
     {
-      title: 'Subscriptions',
+      title: 'Payment & Subscription',
       href: `${settingsUrl}/subscription`,
       icon: CreditCardIcon,
     },
diff --git a/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx b/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
index 20a0c411b21..be8abd91704 100644
--- a/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/SettingsPanelSection.tsx
@@ -58,7 +58,7 @@ export const SettingsPanelSection = ({
         key: 'main',
         items: [
           {
-            title: 'Profile details',
+            title: 'Profile',
             path: settingsDefaultPath,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <UserIcon secondary={active} />} />
@@ -109,7 +109,7 @@ export const SettingsPanelSection = ({
             ),
           },
           {
-            title: 'Invite Friends',
+            title: 'Invite friends',
             path: `${settingsUrl}/invite`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <InviteIcon secondary={active} />} />
@@ -191,7 +191,7 @@ export const SettingsPanelSection = ({
             ),
           },
           {
-            title: 'Open Source',
+            title: 'Open source',
             path: `${settingsUrl}/profile/experience/opensource`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <TerminalIcon secondary={active} />} />
@@ -220,7 +220,7 @@ export const SettingsPanelSection = ({
           {
             // The streak settings live on this same combined page, so there's
             // no separate "Streaks" entry.
-            title: 'Feature visibility',
+            title: 'Streaks & gamification',
             path: `${settingsUrl}/customization/gamification`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <EyeIcon secondary={active} />} />
@@ -253,7 +253,7 @@ export const SettingsPanelSection = ({
         title: 'Billing and Monetization',
         items: [
           {
-            title: 'Subscriptions',
+            title: 'Payment & Subscription',
             path: `${settingsUrl}/subscription`,
             icon: (active: boolean) => (
               <ListIcon Icon={() => <CreditCardIcon secondary={active} />} />
diff --git a/packages/shared/src/components/tabs/TabContainer.spec.tsx b/packages/shared/src/components/tabs/TabContainer.spec.tsx
index b8a7ddfb086..6bfbd46df0a 100644
--- a/packages/shared/src/components/tabs/TabContainer.spec.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, createEvent } from '@testing-library/react';
 import nock from 'nock';
 import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
@@ -206,3 +206,141 @@ describe('tab container component', () => {
     });
   });
 });
+
+describe('swipeable tab container', () => {
+  // react-swipeable reads event.timeStamp, which jsdom fills with real
+  // time; stamping it puts the velocity under the test's control.
+  const stamped = (
+    type: 'touchStart' | 'touchMove' | 'touchEnd',
+    element: HTMLElement,
+    x: number,
+    y: number,
+    at: number,
+  ) => {
+    const init =
+      type === 'touchEnd'
+        ? { changedTouches: [] }
+        : { touches: [{ clientX: x, clientY: y }] };
+    const event = createEvent[type](element, init);
+    Object.defineProperty(event, 'timeStamp', { value: at });
+    fireEvent(element, event);
+  };
+
+  const swipeOn = (
+    element: HTMLElement,
+    points: [number, number][],
+    durationMs: number,
+  ) => {
+    const [start, ...rest] = points;
+    stamped('touchStart', element, start[0], start[1], 1000);
+    rest.forEach(([x, y], index) =>
+      stamped(
+        'touchMove',
+        element,
+        x,
+        y,
+        1000 + (durationMs * (index + 1)) / rest.length,
+      ),
+    );
+    const [lastX, lastY] = points[points.length - 1];
+    stamped('touchEnd', element, lastX, lastY, 1000 + durationMs);
+  };
+
+  // A Tab without a className renders its children straight into the swipe
+  // surface, so the element holding the text is the surface itself.
+  const mountSwipeable = () => {
+    renderComponent({ swipeable: true });
+    return screen.getByText('Sample');
+  };
+
+  it('ignores a scroll that drifts sideways past the old threshold', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [96, 112],
+        [70, 180],
+        [55, 260],
+      ],
+      400,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
+
+  it('moves to the next tab on a slow swipe past the commit distance', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [200, 100],
+        [188, 101],
+        [160, 104],
+        [136, 108],
+      ],
+      600,
+    );
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(onActiveClick).toHaveBeenCalledWith('Second', undefined);
+  });
+
+  it('does nothing on a slow horizontal nudge that stops short', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [200, 100],
+        [188, 100],
+        [160, 100],
+      ],
+      600,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
+
+  it('moves to the previous tab on a short fast flick', () => {
+    renderComponent({ swipeable: true });
+    fireEvent.click(screen.getByText('Second'));
+    const surface = screen.getByText('Test');
+    onActiveClick.mockClear();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [112, 100],
+        [136, 101],
+      ],
+      50,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).toHaveBeenCalledWith('First', undefined);
+  });
+
+  it('ignores a fast diagonal flick that locked sideways', () => {
+    const surface = mountSwipeable();
+
+    swipeOn(
+      surface,
+      [
+        [100, 100],
+        [111, 108],
+        [125, 150],
+        [140, 190],
+      ],
+      100,
+    );
+
+    expect(screen.getByText('Sample')).toBeInTheDocument();
+    expect(onActiveClick).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/shared/src/components/tabs/TabContainer.tsx b/packages/shared/src/components/tabs/TabContainer.tsx
index 215ca7e7cb7..f284abfd847 100644
--- a/packages/shared/src/components/tabs/TabContainer.tsx
+++ b/packages/shared/src/components/tabs/TabContainer.tsx
@@ -9,6 +9,7 @@ import React, {
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import { useSwipeable } from 'react-swipeable';
+import { swipe } from '../shell/constants';
 import type { AllowedTabTags, TabListProps } from './TabList';
 import TabList from './TabList';
 import type { RenderTab } from './common';
@@ -163,11 +164,41 @@ export function TabContainer<T extends string = string>({
     [tabs, currentActive, labels, navigateToUrl, onActiveChange],
   );
 
+  // The axis locks on the first movement; only a horizontal gesture that
+  // stays inside the cone can change the tab, by distance or by speed.
+  const swipeAxis = useRef<'x' | 'y' | null>(null);
   const swipeHandlers = useSwipeable({
-    onSwipedLeft: () => navigateTab('next'),
-    onSwipedRight: () => navigateTab('previous'),
+    onSwipeStart: () => {
+      swipeAxis.current = null;
+    },
+    onSwiping: ({ absX, absY }) => {
+      if (swipeAxis.current || Math.max(absX, absY) < swipe.lockDistance) {
+        return;
+      }
+
+      swipeAxis.current = absX > absY ? 'x' : 'y';
+    },
+    onSwiped: ({ deltaX, absX, absY, velocity }) => {
+      const axis = swipeAxis.current;
+      swipeAxis.current = null;
+
+      if (axis !== 'x') {
+        return;
+      }
+
+      const inCone = absX > swipe.coneRatio * absY;
+      const farEnough = absX > swipe.commitDistance;
+      const fastEnough =
+        velocity > swipe.velocity && absX > swipe.velocityDistance;
+
+      if (!inCone || (!farEnough && !fastEnough)) {
+        return;
+      }
+
+      navigateTab(deltaX < 0 ? 'next' : 'previous');
+    },
     trackTouch: true,
-    delta: 40,
+    delta: swipe.lockDistance,
   });
 
   const isTabActive = ({
@@ -245,7 +276,12 @@ export function TabContainer<T extends string = string>({
         />
         {extraHeaderContent}
       </header>
-      <div {...(swipeable ? swipeHandlers : {})}>{render}</div>
+      <div
+        {...(swipeable ? swipeHandlers : {})}
+        className={classNames(swipeable && 'touch-pan-y touch-pinch-zoom')}
+      >
+        {render}
+      </div>
     </div>
   );
 }
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index bdcda8b9c34..37aa911d580 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -718,6 +718,7 @@ export enum TargetId {
   ReaderInstallPrompt = 'reader install prompt',
   ReaderPermissionPrompt = 'reader permission prompt',
   MobileFooter = 'mobile footer',
+  MobileFooterNav = 'mobile footer nav',
   MobileSheet = 'mobile sheet',
 }
 
diff --git a/packages/shared/src/styles/globals.css b/packages/shared/src/styles/globals.css
index cc4297ecf72..6e44e497182 100644
--- a/packages/shared/src/styles/globals.css
+++ b/packages/shared/src/styles/globals.css
@@ -8,3 +8,4 @@
 @import './utilities.css';
 
 @import './safeArea.css';
+@import './shell.css';
diff --git a/packages/shared/src/styles/shell.css b/packages/shared/src/styles/shell.css
new file mode 100644
index 00000000000..27aa4280744
--- /dev/null
+++ b/packages/shared/src/styles/shell.css
@@ -0,0 +1,17 @@
+/* Press feedback for the phone shell's tappable chrome. */
+.shell-press {
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  transition: 150ms ease-out;
+  transition-property: border-color, background-color, box-shadow, color, scale;
+}
+
+.shell-press:active {
+  scale: 0.96;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shell-press {
+    transition-duration: 0s;
+  }
+}
diff --git a/packages/webapp/__tests__/MobileFooterNavbar.tsx b/packages/webapp/__tests__/MobileFooterNavbar.tsx
new file mode 100644
index 00000000000..a65a25e7eb9
--- /dev/null
+++ b/packages/webapp/__tests__/MobileFooterNavbar.tsx
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import type { NextRouter } from 'next/router';
+import { useRouter } from 'next/router';
+import type { AuthContextData } from '@dailydotdev/shared/src/contexts/AuthContext';
+import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useNotificationContext } from '@dailydotdev/shared/src/contexts/NotificationsContext';
+import type { LoggedUser } from '@dailydotdev/shared/src/lib/user';
+import MobileFooterNavbar from '../components/footer/MobileFooterNavbar';
+
+const mockLogEvent = jest.fn();
+
+jest.mock('@dailydotdev/shared/src/contexts/LogContext', () => ({
+  useLogContext: () => ({ logEvent: mockLogEvent }),
+}));
+
+jest.mock('@dailydotdev/shared/src/contexts/NotificationsContext', () => ({
+  useNotificationContext: jest.fn(),
+}));
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+
+const user = { id: 'u1', username: 'ido' } as LoggedUser;
+
+const renderNavbar = () =>
+  render(
+    <AuthContext.Provider
+      value={{ user, squads: [] } as unknown as AuthContextData}
+    >
+      <MobileFooterNavbar />
+    </AuthContext.Provider>,
+  );
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  jest.mocked(useRouter).mockReturnValue({
+    pathname: '/',
+    asPath: '/',
+    query: {},
+  } as unknown as NextRouter);
+  jest.mocked(useNotificationContext).mockReturnValue({
+    unreadCount: 3,
+  } as unknown as ReturnType<typeof useNotificationContext>);
+});
+
+describe('MobileFooterNavbar', () => {
+  it('logs a click per tab with the footer as the target', () => {
+    renderNavbar();
+
+    fireEvent.click(screen.getByText('Explore'));
+
+    expect(mockLogEvent).toHaveBeenCalledWith({
+      event_name: 'click',
+      target_id: 'mobile footer nav',
+      extra: JSON.stringify({ tab: 'explore', logged_in: true }),
+    });
+  });
+
+  it('logs the notification icon click from the footer with the unread count', () => {
+    renderNavbar();
+
+    fireEvent.click(screen.getByText('Activity'));
+
+    expect(mockLogEvent).toHaveBeenCalledWith({
+      event_name: 'click notification icon',
+      target_id: 'footer',
+      extra: JSON.stringify({ notifications_number: 3 }),
+    });
+  });
+});
diff --git a/packages/webapp/components/footer/FooterNavBarTabs.tsx b/packages/webapp/components/footer/FooterNavBarTabs.tsx
index 159b5df0e3b..2a4b70d6280 100644
--- a/packages/webapp/components/footer/FooterNavBarTabs.tsx
+++ b/packages/webapp/components/footer/FooterNavBarTabs.tsx
@@ -24,26 +24,26 @@ const Tab = ({ tab, isActive }: TabProps) => {
         href={
           !user && tab.requiresLogin
             ? '/onboarding'
-            : getNavPath(tab.path, user)
+            : getNavPath(tab.path, user) ?? '/'
         }
         passHref
       >
         <a
           className={classNames(
-            'flex flex-col items-center justify-center',
+            'shell-press flex flex-col items-center justify-center',
             !isActive && 'text-text-tertiary',
           )}
           onClick={tab.onClick}
           role="link"
           tabIndex={0}
           onKeyDown={(e) => {
-            if ((e.key === 'Enter' || e.key === ' ') && tab.onClick) {
+            if (e.key === ' ') {
               e.preventDefault();
-              tab.onClick();
+              e.currentTarget.click();
             }
           }}
         >
-          {tab.icon(isActive)}
+          {tab.icon?.(!!isActive)}
           <span className="typo-caption2">{tab.title}</span>
         </a>
       </Link>
diff --git a/packages/webapp/components/footer/FooterPlusButton.tsx b/packages/webapp/components/footer/FooterPlusButton.tsx
index d34bdb37d1b..21a22631701 100644
--- a/packages/webapp/components/footer/FooterPlusButton.tsx
+++ b/packages/webapp/components/footer/FooterPlusButton.tsx
@@ -61,7 +61,7 @@ export function FooterPlusButton({
         icon={<PlusIcon />}
         variant={ButtonVariant.Primary}
         className={classNames(
-          'border border-border-subtlest-tertiary',
+          'shell-press border border-border-subtlest-tertiary',
           className,
         )}
       />
diff --git a/packages/webapp/components/footer/MobileFooterNavbar.tsx b/packages/webapp/components/footer/MobileFooterNavbar.tsx
index 05ef58dc9b2..b102dd0a7a2 100644
--- a/packages/webapp/components/footer/MobileFooterNavbar.tsx
+++ b/packages/webapp/components/footer/MobileFooterNavbar.tsx
@@ -19,6 +19,12 @@ import { getFeedName } from '@dailydotdev/shared/src/lib/feed';
 import { useNotificationContext } from '@dailydotdev/shared/src/contexts/NotificationsContext';
 import { Bubble } from '@dailydotdev/shared/src/components/tooltips/utils';
 import { getUnreadText } from '@dailydotdev/shared/src/components/notifications/utils';
+import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
+import {
+  LogEvent,
+  NotificationTarget,
+  TargetId,
+} from '@dailydotdev/shared/src/lib/log';
 import type { FooterTab } from './common';
 import { blurClasses } from './common';
 import { FooterNavBarTabs } from './FooterNavBarTabs';
@@ -58,8 +64,17 @@ const MobileFooterNavbar = (): ReactElement => {
   const squadsUrl = hasSquads
     ? squadCategoriesPaths['My Squads']
     : squadCategoriesPaths.discover;
+  const { logEvent } = useLogContext();
+  const { unreadCount } = useNotificationContext();
 
   const tabs: (FooterTab | ReactNode)[] = useMemo(() => {
+    const logTabClick = (tab: string) =>
+      logEvent({
+        event_name: LogEvent.Click,
+        target_id: TargetId.MobileFooterNav,
+        extra: JSON.stringify({ tab, logged_in: !!user }),
+      });
+
     return [
       {
         requiresLogin: true,
@@ -68,6 +83,7 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <HomeIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('home'),
       },
       {
         requiresLogin: false,
@@ -76,6 +92,7 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <AiIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('explore'),
       },
       {
         requiresLogin: false,
@@ -84,12 +101,19 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <MegaphoneIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('headlines'),
       },
       {
         requiresLogin: true,
         path: '/notifications',
         title: 'Activity',
         icon: (active: boolean) => <Notifications active={active} />,
+        onClick: () =>
+          logEvent({
+            event_name: LogEvent.ClickNotificationIcon,
+            target_id: NotificationTarget.Footer,
+            extra: JSON.stringify({ notifications_number: unreadCount }),
+          }),
       },
       {
         path: squadsUrl,
@@ -97,9 +121,10 @@ const MobileFooterNavbar = (): ReactElement => {
         icon: (active: boolean) => (
           <SourceIcon secondary={active} size={IconSize.Medium} />
         ),
+        onClick: () => logTabClick('squads'),
       },
     ];
-  }, [squadsUrl]);
+  }, [logEvent, squadsUrl, unreadCount, user]);
 
   const activeTab = useMemo(() => {
     const tabTitles = new Set(
diff --git a/packages/webapp/components/footer/common.ts b/packages/webapp/components/footer/common.ts
index 995354d3e35..180011a159a 100644
--- a/packages/webapp/components/footer/common.ts
+++ b/packages/webapp/components/footer/common.ts
@@ -17,13 +17,13 @@ export interface FooterNavBarContainerProps {
 
 export const getNavPath = (
   path: FooterTab['path'],
-  user: LoggedUser,
+  user?: LoggedUser,
 ): string | undefined => {
   if (typeof path === 'string') {
     return path;
   }
 
-  return path?.(user);
+  return user ? path?.(user) : undefined;
 };
 
 export const blurClasses = 'bg-blur-baseline backdrop-blur-[2.5rem]';
diff --git a/packages/webapp/components/layouts/FooterNavBarLayout.tsx b/packages/webapp/components/layouts/FooterNavBarLayout.tsx
index 296d7a68af3..54af2487021 100644
--- a/packages/webapp/components/layouts/FooterNavBarLayout.tsx
+++ b/packages/webapp/components/layouts/FooterNavBarLayout.tsx
@@ -1,7 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
-import React, { useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
-import ProgressiveEnhancementContext from '@dailydotdev/shared/src/contexts/ProgressiveEnhancementContext';
 import { useViewSize, ViewSize } from '@dailydotdev/shared/src/hooks';
 import type { Post } from '@dailydotdev/shared/src/graphql/posts';
 import {
@@ -36,10 +35,14 @@ export default function FooterNavBarLayout({
   children,
   post,
 }: FooterNavBarLayoutProps): ReactElement {
-  const { windowLoaded } = useContext(ProgressiveEnhancementContext);
   const isMobile = useViewSize(ViewSize.MobileL);
+  const [hasHydrated, setHasHydrated] = useState(false);
 
-  const showNav = windowLoaded && isMobile;
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const showNav = hasHydrated && isMobile;
 
   return (
     <MobileAppFooterProvider>