diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index adcc508..3604f78 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -3,7 +3,6 @@ import {
   Box,
   Container,
   Grid,
-  Typography,
   CircularProgress,
   Alert,
   ToggleButton,
@@ -11,7 +10,6 @@ import {
 } from "@mui/material";
 
 import LatestItemsList, { LatestItem } from "./components/LatestItemsList";
-import ProgressCard from "./components/ProgressCard";
 import HistoryChart from "./components/HistoryChart";
 
 import {
@@ -76,10 +74,8 @@ export default function Dashboard() {
     );
   }
 
-  const themes = ["primary", "secondary", "info", "success", "warning"] as const;
-
   return (
-    <Container maxWidth="xl" sx={{ mt: 4, mb: 4 }}>
+    <Container sx={{ mt: 4, mb: 4 }}>
       {/* -------- TOGGLE -------- */}
       <Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
         <ToggleButtonGroup
@@ -92,9 +88,9 @@ export default function Dashboard() {
         </ToggleButtonGroup>
       </Box>
 
-      <Grid container spacing={4}>
-        {/* Column 1 */}
-        <Grid item xs={12} md={4}>
+      <Grid container spacing={4} direction="row">
+        {/* LEFT → 1/3 (4 cols) */}
+        <Grid size={4}>
           <LatestItemsList
             title="Recent Transactions"
             items={latest}
@@ -102,8 +98,8 @@ export default function Dashboard() {
           />
         </Grid>
 
-        {/* Column 2 */}
-        <Grid item xs={12} md={8}>
+        {/* RIGHT → 2/3 (8 cols) */}
+        <Grid size={8}>
           <HistoryChart
             header={`${mode === "expense" ? "Expense" : "Income"} Breakdown`}
             summary="Interactive chronological tracking"
@@ -111,7 +107,6 @@ export default function Dashboard() {
             data={aggregated?.chartData || {}}
           />
         </Grid>
-
       </Grid>
     </Container>
   );