diff --git a/components/user/UserCard.js b/components/user/UserCard.js
index a3408b4a62a..7f5fe4ebcf0 100644
--- a/components/user/UserCard.js
+++ b/components/user/UserCard.js
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import ReactMarkdown from "react-markdown";
-
+import { abbreviateNumber } from "js-abbreviation-number";
 import FallbackImage from "../FallbackImage";
 
 export default function UserCard({ profile }) {
@@ -18,6 +18,16 @@ export default function UserCard({ profile }) {
           className="rounded-full"
           fallback={profile.name}
         />
+        {profile.displayStatsPublic && (
+          <div class="relative">
+              <div
+                id="card-views"
+                className="absolute inline-block h-5 top-0 bottom-auto translate-x-2/4  rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-1.5 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-orange-600 text-black rounded-full z-10"
+              >
+                {abbreviateNumber(profile.views)}
+              </div>
+            </div>
+          )}
       </div>
       <div>
         <h3 className="text-xl justify-center text-center text-orange-600 font-bold mb-2">