diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html
index 233627c4c7..48d675887f 100644
--- a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html
+++ b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.html
@@ -1,7 +1,9 @@
 <div class="wrapper">
     <igx-query-builder #queryBuilder
-        [entities]="entities"
+        [entities]="[{ name: '', fields: fields}]"
         [expressionTree]="expressionTree">
+        <igx-query-builder-header [title]="'Query Builder Overview'" [showLegend]="true">        
+        </igx-query-builder-header>
     </igx-query-builder>
     <div class="output-area">
         <pre>{{ printExpressionTree(queryBuilder.expressionTree) }}</pre>
diff --git a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts
index 1cb2e592a9..d78fbe6799 100644
--- a/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts
+++ b/src/app/interactions/query-builder/query-builder-sample-1/query-builder-sample-1.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand } from 'igniteui-angular';
+import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxQueryBuilderComponent, IgxStringFilteringOperand } from 'igniteui-angular';
 
 @Component({
     selector: 'app-query-builder-sample-1',
@@ -7,86 +7,52 @@ import { FilteringExpressionsTree, FilteringLogic, IExpressionTree, IgxBooleanFi
     templateUrl: 'query-builder-sample-1.component.html'
 })
 export class QueryBuilderSample1Component implements OnInit {
-    public entities: any[];
-    public companiesFields: any[];
-    public ordersFields: any[];
     public expressionTree: IExpressionTree;
+    
+    public fields: any[] = [
+        { field: 'ID', dataType: 'string' },
+        { field: 'CompanyName', dataType: 'string' },
+        { field: 'ContactName', dataType: 'string' },
+        { field: 'Employees', dataType: 'number' },
+        { field: 'ContactTitle', dataType: 'string' },
+        { field: 'DateCreated', dataType: 'date' },
+        { field: 'TimeCreated', dataType: 'time' },
+        { field: 'Address', dataType: 'string' },
+        { field: 'City', dataType: 'string' },
+        { field: 'Region', dataType: 'string' },
+        { field: 'PostalCode', dataType: 'string' },
+        { field: 'Phone', dataType: 'string' },
+        { field: 'Fax', dataType: 'string' },
+        { field: 'Contract', dataType: 'boolean' }
+    ];
 
     public ngOnInit(): void {
-        this.companiesFields = [
-            { field: "ID", dataType: "string" },
-            { field: "CompanyName", dataType: "string" },
-            { field: "ContactName", dataType: "string" },
-            { field: "Employees", dataType: "number" },
-            { field: "ContactTitle", dataType: "string" },
-            { field: "DateCreated", dataType: "date" },
-            { field: "TimeCreated", dataType: "time" },
-            { field: "Address", dataType: "string" },
-            { field: "City", dataType: "string" },
-            { field: "Region", dataType: "string" },
-            { field: "PostalCode", dataType: "string" },
-            { field: "Phone", dataType: "string" },
-            { field: "Fax", dataType: "string" },
-            { field: "Contract", dataType: "boolean" }
-        ];
-
-        this.ordersFields = [
-            { field: "CompanyID", dataType: "string" },
-            { field: "OrderID", dataType: "number" },
-            { field: "EmployeeId", dataType: "number" },
-            { field: "OrderDate", dataType: "date" },
-            { field: "RequiredDate", dataType: "date" },
-            { field: "ShippedDate", dataType: "date" },
-            { field: "ShipVia", dataType: "number" },
-            { field: "Freight", dataType: "number" },
-            { field: "ShipName", dataType: "string" },
-            { field: "ShipCity", dataType: "string" },
-            { field: "ShipPostalCode", dataType: "string" },
-            { field: "ShipCountry", dataType: "string" },
-            { field: "Region", dataType: "string" }
-        ];
-
-        this.entities = [
-            {
-                name: "Companies",
-                fields: this.companiesFields
-            },
-            {
-                name: "Orders",
-                fields: this.ordersFields
-            }
-        ];
-
-        const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Companies', ['ID']);
-        innerTree.filteringOperands.push({
-            fieldName: 'Employees',
-            condition: IgxNumberFilteringOperand.instance().condition('greaterThan'),
-            conditionName: 'greaterThan',
-            searchVal: 100
-        });
-        innerTree.filteringOperands.push({
-            fieldName: 'Contract',
-            condition: IgxBooleanFilteringOperand.instance().condition('true'),
-            conditionName: 'true'
-        });
-
-        const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['*']);
+        const tree = new FilteringExpressionsTree(FilteringLogic.And);
         tree.filteringOperands.push({
-            fieldName: 'CompanyID',
-            condition: IgxStringFilteringOperand.instance().condition('in'),
-            conditionName: 'in',
-            searchTree: innerTree
+            fieldName: 'ID',
+            condition: IgxStringFilteringOperand.instance().condition('contains'),
+            searchVal: 'a',
+            ignoreCase: true
         });
-        tree.filteringOperands.push({
-            fieldName: 'OrderDate',
-            condition: IgxDateFilteringOperand.instance().condition('before'),
-            conditionName: 'before',
-            searchVal: new Date('2024-01-01T00:00:00.000Z')
+        const orTree = new FilteringExpressionsTree(FilteringLogic.Or);
+        orTree.filteringOperands.push({
+            fieldName: 'ID',
+            condition: IgxStringFilteringOperand.instance().condition('contains'),
+            searchVal: 'b',
+            ignoreCase: true
+        });
+        orTree.filteringOperands.push({
+            fieldName: 'CompanyName',
+            condition: IgxStringFilteringOperand.instance().condition('contains'),
+            searchVal: 'c',
+            ignoreCase: true
         });
+        tree.filteringOperands.push(orTree);
         tree.filteringOperands.push({
-            fieldName: 'ShippedDate',
-            condition: IgxDateFilteringOperand.instance().condition('null'),
-            conditionName: 'null'
+            fieldName: 'CompanyName',
+            condition: IgxStringFilteringOperand.instance().condition('contains'),
+            searchVal: 'd',
+            ignoreCase: true
         });
 
         this.expressionTree = tree;