diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
new file mode 100644
index 0000000000..eb945aa6fb
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
@@ -0,0 +1,9 @@
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export type QueryBuilderProps = {
+	queryData: IBuilderQuery[];
+	queryFormula: IBuilderFormula[];
+};
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
new file mode 100644
index 0000000000..c732a27d76
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
@@ -0,0 +1,23 @@
+// ** Hooks
+import { useQueryBuilder } from 'hooks/useQueryBuilder';
+import React from 'react';
+
+// ** Types
+import { QueryBuilderProps } from './QueryBuilder.interfaces';
+
+// TODO: temporary eslint disable while variable isn't used
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function QueryBuilder(props: QueryBuilderProps): JSX.Element {
+	// TODO: temporary doesn't use
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { queryBuilderData } = useQueryBuilder();
+
+	// Here we can use Form from antd library and fill context data or edit
+	// Connect form with adding or removing items from the list
+
+	// Here will be map of query queryBuilderData.queryData and queryBuilderData.queryFormulas components
+	// Each component can be part of antd Form list where we can add or remove items
+	// Also need decide to make a copy of queryData for working with form or not and after it set the full new list with formulas or queries to the context
+	// With button to add him
+	return <div>null</div>;
+}
diff --git a/frontend/src/container/QueryBuilder/index.ts b/frontend/src/container/QueryBuilder/index.ts
new file mode 100644
index 0000000000..77060426f7
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/index.ts
@@ -0,0 +1 @@
+export { QueryBuilder } from './QueryBuilder';
diff --git a/frontend/src/providers/QueryBuilder.tsx b/frontend/src/providers/QueryBuilder.tsx
index e63b31108e..d50b5d7eba 100644
--- a/frontend/src/providers/QueryBuilder.tsx
+++ b/frontend/src/providers/QueryBuilder.tsx
@@ -5,72 +5,84 @@ import React, {
 	useMemo,
 	useState,
 } from 'react';
-import { useParams } from 'react-router-dom';
+// ** Types
+// TODO: Rename Types on the Reusable type for any source
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export type QueryBuilderData = {
+	queryData: IBuilderQuery[];
+	queryFormulas: IBuilderFormula[];
+};
 
 // ** TODO: temporary types for context, fix it during development
 export type QueryBuilderContextType = {
-	queryBuilderData: unknown[];
+	queryBuilderData: QueryBuilderData;
 	resetQueryBuilderData: () => void;
-	handleSetQueryBuilderData: () => void;
+	handleSetQueryData: (index: number, queryData: IBuilderQuery) => void;
+	handleSetFormulaData: (index: number, formulaData: IBuilderFormula) => void;
 };
 
 export const QueryBuilderContext = createContext<QueryBuilderContextType>({
-	queryBuilderData: [
-		{
-			queryData: '',
-			queryFormulas: '',
-		},
-	],
+	queryBuilderData: { queryData: [], queryFormulas: [] },
 	resetQueryBuilderData: () => {},
-	handleSetQueryBuilderData: () => {},
+	handleSetQueryData: () => {},
+	handleSetFormulaData: () => {},
 });
 
-const initialQueryBuilderData: unknown[] = [
-	{
-		queryData: '',
-		queryFormulas: '',
-	},
-];
+const initialQueryBuilderData: QueryBuilderData = {
+	queryData: [],
+	queryFormulas: [],
+};
 
 export function QueryBuilderProvider({
 	children,
 }: PropsWithChildren): JSX.Element {
 	// ** TODO: get queryId from url for getting data for query builder
 	// ** TODO: type the params which will be used for request of the data for query builder
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const params = useParams();
 
-	// ** TODO: create state for queryBuilder
-	// ** TODO: create state for queryFormulas
+	const [queryBuilderData, setQueryBuilderData] = useState<QueryBuilderData>({
+		queryData: [],
+		queryFormulas: [],
+	});
 
-	// ** TODO: Find out the types of the queryBuilder state
-	// ** TODO: Check exist version of the functionality
-	const [queryBuilderData, setQueryBuilderData] = useState<unknown[]>([
-		{
-			queryData: '',
-			queryFormulas: '',
-		},
-	]);
+	// ** TODO: Also in the future need to add AddFormula and AddQuery and remove them.
 
 	const resetQueryBuilderData = useCallback((): void => {
 		setQueryBuilderData(initialQueryBuilderData);
 	}, []);
 
-	const handleSetQueryBuilderData = useCallback((): void => {}, []);
+	const handleSetQueryData = useCallback(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		(index: number, queryData: IBuilderQuery): void => {},
+		[],
+	);
+	const handleSetFormulaData = useCallback(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		(index: number, formulaData: IBuilderFormula): void => {},
+		[],
+	);
+
 	// ** TODO: Discuss with Palash how the state of the queryBuilder and queryFormulas
 	// ** TODO: should be filled from url
 
-	// ** TODO: create set function for state
-
 	// ** TODO: put these values and setter to the context value
 
 	const contextValues: QueryBuilderContextType = useMemo(
 		() => ({
 			queryBuilderData,
 			resetQueryBuilderData,
-			handleSetQueryBuilderData,
+			handleSetQueryData,
+			handleSetFormulaData,
 		}),
-		[queryBuilderData, resetQueryBuilderData, handleSetQueryBuilderData],
+		[
+			queryBuilderData,
+			resetQueryBuilderData,
+			handleSetQueryData,
+			handleSetFormulaData,
+		],
 	);
 
 	return (
diff --git a/frontend/src/types/api/queryBuilder/queryBuilderData.ts b/frontend/src/types/api/queryBuilder/queryBuilderData.ts
new file mode 100644
index 0000000000..dbfa82ce53
--- /dev/null
+++ b/frontend/src/types/api/queryBuilder/queryBuilderData.ts
@@ -0,0 +1,22 @@
+import { EAggregateOperator, EReduceOperator } from 'types/common/dashboard';
+
+import { IQueryBuilderTagFilters } from '../dashboard/getAll';
+
+export interface IBuilderQuery {
+	// TODO: add another list of operator depended from data source
+	aggregateOperator: EAggregateOperator;
+	disabled: boolean;
+	label: string;
+	legend: string;
+	attribute: string;
+	groupBy: string[];
+	tagFilters: IQueryBuilderTagFilters;
+	reduceTo?: EReduceOperator;
+}
+
+export interface IBuilderFormula {
+	expression: string;
+	disabled: boolean;
+	label: string;
+	legend: string;
+}