diff --git a/app/(main)/ClientComponents/ServerOverviewClient.tsx b/app/(main)/ClientComponents/ServerOverviewClient.tsx
index cf370c1..2621543 100644
--- a/app/(main)/ClientComponents/ServerOverviewClient.tsx
+++ b/app/(main)/ClientComponents/ServerOverviewClient.tsx
@@ -7,6 +7,7 @@ import useSWR from "swr";
 import { formatBytes, nezhaFetcher } from "@/lib/utils";
 import { Loader } from "@/components/loading/Loader";
 import { ServerApi } from "@/app/types/nezha-api";
+import MotionNumber from "motion-number";
 
 export default function ServerOverviewClient() {
   const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher);
@@ -24,7 +25,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.result.length}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.result.length}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />
@@ -44,7 +51,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.live_servers}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.live_servers}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />
@@ -64,7 +77,13 @@ export default function ServerOverviewClient() {
                 <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
               </span>
               {data ? (
-                <p className="text-lg font-semibold">{data?.offline_servers}</p>
+                <div className="text-lg font-semibold">
+                  <MotionNumber
+                    value={data?.offline_servers}
+                    format={{ notation: "compact" }}
+                    locales="en-US"
+                  />
+                </div>
               ) : (
                 <div className="flex h-7 items-center">
                   <Loader visible={true} />
diff --git a/bun.lockb b/bun.lockb
index 639a7ae..ebc85c4 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 30ea9a5..69d5643 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -9,6 +9,7 @@ import {
 import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerCardPopover from "./ServerCardPopover";
 import getUnicodeFlagIcon from "country-flag-icons/unicode";
+import MotionNumber from "motion-number";
 
 export default function ServerCard({
   serverInfo,
@@ -56,26 +57,61 @@ export default function ServerCard({
       <section className={"grid grid-cols-5 items-center gap-3"}>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">CPU</p>
-          <div className="text-xs font-semibold">{cpu.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={cpu.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={cpu} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Mem</p>
-          <div className="text-xs font-semibold">{mem.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={mem.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={mem} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">STG</p>
-          <div className="text-xs font-semibold">{stg.toFixed(2)}%</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={stg.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            %
+          </div>
           <ServerUsageBar value={stg} />
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Upload</p>
-          <div className="text-xs font-semibold">{up.toFixed(2)}Mb/s</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={up.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            Mb/s
+          </div>
         </div>
         <div className={"flex flex-col"}>
           <p className="text-xs text-muted-foreground">Download</p>
-          <div className="text-xs font-semibold">{down.toFixed(2)}Mb/s</div>
+          <div className="text-xs font-semibold flex items-center">
+            <MotionNumber
+              value={down.toFixed(2)}
+              format={{ notation: "compact" }}
+              locales="en-US"
+            />
+            Mb/s
+          </div>
         </div>
       </section>
     </Card>
diff --git a/package.json b/package.json
index f6be22c..84a0080 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3020",
+    "dev": "next dev -p 3020 --turbo",
     "start": "node .next/standalone/server.js",
     "lint": "next lint",
     "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/"
@@ -26,6 +26,7 @@
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "lucide-react": "^0.414.0",
     "luxon": "^3.4.4",
+    "motion-number": "^0.1.6",
     "next": "^14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18.2.0",
@@ -54,4 +55,4 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.3"
   }
-}
+}
\ No newline at end of file