diff --git a/src/components/Nodes/GroupNode.tsx b/src/components/Nodes/GroupNode.tsx
index f9917b4..9500f9d 100644
--- a/src/components/Nodes/GroupNode.tsx
+++ b/src/components/Nodes/GroupNode.tsx
@@ -220,6 +220,20 @@ const GroupNode = ({ id, data, selected }: NodeProps<Group>) => {
         position: 'relative',
       }}
     >
+      {/* Background color overlay - uses group's custom color */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: data.color || 'rgba(240, 242, 245, 0.5)',
+          borderRadius: '8px',
+          pointerEvents: 'none', // Let clicks pass through to children
+        }}
+      />
+
       {/* Resize handles - only visible when selected */}
       <NodeResizer
         isVisible={selected}
diff --git a/src/styles/index.css b/src/styles/index.css
index 7047c00..9f80430 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -46,14 +46,14 @@ code {
 
 /* Group node styling - React Flow native */
 .react-flow__node-group {
-  background-color: rgba(240, 242, 245, 0.5);
+  background-color: transparent; /* Background handled by inner div for custom colors */
   border: 2px dashed rgba(100, 116, 139, 0.4);
   border-radius: 8px;
   padding: 10px; /* Default padding for maximized groups */
 }
 
 .react-flow__node-group.selected {
-  background-color: rgba(219, 234, 254, 0.5);
+  background-color: transparent; /* Background handled by inner div for custom colors */
   border: 2px solid rgba(59, 130, 246, 0.6);
 }