diff --git a/packages/shared/src/components/explore/ExploreCategorySection.tsx b/packages/shared/src/components/explore/ExploreCategorySection.tsx
new file mode 100644
index 0000000000..e9ce53d5cf
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreCategorySection.tsx
@@ -0,0 +1,81 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import type { TagCategory } from '../../graphql/feedSettings';
+import { ExploreTagListItem } from './ExploreTagListItem';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+import { ClickableText } from '../buttons/ClickableText';
+
+const COLLAPSED_COUNT = 8;
+
+interface ExploreCategorySectionProps {
+  category: TagCategory;
+  followedTags: Set<string>;
+  onToggleFollow: (tag: string) => void;
+  className?: string;
+}
+
+// One column block in the Explore directory: an emoji + title heading above a
+// vertical list of topic rows with follow controls.
+export function ExploreCategorySection({
+  category,
+  followedTags,
+  onToggleFollow,
+  className,
+}: ExploreCategorySectionProps): ReactElement | null {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!category.tags?.length) {
+    return null;
+  }
+
+  const visibleTags = expanded
+    ? category.tags
+    : category.tags.slice(0, COLLAPSED_COUNT);
+  const hasMore = category.tags.length > COLLAPSED_COUNT;
+
+  return (
+    <section
+      id={`explore-category-${category.id}`}
+      className={classNames(
+        'mb-8 flex scroll-mt-24 break-inside-avoid flex-col gap-3',
+        className,
+      )}
+    >
+      <Typography
+        tag={TypographyTag.H2}
+        type={TypographyType.Title3}
+        color={TypographyColor.Primary}
+        bold
+      >
+        {category.emoji ? `${category.emoji} ` : ''}
+        {category.title}
+      </Typography>
+      <ul className="flex flex-col">
+        {visibleTags.map((tag) => (
+          <ExploreTagListItem
+            key={tag}
+            tag={tag}
+            isFollowed={followedTags.has(tag)}
+            onToggleFollow={onToggleFollow}
+          />
+        ))}
+      </ul>
+      {hasMore && (
+        <ClickableText
+          tag="button"
+          type="button"
+          onClick={() => setExpanded((prev) => !prev)}
+          className="w-fit"
+        >
+          {expanded ? 'Show less' : 'More'}
+        </ClickableText>
+      )}
+    </section>
+  );
+}
diff --git a/packages/shared/src/components/explore/ExploreHeader.spec.tsx b/packages/shared/src/components/explore/ExploreHeader.spec.tsx
new file mode 100644
index 0000000000..84cc72f12e
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreHeader.spec.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { ExploreHeader } from './ExploreHeader';
+
+const renderComponent = (props: Partial<{ activeTag: string }> = {}) =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ExploreHeader recommendedTags={['vue', 'react']} {...props} />
+    </TestBootProvider>,
+  );
+
+describe('ExploreHeader', () => {
+  it('renders an Explore tab linking back to the lobby', () => {
+    renderComponent();
+
+    expect(screen.getByText('Explore').closest('a')).toHaveAttribute(
+      'href',
+      expect.stringContaining('tags'),
+    );
+  });
+
+  it('renders a tab per recommended topic', () => {
+    renderComponent();
+
+    expect(screen.getByText('#vue').closest('a')).toHaveAttribute(
+      'href',
+      expect.stringContaining('tags/vue'),
+    );
+  });
+
+  it('marks the active topic tab as current', () => {
+    renderComponent({ activeTag: 'react' });
+
+    expect(screen.getByText('#react').closest('a')).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+  });
+});
diff --git a/packages/shared/src/components/explore/ExploreHeader.tsx b/packages/shared/src/components/explore/ExploreHeader.tsx
new file mode 100644
index 0000000000..3e54874245
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreHeader.tsx
@@ -0,0 +1,79 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { ButtonSize } from '../buttons/Button';
+import { pageHeaderClassName } from '../layout/PageHeader';
+import {
+  SquadDirectoryNavbar,
+  SquadDirectoryNavbarItem,
+} from '../squads/layout/SquadDirectoryNavbar';
+import useFeedSettings from '../../hooks/useFeedSettings';
+import { getTagPageLink } from '../../lib/links';
+import { webappUrl } from '../../lib/constants';
+
+interface ExploreHeaderProps {
+  // The tag currently being viewed (topic page) or undefined on the lobby.
+  activeTag?: string;
+  // Related / recommended tag names to surface after the followed ones.
+  recommendedTags?: string[];
+  className?: string;
+}
+
+const exploreUrl = `${webappUrl}tags`;
+// Keep the header short — show a handful of relevant tabs rather than a long
+// horizontally-scrolling list.
+const MAX_TAGS = 5;
+
+// The Explore page header, built with the same tabbed page-header strip as the
+// Squad directory (pageHeaderClassName + SquadDirectoryNavbar). An "Explore"
+// tab returns to the lobby, followed by the user's tags and recommendations;
+// the current topic is the active tab. Shared by the lobby and topic pages.
+export function ExploreHeader({
+  activeTag,
+  recommendedTags = [],
+  className,
+}: ExploreHeaderProps): ReactElement {
+  const { feedSettings } = useFeedSettings();
+
+  const tags = useMemo(() => {
+    const followed = feedSettings?.includeTags ?? [];
+    const followedSet = new Set(followed);
+    const ordered =
+      activeTag && !followedSet.has(activeTag)
+        ? [activeTag, ...followed]
+        : followed;
+    const rec = recommendedTags.filter(
+      (tag) => tag && !followedSet.has(tag) && tag !== activeTag,
+    );
+    return Array.from(new Set([...ordered, ...rec])).slice(0, MAX_TAGS);
+  }, [feedSettings?.includeTags, recommendedTags, activeTag]);
+
+  return (
+    <header
+      className={classNames(pageHeaderClassName, 'gap-4 !py-0', className)}
+    >
+      <SquadDirectoryNavbar
+        aria-label="Explore navigation"
+        className="!mx-0 min-w-0 flex-1 !border-0 !px-0"
+      >
+        <SquadDirectoryNavbarItem
+          buttonSize={ButtonSize.Small}
+          isActive={!activeTag}
+          label="Explore"
+          path={exploreUrl}
+          ariaLabel="Explore tags"
+        />
+        {tags.map((tag) => (
+          <SquadDirectoryNavbarItem
+            key={tag}
+            buttonSize={ButtonSize.Small}
+            isActive={tag === activeTag}
+            label={`#${tag}`}
+            path={getTagPageLink(tag)}
+            ariaLabel={`#${tag}`}
+          />
+        ))}
+      </SquadDirectoryNavbar>
+    </header>
+  );
+}
diff --git a/packages/shared/src/components/explore/ExploreSignupCard.spec.tsx b/packages/shared/src/components/explore/ExploreSignupCard.spec.tsx
new file mode 100644
index 0000000000..f0f95b998e
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreSignupCard.spec.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useLogContext } from '../../contexts/LogContext';
+import { AuthTriggers } from '../../lib/auth';
+import { LogEvent, TargetType } from '../../lib/log';
+import { ExploreSignupCard } from './ExploreSignupCard';
+
+jest.mock('../../contexts/AuthContext', () => ({
+  useAuthContext: jest.fn(),
+}));
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: jest.fn(),
+}));
+
+const showLogin = jest.fn();
+const logEvent = jest.fn();
+
+const mockAuth = (overrides: Record<string, unknown> = {}) =>
+  (useAuthContext as jest.Mock).mockReturnValue({
+    isAuthReady: true,
+    isLoggedIn: false,
+    showLogin,
+    ...overrides,
+  });
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  (useLogContext as jest.Mock).mockReturnValue({ logEvent });
+});
+
+describe('ExploreSignupCard', () => {
+  it('makes the tag value explicit and logs a tag_page impression', () => {
+    mockAuth();
+    render(<ExploreSignupCard tag="claude" />);
+
+    expect(
+      screen.getByRole('heading', { name: /Get every new #claude post/ }),
+    ).toBeInTheDocument();
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.SignupButton,
+      target_id: 'tag_page',
+    });
+  });
+
+  it('uses lobby copy and a tags_lobby target when no tag is given', () => {
+    mockAuth();
+    render(<ExploreSignupCard />);
+
+    expect(
+      screen.getByRole('heading', { name: /Your personalized developer feed/ }),
+    ).toBeInTheDocument();
+    expect(logEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.Impression,
+      target_type: TargetType.SignupButton,
+      target_id: 'tags_lobby',
+    });
+  });
+
+  it('opens registration on signup click', () => {
+    mockAuth();
+    render(<ExploreSignupCard tag="claude" />);
+
+    fireEvent.click(screen.getByRole('button', { name: /Sign up/ }));
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: false },
+    });
+  });
+
+  it('renders nothing for logged-in users', () => {
+    mockAuth({ isLoggedIn: true });
+    const { container } = render(<ExploreSignupCard tag="claude" />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});
diff --git a/packages/shared/src/components/explore/ExploreSignupCard.tsx b/packages/shared/src/components/explore/ExploreSignupCard.tsx
new file mode 100644
index 0000000000..c2efce7161
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreSignupCard.tsx
@@ -0,0 +1,120 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { ClickableText } from '../buttons/ClickableText';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useLogContext } from '../../contexts/LogContext';
+import { AuthTriggers } from '../../lib/auth';
+import { LogEvent, TargetType } from '../../lib/log';
+import { authGradientBg } from '../marketing/banners/common';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+
+interface ExploreSignupCardProps {
+  // When set, the copy is scoped to the specific tag; omitted on the lobby.
+  tag?: string;
+  className?: string;
+}
+
+// A compact, branded signup strip for logged-out visitors — one explicit line
+// of value + a single Sign up action, kept deliberately small so it reads at a
+// glance without taking over the layout. Renders nothing when logged in.
+export function ExploreSignupCard({
+  tag,
+  className,
+}: ExploreSignupCardProps): ReactElement | null {
+  const { isAuthReady, isLoggedIn, showLogin } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const impressionLogged = useRef(false);
+
+  const show = isAuthReady && !isLoggedIn;
+  const targetId = tag ? 'tag_page' : 'tags_lobby';
+
+  useEffect(() => {
+    if (show && !impressionLogged.current) {
+      impressionLogged.current = true;
+      logEvent({
+        event_name: LogEvent.Impression,
+        target_type: TargetType.SignupButton,
+        target_id: targetId,
+      });
+    }
+  }, [show, logEvent, targetId]);
+
+  if (!show) {
+    return null;
+  }
+
+  const onSignup = (): void => {
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: TargetType.SignupButton,
+      target_id: targetId,
+    });
+    showLogin({
+      trigger: AuthTriggers.Onboarding,
+      options: { isLogin: false },
+    });
+  };
+
+  const onLogin = (): void => {
+    logEvent({
+      event_name: LogEvent.Click,
+      target_type: TargetType.LoginButton,
+      target_id: targetId,
+    });
+    showLogin({ trigger: AuthTriggers.Onboarding, options: { isLogin: true } });
+  };
+
+  const title = tag
+    ? `Get every new #${tag} post in your feed`
+    : 'Your personalized developer feed';
+  const subtitle = tag
+    ? `Sign up free to follow #${tag} on daily.dev.`
+    : 'Sign up free to follow the tags you care about.';
+
+  return (
+    <aside
+      className={classNames(
+        'mx-auto flex w-full max-w-[44rem] flex-col gap-3 rounded-16 border border-border-subtlest-tertiary px-4 py-3 mobileL:flex-row mobileL:items-center mobileL:justify-between mobileL:gap-6',
+        authGradientBg,
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        <Typography
+          tag={TypographyTag.H3}
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+          bold
+        >
+          {title}
+        </Typography>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Secondary}
+        >
+          {subtitle}
+        </Typography>
+      </div>
+      <div className="flex shrink-0 items-center gap-3">
+        <Button
+          type="button"
+          variant={ButtonVariant.Primary}
+          size={ButtonSize.Small}
+          onClick={onSignup}
+        >
+          Sign up — it&apos;s free
+        </Button>
+        <ClickableText tag="button" type="button" onClick={onLogin}>
+          Log in
+        </ClickableText>
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/shared/src/components/explore/ExploreTagListItem.spec.tsx b/packages/shared/src/components/explore/ExploreTagListItem.spec.tsx
new file mode 100644
index 0000000000..4db649e586
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTagListItem.spec.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { ExploreTagListItem } from './ExploreTagListItem';
+
+const onToggleFollow = jest.fn();
+
+const renderItem = (isFollowed: boolean) =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ul>
+        <ExploreTagListItem
+          tag="react"
+          isFollowed={isFollowed}
+          onToggleFollow={onToggleFollow}
+        />
+      </ul>
+    </TestBootProvider>,
+  );
+
+beforeEach(() => jest.clearAllMocks());
+
+it('links to the topic and offers a follow action when not followed', () => {
+  renderItem(false);
+
+  expect(screen.getByText('React').closest('a')).toHaveAttribute(
+    'href',
+    expect.stringContaining('tags/react'),
+  );
+  fireEvent.click(screen.getByLabelText('Follow react'));
+  expect(onToggleFollow).toHaveBeenCalledWith('react');
+});
+
+it('shows a followed indicator (unfollow action) when followed', () => {
+  renderItem(true);
+
+  fireEvent.click(screen.getByLabelText('Unfollow react'));
+  expect(onToggleFollow).toHaveBeenCalledWith('react');
+});
diff --git a/packages/shared/src/components/explore/ExploreTagListItem.tsx b/packages/shared/src/components/explore/ExploreTagListItem.tsx
new file mode 100644
index 0000000000..d6ea05cc45
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTagListItem.tsx
@@ -0,0 +1,62 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import { PlusIcon, VIcon } from '../icons';
+import { Tooltip } from '../tooltip/Tooltip';
+import { getTagPageLink } from '../../lib/links';
+import { formatKeyword } from '../../lib/strings';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+
+interface ExploreTagListItemProps {
+  tag: string;
+  isFollowed: boolean;
+  onToggleFollow: (tag: string) => void;
+}
+
+// A directory row: the topic link plus a follow control on the right. Followed
+// topics keep a persistent check (so you can tell what you already follow);
+// unfollowed topics reveal a subtle "+" on hover/focus.
+export function ExploreTagListItem({
+  tag,
+  isFollowed,
+  onToggleFollow,
+}: ExploreTagListItemProps): ReactElement {
+  return (
+    <li className="group flex break-inside-avoid items-center gap-1 rounded-10 pr-1 transition-colors hover:bg-surface-hover">
+      <Link href={getTagPageLink(tag)} passHref prefetch={false}>
+        <Typography
+          tag={TypographyTag.Link}
+          type={TypographyType.Callout}
+          color={TypographyColor.Secondary}
+          className="block min-w-0 flex-1 cursor-pointer truncate px-2 py-1 no-underline transition-colors hover:text-text-primary"
+        >
+          {formatKeyword(tag)}
+        </Typography>
+      </Link>
+      <Tooltip content={isFollowed ? `Following #${tag}` : `Follow #${tag}`}>
+        <Button
+          type="button"
+          size={ButtonSize.XSmall}
+          variant={ButtonVariant.Tertiary}
+          icon={isFollowed ? <VIcon aria-hidden /> : <PlusIcon aria-hidden />}
+          aria-label={isFollowed ? `Unfollow ${tag}` : `Follow ${tag}`}
+          aria-pressed={isFollowed}
+          onClick={() => onToggleFollow(tag)}
+          className={classNames(
+            'shrink-0',
+            isFollowed
+              ? 'text-brand-default'
+              : 'opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100',
+          )}
+        />
+      </Tooltip>
+    </li>
+  );
+}
diff --git a/packages/shared/src/components/explore/ExploreTopicPage.tsx b/packages/shared/src/components/explore/ExploreTopicPage.tsx
new file mode 100644
index 0000000000..9af4e662ee
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTopicPage.tsx
@@ -0,0 +1,583 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useContext, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import { useQuery } from '@tanstack/react-query';
+import Head from 'next/head';
+import Feed from '../Feed';
+import {
+  MOST_DISCUSSED_FEED_QUERY,
+  MOST_UPVOTED_FEED_QUERY,
+  TAG_FEED_QUERY,
+} from '../../graphql/feed';
+import type { TopPost } from '../../graphql/feed';
+import AuthContext from '../../contexts/AuthContext';
+import type { ButtonProps } from '../buttons/Button';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+import useTagAndSource from '../../hooks/useTagAndSource';
+import { AuthTriggers } from '../../lib/auth';
+import { OtherFeedPage, RequestKey, StaleTime } from '../../lib/query';
+import { LogEvent, Origin } from '../../lib/log';
+import type { Keyword } from '../../graphql/keywords';
+import { IconSize } from '../Icon';
+import {
+  BlockIcon,
+  DiscussIcon,
+  MiniCloseIcon as XIcon,
+  OpenLinkIcon,
+  PlusIcon,
+  UpvoteIcon,
+} from '../icons';
+import type { TagsData } from '../../graphql/feedSettings';
+import useFeedSettings from '../../hooks/useFeedSettings';
+import { ReferralCampaignKey, useFeedLayout } from '../../hooks';
+import type { SourceTooltip } from '../../graphql/sources';
+import { SOURCES_BY_TAG_QUERY } from '../../graphql/sources';
+import type { Connection } from '../../graphql/common';
+import { gqlClient } from '../../graphql/common';
+import { ActiveFeedNameContext } from '../../contexts';
+import FeedContext from '../../contexts/FeedContext';
+import HorizontalFeed from '../feeds/HorizontalFeed';
+import { PostType } from '../../graphql/posts';
+import { useFeature } from '../GrowthBookProvider';
+import { feature } from '../../lib/featureManagement';
+import { cloudinarySourceRoadmap } from '../../lib/image';
+import { anchorDefaultRel, formatKeyword } from '../../lib/strings';
+import Link from '../utilities/Link';
+import CustomFeedOptionsMenu from '../CustomFeedOptionsMenu';
+import { ArchiveEntryCard } from '../archive/ArchiveEntryCard';
+import { ArchiveScopeType } from '../../graphql/archive';
+import { useContentPreference } from '../../hooks/contentPreference/useContentPreference';
+import { ContentPreferenceType } from '../../graphql/contentPreference';
+import { TOP_CREATORS_BY_TAG_QUERY } from '../../graphql/users';
+import type { UserShortProfile } from '../../lib/user';
+import { SponsoredTagHero } from '../brand/SponsoredTagHero';
+import UserEntityCard from '../cards/entity/UserEntityCard';
+import SourceEntityCard from '../cards/entity/SourceEntityCard';
+import EntityCardSkeleton from '../cards/entity/EntityCardSkeleton';
+import { ExploreHeader } from './ExploreHeader';
+import { ExploreSignupCard } from './ExploreSignupCard';
+import { largeNumberFormat } from '../../lib';
+import { webappUrl } from '../../lib/constants';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+
+const SUPPORTED_TYPES = [
+  PostType.Article,
+  PostType.VideoYouTube,
+  PostType.Collection,
+  PostType.Share,
+  PostType.Freeform,
+  PostType.LiveRoom,
+];
+
+export interface ExploreTopicPageProps {
+  tag: string;
+  initialData: Keyword | null;
+  topPosts: TopPost[];
+  recommendedTags: TagsData['tags'];
+  topContributors: UserShortProfile[];
+  jsonLd?: string | null;
+}
+
+const SectionHeading = ({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement => (
+  <Typography
+    tag={TypographyTag.H2}
+    type={TypographyType.Title3}
+    color={TypographyColor.Primary}
+    bold
+    className="mb-4 mt-2"
+  >
+    {children}
+  </Typography>
+);
+
+// Wraps a horizontal post rail with a right-edge gradient so the last card
+// blends into the background instead of being hard-cut by the scroll overflow.
+const RailWithFade = ({ children }: { children: ReactNode }): ReactElement => (
+  <div className="relative mb-10">
+    {children}
+    <div
+      aria-hidden
+      className="pointer-events-none absolute bottom-0 right-0 top-11 w-12 bg-gradient-to-r from-transparent to-background-default"
+    />
+  </div>
+);
+
+// Render the user/source cards in the same grid the post feed uses (same
+// column count + card width) so every card on the page lines up identically.
+const ENTITY_CARD_CLASS = { container: '!w-full !max-w-[21.5rem] h-full' };
+
+const EntityFeedGrid = ({
+  children,
+}: {
+  children: ReactNode;
+}): ReactElement => {
+  const { numCards } = useContext(FeedContext);
+  const columns = numCards?.eco ?? 1;
+
+  return (
+    <div
+      className="grid gap-8"
+      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const EntityGridSkeleton = (): ReactElement => (
+  <EntityFeedGrid>
+    {Array.from({ length: 3 }).map((_, index) => (
+      <EntityCardSkeleton
+        // eslint-disable-next-line react/no-array-index-key
+        key={index}
+        className={ENTITY_CARD_CLASS}
+      />
+    ))}
+  </EntityFeedGrid>
+);
+
+const TagTopSources = ({ tag }: { tag: string }): ReactElement | null => {
+  const { data: topSources, isPending } = useQuery({
+    queryKey: [RequestKey.SourceByTag, null, tag],
+    queryFn: async () =>
+      gqlClient.request<{ sourcesByTag: Connection<SourceTooltip> }>(
+        SOURCES_BY_TAG_QUERY,
+        { tag, first: 6 },
+      ),
+    enabled: !!tag,
+    staleTime: StaleTime.OneHour,
+  });
+
+  const sources =
+    topSources?.sourcesByTag?.edges?.map((edge) => edge.node) ?? [];
+  if (!isPending && sources.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="mb-10">
+      <SectionHeading>Top sources covering it</SectionHeading>
+      {isPending ? (
+        <EntityGridSkeleton />
+      ) : (
+        <EntityFeedGrid>
+          {sources.map((source) => (
+            <SourceEntityCard
+              key={source.id}
+              source={source}
+              className={ENTITY_CARD_CLASS}
+            />
+          ))}
+        </EntityFeedGrid>
+      )}
+    </section>
+  );
+};
+
+const WhoToFollow = ({
+  tag,
+  initialUsers = [],
+}: {
+  tag: string;
+  initialUsers?: UserShortProfile[];
+}): ReactElement | null => {
+  const { data: topContributors, isPending } = useQuery({
+    queryKey: [RequestKey.TopCreatorsByTag, null, tag],
+    queryFn: async () =>
+      gqlClient.request<{ topCreatorsByTag: UserShortProfile[] }>(
+        TOP_CREATORS_BY_TAG_QUERY,
+        { tag, limit: 6 },
+      ),
+    enabled: !!tag,
+    staleTime: StaleTime.OneHour,
+  });
+
+  const users = topContributors?.topCreatorsByTag ?? initialUsers;
+  const isLoading = isPending && initialUsers.length === 0;
+
+  if (!isLoading && (!users || users.length === 0)) {
+    return null;
+  }
+
+  return (
+    <section className="mb-10">
+      <SectionHeading>Who to follow</SectionHeading>
+      {isLoading ? (
+        <EntityGridSkeleton />
+      ) : (
+        <EntityFeedGrid>
+          {users.map((user) => (
+            <UserEntityCard
+              key={user.id}
+              user={user}
+              className={ENTITY_CARD_CLASS}
+            />
+          ))}
+        </EntityFeedGrid>
+      )}
+    </section>
+  );
+};
+
+export const ExploreTopicPage = ({
+  tag,
+  initialData,
+  topPosts,
+  recommendedTags,
+  topContributors,
+  jsonLd,
+}: ExploreTopicPageProps): ReactElement => {
+  const { push } = useRouter();
+  const showRoadmap = useFeature(feature.showRoadmap);
+  const { user, showLogin } = useContext(AuthContext);
+  const { feedSettings } = useFeedSettings();
+  const { FeedPageLayoutComponent } = useFeedLayout();
+  const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } =
+    useTagAndSource({ origin: Origin.TagPage });
+  const { follow, unfollow } = useContentPreference({
+    showToastOnSuccess: false,
+  });
+
+  const title = initialData?.flags?.title || formatKeyword(tag);
+  const followers = initialData?.followers;
+  const occurrences = initialData?.occurrences ?? 0;
+
+  const topPostsQueryVariables = useMemo(
+    () => ({ tag, ranking: 'POPULARITY', supportedTypes: SUPPORTED_TYPES }),
+    [tag],
+  );
+  const mostUpvotedQueryVariables = useMemo(
+    () => ({ tag, supportedTypes: SUPPORTED_TYPES, period: 365 }),
+    [tag],
+  );
+  const bestDiscussedQueryVariables = useMemo(
+    () => ({ tag, period: 365, supportedTypes: SUPPORTED_TYPES }),
+    [tag],
+  );
+  const mainFeedQueryVariables = useMemo(
+    () => ({ tag, ranking: 'TIME', supportedTypes: SUPPORTED_TYPES }),
+    [tag],
+  );
+
+  const tagStatus = useMemo(() => {
+    if (!feedSettings) {
+      return 'unfollowed';
+    }
+    if ((feedSettings.blockedTags ?? []).includes(tag)) {
+      return 'blocked';
+    }
+    if ((feedSettings.includeTags ?? []).includes(tag)) {
+      return 'followed';
+    }
+    return 'unfollowed';
+  }, [feedSettings, tag]);
+
+  const followButtonProps: ButtonProps<'button'> = {
+    size: ButtonSize.Small,
+    icon: tagStatus === 'followed' ? <XIcon /> : <PlusIcon />,
+    onClick: async (): Promise<void> => {
+      if (!user) {
+        showLogin({ trigger: AuthTriggers.Filter });
+        return;
+      }
+      if (tagStatus === 'followed') {
+        await onUnfollowTags({ tags: [tag] });
+      } else {
+        await onFollowTags({ tags: [tag] });
+      }
+    },
+  };
+
+  const blockButtonProps: ButtonProps<'button'> = {
+    size: ButtonSize.Small,
+    icon: tagStatus === 'blocked' ? <XIcon /> : <BlockIcon />,
+    onClick: async (): Promise<void> => {
+      if (!user) {
+        showLogin({ trigger: AuthTriggers.Filter });
+        return;
+      }
+      if (tagStatus === 'blocked') {
+        await onUnblockTags({ tags: [tag] });
+      } else {
+        await onBlockTags({ tags: [tag] });
+      }
+    },
+  };
+
+  const statParts: ReactNode[] = [];
+  if (typeof followers === 'number') {
+    statParts.push(
+      <span key="followers">{largeNumberFormat(followers)} followers</span>,
+    );
+  }
+  statParts.push(
+    <span key="stories">{largeNumberFormat(occurrences)} stories</span>,
+  );
+
+  return (
+    <FeedPageLayoutComponent>
+      {jsonLd && (
+        <Head>
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{ __html: jsonLd }}
+          />
+        </Head>
+      )}
+      <ExploreHeader
+        activeTag={tag}
+        recommendedTags={recommendedTags
+          .map((relatedTag) => relatedTag.name)
+          .filter((name): name is string => !!name)}
+      />
+      <div className="flex w-full flex-col px-4 py-6 tablet:px-6">
+        {/* Hero cover — centered on the page; content below spans full width. */}
+        <header className="mx-auto flex w-full max-w-[48rem] flex-col items-center gap-4 py-8 text-center">
+          <SponsoredTagHero tag={tag} />
+          <Typography
+            tag={TypographyTag.H1}
+            type={TypographyType.LargeTitle}
+            color={TypographyColor.Primary}
+            bold
+            center
+          >
+            {title}
+          </Typography>
+          <Typography
+            type={TypographyType.Callout}
+            color={TypographyColor.Tertiary}
+            className="flex flex-wrap items-center justify-center gap-x-2 gap-y-1"
+          >
+            <span>Tag</span>
+            {statParts.map((part) => (
+              <React.Fragment key={(part as ReactElement).key}>
+                <span aria-hidden>·</span>
+                {part}
+              </React.Fragment>
+            ))}
+          </Typography>
+          {initialData?.flags?.description && (
+            <Typography
+              type={TypographyType.Body}
+              color={TypographyColor.Secondary}
+              center
+              className="max-w-[44rem]"
+            >
+              {initialData.flags.description}
+            </Typography>
+          )}
+          <div className="mt-1 flex flex-row items-center justify-center gap-3">
+            {tagStatus !== 'blocked' && (
+              <Button
+                variant={ButtonVariant.Primary}
+                {...followButtonProps}
+                aria-label={tagStatus === 'followed' ? 'Unfollow' : 'Follow'}
+              >
+                {tagStatus === 'followed' ? 'Following' : 'Follow'}
+              </Button>
+            )}
+            {tagStatus !== 'followed' && (
+              <Button
+                variant={ButtonVariant.Float}
+                {...blockButtonProps}
+                aria-label={tagStatus === 'blocked' ? 'Unblock' : 'Block'}
+              >
+                {tagStatus === 'blocked' ? 'Unblock' : 'Block'}
+              </Button>
+            )}
+            <CustomFeedOptionsMenu
+              onCreateNewFeed={() =>
+                push(
+                  `${webappUrl}feeds/new?entityId=${tag}&entityType=${ContentPreferenceType.Keyword}`,
+                )
+              }
+              onAdd={(feedId) =>
+                follow({
+                  id: tag,
+                  entity: ContentPreferenceType.Keyword,
+                  entityName: tag,
+                  feedId,
+                })
+              }
+              onUndo={(feedId) =>
+                unfollow({
+                  id: tag,
+                  entity: ContentPreferenceType.Keyword,
+                  entityName: tag,
+                  feedId,
+                })
+              }
+              shareProps={{
+                text: `Check out the ${tag} tag on daily.dev`,
+                link: globalThis?.location?.href,
+                cid: ReferralCampaignKey.ShareTag,
+                logObject: () => ({
+                  event_name: LogEvent.ShareTag,
+                  target_id: tag,
+                }),
+              }}
+            />
+          </div>
+          {/* SEO crawl paths preserved from the legacy tag page. */}
+          {topPosts.length > 0 && (
+            <div className="sr-only">
+              {topPosts.map((post) => (
+                <Link
+                  key={post.id}
+                  href={`${webappUrl}posts/${post.slug || post.id}`}
+                  prefetch={false}
+                >
+                  <a>{post.title}</a>
+                </Link>
+              ))}
+            </div>
+          )}
+          {topContributors.length > 0 && (
+            <div className="sr-only">
+              {topContributors.map((contributor) => (
+                <Link
+                  key={contributor.id}
+                  href={contributor.permalink}
+                  prefetch={false}
+                >
+                  <a>Posts by {contributor.name}</a>
+                </Link>
+              ))}
+            </div>
+          )}
+          {/* Compact signup nudge, directly under the follow actions. */}
+          <ExploreSignupCard tag={title} className="mt-2 text-left" />
+        </header>
+
+        <div className="mb-2 h-px w-full bg-border-subtlest-tertiary" />
+
+        {showRoadmap && initialData?.flags?.roadmap && (
+          <section className="mb-10">
+            <SectionHeading>Roadmaps</SectionHeading>
+            <Link href={initialData.flags.roadmap} passHref prefetch={false}>
+              <a
+                target="_blank"
+                rel={anchorDefaultRel}
+                className="flex w-full max-w-sm cursor-pointer items-center rounded-12 border border-border-subtlest-tertiary p-4"
+              >
+                <img
+                  src={cloudinarySourceRoadmap}
+                  alt="roadmap.sh logo"
+                  className="size-10 rounded-full"
+                />
+                <div className="mx-3 flex-1 text-left">
+                  <p className="font-bold typo-callout">
+                    Comprehensive roadmap for {title}
+                  </p>
+                  <p className="text-text-tertiary typo-footnote">
+                    By roadmap.sh
+                  </p>
+                </div>
+                <Button
+                  icon={<OpenLinkIcon />}
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Tertiary}
+                />
+              </a>
+            </Link>
+          </section>
+        )}
+
+        {/* Recommended stories */}
+        <ActiveFeedNameContext.Provider
+          value={{ feedName: OtherFeedPage.TagsTopPosts }}
+        >
+          <RailWithFade>
+            <HorizontalFeed
+              feedName={OtherFeedPage.TagsTopPosts}
+              feedQueryKey={[
+                'tagsTopPosts',
+                user?.id ?? 'anonymous',
+                Object.values(topPostsQueryVariables),
+              ]}
+              query={TAG_FEED_QUERY}
+              variables={topPostsQueryVariables}
+              title={{ copy: 'Recommended stories' }}
+              className="!mx-0 !mb-0"
+              emptyScreen={<></>}
+            />
+          </RailWithFade>
+        </ActiveFeedNameContext.Provider>
+
+        <WhoToFollow tag={tag} initialUsers={topContributors} />
+        <TagTopSources tag={tag} />
+
+        <ActiveFeedNameContext.Provider
+          value={{ feedName: OtherFeedPage.TagsMostUpvoted }}
+        >
+          <RailWithFade>
+            <HorizontalFeed
+              feedName={OtherFeedPage.TagsMostUpvoted}
+              feedQueryKey={[
+                'tagsMostUpvoted',
+                user?.id ?? 'anonymous',
+                Object.values(mostUpvotedQueryVariables),
+              ]}
+              query={MOST_UPVOTED_FEED_QUERY}
+              variables={mostUpvotedQueryVariables}
+              title={{
+                copy: 'Most upvoted posts',
+                icon: <UpvoteIcon size={IconSize.Medium} className="mr-1.5" />,
+              }}
+              className="!mx-0 !mb-0"
+              emptyScreen={<></>}
+            />
+          </RailWithFade>
+        </ActiveFeedNameContext.Provider>
+        <ActiveFeedNameContext.Provider
+          value={{ feedName: OtherFeedPage.TagsBestDiscussed }}
+        >
+          <RailWithFade>
+            <HorizontalFeed
+              feedName={OtherFeedPage.TagsBestDiscussed}
+              feedQueryKey={[
+                'tagsBestDiscussed',
+                user?.id ?? 'anonymous',
+                Object.values(bestDiscussedQueryVariables),
+              ]}
+              query={MOST_DISCUSSED_FEED_QUERY}
+              variables={bestDiscussedQueryVariables}
+              title={{
+                copy: 'Best discussed posts',
+                icon: <DiscussIcon size={IconSize.Medium} className="mr-1.5" />,
+              }}
+              className="!mx-0 !mb-0"
+              emptyScreen={<></>}
+            />
+          </RailWithFade>
+        </ActiveFeedNameContext.Provider>
+        <ArchiveEntryCard
+          scopeType={ArchiveScopeType.Tag}
+          scopeId={tag}
+          scopeName={title}
+          className="mb-6"
+        />
+
+        <div className="my-2 h-px w-full bg-border-subtlest-tertiary" />
+
+        <SectionHeading>All posts about {title}</SectionHeading>
+        <Feed
+          feedName={OtherFeedPage.Tag}
+          feedQueryKey={['tagFeed', user?.id ?? 'anonymous', tag]}
+          query={TAG_FEED_QUERY}
+          variables={mainFeedQueryVariables}
+          className="!mx-0 !w-auto"
+        />
+      </div>
+    </FeedPageLayoutComponent>
+  );
+};
diff --git a/packages/shared/src/components/explore/ExploreTopicSearch.spec.tsx b/packages/shared/src/components/explore/ExploreTopicSearch.spec.tsx
new file mode 100644
index 0000000000..0488dc762a
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTopicSearch.spec.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { ExploreTopicSearch } from './ExploreTopicSearch';
+
+const onQueryChange = jest.fn();
+
+const renderComponent = () =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ExploreTopicSearch
+        onQueryChange={onQueryChange}
+        recommendedTags={['javascript', 'react']}
+      />
+    </TestBootProvider>,
+  );
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+it('shows recommended topics before typing', () => {
+  renderComponent();
+
+  expect(screen.getByText('Recommended:')).toBeInTheDocument();
+  expect(screen.getByText('javascript')).toBeInTheDocument();
+});
+
+it('reports the query live as the user types', async () => {
+  renderComponent();
+
+  fireEvent.input(screen.getByPlaceholderText('Search all tags'), {
+    target: { value: 'rea' },
+  });
+
+  await waitFor(() => expect(onQueryChange).toHaveBeenCalledWith('rea'));
+});
diff --git a/packages/shared/src/components/explore/ExploreTopicSearch.tsx b/packages/shared/src/components/explore/ExploreTopicSearch.tsx
new file mode 100644
index 0000000000..9349756d90
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTopicSearch.tsx
@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { SearchField } from '../fields/SearchField';
+import { getTagPageLink } from '../../lib/links';
+import useDebounceFn from '../../hooks/useDebounceFn';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+import Link from '../utilities/Link';
+
+interface ExploreTopicSearchProps {
+  // Reports the (debounced, trimmed) query so the directory below can filter
+  // live as the user types.
+  onQueryChange: (query: string) => void;
+  recommendedTags?: string[];
+  className?: string;
+}
+
+export function ExploreTopicSearch({
+  onQueryChange,
+  recommendedTags = [],
+  className,
+}: ExploreTopicSearchProps): ReactElement {
+  const [inputValue, setInputValue] = useState('');
+  const [debouncedReport] = useDebounceFn((value?: string) => {
+    onQueryChange((value ?? '').trim());
+  }, 150);
+
+  const onValueChange = (value: string): void => {
+    setInputValue(value);
+    debouncedReport(value);
+  };
+
+  return (
+    <div className={classNames('flex w-full flex-col gap-3', className)}>
+      <SearchField
+        inputId="explore-topic-search"
+        placeholder="Search all tags"
+        value={inputValue}
+        valueChanged={onValueChange}
+        aria-label="Search all tags"
+        autoComplete="off"
+      />
+      {!inputValue && recommendedTags.length > 0 && (
+        <div className="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+          <Typography
+            tag={TypographyTag.Span}
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Recommended:
+          </Typography>
+          {recommendedTags.map((tag) => (
+            <Link key={tag} href={getTagPageLink(tag)} passHref>
+              <Typography
+                tag={TypographyTag.Link}
+                type={TypographyType.Footnote}
+                color={TypographyColor.Primary}
+                className="cursor-pointer no-underline hover:underline"
+              >
+                {tag}
+              </Typography>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/shared/src/components/explore/ExploreTopicsPage.spec.tsx b/packages/shared/src/components/explore/ExploreTopicsPage.spec.tsx
new file mode 100644
index 0000000000..9fb66c556e
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTopicsPage.spec.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
+import { TestBootProvider } from '../../../__tests__/helpers/boot';
+import { ExploreTopicsPage } from './ExploreTopicsPage';
+import type { Keyword } from '../../graphql/keywords';
+
+const makeTag = (value: string): Keyword => ({
+  value,
+  occurrences: 1,
+  status: 'allow',
+});
+
+const renderComponent = () =>
+  render(
+    <TestBootProvider client={new QueryClient()}>
+      <ExploreTopicsPage
+        tags={[makeTag('react'), makeTag('vue')]}
+        trendingTags={[makeTag('react')]}
+        popularTags={[makeTag('vue')]}
+      />
+    </TestBootProvider>,
+  );
+
+const getLetterSection = (letter: string): HTMLElement => {
+  const section = screen
+    .getByRole('heading', { name: letter })
+    .closest('section');
+  if (!section) {
+    throw new Error(`letter section ${letter} not found`);
+  }
+  return section;
+};
+
+describe('ExploreTopicsPage', () => {
+  it('should render the explore hero and search', () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole('heading', { name: 'Explore tags' }),
+    ).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search all tags')).toBeInTheDocument();
+  });
+
+  it('should render an A–Z filter with enabled letters for present tags', () => {
+    renderComponent();
+
+    expect(screen.getByRole('button', { name: 'All' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'r' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'v' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'a' })).toBeDisabled();
+  });
+
+  it('should group tags alphabetically by first letter', () => {
+    renderComponent();
+
+    expect(
+      within(getLetterSection('r')).getByText('React'),
+    ).toBeInTheDocument();
+    expect(within(getLetterSection('v')).getByText('Vue')).toBeInTheDocument();
+  });
+
+  it('should link topic entries to the explore topic page', () => {
+    renderComponent();
+
+    expect(
+      within(getLetterSection('r')).getByText('React').closest('a'),
+    ).toHaveAttribute('href', expect.stringContaining('tags/react'));
+  });
+
+  it('should filter the directory to a single letter', () => {
+    renderComponent();
+
+    fireEvent.click(screen.getByRole('button', { name: 'v' }));
+
+    expect(
+      screen.queryByRole('heading', { name: 'r' }),
+    ).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'v' })).toBeInTheDocument();
+  });
+
+  it('should render the trending / popular / recently added lists', () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole('heading', { name: /Trending tags/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /Popular tags/ }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /Recently added tags/ }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/packages/shared/src/components/explore/ExploreTopicsPage.tsx b/packages/shared/src/components/explore/ExploreTopicsPage.tsx
new file mode 100644
index 0000000000..0e1342509b
--- /dev/null
+++ b/packages/shared/src/components/explore/ExploreTopicsPage.tsx
@@ -0,0 +1,381 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import type { Keyword } from '../../graphql/keywords';
+import type { TagCategory } from '../../graphql/feedSettings';
+import useFeedSettings from '../../hooks/useFeedSettings';
+import useTagAndSource from '../../hooks/useTagAndSource';
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useViewSize, ViewSize } from '../../hooks';
+import { useOnboardingActions } from '../../hooks/auth/useOnboardingActions';
+import { AuthenticationBanner } from '../auth/AuthenticationBanner';
+import { AuthTriggers } from '../../lib/auth';
+import { Origin } from '../../lib/log';
+import { ExploreCategorySection } from './ExploreCategorySection';
+import { ExploreTopicSearch } from './ExploreTopicSearch';
+import { ExploreHeader } from './ExploreHeader';
+import { ExploreTagListItem } from './ExploreTagListItem';
+import { ExploreSignupCard } from './ExploreSignupCard';
+import { useChipBarNavigation } from './useChipBarNavigation';
+import { ClickableText } from '../buttons/ClickableText';
+import {
+  Typography,
+  TypographyColor,
+  TypographyTag,
+  TypographyType,
+} from '../typography/Typography';
+
+interface ExploreTopicsPageProps {
+  tags: Keyword[];
+  trendingTags: Keyword[];
+  popularTags: Keyword[];
+  // Kept for future category browsing; the directory is alphabetical for now.
+  tagsCategories?: TagCategory[];
+}
+
+const OTHER_LETTER = '#';
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split('');
+const LETTERS = [...ALPHABET, OTHER_LETTER];
+// Initial cap per letter (~10 per column across 4 columns) before "Show all".
+const LETTER_LIMIT = 40;
+const COLUMNS = 'columns-2 gap-x-10 tablet:columns-3 laptop:columns-4';
+
+const firstLetterOf = (value: string): string => {
+  const raw = value[0]?.toLowerCase() ?? OTHER_LETTER;
+  return /^[a-z]$/.test(raw) ? raw : OTHER_LETTER;
+};
+
+const toTagValues = (items?: Keyword[]): string[] =>
+  items?.map((item) => item.value).filter(Boolean) ?? [];
+
+export function ExploreTopicsPage({
+  tags,
+  trendingTags,
+  popularTags,
+}: ExploreTopicsPageProps): ReactElement {
+  const { feedSettings } = useFeedSettings();
+  const { user, showLogin } = useAuthContext();
+  const { shouldShowAuthBanner } = useOnboardingActions();
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const { onFollowTags, onUnfollowTags } = useTagAndSource({
+    origin: Origin.TagsFilter,
+  });
+  const { ref: letterNavRef, onKeyDown: onLetterNavKeyDown } =
+    useChipBarNavigation();
+  const [activeLetter, setActiveLetter] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [expandedLetters, setExpandedLetters] = useState<Set<string>>(
+    () => new Set(),
+  );
+
+  const toggleLetterExpanded = (letter: string): void =>
+    setExpandedLetters((prev) => {
+      const next = new Set(prev);
+      if (next.has(letter)) {
+        next.delete(letter);
+      } else {
+        next.add(letter);
+      }
+      return next;
+    });
+
+  const followedTags = useMemo(
+    () => new Set(feedSettings?.includeTags ?? []),
+    [feedSettings?.includeTags],
+  );
+
+  const onToggleFollow = useCallback(
+    (tag: string): void => {
+      if (!user) {
+        showLogin({ trigger: AuthTriggers.Filter });
+        return;
+      }
+      if (followedTags.has(tag)) {
+        onUnfollowTags({ tags: [tag] });
+      } else {
+        onFollowTags({ tags: [tag] });
+      }
+    },
+    [user, showLogin, followedTags, onFollowTags, onUnfollowTags],
+  );
+
+  const tagsByLetter = useMemo<Record<string, Keyword[]>>(() => {
+    const grouped =
+      tags?.reduce<Record<string, Keyword[]>>((acc, tag) => {
+        const letter = firstLetterOf(tag.value);
+        (acc[letter] ||= []).push(tag);
+        return acc;
+      }, {}) ?? {};
+    Object.values(grouped).forEach((group) =>
+      group.sort((a, b) => a.value.localeCompare(b.value)),
+    );
+    return grouped;
+  }, [tags]);
+
+  const availableLetters = useMemo(
+    () => LETTERS.filter((letter) => tagsByLetter[letter]?.length),
+    [tagsByLetter],
+  );
+
+  const visibleLetters =
+    activeLetter && tagsByLetter[activeLetter]?.length
+      ? [activeLetter]
+      : availableLetters;
+
+  // Live, client-side filtering of the directory as the user types.
+  const normalizedSearch = search.trim().toLowerCase();
+  const isSearching = normalizedSearch.length > 0;
+  const searchResults = useMemo(() => {
+    if (!isSearching) {
+      return [];
+    }
+    return (tags ?? [])
+      .filter((tag) => tag.value.toLowerCase().includes(normalizedSearch))
+      .sort((a, b) => a.value.localeCompare(b.value))
+      .slice(0, 120);
+  }, [tags, isSearching, normalizedSearch]);
+
+  const recentlyAddedTags = useMemo(
+    () =>
+      tags
+        ?.slice()
+        .sort(
+          (a, b) => +new Date(b.createdAt ?? 0) - +new Date(a.createdAt ?? 0),
+        )
+        .slice(0, 10) ?? [],
+    [tags],
+  );
+
+  // Trending / popular / recently-added, shaped like categories so they share
+  // the directory's flat column treatment.
+  const featuredLists = useMemo<TagCategory[]>(() => {
+    const lists: TagCategory[] = [];
+    if (trendingTags?.length) {
+      lists.push({
+        id: 'trending-tags',
+        title: 'Trending tags',
+        emoji: '',
+        tags: toTagValues(trendingTags),
+      });
+    }
+    if (popularTags?.length) {
+      lists.push({
+        id: 'popular-tags',
+        title: 'Popular tags',
+        emoji: '',
+        tags: toTagValues(popularTags),
+      });
+    }
+    if (recentlyAddedTags?.length) {
+      lists.push({
+        id: 'recently-added-tags',
+        title: 'Recently added tags',
+        emoji: '',
+        tags: toTagValues(recentlyAddedTags),
+      });
+    }
+    return lists;
+  }, [trendingTags, popularTags, recentlyAddedTags]);
+
+  const recommendedTags = useMemo(
+    () => popularTags?.slice(0, 5).map((tag) => tag.value) ?? [],
+    [popularTags],
+  );
+
+  const letterButtonClass = (isActive: boolean, isDisabled: boolean): string =>
+    classNames(
+      'flex h-8 min-w-8 items-center justify-center rounded-10 border border-transparent px-2 font-bold uppercase transition-colors typo-footnote',
+      isDisabled && 'cursor-default text-text-disabled',
+      !isDisabled &&
+        !isActive &&
+        'text-text-tertiary hover:bg-surface-hover hover:text-text-primary',
+      isActive &&
+        'border-border-subtlest-tertiary bg-surface-float text-text-primary',
+    );
+
+  return (
+    <>
+      {/* Tabbed page header (same design as the Squad directory). */}
+      <ExploreHeader
+        recommendedTags={popularTags?.map((tag) => tag.value) ?? []}
+      />
+
+      <div className="mx-auto flex w-full max-w-screen-laptop flex-col items-center px-4 py-10 tablet:px-6">
+        {/* Hero */}
+        <header className="flex w-full max-w-screen-tablet flex-col items-center gap-5 text-center">
+          <Typography
+            tag={TypographyTag.H1}
+            type={TypographyType.LargeTitle}
+            color={TypographyColor.Primary}
+            bold
+          >
+            Explore tags
+          </Typography>
+          <Typography
+            type={TypographyType.Body}
+            color={TypographyColor.Secondary}
+            className="max-w-[34rem]"
+          >
+            Browse the tags millions of developers follow on daily.dev. Search,
+            jump to any letter, and follow the ones that matter to you.
+          </Typography>
+          <ExploreTopicSearch
+            onQueryChange={setSearch}
+            recommendedTags={recommendedTags}
+            className="w-full"
+          />
+        </header>
+
+        {/* Compact, feed-native signup nudge for logged-out visitors. */}
+        <ExploreSignupCard className="mt-8 w-full" />
+
+        {isSearching ? (
+          <section className="mt-10 w-full">
+            <Typography
+              tag={TypographyTag.H2}
+              type={TypographyType.Title3}
+              color={TypographyColor.Primary}
+              bold
+              className="mb-4"
+            >
+              {searchResults.length > 0
+                ? `Results for “${search.trim()}”`
+                : `No tags match “${search.trim()}”`}
+            </Typography>
+            {searchResults.length > 0 && (
+              <ul className={COLUMNS}>
+                {searchResults.map((tag) => (
+                  <ExploreTagListItem
+                    key={tag.value}
+                    tag={tag.value}
+                    isFollowed={followedTags.has(tag.value)}
+                    onToggleFollow={onToggleFollow}
+                  />
+                ))}
+              </ul>
+            )}
+          </section>
+        ) : (
+          <>
+            {/* A–Z filter — narrows the directory below to a single letter. */}
+            {availableLetters.length > 0 && (
+              <nav aria-label="Filter tags by letter" className="mt-8 w-full">
+                <div
+                  ref={letterNavRef}
+                  onKeyDown={onLetterNavKeyDown}
+                  role="toolbar"
+                  aria-orientation="horizontal"
+                  className="flex flex-wrap items-center justify-center gap-1"
+                >
+                  <button
+                    type="button"
+                    onClick={() => setActiveLetter(null)}
+                    aria-pressed={!activeLetter}
+                    className={letterButtonClass(!activeLetter, false)}
+                  >
+                    All
+                  </button>
+                  {LETTERS.map((letter) => {
+                    const isDisabled = !tagsByLetter[letter]?.length;
+                    const isActive = activeLetter === letter;
+                    return (
+                      <button
+                        key={letter}
+                        type="button"
+                        disabled={isDisabled}
+                        aria-pressed={isActive}
+                        onClick={() =>
+                          setActiveLetter(isActive ? null : letter)
+                        }
+                        className={letterButtonClass(isActive, isDisabled)}
+                      >
+                        {letter}
+                      </button>
+                    );
+                  })}
+                </div>
+              </nav>
+            )}
+
+            <div className="my-10 h-px w-full bg-border-subtlest-tertiary" />
+
+            {/* Featured — trending / popular / recently added. Hidden once a
+              letter is selected so the letter's tags sit under the A–Z filter. */}
+            {!activeLetter && featuredLists.length > 0 && (
+              <div className="mb-10 grid w-full grid-cols-1 gap-x-10 tablet:grid-cols-2 laptop:grid-cols-3">
+                {featuredLists.map((list) => (
+                  <ExploreCategorySection
+                    key={list.id}
+                    category={list}
+                    followedTags={followedTags}
+                    onToggleFollow={onToggleFollow}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Directory — all tags grouped alphabetically. */}
+            <div className="flex w-full flex-col gap-10">
+              {visibleLetters.map((letter) => {
+                const group = tagsByLetter[letter] ?? [];
+                const isExpanded = expandedLetters.has(letter);
+                const shown = isExpanded ? group : group.slice(0, LETTER_LIMIT);
+                const hasMore = group.length > LETTER_LIMIT;
+
+                return (
+                  <section
+                    key={letter}
+                    id={`explore-letter-${letter}`}
+                    className="scroll-mt-24"
+                  >
+                    <div className="mb-4 flex items-center gap-3">
+                      <Typography
+                        tag={TypographyTag.H2}
+                        type={TypographyType.Title2}
+                        color={TypographyColor.Primary}
+                        bold
+                        className="uppercase"
+                      >
+                        {letter}
+                      </Typography>
+                      {/* Skip the heading rule when filtered to one letter so
+                          it doesn't double up with the separator above. */}
+                      {!activeLetter && (
+                        <div className="h-px flex-1 bg-border-subtlest-tertiary" />
+                      )}
+                    </div>
+                    <ul className={COLUMNS}>
+                      {shown.map((tag) => (
+                        <ExploreTagListItem
+                          key={tag.value}
+                          tag={tag.value}
+                          isFollowed={followedTags.has(tag.value)}
+                          onToggleFollow={onToggleFollow}
+                        />
+                      ))}
+                    </ul>
+                    {hasMore && (
+                      <ClickableText
+                        tag="button"
+                        type="button"
+                        onClick={() => toggleLetterExpanded(letter)}
+                        className="mt-3 w-fit"
+                      >
+                        {isExpanded
+                          ? 'Show less'
+                          : `Show all ${group.length} tags`}
+                      </ClickableText>
+                    )}
+                  </section>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Signup banner pinned to the bottom for logged-out visitors. */}
+      {shouldShowAuthBanner && isLaptop && <AuthenticationBanner />}
+    </>
+  );
+}
diff --git a/packages/shared/src/components/explore/useChipBarNavigation.ts b/packages/shared/src/components/explore/useChipBarNavigation.ts
new file mode 100644
index 0000000000..1b3b0db7cb
--- /dev/null
+++ b/packages/shared/src/components/explore/useChipBarNavigation.ts
@@ -0,0 +1,82 @@
+import type { KeyboardEvent, RefObject } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+const CHIP_SELECTOR = 'a[href], button:not([disabled])';
+
+interface ChipBarNavigation<T extends HTMLElement> {
+  ref: RefObject<T>;
+  onKeyDown: (event: KeyboardEvent<T>) => void;
+}
+
+// Roving-tabindex keyboard navigation for a horizontal chip/tab bar
+// (W3C APG toolbar/tabs pattern): only one chip is in the tab order at a time,
+// Left/Right move between chips, Home/End jump to the ends. Up/Down are left
+// alone so they keep scrolling the page.
+export function useChipBarNavigation<
+  T extends HTMLElement = HTMLDivElement,
+>(): ChipBarNavigation<T> {
+  const ref = useRef<T>(null);
+
+  const getChips = useCallback(
+    (): HTMLElement[] =>
+      Array.from(
+        ref.current?.querySelectorAll<HTMLElement>(CHIP_SELECTOR) ?? [],
+      ),
+    [],
+  );
+
+  // Keep exactly one chip tabbable: the active one (aria-current), else the first.
+  useEffect(() => {
+    const chips = getChips();
+    if (!chips.length) {
+      return;
+    }
+    const current = chips.findIndex(
+      (chip) => chip.getAttribute('aria-current') === 'page',
+    );
+    const tabbable = current >= 0 ? current : 0;
+    chips.forEach((chip, index) => {
+      chip.setAttribute('tabindex', index === tabbable ? '0' : '-1');
+    });
+  });
+
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent<T>): void => {
+      const chips = getChips();
+      if (!chips.length) {
+        return;
+      }
+      const currentIndex = chips.indexOf(document.activeElement as HTMLElement);
+      if (currentIndex === -1) {
+        return;
+      }
+
+      let nextIndex = currentIndex;
+      switch (event.key) {
+        case 'ArrowRight':
+          nextIndex = (currentIndex + 1) % chips.length;
+          break;
+        case 'ArrowLeft':
+          nextIndex = (currentIndex - 1 + chips.length) % chips.length;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = chips.length - 1;
+          break;
+        default:
+          return;
+      }
+
+      event.preventDefault();
+      chips.forEach((chip, index) => {
+        chip.setAttribute('tabindex', index === nextIndex ? '0' : '-1');
+      });
+      chips[nextIndex].focus();
+    },
+    [getChips],
+  );
+
+  return { ref, onKeyDown };
+}
diff --git a/packages/shared/src/components/feeds/FeedNav.tsx b/packages/shared/src/components/feeds/FeedNav.tsx
index a89397c76e..dfa88a0afe 100644
--- a/packages/shared/src/components/feeds/FeedNav.tsx
+++ b/packages/shared/src/components/feeds/FeedNav.tsx
@@ -5,8 +5,10 @@ import { useRouter } from 'next/router';
 import { Tab, TabContainer } from '../tabs/TabContainer';
 import UnifiedMobileFeedNav from './UnifiedMobileFeedNav';
 import { useConditionalFeature } from '../../hooks/useConditionalFeature';
+import { useFeature } from '../GrowthBookProvider';
 import {
   FeedChipsVariant,
+  featureExploreTopics,
   featureFeedChips,
 } from '../../lib/featureManagement';
 import { useActiveFeedNameContext } from '../../contexts';
@@ -43,6 +45,7 @@ enum FeedNavTab {
   ForYou = 'For you',
   Popular = 'Popular',
   Tags = 'Tags',
+  Explore = 'Explore',
   Sources = 'Sources',
   Leaderboard = 'Leaderboard',
   Bookmarks = 'Bookmarks',
@@ -82,6 +85,7 @@ function FeedNav(): ReactElement | null {
   const { feeds } = useFeeds();
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
+  const isExplore = useFeature(featureExploreTopics);
   const isForYouTab =
     router.pathname === webappUrl || router.pathname === `${webappUrl}my-feed`;
   const { plusEntryForYou } = usePlusEntry();
@@ -125,7 +129,7 @@ function FeedNav(): ReactElement | null {
       [`${webappUrl}following`]: FeedNavTab.Following,
       [`${webappUrl}posts`]: FeedNavTab.Popular,
       [`${webappUrl}${OtherFeedPage.Discussed}`]: FeedNavTab.Discussions,
-      [`${webappUrl}tags`]: FeedNavTab.Tags,
+      [`${webappUrl}tags`]: isExplore ? FeedNavTab.Explore : FeedNavTab.Tags,
       [`${webappUrl}sources`]: FeedNavTab.Sources,
       [`${webappUrl}users`]: FeedNavTab.Leaderboard,
     };
@@ -135,6 +139,7 @@ function FeedNav(): ReactElement | null {
     router.pathname,
     defaultFeedId,
     isCustomDefaultFeed,
+    isExplore,
   ]);
 
   const shouldRenderNav = home || (isMobile && bookmarks);
diff --git a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
index 9d4cac756e..2df7203775 100644
--- a/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
+++ b/packages/shared/src/components/feeds/UnifiedMobileFeedNav.tsx
@@ -14,6 +14,8 @@ import { useLogContext } from '../../contexts/LogContext';
 import { LogEvent } from '../../lib/log';
 import { NewStripCta } from './NewStripCta';
 import { findActiveChipId } from './exploreCategories';
+import { useFeature } from '../GrowthBookProvider';
+import { featureExploreTopics } from '../../lib/featureManagement';
 
 type ChipGroup = 'forYou' | 'categories' | 'rest';
 
@@ -47,6 +49,7 @@ function UnifiedMobileFeedNav(): ReactElement {
   const { isCustomDefaultFeed, defaultFeedId } = useCustomDefaultFeed();
   const sortedFeeds = useSortedFeeds({ edges: feeds?.edges });
   const { logEvent } = useLogContext();
+  const isExplore = useFeature(featureExploreTopics);
 
   const items: ChipItem[] = useMemo(() => {
     const list: ChipItem[] = [];
@@ -134,8 +137,9 @@ function UnifiedMobileFeedNav(): ReactElement {
       },
       {
         id: 'tags',
-        label: 'Tags',
+        label: isExplore ? 'Explore' : 'Tags',
         href: `${webappUrl}tags`,
+        matchPaths: [`${webappUrl}tags`, `${webappUrl}explore`],
         group: 'rest',
       },
       {
@@ -192,6 +196,7 @@ function UnifiedMobileFeedNav(): ReactElement {
     sortedFeeds,
     defaultFeedId,
     shouldHideGameCenter,
+    isExplore,
   ]);
 
   const activeId = useMemo(
diff --git a/packages/shared/src/components/tags/TagChip.tsx b/packages/shared/src/components/tags/TagChip.tsx
index 1601047fff..d20573a7c1 100644
--- a/packages/shared/src/components/tags/TagChip.tsx
+++ b/packages/shared/src/components/tags/TagChip.tsx
@@ -22,6 +22,9 @@ interface TagChipProps {
   onFollow?: (tag: string) => void;
   size?: TagChipSize;
   className?: string;
+  // Override the destination (defaults to the /tags page). The Explore
+  // surfaces pass the /explore equivalent so chips stay on-brand.
+  link?: string;
 }
 
 const SizeMap: Record<
@@ -72,11 +75,13 @@ const SizeMap: Record<
 const TagLabel = ({
   tag,
   type,
+  link,
 }: {
   tag: string;
   type: TypographyType;
+  link?: string;
 }): ReactElement => (
-  <Link href={getTagPageLink(tag)} passHref prefetch={false}>
+  <Link href={link ?? getTagPageLink(tag)} passHref prefetch={false}>
     <Typography
       tag={TypographyTag.Link}
       type={type}
@@ -95,6 +100,7 @@ export const TagChip = ({
   onFollow,
   size = 'sm',
   className,
+  link,
 }: TagChipProps): ReactElement => {
   const cfg = SizeMap[size];
 
@@ -110,7 +116,7 @@ export const TagChip = ({
           className,
         )}
       >
-        <TagLabel tag={tag} type={cfg.typography} />
+        <TagLabel tag={tag} type={cfg.typography} link={link} />
       </span>
     );
   }
@@ -128,7 +134,7 @@ export const TagChip = ({
         className,
       )}
     >
-      <TagLabel tag={tag} type={cfg.typography} />
+      <TagLabel tag={tag} type={cfg.typography} link={link} />
       {showAction && (
         <>
           <span
diff --git a/packages/shared/src/graphql/feedSettings.ts b/packages/shared/src/graphql/feedSettings.ts
index 3da4c010f2..c7798472df 100644
--- a/packages/shared/src/graphql/feedSettings.ts
+++ b/packages/shared/src/graphql/feedSettings.ts
@@ -86,6 +86,19 @@ export const SEARCH_TAGS_QUERY = gql`
   }
 `;
 
+// Standalone fetch of the tag categories, independent of feed settings, so the
+// Explore lobby can group topics for logged-out visitors too.
+export const TAGS_CATEGORIES_QUERY = gql`
+  query TagsCategories {
+    tagsCategories {
+      id
+      title
+      tags
+      emoji
+    }
+  }
+`;
+
 export const FEED_SETTINGS_QUERY = gql`
   query FeedPreferences($feedId: ID) {
     tagsCategories {
diff --git a/packages/shared/src/graphql/keywords.ts b/packages/shared/src/graphql/keywords.ts
index 8308e96a20..6bdf65120c 100644
--- a/packages/shared/src/graphql/keywords.ts
+++ b/packages/shared/src/graphql/keywords.ts
@@ -15,6 +15,10 @@ export interface Keyword {
   status: KeywordStatus;
   flags?: KeywordFlags;
   createdAt?: Date;
+  // Backend dependency: not yet exposed by the API. The Explore topic header
+  // renders the followers stat only when this is present, so it lights up
+  // automatically once the field is added to KEYWORD_QUERY.
+  followers?: number;
 }
 
 export interface Tag {
diff --git a/packages/shared/src/graphql/sources.ts b/packages/shared/src/graphql/sources.ts
index 6f863ca405..ed04ed9cef 100644
--- a/packages/shared/src/graphql/sources.ts
+++ b/packages/shared/src/graphql/sources.ts
@@ -173,6 +173,10 @@ export const SOURCES_BY_TAG_QUERY = gql`
       edges {
         node {
           ...SourceDirectoryInfo
+          membersCount
+          flags {
+            totalUpvotes
+          }
         }
       }
     }
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index e34256aeed..e995a6c803 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -219,6 +219,10 @@ export const featurePostHighlightCards = new Feature(
   false,
 );
 
+// Medium-style Explore topics surface (/explore lobby + /explore/[tag]).
+// Defaults ON so the redesign can be reviewed before the experiment is live.
+export const featureExploreTopics = new Feature('explore_topics_v2', true);
+
 export const featureOnboardingPermissionPrimer = new Feature(
   'onboarding_permission_primer',
   false,
diff --git a/packages/shared/src/lib/links.ts b/packages/shared/src/lib/links.ts
index 16b206b185..9d6d10fa51 100644
--- a/packages/shared/src/lib/links.ts
+++ b/packages/shared/src/lib/links.ts
@@ -22,6 +22,9 @@ export const urlParseSchema = z.preprocess(
 export const getTagPageLink = (tag: string): string =>
   `${process.env.NEXT_PUBLIC_WEBAPP_URL}tags/${encodeURIComponent(tag)}`;
 
+export const getExploreTagPageLink = (tag: string): string =>
+  `${process.env.NEXT_PUBLIC_WEBAPP_URL}explore/${encodeURIComponent(tag)}`;
+
 export function isValidHttpUrl(link: string): boolean {
   try {
     const url = new URL(link);
diff --git a/packages/webapp/__tests__/TagPage.tsx b/packages/webapp/__tests__/TagPage.tsx
index 1fc2989922..dc52ce6cb9 100644
--- a/packages/webapp/__tests__/TagPage.tsx
+++ b/packages/webapp/__tests__/TagPage.tsx
@@ -173,6 +173,10 @@ const renderComponent = (
     optOutReadingStreak: false,
     optOutLevelSystem: false,
     optOutQuestSystem: false,
+    optOutAchievements: false,
+    isGamificationEnabled: true,
+    toggleOptOutAchievements: jest.fn().mockResolvedValue(undefined),
+    toggleAllGamification: jest.fn().mockResolvedValue(undefined),
     optOutCompanion: false,
     autoDismissNotifications: true,
     sortCommentsBy: SortCommentsBy.OldestFirst,
@@ -228,6 +232,7 @@ const renderComponent = (
               topPosts={[]}
               recommendedTags={[]}
               topContributors={topContributors}
+              seo={{}}
             />
           </SettingsContext.Provider>
         </AlertContextProvider>
@@ -307,10 +312,10 @@ it('should show login popup when logged-out on follow click', async () => {
   expect(showLogin).toBeCalledTimes(1);
 });
 
-it('should render top contributors section from static props', async () => {
+it('should render who to follow section from static props', async () => {
   renderComponent(undefined, defaultUser, initialDataObj, [topContributor]);
 
-  expect(await screen.findByText('👥 Top contributors')).toBeInTheDocument();
+  expect(await screen.findByText('Who to follow')).toBeInTheDocument();
   expect(screen.getByText('Ido').closest('a')).toHaveAttribute(
     'href',
     '/idoshamun',
diff --git a/packages/webapp/lib/topicPage.ts b/packages/webapp/lib/topicPage.ts
new file mode 100644
index 0000000000..78674fa17f
--- /dev/null
+++ b/packages/webapp/lib/topicPage.ts
@@ -0,0 +1,192 @@
+import type { GetStaticPropsResult } from 'next';
+import type { NextSeoProps } from 'next-seo';
+import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords';
+import { KEYWORD_QUERY } from '@dailydotdev/shared/src/graphql/keywords';
+import type {
+  TopPost,
+  TopPostsData,
+} from '@dailydotdev/shared/src/graphql/feed';
+import { TAG_TOP_POSTS_QUERY } from '@dailydotdev/shared/src/graphql/feed';
+import type { TagsData } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { GET_RECOMMENDED_TAGS_QUERY } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { TOP_CREATORS_BY_TAG_QUERY } from '@dailydotdev/shared/src/graphql/users';
+import type { UserShortProfile } from '@dailydotdev/shared/src/lib/user';
+import { gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import { getPageSeoTitles } from '../components/layouts/utils';
+import { defaultOpenGraph, defaultSeo } from '../next-seo';
+import { getAppOrigin } from './seo';
+
+const appOrigin = getAppOrigin();
+
+export interface TopicPageProps {
+  tag: string;
+  initialData: Keyword | null;
+  topPosts: TopPost[];
+  recommendedTags: TagsData['tags'];
+  topContributors: UserShortProfile[];
+  seo: NextSeoProps;
+}
+
+export const getTopicSeoData = (
+  tag: string,
+  title: string,
+  description = `Find all the recent posts, videos, updates and discussions about ${title}`,
+): NextSeoProps => {
+  const seoTitles = getPageSeoTitles(`${title} posts`);
+  // Both /tags/[tag] and /explore/[tag] render this surface; /tags is canonical
+  // (the standalone /explore feed is a separate page) so search engines dedupe.
+  const canonical = `${appOrigin}/tags/${encodeURIComponent(tag)}`;
+
+  return {
+    ...defaultSeo,
+    ...seoTitles,
+    canonical,
+    openGraph: {
+      ...defaultOpenGraph,
+      ...seoTitles.openGraph,
+      url: canonical,
+    },
+    description,
+  };
+};
+
+// Shared data-fetch for both /tags/[tag] and /explore/[tag]. `basePath` only
+// affects the breadcrumb/canonical URL used in the JSON-LD.
+export const getTopicPageStaticProps = async (
+  tag: string | undefined,
+): Promise<GetStaticPropsResult<TopicPageProps>> => {
+  if (!tag) {
+    return { notFound: true, revalidate: 3600 };
+  }
+
+  const notFoundResponse: GetStaticPropsResult<TopicPageProps> = {
+    revalidate: 3600,
+    props: {
+      tag,
+      initialData: null,
+      topPosts: [],
+      recommendedTags: [],
+      topContributors: [],
+      seo: getTopicSeoData(tag, tag),
+    },
+  };
+
+  try {
+    const [
+      keywordResult,
+      topPostsResult,
+      recommendedTagsResult,
+      topContributorsResult,
+    ] = await Promise.all([
+      gqlClient.request<{ keyword: Keyword }>(KEYWORD_QUERY, { value: tag }),
+      gqlClient
+        .request<TopPostsData>(TAG_TOP_POSTS_QUERY, { tag, first: 10 })
+        .catch(() => null),
+      gqlClient
+        .request<{ recommendedTags: TagsData }>(GET_RECOMMENDED_TAGS_QUERY, {
+          tags: [tag],
+          excludedTags: [],
+        })
+        .catch(() => null),
+      gqlClient
+        .request<{ topCreatorsByTag: UserShortProfile[] }>(
+          TOP_CREATORS_BY_TAG_QUERY,
+          { tag, limit: 6 },
+        )
+        .catch(() => null),
+    ]);
+
+    if (!keywordResult?.keyword) {
+      return notFoundResponse;
+    }
+
+    const initialData = keywordResult.keyword;
+    const topPosts =
+      topPostsResult?.page?.edges
+        ?.map((edge) => edge.node)
+        .filter((post) => !!post.title) ?? [];
+    const recommendedTags = recommendedTagsResult?.recommendedTags?.tags ?? [];
+    const topContributors = topContributorsResult?.topCreatorsByTag ?? [];
+    const seo = getTopicSeoData(
+      tag,
+      initialData.flags?.title || tag,
+      initialData.flags?.description,
+    );
+
+    return {
+      props: {
+        seo,
+        initialData,
+        tag,
+        topPosts,
+        recommendedTags,
+        topContributors,
+      },
+      revalidate: 3600,
+    };
+  } catch (error) {
+    return notFoundResponse;
+  }
+};
+
+export const getTopicPageJsonLd = ({
+  tag,
+  initialData,
+  topPosts,
+  basePath,
+}: {
+  tag: string;
+  initialData: Keyword;
+  topPosts: TopPost[];
+  basePath: 'tags' | 'explore';
+}): string => {
+  const encodedTag = encodeURIComponent(tag);
+  const tagTitle = initialData.flags?.title || tag;
+  const tagDescription =
+    initialData.flags?.description ||
+    `Find all the recent posts, videos, updates and discussions about ${tagTitle}`;
+  const tagUrl = `${appOrigin}/${basePath}/${encodedTag}`;
+  const breadcrumbLabel = basePath === 'explore' ? 'Explore' : 'Tags';
+
+  return JSON.stringify({
+    '@context': 'https://schema.org',
+    '@graph': [
+      {
+        '@type': 'CollectionPage',
+        '@id': `${tagUrl}#page`,
+        url: tagUrl,
+        name: `${tagTitle} posts on daily.dev`,
+        description: tagDescription,
+        isPartOf: { '@type': 'WebSite', url: appOrigin },
+      },
+      ...(topPosts.length
+        ? [
+            {
+              '@type': 'ItemList',
+              '@id': `${tagUrl}#items`,
+              numberOfItems: topPosts.length,
+              itemListElement: topPosts.map((post, index) => ({
+                '@type': 'ListItem',
+                position: index + 1,
+                url: `${appOrigin}/posts/${post.slug || post.id}`,
+                name: post.title || '',
+              })),
+            },
+          ]
+        : []),
+      {
+        '@type': 'BreadcrumbList',
+        itemListElement: [
+          { '@type': 'ListItem', position: 1, name: 'Home', item: appOrigin },
+          {
+            '@type': 'ListItem',
+            position: 2,
+            name: breadcrumbLabel,
+            item: `${appOrigin}/${basePath}`,
+          },
+          { '@type': 'ListItem', position: 3, name: tagTitle },
+        ],
+      },
+    ],
+  });
+};
diff --git a/packages/webapp/pages/explore/[tag].tsx b/packages/webapp/pages/explore/[tag].tsx
index 0c50bb6c1c..f81ae953c6 100644
--- a/packages/webapp/pages/explore/[tag].tsx
+++ b/packages/webapp/pages/explore/[tag].tsx
@@ -5,44 +5,66 @@ import type {
 } from 'next';
 import type { ParsedUrlQuery } from 'querystring';
 import type { ReactElement } from 'react';
-import React from 'react';
-import type { NextSeoProps } from 'next-seo';
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import { ExploreTopicPage } from '@dailydotdev/shared/src/components/explore/ExploreTopicPage';
+import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import { featureExploreTopics } from '@dailydotdev/shared/src/lib/featureManagement';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getLayout } from '../../components/layouts/FeedLayout';
+import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage';
+import type { TopicPageProps } from '../../lib/topicPage';
 import {
-  getMainFeedLayout,
-  mainFeedLayoutProps,
-} from '../../components/layouts/MainFeedPage';
-import type { DynamicSeoProps } from '../../components/common';
-import { defaultOpenGraph, defaultSeo } from '../../next-seo';
-import { getPageSeoTitles } from '../../components/layouts/utils';
-
-interface ExploreTagPageProps extends DynamicSeoProps {
-  tag: string;
-}
+  getTopicPageJsonLd,
+  getTopicPageStaticProps,
+} from '../../lib/topicPage';
 
 interface ExploreTagPageParams extends ParsedUrlQuery {
   tag: string;
 }
 
-const ExploreTagPage = (): ReactElement => <></>;
+const ExploreTagPage = ({
+  tag,
+  initialData,
+  topPosts,
+  recommendedTags,
+  topContributors,
+}: TopicPageProps): ReactElement => {
+  const router = useRouter();
+  const isExplore = useFeature(featureExploreTopics);
 
-ExploreTagPage.getLayout = getMainFeedLayout;
-ExploreTagPage.layoutProps = mainFeedLayoutProps;
+  // When the experiment is off, the topic page lives at /tags/[tag].
+  useEffect(() => {
+    if (!isExplore && tag) {
+      router.replace(`${webappUrl}tags/${encodeURIComponent(tag)}`);
+    }
+  }, [isExplore, router, tag]);
 
-export default ExploreTagPage;
+  if (!isExplore) {
+    return <></>;
+  }
 
-const getSeoData = (tag: string): NextSeoProps => {
-  const seoTitles = getPageSeoTitles(`#${tag} feed`);
-  return {
-    ...defaultSeo,
-    ...seoTitles,
-    openGraph: {
-      ...defaultOpenGraph,
-      ...seoTitles.openGraph,
-    },
-    description: `Explore #${tag} on daily.dev`,
-  };
+  const jsonLd = initialData
+    ? getTopicPageJsonLd({ tag, initialData, topPosts, basePath: 'tags' })
+    : null;
+
+  return (
+    <ExploreTopicPage
+      tag={tag}
+      initialData={initialData}
+      topPosts={topPosts}
+      recommendedTags={recommendedTags}
+      topContributors={topContributors}
+      jsonLd={jsonLd}
+    />
+  );
 };
 
+ExploreTagPage.getLayout = getLayout;
+ExploreTagPage.layoutProps = mainFeedLayoutProps;
+
+export default ExploreTagPage;
+
 export async function getStaticPaths(): Promise<GetStaticPathsResult> {
   return { paths: [], fallback: 'blocking' };
 }
@@ -50,17 +72,7 @@ export async function getStaticPaths(): Promise<GetStaticPathsResult> {
 export async function getStaticProps({
   params,
 }: GetStaticPropsContext<ExploreTagPageParams>): Promise<
-  GetStaticPropsResult<ExploreTagPageProps>
+  GetStaticPropsResult<TopicPageProps>
 > {
-  const tag = params?.tag;
-  if (!tag) {
-    return { notFound: true, revalidate: 3600 };
-  }
-  return {
-    props: {
-      tag,
-      seo: getSeoData(tag),
-    },
-    revalidate: 3600,
-  };
+  return getTopicPageStaticProps(params?.tag);
 }
diff --git a/packages/webapp/pages/explore/index.tsx b/packages/webapp/pages/explore/index.tsx
new file mode 100644
index 0000000000..dc955cdd80
--- /dev/null
+++ b/packages/webapp/pages/explore/index.tsx
@@ -0,0 +1,167 @@
+import type { ReactElement } from 'react';
+import React, { useEffect } from 'react';
+import type { GetStaticPropsResult } from 'next';
+import Head from 'next/head';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import { useRouter } from 'next/router';
+import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords';
+import { TAG_DIRECTORY_QUERY } from '@dailydotdev/shared/src/graphql/keywords';
+import type { TagCategory } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { TAGS_CATEGORIES_QUERY } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { ApiError, gqlClient } from '@dailydotdev/shared/src/graphql/common';
+import type { GraphQLError } from '@dailydotdev/shared/src/lib/errors';
+import { ExploreTopicsPage } from '@dailydotdev/shared/src/components/explore/ExploreTopicsPage';
+import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import { featureExploreTopics } from '@dailydotdev/shared/src/lib/featureManagement';
+import { webappUrl } from '@dailydotdev/shared/src/lib/constants';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { defaultOpenGraph } from '../../next-seo';
+import { getPageSeoTitles } from '../../components/layouts/utils';
+import { getAppOrigin } from '../../lib/seo';
+
+const exploreCanonical = `${getAppOrigin()}/tags`;
+const seoTitles = getPageSeoTitles('Explore tags for developers');
+const seo: NextSeoProps = {
+  title: seoTitles.title,
+  canonical: exploreCanonical,
+  openGraph: {
+    ...seoTitles.openGraph,
+    ...defaultOpenGraph,
+    url: exploreCanonical,
+  },
+  description:
+    'Explore tags on daily.dev. Search, browse by category, and follow the tags that matter to developers.',
+};
+
+interface ExplorePageProps {
+  tags: Keyword[];
+  trendingTags: Keyword[];
+  popularTags: Keyword[];
+  tagsCategories: TagCategory[];
+}
+
+const getExploreSchema = (tags: Keyword[]): string =>
+  JSON.stringify({
+    '@context': 'https://schema.org',
+    '@graph': [
+      {
+        '@type': 'CollectionPage',
+        '@id': 'https://app.daily.dev/explore#collection',
+        url: 'https://app.daily.dev/explore',
+        name: 'Explore tags for developers',
+        description: 'Explore tags on daily.dev.',
+      },
+      {
+        '@type': 'ItemList',
+        '@id': 'https://app.daily.dev/explore#items',
+        itemListElement: tags.map((tag, index) => ({
+          '@type': 'ListItem',
+          position: index + 1,
+          item: {
+            '@type': 'Thing',
+            name: tag.value,
+            url: `https://app.daily.dev/explore/${encodeURIComponent(
+              tag.value,
+            )}`,
+          },
+        })),
+      },
+    ],
+  });
+
+const ExplorePage = ({
+  tags,
+  trendingTags,
+  popularTags,
+  tagsCategories,
+}: ExplorePageProps): ReactElement => {
+  const router = useRouter();
+  const isExplore = useFeature(featureExploreTopics);
+
+  // When the experiment is off, the lobby lives at /tags — send visitors there.
+  useEffect(() => {
+    if (!isExplore) {
+      router.replace(`${webappUrl}tags`);
+    }
+  }, [isExplore, router]);
+
+  if (!isExplore || router.isFallback) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: getExploreSchema(tags.slice(0, 50)),
+          }}
+        />
+      </Head>
+      <ExploreTopicsPage
+        tags={tags}
+        trendingTags={trendingTags}
+        popularTags={popularTags}
+        tagsCategories={tagsCategories}
+      />
+    </>
+  );
+};
+
+const getExplorePageLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ExplorePage.getLayout = getExplorePageLayout;
+ExplorePage.layoutProps = {
+  screenCentered: false,
+  seo,
+};
+
+export default ExplorePage;
+
+export async function getStaticProps(): Promise<
+  GetStaticPropsResult<ExplorePageProps>
+> {
+  try {
+    const [directory, categories] = await Promise.all([
+      gqlClient.request<{
+        tags: Keyword[];
+        trendingTags: Keyword[];
+        popularTags: Keyword[];
+      }>(TAG_DIRECTORY_QUERY),
+      gqlClient
+        .request<{ tagsCategories: TagCategory[] }>(TAGS_CATEGORIES_QUERY)
+        .catch(() => null),
+    ]);
+
+    return {
+      props: {
+        tags: directory.tags,
+        trendingTags: directory.trendingTags,
+        popularTags: directory.popularTags,
+        tagsCategories: categories?.tagsCategories ?? [],
+      },
+      revalidate: 60,
+    };
+  } catch (err) {
+    const error = err as GraphQLError;
+    if (
+      [ApiError.NotFound, ApiError.Forbidden].includes(
+        error?.response?.errors?.[0]?.extensions?.code,
+      )
+    ) {
+      return {
+        props: {
+          tags: [],
+          trendingTags: [],
+          popularTags: [],
+          tagsCategories: [],
+        },
+        revalidate: 60,
+      };
+    }
+    throw err;
+  }
+}
diff --git a/packages/webapp/pages/tags/[tag].tsx b/packages/webapp/pages/tags/[tag].tsx
index 7d9d38504a..7b1c5d7054 100644
--- a/packages/webapp/pages/tags/[tag].tsx
+++ b/packages/webapp/pages/tags/[tag].tsx
@@ -19,18 +19,13 @@ import {
 } from '@dailydotdev/shared/src/components/icons';
 import useFeedSettings from '@dailydotdev/shared/src/hooks/useFeedSettings';
 import { useRouter } from 'next/router';
-import type { NextSeoProps } from 'next-seo';
 import Feed from '@dailydotdev/shared/src/components/Feed';
 import {
   MOST_DISCUSSED_FEED_QUERY,
   MOST_UPVOTED_FEED_QUERY,
   TAG_FEED_QUERY,
-  TAG_TOP_POSTS_QUERY,
-} from '@dailydotdev/shared/src/graphql/feed';
-import type {
-  TopPost,
-  TopPostsData,
 } from '@dailydotdev/shared/src/graphql/feed';
+
 import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
 import type { ButtonProps } from '@dailydotdev/shared/src/components/buttons/Button';
 import {
@@ -47,8 +42,6 @@ import {
   StaleTime,
 } from '@dailydotdev/shared/src/lib/query';
 import { LogEvent, Origin } from '@dailydotdev/shared/src/lib/log';
-import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords';
-import { KEYWORD_QUERY } from '@dailydotdev/shared/src/graphql/keywords';
 import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import { useQuery } from '@tanstack/react-query';
 import type { TagsData } from '@dailydotdev/shared/src/graphql/feedSettings';
@@ -67,7 +60,11 @@ import { ActiveFeedNameContext } from '@dailydotdev/shared/src/contexts';
 import HorizontalFeed from '@dailydotdev/shared/src/components/feeds/HorizontalFeed';
 import { PostType } from '@dailydotdev/shared/src/graphql/posts';
 import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
-import { feature } from '@dailydotdev/shared/src/lib/featureManagement';
+import {
+  feature,
+  featureExploreTopics,
+} from '@dailydotdev/shared/src/lib/featureManagement';
+import { ExploreTopicPage } from '@dailydotdev/shared/src/components/explore/ExploreTopicPage';
 import { cloudinarySourceRoadmap } from '@dailydotdev/shared/src/lib/image';
 import { anchorDefaultRel } from '@dailydotdev/shared/src/lib/strings';
 import Link from '@dailydotdev/shared/src/components/utilities/Link';
@@ -80,22 +77,15 @@ import { ContentPreferenceType } from '@dailydotdev/shared/src/graphql/contentPr
 import { TOP_CREATORS_BY_TAG_QUERY } from '@dailydotdev/shared/src/graphql/users';
 import type { UserShortProfile } from '@dailydotdev/shared/src/lib/user';
 import { SponsoredTagHero } from '@dailydotdev/shared/src/components/brand/SponsoredTagHero';
-import { getPageSeoTitles } from '../../components/layouts/utils';
 import { getLayout } from '../../components/layouts/FeedLayout';
 import { mainFeedLayoutProps } from '../../components/layouts/MainFeedPage';
-import type { DynamicSeoProps } from '../../components/common';
-import { defaultOpenGraph, defaultSeo } from '../../next-seo';
-import { getAppOrigin } from '../../lib/seo';
-
-const appOrigin = getAppOrigin();
+import type { TopicPageProps } from '../../lib/topicPage';
+import {
+  getTopicPageJsonLd,
+  getTopicPageStaticProps,
+} from '../../lib/topicPage';
 
-interface TagPageProps extends DynamicSeoProps {
-  tag: string;
-  initialData: Keyword | null;
-  topPosts: TopPost[];
-  recommendedTags: TagsData['tags'];
-  topContributors: UserShortProfile[];
-}
+type TagPageProps = TopicPageProps;
 
 interface TagRecommendedTagsProps {
   tag: string;
@@ -211,74 +201,6 @@ const TagTopContributors = ({
   );
 };
 
-const getTagPageJsonLd = ({
-  tag,
-  initialData,
-  topPosts,
-}: {
-  tag: string;
-  initialData: Keyword;
-  topPosts: TopPost[];
-}): string => {
-  const encodedTag = encodeURIComponent(tag);
-  const tagTitle = initialData.flags?.title || tag;
-  const tagDescription =
-    initialData.flags?.description ||
-    `Find all the recent posts, videos, updates and discussions about ${tagTitle}`;
-  const tagUrl = `${appOrigin}/tags/${encodedTag}`;
-
-  return JSON.stringify({
-    '@context': 'https://schema.org',
-    '@graph': [
-      {
-        '@type': 'CollectionPage',
-        '@id': `${tagUrl}#page`,
-        url: tagUrl,
-        name: `${tagTitle} posts on daily.dev`,
-        description: tagDescription,
-        isPartOf: { '@type': 'WebSite', url: appOrigin },
-      },
-      ...(topPosts.length
-        ? [
-            {
-              '@type': 'ItemList',
-              '@id': `${tagUrl}#items`,
-              numberOfItems: topPosts.length,
-              itemListElement: topPosts.map((post, index) => ({
-                '@type': 'ListItem',
-                position: index + 1,
-                url: `${appOrigin}/posts/${post.slug || post.id}`,
-                name: post.title || '',
-              })),
-            },
-          ]
-        : []),
-      {
-        '@type': 'BreadcrumbList',
-        itemListElement: [
-          {
-            '@type': 'ListItem',
-            position: 1,
-            name: 'Home',
-            item: appOrigin,
-          },
-          {
-            '@type': 'ListItem',
-            position: 2,
-            name: 'Tags',
-            item: `${appOrigin}/tags`,
-          },
-          {
-            '@type': 'ListItem',
-            position: 3,
-            name: tagTitle,
-          },
-        ],
-      },
-    ],
-  });
-};
-
 const TagPage = ({
   tag,
   initialData,
@@ -354,9 +276,10 @@ const TagPage = ({
   const { FeedPageLayoutComponent } = useFeedLayout();
   const { onFollowTags, onUnfollowTags, onBlockTags, onUnblockTags } =
     useTagAndSource({ origin: Origin.TagPage });
+  const isExplore = useFeature(featureExploreTopics);
   const title = initialData?.flags?.title || tag;
   const jsonLd = initialData
-    ? getTagPageJsonLd({ tag, initialData, topPosts })
+    ? getTopicPageJsonLd({ tag, initialData, topPosts, basePath: 'tags' })
     : null;
   const { follow, unfollow } = useContentPreference({
     showToastOnSuccess: false,
@@ -409,6 +332,19 @@ const TagPage = ({
     },
   };
 
+  if (isExplore) {
+    return (
+      <ExploreTopicPage
+        tag={tag}
+        initialData={initialData}
+        topPosts={topPosts}
+        recommendedTags={recommendedTags}
+        topContributors={topContributors}
+        jsonLd={jsonLd}
+      />
+    );
+  }
+
   return (
     <FeedPageLayoutComponent>
       {jsonLd && (
@@ -663,107 +599,10 @@ interface TagPageParams extends ParsedUrlQuery {
   tag: string;
 }
 
-const getSeoData = (
-  title: string,
-  description = `Find all the recent posts, videos, updates and discussions about ${title}`,
-): NextSeoProps => {
-  const seoTitles = getPageSeoTitles(`${title} posts`);
-
-  return {
-    ...defaultSeo,
-    ...seoTitles,
-    openGraph: {
-      ...defaultOpenGraph,
-      ...seoTitles.openGraph,
-    },
-    description,
-  };
-};
-
 export async function getStaticProps({
   params,
 }: GetStaticPropsContext<TagPageParams>): Promise<
   GetStaticPropsResult<TagPageProps>
 > {
-  const tag = params?.tag;
-  if (!tag) {
-    return { notFound: true, revalidate: 3600 };
-  }
-
-  const notFoundResponse = {
-    revalidate: 3600,
-    props: {
-      tag,
-      initialData: null,
-      topPosts: [],
-      recommendedTags: [],
-      topContributors: [],
-      seo: getSeoData(tag),
-    },
-  };
-
-  try {
-    const [
-      keywordResult,
-      topPostsResult,
-      recommendedTagsResult,
-      topContributorsResult,
-    ] = await Promise.all([
-      gqlClient.request<{ keyword: Keyword }>(KEYWORD_QUERY, {
-        value: tag,
-      }),
-      gqlClient
-        .request<TopPostsData>(TAG_TOP_POSTS_QUERY, {
-          tag,
-          first: 10,
-        })
-        .catch(() => null),
-      gqlClient
-        .request<{ recommendedTags: TagsData }>(GET_RECOMMENDED_TAGS_QUERY, {
-          tags: [tag],
-          excludedTags: [],
-        })
-        .catch(() => null),
-      gqlClient
-        .request<{ topCreatorsByTag: UserShortProfile[] }>(
-          TOP_CREATORS_BY_TAG_QUERY,
-          {
-            tag,
-            limit: 6,
-          },
-        )
-        .catch(() => null),
-    ]);
-
-    if (!keywordResult?.keyword) {
-      return notFoundResponse;
-    }
-
-    const initialData = keywordResult.keyword;
-    const topPosts =
-      topPostsResult?.page?.edges
-        ?.map((edge) => edge.node)
-        .filter((post) => !!post.title) ?? [];
-    const recommendedTags = recommendedTagsResult?.recommendedTags?.tags ?? [];
-    const topContributors = topContributorsResult?.topCreatorsByTag ?? [];
-    const seo = getSeoData(
-      initialData.flags?.title || tag,
-      initialData.flags?.description,
-    );
-
-    return {
-      props: {
-        seo,
-        initialData,
-        tag,
-        topPosts,
-        recommendedTags,
-        topContributors,
-      },
-      revalidate: 3600,
-    };
-  } catch (error) {
-    // Return fallback props for any request failure in getStaticProps.
-    return notFoundResponse;
-  }
+  return getTopicPageStaticProps(params?.tag);
 }
diff --git a/packages/webapp/pages/tags/index.tsx b/packages/webapp/pages/tags/index.tsx
index ae286e3d0c..94cb642ed3 100644
--- a/packages/webapp/pages/tags/index.tsx
+++ b/packages/webapp/pages/tags/index.tsx
@@ -5,6 +5,11 @@ import Head from 'next/head';
 import type { NextSeoProps } from 'next-seo/lib/types';
 import type { Keyword } from '@dailydotdev/shared/src/graphql/keywords';
 import { TAG_DIRECTORY_QUERY } from '@dailydotdev/shared/src/graphql/keywords';
+import type { TagCategory } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { TAGS_CATEGORIES_QUERY } from '@dailydotdev/shared/src/graphql/feedSettings';
+import { ExploreTopicsPage } from '@dailydotdev/shared/src/components/explore/ExploreTopicsPage';
+import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
+import { featureExploreTopics } from '@dailydotdev/shared/src/lib/featureManagement';
 import { TagChip } from '@dailydotdev/shared/src/components/tags/TagChip';
 import { HashtagIcon } from '@dailydotdev/shared/src/components/icons';
 import { IconSize } from '@dailydotdev/shared/src/components/Icon';
@@ -21,19 +26,27 @@ import { getLayout as getFooterNavBarLayout } from '../../components/layouts/Foo
 import { getLayout } from '../../components/layouts/MainLayout';
 import { defaultOpenGraph } from '../../next-seo';
 import { getPageSeoTitles } from '../../components/layouts/utils';
+import { getAppOrigin } from '../../lib/seo';
 
+const tagsCanonical = `${getAppOrigin()}/tags`;
 const seoTitles = getPageSeoTitles('Explore trending tags for developers');
 const seo: NextSeoProps = {
   title: seoTitles.title,
-  openGraph: { ...seoTitles.openGraph, ...defaultOpenGraph },
+  canonical: tagsCanonical,
+  openGraph: {
+    ...seoTitles.openGraph,
+    ...defaultOpenGraph,
+    url: tagsCanonical,
+  },
   description:
-    'Discover trending, popular, and new tags on daily.dev. Browse topics that matter to developers and find relevant content quickly.',
+    'Discover trending, popular, and new tags on daily.dev. Browse tags that matter to developers and find relevant content quickly.',
 };
 
 interface TagsPageProps {
   tags: Keyword[];
   trendingTags: Keyword[];
   popularTags: Keyword[];
+  tagsCategories: TagCategory[];
 }
 
 const getTagsSchemas = (tags: Keyword[]): string =>
@@ -67,10 +80,12 @@ const TagsPage = ({
   tags,
   trendingTags,
   popularTags,
+  tagsCategories,
 }: TagsPageProps): ReactElement => {
   const { isFallback: isLoading } = useRouter();
   const { isV2 } = useLayoutVariant();
   const isV2Laptop = isV2;
+  const isExplore = useFeature(featureExploreTopics);
 
   const { feedSettings } = useFeedSettings();
   const followedSet = useMemo(
@@ -121,6 +136,17 @@ const TagsPage = ({
     return <></>;
   }
 
+  if (isExplore) {
+    return (
+      <ExploreTopicsPage
+        tags={tags}
+        trendingTags={trendingTags}
+        popularTags={popularTags}
+        tagsCategories={tagsCategories}
+      />
+    );
+  }
+
   const topTagsForSchema = tags.slice(0, 50);
 
   return (
@@ -206,12 +232,18 @@ export async function getStaticProps(): Promise<
   GetStaticPropsResult<TagsPageProps>
 > {
   try {
-    const res = await gqlClient.request<TagsPageProps>(TAG_DIRECTORY_QUERY);
+    const [res, categories] = await Promise.all([
+      gqlClient.request<TagsPageProps>(TAG_DIRECTORY_QUERY),
+      gqlClient
+        .request<{ tagsCategories: TagCategory[] }>(TAGS_CATEGORIES_QUERY)
+        .catch(() => null),
+    ]);
     return {
       props: {
         tags: res.tags,
         trendingTags: res.trendingTags,
         popularTags: res.popularTags,
+        tagsCategories: categories?.tagsCategories ?? [],
       },
       revalidate: 60,
     };
@@ -227,6 +259,7 @@ export async function getStaticProps(): Promise<
           tags: [],
           trendingTags: [],
           popularTags: [],
+          tagsCategories: [],
         },
         revalidate: 60,
       };