diff --git a/src/components/common/FollowingCount.tsx b/src/components/common/FollowingCount.tsx
index 7e100066..119f6a3e 100644
--- a/src/components/common/FollowingCount.tsx
+++ b/src/components/common/FollowingCount.tsx
@@ -38,7 +38,7 @@ export const FollowingCount = ({
         }
         onClick={() => setIsFollowListOpen(true)}
       >
-        <span className="font-medium text-zinc-700 pr-[2px]">
+        <span className="font-medium text-zinc-700 pr-[3px]">
           {subscriptions.data?.pages?.[0]?.count || 0}
         </span>{" "}
         {t("Followers")}
@@ -46,7 +46,7 @@ export const FollowingCount = ({
       <Button
         variant="text"
         className={
-          "xlog-site-followings align-middle text-zinc-500 sm:ml-3" +
+          "xlog-site-followings align-middle text-zinc-500 sm:ml-3 !hidden sm:!inline-flex" +
           (disableList ? "" : " cursor-pointer")
         }
         onClick={() => setIsToFollowListOpen(true)}
diff --git a/src/components/common/FormattedNumber.tsx b/src/components/common/FormattedNumber.tsx
new file mode 100644
index 00000000..7fab30d8
--- /dev/null
+++ b/src/components/common/FormattedNumber.tsx
@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react"
+
+export const FormattedNumber = ({ value }: { value: number }) => {
+  const [formatted, setFormatted] = useState<string>("")
+  useEffect(() => {
+    setFormatted(
+      new Intl.NumberFormat(navigator.language, { notation: "compact" }).format(
+        value,
+      ),
+    )
+  }, [value])
+
+  return <span>{formatted || value}</span>
+}
diff --git a/src/components/common/PostCard.tsx b/src/components/common/PostCard.tsx
index ad7f681b..a03ff0ed 100644
--- a/src/components/common/PostCard.tsx
+++ b/src/components/common/PostCard.tsx
@@ -7,6 +7,7 @@ import { memo } from "react"
 import reactStringReplace from "react-string-replace"
 
 import { CharacterFloatCard } from "~/components/common/CharacterFloatCard"
+import { FormattedNumber } from "~/components/common/FormattedNumber"
 import { Titles } from "~/components/common/Titles"
 import PostCover from "~/components/home/PostCover"
 import { PlatformsSyncMap } from "~/components/site/Platform"
@@ -133,31 +134,37 @@ const Card = ({
               {!!post.stat?.portfolio?.videoViewsCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--youtube-line] mr-[2px] text-base" />
-                  <span>{post.stat.portfolio.videoViewsCount}</span>
+                  <FormattedNumber
+                    value={post.stat.portfolio.videoViewsCount}
+                  />
                 </span>
               )}
               {!!post.stat?.portfolio?.audoListensCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--headphone-line] mr-[2px] text-base" />
-                  <span>{post.stat.portfolio.audoListensCount}</span>
+                  <FormattedNumber
+                    value={post.stat.portfolio.audoListensCount}
+                  />
                 </span>
               )}
               {!!post.stat?.portfolio?.projectStarsCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--star-line] mr-[2px] text-base" />
-                  <span>{post.stat.portfolio.projectStarsCount}</span>
+                  <FormattedNumber
+                    value={post.stat.portfolio.projectStarsCount}
+                  />
                 </span>
               )}
               {!!post.stat?.portfolio?.textViewsCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--eye-line] mr-[2px] text-base" />
-                  <span>{post.stat.portfolio.textViewsCount}</span>
+                  <FormattedNumber value={post.stat.portfolio.textViewsCount} />
                 </span>
               )}
               {!!post.stat?.portfolio?.commentsCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--comment-line] mr-[2px] text-base" />
-                  <span>{post.stat.portfolio.commentsCount}</span>
+                  <FormattedNumber value={post.stat.portfolio.commentsCount} />
                 </span>
               )}
             </>
@@ -178,13 +185,13 @@ const Card = ({
               {!!post.stat?.viewDetailCount && (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--eye-line] mr-[2px] text-base" />
-                  <span>{post.stat?.viewDetailCount}</span>
+                  <FormattedNumber value={post.stat?.viewDetailCount} />
                 </span>
               )}
               {post.stat?.commentsCount ? (
                 <span className="xlog-post-views inline-flex items-center">
                   <i className="icon-[mingcute--comment-line] mr-[2px] text-base" />
-                  <span>{post.stat.commentsCount}</span>
+                  <FormattedNumber value={post.stat.commentsCount} />
                 </span>
               ) : (
                 <span className="xlog-post-word-count sm:inline-flex items-center hidden">