diff --git a/packages/shared/src/components/tools/ToolBreadcrumb.tsx b/packages/shared/src/components/tools/ToolBreadcrumb.tsx
new file mode 100644
index 0000000000..ef66d86330
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolBreadcrumb.tsx
@@ -0,0 +1,73 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { AiIcon, HomeIcon } from '../icons';
+import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
+
+export interface ToolBreadcrumbProps {
+  toolPath: Tool[];
+  className?: string;
+}
+
+export const ToolBreadcrumb = ({
+  toolPath,
+  className,
+}: ToolBreadcrumbProps): ReactElement => {
+  return (
+    <nav
+      aria-label="breadcrumbs"
+      className={classNames(
+        'hidden h-10 items-center gap-0.5 px-1.5 text-surface-secondary laptop:flex',
+        className,
+      )}
+    >
+      <ol className="flex flex-1 items-center gap-0.5">
+        <li className="flex items-center gap-0.5">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            icon={<HomeIcon secondary />}
+            tag="a"
+            href={process.env.NEXT_PUBLIC_WEBAPP_URL}
+            size={ButtonSize.XSmall}
+          />
+          <span aria-hidden>/</span>
+        </li>
+        <li className="flex items-center gap-0.5">
+          <Link href="/tools" passHref>
+            <a className="flex items-center gap-1 rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+              <AiIcon className="size-4" />
+              <span>Tools</span>
+            </a>
+          </Link>
+          {toolPath.length > 0 && <span aria-hidden>/</span>}
+        </li>
+        {toolPath.map((tool, index) => {
+          const isLast = index === toolPath.length - 1;
+          return (
+            <li key={tool.id} className="flex items-center gap-0.5">
+              {isLast ? (
+                <span
+                  className="px-2 py-1 font-bold text-text-primary typo-callout"
+                  aria-current="page"
+                >
+                  {tool.name}
+                </span>
+              ) : (
+                <>
+                  <Link href={`/tools/${tool.slug}`} passHref>
+                    <a className="rounded-8 px-2 py-1 text-text-tertiary typo-callout hover:bg-surface-hover hover:text-text-primary">
+                      {tool.name}
+                    </a>
+                  </Link>
+                  <span aria-hidden>/</span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolCard.tsx b/packages/shared/src/components/tools/ToolCard.tsx
new file mode 100644
index 0000000000..4417e810fe
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolCard.tsx
@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import Link from '../utilities/Link';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolCardProps {
+  tool: Tool;
+  className?: string;
+}
+
+export const ToolCard = ({ tool, className }: ToolCardProps): ReactElement => {
+  const hasChildren = tool.children.length > 0;
+
+  return (
+    <Link href={`/tools/${tool.slug}`} passHref>
+      <a
+        className={classNames(
+          'flex flex-col rounded-16 border border-border-subtlest-tertiary bg-surface-float p-4 transition-colors hover:border-border-subtlest-secondary',
+          className,
+        )}
+      >
+        <div className="flex items-start gap-3">
+          <Image
+            className="size-12 rounded-12 object-cover"
+            src={tool.image}
+            alt={`${tool.name} logo`}
+          />
+          <div className="min-w-0 flex-1">
+            <h3 className="truncate font-bold text-text-primary typo-title3">
+              {tool.name}
+            </h3>
+            <div className="mt-1 flex items-center gap-2 text-text-tertiary typo-footnote">
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-4" />
+                {largeNumberFormat(tool.upvotes)}
+              </span>
+              {hasChildren && (
+                <>
+                  <span aria-hidden>·</span>
+                  <span>{tool.children.length} tools</span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <p className="mt-3 line-clamp-2 text-text-secondary typo-callout">
+          {tool.description}
+        </p>
+      </a>
+    </Link>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolDiscussion.tsx b/packages/shared/src/components/tools/ToolDiscussion.tsx
new file mode 100644
index 0000000000..c7389f1fa5
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolDiscussion.tsx
@@ -0,0 +1,110 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockComment } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import {
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  ButtonColor,
+} from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolDiscussionProps {
+  comments: MockComment[];
+  upvotedComments: Set<string>;
+  onUpvoteComment: (commentId: string) => void;
+  className?: string;
+}
+
+const formatTimestamp = (timestamp: string): string => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) {
+    return 'Today';
+  }
+  if (diffDays === 1) {
+    return 'Yesterday';
+  }
+  if (diffDays < 7) {
+    return `${diffDays} days ago`;
+  }
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const ToolDiscussion = ({
+  comments,
+  upvotedComments,
+  onUpvoteComment,
+  className,
+}: ToolDiscussionProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Discussion
+      </h2>
+      <div className="mb-4 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-3">
+        <textarea
+          className="w-full resize-none bg-transparent text-text-primary typo-body placeholder:text-text-quaternary focus:outline-none"
+          placeholder="Share your thoughts about this tool..."
+          rows={3}
+        />
+        <div className="mt-2 flex justify-end">
+          <Button variant={ButtonVariant.Primary} size={ButtonSize.Small}>
+            Post comment
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        {comments.map((comment) => {
+          const isUpvoted = upvotedComments.has(comment.id);
+          return (
+            <article
+              key={comment.id}
+              className="flex gap-3 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+            >
+              <Image
+                className="size-10 rounded-full object-cover"
+                src={comment.avatar}
+                alt={`${comment.username}'s avatar`}
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-bold text-text-primary typo-callout">
+                    {comment.username}
+                  </span>
+                  <span className="text-text-quaternary typo-footnote">
+                    {formatTimestamp(comment.timestamp)}
+                  </span>
+                </div>
+                <p className="mt-2 text-text-secondary typo-body">
+                  {comment.content}
+                </p>
+                <div className="mt-3">
+                  <Button
+                    variant={ButtonVariant.Tertiary}
+                    color={isUpvoted ? ButtonColor.Avocado : undefined}
+                    size={ButtonSize.XSmall}
+                    pressed={isUpvoted}
+                    onClick={() => onUpvoteComment(comment.id)}
+                    icon={<UpvoteIcon secondary={isUpvoted} />}
+                  >
+                    {largeNumberFormat(comment.upvotes + (isUpvoted ? 1 : 0))}
+                  </Button>
+                </div>
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolHeader.tsx b/packages/shared/src/components/tools/ToolHeader.tsx
new file mode 100644
index 0000000000..85e21d4169
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolHeader.tsx
@@ -0,0 +1,59 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { Tool } from '../../lib/toolsMockData';
+import { Image } from '../image/Image';
+import { Button, ButtonVariant, ButtonColor } from '../buttons/Button';
+import { UpvoteIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolHeaderProps {
+  tool: Tool;
+  isUpvoted: boolean;
+  onUpvote: () => void;
+  className?: string;
+}
+
+export const ToolHeader = ({
+  tool,
+  isUpvoted,
+  onUpvote,
+  className,
+}: ToolHeaderProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <div className="flex items-start gap-4">
+        <Image
+          className="size-16 rounded-16 object-cover laptop:size-20"
+          src={tool.image}
+          alt={`${tool.name} logo`}
+        />
+        <div className="min-w-0 flex-1">
+          <h1 className="font-bold text-text-primary typo-title1">
+            {tool.name}
+          </h1>
+          <p className="mt-2 text-text-secondary typo-body">
+            {tool.description}
+          </p>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center gap-4">
+        <Button
+          variant={ButtonVariant.Secondary}
+          color={isUpvoted ? ButtonColor.Avocado : undefined}
+          pressed={isUpvoted}
+          onClick={onUpvote}
+          icon={<UpvoteIcon secondary={isUpvoted} />}
+        >
+          {largeNumberFormat(tool.upvotes + (isUpvoted ? 1 : 0))}
+        </Button>
+        <span className="text-text-tertiary typo-callout">
+          {tool.relatedPosts.length} related posts
+        </span>
+        <span className="text-text-tertiary typo-callout">
+          {tool.comments.length} discussions
+        </span>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolRelatedContent.tsx b/packages/shared/src/components/tools/ToolRelatedContent.tsx
new file mode 100644
index 0000000000..498760ccd6
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolRelatedContent.tsx
@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { MockPost } from '../../lib/toolsMockData';
+import { UpvoteIcon, DiscussIcon } from '../icons';
+import { largeNumberFormat } from '../../lib';
+
+export interface ToolRelatedContentProps {
+  posts: MockPost[];
+  className?: string;
+}
+
+export const ToolRelatedContent = ({
+  posts,
+  className,
+}: ToolRelatedContentProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Related posts
+      </h2>
+      <div className="flex flex-col gap-3">
+        {posts.map((post) => (
+          <article
+            key={post.id}
+            className="flex flex-col gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float p-4"
+          >
+            <h3 className="font-bold text-text-primary typo-callout">
+              {post.title}
+            </h3>
+            <div className="flex items-center gap-3 text-text-tertiary typo-footnote">
+              <span>{post.source}</span>
+              <span aria-hidden>·</span>
+              <span>{post.date}</span>
+              <span className="flex items-center gap-1">
+                <UpvoteIcon className="size-3" />
+                {largeNumberFormat(post.upvotes)}
+              </span>
+              <span className="flex items-center gap-1">
+                <DiscussIcon className="size-3" />
+                {largeNumberFormat(post.comments)}
+              </span>
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/tools/ToolSentimentChart.tsx b/packages/shared/src/components/tools/ToolSentimentChart.tsx
new file mode 100644
index 0000000000..710425da74
--- /dev/null
+++ b/packages/shared/src/components/tools/ToolSentimentChart.tsx
@@ -0,0 +1,113 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import classNames from 'classnames';
+import type { SentimentDataPoint } from '../../lib/toolsMockData';
+
+export interface ToolSentimentChartProps {
+  data: SentimentDataPoint[];
+  className?: string;
+}
+
+const tickStyle = {
+  fill: 'var(--theme-text-tertiary)',
+  fontSize: '0.6875rem',
+};
+
+export const ToolSentimentChart = ({
+  data,
+  className,
+}: ToolSentimentChartProps): ReactElement => {
+  return (
+    <div className={classNames('flex flex-col', className)}>
+      <h2 className="mb-4 font-bold text-text-primary typo-title3">
+        Sentiment over time
+      </h2>
+      <div className="h-64 w-full">
+        <ResponsiveContainer>
+          <AreaChart
+            data={data}
+            margin={{
+              top: 10,
+              right: 10,
+              left: -20,
+              bottom: 0,
+            }}
+          >
+            <CartesianGrid
+              strokeDasharray="3 3"
+              stroke="var(--theme-border-subtlest-tertiary)"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="date"
+              axisLine={false}
+              tickLine={false}
+              tick={tickStyle}
+              interval="preserveStartEnd"
+            />
+            <YAxis axisLine={false} tickLine={false} tick={tickStyle} />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: 'var(--theme-background-subtle)',
+                border: '1px solid var(--theme-border-subtlest-tertiary)',
+                borderRadius: '8px',
+              }}
+              labelStyle={{ color: 'var(--theme-text-primary)' }}
+              itemStyle={{ color: 'var(--theme-text-secondary)' }}
+            />
+            <Area
+              type="monotone"
+              dataKey="positive"
+              stackId="1"
+              stroke="var(--theme-accent-avocado-default)"
+              fill="var(--theme-accent-avocado-default)"
+              fillOpacity={0.6}
+              name="Positive"
+            />
+            <Area
+              type="monotone"
+              dataKey="neutral"
+              stackId="1"
+              stroke="var(--theme-accent-cheese-default)"
+              fill="var(--theme-accent-cheese-default)"
+              fillOpacity={0.6}
+              name="Neutral"
+            />
+            <Area
+              type="monotone"
+              dataKey="negative"
+              stackId="1"
+              stroke="var(--theme-accent-ketchup-default)"
+              fill="var(--theme-accent-ketchup-default)"
+              fillOpacity={0.6}
+              name="Negative"
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+      <div className="mt-4 flex items-center justify-center gap-6">
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-avocado-default" />
+          <span className="text-text-tertiary typo-footnote">Positive</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-cheese-default" />
+          <span className="text-text-tertiary typo-footnote">Neutral</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="size-3 rounded-full bg-accent-ketchup-default" />
+          <span className="text-text-tertiary typo-footnote">Negative</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/lib/toolsMockData.ts b/packages/shared/src/lib/toolsMockData.ts
new file mode 100644
index 0000000000..95244cf684
--- /dev/null
+++ b/packages/shared/src/lib/toolsMockData.ts
@@ -0,0 +1,388 @@
+export interface SentimentDataPoint {
+  date: string;
+  positive: number;
+  negative: number;
+  neutral: number;
+}
+
+export interface MockPost {
+  id: string;
+  title: string;
+  source: string;
+  date: string;
+  upvotes: number;
+  comments: number;
+}
+
+export interface MockComment {
+  id: string;
+  userId: string;
+  username: string;
+  avatar: string;
+  content: string;
+  timestamp: string;
+  upvotes: number;
+}
+
+export interface Tool {
+  id: string;
+  name: string;
+  slug: string;
+  parentSlug: string | null;
+  description: string;
+  image: string;
+  upvotes: number;
+  children: Tool[];
+  sentimentData: SentimentDataPoint[];
+  relatedPosts: MockPost[];
+  comments: MockComment[];
+}
+
+const generateSentimentData = (
+  basePositive: number,
+  baseNegative: number,
+  baseNeutral: number,
+): SentimentDataPoint[] => {
+  const now = new Date();
+
+  return Array.from({ length: 30 }, (_, index) => {
+    const dayOffset = 29 - index;
+    const date = new Date(now);
+    date.setDate(date.getDate() - dayOffset);
+
+    const variance = () => Math.floor(Math.random() * 20) - 10;
+    return {
+      date: date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      }),
+      positive: Math.max(0, basePositive + variance()),
+      negative: Math.max(0, baseNegative + variance()),
+      neutral: Math.max(0, baseNeutral + variance()),
+    };
+  });
+};
+
+const generateMockPosts = (toolName: string): MockPost[] => [
+  {
+    id: '1',
+    title: `Getting Started with ${toolName}: A Comprehensive Guide`,
+    source: 'Dev.to',
+    date: '2024-01-15',
+    upvotes: 342,
+    comments: 45,
+  },
+  {
+    id: '2',
+    title: `${toolName} vs Competitors: An In-Depth Comparison`,
+    source: 'Medium',
+    date: '2024-01-12',
+    upvotes: 256,
+    comments: 78,
+  },
+  {
+    id: '3',
+    title: `10 Things I Wish I Knew Before Using ${toolName}`,
+    source: 'Hacker News',
+    date: '2024-01-10',
+    upvotes: 189,
+    comments: 34,
+  },
+  {
+    id: '4',
+    title: `Building Production Apps with ${toolName}`,
+    source: 'daily.dev',
+    date: '2024-01-08',
+    upvotes: 421,
+    comments: 92,
+  },
+];
+
+const generateMockComments = (): MockComment[] => [
+  {
+    id: 'c1',
+    userId: 'u1',
+    username: 'techdev42',
+    avatar: 'https://avatar.vercel.sh/techdev42',
+    content:
+      'This tool has completely changed my workflow. Highly recommend it!',
+    timestamp: '2024-01-15T10:30:00Z',
+    upvotes: 24,
+  },
+  {
+    id: 'c2',
+    userId: 'u2',
+    username: 'airesearcher',
+    avatar: 'https://avatar.vercel.sh/airesearcher',
+    content:
+      "I've been using this for 3 months now. The recent updates are impressive.",
+    timestamp: '2024-01-14T15:45:00Z',
+    upvotes: 18,
+  },
+  {
+    id: 'c3',
+    userId: 'u3',
+    username: 'devops_ninja',
+    avatar: 'https://avatar.vercel.sh/devops_ninja',
+    content:
+      'Great for prototyping, but I found some edge cases that need work.',
+    timestamp: '2024-01-13T09:20:00Z',
+    upvotes: 12,
+  },
+];
+
+export const mockTools: Tool[] = [
+  {
+    id: 'anthropic',
+    name: 'Anthropic',
+    slug: 'anthropic',
+    parentSlug: null,
+    description:
+      'AI safety company building reliable, interpretable, and steerable AI systems.',
+    image: 'https://img.icons8.com/color/96/anthropic.png',
+    upvotes: 15420,
+    sentimentData: generateSentimentData(85, 8, 45),
+    relatedPosts: generateMockPosts('Anthropic'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'anthropic-claude',
+        name: 'Claude',
+        slug: 'anthropic/claude',
+        parentSlug: 'anthropic',
+        description:
+          'AI assistant trained by Anthropic to be helpful, harmless, and honest.',
+        image: 'https://img.icons8.com/color/96/anthropic.png',
+        upvotes: 12350,
+        sentimentData: generateSentimentData(90, 5, 40),
+        relatedPosts: generateMockPosts('Claude'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'anthropic-claude-opus-4-5',
+            name: 'Opus 4.5',
+            slug: 'anthropic/claude/opus-4-5',
+            parentSlug: 'anthropic/claude',
+            description:
+              "Anthropic's most capable model with extended thinking abilities.",
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 8920,
+            sentimentData: generateSentimentData(92, 3, 35),
+            relatedPosts: generateMockPosts('Claude Opus 4.5'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'anthropic-claude-sonnet',
+            name: 'Sonnet',
+            slug: 'anthropic/claude/sonnet',
+            parentSlug: 'anthropic/claude',
+            description:
+              'Balanced model offering great performance at a lower cost.',
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 7650,
+            sentimentData: generateSentimentData(88, 6, 42),
+            relatedPosts: generateMockPosts('Claude Sonnet'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'anthropic-claude-haiku',
+            name: 'Haiku',
+            slug: 'anthropic/claude/haiku',
+            parentSlug: 'anthropic/claude',
+            description:
+              'Fast and efficient model for quick tasks and high throughput.',
+            image: 'https://img.icons8.com/color/96/anthropic.png',
+            upvotes: 5430,
+            sentimentData: generateSentimentData(82, 10, 48),
+            relatedPosts: generateMockPosts('Claude Haiku'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    slug: 'openai',
+    parentSlug: null,
+    description:
+      'AI research company developing safe artificial general intelligence.',
+    image: 'https://img.icons8.com/color/96/chatgpt.png',
+    upvotes: 18750,
+    sentimentData: generateSentimentData(80, 12, 50),
+    relatedPosts: generateMockPosts('OpenAI'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'openai-gpt',
+        name: 'GPT',
+        slug: 'openai/gpt',
+        parentSlug: 'openai',
+        description:
+          'Generative Pre-trained Transformer models for natural language processing.',
+        image: 'https://img.icons8.com/color/96/chatgpt.png',
+        upvotes: 16200,
+        sentimentData: generateSentimentData(78, 14, 52),
+        relatedPosts: generateMockPosts('GPT'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'openai-gpt-4o',
+            name: 'GPT-4o',
+            slug: 'openai/gpt/gpt-4o',
+            parentSlug: 'openai/gpt',
+            description:
+              'Multimodal model with vision, audio, and text capabilities.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 9870,
+            sentimentData: generateSentimentData(85, 8, 45),
+            relatedPosts: generateMockPosts('GPT-4o'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'openai-gpt-4',
+            name: 'GPT-4',
+            slug: 'openai/gpt/gpt-4',
+            parentSlug: 'openai/gpt',
+            description:
+              'Advanced language model with improved reasoning abilities.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 12450,
+            sentimentData: generateSentimentData(82, 10, 48),
+            relatedPosts: generateMockPosts('GPT-4'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'openai-gpt-o1',
+            name: 'o1',
+            slug: 'openai/gpt/o1',
+            parentSlug: 'openai/gpt',
+            description:
+              'Reasoning-focused model designed for complex problem solving.',
+            image: 'https://img.icons8.com/color/96/chatgpt.png',
+            upvotes: 7230,
+            sentimentData: generateSentimentData(75, 15, 55),
+            relatedPosts: generateMockPosts('o1'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'google',
+    name: 'Google',
+    slug: 'google',
+    parentSlug: null,
+    description:
+      'AI research division of Google developing cutting-edge models.',
+    image: 'https://img.icons8.com/color/96/google-logo.png',
+    upvotes: 14320,
+    sentimentData: generateSentimentData(75, 15, 55),
+    relatedPosts: generateMockPosts('Google AI'),
+    comments: generateMockComments(),
+    children: [
+      {
+        id: 'google-gemini',
+        name: 'Gemini',
+        slug: 'google/gemini',
+        parentSlug: 'google',
+        description:
+          'Multimodal AI model family built from the ground up for multimodality.',
+        image: 'https://img.icons8.com/color/96/google-gemini.png',
+        upvotes: 11890,
+        sentimentData: generateSentimentData(77, 13, 52),
+        relatedPosts: generateMockPosts('Gemini'),
+        comments: generateMockComments(),
+        children: [
+          {
+            id: 'google-gemini-ultra',
+            name: 'Ultra',
+            slug: 'google/gemini/ultra',
+            parentSlug: 'google/gemini',
+            description:
+              "Google's most capable Gemini model for highly complex tasks.",
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 6540,
+            sentimentData: generateSentimentData(72, 18, 58),
+            relatedPosts: generateMockPosts('Gemini Ultra'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'google-gemini-pro',
+            name: 'Pro',
+            slug: 'google/gemini/pro',
+            parentSlug: 'google/gemini',
+            description: 'Best performing model for a wide range of tasks.',
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 8920,
+            sentimentData: generateSentimentData(80, 12, 50),
+            relatedPosts: generateMockPosts('Gemini Pro'),
+            comments: generateMockComments(),
+            children: [],
+          },
+          {
+            id: 'google-gemini-flash',
+            name: 'Flash',
+            slug: 'google/gemini/flash',
+            parentSlug: 'google/gemini',
+            description: 'Lightweight and fast model optimized for speed.',
+            image: 'https://img.icons8.com/color/96/google-gemini.png',
+            upvotes: 5670,
+            sentimentData: generateSentimentData(78, 14, 52),
+            relatedPosts: generateMockPosts('Gemini Flash'),
+            comments: generateMockComments(),
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const searchInTools = (tools: Tool[], slug: string): Tool | null => {
+  let found: Tool | null = null;
+  tools.some((tool) => {
+    if (tool.slug === slug) {
+      found = tool;
+      return true;
+    }
+    if (tool.children.length > 0) {
+      found = searchInTools(tool.children, slug);
+      if (found) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return found;
+};
+
+export const findToolBySlug = (slug: string): Tool | null => {
+  return searchInTools(mockTools, slug);
+};
+
+export const getToolPath = (slug: string): Tool[] => {
+  const parts = slug.split('/');
+  return parts.reduce<{ path: Tool[]; currentSlug: string }>(
+    (acc, part) => {
+      const nextSlug = acc.currentSlug ? `${acc.currentSlug}/${part}` : part;
+      const tool = findToolBySlug(nextSlug);
+      if (tool) {
+        acc.path.push(tool);
+      }
+      return { ...acc, currentSlug: nextSlug };
+    },
+    { path: [], currentSlug: '' },
+  ).path;
+};
+
+export const getAllTopLevelTools = (): Tool[] => mockTools;
diff --git a/packages/webapp/components/ai-tools/ToolCard.tsx b/packages/webapp/components/ai-tools/ToolCard.tsx
new file mode 100644
index 0000000000..4921919661
--- /dev/null
+++ b/packages/webapp/components/ai-tools/ToolCard.tsx
@@ -0,0 +1,319 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { FlexCol, FlexRow } from '@dailydotdev/shared/src/components/utilities';
+import {
+  Button,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import {
+  ArrowIcon,
+  UpvoteIcon,
+  EyeIcon,
+} from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { LazyImage } from '@dailydotdev/shared/src/components/LazyImage';
+import type { AITool } from './types';
+
+interface ToolCardProps {
+  tool: AITool;
+  allTools: AITool[];
+}
+
+export const ToolCard = ({ tool, allTools }: ToolCardProps): ReactElement => {
+  const alternatives = allTools.filter((t) => tool.alternatives.includes(t.id));
+
+  return (
+    <div className="flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6 hover:border-border-subtlest-secondary">
+      {/* Header */}
+      <FlexRow className="items-start justify-between">
+        <FlexCol className="flex-1 gap-2">
+          <div className="flex items-center gap-2">
+            <Typography
+              type={TypographyType.Title3}
+              bold
+              color={TypographyColor.Primary}
+            >
+              {tool.name}
+            </Typography>
+            <span className="bg-theme-float rounded-6 px-2 py-0.5 text-xs font-bold text-text-tertiary">
+              v{tool.version}
+            </span>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            by {tool.company}
+          </Typography>
+        </FlexCol>
+
+        {/* Sentiment Score */}
+        <div className="flex flex-col items-end gap-1">
+          <div className="flex items-center gap-1">
+            <UpvoteIcon size={IconSize.Small} secondary />
+            <Typography
+              type={TypographyType.Title3}
+              bold
+              color={TypographyColor.Primary}
+            >
+              {tool.sentiment.score}%
+            </Typography>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            {tool.sentiment.totalReviews.toLocaleString()} reviews
+          </Typography>
+        </div>
+      </FlexRow>
+
+      {/* TLDR */}
+      <div className="rounded-12 border border-accent-cabbage-default bg-accent-cabbage-subtlest p-3">
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+          bold
+        >
+          💡 {tool.tldr}
+        </Typography>
+      </div>
+
+      {/* Description */}
+      <Typography type={TypographyType.Body} color={TypographyColor.Secondary}>
+        {tool.description}
+      </Typography>
+
+      {/* Pricing & Install */}
+      <FlexRow className="gap-4">
+        <div className="flex-1 rounded-12 border border-border-subtlest-tertiary p-3">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-1"
+          >
+            Pricing
+          </Typography>
+          <div className="flex items-center gap-2">
+            {tool.pricing.freeTier && (
+              <span className="bg-theme-color-cabbage rounded-6 px-2 py-0.5 text-xs font-bold text-white">
+                FREE
+              </span>
+            )}
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Primary}
+            >
+              {tool.pricing.startingPrice || 'Free'}
+            </Typography>
+          </div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            className="mt-1"
+          >
+            {tool.pricing.details}
+          </Typography>
+        </div>
+
+        {tool.install && (
+          <div className="flex-1 rounded-12 border border-border-subtlest-tertiary p-3">
+            <Typography
+              type={TypographyType.Footnote}
+              color={TypographyColor.Tertiary}
+              bold
+              className="mb-1"
+            >
+              Quick Install
+            </Typography>
+            <code className="block rounded-8 bg-surface-primary p-2 text-xs text-text-primary">
+              {tool.install.command}
+            </code>
+          </div>
+        )}
+      </FlexRow>
+
+      {/* Trending Stats */}
+      <div className="bg-theme-float flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary p-3">
+        <EyeIcon size={IconSize.Small} className="text-text-tertiary" />
+        <Typography
+          type={TypographyType.Callout}
+          color={TypographyColor.Primary}
+        >
+          <span className="font-bold">{tool.trending.mentions}</span> mentions{' '}
+          <span className="text-text-tertiary">
+            ({tool.trending.timeframe})
+          </span>
+        </Typography>
+        <span
+          className={`ml-2 text-xs font-bold ${
+            tool.trending.change > 0
+              ? 'text-theme-status-success'
+              : 'text-theme-status-error'
+          }`}
+        >
+          {tool.trending.change > 0 ? '+' : ''}
+          {tool.trending.change}%
+        </span>
+      </div>
+
+      {/* Top Users */}
+      <div>
+        <Typography
+          type={TypographyType.Footnote}
+          color={TypographyColor.Tertiary}
+          bold
+          className="mb-2"
+        >
+          Top contributors
+        </Typography>
+        <FlexRow className="gap-3">
+          {tool.topUsers.map((user) => (
+            <div
+              key={user.id}
+              className="bg-theme-bg-tertiary flex items-center gap-2 rounded-10 border border-border-subtlest-tertiary p-2 hover:border-border-subtlest-secondary"
+            >
+              <LazyImage
+                imgSrc={user.avatar}
+                imgAlt={user.username}
+                className="size-8 rounded-full"
+              />
+              <div className="flex flex-col">
+                <Typography
+                  type={TypographyType.Footnote}
+                  color={TypographyColor.Primary}
+                  bold
+                >
+                  @{user.username}
+                </Typography>
+                <Typography
+                  type={TypographyType.Footnote}
+                  color={TypographyColor.Quaternary}
+                  className="text-xs"
+                >
+                  {user.contributions} posts
+                </Typography>
+              </div>
+            </div>
+          ))}
+        </FlexRow>
+      </div>
+
+      {/* Pros & Cons */}
+      <FlexRow className="gap-4">
+        <div className="flex-1">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Pros
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {tool.pros.map((pro) => (
+              <span
+                key={pro}
+                className="border-theme-status-success bg-theme-bg-tertiary rounded-6 border px-2 py-1 text-xs text-text-secondary"
+              >
+                {pro}
+              </span>
+            ))}
+          </div>
+        </div>
+        <div className="flex-1">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Cons
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {tool.cons.map((con) => (
+              <span
+                key={con}
+                className="border-theme-status-error bg-theme-bg-tertiary rounded-6 border px-2 py-1 text-xs text-text-secondary"
+              >
+                {con}
+              </span>
+            ))}
+          </div>
+        </div>
+      </FlexRow>
+
+      {/* Alternatives */}
+      {alternatives.length > 0 && (
+        <div>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+            bold
+            className="mb-2"
+          >
+            Similar tools
+          </Typography>
+          <div className="flex flex-wrap gap-2">
+            {alternatives.map((alt) => (
+              <span
+                key={alt.id}
+                className="bg-theme-bg-tertiary cursor-pointer rounded-8 border border-border-subtlest-tertiary px-3 py-1 text-sm text-text-secondary hover:border-text-tertiary"
+              >
+                {alt.name}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Metadata & Links */}
+      <FlexRow className="items-center justify-between border-t border-border-subtlest-tertiary pt-4">
+        <div className="flex gap-4">
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Updated: {new Date(tool.metadata.lastUpdate).toLocaleDateString()}
+          </Typography>
+          <Typography
+            type={TypographyType.Footnote}
+            color={TypographyColor.Tertiary}
+          >
+            Latest: v{tool.metadata.latestVersion}
+          </Typography>
+        </div>
+        <FlexRow className="gap-2">
+          {tool.links.docs && (
+            <Button
+              variant={ButtonVariant.Tertiary}
+              tag="a"
+              href={tool.links.docs}
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<ArrowIcon className="rotate-[-45deg]" />}
+            >
+              Docs
+            </Button>
+          )}
+          <Button
+            variant={ButtonVariant.Primary}
+            tag="a"
+            href={tool.links.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            icon={<ArrowIcon className="rotate-[-45deg]" />}
+          >
+            Visit
+          </Button>
+        </FlexRow>
+      </FlexRow>
+    </div>
+  );
+};
diff --git a/packages/webapp/components/ai-tools/TrendingSection.tsx b/packages/webapp/components/ai-tools/TrendingSection.tsx
new file mode 100644
index 0000000000..6745c6ba77
--- /dev/null
+++ b/packages/webapp/components/ai-tools/TrendingSection.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import { FlexRow } from '@dailydotdev/shared/src/components/utilities';
+import type { TrendingInsight } from './types';
+
+interface TrendingSectionProps {
+  insights: TrendingInsight[];
+}
+
+export const TrendingSection = ({
+  insights,
+}: TrendingSectionProps): ReactElement => {
+  return (
+    <div className="flex flex-col gap-4 rounded-16 border border-border-subtlest-tertiary bg-surface-float p-6">
+      <Typography
+        type={TypographyType.Title3}
+        bold
+        color={TypographyColor.Primary}
+      >
+        What&apos;s happening now
+      </Typography>
+      <FlexRow className="flex-wrap gap-4">
+        {insights.map((insight) => (
+          <div
+            key={insight.toolId}
+            className="bg-theme-bg-tertiary flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary px-4 py-2"
+          >
+            <span className="text-2xl">{insight.icon}</span>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Secondary}
+            >
+              {insight.message}
+            </Typography>
+          </div>
+        ))}
+      </FlexRow>
+    </div>
+  );
+};
diff --git a/packages/webapp/components/ai-tools/mockData.ts b/packages/webapp/components/ai-tools/mockData.ts
new file mode 100644
index 0000000000..ba7ee41f2d
--- /dev/null
+++ b/packages/webapp/components/ai-tools/mockData.ts
@@ -0,0 +1,438 @@
+import type { AITool, TrendingInsight, SocialMention } from './types';
+
+export const mockTools: AITool[] = [
+  {
+    id: 'claude-opus-4-5',
+    name: 'Claude Opus 4.5',
+    version: '4.5',
+    company: 'Anthropic',
+    description:
+      'Most capable Claude model for complex coding tasks, deep technical analysis, and architectural decisions',
+    tldr: 'Best for complex coding tasks and technical architecture',
+    category: 'api',
+    pricing: {
+      freeTier: false,
+      startingPrice: '$15/million tokens',
+      details: 'Pay-as-you-go pricing, volume discounts available',
+    },
+    links: {
+      docs: 'https://docs.anthropic.com/claude/docs',
+      website: 'https://www.anthropic.com/claude',
+      changelog: 'https://docs.anthropic.com/claude/changelog',
+    },
+    sentiment: {
+      score: 96,
+      totalReviews: 3420,
+    },
+    trending: {
+      mentions: 892,
+      timeframe: 'last 24h',
+      change: 23,
+    },
+    topUsers: [
+      {
+        id: 'user1',
+        username: 'alice_dev',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=alice',
+        contributions: 145,
+      },
+      {
+        id: 'user2',
+        username: 'bob_codes',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=bob',
+        contributions: 98,
+      },
+      {
+        id: 'user3',
+        username: 'charlie_tech',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=charlie',
+        contributions: 87,
+      },
+    ],
+    pros: [
+      'Exceptional reasoning',
+      'Large context window',
+      'Strong code understanding',
+      'Detailed explanations',
+    ],
+    cons: ['Higher cost', 'No free tier', 'Rate limits on new accounts'],
+    alternatives: ['gpt-4-turbo', 'gemini-pro-1-5'],
+    metadata: {
+      lastUpdate: '2025-01-15',
+      latestVersion: '4.5',
+    },
+  },
+  {
+    id: 'claude-code',
+    name: 'Claude Code',
+    version: '1.0',
+    company: 'Anthropic',
+    description:
+      'Official CLI tool from Anthropic for AI-powered coding in your terminal with file editing, bash execution, and agentic workflows',
+    tldr: 'AI coding assistant right in your terminal',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      details: 'Free tier available, usage based on Claude API pricing',
+    },
+    install: {
+      command: 'npm install -g @anthropics/claude-code',
+      type: 'npm',
+    },
+    links: {
+      docs: 'https://docs.anthropic.com/claude-code',
+      website: 'https://claude.com/claude-code',
+    },
+    sentiment: {
+      score: 94,
+      totalReviews: 2341,
+    },
+    trending: {
+      mentions: 1456,
+      timeframe: 'last 24h',
+      change: 67,
+    },
+    topUsers: [
+      {
+        id: 'user4',
+        username: 'dev_master',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=dev',
+        contributions: 234,
+      },
+      {
+        id: 'user5',
+        username: 'code_ninja',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ninja',
+        contributions: 189,
+      },
+      {
+        id: 'user6',
+        username: 'tech_wizard',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wizard',
+        contributions: 156,
+      },
+    ],
+    pros: [
+      'Native terminal integration',
+      'Agentic workflows',
+      'File editing capabilities',
+      'Free tier',
+    ],
+    cons: [
+      'Still in beta',
+      'Limited IDE integrations',
+      'Learning curve for CLI',
+    ],
+    alternatives: ['cursor', 'aider', 'github-copilot'],
+    metadata: {
+      lastUpdate: '2026-01-28',
+      latestVersion: '1.0.0',
+    },
+  },
+  {
+    id: 'gpt-4-turbo',
+    name: 'GPT-4 Turbo',
+    version: '4-turbo',
+    company: 'OpenAI',
+    description:
+      'Fast and capable model optimized for code generation, with vision capabilities and JSON mode',
+    tldr: 'Fast, capable, with vision and structured outputs',
+    category: 'api',
+    pricing: {
+      freeTier: false,
+      startingPrice: '$10/million tokens',
+      details: 'Pay-as-you-go, cheaper than GPT-4',
+    },
+    links: {
+      docs: 'https://platform.openai.com/docs',
+      website: 'https://openai.com/gpt-4',
+    },
+    sentiment: {
+      score: 88,
+      totalReviews: 5621,
+    },
+    trending: {
+      mentions: 678,
+      timeframe: 'last 24h',
+      change: -12,
+    },
+    topUsers: [
+      {
+        id: 'user7',
+        username: 'ai_builder',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=builder',
+        contributions: 201,
+      },
+      {
+        id: 'user8',
+        username: 'prompt_pro',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=pro',
+        contributions: 167,
+      },
+    ],
+    pros: [
+      'Fast response times',
+      'Vision capabilities',
+      'JSON mode',
+      'Lower cost than GPT-4',
+    ],
+    cons: [
+      'Occasional hallucinations',
+      'Less reasoning than Opus',
+      'Rate limits',
+    ],
+    alternatives: ['claude-opus-4-5', 'gemini-pro-1-5'],
+    metadata: {
+      lastUpdate: '2025-12-10',
+      latestVersion: 'gpt-4-turbo-2024-04-09',
+    },
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    version: '0.43',
+    company: 'Anysphere',
+    description:
+      'AI-first code editor built on VS Code with native AI integration, chat, and inline editing',
+    tldr: 'VS Code fork with built-in AI superpowers',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      startingPrice: '$20/month',
+      details: 'Free tier with limited requests, Pro at $20/mo',
+    },
+    install: {
+      command: 'Download from cursor.sh',
+      type: 'download',
+    },
+    links: {
+      website: 'https://cursor.sh',
+      docs: 'https://docs.cursor.sh',
+    },
+    sentiment: {
+      score: 92,
+      totalReviews: 4123,
+    },
+    trending: {
+      mentions: 2103,
+      timeframe: 'last 24h',
+      change: 156,
+    },
+    topUsers: [
+      {
+        id: 'user9',
+        username: 'cursor_fan',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=fan',
+        contributions: 312,
+      },
+      {
+        id: 'user10',
+        username: 'vscode_migrant',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=migrant',
+        contributions: 245,
+      },
+    ],
+    pros: [
+      'Seamless VS Code experience',
+      'Natural chat interface',
+      'Cmd+K inline editing',
+      'Free tier available',
+    ],
+    cons: [
+      'Mac-first design',
+      'Some VS Code extensions incompatible',
+      'Pricing for teams',
+    ],
+    alternatives: ['claude-code', 'github-copilot', 'windsurf'],
+    metadata: {
+      lastUpdate: '2026-01-20',
+      latestVersion: '0.43.2',
+    },
+  },
+  {
+    id: 'github-copilot',
+    name: 'GitHub Copilot',
+    version: '1.156',
+    company: 'GitHub',
+    description:
+      'AI pair programmer powered by OpenAI Codex, integrated into VS Code, JetBrains, and more',
+    tldr: 'AI autocomplete for code in your favorite editor',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      startingPrice: '$10/month',
+      details: 'Free for students and open source maintainers',
+    },
+    links: {
+      website: 'https://github.com/features/copilot',
+      docs: 'https://docs.github.com/copilot',
+    },
+    sentiment: {
+      score: 85,
+      totalReviews: 8934,
+    },
+    trending: {
+      mentions: 534,
+      timeframe: 'last 24h',
+      change: -5,
+    },
+    topUsers: [
+      {
+        id: 'user11',
+        username: 'gh_user',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=gh',
+        contributions: 456,
+      },
+      {
+        id: 'user12',
+        username: 'copilot_daily',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=daily',
+        contributions: 389,
+      },
+    ],
+    pros: [
+      'Wide IDE support',
+      'Great autocomplete',
+      'Free for students',
+      'GitHub integration',
+    ],
+    cons: [
+      'Can suggest outdated code',
+      'Subscription required',
+      'Privacy concerns',
+    ],
+    alternatives: ['cursor', 'tabnine', 'codeium'],
+    metadata: {
+      lastUpdate: '2026-01-30',
+      latestVersion: '1.156.0',
+    },
+  },
+  {
+    id: 'aider',
+    name: 'Aider',
+    version: '0.61',
+    company: 'Open Source',
+    description:
+      'AI pair programming in your terminal with git integration and support for multiple LLMs',
+    tldr: 'Terminal-based AI coding with git awareness',
+    category: 'coding-assistant',
+    pricing: {
+      freeTier: true,
+      details: 'Open source, BYO API key',
+    },
+    install: {
+      command: 'pip install aider-chat',
+      type: 'pip',
+    },
+    links: {
+      website: 'https://aider.chat',
+      docs: 'https://aider.chat/docs',
+    },
+    sentiment: {
+      score: 91,
+      totalReviews: 1876,
+    },
+    trending: {
+      mentions: 423,
+      timeframe: 'last 24h',
+      change: 34,
+    },
+    topUsers: [
+      {
+        id: 'user13',
+        username: 'terminal_lover',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=terminal',
+        contributions: 178,
+      },
+      {
+        id: 'user14',
+        username: 'git_guru',
+        avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=git',
+        contributions: 134,
+      },
+    ],
+    pros: [
+      'Open source',
+      'Git integration',
+      'Multi-LLM support',
+      'Terminal native',
+    ],
+    cons: [
+      'CLI learning curve',
+      'BYO API key',
+      'Less polished than commercial tools',
+    ],
+    alternatives: ['claude-code', 'cursor', 'continue'],
+    metadata: {
+      lastUpdate: '2026-01-25',
+      latestVersion: '0.61.0',
+    },
+  },
+];
+
+export const trendingInsights: TrendingInsight[] = [
+  {
+    type: 'favorite',
+    toolId: 'claude-code',
+    toolName: 'Claude Code',
+    message: 'Community favorite: Claude Code',
+    icon: '⭐',
+  },
+  {
+    type: 'trending',
+    toolId: 'cursor',
+    toolName: 'Cursor',
+    message: 'Trending: Cursor - 2,103 mentions (last 24h)',
+    icon: '🔥',
+  },
+  {
+    type: 'rising',
+    toolId: 'claude-code',
+    toolName: 'Claude Code',
+    message: 'Rising: Claude Code - +67% engagement',
+    icon: '📈',
+  },
+];
+
+export const mockMentions: SocialMention[] = [
+  {
+    id: '1',
+    source: 'twitter',
+    author: '@dev_influencer',
+    content:
+      'Just switched to Claude Code for my terminal workflow. The agentic features are game-changing! 🚀',
+    sentiment: 'positive',
+    timestamp: '2h ago',
+    toolId: 'claude-code',
+  },
+  {
+    id: '2',
+    source: 'reddit',
+    author: 'u/coder123',
+    content:
+      "Cursor's inline editing with Cmd+K is exactly what I needed. Worth every penny.",
+    sentiment: 'positive',
+    timestamp: '4h ago',
+    toolId: 'cursor',
+  },
+  {
+    id: '3',
+    source: 'dailydev',
+    author: 'tech_writer',
+    content:
+      'Compared Claude Opus 4.5 vs GPT-4 Turbo for complex refactoring. Opus won hands down.',
+    sentiment: 'positive',
+    timestamp: '6h ago',
+    toolId: 'claude-opus-4-5',
+  },
+  {
+    id: '4',
+    source: 'twitter',
+    author: '@open_source_fan',
+    content:
+      'Aider + Claude = perfect terminal coding setup. Open source ftw! 🎉',
+    sentiment: 'positive',
+    timestamp: '8h ago',
+    toolId: 'aider',
+  },
+];
diff --git a/packages/webapp/components/ai-tools/types.ts b/packages/webapp/components/ai-tools/types.ts
new file mode 100644
index 0000000000..b703fc21a5
--- /dev/null
+++ b/packages/webapp/components/ai-tools/types.ts
@@ -0,0 +1,63 @@
+export interface AITool {
+  id: string;
+  name: string;
+  version: string;
+  company: string;
+  description: string;
+  tldr: string;
+  category: 'coding-assistant' | 'chat' | 'api' | 'search' | 'other';
+  pricing: {
+    freeTier: boolean;
+    startingPrice?: string;
+    details: string;
+  };
+  install?: {
+    command: string;
+    type: 'npm' | 'pip' | 'brew' | 'download';
+  };
+  links: {
+    docs?: string;
+    website: string;
+    changelog?: string;
+  };
+  sentiment: {
+    score: number; // 0-100
+    totalReviews: number;
+  };
+  trending: {
+    mentions: number;
+    timeframe: string; // e.g., "last 24h"
+    change: number; // percentage change
+  };
+  topUsers: Array<{
+    id: string;
+    username: string;
+    avatar: string;
+    contributions: number;
+  }>;
+  pros: string[];
+  cons: string[];
+  alternatives: string[]; // IDs of alternative tools
+  metadata: {
+    lastUpdate: string;
+    latestVersion: string;
+  };
+}
+
+export interface TrendingInsight {
+  type: 'trending' | 'favorite' | 'rising';
+  toolId: string;
+  toolName: string;
+  message: string;
+  icon: string;
+}
+
+export interface SocialMention {
+  id: string;
+  source: 'twitter' | 'reddit' | 'dailydev';
+  author: string;
+  content: string;
+  sentiment: 'positive' | 'neutral' | 'negative';
+  timestamp: string;
+  toolId: string;
+}
diff --git a/packages/webapp/pages/ai-tools/index.tsx b/packages/webapp/pages/ai-tools/index.tsx
new file mode 100644
index 0000000000..090743ff15
--- /dev/null
+++ b/packages/webapp/pages/ai-tools/index.tsx
@@ -0,0 +1,156 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { NextSeoProps } from 'next-seo';
+import {
+  ResponsivePageContainer,
+  pageBorders,
+} from '@dailydotdev/shared/src/components/utilities';
+import { LayoutHeader } from '@dailydotdev/shared/src/components/layout/common';
+import classNames from 'classnames';
+import {
+  Typography,
+  TypographyColor,
+  TypographyType,
+} from '@dailydotdev/shared/src/components/typography/Typography';
+import ProtectedPage from '../../components/ProtectedPage';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { TrendingSection } from '../../components/ai-tools/TrendingSection';
+import { ToolCard } from '../../components/ai-tools/ToolCard';
+import {
+  mockTools,
+  trendingInsights,
+} from '../../components/ai-tools/mockData';
+
+const AITools = (): ReactElement => {
+  return (
+    <ProtectedPage>
+      <div className="mx-auto w-full max-w-[64rem]">
+        <LayoutHeader
+          className={classNames('!mb-0 gap-2 border-b px-4', pageBorders)}
+        >
+          <div className="flex flex-1 flex-col gap-1">
+            <Typography
+              type={TypographyType.Title2}
+              bold
+              color={TypographyColor.Primary}
+            >
+              AI Coding Tools
+            </Typography>
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              Your go-to resource for AI coding assistants, with real-time
+              insights from the developer community
+            </Typography>
+          </div>
+        </LayoutHeader>
+
+        <ResponsivePageContainer className="!mx-0 !w-full !max-w-full gap-8 py-6">
+          {/* Trending Section */}
+          <TrendingSection insights={trendingInsights} />
+
+          {/* Stats Overview */}
+          <div className="grid grid-cols-3 gap-4">
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                {mockTools.length}
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Tools tracked
+              </Typography>
+            </div>
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                5.2K
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Mentions today
+              </Typography>
+            </div>
+            <div className="bg-theme-bg-tertiary rounded-12 border border-border-subtlest-tertiary p-4 text-center">
+              <Typography
+                type={TypographyType.Title1}
+                bold
+                color={TypographyColor.Primary}
+              >
+                23K+
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Community reviews
+              </Typography>
+            </div>
+          </div>
+
+          {/* Tools Grid */}
+          <div className="flex flex-col gap-6">
+            <div className="flex items-center justify-between">
+              <Typography
+                type={TypographyType.Title3}
+                bold
+                color={TypographyColor.Primary}
+              >
+                All Tools
+              </Typography>
+              <Typography
+                type={TypographyType.Callout}
+                color={TypographyColor.Tertiary}
+              >
+                Sorted by trending
+              </Typography>
+            </div>
+
+            <div className="flex flex-col gap-4">
+              {mockTools
+                .sort((a, b) => b.trending.mentions - a.trending.mentions)
+                .map((tool) => (
+                  <ToolCard key={tool.id} tool={tool} allTools={mockTools} />
+                ))}
+            </div>
+          </div>
+
+          {/* Footer Note */}
+          <div className="rounded-12 border border-border-subtlest-tertiary bg-surface-float p-6 text-center">
+            <Typography
+              type={TypographyType.Callout}
+              color={TypographyColor.Tertiary}
+            >
+              🚧 This is a demo preview with mocked data. Real-time data
+              integration coming soon!
+            </Typography>
+          </div>
+        </ResponsivePageContainer>
+      </div>
+    </ProtectedPage>
+  );
+};
+
+const seo: NextSeoProps = {
+  title: 'AI Coding Tools - Real-time insights from developers',
+  description:
+    'Discover the best AI coding tools with real-time insights, community reviews, and detailed comparisons.',
+  nofollow: false,
+  noindex: false,
+};
+
+AITools.getLayout = getLayout;
+AITools.layoutProps = { seo };
+
+export default AITools;
diff --git a/packages/webapp/pages/tools/[...slug].tsx b/packages/webapp/pages/tools/[...slug].tsx
new file mode 100644
index 0000000000..688e1dd17f
--- /dev/null
+++ b/packages/webapp/pages/tools/[...slug].tsx
@@ -0,0 +1,128 @@
+import type { ReactElement } from 'react';
+import React, { useState, useMemo } from 'react';
+import { useRouter } from 'next/router';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import dynamic from 'next/dynamic';
+import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
+import {
+  findToolBySlug,
+  getToolPath,
+} from '@dailydotdev/shared/src/lib/toolsMockData';
+import { ToolBreadcrumb } from '@dailydotdev/shared/src/components/tools/ToolBreadcrumb';
+import { ToolHeader } from '@dailydotdev/shared/src/components/tools/ToolHeader';
+import { ToolCard } from '@dailydotdev/shared/src/components/tools/ToolCard';
+import { ToolRelatedContent } from '@dailydotdev/shared/src/components/tools/ToolRelatedContent';
+import { ToolDiscussion } from '@dailydotdev/shared/src/components/tools/ToolDiscussion';
+import Custom404 from '../404';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { defaultOpenGraph } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const ToolSentimentChart = dynamic(
+  () =>
+    import('@dailydotdev/shared/src/components/tools/ToolSentimentChart').then(
+      (mod) => mod.ToolSentimentChart,
+    ),
+  { ssr: false },
+);
+
+const ToolPage = (): ReactElement => {
+  const router = useRouter();
+  const { slug } = router.query;
+
+  const [upvotedTools, setUpvotedTools] = useState<Set<string>>(new Set());
+  const [upvotedComments, setUpvotedComments] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const slugString = Array.isArray(slug) ? slug.join('/') : slug || '';
+  const tool = useMemo(() => findToolBySlug(slugString), [slugString]);
+  const toolPath = useMemo(() => getToolPath(slugString), [slugString]);
+
+  const handleUpvoteTool = (toolId: string) => {
+    setUpvotedTools((prev) => {
+      const next = new Set(prev);
+      if (next.has(toolId)) {
+        next.delete(toolId);
+      } else {
+        next.add(toolId);
+      }
+      return next;
+    });
+  };
+
+  const handleUpvoteComment = (commentId: string) => {
+    setUpvotedComments((prev) => {
+      const next = new Set(prev);
+      if (next.has(commentId)) {
+        next.delete(commentId);
+      } else {
+        next.add(commentId);
+      }
+      return next;
+    });
+  };
+
+  if (router.isFallback) {
+    return <></>;
+  }
+
+  if (!tool) {
+    return <Custom404 />;
+  }
+
+  const hasChildren = tool.children.length > 0;
+
+  return (
+    <PageWrapperLayout className="py-6">
+      <ToolBreadcrumb toolPath={toolPath} className="mb-4" />
+
+      <ToolHeader
+        tool={tool}
+        isUpvoted={upvotedTools.has(tool.id)}
+        onUpvote={() => handleUpvoteTool(tool.id)}
+        className="mb-8"
+      />
+
+      {hasChildren && (
+        <section className="mb-8">
+          <h2 className="mb-4 font-bold text-text-primary typo-title3">
+            Available tools
+          </h2>
+          <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2 laptop:grid-cols-3">
+            {tool.children.map((child) => (
+              <ToolCard key={child.id} tool={child} />
+            ))}
+          </div>
+        </section>
+      )}
+
+      <div className="grid grid-cols-1 gap-8 laptop:grid-cols-2">
+        <ToolSentimentChart data={tool.sentimentData} />
+        <ToolRelatedContent posts={tool.relatedPosts} />
+      </div>
+
+      <ToolDiscussion
+        comments={tool.comments}
+        upvotedComments={upvotedComments}
+        onUpvoteComment={handleUpvoteComment}
+        className="mt-8"
+      />
+    </PageWrapperLayout>
+  );
+};
+
+const getToolPageLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ToolPage.getLayout = getToolPageLayout;
+ToolPage.layoutProps = {
+  screenCentered: false,
+  seo: {
+    title: getTemplatedTitle('AI Tool'),
+    openGraph: { ...defaultOpenGraph },
+  } as NextSeoProps,
+};
+
+export default ToolPage;
diff --git a/packages/webapp/pages/tools/index.tsx b/packages/webapp/pages/tools/index.tsx
new file mode 100644
index 0000000000..f10fa577c6
--- /dev/null
+++ b/packages/webapp/pages/tools/index.tsx
@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { NextSeoProps } from 'next-seo/lib/types';
+import { AiIcon } from '@dailydotdev/shared/src/components/icons';
+import { IconSize } from '@dailydotdev/shared/src/components/Icon';
+import { BreadCrumbs } from '@dailydotdev/shared/src/components/header/BreadCrumbs';
+import { PageWrapperLayout } from '@dailydotdev/shared/src/components/layout/PageWrapperLayout';
+import { getAllTopLevelTools } from '@dailydotdev/shared/src/lib/toolsMockData';
+import { ToolCard } from '@dailydotdev/shared/src/components/tools/ToolCard';
+import { getLayout } from '../../components/layouts/MainLayout';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { defaultOpenGraph } from '../../next-seo';
+import { getTemplatedTitle } from '../../components/layouts/utils';
+
+const seo: NextSeoProps = {
+  title: getTemplatedTitle('AI Tools Directory'),
+  openGraph: { ...defaultOpenGraph },
+  description:
+    'Explore and discover the best AI tools for developers. Find sentiment analysis, discussions, and community insights for tools like Claude, GPT, Gemini, and more.',
+};
+
+const ToolsPage = (): ReactElement => {
+  const tools = getAllTopLevelTools();
+
+  return (
+    <PageWrapperLayout className="py-6">
+      <div className="mb-6 flex justify-between">
+        <BreadCrumbs>
+          <AiIcon size={IconSize.XSmall} secondary /> Tools
+        </BreadCrumbs>
+      </div>
+      <h1 className="mb-2 typo-title1">AI Tools</h1>
+      <p className="mb-6 text-text-secondary typo-body">
+        Explore AI tools, see community sentiment, and join discussions.
+      </p>
+      <div className="grid grid-cols-1 gap-4 tablet:grid-cols-2 laptop:grid-cols-3">
+        {tools.map((tool) => (
+          <ToolCard key={tool.id} tool={tool} />
+        ))}
+      </div>
+    </PageWrapperLayout>
+  );
+};
+
+const getToolsPageLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ToolsPage.getLayout = getToolsPageLayout;
+ToolsPage.layoutProps = {
+  screenCentered: false,
+  seo,
+};
+
+export default ToolsPage;