src/components/Dashboard/Dashboard.view.tsx

@@ -100,14 +100,6 @@ export default function DashboardView({
           
           return (
             <Grid key={section.id} size={section.style?.size || 12 as any}>
-              {section.title && !section.isList && (
-                <Box sx={{ mb: 2 }}>
-                  <Typography variant="h6" fontWeight={700}>
-                    {section.title}
-                  </Typography>
-                </Box>
-              )}
-
               <Component
                 {...section.settings}
                 header={section.title}

src/components/LatestItems/LatestItems.models.ts

@@ -8,6 +8,7 @@ export interface LatestItem {
 
 export interface LatestItemsViewProps {
   items: LatestItem[];
+  header: string;
   accentColor: string;
   canExpand: boolean;
   onExpand: () => void;

src/components/LatestItems/LatestItems.tsx

@@ -6,6 +6,7 @@ import LatestItemsView from "./LatestItems.view";
 type Props = {
   reportData: ReportData;
   flow: "outflows" | "inflows";
+  header: string;
   selectedPeriodId: string | null;
   selectedGroupKey?: GroupKey | null;
   accentColor: string;
@@ -15,6 +16,7 @@ type Props = {
 export default function LatestItems({
   reportData,
   flow,
+  header,
   selectedPeriodId,
   selectedGroupKey = null,
   accentColor,
@@ -35,6 +37,7 @@ export default function LatestItems({
   return (
     <LatestItemsView
       items={visibleItems}
+      header={header}
       accentColor={accentColor}
       canExpand={canExpand}
       isFetching={isFetching}

src/components/LatestItems/LatestItems.view.tsx

@@ -14,6 +14,7 @@ import { LatestItemsViewProps } from "./LatestItems.models";
 
 export default function LatestItemsView({
   items,
+  header,
   accentColor,
   canExpand,
   onExpand,
@@ -23,7 +24,7 @@ export default function LatestItemsView({
     <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
       <Box sx={{ mb: 2, px: 2 }}>
         <Typography variant="h6" fontWeight="bold">
-          Recent Transactions
+          {header}
         </Typography>
       </Box>
 

src/components/ProgressCard/TopTags.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box } from "@mui/material";
+import { Box, Paper, Typography } from "@mui/material";
 import { ReportData, GroupKey } from "../../features/report";
 import ProgressCard from "./ProgressCard";
 import { extractTopTags } from "./TopTags.adapter";
@@ -7,6 +7,7 @@ import { extractTopTags } from "./TopTags.adapter";
 type Props = {
   reportData: ReportData;
   flow: "outflows" | "inflows";
+  header: string;
   selectedPeriodId?: string | null;
   selectedGroupKey?: GroupKey | null;
   setSelectedGroupKey?: (key: GroupKey | null) => void;
@@ -17,6 +18,7 @@ type Props = {
 export default function TopTags({
   reportData,
   flow,
+  header,
   selectedPeriodId,
   selectedGroupKey,
   setSelectedGroupKey,
@@ -28,6 +30,24 @@ export default function TopTags({
   }, [reportData, flow, selectedPeriodId]);
 
   return (
+    <Paper
+      sx={{
+        p: { xs: 2.5, sm: 4 },
+        borderRadius: 4,
+        width: "100%",
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        opacity: isFetching ? 0.6 : 1,
+        transition: "opacity 0.3s ease",
+        pointerEvents: isFetching ? "none" : "auto",
+      }}
+    >
+      <Typography variant="h6" fontWeight={700} gutterBottom>
+        {header}
+      </Typography>
+
       <Box
         sx={{
           display: "grid",
@@ -60,5 +80,6 @@ export default function TopTags({
           );
         })}
       </Box>
+    </Paper>
   );
 }

src/dashboard-config.ts

@@ -31,6 +31,7 @@ export const configuration: DashboardConfig = {
     },
     {
       id: "items",
+      title: 'Recent Transactions',
       component: LatestItems,
       style: {
         size: 12,