diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 30e89afc..c8a9ef0f 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -136,9 +136,9 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
         nodesDraggable={false}
         nodesConnectable={false}
         proOptions={{ hideAttribution: true }}
-        className="bg-background"
+        className="bg-accent/30"
       >
-        <Background variant={BackgroundVariant.Dots} gap={24} size={1} color="hsl(var(--border))" />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
         <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
         {minimapVisible && (
           <MiniMap
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 05a11ad4..e521169c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -318,30 +318,37 @@
 
 /* React Flow dark theme overrides */
 .react-flow__background {
-  background-color: hsl(var(--background));
+  background-color: transparent !important;
 }
 
 .react-flow__controls {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  background-color: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.75rem !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+  overflow: hidden;
 }
 
 .react-flow__controls-button {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  fill: hsl(var(--muted-foreground));
+  background-color: hsl(var(--card)) !important;
+  border-color: hsl(var(--border)) !important;
+  fill: hsl(var(--muted-foreground)) !important;
+  color: hsl(var(--muted-foreground)) !important;
 }
 
 .react-flow__controls-button:hover {
-  background-color: hsl(var(--accent));
+  background-color: hsl(var(--accent)) !important;
+  fill: hsl(var(--foreground)) !important;
+}
+
+.react-flow__controls-button svg {
+  fill: inherit !important;
 }
 
 .react-flow__minimap {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  border-radius: 0.75rem;
+  background-color: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.75rem !important;
 }
 
 .react-flow__edge-path {