diff --git a/packages/code-du-travail-frontend/app/stats/page.tsx b/packages/code-du-travail-frontend/app/stats/page.tsx
new file mode 100644
index 0000000000..ec57032c23
--- /dev/null
+++ b/packages/code-du-travail-frontend/app/stats/page.tsx
@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+import { DsfrLayout } from "../../src/modules/layout";
+import { Stats } from "../../src/modules/stats";
+import { getStatsService } from "../../src/api";
+import { cache } from "react";
+import { REVALIDATE_TIME_DAY } from "../../src/config";
+
+export const dynamic = "force-static";
+
+export const revalidate = REVALIDATE_TIME_DAY;
+
+export const metadata: Metadata = {
+  title: "Statistiques",
+  description: "Statistiques d’utilisation du Code du travail numérique",
+};
+
+const getStats = cache(async () => {
+  return getStatsService();
+});
+
+async function Index() {
+  const data = await getStats();
+
+  return (
+    <DsfrLayout>
+      <Stats
+        nbDocuments={data.nbDocuments}
+        nbVisits={data.nbVisits}
+        nbSearches={data.nbSearches}
+        nbPageViews={data.nbPageViews}
+      />
+    </DsfrLayout>
+  );
+}
+
+export default Index;
diff --git a/packages/code-du-travail-frontend/pages/stats.tsx b/packages/code-du-travail-frontend/pages/stats.tsx
deleted file mode 100644
index 2b8d1367ba..0000000000
--- a/packages/code-du-travail-frontend/pages/stats.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import {
-  Container,
-  Grid,
-  Heading,
-  PageTitle,
-  Paragraph,
-  Section,
-  Wrapper,
-} from "@socialgouv/cdtn-ui";
-import React from "react";
-import styled from "styled-components";
-
-import Metas from "../src/common/Metas";
-import { REVALIDATE_TIME, REVALIDATE_TIME_DAY } from "../src/config";
-import { Layout } from "../src/layout/Layout";
-import { captureException } from "@sentry/nextjs";
-import { getStatsService } from "../src/api";
-
-type PropsData = {
-  nbDocuments: number;
-  nbVisits: number;
-  nbSearches: number;
-  nbPageViews: number;
-};
-
-type Props = {
-  data: PropsData | null;
-};
-
-const Stats = ({ data }: Props): JSX.Element => {
-  return (
-    <Layout>
-      <Metas
-        title="Statistiques"
-        description="Statistiques d’utilisation du Code du travail numérique"
-      />
-      <Section>
-        <Container>
-          <PageTitle>Statistiques du Code du travail numérique</PageTitle>
-          <Wrapper variant="main">
-            {data ? (
-              <>
-                <Grid columns={3}>
-                  <Tile variant="dark">
-                    <Heading as="h2">Contenus référencés</Heading>
-                    <Num variant="secondary" fontWeight="600">
-                      {data.nbDocuments}
-                    </Num>
-                  </Tile>
-
-                  <Tile variant="dark">
-                    <Heading as="h2">Visites</Heading>
-                    <Num variant="secondary" fontWeight="600">
-                      {data.nbVisits}
-                    </Num>
-                  </Tile>
-
-                  <Tile variant="dark">
-                    <Heading as="h2">Recherches</Heading>
-                    <Num variant="secondary" fontWeight="600">
-                      {data.nbSearches}
-                    </Num>
-                  </Tile>
-
-                  <Tile variant="dark">
-                    <Heading as="h2">Consultations</Heading>
-                    <Num variant="secondary" fontWeight="600">
-                      {data.nbPageViews}
-                    </Num>
-                  </Tile>
-                </Grid>
-                <p>Statistiques d’utilisation depuis le 01/01/2020</p>
-              </>
-            ) : (
-              <p>Informations actuellement indisponibles</p>
-            )}
-          </Wrapper>
-        </Container>
-      </Section>
-    </Layout>
-  );
-};
-
-export async function getStaticProps() {
-  try {
-    const data = await getStatsService();
-    return { props: { data }, revalidate: REVALIDATE_TIME_DAY };
-  } catch (e) {
-    console.error(e);
-    captureException(e);
-    return {
-      props: {
-        data: null,
-      },
-      revalidate: REVALIDATE_TIME,
-    };
-  }
-}
-
-const Tile = styled(Wrapper)`
-  position: relative;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  width: 100%;
-`;
-
-const Num = styled(Paragraph)`
-  font-size: 5rem;
-`;
-
-export default Stats;
diff --git a/packages/code-du-travail-frontend/src/config.ts b/packages/code-du-travail-frontend/src/config.ts
index 47cfdd75b2..ed5f28270a 100644
--- a/packages/code-du-travail-frontend/src/config.ts
+++ b/packages/code-du-travail-frontend/src/config.ts
@@ -11,8 +11,9 @@ export const COMMIT = process.env.NEXT_PUBLIC_COMMIT ?? "";
 export const SITE_URL =
   process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:3000`;
 export const PACKAGE_VERSION = version;
-export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "";
-export const PIWIK_URL = process.env.NEXT_PUBLIC_PIWIK_URL ?? "";
+export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "3";
+export const PIWIK_URL =
+  process.env.NEXT_PUBLIC_PIWIK_URL ?? "https://matomo.fabrique.social.gouv.fr";
 export const IS_PREPROD =
   process.env.NEXT_PUBLIC_IS_PREPRODUCTION_DEPLOYMENT ?? false;
 export const IS_PROD =
diff --git a/packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx b/packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx
new file mode 100644
index 0000000000..7d1cdf7eed
--- /dev/null
+++ b/packages/code-du-travail-frontend/src/modules/stats/StatsDisplay.tsx
@@ -0,0 +1,34 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { CallOut } from "@codegouvfr/react-dsfr/CallOut";
+import { css } from "../../../styled-system/css";
+
+type StatsProps = {
+  title: string;
+  metric: number;
+};
+
+export const StatsDisplay = (props: StatsProps) => (
+  <div className={fr.cx("fr-col-12", "fr-col-md-3")}>
+    <CallOut className={`${callOut}`}>
+      <span className={`${metric} ${fr.cx("fr-mt-4v", "fr-display--xs")}`}>
+        {props.metric}
+      </span>
+      <span className={`${title} ${fr.cx("fr-text--bold", "fr-text--xl")}`}>
+        {props.title}
+      </span>
+    </CallOut>
+  </div>
+);
+
+const metric = css({
+  textAlign: "right",
+  display: "block",
+});
+
+const title = css({
+  textAlign: "left",
+});
+
+const callOut = css({
+  height: "100%",
+});
diff --git a/packages/code-du-travail-frontend/src/modules/stats/index.tsx b/packages/code-du-travail-frontend/src/modules/stats/index.tsx
new file mode 100644
index 0000000000..90128c8524
--- /dev/null
+++ b/packages/code-du-travail-frontend/src/modules/stats/index.tsx
@@ -0,0 +1,26 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { StatsDisplay } from "./StatsDisplay";
+
+type StatsProps = {
+  nbDocuments: number;
+  nbVisits: number;
+  nbSearches: number;
+  nbPageViews: number;
+};
+
+export const Stats = (props: StatsProps) => (
+  <div className={fr.cx("fr-grid-row")}>
+    <div className={fr.cx("fr-my-4w", "fr-col-12")}>
+      <h1 className={fr.cx("fr-mt-0")}>Statistiques d&apos;utilisation</h1>
+      <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters")}>
+        <StatsDisplay title="Contenus référencés" metric={props.nbDocuments} />
+        <StatsDisplay title="Visites" metric={props.nbVisits} />
+        <StatsDisplay title="Recherches" metric={props.nbSearches} />
+        <StatsDisplay title="Consultations" metric={props.nbPageViews} />
+      </div>
+      <p className={fr.cx("fr-mt-4v")}>
+        Statistiques d’utilisation depuis le 01/01/2020
+      </p>
+    </div>
+  </div>
+);