diff --git a/src/components/number-formatter.ts b/src/components/number-formatter.ts
new file mode 100644
index 0000000..b62bd1b
--- /dev/null
+++ b/src/components/number-formatter.ts
@@ -0,0 +1,44 @@
+export default class NumberFormatterElement extends HTMLElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const value = this.getAttribute("value");
+    if (value === null) {
+      this.textContent = "0";
+      return;
+    }
+
+    const num = parseInt(value, 10);
+    if (isNaN(num)) {
+      this.textContent = value;
+      return;
+    }
+
+    this.textContent = this.formatNumber(num);
+  }
+
+  formatNumber(num: number): string {
+    const formatter = new Intl.NumberFormat("en-US", {
+      notation: "compact",
+      compactDisplay: "short",
+      maximumFractionDigits: 1,
+    });
+    return formatter.format(num);
+  }
+}
+
+customElements.define("number-formatter", NumberFormatterElement);
diff --git a/src/main.ts b/src/main.ts
index 8e8eda0..a92bdb7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import colorSchemeSwitcher from "./alpine-data/color-scheme-switcher";
 import upvote from "./alpine-data/upvote";
 import share from "./alpine-data/share";
 import uiPermission from "./alpine-data/ui-permission";
+import "./components/number-formatter";
 
 window.Alpine = Alpine;
 
diff --git a/templates/modules/widgets/profile.html b/templates/modules/widgets/profile.html
index d36a7a0..a82f3cd 100644
--- a/templates/modules/widgets/profile.html
+++ b/templates/modules/widgets/profile.html
@@ -18,35 +18,37 @@
     </div>
     <div class="grid grid-cols-4 gap-5">
       <div class="inline-flex flex-col items-center">
-        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100" th:text="${stats.post}"></span>
+        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100">
+          <number-formatter th:attr="value=${stats.post}" />
+        </span>
         <span
           class="text-xs font-light text-gray-600 dark:text-slate-300"
           th:text="#{widget.profile.postCount.label}"
         ></span>
       </div>
       <div class="inline-flex flex-col items-center">
-        <span
-          class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100"
-          th:text="${stats.category}"
-        ></span>
+        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100">
+          <number-formatter th:attr="value=${stats.category}" />
+        </span>
         <span
           class="text-xs font-light text-gray-600 dark:text-slate-300"
           th:text="#{widget.profile.categoryCount.label}"
         ></span>
       </div>
       <div class="inline-flex flex-col items-center">
-        <span
-          class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100"
-          th:text="${stats.comment}"
-        ></span>
+        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100">
+          <number-formatter th:attr="value=${stats.comment}" />
+        </span>
         <span
           class="text-xs font-light text-gray-600 dark:text-slate-300"
           th:text="#{widget.profile.commentCount.label}"
         ></span>
       </div>
       <div class="inline-flex flex-col items-center">
-        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100" th:text="${stats.visit}"></span
-        ><span
+        <span class="text-xl font-medium tabular-nums text-gray-900 dark:text-slate-100">
+          <number-formatter th:attr="value=${stats.visit}" />
+        </span>
+        <span
           class="text-xs font-light text-gray-600 dark:text-slate-300"
           th:text="#{widget.profile.visitCount.label}"
         ></span>