diff --git a/src/frontend/src/components/reportEditor/DataBindingPanel.tsx b/src/frontend/src/components/reportEditor/DataBindingPanel.tsx
index 8f9ad94..09fb415 100644
--- a/src/frontend/src/components/reportEditor/DataBindingPanel.tsx
+++ b/src/frontend/src/components/reportEditor/DataBindingPanel.tsx
@@ -220,7 +220,7 @@ export default function DataBindingPanel({
           borderRight: embedded ? 0 : isMobile ? 0 : 1,
           borderColor: "divider",
           p: 3,
-          bgcolor: embedded ? "transparent" : "grey.50",
+          bgcolor: embedded ? "transparent" : "background.default",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
@@ -229,7 +229,7 @@ export default function DataBindingPanel({
           height: "100%",
         }}
       >
-        <TableIcon sx={{ fontSize: 48, color: "grey.400", mb: 2 }} />
+        <TableIcon sx={{ fontSize: 48, color: "text.disabled", mb: 2 }} />
         <Typography variant="subtitle2" color="text.secondary" gutterBottom>
           Nessun Dataset Selezionato
         </Typography>
@@ -384,7 +384,7 @@ export default function DataBindingPanel({
                     <List key={groupKey} dense disablePadding>
                       <ListItemButton
                         onClick={() => toggleExpand(groupKey)}
-                        sx={{ pl: 2, bgcolor: "grey.50" }}
+                        sx={{ pl: 2, bgcolor: "action.hover" }}
                       >
                         <ListItemText
                           primary={groupName}
@@ -746,7 +746,7 @@ export default function DataBindingPanel({
           p: 1.5,
           borderTop: 1,
           borderColor: "divider",
-          bgcolor: "grey.50",
+          bgcolor: "background.default",
         }}
       >
         <Typography variant="caption" color="text.secondary">
diff --git a/src/frontend/src/components/reportEditor/DatasetSelector.tsx b/src/frontend/src/components/reportEditor/DatasetSelector.tsx
index 52a591d..3127c87 100644
--- a/src/frontend/src/components/reportEditor/DatasetSelector.tsx
+++ b/src/frontend/src/components/reportEditor/DatasetSelector.tsx
@@ -169,7 +169,7 @@ export default function DatasetSelector({
         sx={{
           borderBottom: 1,
           borderColor: "divider",
-          bgcolor: "grey.50",
+          bgcolor: "background.default",
         }}
       >
         {/* Header - always visible */}
@@ -261,7 +261,7 @@ export default function DatasetSelector({
               <Box key={category}>
                 <ListSubheader
                   sx={{
-                    bgcolor: "grey.100",
+                    bgcolor: "action.hover",
                     lineHeight: "28px",
                     fontSize: "0.7rem",
                     fontWeight: 600,
@@ -322,7 +322,7 @@ export default function DatasetSelector({
         p: isTablet ? 1 : 1.5,
         borderBottom: 1,
         borderColor: "divider",
-        bgcolor: "grey.50",
+        bgcolor: "background.default",
         flexWrap: "wrap",
         minHeight: isTablet ? 44 : 52,
       }}
@@ -412,7 +412,7 @@ export default function DatasetSelector({
                 <Box key={category}>
                   <ListSubheader
                     sx={{
-                      bgcolor: "grey.100",
+                      bgcolor: "action.hover",
                       lineHeight: "32px",
                       fontSize: "0.75rem",
                       fontWeight: 600,
diff --git a/src/frontend/src/components/reportEditor/EditorCanvas.tsx b/src/frontend/src/components/reportEditor/EditorCanvas.tsx
index 9416e1d..4270e1d 100644
--- a/src/frontend/src/components/reportEditor/EditorCanvas.tsx
+++ b/src/frontend/src/components/reportEditor/EditorCanvas.tsx
@@ -6,7 +6,7 @@ import {
   useImperativeHandle,
   useState,
 } from "react";
-import { Box, Typography, Fade } from "@mui/material";
+import { Box, Typography, Fade, useTheme } from "@mui/material";
 import * as fabric from "fabric";
 import type {
   ZrtTemplate,
@@ -135,6 +135,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
 
     // UI State
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const theme = useTheme();
 
     // Calculate canvas dimensions
     const pageDims = getPageDimensions(
@@ -1091,6 +1092,18 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
       fabricRef.current.renderAll();
     }, [zoom, canvasWidth, canvasHeight]);
 
+    // Update canvas background based on theme
+    useEffect(() => {
+      if (!fabricRef.current) return;
+
+      const isDark = theme.palette.mode === 'dark';
+      // Use theme paper color for dark mode, white for light mode
+      const bgColor = isDark ? '#1e1e1e' : '#ffffff';
+
+      fabricRef.current.backgroundColor = bgColor;
+      fabricRef.current.renderAll();
+    }, [theme.palette.mode]);
+
     // Render grid
     useEffect(() => {
       if (!fabricRef.current) return;
@@ -1103,12 +1116,14 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
 
       if (showGrid) {
         const gridPx = mmToPx(gridSize);
+        const isDark = theme.palette.mode === 'dark';
+        const gridColor = isDark ? '#333333' : '#e0e0e0';
 
         for (let x = 0; x <= canvasWidth; x += gridPx) {
           const line = new fabric.Line(
             [x * zoom, 0, x * zoom, canvasHeight * zoom],
             {
-              stroke: "#e0e0e0",
+              stroke: gridColor,
               strokeWidth: 1,
               selectable: false,
               evented: false,
@@ -1124,7 +1139,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
           const line = new fabric.Line(
             [0, y * zoom, canvasWidth * zoom, y * zoom],
             {
-              stroke: "#e0e0e0",
+              stroke: gridColor,
               strokeWidth: 1,
               selectable: false,
               evented: false,
@@ -1138,7 +1153,7 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
       }
 
       fabricRef.current.renderAll();
-    }, [showGrid, gridSize, zoom, canvasWidth, canvasHeight]);
+    }, [showGrid, gridSize, zoom, canvasWidth, canvasHeight, theme.palette.mode]);
 
     // Render margins
     useEffect(() => {
@@ -1526,7 +1541,8 @@ const EditorCanvas = forwardRef<EditorCanvasRef, EditorCanvasProps>(
           display: "flex",
           justifyContent: "center",
           alignItems: "flex-start",
-          bgcolor: "#f5f5f5",
+          bgcolor: (theme) =>
+            theme.palette.mode === "dark" ? "#121212" : "#f5f5f5",
           p: 3,
           position: "relative",
         }}
diff --git a/src/frontend/src/components/reportEditor/EditorToolbar.tsx b/src/frontend/src/components/reportEditor/EditorToolbar.tsx
index 71b4150..7974634 100644
--- a/src/frontend/src/components/reportEditor/EditorToolbar.tsx
+++ b/src/frontend/src/components/reportEditor/EditorToolbar.tsx
@@ -557,7 +557,7 @@ export default function EditorToolbar({
             onClick={(e) => setPageMenuAnchor(e.currentTarget)}
             endIcon={<DropdownIcon />}
             sx={{
-              bgcolor: "grey.100",
+              bgcolor: "action.hover",
               borderRadius: 1.5,
               textTransform: "none",
               fontFamily: "monospace",
@@ -627,7 +627,7 @@ export default function EditorToolbar({
                 minWidth: 55,
                 fontFamily: "monospace",
                 fontWeight: 600,
-                bgcolor: "grey.100",
+                bgcolor: "action.hover",
                 borderRadius: 1,
               }}
             >
@@ -991,7 +991,7 @@ export default function EditorToolbar({
               minWidth: 55,
               fontFamily: "monospace",
               fontWeight: 600,
-              bgcolor: "grey.100",
+              bgcolor: "action.hover",
               borderRadius: 1.5,
             }}
           >
@@ -1021,7 +1021,7 @@ export default function EditorToolbar({
               sx={{
                 fontFamily: "monospace",
                 fontWeight: 600,
-                bgcolor: "grey.100",
+                bgcolor: "action.hover",
                 borderRadius: 1.5,
                 px: 1.5,
               }}
@@ -1505,14 +1505,14 @@ export default function EditorToolbar({
               bgcolor:
                 activeSnapCount > 0
                   ? alpha(theme.palette.primary.main, 0.1)
-                  : "grey.100",
+                  : "action.hover",
               color: activeSnapCount > 0 ? "primary.main" : "text.primary",
               px: 1.5,
               "&:hover": {
                 bgcolor:
                   activeSnapCount > 0
                     ? alpha(theme.palette.primary.main, 0.2)
-                    : "grey.200",
+                    : "action.selected",
               },
             }}
           >
@@ -1583,7 +1583,7 @@ export default function EditorToolbar({
                         mr: 1.5,
                         bgcolor: snapOptions[key]
                           ? alpha(theme.palette.primary.main, 0.15)
-                          : "grey.100",
+                          : "action.hover",
                       }}
                     >
                       <Icon
@@ -1641,9 +1641,9 @@ export default function EditorToolbar({
               textTransform: "none",
               fontWeight: 600,
               fontFamily: "monospace",
-              bgcolor: "grey.100",
+              bgcolor: "action.hover",
               color: "text.primary",
-              "&:hover": { bgcolor: "grey.200" },
+              "&:hover": { bgcolor: "action.selected" },
             }}
           >
             {Math.round(zoom * 100)}%
@@ -1739,8 +1739,8 @@ export default function EditorToolbar({
               px: 1.5,
               borderRadius: 1.5,
               textTransform: "none",
-              bgcolor: "grey.100",
-              "&:hover": { bgcolor: "grey.200" },
+              bgcolor: "action.hover",
+              "&:hover": { bgcolor: "action.selected" },
             }}
           >
             <PageIcon
@@ -1821,9 +1821,9 @@ export default function EditorToolbar({
                 borderRadius: 2,
                 textTransform: "none",
                 color: "text.secondary",
-                bgcolor: "grey.100",
+                bgcolor: "action.hover",
                 px: 2,
-                "&:hover": { bgcolor: "grey.200" },
+                "&:hover": { bgcolor: "action.selected" },
               }}
             >
               Cerca...
diff --git a/src/frontend/src/components/reportEditor/PropertiesPanel.tsx b/src/frontend/src/components/reportEditor/PropertiesPanel.tsx
index e2bdce8..b38f33b 100644
--- a/src/frontend/src/components/reportEditor/PropertiesPanel.tsx
+++ b/src/frontend/src/components/reportEditor/PropertiesPanel.tsx
@@ -695,7 +695,7 @@ export default function PropertiesPanel({
                     sx={{
                       width: "100%",
                       height: isMobile ? 100 : 120,
-                      bgcolor: "grey.100",
+                      bgcolor: "action.hover",
                       borderRadius: 1,
                       overflow: "hidden",
                       display: "flex",
diff --git a/src/frontend/src/pages/ReportEditorPage.tsx b/src/frontend/src/pages/ReportEditorPage.tsx
index 7de617d..ae157bd 100644
--- a/src/frontend/src/pages/ReportEditorPage.tsx
+++ b/src/frontend/src/pages/ReportEditorPage.tsx
@@ -2017,7 +2017,9 @@ export default function ReportEditorPage() {
             justifyContent: "flex-start",
             overflow: "auto",
             bgcolor: (theme) =>
-              theme.palette.mode === "dark" ? "#1a1a1a" : "#e0e0e0",
+              theme.palette.mode === "dark"
+                ? theme.palette.background.default
+                : "#e0e0e0",
             position: "relative",
           }}
         >