diff --git a/app/(main)/ClientComponents/detail/NetworkChart.tsx b/app/(main)/ClientComponents/detail/NetworkChart.tsx
index a542c28..4ed399c 100644
--- a/app/(main)/ClientComponents/detail/NetworkChart.tsx
+++ b/app/(main)/ClientComponents/detail/NetworkChart.tsx
@@ -15,7 +15,6 @@ import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import getEnv from "@/lib/env-entry"
 import { formatTime, nezhaFetcher } from "@/lib/utils"
-import { formatRelativeTime } from "@/lib/utils"
 import { useTranslations } from "next-intl"
 import * as React from "react"
 import { useCallback, useMemo } from "react"
@@ -285,12 +284,22 @@ export const NetworkChart = React.memo(function NetworkChart({
             <CartesianGrid vertical={false} />
             <XAxis
               dataKey="created_at"
-              tickLine={false}
+              tickLine={true}
+              tickSize={3}
               axisLine={false}
               tickMargin={8}
-              minTickGap={32}
-              interval={"preserveStartEnd"}
-              tickFormatter={(value) => formatRelativeTime(value)}
+              minTickGap={80}
+              interval={0}
+              ticks={processedData
+                .filter((item) => {
+                  const date = new Date(item.created_at)
+                  return date.getMinutes() === 0 && date.getHours() % 3 === 0
+                })
+                .map((item) => item.created_at)}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return `${date.getHours()}:00`
+              }}
             />
             <YAxis
               tickLine={false}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
index 9c9a850..34a8d0d 100644
--- a/components/ui/chart.tsx
+++ b/components/ui/chart.tsx
@@ -164,7 +164,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start overflow-hidden gap-1.5 rounded-sm border border-border/50 bg-stone-100 dark:bg-stone-900 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start overflow-hidden gap-1.5 rounded-sm border border-border/50 bg-stone-100 dark:bg-stone-900 text-xs",
           className,
         )}
       >
@@ -233,13 +233,14 @@ const ChartTooltipContent = React.forwardRef<
                       {item.value && (
                         <span
                           className={cn(
-                            "ml-2 font-mono font-medium tabular-nums text-foreground",
+                            "ml-2 font-medium tabular-nums text-foreground",
                             payload.length === 1 && "-ml-9",
                           )}
                         >
                           {typeof item.value === "number"
-                            ? item.value.toFixed(3).toLocaleString()
-                            : item.value}
+                            ? item.value.toFixed(2).toLocaleString()
+                            : item.value}{" "}
+                          ms
                         </span>
                       )}
                     </div>
diff --git a/lib/utils.ts b/lib/utils.ts
index cfd3715..84fd4d0 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -125,3 +125,13 @@ export function formatTime(timestamp: number): string {
   const seconds = date.getSeconds().toString().padStart(2, "0")
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
+
+export function formatTime12(timestamp: number): string {
+  // example: 3:45 PM
+  const date = new Date(timestamp)
+  const hours = date.getHours()
+  const minutes = date.getMinutes()
+  const ampm = hours >= 12 ? "PM" : "AM"
+  const hours12 = hours % 12 || 12
+  return `${hours12}:${minutes.toString().padStart(2, "0")} ${ampm}`
+}