diff --git a/sass/themes/schemas/components/dark/_query-builder.scss b/sass/themes/schemas/components/dark/_query-builder.scss
index a3d4f387..04253090 100644
--- a/sass/themes/schemas/components/dark/_query-builder.scss
+++ b/sass/themes/schemas/components/dark/_query-builder.scss
@@ -7,27 +7,82 @@
 /// @access public
 ////
 
+/// Generates a base dark query builder schema.
+/// @type {Map}
+/// @prop {Map} subquery-header-background [color: ('gray', 50)] - The background color of the subquery header.
+/// @prop {Map} subquery-border-color [color: ('gray', 200)] - The border color of the query block.
+/// @prop {Map} separator-color [color: ('gray', 200)] - The separator color of the query block.
+/// @prop {Color} color-expression-group-and [#DA64FF] - The color of advanced filtering "AND" condition group.
+/// @prop {Color} color-expression-group-or [#19AD87] - The color of advanced filtering "OR" condition group.
+$dark-query-builder: (
+    subquery-header-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    subquery-border-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    separator-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    color-expression-group-and: #da64ff,
+    color-expression-group-or: #19ad87,
+);
+
 /// Generates a dark material query builder schema.
 /// @type {Map}
 /// @see $material-query-builder
 /// @requires $material-query-builder
-$dark-material-query-builder: $material-query-builder;
+/// @requires $dark-query-builder
+$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
 
 /// Generates a dark fluent query builder schema.
 /// @see $fluent-query-builder
 /// @requires $fluent-query-builder
-$dark-fluent-query-builder: $fluent-query-builder;
+/// @requires $dark-query-builder
+$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder);
 
 /// Generates a dark bootstrap query builder schema.
-$dark-bootstrap-query-builder: $bootstrap-query-builder;
+/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
+/// @see $bootstrap-query-builder
+/// @requires $bootstrap-query-builder
+/// @requires $dark-query-builder
+$dark-bootstrap-query-builder: extend(
+    $bootstrap-query-builder,
+    $dark-query-builder,
+    (
+        header-border: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark indigo query builder schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
-/// @prop {Map} header-border [color: ('gray', 100)] - The border color of the query builder header.
+/// @prop {Map} background [color: ('gray', 50)] - The background color of the query builder.
+/// @prop {Map} header-background [color: ('gray', 50)] - The background color of the query builder header.
+/// @prop {Map} subquery-header-background [contrast: ('gray', 50, .05)] - The background color of the subquery header.
+/// @prop {Map} subquery-border-color [color: ('gray', 100)] - The border color of the query block.
+/// @see $indigo-query-builder
 /// @requires $indigo-query-builder
+/// @requires $dark-query-builder
 $dark-indigo-query-builder: extend(
     $indigo-query-builder,
+    $dark-query-builder,
     (
         background: (
             color: (
@@ -35,8 +90,20 @@ $dark-indigo-query-builder: extend(
                 50,
             ),
         ),
-
-        header-border: (
+        header-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        subquery-header-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.05,
+            ),
+        ),
+        subquery-border-color: (
             color: (
                 'gray',
                 100,
diff --git a/sass/themes/schemas/components/elevation/_query-builder.scss b/sass/themes/schemas/components/elevation/_query-builder.scss
new file mode 100644
index 00000000..eba0a982
--- /dev/null
+++ b/sass/themes/schemas/components/elevation/_query-builder.scss
@@ -0,0 +1,11 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default query-builder.
+$default-elevation-query-builder: (
+    elevation: 24,
+);
diff --git a/sass/themes/schemas/components/light/_query-builder.scss b/sass/themes/schemas/components/light/_query-builder.scss
index 95504f92..9cea413e 100644
--- a/sass/themes/schemas/components/light/_query-builder.scss
+++ b/sass/themes/schemas/components/light/_query-builder.scss
@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../../../../typography/functions' as *;
+@use '../elevation/query-builder' as *;
 
 ////
 /// @package theming
@@ -10,65 +11,79 @@
 
 /// Generates a base light query builder schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
-/// @prop {Map} header-background [color: ('gray', 100)] - The background color of the query builder header.
-/// @prop {Map} header-foreground [color: ('gray', 700)] - The foreground color of the query builder header.
+/// @prop {Map} background [color: ('surface', 500)] - The background color of the query builder.
+/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the query builder header.
+/// @prop {Map} header-foreground [color: ('gray', 900)] - The foreground color of the query builder header.
 /// @prop {Color} header-border [transparent] - The border color of the query builder header.
-/// @prop {Map} background-and [color: ('primary', 300)] - The background color of advanced filtering "AND" condition.
-/// @prop {Map} background-and--focus [color: ('primary', 700)] - The background color on focus/selected of advanced filtering "AND" condition.
-/// @prop {Map} background-or [color: ('secondary', 300)] - The background color of advanced filtering "OR" condition.
-/// @prop {Map} background-or--focus [color: ('secondary', 700)] - The background color on focus/selected of advanced filtering "OR" condition.
-$light-query-builder: (
-    background: (
-        color: (
-            'gray',
-            50,
+/// @prop {Map} label-foreground [color: ('gray', 700)] - The color for query builder labels "from" & "select".
+/// @prop {Map} separator-color [color: ('gray', 300)] - The separator color of the query builder tree block.
+/// @prop {Map} subquery-header-background [color: ('gray, 100')] - The background color of the subquery header.
+/// @prop {Map} subquery-border-color [color: ('gray', 300)] - The border color of the subquery block.
+/// @prop {Color} color-expression-group-and [#DA64FF] - The color of advanced filtering "AND" condition group.
+/// @prop {Color} color-expression-group-or [#048261] - The color of advanced filtering "OR" condition group.
+/// @prop {Number} subquery-border-radius [rem(12px)] - The border radius of the subquery block.
+/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
+/// @requires {Map} $default-elevation-query-builder
+$light-query-builder: extend(
+    $default-elevation-query-builder,
+    (
+        background: (
+            color: (
+                'surface',
+                500,
+            ),
         ),
-    ),
 
-    header-background: (
-        color: (
-            'gray',
-            100,
+        header-background: (
+            color: (
+                'surface',
+                500,
+            ),
         ),
-    ),
 
-    header-foreground: (
-        color: (
-            'gray',
-            700,
+        header-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
         ),
-    ),
 
-    header-border: transparent,
+        header-border: transparent,
 
-    background-and: (
-        color: (
-            'primary',
-            300,
+        color-expression-group-and: #9c27b0,
+
+        color-expression-group-or: #007254,
+
+        border-radius: rem(4px),
+        subquery-header-background: (
+            color: (
+                'gray',
+                100,
+            ),
         ),
-    ),
 
-    background-and--focus: (
-        color: (
-            'primary',
-            700,
+        subquery-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
         ),
-    ),
 
-    background-or: (
-        color: (
-            'secondary',
-            300,
+        subquery-border-radius: rem(12px),
+        separator-color: (
+            color: (
+                'gray',
+                500,
+            ),
         ),
-    ),
 
-    background-or--focus: (
-        color: (
-            'secondary',
-            700,
+        label-foreground: (
+            color: (
+                'gray',
+                700,
+            ),
         ),
-    ),
+    )
 );
 
 /// Generates a material query builder schema.
@@ -78,40 +93,26 @@ $material-query-builder: $light-query-builder;
 
 /// Generates a fluent query builder schema.
 /// @type {Map}
-/// @prop {Map} background-or [color: ('error', 500, .5)] - The background color of advanced filtering "OR" condition.
-/// @prop {Map} background-or--focus [color: ('error')] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Number} border-radius [rem(4px)] - The border radius of the query builder.
 /// @requires {Map} $light-query-builder
 $fluent-query-builder: extend(
     $light-query-builder,
     (
-        background-or: (
-            color: (
-                'error',
-                500,
-                0.5,
-            ),
-        ),
-
-        background-or--focus: (
-            color: (
-                'error',
-            ),
-        ),
+        border-radius: rem(2px),
     )
 );
 
 /// Generates a bootstrap query builder schema.
 /// @type {Map}
-/// @prop {Map} header-background [color: ('gray', 100, .5)] - The background color of the query builder header.
+/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
 /// @requires {Map} $light-query-builder
 $bootstrap-query-builder: extend(
     $light-query-builder,
     (
-        header-background: (
+        header-border: (
             color: (
                 'gray',
-                100,
-                0.5,
+                300,
             ),
         ),
     )
@@ -119,13 +120,9 @@ $bootstrap-query-builder: extend(
 
 /// Generates an indigo query builder schema.
 /// @type {Map}
-/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the filtering row.
-/// @prop {Color} header-background [transparent] - The background color of the query builder header.
-/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
-/// @prop {Map} background-and [color: ('primary', 400)] - The background color of advanced filtering "AND" condition.
-/// @prop {Map} background-or [color: ('success', 500)] - The background color of advanced filtering "OR" condition.
-/// @prop {Map} background-and--focus [color: ('primary', 300)] - The background color on focus/selected of advanced filtering "AND" condition.
-/// @prop {Map} background-or--focus [color: ('secondary', 400)] - The background color on focus/selected of advanced filtering "OR" condition.
+/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the query builder.
+/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the query builder header.
+/// @prop {Number} border-radius [rem(10px)] - The border radius of the query builder.
 /// @requires {Map} $light-query-builder
 $indigo-query-builder: extend(
     $light-query-builder,
@@ -136,39 +133,12 @@ $indigo-query-builder: extend(
                 900,
             ),
         ),
-
-        header-background: transparent,
-
-        header-border: (
-            color: (
+        header-background: (
+            contrast-color: (
                 'gray',
-                300,
-            ),
-        ),
-
-        background-and: (
-            color: (
-                'primary',
-                400,
-            ),
-        ),
-        background-and--focus: (
-            color: (
-                'primary',
-                300,
-            ),
-        ),
-        background-or: (
-            color: (
-                'success',
-                500,
-            ),
-        ),
-        background-or--focus: (
-            color: (
-                'success',
-                400,
+                900,
             ),
         ),
+        border-radius: rem(10px),
     )
 );