diff --git a/apps/web/app/space/[id]/(space)/layout.tsx b/apps/web/app/space/[id]/(space)/layout.tsx
index 4f1254f831..cc8223bf61 100644
--- a/apps/web/app/space/[id]/(space)/layout.tsx
+++ b/apps/web/app/space/[id]/(space)/layout.tsx
@@ -23,7 +23,7 @@ import { Spacer } from '~/design-system/spacer';
 import { EditableSpaceHeading } from '~/partials/entity-page/editable-space-header';
 import { EntityPageCover } from '~/partials/entity-page/entity-page-cover';
 import { EntityPageInlineDescription } from '~/partials/entity-page/entity-page-inline-description';
-import { ENTITY_PAGE_WITH_SIDEBAR_MAX_WIDTH } from '~/partials/entity-page/entity-page-layout';
+import { ENTITY_PAGE_WITH_SIDEBAR_MAX_WIDTH, PROFILE_COVER_SIZE } from '~/partials/entity-page/entity-page-layout';
 import { PersonalProfileBioStarterMerge } from '~/partials/entity-page/personal-profile-bio-starter-merge';
 import { PersonalProfileSuggestedCard } from '~/partials/entity-page/personal-profile-suggested-card';
 import { PersonalProfileSuggestedTaskSync } from '~/partials/entity-page/personal-profile-suggested-task-sync';
@@ -132,6 +132,7 @@ export default async function Layout(props0: LayoutProps) {
             avatarUrl={props.avatarUrl}
             coverUrl={props.coverUrl}
             contentMaxWidth={isProfile ? ENTITY_PAGE_WITH_SIDEBAR_MAX_WIDTH : undefined}
+            coverSize={isProfile ? PROFILE_COVER_SIZE : undefined}
           />
           <SpaceHeaderContentGate
             serverHasSidebar={hasSidebar}
@@ -164,7 +165,7 @@ export default async function Layout(props0: LayoutProps) {
                 }
               />
               {isProfile && <PersonalSpaceHeadline spaceId={spaceId} personEntityId={props.id} />}
-              <EntityPageInlineDescription entityId={props.id} spaceId={spaceId} />
+              <EntityPageInlineDescription entityId={props.id} spaceId={spaceId} hideWhenReading={isProfile} />
               {/*
                * A profile renders none of this row. Types move to the rail's
                * About section, the vote pair into the action row beside Edit
@@ -190,7 +191,9 @@ export default async function Layout(props0: LayoutProps) {
               />
             </div>
 
-            <div className="mt-6 flex flex-col gap-6">
+            {/* 40px above the tab bar on a profile, 24px elsewhere. The description's
+                own 20px bottom margin collapses into this one, so this is the gap. */}
+            <div className={isProfile ? 'mt-10 flex flex-col gap-6' : 'mt-6 flex flex-col gap-6'}>
               <AddDataPanel spaceId={spaceId} />
 
               {typeIds.includes(SystemIds.PERSON_TYPE) ? (
diff --git a/apps/web/core/claims/browse/claim-page-view.tsx b/apps/web/core/claims/browse/claim-page-view.tsx
index cc70698fc5..8d73469d58 100644
--- a/apps/web/core/claims/browse/claim-page-view.tsx
+++ b/apps/web/core/claims/browse/claim-page-view.tsx
@@ -155,9 +155,7 @@ export function ClaimPageView({
   };
   // Matches profile record tabs: unknown/error stays reachable, while a settled zero disappears.
   const hasDebates = hasRecordToShow(
-    record.debatesLoading || record.debatesError || record.debatesCountUnavailable
-      ? undefined
-      : record.debatesTotal
+    record.debatesLoading || record.debatesError || record.debatesCountUnavailable ? undefined : record.debatesTotal
   );
   const hasClaims = hasRecordToShow(
     record.claimsLoading || record.claimsError || record.claimsCountUnavailable ? undefined : record.claimsTotal
@@ -347,7 +345,7 @@ function ClaimTabPanel({
       isError: record.debatesError,
       isCountUnavailable: record.debatesCountUnavailable,
       href: hrefs.debates,
-      seeAllLabel: 'See all debates',
+      seeAllLabel: 'View all debates',
       onSeeAll: onSelectSystemTab ? () => onSelectSystemTab('debates') : undefined,
     },
     {
@@ -359,7 +357,7 @@ function ClaimTabPanel({
       isError: record.claimsError,
       isCountUnavailable: record.claimsCountUnavailable,
       href: hrefs.claims,
-      seeAllLabel: 'See all claims',
+      seeAllLabel: 'View all claims',
       onSeeAll: onSelectSystemTab ? () => onSelectSystemTab('claims') : undefined,
     },
   ];
diff --git a/apps/web/core/debates/browse/debate-feed-player.tsx b/apps/web/core/debates/browse/debate-feed-player.tsx
index 143aa60370..f5034b82c7 100644
--- a/apps/web/core/debates/browse/debate-feed-player.tsx
+++ b/apps/web/core/debates/browse/debate-feed-player.tsx
@@ -36,12 +36,7 @@ type DebateFeedPlayerProps = {
   preload?: boolean;
 };
 
-export function DebateFeedPlayer({
-  debate,
-  active,
-  preload = false,
-  reducedOverlays = false,
-}: DebateFeedPlayerProps) {
+export function DebateFeedPlayer({ debate, active, preload = false, reducedOverlays = false }: DebateFeedPlayerProps) {
   // Loading is deliberately wider than playing. `useDebatePlayback`'s flag gates only the URL
   // fetch and the transcript query — playback is driven by `active` in the effect below — so a
   // preloading card fetches without autoplaying off-screen.
@@ -324,7 +319,8 @@ export function DebateFeedPlayer({
       data-debate-autoplay-blocked={autoplayBlocked ? 'true' : 'false'}
       // No gap and one radius on the outside: the two tiles are a single surface in the Figma
       // frame, which is what lets the subtitle straddle the seam rather than sit inside one tile.
-      className="group relative flex flex-col overflow-hidden rounded-xl"
+      // 12px in the compact gallery (a profile's or claim's Activity), 16px in the feeds.
+      className={cx('group relative flex flex-col overflow-hidden', reducedOverlays ? 'rounded-lg' : 'rounded-xl')}
     >
       <DebaterVideo
         participant={slot1Participant}
diff --git a/apps/web/core/wallet/wallet.tsx b/apps/web/core/wallet/wallet.tsx
index f6567053ea..ff7b1e0ace 100644
--- a/apps/web/core/wallet/wallet.tsx
+++ b/apps/web/core/wallet/wallet.tsx
@@ -5,7 +5,7 @@ import { createGeoWalletConfig, createMockConfig } from '@geogenesis/auth/wallet
 
 import * as React from 'react';
 
-import { Button } from '~/design-system/button';
+import { Button, PILL_BUTTON_CLASS_NAME } from '~/design-system/button';
 
 import { trackPrivyAuth } from '../analytics';
 import { Environment } from '../environment';
@@ -73,11 +73,7 @@ function PrivyConnectButton() {
   };
 
   return (
-    <Button
-      variant="primary"
-      className="h-7 shrink-0 !gap-0 !rounded-full !border-transparent !bg-[#151515] !px-2.5 !py-0 !text-[16px] !leading-[13px] font-normal tracking-[-0.35px] whitespace-nowrap !text-white !shadow-none hover:!bg-[#151515] focus-visible:!border-text focus-visible:!shadow-inner-text"
-      onClick={onLogin}
-    >
+    <Button variant="primary" className={PILL_BUTTON_CLASS_NAME} onClick={onLogin}>
       Log in
     </Button>
   );
diff --git a/apps/web/design-system/button.tsx b/apps/web/design-system/button.tsx
index 3b029da6cb..7fc3459495 100644
--- a/apps/web/design-system/button.tsx
+++ b/apps/web/design-system/button.tsx
@@ -16,7 +16,27 @@ type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
   small?: boolean;
 };
 
-const buttonClassNames = (className = '') =>
+/** The pill's shape and type, shared by both of its colourings below. */
+const PILL_BUTTON_SHAPE =
+  'h-7 shrink-0 !gap-0 !rounded-full !px-2.5 !py-0 !text-[16px] !leading-[13px] font-normal tracking-[-0.35px] whitespace-nowrap !shadow-none';
+
+/**
+ * The black pill: the navbar's Log in button.
+ * Layered over the `primary` variant, whose colours it overrides.
+ */
+export const PILL_BUTTON_CLASS_NAME = `${PILL_BUTTON_SHAPE} !border-transparent !bg-[#151515] !text-white hover:!bg-[#151515] focus-visible:!border-text focus-visible:!shadow-inner-text`;
+
+/**
+ * The same pill in the `secondary` variant's colours — white, a grey outline that
+ * darkens on hover. Layered over `secondary`, which supplies those colours.
+ */
+export const PILL_BUTTON_SECONDARY_CLASS_NAME = PILL_BUTTON_SHAPE;
+
+/**
+ * The button's classes on their own, for a link that should look like one. A
+ * `<Button>` inside a `<Link>` nests two interactive elements.
+ */
+export const buttonClassNames = (className = '') =>
   cva(
     `relative inline-flex items-center justify-center rounded border font-medium tracking-[-0.17px] shadow-light transition duration-200 ease-in-out focus:outline-hidden ${className}`,
     {
diff --git a/apps/web/design-system/clamped-text.tsx b/apps/web/design-system/clamped-text.tsx
index 3a93f2afa6..52b7a8feed 100644
--- a/apps/web/design-system/clamped-text.tsx
+++ b/apps/web/design-system/clamped-text.tsx
@@ -40,6 +40,12 @@ type ClampedTextProps = {
    * description and its skills.
    */
   label?: string;
+  /**
+   * Where More and Less sit. `inline` (the default) puts More over the end of the last line, which
+   * costs every line a gutter; `below` gives the text its full width and puts the toggle on a line
+   * of its own under it.
+   */
+  togglePlacement?: 'inline' | 'below';
 };
 
 // No type of its own: the toggle takes the variant of the text it belongs to, so
@@ -115,6 +121,7 @@ export function ClampedText({
   variant = 'body',
   textClassName = '',
   label,
+  togglePlacement = 'inline',
 }: ClampedTextProps) {
   assertSupportedMaxLines(maxLines);
 
@@ -148,9 +155,34 @@ export function ClampedText({
 
   const showToggle = isOverflowing;
   const clamp = !expanded;
-  const reserveToggle = showToggle && clamp;
+  const isBelow = togglePlacement === 'below';
+  const reserveToggle = showToggle && clamp && !isBelow;
   const typeClassName = textStyles[variant];
 
+  if (isBelow) {
+    return (
+      <div ref={wrapperRef} className="box-border w-full min-w-0">
+        <Tag
+          ref={textRef as React.Ref<never>}
+          className={cx(typeClassName, textClassName, clamp && LINE_CLAMP_CLASS[maxLines])}
+        >
+          {text}
+        </Tag>
+        {showToggle && (
+          <button
+            type="button"
+            onClick={() => setExpanded(value => !value)}
+            aria-expanded={expanded}
+            aria-label={label ? `Show ${expanded ? 'less' : 'more'} ${label}` : undefined}
+            className={cx(typeClassName, TOGGLE_CLASS, 'mt-1 block')}
+          >
+            {expanded ? 'Less' : 'More'}
+          </button>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div ref={wrapperRef} className={cx('relative box-border w-full min-w-0', reserveToggle && TOGGLE_GUTTER_CLASS)}>
       <Tag
diff --git a/apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx b/apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx
index 4a7befa912..c42773d6ec 100644
--- a/apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx
+++ b/apps/web/partials/entity-page/editable-entity-cover-avatar-header.tsx
@@ -34,18 +34,17 @@ const COVER_PLACEHOLDER_HEIGHT = 120;
 const AVATAR_OVERFLOW = 40;
 const TRANSITION = { duration: 0.15, ease: 'easeInOut' as const };
 
-// maxWidth is always ENTITY_PAGE_COVER_MAX_WIDTH so the wrapper never animates horizontally.
-// When there's no cover the extra width is invisible (height is 0 or 40).
-function computeLayout(hasCover: boolean, hasCoverImage: boolean, hasAvatar: boolean) {
+type CoverSize = { maxWidth: number; height: number };
+
+const DEFAULT_COVER_SIZE: CoverSize = { maxWidth: ENTITY_PAGE_COVER_MAX_WIDTH, height: COVER_IMAGE_HEIGHT };
+
+// maxWidth is fixed for a page (ENTITY_PAGE_COVER_MAX_WIDTH unless the caller passes its own) so
+// the wrapper never animates horizontally. When there's no cover the extra width is invisible
+// (height is 0 or 40).
+function computeLayout(hasCover: boolean, hasCoverImage: boolean, hasAvatar: boolean, coverSize: CoverSize) {
   return {
-    height: hasCover
-      ? hasCoverImage
-        ? COVER_IMAGE_HEIGHT
-        : COVER_PLACEHOLDER_HEIGHT
-      : hasAvatar
-        ? AVATAR_OVERFLOW
-        : 0,
-    maxWidth: ENTITY_PAGE_COVER_MAX_WIDTH,
+    height: hasCover ? (hasCoverImage ? coverSize.height : COVER_PLACEHOLDER_HEIGHT) : hasAvatar ? AVATAR_OVERFLOW : 0,
+    maxWidth: coverSize.maxWidth,
     marginBottom: hasCover ? (hasAvatar ? 80 : 32) : hasAvatar ? 64 : 0,
     marginTop: hasCover ? -24 : 0,
   };
@@ -54,6 +53,7 @@ function computeLayout(hasCover: boolean, hasCoverImage: boolean, hasAvatar: boo
 export const EditableCoverAvatarHeader = ({
   avatarUrl,
   contentMaxWidth = ENTITY_PAGE_CONTENT_MAX_WIDTH,
+  coverSize = DEFAULT_COVER_SIZE,
   coverUrl,
   compact = false,
   withAvatar = false,
@@ -66,6 +66,8 @@ export const EditableCoverAvatarHeader = ({
    * — a profile — passes the wider with-sidebar width instead.
    */
   contentMaxWidth?: number;
+  /** How wide the cover can grow and how tall its image is. A profile passes its own. */
+  coverSize?: CoverSize;
   /** Responsive inline padding inside the aligned content column. */
   contentInsetClassName?: string;
   coverUrl: string | null;
@@ -143,8 +145,8 @@ export const EditableCoverAvatarHeader = ({
     );
   }
 
-  const layout = computeLayout(hasCover, hasCoverImage, hasAvatar);
-  const coverHeight = hasCoverImage ? COVER_IMAGE_HEIGHT : COVER_PLACEHOLDER_HEIGHT;
+  const layout = computeLayout(hasCover, hasCoverImage, hasAvatar, coverSize);
+  const coverHeight = hasCoverImage ? coverSize.height : COVER_PLACEHOLDER_HEIGHT;
   const mobileCoverHeightClass = hasCoverImage ? MOBILE_COVER_IMAGE_HEIGHT_CLASS : '';
   const mobileCoverAvatarMarginClass = hasCoverImage && hasAvatar ? MOBILE_COVER_AVATAR_MARGIN_CLASS : '';
 
diff --git a/apps/web/partials/entity-page/entity-page-cover.tsx b/apps/web/partials/entity-page/entity-page-cover.tsx
index 12aea79a23..c51d6e5cf7 100644
--- a/apps/web/partials/entity-page/entity-page-cover.tsx
+++ b/apps/web/partials/entity-page/entity-page-cover.tsx
@@ -18,6 +18,8 @@ type EntityPageCoverProps = {
   withAvatar?: boolean;
   /** Width of the text column below, so the avatar lines up with the name. */
   contentMaxWidth?: number;
+  /** How wide the cover can grow and how tall it is — see `EditableCoverAvatarHeader`. */
+  coverSize?: { maxWidth: number; height: number };
   /** Responsive inline padding inside that column, shared with the content below. */
   contentInsetClassName?: string;
 };
@@ -75,6 +77,7 @@ export const EntityPageCover = ({
   compact = false,
   withAvatar = false,
   contentMaxWidth,
+  coverSize,
   contentInsetClassName,
 }: EntityPageCoverProps) => {
   const { id, spaceId } = useEntityStoreInstance();
@@ -89,6 +92,7 @@ export const EntityPageCover = ({
       compact={compact}
       withAvatar={withAvatar}
       contentMaxWidth={contentMaxWidth}
+      coverSize={coverSize}
       contentInsetClassName={contentInsetClassName}
     />
   );
diff --git a/apps/web/partials/entity-page/entity-page-inline-description.tsx b/apps/web/partials/entity-page/entity-page-inline-description.tsx
index 4068219cbe..abd5604ef4 100644
--- a/apps/web/partials/entity-page/entity-page-inline-description.tsx
+++ b/apps/web/partials/entity-page/entity-page-inline-description.tsx
@@ -24,10 +24,13 @@ export function EntityPageInlineDescription({
   entityId,
   spaceId,
   fallbackDescription,
+  hideWhenReading = false,
 }: {
   entityId: string;
   spaceId: string;
   fallbackDescription?: string | null;
+  /** Shown only while editing. A profile reads its description in the rail's About section instead. */
+  hideWhenReading?: boolean;
 }) {
   const isEditing = useUserIsEditing(spaceId);
   const { storage } = useMutate();
@@ -80,7 +83,7 @@ export function EntityPageInlineDescription({
     );
   }
 
-  if (!description) {
+  if (!description || hideWhenReading) {
     return null;
   }
 
diff --git a/apps/web/partials/entity-page/entity-page-layout.ts b/apps/web/partials/entity-page/entity-page-layout.ts
index 7897c2cc3f..ef23e34283 100644
--- a/apps/web/partials/entity-page/entity-page-layout.ts
+++ b/apps/web/partials/entity-page/entity-page-layout.ts
@@ -1,6 +1,8 @@
 import type * as React from 'react';
 
 export const ENTITY_PAGE_COVER_MAX_WIDTH = 1192;
+/** A personal space profile's cover: 1200 × 300, a 4:1 banner. */
+export const PROFILE_COVER_SIZE = { maxWidth: 1200, height: 300 };
 export const ENTITY_PAGE_CONTENT_MAX_WIDTH = 900;
 export const ENTITY_PAGE_WITH_SIDEBAR_MAX_WIDTH = 1142;
 
diff --git a/apps/web/partials/entity-page/sticky-side-rail.tsx b/apps/web/partials/entity-page/sticky-side-rail.tsx
index 5f8d449a13..bb66fbde68 100644
--- a/apps/web/partials/entity-page/sticky-side-rail.tsx
+++ b/apps/web/partials/entity-page/sticky-side-rail.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import cx from 'classnames';
+
 /**
  * Sticky right-hand rail shared by Explore and space overview panels.
  *
@@ -16,12 +18,36 @@ import * as React from 'react';
  * `min()` applies that cap; `min-w` floors it, because a rail thinner than that stops being
  * readable. It is `shrink-0` so flexbox never takes it below that floor — past the floor the
  * rail is dropped outright by `lg:hidden` rather than shaved further.
+ *
+ * `flushTop` drops the top padding so the rail's first section lines up with the top of the
+ * column beside it. Without the padding, a stuck rail sits directly under the navbar.
+ *
+ * `divider` draws a vertical rule down the rail's left edge, in the tab bar's grey (`grey-02`), 20px
+ * from its content, running the rail's full height — which is the viewport's, less the navbar — so
+ * it reaches the bottom of the screen. The `before:` segment carries it up another 20px, across the
+ * `Spacer` a profile puts between its tab bar and this row, so the rule starts at the tab bar itself.
+ * The 20px is padding inside the scroller rather than on the rail, so a row whose hover background
+ * bleeds left of the content (the profile's Spaces list) is not clipped by `overflow-x-hidden`.
  */
-export function StickySideRail({ children }: { children: React.ReactNode }) {
+export function StickySideRail({
+  children,
+  flushTop = false,
+  divider = false,
+}: {
+  children: React.ReactNode;
+  flushTop?: boolean;
+  divider?: boolean;
+}) {
   return (
-    <aside className="sticky top-11 ml-8 flex h-[calc(100dvh-2.75rem)] w-[min(var(--width-side-rail),32%)] min-w-[var(--width-side-rail-min)] shrink-0 flex-col self-start lg:hidden">
+    <aside
+      className={cx(
+        'sticky top-11 ml-8 flex h-[calc(100dvh-2.75rem)] w-[min(var(--width-side-rail),32%)] min-w-[var(--width-side-rail-min)] shrink-0 flex-col self-start lg:hidden',
+        divider &&
+          "border-l border-grey-02 before:absolute before:-top-5 before:-left-px before:h-5 before:border-l before:border-grey-02 before:content-['']"
+      )}
+    >
       <div className="no-scrollbar min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain">
-        <div className="flex flex-col pt-5 pb-6">{children}</div>
+        <div className={cx('flex flex-col pb-6', !flushTop && 'pt-5', divider && 'pl-5')}>{children}</div>
       </div>
     </aside>
   );
diff --git a/apps/web/partials/profile/organization-image.tsx b/apps/web/partials/profile/organization-image.tsx
index 29db2280da..e184963eb4 100644
--- a/apps/web/partials/profile/organization-image.tsx
+++ b/apps/web/partials/profile/organization-image.tsx
@@ -14,8 +14,8 @@ import { FallbackImage } from '~/design-system/fallback-image';
  * gradient beam, which is a different picture for every organisation and reads
  * as a logo somebody chose rather than as the absence of one.
  */
-export function OrganizationImage({ url, size }: { url: string | null | undefined; size: 16 | 20 | 36 }) {
-  const box = size === 36 ? 'h-9 w-9 rounded' : size === 20 ? 'h-5 w-5 rounded-sm' : 'h-4 w-4 rounded-sm';
+export function OrganizationImage({ url, size }: { url: string | null | undefined; size: 16 | 20 | 50 }) {
+  const box = size === 50 ? 'h-[50px] w-[50px] rounded' : size === 20 ? 'h-5 w-5 rounded-sm' : 'h-4 w-4 rounded-sm';
 
   return (
     <span className={`relative shrink-0 overflow-hidden bg-grey-01 ${box}`}>
diff --git a/apps/web/partials/profile/personal-space-profile.tsx b/apps/web/partials/profile/personal-space-profile.tsx
index 169c304278..48f3207d36 100644
--- a/apps/web/partials/profile/personal-space-profile.tsx
+++ b/apps/web/partials/profile/personal-space-profile.tsx
@@ -161,7 +161,7 @@ function ProfileActivity({ spaceId, personEntityId }: { spaceId: string; personE
       isCountUnavailable: isFactsError,
       isError: debates.isError,
       href: `/space/${spaceId}/debates`,
-      seeAllLabel: 'See all debates',
+      seeAllLabel: 'View all debates',
     },
     {
       key: 'claims',
@@ -176,7 +176,7 @@ function ProfileActivity({ spaceId, personEntityId }: { spaceId: string; personE
       isCountUnavailable: isFactsError && responses.isError,
       isError: positions.isError,
       href: `/space/${spaceId}/positions`,
-      seeAllLabel: 'See all claims',
+      seeAllLabel: 'View all claims',
     },
   ];
 
diff --git a/apps/web/partials/profile/profile-activity-section.test.tsx b/apps/web/partials/profile/profile-activity-section.test.tsx
index 98790a86b5..a39cd70580 100644
--- a/apps/web/partials/profile/profile-activity-section.test.tsx
+++ b/apps/web/partials/profile/profile-activity-section.test.tsx
@@ -72,7 +72,7 @@ const kind = (over: Partial<React.ComponentProps<typeof ProfileActivitySection>[
   total: 10,
   isLoading: false,
   href: '/space/s/debates',
-  seeAllLabel: 'See all debates',
+  seeAllLabel: 'View all debates',
   ...over,
 });
 
@@ -247,6 +247,16 @@ describe('ProfileActivitySection', () => {
 
     expect(screen.getByRole('region', { name: 'Loading activity' })).toHaveAttribute('aria-busy', 'true');
     expect(screen.getByRole('heading', { name: 'Activity' })).toBeInTheDocument();
+    // No tabs to draw until a kind arrives.
+    expect(screen.queryByRole('button', { name: /Debates|Claims/ })).not.toBeInTheDocument();
+  });
+
+  it('titles the section Activity, with the kinds as pills beneath it', () => {
+    render(<ProfileActivitySection kinds={[kind(), kind({ key: 'claims', label: 'Claims' })]} />);
+
+    expect(screen.getByRole('heading', { name: 'Activity' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Debates/ })).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('button', { name: /Claims/ })).toHaveAttribute('aria-pressed', 'false');
   });
 
   it('shows a completed kind without waiting for the other kind', () => {
@@ -260,9 +270,7 @@ describe('ProfileActivitySection', () => {
 
   it('keeps the first available kind selected when an earlier kind finishes later', () => {
     const claims = kind({ key: 'claims', label: 'Claims', rows: [row('c1')] });
-    const { rerender } = render(
-      <ProfileActivitySection kinds={[kind({ rows: [], isLoading: true }), claims]} />
-    );
+    const { rerender } = render(<ProfileActivitySection kinds={[kind({ rows: [], isLoading: true }), claims]} />);
 
     expect(screen.getByTestId('card')).toHaveTextContent('c1');
 
@@ -428,7 +436,7 @@ describe('ProfileActivitySection', () => {
     expect(cards.every(card => card.parentElement?.className.includes('w-[min(300px,84cqw)]'))).toBe(true);
   });
 
-  it('offers left and right buttons to scroll one Activity card at a time', async () => {
+  it('offers left and right buttons in the header to scroll one Activity card at a time', async () => {
     render(<ProfileActivitySection kinds={[kind({ rows: [row('d1'), row('d2'), row('d3')] })]} />);
 
     const scroller = document.querySelector<HTMLElement>('.overflow-x-auto') as HTMLElement;
@@ -453,22 +461,25 @@ describe('ProfileActivitySection', () => {
     fireEvent.scroll(scroller);
     await act(async () => new Promise<void>(resolve => requestAnimationFrame(() => resolve())));
 
-    expect(screen.queryByRole('button', { name: 'Scroll activity left' })).toBeNull();
-    const next = screen.getByRole('button', { name: 'Scroll activity right' });
+    // Both arrows stay in the header once the row can scroll, so View all beside them never moves;
+    // the one pointing past an end is disabled instead.
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeDisabled();
+    const next = screen.getByRole('button', { name: 'Next page' });
+    expect(next).toBeEnabled();
     fireEvent.click(next);
     expect(scroller.scrollBy).toHaveBeenCalledWith({ left: 276, behavior: 'smooth' });
 
     scroller.scrollLeft = 300;
     fireEvent.scroll(scroller);
     await act(async () => new Promise<void>(resolve => requestAnimationFrame(() => resolve())));
-    expect(screen.getByRole('button', { name: 'Scroll activity left' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeEnabled();
 
     // The final card is fully visible here even though the trailing spacer means the rail itself
-    // still has a few scrollable pixels left. Those pixels should not keep the arrow around.
+    // still has a few scrollable pixels left. Those pixels should not keep the arrow live.
     scroller.scrollLeft = 512;
     fireEvent.scroll(scroller);
     await act(async () => new Promise<void>(resolve => requestAnimationFrame(() => resolve())));
-    expect(screen.queryByRole('button', { name: 'Scroll activity right' })).toBeNull();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
   });
 
   it('hands autoplay to the next visible debate when the current one scrolls out', async () => {
@@ -555,34 +566,34 @@ describe('ProfileActivitySection', () => {
     const onSeeAll = vi.fn();
     render(<ProfileActivitySection kinds={[kind({ onSeeAll })]} />);
 
-    const seeAll = screen.getByRole('button', { name: 'See all debates' });
-    expect(screen.queryByRole('link', { name: 'See all debates' })).not.toBeInTheDocument();
+    const seeAll = screen.getByRole('button', { name: 'View all debates' });
+    expect(screen.queryByRole('link', { name: 'View all debates' })).not.toBeInTheDocument();
 
     fireEvent.click(seeAll);
 
     expect(onSeeAll).toHaveBeenCalledOnce();
   });
 
-  it('sends See all to the tab bar rather than the top of the page', () => {
+  it('sends View all to the tab bar rather than the top of the page', () => {
     render(
       <ProfileActivitySection
         kinds={[
           kind(),
-          kind({ key: 'claims', label: 'Claims', href: '/space/s/positions', seeAllLabel: 'See all claims' }),
+          kind({ key: 'claims', label: 'Claims', href: '/space/s/positions', seeAllLabel: 'View all claims' }),
         ]}
       />
     );
 
     // Without the fragment the reader lands at the top of the profile — a screenful of cover,
     // avatar, name, roles and bio — rather than on the list they clicked for.
-    expect(screen.getByRole('link', { name: /See all debates/ })).toHaveAttribute(
+    expect(screen.getByRole('link', { name: /View all debates/ })).toHaveAttribute(
       'href',
       '/space/s/debates#space-tabs'
     );
 
     fireEvent.click(screen.getByRole('button', { name: /Claims/ }));
 
-    expect(screen.getByRole('link', { name: /See all claims/ })).toHaveAttribute(
+    expect(screen.getByRole('link', { name: /View all claims/ })).toHaveAttribute(
       'href',
       '/space/s/positions#space-tabs'
     );
diff --git a/apps/web/partials/profile/profile-activity-section.tsx b/apps/web/partials/profile/profile-activity-section.tsx
index a034dcb8c8..bebf0b5d99 100644
--- a/apps/web/partials/profile/profile-activity-section.tsx
+++ b/apps/web/partials/profile/profile-activity-section.tsx
@@ -13,18 +13,16 @@ import { ACTIVITY_GALLERY_CARD_LIMIT } from '~/core/profile/activity-gallery';
 import type { ClaimResponse } from '~/core/profile/use-person-positions';
 import { normId } from '~/core/utils/norm-id';
 
-import { ChevronRight } from '~/design-system/icons/chevron-right';
-import { RightArrowLongSmall } from '~/design-system/icons/right-arrow-long-small';
+import { PILL_BUTTON_CLASS_NAME, PILL_BUTTON_SECONDARY_CLASS_NAME, buttonClassNames } from '~/design-system/button';
 import { PrefetchLink as Link } from '~/design-system/prefetch-link';
 import { Skeleton } from '~/design-system/skeleton';
+import { NextButton, PreviousButton } from '~/design-system/table/table-pagination';
 
 import { ExploreFeedCard } from '~/partials/explore/explore-feed-card';
 import { withSpaceTabsAnchor } from '~/partials/space-page/space-tabs-anchor';
 
 import { GalleryClaimCard } from './gallery-claim-card';
 
-const SEE_ALL_CLASS =
-  'flex items-center justify-center gap-2 border-t border-divider py-3 text-metadataMedium text-grey-04 transition-colors hover:text-text';
 const GALLERY_ACTIVATE_RATIO = 0.6;
 const GALLERY_DEACTIVATE_RATIO = 0.4;
 
@@ -102,6 +100,9 @@ export function ProfileActivitySection({ kinds }: { kinds: ActivityKind[] }) {
   const selected = available.find(kind => kind.key === selectedKey) ?? available[0];
 
   const { sectionRef, reserveRef, prepareSwitch } = useMobileActivityHeightReserve(selected?.key);
+  // The gallery measures whether its row can scroll; the arrows live in the header, so it reports
+  // up. Null while no gallery is mounted — a kind that failed to load has no row to step through.
+  const [navigation, setNavigation] = React.useState<GalleryNavigation | null>(null);
   const isLoading = kinds.some(kind => kind.isLoading);
 
   // Reserve the section while its first usable record is on the way. Once either kind resolves,
@@ -118,57 +119,73 @@ export function ProfileActivitySection({ kinds }: { kinds: ActivityKind[] }) {
         ref={sectionRef}
         data-activity-section
         className={cx(
-          'flex flex-col overflow-hidden rounded-lg border border-grey-02 bg-white',
-          // Not a card on a phone. A bordered panel holding bordered cards spends two gutters and two
-          // rules on saying "these belong together", which the heading already says — and on a 390px
-          // screen that is most of what a claim's buttons needed. The heading and the rule under it
-          // stay; the box around them goes, and the gallery below can reach the screen edge.
-          'md:overflow-visible md:rounded-none md:border-0 md:bg-transparent'
+          // Not a card. A bordered panel holding bordered cards spends two gutters and two rules on
+          // saying "these belong together", which the heading already says. No box and no rule: the
+          // content sits flush with the column — on a phone the gallery can reach the screen edge.
+          'flex flex-col'
         )}
       >
-        {/* The toggles sit to the right of the heading, and wrap below it rather
-          than squeezing into it on a narrow screen. */}
-        <header className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b border-divider px-4 py-3 md:px-0">
-          <h3 className="text-metadataMedium text-text">Activity</h3>
-
-          {/* Only when there is a choice to make. One pill on its own is a label
-            dressed up as a control. */}
-          {available.length > 1 && (
-            <div className="flex flex-wrap items-center gap-2">
-              {available.map(kind => {
-                const isSelected = kind.key === selected.key;
-
-                return (
-                  <button
-                    key={kind.key}
-                    type="button"
-                    aria-pressed={isSelected}
-                    onClick={() => {
-                      if (isSelected) return;
-
-                      // Put the reserve in the document before React replaces
-                      // the tall view. Waiting for the next layout effect would
-                      // let the shorter DOM clamp `scrollY` while it is being
-                      // measured, before the reserve could help.
-                      prepareSwitch();
-                      setSelectedKey(kind.key);
-                    }}
-                    className={cx(
-                      'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-smallButton transition-colors',
-                      isSelected
-                        ? 'border-text bg-text text-white'
-                        : 'border-grey-02 text-grey-04 hover:border-text hover:text-text'
-                    )}
-                  >
+        {/*
+         * The title, then Debates and Claims as pills beneath it, with the row's
+         * own controls to their right. A kind with nothing in it is left out, so a
+         * person with only debates sees one pill.
+         */}
+        <header className="flex flex-col gap-3 pb-3">
+          <h3 className="text-mediumTitle text-text">Activity</h3>
+          <div className="flex flex-wrap items-center gap-2">
+            {available.map(kind => {
+              const isSelected = kind.key === selected.key;
+
+              return (
+                <button
+                  key={kind.key}
+                  type="button"
+                  aria-pressed={isSelected}
+                  onClick={() => {
+                    if (isSelected) return;
+
+                    // Put the reserve in the document before React replaces
+                    // the tall view. Waiting for the next layout effect would
+                    // let the shorter DOM clamp `scrollY` while it is being
+                    // measured, before the reserve could help.
+                    prepareSwitch();
+                    setSelectedKey(kind.key);
+                  }}
+                  // The same pill as View all beside it — 28px, 16px type, the same padding — black
+                  // when selected (the Log in pill) and the secondary outline otherwise.
+                  className={
+                    isSelected
+                      ? buttonClassNames(PILL_BUTTON_CLASS_NAME)({ variant: 'primary' })
+                      : buttonClassNames(PILL_BUTTON_SECONDARY_CLASS_NAME)({ variant: 'secondary' })
+                  }
+                >
+                  {/* Up 1px: at the pill's 13px leading, Calibre's glyphs sit a pixel low in the box. */}
+                  <span className="relative -top-px">
                     {kind.label}
-                    <span className={cx('tabular-nums', isSelected ? 'text-white/70' : 'text-grey-03')}>
+                    <span className={cx('ml-1.5 tabular-nums', isSelected ? 'text-white/70' : 'text-grey-03')}>
                       {kind.isCountUnavailable ? '—' : kind.total.toLocaleString()}
                     </span>
-                  </button>
-                );
-              })}
+                  </span>
+                </button>
+              );
+            })}
+
+            {/*
+             * The row's own controls, right of the tabs: step through the cards, then leave for the
+             * full tab. Both belong to the selected kind — see `navigation`.
+             */}
+            <div className="ml-auto flex shrink-0 items-center gap-2">
+              {selected.rows.length > 0 ? (
+                // The data block galleries' own arrows (`table-pagination`), 12px apart as they are
+                // there: dark when there is somewhere to go, grey at the row's end.
+                <span className="mr-1 flex items-center gap-3">
+                  <PreviousButton isDisabled={!navigation?.left} onClick={() => navigation?.scrollByCard(-1)} />
+                  <NextButton isDisabled={!navigation?.right} onClick={() => navigation?.scrollByCard(1)} />
+                </span>
+              ) : null}
+              <ActivitySeeAll kind={selected} />
             </div>
-          )}
+          </div>
         </header>
 
         {selected.isError && selected.rows.length === 0 ? (
@@ -177,7 +194,7 @@ export function ProfileActivitySection({ kinds }: { kinds: ActivityKind[] }) {
            * links to holds the authoritative list and offers the retry, so a
            * second control here would be a second thing to keep in step.
            */
-          <p className="px-4 py-6 text-metadata text-grey-04">Couldn’t load {selected.label.toLowerCase()}.</p>
+          <p className="py-6 text-metadata text-grey-04">Couldn’t load {selected.label.toLowerCase()}.</p>
         ) : (
           <ActivityGallery
             // Each tab is a distinct playback collection. Remounting clears an explicit card
@@ -186,9 +203,9 @@ export function ProfileActivitySection({ kinds }: { kinds: ActivityKind[] }) {
             rows={selected.rows}
             responseByClaimId={selected.responseByClaimId}
             personName={selected.personName}
+            onNavigationChange={setNavigation}
           />
         )}
-        <ActivitySeeAll kind={selected} />
       </section>
 
       {/*
@@ -210,19 +227,15 @@ export function ProfileActivitySection({ kinds }: { kinds: ActivityKind[] }) {
 
 function ProfileActivitySkeleton() {
   return (
-    <section
-      aria-label="Loading activity"
-      aria-busy="true"
-      className={cx(
-        'flex flex-col overflow-hidden rounded-lg border border-grey-02 bg-white',
-        'md:overflow-visible md:rounded-none md:border-0 md:bg-transparent'
-      )}
-    >
-      <header className="flex items-center justify-between gap-4 border-b border-divider px-4 py-3 md:px-0">
-        <h3 className="text-metadataMedium text-text">Activity</h3>
-        <Skeleton className="h-7 w-24 rounded-full" />
+    <section aria-label="Loading activity" aria-busy="true" className={cx('flex flex-col')}>
+      <header className="flex flex-col gap-3 pb-3">
+        <h3 className="text-mediumTitle text-text">Activity</h3>
+        <div className="flex items-center gap-2">
+          <Skeleton className="h-7 w-24 rounded-full" />
+          <Skeleton className="h-7 w-20 rounded-full" />
+        </div>
       </header>
-      <div className="p-4 md:px-0">
+      <div className="py-4">
         <Skeleton className="h-44 w-full rounded-lg" />
       </div>
       <div className="flex justify-center border-t border-divider py-4">
@@ -233,17 +246,12 @@ function ProfileActivitySkeleton() {
 }
 
 function ActivitySeeAll({ kind }: { kind: ActivityKind }) {
-  const content = (
-    <>
-      {kind.seeAllLabel}
-      <RightArrowLongSmall />
-    </>
-  );
+  const className = buttonClassNames(PILL_BUTTON_SECONDARY_CLASS_NAME)({ variant: 'secondary' });
 
   if (kind.onSeeAll) {
     return (
-      <button type="button" onClick={kind.onSeeAll} className={SEE_ALL_CLASS}>
-        {content}
+      <button type="button" onClick={kind.onSeeAll} className={className}>
+        {kind.seeAllLabel}
       </button>
     );
   }
@@ -252,8 +260,8 @@ function ActivitySeeAll({ kind }: { kind: ActivityKind }) {
   // chrome. The fragment puts the tab row under the navbar instead. Side panels use `onSeeAll`
   // above because their tabs are selected in place and have no route fragment to follow.
   return (
-    <Link href={withSpaceTabsAnchor(kind.href)} className={SEE_ALL_CLASS}>
-      {content}
+    <Link href={withSpaceTabsAnchor(kind.href)} className={className}>
+      {kind.seeAllLabel}
     </Link>
   );
 }
@@ -440,14 +448,19 @@ function useMobileActivityHeightReserve(selectedKey: string | undefined) {
   return { sectionRef, reserveRef, prepareSwitch };
 }
 
+type GalleryNavigation = { left: boolean; right: boolean; scrollByCard: (direction: -1 | 1) => void };
+
 function ActivityGallery({
   rows,
   responseByClaimId,
   personName,
+  onNavigationChange,
 }: {
   rows: ExploreFeedRow[];
   responseByClaimId?: Record<string, ClaimResponse>;
   personName?: string | null;
+  /** Where the header's arrows learn whether this row can move, and how to move it. */
+  onNavigationChange?: (navigation: GalleryNavigation | null) => void;
 }) {
   const shown = React.useMemo(() => rows.slice(0, ACTIVITY_GALLERY_CARD_LIMIT), [rows]);
 
@@ -466,6 +479,14 @@ function ActivityGallery({
     scrollByCard,
   } = useActivityGallery(shown);
 
+  React.useEffect(() => {
+    onNavigationChange?.({ left: canScrollLeft, right: canScrollRight, scrollByCard });
+  }, [canScrollLeft, canScrollRight, scrollByCard, onNavigationChange]);
+
+  // Unmounted on a tab switch (it is keyed by kind) and when a kind fails: its row is gone, so the
+  // header should not offer to scroll it.
+  React.useEffect(() => () => onNavigationChange?.(null), [onNavigationChange]);
+
   return (
     // One at a time. Compact cards can leave several debates fully visible, so intersection alone
     // cannot choose. The first debate receives autoplay; clicking another player transfers the
@@ -490,16 +511,14 @@ function ActivityGallery({
         {/*
          * `snap-x` so a flick lands on a card rather than between two.
          *
-         * The gap at either end is a spacer element rather than padding on the scroller: a scroll
-         * container's trailing padding is dropped by every browser that matters, so `p-4` gave 16px
-         * on the left and nothing on the right. Spacers are honoured on both sides, and `scroll-px`
-         * keeps a snapped card off the edge it lands against.
+         * No inset at the start: the first card sits flush with the column, under the heading. On a
+         * phone the row bleeds to the screen edge, so a trailing spacer — not padding, which a
+         * scroll container drops at its far end — keeps the last card off it.
          */}
         <div
           ref={scrollerRef}
-          className="no-scrollbar flex snap-x snap-mandatory scroll-px-4 items-start gap-4 overflow-x-auto py-2 md:scroll-px-0"
+          className="no-scrollbar flex snap-x snap-mandatory items-start gap-4 overflow-x-auto py-2"
         >
-          <span aria-hidden className="w-0 shrink-0 pl-4 md:pl-0" />
           {shown.map(row => (
             <GalleryCard
               key={`${row.entityId}-${row.spaceId}`}
@@ -511,11 +530,8 @@ function ActivityGallery({
               onDebatePlaybackAvailabilityChange={setPlaybackAvailable}
             />
           ))}
-          <span aria-hidden className="w-0 shrink-0 pr-4" />
+          <span aria-hidden className="w-0 shrink-0 md:pr-4" />
         </div>
-
-        {canScrollLeft ? <GalleryNavigationButton direction="left" onClick={() => scrollByCard(-1)} /> : null}
-        {canScrollRight ? <GalleryNavigationButton direction="right" onClick={() => scrollByCard(1)} /> : null}
       </div>
     </DebatePlaybackGate>
   );
@@ -662,12 +678,9 @@ function useActivityGallery(rows: ExploreFeedRow[]) {
     [scrollerRef]
   );
 
-  const requestPlayback = React.useCallback(
-    (debateId: string) => {
-      if (availableRef.current.has(normId(debateId))) setSelectedPlaybackId(debateId);
-    },
-    []
-  );
+  const requestPlayback = React.useCallback((debateId: string) => {
+    if (availableRef.current.has(normId(debateId))) setSelectedPlaybackId(debateId);
+  }, []);
 
   const setPlaybackAvailable = React.useCallback((debateId: string, available: boolean) => {
     const id = normId(debateId);
@@ -697,24 +710,6 @@ function useActivityGallery(rows: ExploreFeedRow[]) {
   };
 }
 
-function GalleryNavigationButton({ direction, onClick }: { direction: 'left' | 'right'; onClick: () => void }) {
-  return (
-    <button
-      type="button"
-      aria-label={`Scroll activity ${direction}`}
-      onClick={onClick}
-      className={cx(
-        'absolute top-1/2 z-30 grid size-9 -translate-y-1/2 place-items-center rounded-full border border-grey-02 bg-white text-text shadow-card transition-colors hover:bg-grey-01 focus-visible:border-text focus-visible:outline-none',
-        direction === 'left' ? 'left-2' : 'right-2'
-      )}
-    >
-      <span className={direction === 'left' ? 'rotate-180' : undefined} aria-hidden>
-        <ChevronRight />
-      </span>
-    </button>
-  );
-}
-
 /**
  * One card in the row.
  *
diff --git a/apps/web/partials/profile/profile-headline.tsx b/apps/web/partials/profile/profile-headline.tsx
index 983b13d2ec..e6bf7fcdeb 100644
--- a/apps/web/partials/profile/profile-headline.tsx
+++ b/apps/web/partials/profile/profile-headline.tsx
@@ -32,7 +32,7 @@ export function ProfileHeadline({ roles, spaceId }: Props) {
     // and `mb-5` is 20px less the description's own `-mt-3`, which pulls itself
     // up to sit tight under the name — right when it *is* under the name, wrong
     // with three roles in between. Both come out at 8px.
-    <ul className="mt-2 mb-5 flex flex-col gap-1">
+    <ul className="mt-2 mb-5 flex flex-col">
       {roles.map(role => (
         <li
           key={`${role.kind}-${role.organizationId}-${role.subject}`}
diff --git a/apps/web/partials/profile/profile-rail.tsx b/apps/web/partials/profile/profile-rail.tsx
index eb590589c9..255b1d6886 100644
--- a/apps/web/partials/profile/profile-rail.tsx
+++ b/apps/web/partials/profile/profile-rail.tsx
@@ -1,9 +1,11 @@
 'use client';
 
+import { SystemIds } from '@geoprotocol/geo-sdk/lite';
 import * as Popover from '@radix-ui/react-popover';
 
 import * as React from 'react';
 
+import cx from 'classnames';
 import Link from 'next/link';
 
 import { PLACEHOLDER_SPACE_IMAGE } from '~/core/constants';
@@ -12,6 +14,7 @@ import { useEditProfile } from '~/core/hooks/use-edit-profile';
 import { usePersonalSpaceId } from '~/core/hooks/use-personal-space-id';
 import { useProfileFacts } from '~/core/hooks/use-profile-facts';
 import { useProfilesBySpaceIds } from '~/core/hooks/use-profiles-by-space-ids';
+import { useSpaceId } from '~/core/hooks/use-space-id';
 import { useSpacesByIds } from '~/core/hooks/use-spaces-by-ids';
 import { ID } from '~/core/id';
 import { type Verifier, formatJoined, timeOnGeo } from '~/core/profile/profile-facts';
@@ -20,13 +23,14 @@ import { type ProfileLink, profileLinks } from '~/core/profile/profile-links';
 import type { ProfileRailFacts } from '~/core/profile/profile-rail-facts';
 import { heldPositionsCount, usePersonResponses } from '~/core/profile/use-person-positions';
 import { useEntitySchemaWithGroups } from '~/core/state/entity-page-store/entity-store';
+import { useValue } from '~/core/sync/use-store';
 import { NavUtils } from '~/core/utils/utils';
 
-import { SmallButton, SquareButton } from '~/design-system/button';
-import { LinkableChip } from '~/design-system/chip';
+import { Button, PILL_BUTTON_SECONDARY_CLASS_NAME, SmallButton, SquareButton } from '~/design-system/button';
+import { ClampedText } from '~/design-system/clamped-text';
 import { FallbackImage } from '~/design-system/fallback-image';
+import { ChevronDownSmall } from '~/design-system/icons/chevron-down-small';
 import { EditSmall } from '~/design-system/icons/edit-small';
-import { RightArrowLongSmall } from '~/design-system/icons/right-arrow-long-small';
 
 import { RankingAggregatedSubmitterAvatars } from '~/partials/blocks/table/ranking-period-metadata';
 import { StickySideRail } from '~/partials/entity-page/sticky-side-rail';
@@ -46,16 +50,15 @@ export type ProfileRailProps = ProfileRailFacts & {
 /**
  * The facts a profile states about an account (GEO-2859).
  *
- * Three sections, in the order a reader wants them: where this person works in
- * the graph, how to reach them, then the facts — ending in the space's own
- * record, folded away.
+ * Three sections: who this person is — ending in the space's own record,
+ * folded away — then how to reach them, then where they work in the graph.
  *
  * Rule-separated sections rather than bordered cards, which is how every other
  * rail in the app composes.
  */
 export function ProfileRail(props: ProfileRailProps) {
   return (
-    <StickySideRail>
+    <StickySideRail flushTop divider>
       <ProfileRailSections {...props} />
     </StickySideRail>
   );
@@ -72,7 +75,6 @@ export function ProfileRail(props: ProfileRailProps) {
 export function ProfileRailSections({
   spaceId,
   personEntityId,
-  types,
   links,
   systemEntityId,
   address,
@@ -86,40 +88,36 @@ export function ProfileRailSections({
   const positionsCount = isLoading && responses.total === null ? null : heldPositionsCount(responses, facts.positions);
 
   return (
-    <div className="flex flex-col gap-4">
-      {facts.spaces.length > 0 && <SpacesSection spaces={facts.spaces} />}
-      {personEntityId ? (
-        <LinksSection links={links} spaceId={spaceId} personEntityId={personEntityId} />
-      ) : (
-        // No person to write to, so no card: a space with no topic entity has
-        // nowhere to put a link even for its owner.
-        links.length > 0 && <LinksSection links={links} spaceId={spaceId} personEntityId={''} />
-      )}
+    // A rule between sections, 24px either side — the same divider the Explore
+    // and space rails draw (`SideRailSections`). Spacing lives on the sections
+    // rather than the rules, because any of them can be absent.
+    <div className="flex flex-col divide-y divide-divider [&>*]:py-6 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
       <AboutSection
         facts={facts}
         isLoading={isLoading}
         isError={isError}
         positionsCount={positionsCount}
-        types={types}
         spaceId={spaceId}
+        personEntityId={personEntityId}
         systemEntityId={systemEntityId}
         address={address}
         spaceType={spaceType}
       />
+      {personEntityId ? (
+        <LinksSection links={links} spaceId={spaceId} personEntityId={personEntityId} />
+      ) : (
+        // No person to write to, so no card: a space with no topic entity has
+        // nowhere to put a link even for its owner.
+        links.length > 0 && <LinksSection links={links} spaceId={spaceId} personEntityId={''} />
+      )}
+      {facts.spaces.length > 0 && <SpacesSection spaces={facts.spaces} />}
     </div>
   );
 }
 
 /**
- * One card in the rail.
- *
- * Bordered cards rather than rule-separated sections: this rail holds three
- * kinds of thing that have nothing to do with each other — a list of spaces, a
- * set of handles, and a table of facts — and a rule between them says they are
- * one document with three parts.
- *
- * `overflow-hidden` is what lets the system-data strip sit flush inside the
- * bottom corners of the About card.
+ * One section in the rail: a titled header over its body, with no border and
+ * no inset — the title and content sit flush with the rail's edges.
  */
 function RailCard({
   title,
@@ -135,12 +133,12 @@ function RailCard({
   footer?: React.ReactNode;
 }) {
   return (
-    <section className="overflow-hidden rounded-lg border border-grey-02 bg-white">
-      <header className="flex items-center justify-between gap-2.5 border-b border-divider px-4 py-3">
-        <h3 className="text-metadataMedium text-text">{title}</h3>
+    <section className="bg-white">
+      <header className="flex items-center justify-between gap-2.5">
+        <h3 className="text-mediumTitle text-text">{title}</h3>
         {action}
       </header>
-      <div className="px-4 py-3">{children}</div>
+      <div className="pt-3">{children}</div>
       {footer}
     </section>
   );
@@ -150,38 +148,59 @@ function SpacesSection({ spaces }: { spaces: ReturnType<typeof useProfileFacts>[
   const [showAll, setShowAll] = React.useState(false);
   const shown = showAll ? spaces : spaces.slice(0, 6);
 
+  // Only the rows on screen, so the collapsed list asks for six images rather than all of them.
+  const { spacesById } = useSpacesByIds(shown.map(space => space.id));
+  const activeSpaceId = useSpaceId();
+
   return (
-    <RailCard
-      title="Spaces"
-      action={
-        spaces.length > 6 ? (
-          <button
-            type="button"
-            onClick={() => setShowAll(value => !value)}
-            className="text-smallButton text-ctaPrimary hover:underline"
-          >
-            {showAll ? 'Show fewer' : `See all ${spaces.length}`}
-          </button>
-        ) : null
-      }
-    >
-      <ul className="flex flex-col gap-1">
-        {shown.map(space => (
-          <li key={space.id}>
-            <Link
-              href={NavUtils.toSpace(space.id)}
-              className="flex items-center gap-2 rounded py-1 transition-colors hover:bg-grey-01"
-            >
-              {/* Nine of the reference account's 33 have no name. A blank row in
-                  a list of 33 reads as a loading failure. */}
-              <span className="min-w-0 flex-1 truncate text-metadata text-text">{space.name ?? 'Untitled space'}</span>
-              {space.isEditor && (
-                <span className="shrink-0 rounded-full border border-grey-02 px-2 text-tag text-grey-04">Editor</span>
-              )}
-            </Link>
-          </li>
-        ))}
+    <RailCard title="Spaces">
+      {/* Rows styled as the browse sidebar draws its spaces (`SpaceRowLink`), so
+          a space looks and responds the same wherever it is listed. Pulled 10px
+          left — the row's own padding — so the icons line up under the title and
+          only the hover background reaches past it. */}
+      <ul className="-ml-2.5 space-y-0.5">
+        {shown.map(space => {
+          // Nine of the reference account's 33 have no name. A blank row in a
+          // list of 33 reads as a loading failure.
+          const name = space.name ?? 'Untitled space';
+          const image = spacesById.get(space.id)?.entity.image;
+
+          return (
+            <li key={space.id}>
+              <Link
+                href={NavUtils.toSpace(space.id)}
+                className={cx(
+                  'flex items-center gap-3 rounded-lg p-2.5 text-browseMenu font-normal not-italic',
+                  activeSpaceId === space.id ? 'bg-divider text-text' : 'text-text hover:bg-grey-01'
+                )}
+              >
+                {image && image !== PLACEHOLDER_SPACE_IMAGE ? (
+                  <span className="relative h-4 w-4 shrink-0 overflow-hidden rounded-[4px] bg-grey-01">
+                    <FallbackImage value={image} sizes="32px" className="object-cover" />
+                  </span>
+                ) : (
+                  <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-[4px] bg-grey-01 text-[8px] font-medium text-grey-04 ring-1 ring-grey-02/40 ring-inset">
+                    {name.trim().slice(0, 1).toUpperCase() || '?'}
+                  </span>
+                )}
+                <span className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden">
+                  <p className="-my-0.5 truncate leading-5">{name}</p>
+                </span>
+                {space.isEditor && <span className="shrink-0 leading-5 text-grey-03">Editor</span>}
+              </Link>
+            </li>
+          );
+        })}
       </ul>
+      {spaces.length > 6 && (
+        <Button
+          variant="secondary"
+          onClick={() => setShowAll(value => !value)}
+          className={`mt-2 ${PILL_BUTTON_SECONDARY_CLASS_NAME}`}
+        >
+          {showAll ? 'Show fewer' : `See all ${spaces.length}`}
+        </Button>
+      )}
     </RailCard>
   );
 }
@@ -372,8 +391,8 @@ function AboutSection({
   isLoading,
   isError,
   positionsCount,
-  types,
   spaceId,
+  personEntityId,
   systemEntityId,
   address,
   spaceType,
@@ -384,13 +403,21 @@ function AboutSection({
   isError: boolean;
   /** Positions actually held, or null while the vote table is still out. */
   positionsCount: number | null;
-  types: ProfileRailProps['types'];
   spaceId: string;
+  personEntityId: string | null;
   systemEntityId: string;
   address: string | null;
   spaceType: ProfileRailProps['spaceType'];
 }) {
   const joined = formatJoined(facts.joinedAt);
+
+  // The person's description, read here rather than under their name. It is still edited in the
+  // header, which is where its edit field is; the header shows it only while editing
+  // (`hideWhenReading`).
+  const description = useValue({
+    selector: v =>
+      v.entity.id === personEntityId && v.spaceId === spaceId && v.property.id === SystemIds.DESCRIPTION_PROPERTY,
+  })?.value;
   const elapsed = timeOnGeo(facts.joinedAt);
 
   return (
@@ -406,27 +433,23 @@ function AboutSection({
        * and are the rows a returning reader scans for, so they sit last, next to
        * each other, where a set of numbers reads as a set.
        */}
+      {description && (
+        <div className="mb-2">
+          <ClampedText
+            text={description}
+            maxLines={6}
+            variant="metadata"
+            textClassName="wrap-break-word text-text"
+            togglePlacement="below"
+          />
+        </div>
+      )}
+
       <dl className="flex flex-col">
         {joined && <Fact label="Joined" value={elapsed ? `${joined} · ${elapsed}` : joined} />}
 
         <Fact label="Space type" value={spaceType === 'PERSONAL' ? 'Personal' : 'DAO'} />
 
-        {types.length > 0 && (
-          <Row label="Types">
-            {/* `LinkableChip` is the relation pill every other surface draws —
-                bordered, text-coloured, border-text on hover. The bespoke blue
-                pill this replaced read as a link, which is the one thing a
-                relation chip is not. */}
-            <span className="flex flex-wrap justify-end gap-1">
-              {types.map(type => (
-                <LinkableChip key={type.id} href={NavUtils.toEntity(spaceId, type.id)}>
-                  {type.name ?? 'Untitled'}
-                </LinkableChip>
-              ))}
-            </span>
-          </Row>
-        )}
-
         {facts.verifiedBy.length > 0 && (
           <Row label="Verified by">
             <VerifiedBy verifiers={facts.verifiedBy} />
@@ -468,7 +491,7 @@ function AboutSection({
 
 function Row({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex items-baseline justify-between gap-3 border-b border-divider py-2 last:border-b-0">
+    <div className="flex items-baseline justify-between gap-3 py-2">
       <dt className="shrink-0 text-metadata text-grey-04">{label}</dt>
       <dd className="min-w-0 text-right">{children}</dd>
     </div>
@@ -624,18 +647,17 @@ function SystemRecord({
   spaceType: ProfileRailProps['spaceType'];
 }) {
   return (
-    // A grey strip flush to the card's bottom edge, with an arrow that turns as
-    // it opens. Grey because it is a different register from the rows above it:
-    // those are facts about a person, these are ids for whoever is debugging
-    // the page.
-    <details className="group border-t border-dashed border-grey-02 bg-grey-01 [&_summary::-webkit-details-marker]:hidden">
-      <summary className="flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 text-smallButton text-grey-04 hover:text-text">
+    // An accordion, closed by default, in the rows' own type: the label reads like
+    // "Positions" above it, and opening it lays the ids out as more rows of the
+    // same kind. The standard chevron, flipped when open.
+    <details className="group [&_summary::-webkit-details-marker]:hidden">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 py-2 text-metadata text-grey-04 hover:text-text">
         <span>Space system data</span>
-        <span className="text-grey-04 transition-transform duration-150 group-open:rotate-90">
-          <RightArrowLongSmall />
+        <span className="flex transition-transform duration-150 group-open:rotate-180">
+          <ChevronDownSmall color="grey-04" />
         </span>
       </summary>
-      <dl className="flex flex-col px-4 pb-3">
+      <dl className="flex flex-col">
         <SystemRow label="Space id" value={spaceId} />
         <SystemRow label="Entity id" value={systemEntityId} />
         <SystemRow label="Type" value={spaceType} />
@@ -647,9 +669,8 @@ function SystemRecord({
 
 function SystemRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className="grid grid-cols-[92px_minmax(0,1fr)] gap-2 border-b border-grey-02 py-1 last:border-b-0">
-      <dt className="text-smallButton text-grey-04">{label}</dt>
-      <dd className="font-mono text-tag break-all text-text">{value}</dd>
-    </div>
+    <Row label={label}>
+      <span className="text-metadata break-all text-text">{value}</span>
+    </Row>
   );
 }
diff --git a/apps/web/partials/profile/profile-record-sections.tsx b/apps/web/partials/profile/profile-record-sections.tsx
index 71cf84ce72..740a2fc21f 100644
--- a/apps/web/partials/profile/profile-record-sections.tsx
+++ b/apps/web/partials/profile/profile-record-sections.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import cx from 'classnames';
 
-import { formatDateRange, formatDuration, formatTotalDuration } from '~/core/profile/history-dates';
+import { formatDateRange, formatDuration } from '~/core/profile/history-dates';
 import {
   type EducationCard,
   type EmploymentCard,
@@ -101,12 +101,7 @@ export function ProfileRecordSection({ kind, cards, isOwner, onEdit, spaceId }:
   return (
     <section className="flex flex-col">
       <header className="flex items-center justify-between gap-2 pb-2">
-        <h3 className="flex items-center gap-2 text-metadataMedium text-grey-04">
-          {copy.title}
-          {cards.length > 0 && (
-            <span className="rounded bg-grey-01 px-1.5 font-mono text-tag text-grey-04">{cards.length}</span>
-          )}
-        </h3>
+        <h3 className="text-mediumTitle text-text">{copy.title}</h3>
         {/*
          * A pen, not a plus. The section's own control should offer everything
          * that can be done to the section: a plus could only add, so removing a
@@ -124,10 +119,10 @@ export function ProfileRecordSection({ kind, cards, isOwner, onEdit, spaceId }:
           </button>
         </div>
       ) : (
-        <ul className="flex flex-col divide-y divide-divider rounded-lg border border-grey-02">
+        <ul className="flex flex-col divide-y divide-divider">
           {shown.map(card => (
-            <li key={card.organization.id} className="p-4">
-              <OrganizationBlock card={card} isExpanded={isExpanded} spaceId={spaceId} />
+            <li key={card.organization.id} className="py-4">
+              <OrganizationBlock kind={kind} card={card} isExpanded={isExpanded} spaceId={spaceId} />
             </li>
           ))}
         </ul>
@@ -147,42 +142,78 @@ export function ProfileRecordSection({ kind, cards, isOwner, onEdit, spaceId }:
 }
 
 function OrganizationBlock({
+  kind,
   card,
   isExpanded,
   spaceId,
 }: {
+  kind: Kind;
   card: HistoryCard<HistoryEntry>;
   isExpanded: boolean;
   spaceId: string;
 }) {
-  // Time actually spent here, not the distance from the first start to the last
-  // end — a gap between two spells at one employer is not time served.
-  const duration = formatTotalDuration(
-    card.entries.map(entry => ({ start: entry.startDate, end: entry.endDate, isOpen: isOngoing(entry) }))
+  // The spine appears only where there is more than one entry. Someone with one
+  // course at one school sees a plain row and never learns there is a level below.
+  const hasRun = card.entries.length > 1;
+
+  const organizationLink = (className: string) => (
+    <ProfileEntityLink entityId={card.organization.id} spaceId={spaceId} className={className}>
+      {card.organization.name ?? 'Untitled'}
+    </ProfileEntityLink>
   );
 
-  // The spine appears only where there is more than one role. Someone with one
-  // job at one company sees a plain row and never learns there is a level below.
-  const hasRun = card.entries.length > 1;
+  // Experience leads with what the person does rather than where. Entries are
+  // sorted newest first, so the first is the current or most recent role: its
+  // title heads the card, the company sits under it, and its own dates follow
+  // straight after, with no company-wide total in between. Earlier roles at the
+  // same company hang off a spine below.
+  const [leadRole, ...earlierRoles] = card.entries;
+  if (kind === 'employment' && leadRole) {
+    return (
+      <div className="flex min-w-0 gap-5">
+        <OrganizationImage url={card.avatarUrl} size={50} />
+
+        <div className="min-w-0 flex-1">
+          <ProfileEntityLink
+            entityId={leadRole.subject.id}
+            spaceId={spaceId}
+            className="block truncate text-smallTitle text-text hover:underline"
+          >
+            {leadRole.subject.name ?? 'Untitled'}
+          </ProfileEntityLink>
+          {organizationLink('mt-0.5 block truncate text-smallTitle text-grey-04 hover:underline')}
+          <div className="mt-1.5">
+            <EntryRow entry={leadRole} isExpanded={isExpanded} spaceId={spaceId} hideTitle />
+          </div>
+
+          {earlierRoles.length > 0 && (
+            <ul className="mt-3 flex flex-col gap-3 border-l border-grey-02 pl-3">
+              {earlierRoles.map(entry => (
+                <li key={entry.relationId}>
+                  <EntryRow entry={entry} isExpanded={isExpanded} spaceId={spaceId} />
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    );
+  }
 
   return (
-    <div className="flex min-w-0 gap-3">
-      <OrganizationImage url={card.avatarUrl} size={36} />
+    <div className="flex min-w-0 gap-5">
+      <OrganizationImage url={card.avatarUrl} size={50} />
 
       <div className="min-w-0 flex-1">
-        <ProfileEntityLink
-          entityId={card.organization.id}
-          spaceId={spaceId}
-          className="block truncate text-smallTitle text-text hover:underline"
-        >
-          {card.organization.name ?? 'Untitled'}
-        </ProfileEntityLink>
-        {duration && <p className="text-metadata text-grey-04">{duration}</p>}
+        {/* The school, then each course with its own dates — no school-wide
+            total ahead of them. Laid out as Experience's heading is, with the two
+            lines swapped: school, course in grey, then the course's dates. */}
+        {organizationLink('block truncate text-smallTitle text-text hover:underline')}
 
-        <ul className={cx('mt-2 flex flex-col gap-3', hasRun && 'border-l border-grey-02 pl-3')}>
+        <ul className={cx('mt-0.5 flex flex-col gap-3', hasRun && 'border-l border-grey-02 pl-3')}>
           {card.entries.map(entry => (
             <li key={entry.relationId}>
-              <EntryRow entry={entry} isExpanded={isExpanded} spaceId={spaceId} />
+              <EntryRow entry={entry} isExpanded={isExpanded} spaceId={spaceId} titleStyle="heading" />
             </li>
           ))}
         </ul>
@@ -191,8 +222,27 @@ function OrganizationBlock({
   );
 }
 
-function EntryRow({ entry, isExpanded, spaceId }: { entry: HistoryEntry; isExpanded: boolean; spaceId: string }) {
+function EntryRow({
+  entry,
+  isExpanded,
+  spaceId,
+  hideTitle = false,
+  titleStyle = 'body',
+}: {
+  entry: HistoryEntry;
+  isExpanded: boolean;
+  spaceId: string;
+  /** The card's heading already names this entry. */
+  hideTitle?: boolean;
+  /**
+   * `heading` draws the title at the card heading's size in grey, 2px above the
+   * dates — the second line of an Experience heading, for a course under its school.
+   */
+  titleStyle?: 'body' | 'heading';
+}) {
   const isOpen = isOngoing(entry);
+  // The +N chip opens this row's skills on its own, without expanding the whole section.
+  const [showAllSkills, setShowAllSkills] = React.useState(false);
   const subject = entry.subject.name ?? 'Untitled';
 
   const dates = formatDateRange(entry.startDate, entry.endDate, isOpen);
@@ -214,23 +264,32 @@ function EntryRow({ entry, isExpanded, spaceId }: { entry: HistoryEntry; isExpan
       {/* The degree and its fields are separate entities that read as one line —
           "Doctor of Philosophy, Finance" — so each is its own link rather than
           one link over the sentence. */}
-      <p className="truncate text-inputMedium text-text">
-        <ProfileEntityLink entityId={entry.subject.id} spaceId={spaceId} className="hover:underline">
-          {subject}
-        </ProfileEntityLink>
-        {fields.map((field, index) => (
-          <React.Fragment key={`${field.id}-${index}`}>
-            {index === 0 ? ', ' : ', '}
-            <ProfileEntityLink entityId={field.id} spaceId={spaceId} className="hover:underline">
-              {field.name ?? 'Untitled'}
-            </ProfileEntityLink>
-          </React.Fragment>
-        ))}
-      </p>
-      {meta && <p className="text-metadata text-grey-04">{meta}</p>}
+      {!hideTitle && (
+        <p
+          className={cx(
+            'truncate',
+            titleStyle === 'heading' ? 'text-smallTitle text-grey-04' : 'text-inputMedium text-text'
+          )}
+        >
+          <ProfileEntityLink entityId={entry.subject.id} spaceId={spaceId} className="hover:underline">
+            {subject}
+          </ProfileEntityLink>
+          {fields.map((field, index) => (
+            <React.Fragment key={`${field.id}-${index}`}>
+              {index === 0 ? ', ' : ', '}
+              <ProfileEntityLink entityId={field.id} spaceId={spaceId} className="hover:underline">
+                {field.name ?? 'Untitled'}
+              </ProfileEntityLink>
+            </React.Fragment>
+          ))}
+        </p>
+      )}
+      {meta && (
+        <p className={cx('text-metadata text-grey-04', titleStyle === 'heading' && !hideTitle && 'mt-1.5')}>{meta}</p>
+      )}
 
       {entry.description && (
-        <div className="mt-1">
+        <div className="mt-3">
           {/* Clamped on the card, whole once the section is expanded. Named, because
               a card of four employers otherwise offers eight buttons all called More. */}
           {isExpanded ? (
@@ -248,15 +307,26 @@ function EntryRow({ entry, isExpanded, spaceId }: { entry: HistoryEntry; isExpan
       )}
 
       {skills.length > 0 && (
-        <ul className="mt-1.5 flex flex-wrap gap-1">
-          {(isExpanded ? skills : skills.slice(0, 4)).map((skill, index) => (
+        <ul className="mt-3 flex flex-wrap gap-1">
+          {(isExpanded || showAllSkills ? skills : skills.slice(0, 4)).map((skill, index) => (
             <li key={`${skill.name ?? 'untitled'}-${index}`}>
               <ProfileEntityLink entityId={skill.id} spaceId={spaceId} className={cx(SKILL_CHIP, 'hover:border-text')}>
                 {skill.name ?? 'Untitled'}
               </ProfileEntityLink>
             </li>
           ))}
-          {!isExpanded && skills.length > 4 && <li className={cx(SKILL_CHIP, 'text-grey-04')}>+{skills.length - 4}</li>}
+          {!isExpanded && !showAllSkills && skills.length > 4 && (
+            <li>
+              <button
+                type="button"
+                onClick={() => setShowAllSkills(true)}
+                aria-label={`Show ${skills.length - 4} more skills for ${subject}`}
+                className={cx(SKILL_CHIP, 'text-grey-04 hover:border-text hover:text-text')}
+              >
+                +{skills.length - 4}
+              </button>
+            </li>
+          )}
         </ul>
       )}
     </div>
@@ -287,15 +357,12 @@ export function ProfileSkillsSection({ skills, spaceId }: { skills: NamedRef[];
 
   return (
     <section className="flex flex-col">
-      <h3 className="flex items-center gap-2 pb-2 text-metadataMedium text-grey-04">
-        Skills
-        <span className="rounded bg-grey-01 px-1.5 font-mono text-tag text-grey-04">{skills.length}</span>
-      </h3>
+      <h3 className="pb-2 text-mediumTitle text-text">Skills</h3>
 
       {/* The toggle sits inside the container, in the flow of the chips it
           controls — below the box it reads as a control over the section, which
           is a different and larger promise than "show the rest of these". */}
-      <ul className="flex flex-wrap items-center gap-1.5 rounded-lg border border-grey-02 p-4">
+      <ul className="flex flex-wrap items-center gap-1.5">
         {shown.map(skill => (
           <li key={`${skill.id}-${skill.name}`}>
             <ProfileEntityLink entityId={skill.id} spaceId={spaceId} className={cx(SKILL_CHIP, 'hover:border-text')}>