diff --git a/src/pages/_components/bar-chart/index.tsx b/src/pages/_components/bar-chart/index.tsx
index 64f83644..d772732e 100644
--- a/src/pages/_components/bar-chart/index.tsx
+++ b/src/pages/_components/bar-chart/index.tsx
@@ -180,10 +180,14 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         }
       },
       legend: {
+        type: 'scroll',
         itemWidth: 8,
         itemHeight: 8,
         itemGap: 12,
         textStyle: { color: token.colorTextTertiary },
+        pageTextStyle: { color: token.colorTextTertiary },
+        pageIconColor: token.colorTextTertiary,
+        pageIconInactiveColor: token.colorTextDisabled,
         bottom: 0,
         data: legendData,
         show: !!legendData?.length
diff --git a/src/pages/usage/components/daily-usage.tsx b/src/pages/usage/components/daily-usage.tsx
index 3628ce31..52d001c4 100644
--- a/src/pages/usage/components/daily-usage.tsx
+++ b/src/pages/usage/components/daily-usage.tsx
@@ -86,6 +86,10 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
     return dayjs(v).format('MM-DD');
   };
 
+  // Recompute only when data (or locale) changes, NOT when metric/groupBy/granularity change.
+  // Filter changes already trigger a refetch; deriving on stale data with new filters
+  // produces an inconsistent intermediate frame (e.g. grouped data flattened to total),
+  // which is the visible flicker.
   const { seriesData, xAxisData, legendData } = useMemo(() => {
     const items = timeSeriesData?.items || [];
     if (items.length === 0) {
@@ -233,7 +237,7 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
       xAxisData: xAxis,
       legendData: dedupedLegend
     };
-  }, [timeSeriesData, metric, groupBy, granularity, startDate, endDate, intl]);
+  }, [timeSeriesData, intl]);
 
   const handleOnGroupByChange = (value: string) => {
     onGroupByChange(value || null);
diff --git a/src/pages/usage/components/export-data.tsx b/src/pages/usage/components/export-data.tsx
index 4031ec7b..a00cd3d9 100644
--- a/src/pages/usage/components/export-data.tsx
+++ b/src/pages/usage/components/export-data.tsx
@@ -182,7 +182,11 @@ const ExportData: React.FC<{
       }
     },
     {
-      title: intl.formatMessage({ id: 'usage.filter.totalTokens' }),
+      title: (
+        <AutoTooltip ghost>
+          {intl.formatMessage({ id: 'usage.filter.totalTokens' })}
+        </AutoTooltip>
+      ),
       dataIndex: 'total_tokens',
       render: (text: string, record: any) => {
         return <AutoTooltip ghost>{text}</AutoTooltip>;
@@ -322,7 +326,9 @@ const ExportData: React.FC<{
         style={{
           position: 'sticky',
           top: 0,
-          zIndex: 1
+          zIndex: 1,
+          backgroundColor: 'var(--ant-color-bg-elevated)',
+          paddingBottom: 8
         }}
       >
         <FilterBar