diff --git a/client/src/theme.js b/client/src/theme.js
index 6bed3d6..459c199 100644
--- a/client/src/theme.js
+++ b/client/src/theme.js
@@ -25,7 +25,8 @@ const dashboardRecipe = defineRecipe({
 const canvasRecipe = defineRecipe({
   base: {
     bg: "{base200}",
-    zIndex: "-1"
+    zIndex: "-1",
+    color: "{text}"
   }
 });
 
@@ -74,7 +75,8 @@ const widgetRecipe = defineSlotRecipe({
     },
     header: {
       flexShrink: "0",
-      bg: "base200",
+      bg: "{base300}",
+      color: "{text}",
       cursor: "move",
       borderRadius: "sm",
       whiteSpace: "nowrap",
@@ -83,7 +85,8 @@ const widgetRecipe = defineSlotRecipe({
     },
     canvas: {
       flex: "1 1 auto",
-      bg: "base100",
+      bg: "transparent",
+      color: "{text}",
       cursor: "default",
       borderRadius: "md",
       overflow: "auto",
@@ -95,9 +98,9 @@ const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
-        base100: { value: {base: "#f6f9faff", _dark: "lightgrey"}},
+        base100: { value: {base: "#f6f9faff", _dark: "#1617199e"}},
         base200: { value: {base: "#e6ecf1ff", _dark: "#242424"}},
-        base300: { value: {base: "#d3dae4ff", _dark: "#60645a"}},
+        base300: { value: {base: "#d3dae4ff", _dark: "#0a0b0bff"}},
         // primary: { value: {base: "#9cd855", _dark: "#629631"}},
         primary: { value: {base: "#2B98F8", _dark: "#2B98F8"}},
         // primaryLt: { value: {base: "#c9e9a0", _dark: "#92948e"}},