src/components/dashboard/CategoryPieChart.tsx

@@ -37,6 +37,7 @@ export default function CategoryPieChart({
   if (data.length === 0) {
     return (
       <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
+        <h2 className="text-lg font-semibold mb-4">{t("dashboard.expensesByCategory")}</h2>
         <p className="text-center text-[var(--muted-foreground)] py-8">{t("dashboard.noData")}</p>
       </div>
     );
@@ -44,6 +45,8 @@ export default function CategoryPieChart({
 
   return (
     <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
+      <h2 className="text-lg font-semibold mb-4">{t("dashboard.expensesByCategory")}</h2>
+
       {hiddenCategories.size > 0 && (
         <div className="flex flex-wrap items-center gap-2 mb-3">
           <span className="text-xs text-[var(--muted-foreground)]">{t("charts.hiddenCategories")}:</span>

src/pages/DashboardPage.tsx

@@ -127,16 +127,13 @@ export default function DashboardPage() {
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
-        <div>
+        <CategoryPieChart
-          <h2 className="text-lg font-semibold mb-3">{t("dashboard.expensesByCategory")}</h2>
+          data={categoryBreakdown}
-          <CategoryPieChart
+          hiddenCategories={hiddenCategories}
-            data={categoryBreakdown}
+          onToggleHidden={toggleHidden}
-            hiddenCategories={hiddenCategories}
+          onShowAll={showAll}
-            onToggleHidden={toggleHidden}
+          onViewDetails={viewDetails}
-            onShowAll={showAll}
+        />
-            onViewDetails={viewDetails}
-          />
-        </div>
         <div>
           <h2 className="text-lg font-semibold mb-3">{t("dashboard.budgetVsActual")}</h2>
           <BudgetVsActualTable data={budgetVsActual} />