diff --git a/web/src/components/dashboard/BarChart.jsx b/web/src/components/dashboard/BarChart.jsx
index ca3c1cc..fcee3d7 100644
--- a/web/src/components/dashboard/BarChart.jsx
+++ b/web/src/components/dashboard/BarChart.jsx
@@ -1,42 +1,27 @@
 import React from 'react';
 
-const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
+const BarChart = ({ data = [], height = 80, barW = 24 }) => {
   if (!data || data.length === 0) return null;
 
   const max = Math.max(...data, 1);
-  const barCount = data.length;
-  const gap = 4;
-  const totalGap = (barCount - 1) * gap;
-  const barWidth = Math.max(8, (width - totalGap) / barCount);
-  const totalUsed = barCount * barWidth + totalGap;
-  const offsetX = (width - totalUsed) / 2;
 
   return (
-    <svg
-      width='100%'
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      preserveAspectRatio='none'
-    >
+    <div className='flex w-full items-end justify-between' style={{ height }}>
       {data.map((v, i) => {
-        const barH = Math.max(2, (v / max) * (height - 4));
-        const x = offsetX + i * (barWidth + gap);
-        const y = height - barH;
-        const rx = Math.min(3, barWidth / 3);
+        const pct = Math.max(2, Math.round((v / max) * 100));
         return (
-          <rect
+          <div
             key={i}
-            x={x}
-            y={y}
-            width={barWidth}
-            height={barH}
-            rx={rx}
-            fill={color}
-            opacity={0.85}
-          />
+            className='w-full flex justify-center'
+          >
+            <div
+              className='rounded-sm bg-blue-500'
+              style={{ height: `${pct}%`, width: barW }}
+            />
+          </div>
         );
       })}
-    </svg>
+    </div>
   );
 };
 
diff --git a/web/src/components/dashboard/BentoTrend.jsx b/web/src/components/dashboard/BentoTrend.jsx
index 666198f..c93d94e 100644
--- a/web/src/components/dashboard/BentoTrend.jsx
+++ b/web/src/components/dashboard/BentoTrend.jsx
@@ -224,27 +224,20 @@ const BentoTrend = ({
       </div>
 
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
-        <BarChart data={counts} width={400} height={80} />
+        <BarChart data={counts} height={80} barW={26} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>
         <div className='flex w-full items-center justify-between tabular-nums'>
-          {dailyStats.map((d, i) => {
-            const isPeak = d.count === peak && peak > 0;
-            return (
-              <span
-                key={i}
-                className={`text-center text-xs ${
-                  isPeak
-                    ? 'font-semibold text-slate-900 dark:text-white'
-                    : 'text-slate-500 dark:text-white/50'
-                }`}
-                title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
-              >
-                {formatMD(d.date)}
-              </span>
-            );
-          })}
+          {dailyStats.map((d, i) => (
+            <span
+              key={i}
+              className='text-center text-xs text-slate-500 dark:text-white/50'
+              title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
+            >
+              {formatMD(d.date)}
+            </span>
+          ))}
         </div>
         <div className='ml-4 shrink-0 text-slate-500 tabular-nums dark:text-white/50'>
           峰值{' '}