diff --git a/crates/story/src/group_box_story.rs b/crates/story/src/group_box_story.rs
index 8d9be7b5..0a6a7cf5 100644
--- a/crates/story/src/group_box_story.rs
+++ b/crates/story/src/group_box_story.rs
@@ -80,7 +80,7 @@ impl Render for GroupBoxStory {
                     section("Custom style").w_128().child(
                         GroupBox::new()
                             .outline()
-                            .bg(cx.theme().secondary)
+                            .bg(cx.theme().group_box)
                             .rounded_xl()
                             .p_5()
                             .title("This is a custom style")
diff --git a/crates/ui/src/theme/schema.rs b/crates/ui/src/theme/schema.rs
index 8347d6a9..59c21fc1 100644
--- a/crates/ui/src/theme/schema.rs
+++ b/crates/ui/src/theme/schema.rs
@@ -509,7 +509,15 @@ impl ThemeColor {
         apply_color!(accordion, fallback = self.background);
         apply_color!(accordion_active, fallback = self.accordion);
         apply_color!(accordion_hover, fallback = self.accordion);
-        apply_color!(group_box, fallback = self.secondary);
+        apply_color!(
+            group_box,
+            fallback = self
+                .background
+                .blend(
+                    self.secondary
+                        .opacity(if config.mode.is_dark() { 0.3 } else { 0.4 })
+                )
+        );
         apply_color!(group_box_foreground, fallback = self.secondary_foreground);
         apply_color!(caret, fallback = self.primary);
         apply_color!(chart_1, fallback = self.blue.lighten(0.4));