6529-Collections · simo6529 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026
diff --git a/app/network/definitions/page.client.tsx b/app/network/definitions/page.client.tsx
@@ -7,7 +7,7 @@ import { Col, Container, Row } from "react-bootstrap";
 const NAV_LINKS = [
   { href: "/network/tdh", label: "TDH" },
   { href: "/network/tdh/historic-boosts", label: "TDH Historic Boosts" },
-  { href: "/network/stats", label: "Network Stats" },
+  { href: "/network/metrics/network-tdh", label: "Network Stats" },
   { href: "/network/levels", label: "Levels" },
 ] as const;
 
@@ -18,7 +18,7 @@ export default function DefinitionsClient() {
   useSetTitle("Definitions | Network");
 
   return (
-    <Container className="tw-min-h-screen tw-pt-12 tw-pb-12">
+    <Container className="tw-min-h-screen tw-pb-12 tw-pt-12">
       <Row>
         <Col>
           <h1>Definitions</h1>
@@ -92,7 +92,8 @@ export default function DefinitionsClient() {
               TDH (unboosted) &times; boosters. For the current rules, see{" "}
               <Link
                 href="/network/tdh"
-                className="tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-border-solid tw-border-[#222] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-1 tw-py-0.5 tw-no-underline tw-text-md tw-font-medium">
+                className="tw-inline-block tw-rounded-md tw-border-solid tw-border-[#222] tw-bg-[#eee] tw-px-1 tw-py-0.5 tw-text-md tw-font-medium tw-text-black tw-no-underline hover:tw-bg-[#ddd] hover:tw-text-black"
+              >
                 TDH
               </Link>
               .

diff --git a/...trics/components/CumulativeMetricCard.tsx → ...trics/components/CumulativeMetricCard.tsx b/...trics/components/CumulativeMetricCard.tsx → ...trics/components/CumulativeMetricCard.tsx
@@ -1,6 +1,8 @@
-import type { ReactNode } from "react";
 import CustomTooltip from "@/components/utils/tooltip/CustomTooltip";
 import type { MetricData } from "@/hooks/useCommunityMetrics";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import type { ReactNode } from "react";
 import {
   formatChange,
   formatCompactNumber,
@@ -16,6 +18,7 @@ interface CumulativeMetricCardProps {
   readonly iconBgColor: string;
   readonly accentColor: string;
   readonly unit?: string;
+  readonly href?: string;
 }
 
 function ChangeRow({
@@ -65,17 +68,25 @@ export default function CumulativeMetricCard({
   iconBgColor,
   accentColor,
   unit = "",
+  href,
 }: CumulativeMetricCardProps) {
   const total = dailyData.current.valueCount;
   const daily24hChange =
     dailyData.current.valueCount - dailyData.previous.valueCount;
   const weekly7dChange =
     weeklyData.current.valueCount - weeklyData.previous.valueCount;
 
-  return (
-    <div className="tw-rounded-xl tw-border tw-border-neutral-800 tw-bg-[#0f1318] tw-p-5">
+  const content = (
+    <div
+      className={`tw-block tw-h-full tw-rounded-xl tw-border tw-border-neutral-800 tw-bg-[#0f1318] tw-p-5 tw-transition-all tw-duration-300 ${href ? "hover:-tw-translate-y-1 hover:tw-border-neutral-700 hover:tw-shadow-xl hover:tw-shadow-neutral-900/50" : ""}`}
+    >
       <div className="tw-mb-5 tw-flex tw-items-start tw-justify-between">
-        <h3 className="tw-text-base tw-font-semibold tw-text-white">{title}</h3>
+        <h3 className="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-semibold tw-text-white">
+          {title}
+          {href && (
+            <ArrowTopRightOnSquareIcon className="tw-size-4 tw-text-neutral-500" />
+          )}
+        </h3>
         <div
           className={`tw-flex tw-size-10 tw-items-center tw-justify-center tw-rounded-lg ${iconBgColor}`}
         >
@@ -134,4 +145,17 @@ export default function CumulativeMetricCard({
       </div>
     </div>
   );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className="tw-block tw-no-underline hover:tw-no-underline"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return content;
 }
diff --git a/app/metrics/components/MetricCard.tsx → ...network/metrics/components/MetricCard.tsx b/app/metrics/components/MetricCard.tsx → ...network/metrics/components/MetricCard.tsx
@@ -1,5 +1,7 @@
 import CustomTooltip from "@/components/utils/tooltip/CustomTooltip";
 import type { MetricData } from "@/hooks/useCommunityMetrics";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
 import type { ReactNode } from "react";
 import {
   formatCompactNumber,
@@ -16,6 +18,7 @@ interface MetricCardProps {
   readonly accentColor: string;
   readonly useValueCount?: boolean;
   readonly suffix?: string | undefined;
+  readonly href?: string;
 }
 
 function StatBlock({
@@ -93,17 +96,25 @@ export default function MetricCard({
   accentColor,
   useValueCount = false,
   suffix,
+  href,
 }: MetricCardProps) {
   const getCount = (data: MetricData, period: "current" | "previous") =>
     useValueCount ? data[period].valueCount : data[period].eventCount;
 
   const getChangePercent = (data: MetricData) =>
     useValueCount ? data.valueCountChangePercent : data.eventCountChangePercent;
 
-  return (
-    <div className="tw-rounded-xl tw-border tw-border-neutral-800 tw-bg-[#0f1318] tw-p-5">
+  const content = (
+    <div
+      className={`tw-block tw-h-full tw-rounded-xl tw-border tw-border-neutral-800 tw-bg-[#0f1318] tw-p-5 tw-transition-all tw-duration-300 ${href ? "hover:-tw-translate-y-1 hover:tw-border-neutral-700 hover:tw-shadow-xl hover:tw-shadow-neutral-900/50" : ""}`}
+    >
       <div className="tw-mb-5 tw-flex tw-items-start tw-justify-between">
-        <h3 className="tw-text-base tw-font-semibold tw-text-white">{title}</h3>
+        <h3 className="tw-flex tw-items-center tw-gap-2 tw-text-base tw-font-semibold tw-text-white">
+          {title}
+          {href && (
+            <ArrowTopRightOnSquareIcon className="tw-size-4 tw-text-neutral-500" />
+          )}
+        </h3>
         <div
           className={`tw-flex tw-size-10 tw-items-center tw-justify-center tw-rounded-lg ${iconBgColor}`}
         >
@@ -135,4 +146,17 @@ export default function MetricCard({
       </div>
     </div>
   );
+
+  if (href) {
+    return (
+      <Link
+        href={href}
+        className="tw-block tw-no-underline hover:tw-no-underline"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return content;
 }
diff --git a/app/metrics/components/MetricsError.tsx → ...twork/metrics/components/MetricsError.tsx b/app/metrics/components/MetricsError.tsx → ...twork/metrics/components/MetricsError.tsx
diff --git a/app/metrics/components/MetricsIcons.tsx → ...twork/metrics/components/MetricsIcons.tsx b/app/metrics/components/MetricsIcons.tsx → ...twork/metrics/components/MetricsIcons.tsx
diff --git a/app/metrics/components/MetricsSkeleton.tsx → ...rk/metrics/components/MetricsSkeleton.tsx b/app/metrics/components/MetricsSkeleton.tsx → ...rk/metrics/components/MetricsSkeleton.tsx
diff --git a/app/metrics/components/MintMetricsCard.tsx → ...rk/metrics/components/MintMetricsCard.tsx b/app/metrics/components/MintMetricsCard.tsx → ...rk/metrics/components/MintMetricsCard.tsx
diff --git a/app/network/stats/page.tsx → app/network/metrics/network-tdh/page.tsx b/app/network/stats/page.tsx → app/network/metrics/network-tdh/page.tsx
@@ -23,7 +23,7 @@ export default function CommunityStatsPage() {
   );
 }
 
-export const generateMetadata = async () => {
+export const generateMetadata = () => {
   return getAppMetadata({
     title: "Stats",
     description: "Network",

diff --git a/app/metrics/page.client.tsx → app/network/metrics/page.client.tsx b/app/metrics/page.client.tsx → app/network/metrics/page.client.tsx
@@ -39,9 +39,7 @@ export default function MetricsPageClient() {
     <div className="tailwind-scope tw-min-h-screen tw-bg-black">
       <div className="tw-mx-auto tw-max-w-6xl tw-px-4 tw-py-8 sm:tw-px-6 lg:tw-px-8">
         <header className="tw-mb-8">
-          <h1 className="tw-text-2xl tw-font-bold tw-text-white">
-            Community Metrics
-          </h1>
+          <h1 className="tw-text-2xl tw-font-bold tw-text-white">Metrics</h1>
           <p className="tw-mt-1 tw-text-sm tw-text-neutral-400">
             Activity overview across different time periods
           </p>
@@ -121,6 +119,7 @@ export default function MetricsPageClient() {
                 iconBgColor="tw-bg-teal-500"
                 accentColor="tw-text-teal-400"
                 unit="TDH"
+                href="/network/metrics/network-tdh"
               />
               <CumulativeMetricCard
                 title="TDH Utilization %"

diff --git a/app/metrics/page.tsx → app/network/metrics/page.tsx b/app/metrics/page.tsx → app/network/metrics/page.tsx
diff --git a/app/metrics/utils/formatNumbers.ts → app/network/metrics/utils/formatNumbers.ts b/app/metrics/utils/formatNumbers.ts → app/network/metrics/utils/formatNumbers.ts
diff --git a/app/network/tdh/historic-boosts/page.client.tsx b/app/network/tdh/historic-boosts/page.client.tsx
@@ -7,7 +7,7 @@ import { Col, Container, Row } from "react-bootstrap";
 
 function DetailsCard(props: Readonly<{ title: string; children: ReactNode }>) {
   return (
-    <details className="tw-rounded-lg tw-bg-[#0c0c0d] tw-border-2 tw-border-solid tw-border-[#222]">
+    <details className="tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#222] tw-bg-[#0c0c0d]">
       <summary className="tw-cursor-pointer tw-select-none tw-list-none tw-px-5 tw-py-3 tw-font-medium">
         <h5 className="tw-m-0">{props.title}</h5>
       </summary>
@@ -23,7 +23,7 @@ function CategoryAList(
     completeSetMultiplier: string; // "1.55x" | "1.25x" | "1.20x"
   }>
 ) {
-  const Heading = (props.headingVariant === "h3" ? "h3" : "p") as any;
+  const Heading = props.headingVariant === "h3" ? "h3" : "p";
   const headingClass =
     props.headingVariant === "h3"
       ? "tw-mt-3 tw-font-medium"
@@ -32,7 +32,7 @@ function CategoryAList(
   return (
     <>
       <Heading className={headingClass}>Category A</Heading>
-      <ul className="tw-list-disc tw-ml-6 tw-space-y-1">
+      <ul className="tw-ml-6 tw-list-disc tw-space-y-1">
         <li>
           A complete set of all Meme Cards:{" "}
           <span className="tw-font-mono tw-font-medium">
@@ -77,7 +77,7 @@ function CategoryBList(
 
   return (
     <>
-      <p className="tw-font-medium tw-text-lg tw-mb-2">Category B</p>
+      <p className="tw-mb-2 tw-text-lg tw-font-medium">Category B</p>
       {props.includeAppliedNote ? (
         <p className="tw-mb-2">
           Applied to total TDH (not just that SZN&apos;s TDH)
@@ -103,8 +103,8 @@ function CategoryBList(
 function CategoryCList() {
   return (
     <>
-      <p className="tw-font-medium tw-text-lg tw-mb-2">Category C</p>
-      <ul className="tw-list-disc tw-ml-6">
+      <p className="tw-mb-2 tw-text-lg tw-font-medium">Category C</p>
+      <ul className="tw-ml-6 tw-list-disc">
         <li>
           Gradient: <span className="tw-font-mono tw-font-medium">1.02x</span>{" "}
           per Gradient (up to a maximum of <b>3</b>)
@@ -121,19 +121,19 @@ function IntroLine(props: PropsWithChildren) {
 const NAV_LINKS = [
   { href: "/network/tdh", label: "TDH" },
   { href: "/network/definitions", label: "Definitions" },
-  { href: "/network/stats", label: "Network Stats" },
+  { href: "/network/metrics/network-tdh", label: "Network Stats" },
   { href: "/network/levels", label: "Levels" },
 ] as const;
 
 export default function TDHHistoricBoostsPage() {
   useSetTitle("TDH Historic Boosts | Network");
 
   return (
-    <Container className="tw-min-h-screen tw-pt-12 tw-pb-12">
+    <Container className="tw-min-h-screen tw-pb-12 tw-pt-12">
       <Row>
         <Col>
           <h1>TDH — Historic Boosts</h1>
-          <p className="tw-mt-4 tw-mb-8">
+          <p className="tw-mb-8 tw-mt-4">
             Previous TDH versions are archived here for reference.
           </p>
 
@@ -183,7 +183,8 @@ export default function TDHHistoricBoostsPage() {
               <Link
                 key={href}
                 href={href}
-                className="tw-flex-1 tw-min-w-[150px] tw-text-center tw-inline-block tw-rounded-md tw-bg-[#eee] tw-text-black tw-font-medium tw-border-solid tw-border-[#222] hover:tw-bg-[#ddd] hover:tw-text-black tw-px-4 tw-py-2 tw-no-underline tw-w-full sm:tw-w-auto sm:tw-whitespace-nowrap">
+                className="tw-inline-block tw-w-full tw-min-w-[150px] tw-flex-1 tw-rounded-md tw-border-solid tw-border-[#222] tw-bg-[#eee] tw-px-4 tw-py-2 tw-text-center tw-font-medium tw-text-black tw-no-underline hover:tw-bg-[#ddd] hover:tw-text-black sm:tw-w-auto sm:tw-whitespace-nowrap"
+              >
                 {label}
               </Link>
             ))}

diff --git a/app/network/tdh/page.client.tsx b/app/network/tdh/page.client.tsx
@@ -11,7 +11,7 @@ export default function TDHMainPage() {
   useSetTitle("TDH | Network");
 
   return (
-    <Container className="tw-min-h-screen tw-pt-12 tw-pb-12">
+    <Container className="tw-min-h-screen tw-pb-12 tw-pt-12">
       <Row>
         <Col>
           <h1>TDH</h1>
@@ -24,7 +24,7 @@ export default function TDHMainPage() {
 
           <div className="tw-mt-8 tw-space-y-2">
             <h2>How TDH is computed</h2>
-            <ol className="tw-list-decimal tw-ml-6 tw-space-y-2">
+            <ol className="tw-ml-6 tw-list-decimal tw-space-y-2">
               <li>
                 <span className="tw-font-medium">Unweighted days:</span> each
                 NFT contributes 1 per day it's held.
@@ -34,7 +34,7 @@ export default function TDHMainPage() {
                 scale by edition size with FirstGM (3,941) as 1.
                 <br />
                 Examples:
-                <ul className="tw-list-disc tw-ml-6 tw-space-y-1">
+                <ul className="tw-ml-6 tw-list-disc tw-space-y-1">
                   <li>SeizingJPG (Edition Size 1,000) = 3.941</li>
                   <li>Nakamoto Freedom (Edition Size 300) = 13.136</li>
                   <li>Gradients (Edition Size 101) = 39.020</li>
@@ -52,7 +52,8 @@ export default function TDHMainPage() {
           {/* TDH 1.4 */}
           <div
             id="tdh-1-4"
-            className="tw-mt-10 tw-rounded-lg tw-bg-[#0c0c0d] tw-border-2 tw-border-solid tw-border-[#222] tw-p-6">
+            className="tw-mt-10 tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#222] tw-bg-[#0c0c0d] tw-p-6"
+          >
             <h3>TDH 1.4 (October 10, 2025 — present)</h3>
             <p className="tw-mt-4">
               Higher of <b>Category A</b> and <b>Category B</b> boosters, plus{" "}
@@ -61,7 +62,7 @@ export default function TDHMainPage() {
 
             <div className="tw-mt-6">
               <h4>Category A</h4>
-              <ul className="tw-list-disc tw-ml-6 tw-space-y-1">
+              <ul className="tw-ml-6 tw-list-disc tw-space-y-1">
                 <li>
                   A complete set of all Meme Cards:{" "}
                   <span className="tw-font-mono tw-font-medium">1.60x</span>
@@ -205,7 +206,8 @@ export default function TDHMainPage() {
             <div className="tw-mt-8 tw-flex tw-flex-wrap tw-gap-3">
               <Link
                 href="/network/tdh/historic-boosts"
-                className={BUTTON_LINK_CLASSES}>
+                className={BUTTON_LINK_CLASSES}
+              >
                 View Historic Boosts
               </Link>
               <Link href="/network/definitions" className={BUTTON_LINK_CLASSES}>
@@ -215,18 +217,21 @@ export default function TDHMainPage() {
           </div>
 
           {/* Cross-links */}
-          <div className="tw-mt-10 tw-grid md:tw-grid-cols-2 tw-gap-6">
-            <div className="tw-rounded-lg tw-bg-[#0c0c0d] tw-border-2 tw-border-solid tw-border-[#222] tw-p-6">
+          <div className="tw-mt-10 tw-grid tw-gap-6 md:tw-grid-cols-2">
+            <div className="tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#222] tw-bg-[#0c0c0d] tw-p-6">
               <h3>Network Stats</h3>
               <p className="tw-mt-1">
                 Aggregate community activity, holdings, trading, and time-based
                 metrics across the network.
               </p>
-              <Link href="/network/stats" className={BUTTON_LINK_CLASSES}>
+              <Link
+                href="/network/metrics/network-tdh"
+                className={BUTTON_LINK_CLASSES}
+              >
                 View Network Stats
               </Link>
             </div>
-            <div className="tw-rounded-lg tw-bg-[#0c0c0d] tw-border-2 tw-border-solid tw-border-[#222] tw-p-6">
+            <div className="tw-rounded-lg tw-border-2 tw-border-solid tw-border-[#222] tw-bg-[#0c0c0d] tw-p-6">
               <h3>Levels</h3>
               <p className="tw-mt-1">
                 Our integrated progression that combines <b>TDH</b> with{" "}

diff --git a/components/header/AppSidebar.tsx b/components/header/AppSidebar.tsx
@@ -32,10 +32,10 @@ const MENU = [
       { label: "Memes Calendar", path: "/meme-calendar" },
       { label: "TDH", path: "/network/tdh" },
       { label: "Metrics", section: true },
-      { label: "Metrics", path: "/metrics" },
+      { label: "Metrics", path: "/network/metrics" },
       { label: "Definitions", path: "/network/definitions" },
-      { label: "Network Stats", path: "/network/stats" },
       { label: "Levels", path: "/network/levels" },
+      { label: "Network Stats", path: "/network/metrics/network-tdh" },
     ],
   },
   {

diff --git a/hooks/useSidebarSections.ts b/hooks/useSidebarSections.ts
@@ -32,10 +32,10 @@ export function useSidebarSections(
           {
             name: "Metrics",
             items: [
-              { name: "Metrics", href: "/metrics" },
+              { name: "Metrics", href: "/network/metrics" },
               { name: "Definitions", href: "/network/definitions" },
-              { name: "Network Stats", href: "/network/stats" },
               { name: "Levels", href: "/network/levels" },
+              { name: "Network Stats", href: "/network/metrics/network-tdh" },
             ],
           },
         ],

diff --git a/tests/pages/network-stats.spec.ts → tests/pages/network-tdh.spec.ts b/tests/pages/network-stats.spec.ts → tests/pages/network-tdh.spec.ts
@@ -1,10 +1,10 @@
-import { test, expect } from '../testHelpers';
+import { expect, test } from "../testHelpers";
 
 test.describe("Network Stats Page", () => {
   test.beforeEach(async ({ page }, testInfo) => {
-    await page.goto("/network/stats");
+    await page.goto("/network/metrics/network-tdh");
   });
-  
+
   test("should load with correct title and heading", async ({ page }) => {
     await expect(page).toHaveTitle("Stats | Network");