diff --git a/i18n/english.js b/i18n/english.js
index 440eecb5..cbc1218e 100644
--- a/i18n/english.js
+++ b/i18n/english.js
@@ -118,7 +118,10 @@ const ui = {
       lastReleaseVersion: "Last release version",
       lastReleaseDate: "Last release date",
       publishedReleases: "Number of published releases",
-      numberPublishers: "Number of publisher(s)"
+      numberPublishers: "Number of publisher(s)",
+      weeklyDownloads: "Weekly downloads",
+      weeklyTraffic: "Weekly traffic",
+      downloadsAndTraffic: "Downloads and traffic"
     },
     helpers: {
       warnings: "Learn more about warnings in the",
diff --git a/i18n/french.js b/i18n/french.js
index e62998fa..ff089a63 100644
--- a/i18n/french.js
+++ b/i18n/french.js
@@ -118,7 +118,10 @@ const ui = {
       lastReleaseVersion: "Dernière version publiée",
       lastReleaseDate: "Date de la dernière version",
       publishedReleases: "Nombre de versions publiées",
-      numberPublishers: "Nombre de contributeur(s)"
+      numberPublishers: "Nombre de contributeur(s)",
+      weeklyDownloads: "Téléchargements hebdomadaires",
+      weeklyTraffic: "Trafic hebdomadaire",
+      downloadsAndTraffic: "Téléchargements et trafic"
     },
     helpers: {
       warnings: "En savoir plus sur les alertes avec le",
diff --git a/public/components/bundlephobia/bundlephobia.css b/public/components/bundlephobia/bundlephobia.css
index d5da766c..c14d422f 100644
--- a/public/components/bundlephobia/bundlephobia.css
+++ b/public/components/bundlephobia/bundlephobia.css
@@ -36,4 +36,5 @@ section#package-info div.bundlephobia>div>b i {
 section#package-info div.bundlephobia>div>span {
   font-size: 12px;
   font-family: 'mononoki';
+  text-transform: uppercase;
 }
diff --git a/public/components/package/package.css b/public/components/package/package.css
index 5d8bbc55..91333855 100644
--- a/public/components/package/package.css
+++ b/public/components/package/package.css
@@ -170,6 +170,8 @@ section#package-info .head-title>p {
   text-shadow: 1px 1px 5px rgba(20, 20, 20, 0.5);
   font-size: 18px;
   font-variant: small-caps;
+  /* lowercase is needed with small-caps font variant */
+  text-transform: lowercase;
   font-family: "mononoki";
   font-weight: bold;
   letter-spacing: 1px;
diff --git a/public/components/package/package.html b/public/components/package/package.html
index 3d4d1f7c..4cdac33b 100644
--- a/public/components/package/package.html
+++ b/public/components/package/package.html
@@ -46,6 +46,20 @@
     <!-- package metadata -->
     <ul class="fields" style="margin-top: 0px !important;"></ul>
 
+    <div class="head-title">
+      <p>[[=z.token('package_info.overview.downloadsAndTraffic')]]</p>
+    </div>
+    <div id="npm-stats" class="bundlephobia" style="margin-bottom: 10px;">
+      <div>
+        <b class="weekly-downloads">N/A</b>
+        <span>[[=z.token('package_info.overview.weeklyDownloads')]]</span>
+      </div>
+      <div>
+        <b class="weekly-traffic">N/A</b>
+        <span>[[=z.token('package_info.overview.weeklyTraffic')]]</span>
+      </div>
+    </div>
+
     <div class="head-title">
       <p>[[=z.token('package_info.title.releases')]]</p>
     </div>
diff --git a/public/components/package/pannels/overview/overview.js b/public/components/package/pannels/overview/overview.js
index 8977aecd..acba12e2 100644
--- a/public/components/package/pannels/overview/overview.js
+++ b/public/components/package/pannels/overview/overview.js
@@ -32,6 +32,7 @@ export class Overview {
 
     clone.querySelector(".fields")
       .appendChild(this.renderTopFields());
+    this.renderNPMStats();
     clone.querySelector(".fields.releases")
       .appendChild(this.renderReleases());
 
@@ -156,6 +157,17 @@ export class Overview {
     return fragment;
   }
 
+  async renderNPMStats() {
+    const { size, name } = this.package.dependencyVersion;
+    const {
+      downloads
+    } = await fetch(`/downloads/${name.replaceAll("/", "%2F")}`)
+      .then((value) => value.json());
+
+    document.querySelector("#npm-stats .weekly-downloads").textContent = downloads ?? "N/A";
+    document.querySelector("#npm-stats .weekly-traffic").textContent = downloads ? prettyBytes(downloads * size) : "N/A";
+  }
+
   renderReleases() {
     const { metadata } = this.package.dependency;
     const fragment = document.createDocumentFragment();