diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 0031ac2632..f5f5e5610a 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -36,6 +36,7 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
       - name: Install dependencies
         run: cd frontend && yarn install
       - name: Run ESLint
diff --git a/.github/workflows/push.yaml b/.github/workflows/push.yaml
index a284ca5b47..98ee1e0fc4 100644
--- a/.github/workflows/push.yaml
+++ b/.github/workflows/push.yaml
@@ -133,6 +133,7 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
+          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
       - name: Install dependencies
         working-directory: frontend
         run: yarn install
diff --git a/Makefile b/Makefile
index 05b6cb27e6..7d976341c1 100644
--- a/Makefile
+++ b/Makefile
@@ -151,4 +151,5 @@ test:
 	go test ./pkg/query-service/app/querier/...
 	go test ./pkg/query-service/converter/...
 	go test ./pkg/query-service/formatter/...
-	go test ./pkg/query-service/tests/integration/...
\ No newline at end of file
+	go test ./pkg/query-service/tests/integration/...
+	go test ./pkg/query-service/rules/...
diff --git a/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml b/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
index 341d8ca57d..a9e778642e 100644
--- a/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
+++ b/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
@@ -144,7 +144,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.29.3
+    image: signoz/query-service:0.30.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -184,7 +184,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:0.29.3
+    image: signoz/frontend:0.30.0
     deploy:
       restart_policy:
         condition: on-failure
diff --git a/deploy/docker/clickhouse-setup/docker-compose.yaml b/deploy/docker/clickhouse-setup/docker-compose.yaml
index b7f28c7799..7c770c5acf 100644
--- a/deploy/docker/clickhouse-setup/docker-compose.yaml
+++ b/deploy/docker/clickhouse-setup/docker-compose.yaml
@@ -162,7 +162,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.29.3}
+    image: signoz/query-service:${DOCKER_TAG:-0.30.0}
     container_name: signoz-query-service
     command:
       [
@@ -201,7 +201,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.29.3}
+    image: signoz/frontend:${DOCKER_TAG:-0.30.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 0000000000..69797b1008
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,6 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore all MD files:
+**/*.md
\ No newline at end of file
diff --git a/frontend/jest.config.ts b/frontend/jest.config.ts
index 00bd8505c8..b7cac3cc02 100644
--- a/frontend/jest.config.ts
+++ b/frontend/jest.config.ts
@@ -7,7 +7,7 @@ const config: Config.InitialOptions = {
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
-		'\\.(css|less)$': '<rootDir>/__mocks__/cssMock.ts',
+		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
 	},
 	globals: {
 		extensionsToTreatAsEsm: ['.ts'],
diff --git a/frontend/package.json b/frontend/package.json
index 8e013ce78a..da217e7888 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -84,9 +84,11 @@
 		"react-helmet-async": "1.3.0",
 		"react-i18next": "^11.16.1",
 		"react-intersection-observer": "9.4.1",
+		"react-markdown": "8.0.7",
 		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
+		"react-syntax-highlighter": "15.5.0",
 		"react-use": "^17.3.2",
 		"react-virtuoso": "4.0.3",
 		"redux": "^4.0.5",
@@ -150,6 +152,7 @@
 		"@types/react-redux": "^7.1.11",
 		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
+		"@types/react-syntax-highlighter": "15.5.7",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
 		"@types/webpack": "^5.28.0",
@@ -183,6 +186,7 @@
 		"lint-staged": "^12.5.0",
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
+		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",
 		"react-hot-loader": "^4.13.0",
 		"react-resizable": "3.0.4",
diff --git a/frontend/public/locales/en/pipeline.json b/frontend/public/locales/en/pipeline.json
index 515ce19003..77989fdfc5 100644
--- a/frontend/public/locales/en/pipeline.json
+++ b/frontend/public/locales/en/pipeline.json
@@ -25,6 +25,7 @@
 	"delete_processor_description": "Logs are processed sequentially in processors. Deleting a processor may change content of data processed by other processors",
 	"search_pipeline_placeholder": "Filter Pipelines",
 	"pipeline_name_placeholder": "Name",
+	"pipeline_filter_placeholder": "Filter for selecting logs to be processed by this pipeline. Example: service_name = billing",
 	"pipeline_tags_placeholder": "Tags",
 	"pipeline_description_placeholder": "Enter description for your pipeline",
 	"processor_name_placeholder": "Name",
diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx
index 4c46928163..56ba19fdf4 100644
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -1,7 +1,10 @@
 import { ConfigProvider } from 'antd';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import { useThemeConfig } from 'hooks/useDarkMode';
@@ -75,14 +78,26 @@ function App(): JSX.Element {
 	});
 
 	useEffect(() => {
-		if (isLoggedInState && user && user.userId && user.email) {
+		const isIdentifiedUser = getLocalStorageApi(LOCALSTORAGE.IS_IDENTIFIED_USER);
+
+		if (
+			isLoggedInState &&
+			user &&
+			user.userId &&
+			user.email &&
+			!isIdentifiedUser
+		) {
+			setLocalStorageApi(LOCALSTORAGE.IS_IDENTIFIED_USER, 'true');
+
 			window.analytics.identify(user?.email, {
 				email: user?.email,
 				name: user?.name,
 			});
+
+			window.clarity('identify', user.email, user.name);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isLoggedInState]);
+	}, [isLoggedInState, user]);
 
 	useEffect(() => {
 		trackPageView(pathname);
diff --git a/frontend/src/api/utils.ts b/frontend/src/api/utils.ts
index 2d31836733..140e793e35 100644
--- a/frontend/src/api/utils.ts
+++ b/frontend/src/api/utils.ts
@@ -14,7 +14,11 @@ import {
 export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN);
 	deleteLocalStorageKey(LOCALSTORAGE.IS_LOGGED_IN);
+	deleteLocalStorageKey(LOCALSTORAGE.IS_IDENTIFIED_USER);
 	deleteLocalStorageKey(LOCALSTORAGE.REFRESH_AUTH_TOKEN);
+	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_EMAIL);
+	deleteLocalStorageKey(LOCALSTORAGE.LOGGED_IN_USER_NAME);
+	deleteLocalStorageKey(LOCALSTORAGE.CHAT_SUPPORT);
 
 	store.dispatch({
 		type: LOGGED_IN,
diff --git a/frontend/src/components/ExplorerCard/ExplorerCard.tsx b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
index 0944023b6c..b49cfaa2d6 100644
--- a/frontend/src/components/ExplorerCard/ExplorerCard.tsx
+++ b/frontend/src/components/ExplorerCard/ExplorerCard.tsx
@@ -30,6 +30,7 @@ import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { ExploreHeaderToolTip, SaveButtonText } from './constants';
 import MenuItemGenerator from './MenuItemGenerator';
@@ -170,6 +171,7 @@ function ExplorerCard({
 							{viewsData?.data.data && viewsData?.data.data.length && (
 								<Space>
 									<Select
+										getPopupContainer={popupContainer}
 										loading={isLoading || isRefetching}
 										showSearch
 										placeholder="Select a view"
@@ -204,6 +206,7 @@ function ExplorerCard({
 								</Button>
 							)}
 							<Popover
+								getPopupContainer={popupContainer}
 								placement="bottomLeft"
 								trigger="click"
 								content={
diff --git a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
index 77a143adf9..c908e703dd 100644
--- a/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
+++ b/frontend/src/components/ExplorerCard/MenuItemGenerator.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Typography } from 'antd';
+import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -8,7 +8,11 @@ import { MouseEvent, useCallback } from 'react';
 
 import { MenuItemContainer } from './styles';
 import { MenuItemLabelGeneratorProps } from './types';
-import { deleteViewHandler, getViewDetailsUsingViewKey } from './utils';
+import {
+	deleteViewHandler,
+	getViewDetailsUsingViewKey,
+	trimViewName,
+} from './utils';
 
 function MenuItemGenerator({
 	viewName,
@@ -71,12 +75,16 @@ function MenuItemGenerator({
 		});
 	};
 
+	const newViewName = trimViewName(viewName);
+
 	return (
 		<MenuItemContainer onClick={onLabelClickHandler}>
 			<Row justify="space-between">
 				<Col span={22}>
 					<Row>
-						<Typography.Text strong>{viewName}</Typography.Text>
+						<Tooltip title={viewName}>
+							<Typography.Text strong>{newViewName}</Typography.Text>
+						</Tooltip>
 					</Row>
 					<Row>
 						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
diff --git a/frontend/src/components/ExplorerCard/utils.ts b/frontend/src/components/ExplorerCard/utils.ts
index 2fd33b3c7d..8ecef3e44a 100644
--- a/frontend/src/components/ExplorerCard/utils.ts
+++ b/frontend/src/components/ExplorerCard/utils.ts
@@ -174,3 +174,10 @@ export const deleteViewHandler = ({
 		},
 	});
 };
+
+export const trimViewName = (viewName: string): string => {
+	if (viewName.length > 20) {
+		return `${viewName.substring(0, 20)}...`;
+	}
+	return viewName;
+};
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index 7c630a2939..f5ea5b674e 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -60,12 +60,14 @@ function RawLogView({
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
+	const severityText = data.severity_text ? `${data.severity_text} |` : '';
+
 	const text = useMemo(
 		() =>
 			typeof data.timestamp === 'string'
-				? `${dayjs(data.timestamp).format()} | ${data.body}`
-				: `${dayjs(data.timestamp / 1e6).format()} | ${data.body}`,
-		[data.timestamp, data.body],
+				? `${dayjs(data.timestamp).format()} | ${severityText} ${data.body}`
+				: `${dayjs(data.timestamp / 1e6).format()} | ${severityText} ${data.body}`,
+		[data.timestamp, data.body, severityText],
 	);
 
 	const handleClickExpand = useCallback(() => {
@@ -114,11 +116,6 @@ function RawLogView({
 		[text],
 	);
 
-	const mouseActions = useMemo(
-		() => ({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }),
-		[handleMouseEnter, handleMouseLeave],
-	);
-
 	return (
 		<RawLogViewContainer
 			onClick={handleClickExpand}
@@ -127,8 +124,8 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isActiveLog={isHighlighted}
-			// eslint-disable-next-line react/jsx-props-no-spreading
-			{...mouseActions}
+			onMouseEnter={handleMouseEnter}
+			onMouseLeave={handleMouseLeave}
 		>
 			{!isReadOnly && (
 				<ExpandIconWrapper flex="30px">
diff --git a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
new file mode 100644
index 0000000000..78bfa54dad
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss
@@ -0,0 +1,34 @@
+.code-snippet-container {
+	position: relative;
+	background-color: rgb(43, 43, 43);
+}
+
+.code-copy-btn {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+
+	button {
+		cursor: pointer;
+
+		background-color: rgba($color: #1d1d1d, $alpha: 0.7);
+		color: white;
+		border: none;
+		padding: 8px;
+		border-radius: 3px;
+		transition: all 0.1s;
+
+		&:hover {
+			background-color: rgba($color: #1d1d1d, $alpha: 1);
+		}
+	}
+
+	&.copied {
+		button {
+			background-color: rgba($color: #52c41a, $alpha: 1);
+		}
+	}
+}
diff --git a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
new file mode 100644
index 0000000000..e23882cc71
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx
@@ -0,0 +1,32 @@
+import './CodeCopyBtn.scss';
+
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import cx from 'classnames';
+import { useState } from 'react';
+
+export default function CodeCopyBtn({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element {
+	const [isSnippetCopied, setIsSnippetCopied] = useState(false);
+
+	const handleClick = (): void => {
+		if (children && Array.isArray(children)) {
+			setIsSnippetCopied(true);
+			navigator.clipboard.writeText(children[0].props.children[0]).finally(() => {
+				setTimeout(() => {
+					setIsSnippetCopied(false);
+				}, 1000);
+			});
+		}
+	};
+
+	return (
+		<div className={cx('code-copy-btn', isSnippetCopied ? 'copied' : '')}>
+			<button type="button" onClick={handleClick}>
+				{!isSnippetCopied ? <CopyOutlined /> : <CheckOutlined />}
+			</button>
+		</div>
+	);
+}
diff --git a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
new file mode 100644
index 0000000000..82b438dcd0
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { CodeProps } from 'react-markdown/lib/ast-to-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
+
+function Pre({ children }: { children: React.ReactNode }): JSX.Element {
+	return (
+		<pre className="code-snippet-container">
+			<CodeCopyBtn>{children}</CodeCopyBtn>
+			{children}
+		</pre>
+	);
+}
+
+function Code({
+	node,
+	inline,
+	className = 'blog-code',
+	children,
+	...props
+}: CodeProps): JSX.Element {
+	const match = /language-(\w+)/.exec(className || '');
+	return !inline && match ? (
+		<SyntaxHighlighter
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-ignore
+			style={a11yDark}
+			language={match[1]}
+			PreTag="div"
+			{...props}
+		>
+			{String(children).replace(/\n$/, '')}
+		</SyntaxHighlighter>
+	) : (
+		<code className={className} {...props}>
+			{children}
+		</code>
+	);
+}
+
+export { Code, Pre };
diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx
index 70e5c04685..72f631a872 100644
--- a/frontend/src/components/TextToolTip/index.tsx
+++ b/frontend/src/components/TextToolTip/index.tsx
@@ -7,6 +7,7 @@ import { Tooltip } from 'antd';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { style } from './styles';
 
@@ -61,7 +62,7 @@ function TextToolTip({
 	);
 
 	return (
-		<Tooltip overlay={overlay}>
+		<Tooltip getTooltipContainer={popupContainer} overlay={overlay}>
 			{useFilledIcon ? (
 				<QuestionCircleFilled style={iconStyle} />
 			) : (
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index b17ae3d34c..2788e93943 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -14,4 +14,5 @@ export enum LOCALSTORAGE {
 	LOGGED_IN_USER_NAME = 'LOGGED_IN_USER_NAME',
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
+	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 }
diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts
index c04005afa6..c53873bc5c 100644
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -74,7 +74,7 @@ export const mapOfOperators = {
 	traces: tracesAggregateOperatorOptions,
 };
 
-export const mapOfFilters: Record<DataSource, QueryAdditionalFilter[]> = {
+export const mapOfQueryFilters: Record<DataSource, QueryAdditionalFilter[]> = {
 	metrics: [
 		// eslint-disable-next-line sonarjs/no-duplicate-string
 		{ text: 'Aggregation interval', field: 'stepInterval' },
@@ -94,6 +94,24 @@ export const mapOfFilters: Record<DataSource, QueryAdditionalFilter[]> = {
 	],
 };
 
+const commonFormulaFilters: QueryAdditionalFilter[] = [
+	{
+		text: 'Having',
+		field: 'having',
+	},
+	{ text: 'Order by', field: 'orderBy' },
+	{ text: 'Limit', field: 'limit' },
+];
+
+export const mapOfFormulaToFilters: Record<
+	DataSource,
+	QueryAdditionalFilter[]
+> = {
+	metrics: commonFormulaFilters,
+	logs: commonFormulaFilters,
+	traces: commonFormulaFilters,
+};
+
 export const REDUCE_TO_VALUES: SelectOption<ReduceOperators, string>[] = [
 	{ value: 'last', label: 'Latest of values in timeframe' },
 	{ value: 'sum', label: 'Sum of values in timeframe' },
diff --git a/frontend/src/container/Controls/index.tsx b/frontend/src/container/Controls/index.tsx
index 8971214a05..5618a7344a 100644
--- a/frontend/src/container/Controls/index.tsx
+++ b/frontend/src/container/Controls/index.tsx
@@ -2,6 +2,7 @@ import { LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { memo, useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
@@ -51,6 +52,7 @@ function Controls({
 				loading={isLoading}
 				value={countPerPage}
 				onChange={handleCountItemsPerPageChange}
+				getPopupContainer={popupContainer}
 			>
 				{perPageOptions.map((count) => (
 					<Select.Option
diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx
index ff27641c64..33a86f9f50 100644
--- a/frontend/src/container/ErrorDetails/index.tsx
+++ b/frontend/src/container/ErrorDetails/index.tsx
@@ -1,3 +1,5 @@
+import './styles.scss';
+
 import { Button, Divider, Space, Typography } from 'antd';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';
@@ -161,7 +163,9 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 			</DashedContainer>
 
 			<Typography.Title level={4}>{t('stack_trace')}</Typography.Title>
-			<Editor onChange={(): void => {}} value={stackTraceValue} readOnly />
+			<div className="error-container">
+				<Editor value={stackTraceValue} readOnly />
+			</div>
 
 			<EditorContainer>
 				<Space direction="vertical">
diff --git a/frontend/src/container/ErrorDetails/styles.scss b/frontend/src/container/ErrorDetails/styles.scss
new file mode 100644
index 0000000000..31194b488f
--- /dev/null
+++ b/frontend/src/container/ErrorDetails/styles.scss
@@ -0,0 +1,3 @@
+.error-container {
+	height: 50vh;
+}
diff --git a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
index b5c4b3ffbf..20ad222e55 100644
--- a/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
+++ b/frontend/src/container/GridGraphLayout/WidgetHeader/index.tsx
@@ -20,6 +20,7 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import AppReducer from 'types/reducer/app';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import {
 	errorTooltipPosition,
@@ -177,6 +178,7 @@ function WidgetHeader({
 	return (
 		<WidgetHeaderContainer>
 			<Dropdown
+				getPopupContainer={popupContainer}
 				destroyPopupOnHide
 				open={isOpen}
 				onOpenChange={setIsOpen}
diff --git a/frontend/src/container/ListOfDashboard/index.tsx b/frontend/src/container/ListOfDashboard/index.tsx
index 669ee75942..6041b8baf4 100644
--- a/frontend/src/container/ListOfDashboard/index.tsx
+++ b/frontend/src/container/ListOfDashboard/index.tsx
@@ -34,6 +34,7 @@ import AppActions from 'types/actions';
 import { GET_ALL_DASHBOARD_SUCCESS } from 'types/actions/dashboard';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ImportJSON from './ImportJSON';
 import { ButtonContainer, NewDashboardButton, TableContainer } from './styles';
@@ -280,6 +281,7 @@ function ListOfAllDashboard(): JSX.Element {
 					/>
 					{newDashboard && (
 						<Dropdown
+							getPopupContainer={popupContainer}
 							disabled={isDashboardListLoading}
 							trigger={['click']}
 							menu={menu}
diff --git a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx b/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
index 12b4266490..f517241cdd 100644
--- a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
+++ b/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
@@ -11,6 +11,7 @@ import PopoverContent from 'pages/Logs/PopoverContent';
 import { useEventSource } from 'providers/EventSource';
 import { useCallback } from 'react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { SpinnerWrapper, Wrapper } from './styles';
 
@@ -43,6 +44,7 @@ function ListViewPanel(): JSX.Element {
 	return (
 		<Wrapper>
 			<Select
+				getPopupContainer={popupContainer}
 				style={defaultSelectStyle}
 				value={config.format?.value}
 				onChange={config.format?.onChange}
@@ -53,7 +55,11 @@ function ListViewPanel(): JSX.Element {
 			</Select>
 
 			{isFormatButtonVisible && (
-				<Popover placement="right" content={renderPopoverContent}>
+				<Popover
+					getPopupContainer={popupContainer}
+					placement="right"
+					content={renderPopoverContent}
+				>
 					<Button>Format</Button>
 				</Popover>
 			)}
diff --git a/frontend/src/container/LiveLogs/constants.ts b/frontend/src/container/LiveLogs/constants.ts
index f2c5ca1c97..83df3759ee 100644
--- a/frontend/src/container/LiveLogs/constants.ts
+++ b/frontend/src/container/LiveLogs/constants.ts
@@ -2,7 +2,7 @@ import {
 	initialQueriesMap,
 	initialQueryBuilderFormValuesMap,
 } from 'constants/queryBuilder';
-import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -14,7 +14,7 @@ export const defaultLiveQueryDataConfig: Partial<IBuilderQuery> = {
 	aggregateOperator: LogsAggregatorOperator.NOOP,
 	disabled: true,
 	pageSize: 10,
-	orderBy: [{ columnName: 'timestamp', order: FILTERS.DESC }],
+	orderBy: [{ columnName: 'timestamp', order: ORDERBY_FILTERS.DESC }],
 };
 
 type GetDefaultCompositeQueryParams = {
diff --git a/frontend/src/container/LogDetailedView/utils.tsx b/frontend/src/container/LogDetailedView/utils.tsx
index c07c4c7622..02890e7dc9 100644
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -198,6 +198,7 @@ export const aggregateAttributesResourcesToString = (logData: ILog): string => {
 		traceId: logData.traceId,
 		attributes: {},
 		resources: {},
+		severity_text: logData.severity_text,
 	};
 
 	Object.keys(logData).forEach((key) => {
diff --git a/frontend/src/container/LogLiveTail/index.tsx b/frontend/src/container/LogLiveTail/index.tsx
index 08faeda94c..070423229f 100644
--- a/frontend/src/container/LogLiveTail/index.tsx
+++ b/frontend/src/container/LogLiveTail/index.tsx
@@ -30,6 +30,7 @@ import { TLogsLiveTailState } from 'types/api/logs/liveTail';
 import { ILog } from 'types/api/logs/log';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { TIME_PICKER_OPTIONS } from './config';
 import { StopContainer, TimePickerCard, TimePickerSelect } from './styles';
@@ -165,6 +166,7 @@ function LogLiveTail({ getLogsAggregate }: Props): JSX.Element {
 	const OptionsPopOverContent = useMemo(
 		() => (
 			<TimePickerSelect
+				getPopupContainer={popupContainer}
 				disabled={liveTail === 'PLAYING'}
 				value={liveTailStartRange}
 				onChange={(value): void => {
@@ -236,6 +238,7 @@ function LogLiveTail({ getLogsAggregate }: Props): JSX.Element {
 				)}
 
 				<Popover
+					getPopupContainer={popupContainer}
 					placement="bottomRight"
 					title="Select Live Tail Timing"
 					trigger="click"
diff --git a/frontend/src/container/Login/index.tsx b/frontend/src/container/Login/index.tsx
index 356d971aa9..df9a1c6a37 100644
--- a/frontend/src/container/Login/index.tsx
+++ b/frontend/src/container/Login/index.tsx
@@ -1,13 +1,9 @@
 import { Button, Form, Input, Space, Tooltip, Typography } from 'antd';
-import setLocalStorageApi from 'api/browser/localstorage/set';
 import getUserVersion from 'api/user/getVersion';
 import loginApi from 'api/user/login';
 import loginPrecheckApi from 'api/user/loginPrecheck';
 import afterLogin from 'AppRoutes/utils';
-import { FeatureKeys } from 'constants/features';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import useFeatureFlag from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useEffect, useState } from 'react';
@@ -42,9 +38,6 @@ function Login({
 	const { t } = useTranslation(['login']);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
-	const isChatSupportEnabled: boolean | undefined = useFeatureFlag(
-		FeatureKeys.CHAT_SUPPORT,
-	)?.active;
 
 	const [precheckResult, setPrecheckResult] = useState<PrecheckResultType>({
 		sso: false,
@@ -165,21 +158,12 @@ function Login({
 				password,
 			});
 			if (response.statusCode === 200) {
-				const user = await afterLogin(
+				await afterLogin(
 					response.payload.userId,
 					response.payload.accessJwt,
 					response.payload.refreshJwt,
 				);
 
-				if (user) {
-					setLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_NAME, user.payload?.name);
-					setLocalStorageApi(LOCALSTORAGE.LOGGED_IN_USER_EMAIL, user.payload?.email);
-					setLocalStorageApi(
-						LOCALSTORAGE.CHAT_SUPPORT,
-						(isChatSupportEnabled || '').toString(),
-					);
-				}
-
 				history.push(ROUTES.APPLICATION);
 			} else {
 				notifications.error({
diff --git a/frontend/src/container/LogsContextList/ShowButton.tsx b/frontend/src/container/LogsContextList/ShowButton.tsx
index 26fbadaf30..7240800af7 100644
--- a/frontend/src/container/LogsContextList/ShowButton.tsx
+++ b/frontend/src/container/LogsContextList/ShowButton.tsx
@@ -1,5 +1,5 @@
 import { Button, Typography } from 'antd';
-import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 
 import { ShowButtonWrapper } from './styles';
 
@@ -19,7 +19,7 @@ function ShowButton({
 	return (
 		<ShowButtonWrapper>
 			<Typography>
-				Showing 10 lines {order === FILTERS.ASC ? 'after' : 'before'} match
+				Showing 10 lines {order === ORDERBY_FILTERS.ASC ? 'after' : 'before'} match
 			</Typography>
 			<Button
 				size="small"
diff --git a/frontend/src/container/LogsContextList/index.tsx b/frontend/src/container/LogsContextList/index.tsx
index 25e0414498..d473ddb20a 100644
--- a/frontend/src/container/LogsContextList/index.tsx
+++ b/frontend/src/container/LogsContextList/index.tsx
@@ -1,7 +1,7 @@
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
@@ -87,7 +87,7 @@ function LogsContextList({
 					timestamp: item.timestamp,
 				}));
 
-				if (order === FILTERS.ASC) {
+				if (order === ORDERBY_FILTERS.ASC) {
 					const reversedCurrentLogs = currentLogs.reverse();
 					setLogs((prevLogs) => [...reversedCurrentLogs, ...prevLogs]);
 				} else {
@@ -111,7 +111,7 @@ function LogsContextList({
 	const handleShowNextLines = useCallback(() => {
 		if (isDisabledFetch) return;
 
-		const log = order === FILTERS.ASC ? firstLog : lastLog;
+		const log = order === ORDERBY_FILTERS.ASC ? firstLog : lastLog;
 
 		const newRequestData = getRequestData({
 			stagedQueryData: currentStagedQueryData,
@@ -167,7 +167,7 @@ function LogsContextList({
 
 	return (
 		<>
-			{order === FILTERS.ASC && (
+			{order === ORDERBY_FILTERS.ASC && (
 				<ShowButton
 					isLoading={isFetching}
 					isDisabled={isDisabledFetch}
@@ -186,11 +186,11 @@ function LogsContextList({
 					initialTopMostItemIndex={0}
 					data={logs}
 					itemContent={getItemContent}
-					followOutput={order === FILTERS.DESC}
+					followOutput={order === ORDERBY_FILTERS.DESC}
 				/>
 			</ListContainer>
 
-			{order === FILTERS.DESC && (
+			{order === ORDERBY_FILTERS.DESC && (
 				<ShowButton
 					isLoading={isFetching}
 					isDisabled={isDisabledFetch}
diff --git a/frontend/src/container/LogsExplorerContext/index.tsx b/frontend/src/container/LogsExplorerContext/index.tsx
index 70987e4e4b..31c7202a8d 100644
--- a/frontend/src/container/LogsExplorerContext/index.tsx
+++ b/frontend/src/container/LogsExplorerContext/index.tsx
@@ -3,7 +3,7 @@ import { Typography } from 'antd';
 import Modal from 'antd/es/modal/Modal';
 import RawLogView from 'components/Logs/RawLogView';
 import LogsContextList from 'container/LogsContextList';
-import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { memo, useCallback, useState } from 'react';
@@ -87,7 +87,7 @@ function LogsExplorerContext({
 				/>
 			)}
 			<LogsContextList
-				order={FILTERS.ASC}
+				order={ORDERBY_FILTERS.ASC}
 				filters={filters}
 				isEdit={isEdit}
 				log={log}
@@ -103,7 +103,7 @@ function LogsExplorerContext({
 				/>
 			</LogContainer>
 			<LogsContextList
-				order={FILTERS.DESC}
+				order={ORDERBY_FILTERS.DESC}
 				filters={filters}
 				isEdit={isEdit}
 				log={log}
diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx
index 4b857aa83b..733bf0f306 100644
--- a/frontend/src/container/LogsSearchFilter/index.tsx
+++ b/frontend/src/container/LogsSearchFilter/index.tsx
@@ -20,6 +20,7 @@ import {
 } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import SearchFields from './SearchFields';
 import { Container, DropDownContainer } from './styles';
@@ -174,6 +175,7 @@ function SearchFilter({
 	return (
 		<Container>
 			<Popover
+				getPopupContainer={popupContainer}
 				placement="bottom"
 				content={
 					<DropDownContainer>
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
index f2310ec292..8319979f9a 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
@@ -1,8 +1,9 @@
 import './GoLang.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import GoLangDocs from './goLang.md';
@@ -44,9 +45,14 @@ export default function GoLang({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>
-							<GoLangDocs />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{GoLangDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
index 0fec5fb94c..0de0196303 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
@@ -4,14 +4,14 @@
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     
@@ -24,7 +24,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -36,7 +36,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
    
@@ -98,7 +98,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -111,7 +111,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -129,7 +129,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
     }
     ```
 
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
    
    The run command must have some environment variables to send data to SigNoz cloud. The run command:
     
@@ -143,14 +143,14 @@ From VMs, there are two ways to send data to SigNoz Cloud.
 
     `OTEL_EXPORTER_OTLP_HEADERS`: `signoz-access-token=<SIGNOZ-INGESTION-TOKEN>`. Update `<SIGNOZ-INGESTION-TOKEN>` with the ingestion token provided by SigNoz
     
-    `OTEL_EXPORTER_OTLP_ENDPOINT`: ingest.{region}.signoz.cloud:443. Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
+    `OTEL_EXPORTER_OTLP_ENDPOINT`: ingest.{region}.signoz.cloud:443. Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
     
-    US - ingest.us.signoz.cloud:443 <br></br>
+    US - ingest.us.signoz.cloud:443 
 
-    IN - ingest.in.signoz.cloud:443 <br></br>
+    IN - ingest.in.signoz.cloud:443 
 
-    EU - ingest.eu.signoz.cloud:443 <br></br>
+    EU - ingest.eu.signoz.cloud:443 
 
 
 ---
@@ -161,9 +161,9 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Golang application.
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     
@@ -176,7 +176,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -188,7 +188,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
     
@@ -249,7 +249,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
         return exporter.Shutdown
     }
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -262,7 +262,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -280,7 +280,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     }
     ```
     
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
    
    The run command must have some environment variables to send data to SigNoz. The run command:
     
@@ -288,20 +288,20 @@ You can find instructions to install OTel Collector binary [here](https://signoz
     SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
-    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.<br></br>
+    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
     `SERVICE_NAME`: goGinApp (you can name it whatever you want)
 
 ---
 
 ### Applications Deployed on Kubernetes
 
-For Golang application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Golang application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Golang instrumentation by following the below steps:
 
-1. **Install Dependencies**<br></br>
+1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     
@@ -314,7 +314,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
       go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
     ```
     
-2. **Declare environment variables for configuring OpenTelemetry**<br></br>
+2. **Declare environment variables for configuring OpenTelemetry**
    
    Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
    
@@ -326,7 +326,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     )
     ```
     
-3. **Instrument your Go application with OpenTelemetry**<br></br>
+3. **Instrument your Go application with OpenTelemetry**
    
    To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
     
@@ -387,7 +387,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
         return exporter.Shutdown
     }
     
-4. **Initialize the tracer in main.go**<br></br>
+4. **Initialize the tracer in main.go**
    
    Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
     
@@ -400,7 +400,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     }
     ```
     
-5. **Add the OpenTelemetry Gin middleware**<br></br>
+5. **Add the OpenTelemetry Gin middleware**
    
    Configure Gin to use the middleware by adding the following lines in `main.go`.
     
@@ -418,7 +418,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     }
     ```
     
-6. **Set environment variables and run your Go Gin application**<br></br>
+6. **Set environment variables and run your Go Gin application**
 
    The run command must have some environment variables to send data to SigNoz. The run command:
     
@@ -426,5 +426,5 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
     SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
-    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.<br></br>
+    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
     `SERVICE_NAME`: goGinApp (you can name it whatever you want)
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
index 97fd2f907a..2ebcba93e0 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
@@ -1,10 +1,12 @@
 import './Java.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import JavaDocs from './md-docs/java.md';
@@ -25,7 +27,9 @@ export default function Java({
 	activeStep: number;
 }): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot');
-
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+		SprintBootDocs,
+	);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -36,16 +40,22 @@ export default function Java({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'tomcat':
-				return <TomcatDocs />;
+				setSelectedFrameWorkDocs(TomcatDocs);
+				break;
 			case 'spring_boot':
-				return <SprintBootDocs />;
+				setSelectedFrameWorkDocs(SprintBootDocs);
+				break;
 			case 'jboss':
-				return <JbossDocs />;
+				setSelectedFrameWorkDocs(JbossDocs);
+				break;
 			default:
-				return <JavaDocs />;
+				setSelectedFrameWorkDocs(JavaDocs);
+				break;
 		}
 	};
 
@@ -66,10 +76,11 @@ export default function Java({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="spring_boot"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'spring_boot',
@@ -108,7 +119,14 @@ export default function Java({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
index 80656d08a3..50ab9c28a8 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -29,21 +29,22 @@ Step 2. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <my-app>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <my-app>.jar
 ```
 
 - `<app_name>` is the name for your application
-- `SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 
 ---
@@ -54,43 +55,43 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Run your application<br></br>
+Step 2. Run your application
 
 ```bash
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
 ```
 
 - `<myapp>` is the name of your application jar file
-- In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
 ### Applications Deployed on Kubernetes
 
-For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+Step 1. Download otel java binary
 
-   ```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```bash
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+```
 
-2. Run your application<br></br>
+Step 2. Run your application
    
-   ```bash
-   java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
-   ```
+```bash
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
+```
 
-   - `<myapp>` is the name of your application jar file
-   - In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `<myapp>` is the name of your application jar file
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
   
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
index 435380df10..9794f293e1 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.
@@ -35,25 +35,25 @@ Step 3. Update `JAVA_OPTS` environment variable
 Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file.
 
 ```bash
-JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar
+JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar
 -Dotel.exporter.otlp.endpoint=https://ingest.{region}.signoz.cloud:443
--Dotel.exporter.otlp.headers="signoz-access-token=SIGNOZ_INGESTION_KEY"
+-Dotel.exporter.otlp.headers="signoz-access-token=<SIGNOZ_INGESTION_KEY>"
 -Dotel.resource.attributes="service.name=<app_name>""
 ```
-You need to replace the following things based on your environment:<br></br>
+You need to replace the following things based on your environment:
 
-- `path` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 - `<app_name>` is the name for your application
-- `SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
    
 Step 4. [Optional] Write the output/logs of standalone.sh script to a file nohup.out as a background thread
@@ -69,7 +69,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
@@ -90,17 +90,17 @@ JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
 ### Applications Deployed on Kubernetes
 
-For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-Step 1. Download otel java binary<br></br>
+Step 1. Download otel java binary
 
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
@@ -121,7 +121,7 @@ JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.<br></br>
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 
 Step 4. Make sure to dockerise your application along with OpenTelemetry instrumentation.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
index 152267ea59..a580a887bd 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.
@@ -27,21 +27,22 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_RESOURCE_ATTRIBUTES=service.name=<myapp> \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <my-app>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
 ```
-- `<app_name>` is the name for your application
-- `SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `<myapp>` is the name for your application
+- `<path>` - update it to the path of your downloaded Java JAR agent
+- `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 ---
 
@@ -51,41 +52,41 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Run your application<br></br>
+Step 2. Run your application
 
 ```bash
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
 ```
 
-- `<myapp>` is the name of your application jar file
-- In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `<myapp>` is the name of your application
+- `<path>` - update it to the path of your downloaded Java JAR agent
   
 ---
 
 ### Applications Deployed on Kubernetes
 
-For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+Step 1. Download otel java binary
 
-   ```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```bash
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+```
 
-2. Run your application<br></br>
+Step 2. Run your application
    
-   ```bash
-   java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
-   ```
+```bash
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
+```
 
-   - `<myapp>` is the name of your application jar file
-   - In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `<myapp>` is the name of your application
+- `<path>` - update it to the path of your downloaded Java JAR agent
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
\ No newline at end of file
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
index aaebcbdbbc..2daa863e8c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.
@@ -26,28 +26,27 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 
 Step 2. Enable the instrumentation agent and run your application
 
-If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
-
-This should set these environment variables and start sending telemetry data to SigNoz Cloud.
+If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder. Inside the `setenv.sh` file, add the following environment variables: 
 
 
 ```bash
-export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/path/to/opentelemetry-javaagent.jar"
-export OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY"
+export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
+export OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>"
 export OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443
 export OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name>
 ```
 
 - `<app_name>` is the name for your application
-- `SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `<path>` - update it to the path of your downloaded Java JAR agent.
+- `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
+Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 ---
 
@@ -57,12 +56,12 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
 
-Step 1. Download OTel java binary agent<br></br>
+Step 1. Download OTel java binary agent
 ```bash
 wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
 ```
 
-Step 2. Enable the instrumentation agent and run your application<br></br>
+Step 2. Enable the instrumentation agent and run your application
 
 If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
 
@@ -70,37 +69,37 @@ This should set these environment variables and start sending telemetry data to
 
 
 ```bash
-export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/path/to/opentelemetry-javaagent.jar"
+export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
 ```
 
-- path/to - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 ---
   
 ### Applications Deployed on Kubernetes
 
-For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Java application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary<br></br>
+Step 1. Download otel java binary
 
-   ```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```bash
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+```
 
-2. Enable the instrumentation agent and run your application<br></br>
+Step 2. Enable the instrumentation agent and run your application
+
+If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
 
-   If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
-   
-   This should set the environment variable and start sending telemetry data to SigNoz Cloud.
-   
-   ```bash
-   export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/path/to/opentelemetry-javaagent.jar"
-   ```
+This should set the environment variable and start sending telemetry data to SigNoz Cloud.
+
+```bash
+export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
+```
 
-   - path/to - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
 
-You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](#validating-instrumentation-by-checking-for-traces).
\ No newline at end of file
+You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](https://signoz.io/docs/instrumentation/tomcat/#validating-instrumentation-by-checking-for-traces).
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
index bff9406f13..d467dc161c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
@@ -1,10 +1,12 @@
 import './Javascript.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import ExpressDocs from './md-docs/express.md';
@@ -22,8 +24,10 @@ export default function Javascript({
 }: {
 	activeStep: number;
 }): JSX.Element {
-	const [selectedFrameWork, setSelectedFrameWork] = useState('nodejs');
-
+	const [selectedFrameWork, setSelectedFrameWork] = useState('express');
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+		ExpressDocs,
+	);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -34,14 +38,19 @@ export default function Javascript({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'nodejs':
-				return <JavascriptDocs />;
+				setSelectedFrameWorkDocs(JavascriptDocs);
+				break;
 			case 'nestjs':
-				return <NestJsDocs />;
+				setSelectedFrameWorkDocs(NestJsDocs);
+				break;
 			default:
-				return <ExpressDocs />;
+				setSelectedFrameWorkDocs(ExpressDocs);
+				break;
 		}
 	};
 
@@ -62,10 +71,11 @@ export default function Javascript({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="express"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'nodejs',
@@ -106,7 +116,14 @@ export default function Javascript({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
index 2a3d80e62f..39f68b61c8 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
@@ -1,213 +1,212 @@
-## Requirements
-
-Supported Versions
-
-^4.0.0
-
-## Send traces to SigNoz Cloud
-
-Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud.
-
-### Application on VMs
-
-From VMs, there are two ways to send data to SigNoz Cloud.
-
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
-
-#### **Send traces directly to SigNoz Cloud**
-
-Step 1. Install OpenTelemetry packages
-
-```bash
-npm install --save @opentelemetry/api@^1.4.1                                                                       
-npm install --save @opentelemetry/sdk-node@^0.39.1
-npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
-npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
-```
-
-Step 2. Create tracing.js file<br></br>
-
-You need to configure the endpoint for SigNoz cloud in this file. You can find your ingestion key from SigNoz cloud account details sent on your email.
-
-```js
-// tracing.js
-'use strict'
-const process = require('process');
-const opentelemetry = require('@opentelemetry/sdk-node');
-const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
-const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
-const { Resource } = require('@opentelemetry/resources');
-const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
-
-// do not set headers in exporterOptions, the OTel spec recommends setting headers through ENV variables
-// https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
-
-// highlight-start
-const exporterOptions = {
-  url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
-}
-// highlight-end
-
-const traceExporter = new OTLPTraceExporter(exporterOptions);
-const sdk = new opentelemetry.NodeSDK({
-  traceExporter,
-  instrumentations: [getNodeAutoInstrumentations()],
-  resource: new Resource({
-    // highlight-next-line
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
-  })
-});
-
-// initialize the SDK and register with the OpenTelemetry API
-// this enables the API to record telemetry
-sdk.start()
-
-// gracefully shut down the SDK on process exit
-process.on('SIGTERM', () => {
-  sdk.shutdown()
-    .then(() => console.log('Tracing terminated'))
-    .catch((error) => console.log('Error terminating tracing', error))
-    .finally(() => process.exit(0));
-});
-```
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
-
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
-
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
-
-Step 3. Run the application<br></br>
-
-Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
-```bash
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" node -r ./tracing.js app.js
-```
-
-`SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
-
----
-
-#### **Send traces via OTel Collector binary**
-
-OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way.
-
-You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Javascript application.
-
-
-Step 1. Install OpenTelemetry packages
-
-```js
-npm install --save @opentelemetry/api@^1.4.1
-npm install --save @opentelemetry/sdk-node@^0.39.1
-npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
-npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
-```
-
-Step 2. Create tracing.js file<br></br>
-
-```js
-// tracing.js
-'use strict'
-const process = require('process');
-const opentelemetry = require('@opentelemetry/sdk-node');
-const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
-const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
-const { Resource } = require('@opentelemetry/resources');
-const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
-
-const exporterOptions = {
-  url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
-}
-
-const traceExporter = new OTLPTraceExporter(exporterOptions);
-const sdk = new opentelemetry.NodeSDK({
-  traceExporter,
-  instrumentations: [getNodeAutoInstrumentations()],
-  resource: new Resource({
-    // highlight-next-line
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
-  })
-});
-
-// initialize the SDK and register with the OpenTelemetry API
-// this enables the API to record telemetry
-sdk.start()
-
-// gracefully shut down the SDK on process exit
-process.on('SIGTERM', () => {
-  sdk.shutdown()
-    .then(() => console.log('Tracing terminated'))
-    .catch((error) => console.log('Error terminating tracing', error))
-    .finally(() => process.exit(0));
-});
-```
-
-Step 3. Run the application<br></br>
-```bash
-node -r ./tracing.js app.js
-```
----
-
-### Applications Deployed on Kubernetes
-
-For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
-
-Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps:
-
-Step 1. Install OpenTelemetry packages
-
-```bash
-npm install --save @opentelemetry/api@^1.4.1
-npm install --save @opentelemetry/sdk-node@^0.39.1
-npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
-npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
-```
-
-Step 2. Create tracing.js file<br></br>
-
-```js
-// tracing.js
-'use strict'
-const process = require('process');
-const opentelemetry = require('@opentelemetry/sdk-node');
-const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
-const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
-const { Resource } = require('@opentelemetry/resources');
-const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
-
-const exporterOptions = {
-  url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
-}
-
-const traceExporter = new OTLPTraceExporter(exporterOptions);
-const sdk = new opentelemetry.NodeSDK({
-  traceExporter,
-  instrumentations: [getNodeAutoInstrumentations()],
-  resource: new Resource({
-    // highlight-next-line
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
-  })
-});
-
-// initialize the SDK and register with the OpenTelemetry API
-// this enables the API to record telemetry
-sdk.start()
-
-// gracefully shut down the SDK on process exit
-process.on('SIGTERM', () => {
-  sdk.shutdown()
-    .then(() => console.log('Tracing terminated'))
-    .catch((error) => console.log('Error terminating tracing', error))
-    .finally(() => process.exit(0));
-});
-```
-
-Step 3. Run the application<br></br>
-
-```bash
-node -r ./tracing.js app.js
+## Requirements
+
+Supported Versions
+
+^4.0.0
+
+## Send traces to SigNoz Cloud
+
+Based on your application environment, you can choose the setup below to send traces to SigNoz Cloud.
+
+### Application on VMs
+
+From VMs, there are two ways to send data to SigNoz Cloud.
+
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary(recommended)
+
+#### **Send traces directly to SigNoz Cloud**
+
+Step 1. Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/api@^1.4.1                                                                       
+npm install --save @opentelemetry/sdk-node@^0.39.1
+npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
+```
+
+Step 2. Create tracing.js file
+
+You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
+
+```js
+// tracing.js
+'use strict'
+const process = require('process');
+const opentelemetry = require('@opentelemetry/sdk-node');
+const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
+const { Resource } = require('@opentelemetry/resources');
+const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
+
+// do not set headers in exporterOptions, the OTel spec recommends setting headers through ENV variables
+// https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
+
+const exporterOptions = {
+  url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
+}
+
+const traceExporter = new OTLPTraceExporter(exporterOptions);
+const sdk = new opentelemetry.NodeSDK({
+  traceExporter,
+  instrumentations: [getNodeAutoInstrumentations()],
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+  })
+});
+
+// initialize the SDK and register with the OpenTelemetry API
+// this enables the API to record telemetry
+sdk.start()
+
+// gracefully shut down the SDK on process exit
+process.on('SIGTERM', () => {
+  sdk.shutdown()
+    .then(() => console.log('Tracing terminated'))
+    .catch((error) => console.log('Error terminating tracing', error))
+    .finally(() => process.exit(0));
+});
+```
+
+Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
+
+ US -	ingest.us.signoz.cloud:443/v1/traces 
+
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
+
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
+
+Step 3. Run the application
+
+Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
+```bash
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" node -r ./tracing.js app.js
+```
+
+`<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+
+---
+
+#### **Send traces via OTel Collector binary**
+
+OTel Collector binary helps to collect logs, hostmetrics, resource and infra attributes. It is recommended to install Otel Collector binary to collect and send traces to SigNoz cloud. You can correlate signals and have rich contextual data through this way.
+
+You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Javascript application.
+
+
+Step 1. Install OpenTelemetry packages
+
+```js
+npm install --save @opentelemetry/api@^1.4.1
+npm install --save @opentelemetry/sdk-node@^0.39.1
+npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
+```
+
+Step 2. Create tracing.js file
+
+You need to configure your service name. In this example, we have used `node_app`.
+
+```js
+// tracing.js
+'use strict'
+const process = require('process');
+const opentelemetry = require('@opentelemetry/sdk-node');
+const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
+const { Resource } = require('@opentelemetry/resources');
+const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
+
+const exporterOptions = {
+  url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
+}
+
+const traceExporter = new OTLPTraceExporter(exporterOptions);
+const sdk = new opentelemetry.NodeSDK({
+  traceExporter,
+  instrumentations: [getNodeAutoInstrumentations()],
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+  })
+});
+
+// initialize the SDK and register with the OpenTelemetry API
+// this enables the API to record telemetry
+sdk.start()
+
+// gracefully shut down the SDK on process exit
+process.on('SIGTERM', () => {
+  sdk.shutdown()
+    .then(() => console.log('Tracing terminated'))
+    .catch((error) => console.log('Error terminating tracing', error))
+    .finally(() => process.exit(0));
+});
+```
+
+Step 3. Run the application
+```bash
+node -r ./tracing.js app.js
+```
+---
+
+### Applications Deployed on Kubernetes
+
+For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
+
+Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps:
+
+Step 1. Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/api@^1.4.1
+npm install --save @opentelemetry/sdk-node@^0.39.1
+npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
+```
+
+Step 2. Create tracing.js file
+
+You also need to configure your service name. In this example, we have used `node_app`.
+
+```js
+// tracing.js
+'use strict'
+const process = require('process');
+const opentelemetry = require('@opentelemetry/sdk-node');
+const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
+const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
+const { Resource } = require('@opentelemetry/resources');
+const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions');
+
+const exporterOptions = {
+  url: process.env.OTEL_EXPORTER_OTLP_ENDPOINT || 'http://localhost:4318/v1/traces',
+}
+
+const traceExporter = new OTLPTraceExporter(exporterOptions);
+const sdk = new opentelemetry.NodeSDK({
+  traceExporter,
+  instrumentations: [getNodeAutoInstrumentations()],
+  resource: new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+  })
+});
+
+// initialize the SDK and register with the OpenTelemetry API
+// this enables the API to record telemetry
+sdk.start()
+
+// gracefully shut down the SDK on process exit
+process.on('SIGTERM', () => {
+  sdk.shutdown()
+    .then(() => console.log('Tracing terminated'))
+    .catch((error) => console.log('Error terminating tracing', error))
+    .finally(() => process.exit(0));
+});
+```
+
+Step 3. Run the application
+
+```bash
+node -r ./tracing.js app.js
 ```
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
index 5b5ab19cb3..131c2e0d81 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
@@ -1,6 +1,6 @@
 ## Requirements
 
-- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))<br></br>
+- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))
 
 ## Send traces to SigNoz Cloud
 
@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -24,9 +24,9 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
 
-You need to configure the endpoint for SigNoz cloud in this file. You can find your ingestion key from SigNoz cloud account details sent on your email.
+You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
 
 ```js
 // tracing.js
@@ -41,18 +41,15 @@ const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventi
 // do not set headers in exporterOptions, the OTel spec recommends setting headers through ENV variables
 // https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
 
-// highlight-start
 const exporterOptions = {
   url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
 }
-// highlight-end
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
 const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    // highlight-next-line
     [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
   })
 });
@@ -72,13 +69,13 @@ process.on('SIGTERM', () => {
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
+ US -	ingest.us.signoz.cloud:443/v1/traces 
 
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
 
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 
@@ -86,7 +83,7 @@ Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" node -r ./tracing.js app.js
 ```
 
-`SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+`<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
 ---
 
@@ -105,7 +102,9 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
+
+You need to configure your service name. In this example, we have used `node_app`.
 
 ```js
 // tracing.js
@@ -126,7 +125,6 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    // highlight-next-line
     [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
   })
 });
@@ -144,7 +142,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 
 ```bash
 node -r ./tracing.js app.js
@@ -154,7 +152,7 @@ node -r ./tracing.js app.js
 
 ### Applications Deployed on Kubernetes
 
-For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps:
 
@@ -167,7 +165,9 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create tracing.js file<br></br>
+Step 2. Create tracing.js file
+
+You need to configure your service name. In this example, we have used `node_app`.
 
 ```js
 // tracing.js
@@ -188,7 +188,6 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    // highlight-next-line
     [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
   })
 });
@@ -206,7 +205,7 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Step 3. Run the application<br></br>
+Step 3. Run the application
 ```bash
 node -r ./tracing.js app.js
 ```
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
index e53831c343..374a8b5dac 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -26,14 +26,13 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
 
-You need to configure the endpoint for SigNoz cloud in this file.
+You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
 ```js
 'use strict'
 const process = require('process');
-//OpenTelemetry
 const opentelemetry = require('@opentelemetry/sdk-node');
 const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
 const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http');
@@ -41,9 +40,7 @@ const {Resource} = require('@opentelemetry/resources');
 const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions');
 
 const exporterOptions = {
-  // highlight-start
     url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
-  // highlight-end
   }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -70,26 +67,26 @@ const sdk = new opentelemetry.NodeSDK({
   module.exports = sdk
 ```
 
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
+Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
- US -	ingest.us.signoz.cloud:443/v1/traces <br></br>
+ US -	ingest.us.signoz.cloud:443/v1/traces 
 
- IN -	ingest.in.signoz.cloud:443/v1/traces <br></br>
+ IN -	ingest.in.signoz.cloud:443/v1/traces 
 
- EU - ingest.eu.signoz.cloud:443/v1/traces <br></br>
+ EU - ingest.eu.signoz.cloud:443/v1/traces 
 
 
 
-Step 3. Import the tracer module where your app starts
+Step 3. Import the tracer module where your app starts  `(Ex —> main.ts)`
     
 ```jsx
 const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
-In the `async function boostrap` section of the application code, initialize the tracer as follows: 
+In the `async function boostrap` section of the application code `(Ex —> In main.ts)`, initialize the tracer as follows: 
 
 ```jsx
 const tracer = require('./tracer')
@@ -100,9 +97,7 @@ import { AppModule } from './app.module';
   // OpenTelemetry automatic instrumentation must go here.
 
 async function bootstrap() {
-    // highlight-start
     await tracer.start();
-    //highlight-end
     const app = await NestFactory.create(AppModule);
     await app.listen(3001);
   }
@@ -117,7 +112,7 @@ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" nest sta
 
 You can now run your Nestjs application. The data captured with OpenTelemetry from your application should start showing on the SigNoz dashboard.
 
-`SIGNOZ_INGESTION_KEY` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+`<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
 
 ---
 
@@ -136,7 +131,9 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
+
+You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
 ```js
 'use strict'
@@ -149,9 +146,7 @@ const {Resource} = require('@opentelemetry/resources');
 const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions');
 
 const exporterOptions = {
-  // highlight-start
     url: 'http://localhost:4318/v1/traces'
-    // highlight-end
   }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -185,7 +180,7 @@ const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code, initialize the tracer as follows: 
 
@@ -198,9 +193,7 @@ import { AppModule } from './app.module';
   // OpenTelemetry automatic instrumentation must go here.
 
 async function bootstrap() {
-    // highlight-start
     await tracer.start();
-    //highlight-end
     const app = await NestFactory.create(AppModule);
     await app.listen(3001);
   }
@@ -213,7 +206,7 @@ Step 5. Run the application
 
 ### Applications Deployed on Kubernetes
 
-For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](/docs/tutorial/kubernetes-infra-metrics/).
+For Javascript application deployed on Kubernetes, you need to install OTel Collector agent in your k8s infra to collect and send traces to SigNoz Cloud. You can find the instructions to install OTel Collector agent [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Javascript instrumentation by following the below steps:
 
@@ -226,7 +219,9 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
 npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 ```
 
-Step 2. Create `tracer.ts` file<br></br>
+Step 2. Create `tracer.ts` file
+
+You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
 
 ```js
 'use strict'
@@ -239,9 +234,7 @@ const {Resource} = require('@opentelemetry/resources');
 const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions');
 
 const exporterOptions = {
-  // highlight-start
     url: 'http://localhost:4318/v1/traces'
-    // highlight-end
   }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -275,7 +268,7 @@ const tracer = require('./tracer')
 ```
     
 
-Step 4. Start the tracer<br></br>
+Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code, initialize the tracer as follows: 
 
@@ -288,9 +281,7 @@ import { AppModule } from './app.module';
   // OpenTelemetry automatic instrumentation must go here.
 
 async function bootstrap() {
-    // highlight-start
     await tracer.start();
-    //highlight-end
     const app = await NestFactory.create(AppModule);
     await app.listen(3001);
   }
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
index 31d28db700..faf7dfee86 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
@@ -1,10 +1,12 @@
 import './Python.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
 import { Form, Input, Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import DjangoDocs from './md-docs/django.md';
@@ -27,7 +29,7 @@ export default function Python({
 	activeStep: number;
 }): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('django');
-
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs);
 	const [form] = Form.useForm();
 
 	useEffect(() => {
@@ -38,18 +40,25 @@ export default function Python({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'django':
-				return <DjangoDocs />;
+				setSelectedFrameWorkDocs(DjangoDocs);
+				break;
 			case 'fastAPI':
-				return <FastAPIDocs />;
+				setSelectedFrameWorkDocs(FastAPIDocs);
+				break;
 			case 'flask':
-				return <FlaskDocs />;
+				setSelectedFrameWorkDocs(FlaskDocs);
+				break;
 			case 'falcon':
-				return <FalconDocs />;
+				setSelectedFrameWorkDocs(FalconDocs);
+				break;
 			default:
-				return <PythonDocs />;
+				setSelectedFrameWorkDocs(PythonDocs);
+				break;
 		}
 	};
 
@@ -70,10 +79,11 @@ export default function Python({
 							<div className="label"> Select Framework </div>
 
 							<Select
+								getPopupContainer={popupContainer}
 								defaultValue="Django"
 								style={{ minWidth: 120 }}
 								placeholder="Select Framework"
-								onChange={(value): void => setSelectedFrameWork(value)}
+								onChange={(value): void => handleFrameworkChange(value)}
 								options={[
 									{
 										value: 'django',
@@ -116,7 +126,14 @@ export default function Python({
 					</div>
 
 					<div className="content-container">
-						<MDXProvider>{renderDocs()}</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedFrameWorkDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
index 2e57879efe..923f3f7280 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
@@ -19,12 +19,12 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -38,22 +38,6 @@ pip install opentelemetry-distro==0.38b0
 pip install opentelemetry-exporter-otlp==1.17.0
 ```
 
-<!-- The dependencies included are briefly explained below:
-
-`opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. 
-
-`opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz.
-
-:::note
-💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs:
-
-- opentelemetry-exporter-otlp-proto-http
-- opentelemetry-exporter-otlp-proto-grpc
-
-- (soon) opentelemetry-exporter-otlp-json-http
-
-The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter.
-::: -->
 
 Step 3. Add automatic instrumentation
 
@@ -68,22 +52,22 @@ Step 4. Run your application
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
 OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
 
 - `<service_name>` is the name of the service you want
 - <your_run_command> can be `python3 app.py` or `python manage.py runserver --noreload`
-- Replace `SIGNOZ_INGESTION_KEY` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
+- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -96,7 +80,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -116,7 +100,7 @@ Step 3. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -142,7 +126,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
index ea3e69a03b..9256d14f27 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
@@ -10,12 +10,12 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -29,23 +29,6 @@ pip install opentelemetry-distro==0.38b0
 pip install opentelemetry-exporter-otlp==1.17.0
 ```
 
-<!-- The dependencies included are briefly explained below:
-
-`opentelemetry-distro` - The distro provides a mechanism to automatically configure some of the more common options for users. It helps to get started with OpenTelemetry auto-instrumentation quickly. 
-
-`opentelemetry-exporter-otlp` - This library provides a way to install all OTLP exporters. You will need an exporter to send the data to SigNoz.
-
-:::note
-💡 The `opentelemetry-exporter-otlp` is a convenience wrapper package to install all OTLP exporters. Currently, it installs:
-
-- opentelemetry-exporter-otlp-proto-http
-- opentelemetry-exporter-otlp-proto-grpc
-
-- (soon) opentelemetry-exporter-otlp-json-http
-
-The `opentelemetry-exporter-otlp-proto-grpc` package installs the gRPC exporter which depends on the `grpcio` package. The installation of `grpcio` may fail on some platforms for various reasons. If you run into such issues, or you don't want to use gRPC, you can install the HTTP exporter instead by installing the `opentelemetry-exporter-otlp-proto-http` package. You need to set the `OTEL_EXPORTER_OTLP_PROTOCOL` environment variable to `http/protobuf` to use the HTTP exporter.
-::: -->
-
 Step 3. Add automatic instrumentation
 
 ```bash
@@ -59,22 +42,22 @@ Step 4. Run your application
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
 OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
 
 - *`<service_name>`* is the name of the service you want
-- *<your_run_command>* can be `python3 app.py` or `flask run`
-- Replace `SIGNOZ_INGESTION_KEY` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
+- *<your_run_command>* can be `python3 app.py` or `gunicorn src.app -b 0.0.0.0:8001`
+- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -87,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -108,7 +91,7 @@ opentelemetry-bootstrap --action=install
 ```
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -138,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -160,7 +143,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
index 6ef4a25505..f65dfac0f3 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
@@ -10,12 +10,12 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -42,22 +42,22 @@ Step 4. Run your application
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
 OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
 
 - *`<service_name>`* is the name of the service you want
-- *<your_run_command>* can be `python3 app.py` or `python manage.py runserver --noreload`
-- Replace `SIGNOZ_INGESTION_KEY` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
+- *<your_run_command>* can be `python3 app.py` or `uvicorn main:app --host localhost --port 5002`
+- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -92,7 +92,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -119,7 +119,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -141,7 +141,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
index 7e483bb029..9eb2cf2017 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
@@ -10,12 +10,12 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -42,22 +42,22 @@ Step 4. Run your application
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
 OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
 
 - *`<service_name>`* is the name of the service you want
 - *<your_run_command>* can be `python3 app.py` or `flask run`
-- Replace `SIGNOZ_INGESTION_KEY` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
+- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
 
 You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -92,7 +92,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -121,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
 
-Step 1. Create a virtual environment<br></br>
+Step 1. Create a virtual environment
     
 ```bash
 python3 -m venv .venv
@@ -144,7 +144,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
index 7e8e26f922..5e6263c7c3 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces directly to SigNoz Cloud (quick start)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -33,21 +33,21 @@ Step 3. Run your application
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
 OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=SIGNOZ_INGESTION_KEY" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 opentelemetry-instrument <your_run_command>
 ```
 
 - *`<service_name>`* is the name of the service you want
 - *`<your_run_command>`* can be `python3 app.py` or `flask run`
-- Replace `SIGNOZ_INGESTION_KEY` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
+- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
- US -	ingest.us.signoz.cloud:443 <br></br>
+ US -	ingest.us.signoz.cloud:443 
 
- IN -	ingest.in.signoz.cloud:443 <br></br>
+ IN -	ingest.in.signoz.cloud:443 
 
- EU - ingest.eu.signoz.cloud:443 <br></br>
+ EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
@@ -73,7 +73,7 @@ Step 2. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 3. To run your application and send data to collector in same VM:
+Step 3. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -118,7 +118,7 @@ Step 2. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 3. Run your application:
+Step 3. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss
index 466f47c40b..fbd2eb0bda 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss
@@ -1,6 +1,18 @@
 .infrastructure-monitoring-module-container {
 	padding: 48px 0;
 
+	.module-header {
+		h1 {
+			font-size: 24px;
+			font-weight: 500;
+		}
+
+		h4 {
+			font-size: 14px;
+			font-weight: 300;
+		}
+	}
+
 	.content-container {
 		.heading {
 			.title {
@@ -21,15 +33,13 @@
 				flex-direction: column;
 			}
 		}
+	}
 
-		h1 {
-			font-size: 24px;
-			font-weight: 500;
-		}
-
-		h4 {
-			font-size: 14px;
-			font-weight: 300;
-		}
+	.header {
+		display: flex;
+		gap: 16px;
+		justify-content: flex-start;
+		align-items: center;
+		margin: 16px 0;
 	}
 }
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
index 0b61a0d442..998b6fa6e4 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
@@ -1,39 +1,154 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import './InfrastructureMonitoring.styles.scss';
 
-import { MDXProvider } from '@mdx-js/react';
+import cx from 'classnames';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { trackEvent } from 'utils/segmentAnalytics';
 
-import InfraMonitoringDocs from './infraMonitoringDocs.md';
+import Header from '../common/Header/Header';
+import hostMetricsMonitoring from './md-docs/hostMetricsMonitoring.md';
+import k8sInfraMonitoringDocs from './md-docs/kubernetesInfraMonitoring.md';
+import otherMetrics from './md-docs/otherMetrics.md';
 
 export default function InfrastructureMonitoring({
 	activeStep,
 }: {
 	activeStep: number;
 }): JSX.Element {
-	const docsURL = 'https://signoz.io/docs/userguide/send-metrics-cloud/';
-	const heading = 'Send Metrics to SigNoz Cloud';
+	const [selectedInfraMetrics, setSelectedInfraMetrics] = useState('kubernetes');
+	const [selectedInfraMetricsDocs, setSelectedInfraMetricsDocs] = useState(
+		k8sInfraMonitoringDocs,
+	);
+
+	useEffect(() => {
+		// on metrics Type select
+		trackEvent('Onboarding: APM : Java', {
+			selectedInfraMetrics,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedInfraMetrics]);
+
+	const supportedInfraMetrics = [
+		{
+			name: 'Kubernetes Infra Metrics',
+			id: 'kubernetes',
+			imgURL: `Logos/kubernetes.svg`,
+		},
+		{
+			name: 'HostMetrics',
+			id: 'hostMetrics',
+			imgURL: `Logos/software-window.svg`,
+		},
+		{
+			name: 'Other Metrics',
+			id: 'otherMetrics',
+			imgURL: `Logos/cmd-terminal.svg`,
+		},
+	];
+
+	const handleMetricsTypeChange = (selectedMetricsType: string): void => {
+		setSelectedInfraMetrics(selectedMetricsType);
+
+		switch (selectedMetricsType) {
+			case 'kubernetes':
+				setSelectedInfraMetricsDocs(k8sInfraMonitoringDocs);
+				break;
+			case 'hostMetrics':
+				setSelectedInfraMetricsDocs(hostMetricsMonitoring);
+				break;
+			case 'otherMetrics':
+				setSelectedInfraMetricsDocs(otherMetrics);
+				break;
+			default:
+				setSelectedInfraMetricsDocs(otherMetrics);
+				break;
+		}
+	};
+
+	const getHeaderBasedOnType = (): JSX.Element => {
+		switch (selectedInfraMetrics) {
+			case 'hostMetrics':
+				return (
+					<Header
+						entity="hostMetrics"
+						heading="Host Metrics"
+						imgURL="/Logos/software-window.svg"
+						docsURL="https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+
+			case 'otherMetrics':
+				return (
+					<Header
+						entity="otherMetrics"
+						heading="Other Metrics"
+						imgURL="/Logos/cmd-terminal.svg"
+						docsURL="https://signoz.io/docs/userguide/send-metrics-cloud/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+
+			default:
+				return (
+					<Header
+						entity="kubernetes"
+						heading="Kubernetes Metrics"
+						imgURL="/Logos/kubernetes.svg"
+						docsURL="https://signoz.io/docs/tutorial/kubernetes-infra-metrics/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+		}
+	};
+
 	return (
 		<div className="infrastructure-monitoring-module-container">
 			{activeStep === 2 && (
-				<div className="content-container">
-					<div className="header">
-						<div className="title">
-							<h1>{heading}</h1>
-
-							<div className="detailed-docs-link">
-								View detailed docs
-								<a target="_blank" href={docsURL} rel="noreferrer">
-									here
-								</a>
+				<>
+					<div className="module-header">
+						<h1>Select an Infra Metrics type</h1>
+						{/* <h4> Choose the logs that you want to receive on SigNoz </h4> */}
+					</div>
+
+					<div className="supported-logs-type-container">
+						{supportedInfraMetrics.map((logType) => (
+							<div
+								className={cx(
+									'supported-logs-type',
+									selectedInfraMetrics === logType.id ? 'selected' : '',
+								)}
+								key={logType.name}
+								onClick={(): void => handleMetricsTypeChange(logType.id)}
+							>
+								<img
+									className={cx('supported-logs-type-img')}
+									src={`${logType.imgURL}`}
+									alt=""
+								/>
+
+								<div> {logType.name} </div>
 							</div>
-						</div>
+						))}
 					</div>
 
-					<MDXProvider>
-						<InfraMonitoringDocs />
-					</MDXProvider>
-				</div>
+					{getHeaderBasedOnType()}
+
+					<div className="content-container">
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{selectedInfraMetricsDocs}
+						</ReactMarkdown>
+					</div>
+				</>
 			)}
-			{activeStep === 3 && <div> Infra Monitoring Step 3 </div>}
 		</div>
 	);
 }
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md
new file mode 100644
index 0000000000..fa483a3e70
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md
@@ -0,0 +1,10 @@
+## Hostmetrics Monitoring
+You can collect Hostmetrics from your VM and send it to SigNoz cloud using OpenTelemetry Collector.
+
+Steps to send hostmetrics to SigNoz Cloud:
+
+- Install OpenTelemetry Collector binary agent. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#setup-otel-collector-as-agent).
+
+- Import Hostmetrics Dashboard in SigNoz. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#hostmetrics-dashboard).
+
+Learn how to create dashboards and panels [here](https://signoz.io/docs/userguide/manage-dashboards-and-panels/).
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md
new file mode 100644
index 0000000000..c74ac6e5d0
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md
@@ -0,0 +1,9 @@
+## Kubernetes Infra Metrics
+
+You can collect Kubernetes infra metrics from your k8s cluster and send it to SigNoz cloud using k8s-infra chart.
+
+Steps to send kubernetes infra metrics to SigNoz Cloud:
+
+- Install OpenTelemetry Collectors in your k8s infra. Please find instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
+
+- Plot metrics in SigNoz UI by following the instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/#plot-metrics-in-signoz-ui).
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md
similarity index 95%
rename from frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
rename to frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md
index 351c4542c6..adabc59050 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md
@@ -1,3 +1,7 @@
+## Send metrics from any third-party integrations
+
+This document helps you to send metrics from any third-party integrations such as RabbitMQ, Nginx, MySQL, etc.
+
 There are two ways in which you can send metrics to SigNoz using OpenTelemetry:
 
 - From your application
@@ -5,8 +9,8 @@ There are two ways in which you can send metrics to SigNoz using OpenTelemetry:
 
 In this document, we will cover how to send metrics from OpenTelemetry Collector. The Collector is a swiss-army knife that can collect metrics from various sources and send them to SigNoz.
 
-- [Enable a Specific Metric Receiver](#enable-a-specific-metric-receiver)
-- [Enable a Prometheus Receiver](#enable-a-prometheus-receiver)
+- Enable a Specific Metric Receiver
+- Enable a Prometheus Receiver
 
 ## Enable a Specific Metric Receiver
 
@@ -71,11 +75,11 @@ service:
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
-US - ingest.us.signoz.cloud:443 <br></br>
+US - ingest.us.signoz.cloud:443 
 
-IN - ingest.in.signoz.cloud:443 <br></br>
+IN - ingest.in.signoz.cloud:443 
 
-EU - ingest.eu.signoz.cloud:443 <br></br>
+EU - ingest.eu.signoz.cloud:443 
 
 To enable a new OpenTelemetry receiver, follow the steps below:
 
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
index f08da7d539..3341dadaff 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
@@ -1,11 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
-import { Tabs } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
 import LogsFromLogFile from './applicationLogsFromLogFile.md';
-import LogsUsingJavaOtelSDK from './applicationLogsUsingJavaOtelSDK.md';
-import LogsUsingPythonOtelSDK from './applicationLogsUsingPythonOtelSDK.md';
 
 interface ApplicationLogsProps {
 	type: string;
@@ -14,29 +12,12 @@ interface ApplicationLogsProps {
 
 const collectLogsFromFileURL =
 	'https://signoz.io/docs/userguide/collect_logs_from_file/';
-const collectLogsFromOTELSDK =
-	'https://signoz.io/docs/userguide/collecting_application_logs_otel_sdk_java/';
 
 export default function ApplicationLogs({
 	type,
 	activeStep,
 }: ApplicationLogsProps): JSX.Element {
-	function renderContentForCollectingLogsOtelSDK(language: string): JSX.Element {
-		if (language === 'Java') {
-			return <LogsUsingJavaOtelSDK />;
-		}
-		return <LogsUsingPythonOtelSDK />;
-	}
-
-	enum ApplicationLogsType {
-		FROM_LOG_FILE = 'from-log-file',
-		USING_OTEL_COLLECTOR = 'using-otel-sdk',
-	}
-
-	const docsURL =
-		type === ApplicationLogsType.FROM_LOG_FILE
-			? collectLogsFromFileURL
-			: collectLogsFromOTELSDK;
+	const docsURL = collectLogsFromFileURL;
 
 	return (
 		<>
@@ -44,38 +25,21 @@ export default function ApplicationLogs({
 				<div className="golang-setup-instructions-container">
 					<Header
 						entity="docker"
-						heading={
-							type === ApplicationLogsType.FROM_LOG_FILE
-								? 'Collecting Application Logs from Log file'
-								: 'Collecting Application Logs Using OTEL SDK'
-						}
-						imgURL={`/Logos/${
-							type === ApplicationLogsType.FROM_LOG_FILE
-								? 'software-window'
-								: 'cmd-terminal'
-						}.svg`}
+						heading="Collecting Application Logs from Log file"
+						imgURL={`/Logos/${'software-window'}.svg`}
 						docsURL={docsURL}
 						imgClassName="supported-logs-type-img"
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							{type === ApplicationLogsType.FROM_LOG_FILE && <LogsFromLogFile />}
-							{type === ApplicationLogsType.USING_OTEL_COLLECTOR && (
-								<Tabs
-									defaultActiveKey="1"
-									items={['Java', 'Python'].map((language, i) => {
-										const id = String(i + 1);
-
-										return {
-											label: <div className="language-tab-item">{language}</div>,
-											key: id,
-											children: renderContentForCollectingLogsOtelSDK(language),
-										};
-									})}
-								/>
-							)}
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{LogsFromLogFile}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md
index 4f65666afc..d444b5ef41 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsFromLogFile.md
@@ -1,7 +1,5 @@
 ## Collect Application Logs from Log file in SigNoz cloud
 
-If you don’t already have a SigNoz cloud account, you can sign up [here](https://signoz.io/teams/).
-
 - Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
 
 - Add the filelog reciever to `config.yaml`.
@@ -35,4 +33,5 @@ If you don’t already have a SigNoz cloud account, you can sign up [here](https
 - Now we can restart the otel collector so that new changes are applied.
 
 - The log will be exported, if you add more lines to the log file it will be exported as well
+
 - If there are no errors your logs will be visible on SigNoz UI.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
index dd3591d472..f0e512581a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
@@ -13,7 +13,7 @@ The command for it will look like
 OTEL_LOGS_EXPORTER=otlp OTEL_EXPORTER_OTLP_ENDPOINT="http://<IP of SigNoz Backend>:4317" OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> java -javaagent:/path/opentelemetry-javaagent.jar -jar  <myapp>.jar
 ```
 
-<br></br>
+
 
 In the below example we will configure a java application to send logs to SigNoz.
 
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
index 972372c59d..e88d62632b 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './docker.md';
+import DockerDocs from './docker.md';
 
 export default function Docker({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Docker({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{DockerDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
index e72a38dbf5..1c1025963a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
@@ -1,70 +1,23 @@
-## Collect Syslogs in SigNoz cloud
+## Collect Docker Container Logs in SigNoz Cloud
 
-### Setup Otel Collector as agent
+- Clone this [repository](https://github.com/SigNoz/docker-container-logs)
 
-- Add `config.yaml`
-  ```yaml {22-26}
-  receivers:
-   filelog:
-    include: [/tmp/python.log]
-    start_at: beginning
-    operators:
-     - type: json_parser
-       timestamp:
-        parse_from: attributes.time
-        layout: '%Y-%m-%d,%H:%M:%S %z'
-     - type: move
-       from: attributes.message
-       to: body
-     - type: remove
-       field: attributes.time
-  processors:
-   batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  exporters:
-   otlp:
-    endpoint: 'ingest.{region}.signoz.cloud:443'
-    tls:
-     insecure: false
-    headers:
-     'signoz-access-token': '<SIGNOZ_INGESTION_KEY>'
-  service:
-   pipelines:
-    logs:
-     receivers: [filelog]
-     processors: [batch]
-     exporters: [otlp/log]
-  ```
+- Update `otel-collector-config.yaml` and set the values of `<SIGNOZ_INGESTION_KEY>` and `{region}`.
 
-````
-Depending on the choice of your region for SigNoz cloud, the otlp endpoint will vary according to this table.
+    Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
 
-| Region | Endpoint                   |
-| ------ | -------------------------- |
-| US     | ingest.us.signoz.cloud:443 |
-| IN     | ingest.in.signoz.cloud:443 |
-| EU     | ingest.eu.signoz.cloud:443 |
+    US -	ingest.us.signoz.cloud:443 
 
-* We will start our otel-collector container.
-```bash
-docker run -d --name signoz-host-otel-collector -p 2255:2255 --user root -v $(pwd)/config.yaml:/etc/otel/config.yaml signoz/signoz-otel-collector:0.79.0
-````
+    IN -	ingest.in.signoz.cloud:443 
 
-### Run logspout to collect docker container logs and send it to local otel collector.
+    EU - ingest.eu.signoz.cloud:443 
 
-Logspout helps in collecting Docker logs by connecting to Docker socket.
 
-- Run logspout
+ - Start the containers
+ 
+    ```bash
+    docker compose up -d
+    ```
 
-  ```bash
-  docker run --net=host --rm --name="logspout" \
-          --volume=/var/run/docker.sock:/var/run/docker.sock \
-          gliderlabs/logspout \
-          syslog+tcp://<host>:2255
-  ```
+ - If there are no errors your logs will be exported and will be visible on the SigNoz UI.
 
-  For finding the right host for your SigNoz cluster please follow the guide [here](../install/troubleshooting.md#signoz-otel-collector-address-grid).
-
-- If there are no errors your logs will be exported and will be visible on the SigNoz UI.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
index a0ccead4a8..e86bbabfe4 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
@@ -1,8 +1,10 @@
-import { MDXProvider } from '@mdx-js/react';
 import { Select } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import FluentBit from './md-docs/fluentBit.md';
 import FluentD from './md-docs/fluentD.md';
@@ -16,6 +18,7 @@ enum FrameworksMap {
 
 export default function ExistingCollectors(): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('fluent_d');
+	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(FluentD);
 
 	useEffect(() => {
 		// on language select
@@ -25,14 +28,19 @@ export default function ExistingCollectors(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedFrameWork]);
 
-	const renderDocs = (): JSX.Element => {
+	const handleFrameworkChange = (selectedFrameWork: string): void => {
+		setSelectedFrameWork(selectedFrameWork);
+
 		switch (selectedFrameWork) {
 			case 'fluent_d':
-				return <FluentD />;
+				setSelectedFrameWorkDocs(FluentD);
+				break;
 			case 'fluent_bit':
-				return <FluentBit />;
+				setSelectedFrameWorkDocs(FluentBit);
+				break;
 			default:
-				return <LogStashDocs />;
+				setSelectedFrameWorkDocs(LogStashDocs);
+				break;
 		}
 	};
 
@@ -51,10 +59,11 @@ export default function ExistingCollectors(): JSX.Element {
 					<div className="label"> Select Framework </div>
 
 					<Select
+						getPopupContainer={popupContainer}
 						defaultValue="fluent_d"
 						style={{ minWidth: 120 }}
 						placeholder="Select Framework"
-						onChange={(value): void => setSelectedFrameWork(value)}
+						onChange={(value): void => handleFrameworkChange(value)}
 						options={[
 							{
 								value: 'fluent_d',
@@ -74,7 +83,14 @@ export default function ExistingCollectors(): JSX.Element {
 			</div>
 
 			<div className="content-container">
-				<MDXProvider>{renderDocs()}</MDXProvider>
+				<ReactMarkdown
+					components={{
+						pre: Pre,
+						code: Code,
+					}}
+				>
+					{selectedFrameWorkDocs}
+				</ReactMarkdown>
 			</div>
 		</div>
 	);
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md
index 6ec0400f98..b9d363d198 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentBit.md
@@ -1,66 +1,58 @@
-If you use fluentBit to collect logs in your stack with this tutotrial you will be able to send logs from fluentBit to SigNoz.
+## Collect Logs Using FluentBit in SigNoz cloud
 
-At SigNoz we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentBit agent to opentelemetry collector using fluentforward protocol.
-
-### Collect Logs Using FluentBit in SigNoz cloud
-
-- Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
-- Add fluentforward reciever to your `config.yaml`
-
-  ```yaml
-  receivers:
-   fluentforward:
-    endpoint: 0.0.0.0:24224
-  ```
-
-  Here we have used port 24224 for listing in fluentforward protocol, but you can change it to a port you want.
-  You can read more about fluentforward receiver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/fluentforwardreceiver).
-
-- Modify your `config.yaml` and add the above receiver
-  ```yaml {4}
-  service:
-      ....
-      logs:
-          receivers: [otlp, fluentforward]
-          processors: [batch]
-          exporters: [otlp]
-  ```
-- Change the fluentBit config to forward the logs to otel collector.
+If you use fluentBit to collect logs in your stack, you will be able to send logs from fluentBit to SigNoz.
 
-  ```
-  [INPUT]
-    Name   dummy
-    Tag    dummy.log
-    Dummy {"message": "mylog", "trace_id": "0000000000000000f4dbb3edd765f620", "span_id": "43222c2d51a7abe3"}
-
-  [OUTPUT]
-    Name          forward
-    Match         *
-    Host          otel-collector-host
-    Port          24224
-  ```
-
-  In this example we are generating sample logs and then forwarding them to the otel collector which is listening on port 24224.
-  `otel-collector-host` has to be replaced by the host where otel-collector is running. For more info check [troubleshooting](../install/troubleshooting.md#signoz-otel-collector-address-grid).
-
-- Once you make this changes you can restart fluentBit and otel-binary, and you will be able to see the logs in SigNoz.
-- To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. [link](./logs.md#processors-available-for-processing-logs)
-
-  eg:-
-
-  ```yaml
-  processors:
-   logstransform:
-    operators:
-     - type: trace_parser
-       trace_id:
-        parse_from: attributes.trace_id
-       span_id:
-        parse_from: attributes.span_id
-     - type: remove
-       field: attributes.trace_id
-     - type: remove
-       field: attributes.span_id
-  ```
+At SigNoz we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentBit agent to opentelemetry collector using fluentforward protocol.
 
-  The operations in the above processor will parse the trace_id and span_id from log to opentelemetry log model and remove them from attributes.
+* Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+
+* Add fluentforward reciever to your `config.yaml` 
+    ```yaml
+    receivers:
+      fluentforward:
+        endpoint: 0.0.0.0:24224
+    ```
+    Here we have used port 24224 for listening in fluentforward protocol, but you can change it to a port you want.
+    You can read more about fluentforward receiver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/fluentforwardreceiver).
+
+* Modify your `config.yaml` and add the above receiver
+    ```yaml {4}
+    service:
+        ....
+        logs:
+            receivers: [otlp, fluentforward]
+            processors: [batch]
+            exporters: [otlp]
+    ```
+
+*  Add the following to your fluentBit config to forward the logs to otel collector.
+    ```
+    [OUTPUT]
+      Name          forward
+      Match         *
+      Host          localhost
+      Port          24224
+    ```
+    In this config we are forwarding the logs to the otel collector which is listening on  port 24224.
+    Also we are assuming that you are running the fluentBit binary on the host. If not, the value of `host` might change depending on your environment. 
+
+*  Once you make this changes you can restart fluentBit and otel-binary, and you will be able to see the logs in SigNoz.
+
+*  To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. ([link](https://signoz.io/docs/userguide/logs/#processors-available-for-processing-logs))
+  
+    eg:- 
+    ```yaml
+    processors:
+      logstransform:
+        operators:
+          - type: trace_parser
+            trace_id:
+              parse_from: attributes.trace_id
+            span_id:
+              parse_from: attributes.span_id
+          - type: remove
+            field: attributes.trace_id
+          - type: remove
+            field: attributes.span_id
+    ```
+    The operations in the above processor will parse the trace_id and span_id from log to opentelemetry log model and remove them from attributes.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md
index 0f383b2c89..0e0792d158 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/fluentD.md
@@ -1,24 +1,21 @@
-If you use fluentD to collect logs in your stack with this tutotrial you will be able to send logs from fluentD to SigNoz.
+## Collect Logs Using FluentD in SigNoz cloud
 
-At SigNoz we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentD agent to opentelemetry collector.
+If you use fluentD to collect logs in your stack, you will be able to send logs from fluentD to SigNoz.
 
-### Collect Logs Using FluentD in SigNoz cloud
+At SigNoz, we use opentelemetry collector to recieve logs which supports the fluentforward protocol. So you can forward your logs from your fluentD agent to opentelemetry collector.
 
-- Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
-
-- Add fluentforward reciever to your `config.yaml`
+* Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
 
+* Add fluentforward reciever to your `config.yaml` 
   ```yaml
   receivers:
-   fluentforward:
-    endpoint: 0.0.0.0:24224
+    fluentforward:
+      endpoint: 0.0.0.0:24224
   ```
-
-  Here we have used port 24224 for listing in fluentforward protocol, but you can change it to a port you want.
+  Here we have used port 24224 for listening in fluentforward protocol, but you can change it to a port you want.
   You can read more about fluentforward receiver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/fluentforwardreceiver).
 
-- Modify your `config.yaml` and add the above receiver
-
+* Modify your `config.yaml` and add the above receiver
   ```yaml {4}
   service:
       ....
@@ -28,17 +25,9 @@ At SigNoz we use opentelemetry collector to recieve logs which supports the flue
           exporters: [otlp]
   ```
 
-- Change the fluentD config to forward the logs to otel collector.
-
+* Add the following to your fluentD config to forward the logs to otel collector.
   ```
-  <source>
-    @type sample
-    sample [{"message": "my log data", "source": "myhost"}, {"message": "my log data 1", "source": "myhost1"}]
-    tag sample
-    rate 10000
-  </source>
-
-  <match sample>
+  <match <directive>>
     @type forward
     send_timeout 60s
     recover_wait 10s
@@ -46,34 +35,32 @@ At SigNoz we use opentelemetry collector to recieve logs which supports the flue
 
     <server>
       name myserver1
-      host otel-collector-host
+      host localhost
       port 24224
     </server>
   </match>
   ```
-
-  In this example we are generating sample logs and then forwarding them to the otel collector which is listening on port 24224.
-  `otel-collector-host` has to be replaced by the host where otel-collector is running. For more info check [troubleshooting](../install/troubleshooting.md#signoz-otel-collector-address-grid).
-
-- Once you make this changes you can restart fluentD and otel-binary, and you will be able to see the logs in SigNoz.
-
-- To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. [link](./logs.md#processors-available-for-processing-logs)
-
-  eg:-
-
-  ```yaml
-  processors:
-   logstransform:
-    operators:
-     - type: trace_parser
-       trace_id:
-        parse_from: attributes.trace_id
-       span_id:
-        parse_from: attributes.span_id
-     - type: remove
-       field: attributes.trace_id
-     - type: remove
-       field: attributes.span_id
-  ```
-
-  The operations in the above processor will parse the trace_id and span_id from log to opentelemetry log model and remove them from attributes.
+  In this config we are matching a directive and forwarding logs to the otel collector which is listening on  port 24224. Replace `<directive>` with your directive name.
+  Also we are assuming that you are running the fluentD binary on the host. If not, the value of `host` might change depending on your environment. 
+*  Once you make this changes you can restart fluentD and otel-binary, and you will be able to see the logs in SigNoz.
+  
+*  To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. ([link](https://signoz.io/docs/userguide/logs/#processors-available-for-processing-logs))
+
+    eg:-
+
+    ```yaml
+    processors:
+      logstransform:
+        operators:
+          - type: trace_parser
+            trace_id:
+              parse_from: attributes.trace_id
+            span_id:
+              parse_from: attributes.span_id
+          - type: remove
+            field: attributes.trace_id
+          - type: remove
+            field: attributes.span_id
+    ```
+
+    The operations in the above processor will parse the trace_id and span_id from log to opentelemetry log model and remove them from attributes.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/logStash.md b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/logStash.md
index 60b35f2688..13576ae868 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/logStash.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/md-docs/logStash.md
@@ -1,12 +1,13 @@
-If you use logstash to collect logs in your stack with this tutotrial you will be able to send logs from logstash to SigNoz.
+## Collect Logs Using Logstash in SigNoz cloud
 
-At SigNoz we use opentelemetry collector to recieve logs which supports the TCP protocol. So you can forward your logs from your logstash agent to opentelemetry collector
+If you use logstash to collect logs in your stack, you will be able to send logs from Logstash to SigNoz.
 
-## Steps to recieve logs from Logstash:
+At SigNoz we use OpenTelemetry Collector to recieve logs which supports the TCP protocol. So you can forward your logs from the logstash agent to opentelemetry collector.
 
-- Add fluentforward reciever to your `otel-collector-config.yaml` which is present inside `deploy/docker/clickhouse-setup`
+* Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
 
-  ```
+* Add the reciever to your `config.yaml` 
+  ```yaml
   receivers:
     tcplog/logstash:
       max_log_size: 1MiB
@@ -16,47 +17,32 @@ At SigNoz we use opentelemetry collector to recieve logs which supports the TCP
       add_attributes: false
       operators: []
   ```
-
-  Here we have used port 2255 for listing in TCP protocol, but you can change it to a port you want.
+  Here we have used port 2255 for listening in TCP protocol, but you can change it to a port you want.
   You can read more about tcplog reciver [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/tcplogreceiver).
 
-- Update the pipleline for logs and make the following change in `otel-collector-config.yaml`
-
-  ```
+* Modify your `config.yaml` and add the above receiver
+  ```yaml {4}
   service:
-    ...
-
-    logs:
-      receivers: [ otlp, tcplog/logstash ]
-      processors: [ batch ]
-      exporters: [  clickhouselogsexporter ]
-  ```
-
-  Here we are adding our clickhouse exporter and creating a pipeline which will collect logs from `tcplog/logstash` receiver, processing it using batch processor and export it to clickhouse.
-
-- Expose the port in port for otel-collector in `docker-compose.yaml` file present in `deploy/docker/clickhouse-setup`
-
+      ....
+      logs:
+          receivers: [otlp, tcplog/logstash]
+          processors: [batch]
+          exporters: [otlp]
   ```
-  otel-collector:
-    ...
-    ports:
-      - "2255:2255"
-  ```
-
-- Change the logstash config to forward the logs to otel collector.
-
+  
+* Change the logstash config to forward the logs to otel collector.
   ```
   output {
     tcp {
       codec => json_lines # this is required otherwise it will send eveything in a single line
-      host => "otel-collector-host"
+      host => "localhost"
       port => 2255
     }
   }
   ```
+  Here we are configuring logstash to send logs to otel-collector that we ran in the previous step, which is listening on port 2255.
+  Also we are assuming that you are running the logstash binary on the host. If not, the value of `host` might change depending on your environment. 
 
-  In this example we are generating sample logs and then forwarding them to the otel collector which is listening on port 2255.
-  `otel-collector-host` has to be replaced by the host where otel-collector is running. For more info check [troubleshooting](../install/troubleshooting.md#signoz-otel-collector-address-grid).
+*  Once you make this changes you can otel binary and logstash, and you will be able to see the logs in SigNoz.
 
-- Once you make this changes you can restart logstash and SignNoz, and you will be able to see the logs in SigNoz.
-- To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry. [link](./logs.md#processors-available-for-processing-logs)
+*  To properly transform your existing log model into opentelemetry [log](https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/logs/data-model.md) model you can use the different processors provided by opentelemetry ([link](https://signoz.io/docs/userguide/logs/#processors-available-for-processing-logs)).
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
index 9c93ce5aa9..0a60acc7db 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './kubernetes.md';
+import KubernetesDocs from './kubernetes.md';
 
 export default function Kubernetes({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Kubernetes({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{KubernetesDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md
index 8f2262b52d..a25a5c8022 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/kubernetes.md
@@ -1,6 +1,6 @@
 ## Collect Kubernetes Pod Logs in SigNoz Cloud
 
-To collect logs from your kubernetes cluster, you will need to deploy k8s-infra chart. Please follow the guide [here](/docs/tutorial/kubernetes-infra-metrics/). Log collection of pods from all namespaces is enabled by default except for pods in `kube-system` and `hotrod`. To modify the log collection mechanism, please follow the guides below.
+To collect logs from your kubernetes cluster, you will need to deploy k8s-infra chart. Please follow the guide [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/). Log collection of pods from all namespaces is enabled by default except for pods in `kube-system` and `hotrod`. To modify the log collection mechanism, please follow the guides below.
 
-- [Disable automatic pod logs collection](#steps-to-disable-automatic-pod-logs-collection)
-- [Filter/Exclude logs collection](#steps-to-filterexclude-logs-collection)
+- [Disable automatic pod logs collection](https://signoz.io/docs/userguide/collect_kubernetes_pod_logs/#steps-to-disable-automatic-pod-logs-collection)
+- [Filter/Exclude logs collection](https://signoz.io/docs/userguide/collect_kubernetes_pod_logs/#steps-to-filterexclude-logs-collection)
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
index de25134bb4..0a54cbce0f 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
@@ -35,16 +35,6 @@ const supportedLogTypes = [
 		id: 'application_logs_log_file',
 		imgURL: `Logos/software-window.svg`,
 	},
-	{
-		name: 'NodeJS Winston Logs ',
-		id: 'nodejs',
-		imgURL: `Logos/node-js.svg`,
-	},
-	{
-		name: 'Application Logs using OTEL SDK',
-		id: 'application_logs_otel_sdk',
-		imgURL: `Logos/cmd-terminal.svg`,
-	},
 	{
 		name: 'Logs from existing collectors',
 		id: 'existing_collectors',
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
index 5ebc044205..75f9a3a487 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './nodejs.md';
+import NodeJsDocs from './nodejs.md';
 
 export default function Nodejs({
 	activeStep,
@@ -22,9 +23,14 @@ export default function Nodejs({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{NodeJsDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
index eb00380e44..9cd568f79d 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
 
 import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './syslogs.md';
+import SysLogsDocs from './syslogs.md';
 
 export default function SysLogs({
 	activeStep,
@@ -22,9 +23,14 @@ export default function SysLogs({
 					/>
 
 					<div className="content-container">
-						<MDXProvider>
-							<Post />
-						</MDXProvider>
+						<ReactMarkdown
+							components={{
+								pre: Pre,
+								code: Code,
+							}}
+						>
+							{SysLogsDocs}
+						</ReactMarkdown>
 					</div>
 				</div>
 			)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md
index 32ed6eb13f..402aa0fdcc 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/syslogs.md
@@ -1,11 +1,7 @@
 ## Collect Syslogs in SigNoz cloud
 
-If you don’t already have a SigNoz cloud account, you can sign up [here](https://signoz.io/teams/).
-
-<Tabs>
-<TabItem value="VM" label="VM" default>
-
 - Add otel collector binary to your VM by following this [guide](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+
 - Add the syslog reciever to `config.yaml` to otel-collector.
 
   ```yaml {2-10}
@@ -22,7 +18,7 @@ If you don’t already have a SigNoz cloud account, you can sign up [here](https
   ```
 
   Here we are collecting the logs and moving message from attributes to body using operators that are available.
-  You can read more about operators [here](./logs.md#operators-for-parsing-and-manipulating-logs).
+  You can read more about operators [here](https://signoz.io/docs/userguide/logs/#operators-for-parsing-and-manipulating-logs).
 
   For more configurations that are available for syslog receiver please check [here](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver/syslogreceiver).
 
@@ -70,14 +66,10 @@ If you don’t already have a SigNoz cloud account, you can sign up [here](https
           action.resumeRetryCount="10"
           queue.type="linkedList" queue.size="10000" template="UTCTraditionalForwardFormat")
   ```
-
-  So that you have retires and queue in place to de-couple the sending from the other logging action.
-
-  The value of `target` might vary depending on where SigNoz is deployed, since it is deployed on the same host I am using `0.0.0.0` for more help you can visit [here](../install/troubleshooting.md#signoz-otel-collector-address-grid).
+  So that you have retries and queue in place to de-couple the sending from other logging action. Also, we are assuming that you are running the otel binary on the same host. If not, the value of target might change depending on your environment.
 
 - Now restart your rsyslog service by running `sudo systemctl restart rsyslog.service`
+
 - You can check the status of service by running `sudo systemctl status rsyslog.service`
-- If there are no errors your logs will be visible on SigNoz UI.
 
-</TabItem>
-</Tabs>
+- If there are no errors your logs will be visible on SigNoz UI.
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
index 72d93cc4fa..6beb364003 100644
--- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
@@ -43,21 +43,21 @@ const useCases = {
 		id: ModulesMap.APM,
 		title: 'Application Monitoring',
 		desc:
-			'Monitor performance of your applications & troubleshoot problems by installing within your infra.',
+			'Monitor application metrics like p99 latency, error rates, external API calls, and db calls.',
 		stepDesc: defaultStepDesc,
 	},
 	LogsManagement: {
 		id: ModulesMap.LogsManagement,
 		title: 'Logs Management',
 		desc:
-			'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+			'Easily filter and query logs, build dashboards and alerts based on attributes in logs',
 		stepDesc: 'Choose the logs that you want to receive on SigNoz',
 	},
 	InfrastructureMonitoring: {
 		id: ModulesMap.InfrastructureMonitoring,
 		title: 'Infrastructure Monitoring',
 		desc:
-			'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+			'Monitor Kubernetes infrastructure metrics, hostmetrics, or metrics of any third-party integration',
 		stepDesc: defaultStepDesc,
 	},
 };
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput.tsx
new file mode 100644
index 0000000000..ef6b93f11c
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterInput.tsx
@@ -0,0 +1,64 @@
+import { Form } from 'antd';
+import { initialQueryBuilderFormValuesMap } from 'constants/queryBuilder';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import isEqual from 'lodash-es/isEqual';
+import { useTranslation } from 'react-i18next';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { ProcessorFormField } from '../../AddNewProcessor/config';
+import { formValidationRules } from '../../config';
+import { FormLabelStyle } from '../styles';
+
+function TagFilterInput({
+	value,
+	onChange,
+	placeholder,
+}: TagFilterInputProps): JSX.Element {
+	const query = { ...initialQueryBuilderFormValuesMap.logs };
+	if (value) {
+		query.filters = value;
+	}
+
+	const onQueryChange = (newValue: TagFilter): void => {
+		// Avoid unnecessary onChange calls
+		if (!isEqual(newValue, query.filters)) {
+			onChange(newValue);
+		}
+	};
+
+	return (
+		<QueryBuilderSearch
+			query={query}
+			onChange={onQueryChange}
+			placeholder={placeholder}
+		/>
+	);
+}
+
+interface TagFilterInputProps {
+	onChange: (filter: TagFilter) => void;
+	value: TagFilter;
+	placeholder: string;
+}
+
+function FilterInput({ fieldData }: FilterInputProps): JSX.Element {
+	const { t } = useTranslation('pipeline');
+
+	return (
+		<Form.Item
+			required={false}
+			label={<FormLabelStyle>{fieldData.fieldName}</FormLabelStyle>}
+			key={fieldData.id}
+			rules={formValidationRules}
+			name={fieldData.name}
+		>
+			{/* Antd form will supply value and onChange to <TagFilterInput /> here.
+      // @ts-ignore */}
+			<TagFilterInput placeholder={t(fieldData.placeholder)} />
+		</Form.Item>
+	);
+}
+interface FilterInputProps {
+	fieldData: ProcessorFormField;
+}
+export default FilterInput;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterSearch.tsx b/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterSearch.tsx
deleted file mode 100644
index 5b9863b8dd..0000000000
--- a/frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/FilterSearch.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Form, Input } from 'antd';
-import { useTranslation } from 'react-i18next';
-
-import { ProcessorFormField } from '../../AddNewProcessor/config';
-import { formValidationRules } from '../../config';
-import { FormLabelStyle } from '../styles';
-
-function FilterSearch({ fieldData }: FilterSearchProps): JSX.Element {
-	const { t } = useTranslation('pipeline');
-
-	return (
-		<Form.Item
-			required={false}
-			label={<FormLabelStyle>{fieldData.fieldName}</FormLabelStyle>}
-			key={fieldData.id}
-			rules={formValidationRules}
-			name={fieldData.name}
-		>
-			<Input.Search
-				id={fieldData.id.toString()}
-				name={fieldData.name}
-				placeholder={t(fieldData.placeholder)}
-				allowClear
-			/>
-		</Form.Item>
-	);
-}
-interface FilterSearchProps {
-	fieldData: ProcessorFormField;
-}
-export default FilterSearch;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/index.tsx
new file mode 100644
index 0000000000..b33ed6c087
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/index.tsx
@@ -0,0 +1,24 @@
+import './styles.scss';
+
+import { queryFilterTags } from 'hooks/queryBuilder/useTag';
+import { PipelineData } from 'types/api/pipeline/def';
+
+function PipelineFilterPreview({
+	filter,
+}: PipelineFilterPreviewProps): JSX.Element {
+	return (
+		<div className="pipeline-filter-preview-container">
+			{queryFilterTags(filter).map((tag) => (
+				<div className="pipeline-filter-preview-condition" key={tag}>
+					{tag}
+				</div>
+			))}
+		</div>
+	);
+}
+
+interface PipelineFilterPreviewProps {
+	filter: PipelineData['filter'];
+}
+
+export default PipelineFilterPreview;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/styles.scss b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/styles.scss
new file mode 100644
index 0000000000..a5c5938fa4
--- /dev/null
+++ b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/PipelineFilterPreview/styles.scss
@@ -0,0 +1,10 @@
+.pipeline-filter-preview-condition {
+	padding: 0 0.2em;
+}
+
+.pipeline-filter-preview-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.4em;
+	font-size: 0.75rem;
+}
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/index.tsx
index 4d351c7a41..25ec206566 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/TableComponents/index.tsx
@@ -4,6 +4,7 @@ import { PipelineData, ProcessorData } from 'types/api/pipeline/def';
 
 import { PipelineIndexIcon } from '../AddNewProcessor/styles';
 import { ColumnDataStyle, ListDataStyle, ProcessorIndexIcon } from '../styles';
+import PipelineFilterPreview from './PipelineFilterPreview';
 
 const componentMap: ComponentMap = {
 	orderId: ({ record }) => <PipelineIndexIcon>{record}</PipelineIndexIcon>,
@@ -14,6 +15,7 @@ const componentMap: ComponentMap = {
 	),
 	id: ({ record }) => <ProcessorIndexIcon>{record}</ProcessorIndexIcon>,
 	name: ({ record }) => <ListDataStyle>{record}</ListDataStyle>,
+	filter: ({ record }) => <PipelineFilterPreview filter={record} />,
 };
 
 function TableComponents({
@@ -31,7 +33,9 @@ type ComponentMap = {
 	[key: string]: React.FC<{ record: Record }>;
 };
 
-export type Record = PipelineData['orderId'] & ProcessorData;
+export type Record = PipelineData['orderId'] &
+	PipelineData['filter'] &
+	ProcessorData;
 
 interface TableComponentsProps {
 	columnKey: string;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/config.ts b/frontend/src/container/PipelinePage/PipelineListsView/config.ts
index 44f6bcc0d7..baecbb8d14 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/config.ts
+++ b/frontend/src/container/PipelinePage/PipelineListsView/config.ts
@@ -8,15 +8,16 @@ import {
 import DeploymentStage from '../Layouts/ChangeHistory/DeploymentStage';
 import DeploymentTime from '../Layouts/ChangeHistory/DeploymentTime';
 import DescriptionTextArea from './AddNewPipeline/FormFields/DescriptionTextArea';
+import FilterInput from './AddNewPipeline/FormFields/FilterInput';
 import NameInput from './AddNewPipeline/FormFields/NameInput';
 
 export const pipelineFields = [
 	{
 		id: 1,
 		fieldName: 'Filter',
-		placeholder: 'search_pipeline_placeholder',
+		placeholder: 'pipeline_filter_placeholder',
 		name: 'filter',
-		component: NameInput,
+		component: FilterInput,
 	},
 	{
 		id: 2,
diff --git a/frontend/src/container/PipelinePage/mocks/pipeline.ts b/frontend/src/container/PipelinePage/mocks/pipeline.ts
index d91665ce03..db309b0e50 100644
--- a/frontend/src/container/PipelinePage/mocks/pipeline.ts
+++ b/frontend/src/container/PipelinePage/mocks/pipeline.ts
@@ -1,7 +1,33 @@
 import { Pipeline, PipelineData } from 'types/api/pipeline/def';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 export const configurationVersion = '1.0';
 
+export function mockPipelineFilter(
+	key: string,
+	op: string,
+	value: string,
+): TagFilter {
+	return {
+		op: 'AND',
+		items: [
+			{
+				id: `${key}-${value}`,
+				key: {
+					key,
+					dataType: DataTypes.String,
+					type: '',
+					isColumn: false,
+					isJSON: false,
+				},
+				op,
+				value,
+			},
+		],
+	};
+}
+
 export const pipelineMockData: Array<PipelineData> = [
 	{
 		id: '4453c8b0-c0fd-42bf-bf09-7cc1b04ccdc9',
@@ -10,7 +36,7 @@ export const pipelineMockData: Array<PipelineData> = [
 		alias: 'apachecommonparser',
 		description: 'This is a desc',
 		enabled: false,
-		filter: 'attributes.source == nginx',
+		filter: mockPipelineFilter('source', '=', 'nginx'),
 		config: [
 			{
 				orderId: 1,
@@ -43,7 +69,7 @@ export const pipelineMockData: Array<PipelineData> = [
 		alias: 'movingpipelinenew',
 		description: 'This is a desc of move',
 		enabled: false,
-		filter: 'attributes.method == POST',
+		filter: mockPipelineFilter('method', '=', 'POST'),
 		config: [
 			{
 				orderId: 1,
diff --git a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
index c063c9d94d..8990ffa4e7 100644
--- a/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
+++ b/frontend/src/container/PipelinePage/tests/AddNewPipeline.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import i18n from 'ReactI18';
@@ -27,25 +28,36 @@ beforeAll(() => {
 	matchMedia();
 });
 
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
 describe('PipelinePage container test', () => {
 	it('should render AddNewPipeline section', () => {
 		const setActionType = jest.fn();
 		const selectedPipelineData = pipelineMockData[0];
 		const isActionType = 'add-pipeline';
+
 		const { asFragment } = render(
 			<MemoryRouter>
-				<Provider store={store}>
-					<I18nextProvider i18n={i18n}>
-						<AddNewPipeline
-							isActionType={isActionType}
-							setActionType={setActionType}
-							selectedPipelineData={selectedPipelineData}
-							setShowSaveButton={jest.fn()}
-							setCurrPipelineData={jest.fn()}
-							currPipelineData={pipelineMockData}
-						/>
-					</I18nextProvider>
-				</Provider>
+				<QueryClientProvider client={queryClient}>
+					<Provider store={store}>
+						<I18nextProvider i18n={i18n}>
+							<AddNewPipeline
+								isActionType={isActionType}
+								setActionType={setActionType}
+								selectedPipelineData={selectedPipelineData}
+								setShowSaveButton={jest.fn()}
+								setCurrPipelineData={jest.fn()}
+								currPipelineData={pipelineMockData}
+							/>
+						</I18nextProvider>
+					</Provider>
+				</QueryClientProvider>
 			</MemoryRouter>,
 		);
 		expect(asFragment()).toMatchSnapshot();
diff --git a/frontend/src/container/PipelinePage/tests/utils.test.ts b/frontend/src/container/PipelinePage/tests/utils.test.ts
index f433c422b9..c21e8c5a4b 100644
--- a/frontend/src/container/PipelinePage/tests/utils.test.ts
+++ b/frontend/src/container/PipelinePage/tests/utils.test.ts
@@ -1,4 +1,4 @@
-import { pipelineMockData } from '../mocks/pipeline';
+import { mockPipelineFilter, pipelineMockData } from '../mocks/pipeline';
 import {
 	processorFields,
 	processorTypes,
@@ -68,7 +68,7 @@ describe('Utils testing of Pipeline Page', () => {
 			...pipelineMockData[findRecordIndex],
 			name: 'updated name',
 			description: 'changed description',
-			filter: 'value == test',
+			filter: mockPipelineFilter('value', '=', 'test'),
 			tags: ['test'],
 		};
 		const editedData = getEditedDataSource(
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
index 35e709113e..e14264810f 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
@@ -5,6 +5,7 @@ import { MAX_FORMULAS, MAX_QUERIES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 // ** Constants
 import { memo, useEffect, useMemo } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
 
 // ** Components
 import { Formula, Query } from './components';
@@ -79,11 +80,27 @@ export const QueryBuilder = memo(function QueryBuilder({
 							/>
 						</Col>
 					))}
-					{currentQuery.builder.queryFormulas.map((formula, index) => (
-						<Col key={formula.queryName} span={24}>
-							<Formula formula={formula} index={index} />
-						</Col>
-					))}
+					{currentQuery.builder.queryFormulas.map((formula, index) => {
+						const isAllMetricDataSource = currentQuery.builder.queryData.every(
+							(query) => query.dataSource === DataSource.METRICS,
+						);
+
+						const query =
+							currentQuery.builder.queryData[index] ||
+							currentQuery.builder.queryData[0];
+
+						return (
+							<Col key={formula.queryName} span={24}>
+								<Formula
+									filterConfigs={filterConfigs}
+									query={query}
+									isAdditionalFilterEnable={isAllMetricDataSource}
+									formula={formula}
+									index={index}
+								/>
+							</Col>
+						);
+					})}
 				</Row>
 			</Col>
 
diff --git a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx
index d50a754e4c..470a8b0726 100644
--- a/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx
+++ b/frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.tsx
@@ -21,13 +21,13 @@ export const AdditionalFiltersToggler = memo(function AdditionalFiltersToggler({
 		setIsOpenedFilters((prevState) => !prevState);
 	};
 
-	const filtersTexts: ReactNode = listOfAdditionalFilter.map((str, index) => {
+	const filtersTexts: ReactNode = listOfAdditionalFilter?.map((str, index) => {
 		const isNextLast = index + 1 === listOfAdditionalFilter.length - 1;
 
 		if (index === listOfAdditionalFilter.length - 1) {
 			return (
 				<Fragment key={str}>
-					{listOfAdditionalFilter.length > 1 && 'and'}{' '}
+					{listOfAdditionalFilter?.length > 1 && 'and'}{' '}
 					<StyledLink>{str.toUpperCase()}</StyledLink>
 				</Fragment>
 			);
diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts b/frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts
index aa0cb1c475..46f10073da 100644
--- a/frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.interfaces.ts
@@ -1,3 +1,13 @@
-import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
 
-export type FormulaProps = { formula: IBuilderFormula; index: number };
+export type FormulaProps = {
+	formula: IBuilderFormula;
+	index: number;
+	query: IBuilderQuery;
+	filterConfigs: Partial<QueryBuilderProps['filterConfigs']>;
+	isAdditionalFilterEnable: boolean;
+};
diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
index 7b8e88fd12..a5cf155b2f 100644
--- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
+++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
@@ -1,22 +1,45 @@
-import { Col, Input } from 'antd';
+import { Col, Input, Row } from 'antd';
 // ** Components
-import { ListItemWrapper, ListMarker } from 'container/QueryBuilder/components';
+import {
+	FilterLabel,
+	ListItemWrapper,
+	ListMarker,
+} from 'container/QueryBuilder/components';
+import HavingFilter from 'container/QueryBuilder/filters/Formula/Having/HavingFilter';
+import LimitFilter from 'container/QueryBuilder/filters/Formula/Limit/Limit';
+import OrderByFilter from 'container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter';
 // ** Hooks
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ChangeEvent, useCallback } from 'react';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { ChangeEvent, useCallback, useMemo } from 'react';
 import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
 
+import { AdditionalFiltersToggler } from '../AdditionalFiltersToggler';
 // ** Types
 import { FormulaProps } from './Formula.interfaces';
 
-const { TextArea } = Input;
-
-export function Formula({ index, formula }: FormulaProps): JSX.Element {
+export function Formula({
+	index,
+	formula,
+	filterConfigs,
+	query,
+	isAdditionalFilterEnable,
+}: FormulaProps): JSX.Element {
 	const {
 		removeQueryBuilderEntityByIndex,
 		handleSetFormulaData,
 	} = useQueryBuilder();
 
+	const {
+		listOfAdditionalFormulaFilters,
+		handleChangeFormulaData,
+	} = useQueryOperations({
+		index,
+		query,
+		filterConfigs,
+		formula,
+	});
+
 	const handleDelete = useCallback(() => {
 		removeQueryBuilderEntityByIndex('queryFormulas', index);
 	}, [index, removeQueryBuilderEntityByIndex]);
@@ -43,6 +66,75 @@ export function Formula({ index, formula }: FormulaProps): JSX.Element {
 		[index, formula, handleSetFormulaData],
 	);
 
+	const handleChangeLimit = useCallback(
+		(value: IBuilderFormula['limit']) => {
+			handleChangeFormulaData('limit', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderFormula['having']) => {
+			handleChangeFormulaData('having', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const handleChangeOrderByFilter = useCallback(
+		(value: IBuilderFormula['orderBy']) => {
+			handleChangeFormulaData('orderBy', value);
+		},
+		[handleChangeFormulaData],
+	);
+
+	const renderAdditionalFilters = useMemo(
+		() => (
+			<>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Limit" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<LimitFilter formula={formula} onChange={handleChangeLimit} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="HAVING" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<HavingFilter formula={formula} onChange={handleChangeHavingFilter} />
+						</Col>
+					</Row>
+				</Col>
+				<Col span={11}>
+					<Row gutter={[11, 5]}>
+						<Col flex="5.93rem">
+							<FilterLabel label="Order by" />
+						</Col>
+						<Col flex="1 1 12.5rem">
+							<OrderByFilter
+								query={query}
+								formula={formula}
+								onChange={handleChangeOrderByFilter}
+							/>
+						</Col>
+					</Row>
+				</Col>
+			</>
+		),
+		[
+			formula,
+			handleChangeHavingFilter,
+			handleChangeLimit,
+			handleChangeOrderByFilter,
+			query,
+		],
+	);
+
 	return (
 		<ListItemWrapper onDelete={handleDelete}>
 			<Col span={24}>
@@ -54,7 +146,7 @@ export function Formula({ index, formula }: FormulaProps): JSX.Element {
 				/>
 			</Col>
 			<Col span={24}>
-				<TextArea
+				<Input.TextArea
 					name="expression"
 					onChange={handleChange}
 					size="middle"
@@ -71,6 +163,17 @@ export function Formula({ index, formula }: FormulaProps): JSX.Element {
 					addonBefore="Legend Format"
 				/>
 			</Col>
+			{isAdditionalFilterEnable && (
+				<Col span={24}>
+					<AdditionalFiltersToggler
+						listOfAdditionalFilter={listOfAdditionalFormulaFilters}
+					>
+						<Row gutter={[0, 11]} justify="space-between">
+							{renderAdditionalFilters}
+						</Row>
+					</AdditionalFiltersToggler>
+				</Col>
+			)}
 		</ListItemWrapper>
 	);
 }
diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
index 8da2c14335..1c1196d85c 100644
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@@ -21,7 +21,7 @@ import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryF
 import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { useQueryOperations } from 'hooks/queryBuilder/useQueryOperations';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 // ** Hooks
 import { ChangeEvent, memo, ReactNode, useCallback } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
index 62c07ae91d..c491e55b54 100644
--- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
@@ -22,6 +22,7 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 import { ExtendedSelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { transformToUpperCase } from 'utils/transformToUpperCase';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
@@ -172,6 +173,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 
 	return (
 		<AutoComplete
+			getPopupContainer={popupContainer}
 			placeholder={placeholder}
 			style={selectStyle}
 			showArrow={false}
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx
new file mode 100644
index 0000000000..008be8526d
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/Having/HavingFilter.tsx
@@ -0,0 +1,198 @@
+import { Select } from 'antd';
+import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
+import { HavingFilterTag } from 'container/QueryBuilder/components';
+import { useTagValidation } from 'hooks/queryBuilder/useTagValidation';
+import {
+	transformFromStringToHaving,
+	transformHavingToStringValue,
+} from 'lib/query/transformQueryBuilderData';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
+import { SelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { getHavingObject, isValidHavingValue } from '../../utils';
+import { HavingFilterProps, HavingTagRenderProps } from './types';
+
+function HavingFilter({ formula, onChange }: HavingFilterProps): JSX.Element {
+	const { having } = formula;
+	const [searchText, setSearchText] = useState<string>('');
+	const [localValues, setLocalValues] = useState<string[]>([]);
+	const [currentFormValue, setCurrentFormValue] = useState<HavingForm>(
+		initialHavingValues,
+	);
+	const [options, setOptions] = useState<SelectOption<string, string>[]>([]);
+
+	const { isMulti } = useTagValidation(
+		currentFormValue.op,
+		currentFormValue.value,
+	);
+
+	const columnName = formula.expression.toUpperCase();
+
+	const aggregatorOptions: SelectOption<string, string>[] = useMemo(
+		() => [{ label: columnName, value: columnName }],
+		[columnName],
+	);
+
+	const handleUpdateTag = useCallback(
+		(value: string) => {
+			const filteredValues = localValues.filter(
+				(currentValue) => currentValue !== value,
+			);
+			const having: Having[] = filteredValues.map(transformFromStringToHaving);
+
+			onChange(having);
+			setSearchText(value);
+		},
+		[localValues, onChange],
+	);
+
+	const generateOptions = useCallback(
+		(currentString: string) => {
+			const [aggregator = '', op = '', ...restValue] = currentString.split(' ');
+			let newOptions: SelectOption<string, string>[] = [];
+
+			const isAggregatorExist = columnName
+				.toLowerCase()
+				.includes(currentString.toLowerCase());
+
+			const isAggregatorChosen = aggregator === columnName;
+
+			if (isAggregatorExist || aggregator === '') {
+				newOptions = aggregatorOptions;
+			}
+
+			if ((isAggregatorChosen && op === '') || op) {
+				const filteredOperators = HAVING_OPERATORS.filter((num) =>
+					num.toLowerCase().includes(op.toLowerCase()),
+				);
+
+				newOptions = filteredOperators.map((opt) => ({
+					label: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+					value: `${columnName} ${opt} ${restValue && restValue.join(' ')}`,
+				}));
+			}
+
+			setOptions(newOptions);
+		},
+		[aggregatorOptions, columnName],
+	);
+
+	const parseSearchText = useCallback(
+		(text: string) => {
+			const { columnName, op, value } = getHavingObject(text);
+			setCurrentFormValue({ columnName, op, value });
+
+			generateOptions(text);
+		},
+		[generateOptions],
+	);
+
+	const tagRender = ({
+		label,
+		value,
+		closable,
+		disabled,
+		onClose,
+	}: HavingTagRenderProps): JSX.Element => {
+		const handleClose = (): void => {
+			onClose();
+			setSearchText('');
+		};
+		return (
+			<HavingFilterTag
+				label={label}
+				value={value}
+				closable={closable}
+				disabled={disabled}
+				onClose={handleClose}
+				onUpdate={handleUpdateTag}
+			/>
+		);
+	};
+
+	const handleSearch = (search: string): void => {
+		const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
+
+		const currentSearch = isMulti
+			? trimmedSearch
+			: trimmedSearch.split(' ').slice(0, 3).join(' ');
+
+		const isValidSearch = isValidHavingValue(currentSearch);
+
+		if (isValidSearch) {
+			setSearchText(currentSearch);
+		}
+	};
+
+	useEffect(() => {
+		setLocalValues(transformHavingToStringValue(having || []));
+	}, [having]);
+
+	useEffect(() => {
+		parseSearchText(searchText);
+	}, [searchText, parseSearchText]);
+
+	const resetChanges = (): void => {
+		setSearchText('');
+		setCurrentFormValue(initialHavingValues);
+		setOptions(aggregatorOptions);
+	};
+
+	const handleDeselect = (value: string): void => {
+		const result = localValues.filter((item) => item !== value);
+		const having: Having[] = result.map(transformFromStringToHaving);
+		onChange(having);
+		resetChanges();
+	};
+
+	const handleSelect = (currentValue: string): void => {
+		const { columnName, op, value } = getHavingObject(currentValue);
+
+		const isCompletedValue = value.every((item) => !!item);
+
+		const isClearSearch = isCompletedValue && columnName && op;
+
+		setSearchText(isClearSearch ? '' : currentValue);
+	};
+
+	const handleChange = (values: string[]): void => {
+		const having: Having[] = values.map(transformFromStringToHaving);
+
+		const isSelectable =
+			currentFormValue.value.length > 0 &&
+			currentFormValue.value.every((value) => !!value);
+
+		if (isSelectable) {
+			onChange(having);
+			resetChanges();
+		}
+	};
+
+	return (
+		<Select
+			getPopupContainer={popupContainer}
+			autoClearSearchValue={false}
+			mode="multiple"
+			onSearch={handleSearch}
+			searchValue={searchText}
+			data-testid="havingSelectFormula"
+			placeholder="Count(operation) > 5"
+			style={{ width: '100%' }}
+			tagRender={tagRender}
+			onDeselect={handleDeselect}
+			onSelect={handleSelect}
+			onChange={handleChange}
+			value={localValues}
+		>
+			{options.map((opt) => (
+				<Select.Option key={opt.value} value={opt.value} title="havingOption">
+					{opt.label}
+				</Select.Option>
+			))}
+		</Select>
+	);
+}
+
+export default HavingFilter;
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts b/frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts
new file mode 100644
index 0000000000..bf8669989b
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/Having/types.ts
@@ -0,0 +1,12 @@
+import { HavingFilterTagProps } from 'container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces';
+import {
+	Having,
+	IBuilderFormula,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export type HavingFilterProps = {
+	formula: IBuilderFormula;
+	onChange: (having: Having[]) => void;
+};
+
+export type HavingTagRenderProps = Omit<HavingFilterTagProps, 'onUpdate'>;
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx b/frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx
new file mode 100644
index 0000000000..b279ff587a
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx
@@ -0,0 +1,20 @@
+import { InputNumber } from 'antd';
+
+import { selectStyle } from '../../QueryBuilderSearch/config';
+import { handleKeyDownLimitFilter } from '../../utils';
+import { LimitFilterProps } from './types';
+
+function LimitFilter({ onChange, formula }: LimitFilterProps): JSX.Element {
+	return (
+		<InputNumber
+			min={1}
+			type="number"
+			value={formula.limit}
+			style={selectStyle}
+			onChange={onChange}
+			onKeyDown={handleKeyDownLimitFilter}
+		/>
+	);
+}
+
+export default LimitFilter;
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts b/frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts
new file mode 100644
index 0000000000..ca3a6635e7
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/Limit/types.ts
@@ -0,0 +1,6 @@
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+export interface LimitFilterProps {
+	onChange: (values: number | null) => void;
+	formula: IBuilderFormula;
+}
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx
new file mode 100644
index 0000000000..ead02a31a9
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx
@@ -0,0 +1,84 @@
+import { Select, Spin } from 'antd';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useMemo } from 'react';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { selectStyle } from '../../QueryBuilderSearch/config';
+import { OrderByProps } from './types';
+import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';
+
+function OrderByFilter({
+	formula,
+	onChange,
+	query,
+}: OrderByProps): JSX.Element {
+	const {
+		debouncedSearchText,
+		createOptions,
+		aggregationOptions,
+		handleChange,
+		handleSearchKeys,
+		selectedValue,
+		generateOptions,
+	} = useOrderByFormulaFilter({
+		query,
+		onChange,
+		formula,
+	});
+
+	const { data, isFetching } = useGetAggregateKeys(
+		{
+			aggregateAttribute: query.aggregateAttribute.key,
+			dataSource: query.dataSource,
+			aggregateOperator: query.aggregateOperator,
+			searchText: debouncedSearchText,
+		},
+		{
+			enabled: !!query.aggregateAttribute.key,
+			keepPreviousData: true,
+		},
+	);
+
+	const optionsData = useMemo(() => {
+		const keyOptions = createOptions(data?.payload?.attributeKeys || []);
+		const groupByOptions = createOptions(query.groupBy);
+		const options =
+			query.aggregateOperator === MetricAggregateOperator.NOOP
+				? keyOptions
+				: [...groupByOptions, ...aggregationOptions];
+
+		return generateOptions(options);
+	}, [
+		aggregationOptions,
+		createOptions,
+		data?.payload?.attributeKeys,
+		generateOptions,
+		query.aggregateOperator,
+		query.groupBy,
+	]);
+
+	const isDisabledSelect =
+		!query.aggregateAttribute.key ||
+		query.aggregateOperator === MetricAggregateOperator.NOOP;
+
+	return (
+		<Select
+			getPopupContainer={popupContainer}
+			mode="tags"
+			style={selectStyle}
+			onSearch={handleSearchKeys}
+			showSearch
+			disabled={isDisabledSelect}
+			showArrow={false}
+			value={selectedValue}
+			labelInValue
+			filterOption={false}
+			options={optionsData}
+			notFoundContent={isFetching ? <Spin size="small" /> : null}
+			onChange={handleChange}
+		/>
+	);
+}
+
+export default OrderByFilter;
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts
new file mode 100644
index 0000000000..0d83e4bd0e
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/types.ts
@@ -0,0 +1,12 @@
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+export interface OrderByProps {
+	formula: IBuilderFormula;
+	query: IBuilderQuery;
+	onChange: (value: IBuilderFormula['orderBy']) => void;
+}
+
+export type IOrderByFormulaFilterProps = OrderByProps;
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx
new file mode 100644
index 0000000000..3ad52da55f
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx
@@ -0,0 +1,127 @@
+import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import useDebounce from 'hooks/useDebounce';
+import { IOption } from 'hooks/useResourceAttribute/types';
+import isEqual from 'lodash-es/isEqual';
+import uniqWith from 'lodash-es/uniqWith';
+import { parse } from 'papaparse';
+import { useMemo, useState } from 'react';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
+
+import { ORDERBY_FILTERS } from '../../OrderByFilter/config';
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { UseOrderByFilterResult } from '../../OrderByFilter/useOrderByFilter';
+import {
+	getLabelFromValue,
+	mapLabelValuePairs,
+	orderByValueDelimiter,
+} from '../../OrderByFilter/utils';
+import { getRemoveOrderFromValue } from '../../QueryBuilderSearch/utils';
+import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
+import { IOrderByFormulaFilterProps } from './types';
+import { transformToOrderByStringValuesByFormula } from './utils';
+
+export const useOrderByFormulaFilter = ({
+	onChange,
+	formula,
+}: IOrderByFormulaFilterProps): UseOrderByFilterResult => {
+	const [searchText, setSearchText] = useState<string>('');
+
+	const debouncedSearchText = useDebounce(searchText, DEBOUNCE_DELAY);
+
+	const handleSearchKeys = (searchText: string): void =>
+		setSearchText(searchText);
+
+	const handleChange = (values: IOption[]): void => {
+		const validResult = getValidOrderByResult(values);
+		const result = getUniqueOrderByValues(validResult);
+
+		const orderByValues: OrderByPayload[] = result.map((item) => {
+			const match = parse(item.value, { delimiter: orderByValueDelimiter });
+
+			if (!match) {
+				return {
+					columnName: item.value,
+					order: ORDERBY_FILTERS.ASC,
+				};
+			}
+
+			const [columnName, order] = match.data.flat() as string[];
+
+			const columnNameValue =
+				columnName === SIGNOZ_VALUE ? SIGNOZ_VALUE : columnName;
+
+			const orderValue = order ?? ORDERBY_FILTERS.ASC;
+
+			return {
+				columnName: columnNameValue,
+				order: orderValue,
+			};
+		});
+
+		setSearchText('');
+		onChange(orderByValues);
+	};
+
+	const aggregationOptions = [
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.ASC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+		},
+		{
+			label: `${formula.expression} ${ORDERBY_FILTERS.DESC}`,
+			value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+		},
+	];
+
+	const selectedValue = transformToOrderByStringValuesByFormula(formula);
+
+	const createOptions = (data: BaseAutocompleteData[]): IOption[] =>
+		mapLabelValuePairs(data).flat();
+
+	const customValue: IOption[] = useMemo(() => {
+		if (!searchText) return [];
+
+		return [
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.ASC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+			},
+			{
+				label: `${searchText} ${ORDERBY_FILTERS.DESC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
+			},
+		];
+	}, [searchText]);
+
+	const generateOptions = (options: IOption[]): IOption[] => {
+		const currentCustomValue = options.find(
+			(keyOption) =>
+				getRemoveOrderFromValue(keyOption.value) === debouncedSearchText,
+		)
+			? []
+			: customValue;
+
+		const result = [...currentCustomValue, ...options];
+
+		const uniqResult = uniqWith(result, isEqual);
+
+		return uniqResult.filter(
+			(option) =>
+				!getLabelFromValue(selectedValue).includes(
+					getRemoveOrderFromValue(option.value),
+				),
+		);
+	};
+
+	return {
+		searchText,
+		debouncedSearchText,
+		selectedValue,
+		aggregationOptions,
+		createOptions,
+		handleChange,
+		handleSearchKeys,
+		generateOptions,
+	};
+};
diff --git a/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts
new file mode 100644
index 0000000000..afe056edec
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/Formula/OrderBy/utils.ts
@@ -0,0 +1,26 @@
+import { IOption } from 'hooks/useResourceAttribute/types';
+import { IBuilderFormula } from 'types/api/queryBuilder/queryBuilderData';
+
+import { SIGNOZ_VALUE } from '../../OrderByFilter/constants';
+import { orderByValueDelimiter } from '../../OrderByFilter/utils';
+
+export const transformToOrderByStringValuesByFormula = (
+	formula: IBuilderFormula,
+): IOption[] => {
+	const prepareSelectedValue: IOption[] =
+		formula?.orderBy?.map((item) => {
+			if (item.columnName === SIGNOZ_VALUE) {
+				return {
+					label: `${formula.expression} ${item.order}`,
+					value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+				};
+			}
+
+			return {
+				label: `${item.columnName} ${item.order}`,
+				value: `${item.columnName}${orderByValueDelimiter}${item.order}`,
+			};
+		}) || [];
+
+	return prepareSelectedValue;
+};
diff --git a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
index 5be89bcf2b..905684de89 100644
--- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
@@ -18,6 +18,7 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { SelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import { GroupByFilterProps } from './GroupByFilter.interfaces';
@@ -169,6 +170,7 @@ export const GroupByFilter = memo(function GroupByFilter({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}
diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
index 7fc298aeb0..4f638496f4 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
@@ -1,7 +1,6 @@
 import { Select } from 'antd';
 // ** Constants
 import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
-import { HAVING_FILTER_REGEXP } from 'constants/regExp';
 import { HavingFilterTag } from 'container/QueryBuilder/components';
 import { HavingTagRenderProps } from 'container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.interfaces';
 // ** Hooks
@@ -16,12 +15,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Having, HavingForm } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
+import { popupContainer } from 'utils/selectPopupContainer';
 
+import { getHavingObject, isValidHavingValue } from '../utils';
 // ** Types
 import { HavingFilterProps } from './HavingFilter.interfaces';
 
-const { Option } = Select;
-
 export function HavingFilter({
 	query,
 	onChange,
@@ -59,13 +58,6 @@ export function HavingFilter({
 		[columnName],
 	);
 
-	const getHavingObject = useCallback((currentSearch: string): HavingForm => {
-		const textArr = currentSearch.split(' ');
-		const [columnName = '', op = '', ...value] = textArr;
-
-		return { columnName, op, value };
-	}, []);
-
 	const generateOptions = useCallback(
 		(search: string): void => {
 			const [aggregator = '', op = '', ...restValue] = search.split(' ');
@@ -97,19 +89,6 @@ export function HavingFilter({
 		[columnName, aggregatorOptions],
 	);
 
-	const isValidHavingValue = useCallback(
-		(search: string): boolean => {
-			const values = getHavingObject(search).value.join(' ');
-
-			if (values) {
-				return HAVING_FILTER_REGEXP.test(values);
-			}
-
-			return true;
-		},
-		[getHavingObject],
-	);
-
 	const handleSearch = useCallback(
 		(search: string): void => {
 			const trimmedSearch = search.replace(/\s\s+/g, ' ').trimStart();
@@ -124,7 +103,7 @@ export function HavingFilter({
 				setSearchText(currentSearch);
 			}
 		},
-		[isMulti, isValidHavingValue],
+		[isMulti],
 	);
 
 	const resetChanges = useCallback((): void => {
@@ -199,7 +178,7 @@ export function HavingFilter({
 
 			generateOptions(text);
 		},
-		[generateOptions, getHavingObject],
+		[generateOptions],
 	);
 
 	const handleDeselect = (value: string): void => {
@@ -217,13 +196,11 @@ export function HavingFilter({
 		setLocalValues(transformHavingToStringValue(having));
 	}, [having]);
 
-	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
-	);
+	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			autoClearSearchValue={false}
 			mode="multiple"
 			onSearch={handleSearch}
@@ -240,9 +217,9 @@ export function HavingFilter({
 			onSelect={handleSelect}
 		>
 			{options.map((opt) => (
-				<Option key={opt.value} value={opt.value} title="havingOption">
+				<Select.Option key={opt.value} value={opt.value} title="havingOption">
 					{opt.label}
-				</Option>
+				</Select.Option>
 			))}
 		</Select>
 	);
diff --git a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx
index 360b029a03..081aed365d 100644
--- a/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/LimitFilter/LimitFilter.tsx
@@ -1,30 +1,12 @@
 import { InputNumber } from 'antd';
-import { useMemo } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
+import { handleKeyDownLimitFilter } from '../utils';
 
 function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
-	const handleKeyDown = (event: {
-		keyCode: number;
-		which: number;
-		preventDefault: () => void;
-	}): void => {
-		const keyCode = event.keyCode || event.which;
-		const isBackspace = keyCode === 8;
-		const isNumeric =
-			(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
-
-		if (!isNumeric && !isBackspace) {
-			event.preventDefault();
-		}
-	};
-
-	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
-	);
+	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	const isDisabled = isMetricsDataSource && !query.aggregateAttribute.key;
 
@@ -36,7 +18,7 @@ function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
 			style={selectStyle}
 			disabled={isDisabled}
 			onChange={onChange}
-			onKeyDown={handleKeyDown}
+			onKeyDown={handleKeyDownLimitFilter}
 		/>
 	);
 }
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts
index e817530405..7a1f9b53ae 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces.ts
@@ -9,9 +9,9 @@ export type OrderByFilterProps = {
 };
 
 export type OrderByFilterValue = {
-	disabled: boolean | undefined;
+	disabled?: boolean;
 	key: string;
 	label: string;
-	title: string | undefined;
+	title?: string;
 	value: string;
 };
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
index 4c1d42bdbc..2f707ec7a1 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
@@ -2,6 +2,7 @@ import { Select, Spin } from 'antd';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useMemo } from 'react';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { selectStyle } from '../QueryBuilderSearch/config';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
@@ -52,20 +53,15 @@ export function OrderByFilter({
 		query.groupBy,
 	]);
 
-	const isDisabledSelect = useMemo(
-		() =>
-			!query.aggregateAttribute.key ||
-			query.aggregateOperator === MetricAggregateOperator.NOOP,
-		[query.aggregateAttribute.key, query.aggregateOperator],
-	);
+	const isDisabledSelect =
+		!query.aggregateAttribute.key ||
+		query.aggregateOperator === MetricAggregateOperator.NOOP;
 
-	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
-	);
+	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			mode="tags"
 			style={selectStyle}
 			onSearch={handleSearchKeys}
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/config.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/config.ts
index 9e4b0c9a1b..c948bab59a 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/config.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/config.ts
@@ -1,4 +1,4 @@
-export const FILTERS = {
+export const ORDERBY_FILTERS = {
 	ASC: 'asc',
 	DESC: 'desc',
 };
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts
index 552b71406f..2ddda6c31b 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts
@@ -8,18 +8,18 @@ import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteRe
 import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
 
 import { getRemoveOrderFromValue } from '../QueryBuilderSearch/utils';
-import { FILTERS } from './config';
+import { getUniqueOrderByValues, getValidOrderByResult } from '../utils';
+import { ORDERBY_FILTERS } from './config';
 import { SIGNOZ_VALUE } from './constants';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
 import {
 	getLabelFromValue,
 	mapLabelValuePairs,
 	orderByValueDelimiter,
-	splitOrderByFromString,
 	transformToOrderByStringValues,
 } from './utils';
 
-type UseOrderByFilterResult = {
+export type UseOrderByFilterResult = {
 	searchText: string;
 	debouncedSearchText: string;
 	selectedValue: IOption[];
@@ -43,43 +43,17 @@ export const useOrderByFilter = ({
 		[],
 	);
 
-	const getUniqValues = useCallback((values: IOption[]): IOption[] => {
-		const modifiedValues = values.map((item) => {
-			const match = parse(item.value, { delimiter: orderByValueDelimiter });
-			if (!match) return { label: item.label, value: item.value };
-			// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
-			const [_, order] = match.data.flat() as string[];
-			if (order)
-				return {
-					label: item.label,
-					value: item.value,
-				};
-
-			return {
-				label: `${item.value} ${FILTERS.ASC}`,
-				value: `${item.value}${orderByValueDelimiter}${FILTERS.ASC}`,
-			};
-		});
-
-		return uniqWith(
-			modifiedValues,
-			(current, next) =>
-				getRemoveOrderFromValue(current.value) ===
-				getRemoveOrderFromValue(next.value),
-		);
-	}, []);
-
 	const customValue: IOption[] = useMemo(() => {
 		if (!searchText) return [];
 
 		return [
 			{
-				label: `${searchText} ${FILTERS.ASC}`,
-				value: `${searchText}${orderByValueDelimiter}${FILTERS.ASC}`,
+				label: `${searchText} ${ORDERBY_FILTERS.ASC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
 			},
 			{
-				label: `${searchText} ${FILTERS.DESC}`,
-				value: `${searchText}${orderByValueDelimiter}${FILTERS.DESC}`,
+				label: `${searchText} ${ORDERBY_FILTERS.DESC}`,
+				value: `${searchText}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
 			},
 		];
 	}, [searchText]);
@@ -111,34 +85,9 @@ export const useOrderByFilter = ({
 		[customValue, debouncedSearchText, selectedValue],
 	);
 
-	const getValidResult = useCallback(
-		(result: IOption[]): IOption[] =>
-			result.reduce<IOption[]>((acc, item) => {
-				if (item.value === FILTERS.ASC || item.value === FILTERS.DESC) return acc;
-
-				if (item.value.includes(FILTERS.ASC) || item.value.includes(FILTERS.DESC)) {
-					const splittedOrderBy = splitOrderByFromString(item.value);
-
-					if (splittedOrderBy) {
-						acc.push({
-							label: `${splittedOrderBy.columnName} ${splittedOrderBy.order}`,
-							value: `${splittedOrderBy.columnName}${orderByValueDelimiter}${splittedOrderBy.order}`,
-						});
-
-						return acc;
-					}
-				}
-
-				acc.push(item);
-
-				return acc;
-			}, []),
-		[],
-	);
-
 	const handleChange = (values: IOption[]): void => {
-		const validResult = getValidResult(values);
-		const result = getUniqValues(validResult);
+		const validResult = getValidOrderByResult(values);
+		const result = getUniqueOrderByValues(validResult);
 
 		const orderByValues: OrderByPayload[] = result.map((item) => {
 			const match = parse(item.value, { delimiter: orderByValueDelimiter });
@@ -175,12 +124,12 @@ export const useOrderByFilter = ({
 	const aggregationOptions = useMemo(
 		() => [
 			{
-				label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) ${FILTERS.ASC}`,
-				value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${FILTERS.ASC}`,
+				label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) ${ORDERBY_FILTERS.ASC}`,
+				value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
 			},
 			{
-				label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) ${FILTERS.DESC}`,
-				value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${FILTERS.DESC}`,
+				label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) ${ORDERBY_FILTERS.DESC}`,
+				value: `${SIGNOZ_VALUE}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
 			},
 		],
 		[query],
diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts
index 370a82170c..a3b385291c 100644
--- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts
+++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts
@@ -6,7 +6,7 @@ import {
 	OrderByPayload,
 } from 'types/api/queryBuilder/queryBuilderData';
 
-import { FILTERS } from './config';
+import { ORDERBY_FILTERS } from './config';
 import { SIGNOZ_VALUE } from './constants';
 
 export const orderByValueDelimiter = '|';
@@ -38,12 +38,12 @@ export function mapLabelValuePairs(
 		const value = item.key;
 		return [
 			{
-				label: `${value} ${FILTERS.ASC}`,
-				value: `${value}${orderByValueDelimiter}${FILTERS.ASC}`,
+				label: `${value} ${ORDERBY_FILTERS.ASC}`,
+				value: `${value}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
 			},
 			{
-				label: `${value} ${FILTERS.DESC}`,
-				value: `${value}${orderByValueDelimiter}${FILTERS.DESC}`,
+				label: `${value} ${ORDERBY_FILTERS.DESC}`,
+				value: `${value}${orderByValueDelimiter}${ORDERBY_FILTERS.DESC}`,
 			},
 		];
 	});
@@ -68,7 +68,7 @@ export function checkIfKeyPresent(str: string, valueToCheck: string): boolean {
 
 export function splitOrderByFromString(str: string): OrderByPayload | null {
 	const splittedStr = str.split(' ');
-	const order = splittedStr.pop() || FILTERS.ASC;
+	const order = splittedStr.pop() || ORDERBY_FILTERS.ASC;
 	const columnName = splittedStr.join(' ');
 
 	if (!columnName) return null;
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 3b78eae7bd..4b2c4fe6b3 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -23,6 +23,7 @@ import {
 	TagFilter,
 } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import { selectStyle } from './config';
@@ -41,6 +42,7 @@ function QueryBuilderSearch({
 	onChange,
 	whereClauseConfig,
 	className,
+	placeholder,
 }: QueryBuilderSearchProps): JSX.Element {
 	const {
 		updateTag,
@@ -184,13 +186,14 @@ function QueryBuilderSearch({
 
 	return (
 		<Select
+			getPopupContainer={popupContainer}
 			virtual
 			showSearch
 			tagRender={onTagRender}
 			filterOption={false}
 			autoClearSearchValue={false}
 			mode="multiple"
-			placeholder={PLACEHOLDER}
+			placeholder={placeholder}
 			value={queryTags}
 			searchValue={searchValue}
 			className={className}
@@ -218,11 +221,13 @@ interface QueryBuilderSearchProps {
 	onChange: (value: TagFilter) => void;
 	whereClauseConfig?: WhereClauseConfig;
 	className?: string;
+	placeholder?: string;
 }
 
 QueryBuilderSearch.defaultProps = {
 	whereClauseConfig: undefined,
 	className: '',
+	placeholder: PLACEHOLDER,
 };
 
 export interface CustomTagProps {
diff --git a/frontend/src/container/QueryBuilder/filters/utils.ts b/frontend/src/container/QueryBuilder/filters/utils.ts
new file mode 100644
index 0000000000..7e4c12d9d0
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/filters/utils.ts
@@ -0,0 +1,94 @@
+import { HAVING_FILTER_REGEXP } from 'constants/regExp';
+import { IOption } from 'hooks/useResourceAttribute/types';
+import uniqWith from 'lodash-es/unionWith';
+import { parse } from 'papaparse';
+import { HavingForm } from 'types/api/queryBuilder/queryBuilderData';
+
+import { ORDERBY_FILTERS } from './OrderByFilter/config';
+import {
+	orderByValueDelimiter,
+	splitOrderByFromString,
+} from './OrderByFilter/utils';
+import { getRemoveOrderFromValue } from './QueryBuilderSearch/utils';
+
+export const handleKeyDownLimitFilter: React.KeyboardEventHandler<HTMLInputElement> = (
+	event,
+): void => {
+	const keyCode = event.keyCode || event.which;
+	const isBackspace = keyCode === 8;
+	const isNumeric =
+		(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
+
+	if (!isNumeric && !isBackspace) {
+		event.preventDefault();
+	}
+};
+
+export const getHavingObject = (currentSearch: string): HavingForm => {
+	const textArr = currentSearch.split(' ');
+	const [columnName = '', op = '', ...value] = textArr;
+
+	return { columnName, op, value };
+};
+
+export const isValidHavingValue = (search: string): boolean => {
+	const values = getHavingObject(search).value.join(' ');
+
+	if (values) {
+		return HAVING_FILTER_REGEXP.test(values);
+	}
+
+	return true;
+};
+
+export const getUniqueOrderByValues = (values: IOption[]): IOption[] => {
+	const modifiedValues = values.map((item) => {
+		const match = parse(item.value, { delimiter: orderByValueDelimiter });
+		if (!match) return { label: item.label, value: item.value };
+		// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars
+		const [_, order] = match.data.flat() as string[];
+		if (order)
+			return {
+				label: item.label,
+				value: item.value,
+			};
+
+		return {
+			label: `${item.value} ${ORDERBY_FILTERS.ASC}`,
+			value: `${item.value}${orderByValueDelimiter}${ORDERBY_FILTERS.ASC}`,
+		};
+	});
+
+	return uniqWith(
+		modifiedValues,
+		(current, next) =>
+			getRemoveOrderFromValue(current.value) ===
+			getRemoveOrderFromValue(next.value),
+	);
+};
+
+export const getValidOrderByResult = (result: IOption[]): IOption[] =>
+	result.reduce<IOption[]>((acc, item) => {
+		if (item.value === ORDERBY_FILTERS.ASC || item.value === ORDERBY_FILTERS.DESC)
+			return acc;
+
+		if (
+			item.value.includes(ORDERBY_FILTERS.ASC) ||
+			item.value.includes(ORDERBY_FILTERS.DESC)
+		) {
+			const splittedOrderBy = splitOrderByFromString(item.value);
+
+			if (splittedOrderBy) {
+				acc.push({
+					label: `${splittedOrderBy.columnName} ${splittedOrderBy.order}`,
+					value: `${splittedOrderBy.columnName}${orderByValueDelimiter}${splittedOrderBy.order}`,
+				});
+
+				return acc;
+			}
+		}
+
+		acc.push(item);
+
+		return acc;
+	}, []);
diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
index 1be1dd3486..a61a0ce0ee 100644
--- a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
+++ b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
@@ -5,6 +5,7 @@ import useResourceAttribute, {
 } from 'hooks/useResourceAttribute';
 import { convertMetricKeyToTrace } from 'hooks/useResourceAttribute/utils';
 import { ReactNode, useMemo } from 'react';
+import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import QueryChip from './components/QueryChip';
@@ -44,6 +45,7 @@ function ResourceAttributesFilter({
 				))}
 			</div>
 			<Select
+				getPopupContainer={popupContainer}
 				placeholder={!isEmpty && 'Search and Filter based on resource attributes.'}
 				onChange={handleChange}
 				bordered={false}
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index f1305f3d19..4121c93ac0 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -71,7 +71,7 @@ const menuItems: SidebarMenu[] = [
 export const NEW_ROUTES_MENU_ITEM_KEY_MAP = {
 	[ROUTES.TRACES_EXPLORER]: ROUTES.TRACE,
 	[ROUTES.TRACE_EXPLORER]: ROUTES.TRACE,
-	[ROUTES.LOGS_EXPLORER]: ROUTES.LOGS,
+	[ROUTES.LOGS_EXPLORER]: ROUTES.LOGS_EXPLORER,
 };
 
 export default menuItems;
diff --git a/frontend/src/container/TopNav/AutoRefresh/index.tsx b/frontend/src/container/TopNav/AutoRefresh/index.tsx
index e83276e983..11a22e700f 100644
--- a/frontend/src/container/TopNav/AutoRefresh/index.tsx
+++ b/frontend/src/container/TopNav/AutoRefresh/index.tsx
@@ -26,6 +26,7 @@ import {
 	UPDATE_TIME_INTERVAL,
 } from 'types/actions/globalTime';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { getMinMax, options } from './config';
 import { ButtonContainer, Container } from './styles';
@@ -142,6 +143,7 @@ function AutoRefresh({ disabled = false }: AutoRefreshProps): JSX.Element {
 
 	return (
 		<Popover
+			getPopupContainer={popupContainer}
 			placement="bottomLeft"
 			trigger={['click']}
 			content={
diff --git a/frontend/src/container/TopNav/DateTimeSelection/config.ts b/frontend/src/container/TopNav/DateTimeSelection/config.ts
index 1b4a3cdfb5..2aaf3e1c19 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelection/config.ts
@@ -53,10 +53,10 @@ export const ServiceMapOptions: Option[] = [
 
 export const getDefaultOption = (route: string): Time => {
 	if (route === ROUTES.SERVICE_MAP) {
-		return ServiceMapOptions[0].value;
+		return ServiceMapOptions[2].value;
 	}
 	if (route === ROUTES.APPLICATION) {
-		return Options[0].value;
+		return Options[2].value;
 	}
 	return Options[2].value;
 };
diff --git a/frontend/src/container/TopNav/DateTimeSelection/index.tsx b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
index 2fc05ecca4..742409e455 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelection/index.tsx
@@ -17,6 +17,7 @@ import { GlobalTimeLoading, UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import AutoRefresh from '../AutoRefresh';
 import CustomDateTimeModal, { DateTimeRangeType } from '../CustomDateTimeModal';
@@ -271,6 +272,7 @@ function DateTimeSelection({
 			>
 				<FormContainer>
 					<DefaultSelect
+						getPopupContainer={popupContainer}
 						onSelect={(value: unknown): void => onSelectHandler(value as Time)}
 						value={getInputLabel(
 							dayjs(minTime / 1000000),
diff --git a/frontend/src/container/Trace/TraceGraphFilter/index.tsx b/frontend/src/container/Trace/TraceGraphFilter/index.tsx
index bc13641d02..950a993e66 100644
--- a/frontend/src/container/Trace/TraceGraphFilter/index.tsx
+++ b/frontend/src/container/Trace/TraceGraphFilter/index.tsx
@@ -6,6 +6,7 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { TraceReducer } from 'types/reducer/trace';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import { functions } from './config';
 import { SelectComponent } from './styles';
@@ -63,6 +64,7 @@ function TraceGraphFilter(): JSX.Element {
 			<label htmlFor="selectedFunction">Function</label>
 
 			<SelectComponent
+				getPopupContainer={popupContainer}
 				dropdownMatchSelectWidth
 				data-testid="selectedFunction"
 				id="selectedFunction"
@@ -78,6 +80,7 @@ function TraceGraphFilter(): JSX.Element {
 
 			<label htmlFor="selectedGroupBy">Group By</label>
 			<AutoComplete
+				getPopupContainer={popupContainer}
 				dropdownMatchSelectWidth
 				id="selectedGroupBy"
 				data-testid="selectedGroupBy"
diff --git a/frontend/src/hooks/queryBuilder/useQueryOperations.ts b/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts
similarity index 79%
rename from frontend/src/hooks/queryBuilder/useQueryOperations.ts
rename to frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts
index 3de26f1f94..e87d7007a7 100644
--- a/frontend/src/hooks/queryBuilder/useQueryOperations.ts
+++ b/frontend/src/hooks/queryBuilder/useQueryBuilderOperations.ts
@@ -1,7 +1,8 @@
 import {
 	initialAutocompleteData,
 	initialQueryBuilderFormValuesMap,
-	mapOfFilters,
+	mapOfFormulaToFilters,
+	mapOfQueryFilters,
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -9,8 +10,12 @@ import { getOperatorsBySourceAndPanelType } from 'lib/newQueryBuilder/getOperato
 import { findDataTypeOfOperator } from 'lib/query/findDataTypeOfOperator';
 import { useCallback, useEffect, useState } from 'react';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	HandleChangeFormulaData,
 	HandleChangeQueryData,
 	UseQueryOperations,
 } from 'types/common/operations.types';
@@ -21,54 +26,31 @@ export const useQueryOperations: UseQueryOperations = ({
 	query,
 	index,
 	filterConfigs,
+	formula,
 }) => {
 	const {
 		handleSetQueryData,
+		handleSetFormulaData,
 		removeQueryBuilderEntityByIndex,
 		panelType,
 		initialDataSource,
 		currentQuery,
 	} = useQueryBuilder();
+
 	const [operators, setOperators] = useState<SelectOption<string, string>[]>([]);
-	const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
-		string[]
-	>([]);
 
 	const { dataSource, aggregateOperator } = query;
 
-	const handleChangeOperator = useCallback(
-		(value: string): void => {
-			const aggregateDataType: BaseAutocompleteData['dataType'] =
-				query.aggregateAttribute.dataType;
-
-			const typeOfValue = findDataTypeOfOperator(value);
-			const shouldResetAggregateAttribute =
-				(aggregateDataType === 'string' || aggregateDataType === 'bool') &&
-				typeOfValue === 'number';
-
-			const newQuery: IBuilderQuery = {
-				...query,
-				aggregateOperator: value,
-				having: [],
-				limit: null,
-				...(shouldResetAggregateAttribute
-					? { aggregateAttribute: initialAutocompleteData }
-					: {}),
-			};
-
-			handleSetQueryData(index, newQuery);
-		},
-		[index, query, handleSetQueryData],
-	);
-
 	const getNewListOfAdditionalFilters = useCallback(
-		(dataSource: DataSource): string[] => {
+		(dataSource: DataSource, isQuery: boolean): string[] => {
 			const additionalFiltersKeys: (keyof Pick<
 				IBuilderQuery,
 				'orderBy' | 'limit' | 'having' | 'stepInterval'
 			>)[] = ['having', 'limit', 'orderBy', 'stepInterval'];
 
-			const result: string[] = mapOfFilters[dataSource].reduce<string[]>(
+			const mapsOfFilters = isQuery ? mapOfQueryFilters : mapOfFormulaToFilters;
+
+			const result: string[] = mapsOfFilters[dataSource]?.reduce<string[]>(
 				(acc, item) => {
 					if (
 						filterConfigs &&
@@ -91,6 +73,41 @@ export const useQueryOperations: UseQueryOperations = ({
 		[filterConfigs],
 	);
 
+	const [listOfAdditionalFilters, setListOfAdditionalFilters] = useState<
+		string[]
+	>(getNewListOfAdditionalFilters(dataSource, true));
+
+	const [
+		listOfAdditionalFormulaFilters,
+		setListOfAdditionalFormulaFilters,
+	] = useState<string[]>(getNewListOfAdditionalFilters(dataSource, false));
+
+	const handleChangeOperator = useCallback(
+		(value: string): void => {
+			const aggregateDataType: BaseAutocompleteData['dataType'] =
+				query.aggregateAttribute.dataType;
+
+			const typeOfValue = findDataTypeOfOperator(value);
+
+			const shouldResetAggregateAttribute =
+				(aggregateDataType === 'string' || aggregateDataType === 'bool') &&
+				typeOfValue === 'number';
+
+			const newQuery: IBuilderQuery = {
+				...query,
+				aggregateOperator: value,
+				having: [],
+				limit: null,
+				...(shouldResetAggregateAttribute
+					? { aggregateAttribute: initialAutocompleteData }
+					: {}),
+			};
+
+			handleSetQueryData(index, newQuery);
+		},
+		[index, query, handleSetQueryData],
+	);
+
 	const handleChangeAggregatorAttribute = useCallback(
 		(value: BaseAutocompleteData): void => {
 			const newQuery: IBuilderQuery = {
@@ -148,6 +165,18 @@ export const useQueryOperations: UseQueryOperations = ({
 		[query, index, handleSetQueryData],
 	);
 
+	const handleChangeFormulaData: HandleChangeFormulaData = useCallback(
+		(key, value) => {
+			const newFormula: IBuilderFormula = {
+				...(formula || ({} as IBuilderFormula)),
+				[key]: value,
+			};
+
+			handleSetFormulaData(index, newFormula);
+		},
+		[formula, handleSetFormulaData, index],
+	);
+
 	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
 
 	const isTracePanelType = panelType === PANEL_TYPES.TRACE;
@@ -166,11 +195,17 @@ export const useQueryOperations: UseQueryOperations = ({
 	}, [dataSource, initialDataSource, panelType, operators]);
 
 	useEffect(() => {
-		const additionalFilters = getNewListOfAdditionalFilters(dataSource);
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, true);
 
 		setListOfAdditionalFilters(additionalFilters);
 	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
 
+	useEffect(() => {
+		const additionalFilters = getNewListOfAdditionalFilters(dataSource, false);
+
+		setListOfAdditionalFormulaFilters(additionalFilters);
+	}, [dataSource, aggregateOperator, getNewListOfAdditionalFilters]);
+
 	return {
 		isTracePanelType,
 		isMetricsDataSource,
@@ -181,5 +216,7 @@ export const useQueryOperations: UseQueryOperations = ({
 		handleChangeDataSource,
 		handleDeleteQuery,
 		handleChangeQueryData,
+		listOfAdditionalFormulaFilters,
+		handleChangeFormulaData,
 	};
 };
diff --git a/frontend/src/hooks/queryBuilder/useTag.ts b/frontend/src/hooks/queryBuilder/useTag.ts
index 04f2367971..268a01e0c6 100644
--- a/frontend/src/hooks/queryBuilder/useTag.ts
+++ b/frontend/src/hooks/queryBuilder/useTag.ts
@@ -7,10 +7,32 @@ import {
 import { unparse } from 'papaparse';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderQuery,
+	TagFilter,
+} from 'types/api/queryBuilder/queryBuilderData';
 
 import { WhereClauseConfig } from './useAutoComplete';
 
+/**
+ * Helper for formatting a TagFilter object into filter item strings
+ * @param {TagFilter} filters - query filter object to be converted
+ * @returns {string[]} An array of formatted conditions. Eg: `["service = web", "severity_text = INFO"]`)
+ */
+export function queryFilterTags(filter: TagFilter): string[] {
+	return (filter?.items || []).map((ele) => {
+		if (isInNInOperator(getOperatorFromValue(ele.op))) {
+			try {
+				const csvString = unparse([ele.value]);
+				return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${csvString}`;
+			} catch {
+				return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${ele.value}`;
+			}
+		}
+		return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${ele.value}`;
+	});
+}
+
 type IUseTag = {
 	handleAddTag: (value: string) => void;
 	handleClearTag: (value: string) => void;
@@ -33,21 +55,9 @@ export const useTag = (
 	setSearchKey: (value: string) => void,
 	whereClauseConfig?: WhereClauseConfig,
 ): IUseTag => {
-	const initTagsData = useMemo(
-		() =>
-			(query?.filters?.items || []).map((ele) => {
-				if (isInNInOperator(getOperatorFromValue(ele.op))) {
-					try {
-						const csvString = unparse([ele.value]);
-						return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${csvString}`;
-					} catch {
-						return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${ele.value}`;
-					}
-				}
-				return `${ele.key?.key} ${getOperatorFromValue(ele.op)} ${ele.value}`;
-			}),
-		[query.filters],
-	);
+	const initTagsData = useMemo(() => queryFilterTags(query?.filters), [
+		query?.filters,
+	]);
 
 	const [tags, setTags] = useState<string[]>(initTagsData);
 
diff --git a/frontend/src/index.html.ejs b/frontend/src/index.html.ejs
index 8fe2ea80bb..abfd8258bb 100644
--- a/frontend/src/index.html.ejs
+++ b/frontend/src/index.html.ejs
@@ -1,170 +1,189 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta
-			http-equiv="Cache-Control"
-			content="no-cache, no-store, must-revalidate, max-age: 0"
-		/>
-		<meta http-equiv="Pragma" content="no-cache" />
-		<meta http-equiv="Expires" content="0" />
-
-		<title data-react-helmet="true">
-			Open source Observability platform | SigNoz
-		</title>
-		<meta
-			data-react-helmet="true"
-			property="og:title"
-			content="Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:description"
-			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
-		/>
-		<meta
-			data-react-helmet="true"
-			property="og:image"
-			content="https://signoz.io/img/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image"
-			content="https://signoz.io/img/signoz-hero-image.webp"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:image:alt"
-			content="Image for Open source Observability platform | SigNoz"
-		/>
-		<meta
-			data-react-helmet="true"
-			name="twitter:card"
-			content="summary_large_image"
-		/>
-		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
-		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css?family=Fira+Code"
-			rel="stylesheet"
-		/>
-	</head>
-	<body>
-		<noscript>You need to enable JavaScript to run this app.</noscript>
-		<div id="root"></div>
-
-		<script>
-			//Set your APP_ID
-			const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
-
-			(function () {
-				var w = window;
-				var ic = w.Intercom;
-				if (typeof ic === 'function') {
-					ic('reattach_activator');
-					ic('update', w.intercomSettings);
-				} else {
-					var d = document;
-					var i = function () {
-						i.c(arguments);
-					};
-					i.q = [];
-					i.c = function (args) {
-						i.q.push(args);
-					};
-					w.Intercom = i;
-					var l = function () {
-						var s = d.createElement('script');
-						s.type = 'text/javascript';
-						s.async = true;
-						s.src = 'https://widget.intercom.io/widget/' + APP_ID;
-						var x = d.getElementsByTagName('script')[0];
-						x.parentNode.insertBefore(s, x);
-					};
-					if (document.readyState === 'complete') {
-						l();
-					} else if (w.attachEvent) {
-						w.attachEvent('onload', l);
-					} else {
-						w.addEventListener('load', l, false);
-					}
-				}
-			})();
-		</script>
-
-		<script>
-			//Set your SEGMENT_ID
-			const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';
-
-			!(function () {
-				var analytics = (window.analytics = window.analytics || []);
-				if (!analytics.initialize)
-					if (analytics.invoked)
-						window.console &&
-							console.error &&
-							console.error('Segment snippet included twice.');
-					else {
-						analytics.invoked = !0;
-						analytics.methods = [
-							'trackSubmit',
-							'trackClick',
-							'trackLink',
-							'trackForm',
-							'pageview',
-							'identify',
-							'reset',
-							'group',
-							'track',
-							'ready',
-							'alias',
-							'debug',
-							'page',
-							'once',
-							'off',
-							'on',
-							'addSourceMiddleware',
-							'addIntegrationMiddleware',
-							'setAnonymousId',
-							'addDestinationMiddleware',
-						];
-						analytics.factory = function (e) {
-							return function () {
-								if (window.analytics.initialized)
-									return window.analytics[e].apply(window.analytics, arguments);
-								var i = Array.prototype.slice.call(arguments);
-								i.unshift(e);
-								analytics.push(i);
-								return analytics;
-							};
-						};
-						for (var i = 0; i < analytics.methods.length; i++) {
-							var key = analytics.methods[i];
-							analytics[key] = analytics.factory(key);
-						}
-						analytics.load = function (key, i) {
-							var t = document.createElement('script');
-							t.type = 'text/javascript';
-							t.async = !0;
-							t.src =
-								'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
-							var n = document.getElementsByTagName('script')[0];
-							n.parentNode.insertBefore(t, n);
-							analytics._loadOptions = i;
-						};
-						analytics._writeKey = SEGMENT_ID;
-						analytics.SNIPPET_VERSION = '4.16.1';
-						analytics.load(SEGMENT_ID);
-						analytics.page();
-					}
-			})();
-		</script>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			http-equiv="Cache-Control"
+			content="no-cache, no-store, must-revalidate, max-age: 0"
+		/>
+		<meta http-equiv="Pragma" content="no-cache" />
+		<meta http-equiv="Expires" content="0" />
+
+		<title data-react-helmet="true">
+			Open source Observability platform | SigNoz
+		</title>
+		<meta
+			data-react-helmet="true"
+			property="og:title"
+			content="Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:description"
+			content="SigNoz is an open source observability platform to help you find issues in your deployed applications & solve them quickly. It provides a single pane of glass for metrics, traces and logs with deep filtering and aggregation to pin down specific issues very quickly."
+		/>
+		<meta
+			data-react-helmet="true"
+			property="og:image"
+			content="https://signoz.io/img/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image"
+			content="https://signoz.io/img/signoz-hero-image.webp"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:image:alt"
+			content="Image for Open source Observability platform | SigNoz"
+		/>
+		<meta
+			data-react-helmet="true"
+			name="twitter:card"
+			content="summary_large_image"
+		/>
+		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
+		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
+		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css?family=Fira+Code"
+			rel="stylesheet"
+		/>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+
+		<script>
+			//Set your APP_ID
+			const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
+
+			(function () {
+				var w = window;
+				var ic = w.Intercom;
+				if (typeof ic === 'function') {
+					ic('reattach_activator');
+					ic('update', w.intercomSettings);
+				} else {
+					var d = document;
+					var i = function () {
+						i.c(arguments);
+					};
+					i.q = [];
+					i.c = function (args) {
+						i.q.push(args);
+					};
+					w.Intercom = i;
+					var l = function () {
+						var s = d.createElement('script');
+						s.type = 'text/javascript';
+						s.async = true;
+						s.src = 'https://widget.intercom.io/widget/' + APP_ID;
+						var x = d.getElementsByTagName('script')[0];
+						x.parentNode.insertBefore(s, x);
+					};
+					if (document.readyState === 'complete') {
+						l();
+					} else if (w.attachEvent) {
+						w.attachEvent('onload', l);
+					} else {
+						w.addEventListener('load', l, false);
+					}
+				}
+			})();
+		</script>
+
+		<script type="text/javascript">
+			//Set your SEGMENT_ID
+			const CLARITY_PROJECT_ID =
+				'<%= htmlWebpackPlugin.options.CLARITY_PROJECT_ID %>';
+
+			(function (c, l, a, r, i, t, y) {
+				c[a] =
+					c[a] ||
+					function () {
+						(c[a].q = c[a].q || []).push(arguments);
+					};
+				t = l.createElement(r);
+				t.async = 1;
+				t.src = 'https://www.clarity.ms/tag/' + i;
+				y = l.getElementsByTagName(r)[0];
+				y.parentNode.insertBefore(t, y);
+			})(window, document, 'clarity', 'script', CLARITY_PROJECT_ID);
+		</script>
+
+		<script>
+			//Set your SEGMENT_ID
+			const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';
+
+			!(function () {
+				var analytics = (window.analytics = window.analytics || []);
+				if (!analytics.initialize)
+					if (analytics.invoked)
+						window.console &&
+							console.error &&
+							console.error('Segment snippet included twice.');
+					else {
+						analytics.invoked = !0;
+						analytics.methods = [
+							'trackSubmit',
+							'trackClick',
+							'trackLink',
+							'trackForm',
+							'pageview',
+							'identify',
+							'reset',
+							'group',
+							'track',
+							'ready',
+							'alias',
+							'debug',
+							'page',
+							'once',
+							'off',
+							'on',
+							'addSourceMiddleware',
+							'addIntegrationMiddleware',
+							'setAnonymousId',
+							'addDestinationMiddleware',
+						];
+						analytics.factory = function (e) {
+							return function () {
+								if (window.analytics.initialized)
+									return window.analytics[e].apply(window.analytics, arguments);
+								var i = Array.prototype.slice.call(arguments);
+								i.unshift(e);
+								analytics.push(i);
+								return analytics;
+							};
+						};
+						for (var i = 0; i < analytics.methods.length; i++) {
+							var key = analytics.methods[i];
+							analytics[key] = analytics.factory(key);
+						}
+						analytics.load = function (key, i) {
+							var t = document.createElement('script');
+							t.type = 'text/javascript';
+							t.async = !0;
+							t.src =
+								'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
+							var n = document.getElementsByTagName('script')[0];
+							n.parentNode.insertBefore(t, n);
+							analytics._loadOptions = i;
+						};
+						analytics._writeKey = SEGMENT_ID;
+						analytics.SNIPPET_VERSION = '4.16.1';
+						analytics.load(SEGMENT_ID);
+						analytics.page();
+					}
+			})();
+		</script>
+	</body>
+</html>
diff --git a/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts b/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts
index e189275802..c04cb73760 100644
--- a/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts
+++ b/frontend/src/lib/newQueryBuilder/getOperatorsBySourceAndPanelType.ts
@@ -19,12 +19,12 @@ export const getOperatorsBySourceAndPanelType = ({
 	let operatorsByDataSource = mapOfOperators[dataSource];
 
 	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
-		operatorsByDataSource = operatorsByDataSource.filter(
+		operatorsByDataSource = operatorsByDataSource?.filter(
 			(operator) => operator.value === StringOperators.NOOP,
 		);
 	}
 	if (panelType === PANEL_TYPES.TABLE && dataSource === DataSource.METRICS) {
-		operatorsByDataSource = operatorsByDataSource.filter(
+		operatorsByDataSource = operatorsByDataSource?.filter(
 			(operator) =>
 				operator.value !== MetricAggregateOperator.NOOP &&
 				operator.value !== MetricAggregateOperator.RATE,
@@ -35,7 +35,7 @@ export const getOperatorsBySourceAndPanelType = ({
 		panelType !== PANEL_TYPES.LIST &&
 		panelType !== PANEL_TYPES.TRACE
 	) {
-		operatorsByDataSource = operatorsByDataSource.filter(
+		operatorsByDataSource = operatorsByDataSource?.filter(
 			(operator) => operator.value !== StringOperators.NOOP,
 		);
 	}
diff --git a/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts b/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts
index 140808cdc1..61039c49fb 100644
--- a/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts
+++ b/frontend/src/lib/newQueryBuilder/getPaginationQueryData.ts
@@ -1,4 +1,5 @@
-import { FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { OPERATORS } from 'constants/queryBuilder';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -51,7 +52,10 @@ export const getPaginationQueryData: SetupPaginationQueryData = ({
 								dataType: DataTypes.String,
 								isColumn: true,
 							},
-							op: orderByTimestamp.order === FILTERS.ASC ? '>' : '<',
+							op:
+								orderByTimestamp.order === ORDERBY_FILTERS.ASC
+									? OPERATORS['>']
+									: OPERATORS['<'],
 							value: listItemId,
 						},
 						...updatedFilters.items,
diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx
index edae696519..d690f40f9c 100644
--- a/frontend/src/pages/Logs/index.tsx
+++ b/frontend/src/pages/Logs/index.tsx
@@ -18,6 +18,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { SET_LOGS_ORDER } from 'types/actions/logs';
 import { ILogsReducer } from 'types/reducer/logs';
+import { popupContainer } from 'utils/selectPopupContainer';
 
 import {
 	defaultSelectStyle,
@@ -100,6 +101,7 @@ function Logs(): JSX.Element {
 						<Col flex={1}>
 							<Space align="baseline" direction="horizontal">
 								<Select
+									getPopupContainer={popupContainer}
 									style={defaultSelectStyle}
 									value={selectedViewModeOption}
 									onChange={onChangeVeiwMode}
@@ -110,12 +112,17 @@ function Logs(): JSX.Element {
 								</Select>
 
 								{isFormatButtonVisible && (
-									<Popover placement="right" content={renderPopoverContent}>
+									<Popover
+										getPopupContainer={popupContainer}
+										placement="right"
+										content={renderPopoverContent}
+									>
 										<Button>Format</Button>
 									</Popover>
 								)}
 
 								<Select
+									getPopupContainer={popupContainer}
 									style={defaultSelectStyle}
 									defaultValue={order}
 									onChange={handleChangeOrder}
diff --git a/frontend/src/pages/SignUp/SignUp.tsx b/frontend/src/pages/SignUp/SignUp.tsx
index d1cdccccf4..c4f90d0e20 100644
--- a/frontend/src/pages/SignUp/SignUp.tsx
+++ b/frontend/src/pages/SignUp/SignUp.tsx
@@ -17,6 +17,7 @@ import { useLocation } from 'react-router-dom';
 import { SuccessResponse } from 'types/api';
 import { PayloadProps } from 'types/api/user/getUser';
 import { PayloadProps as LoginPrecheckPayloadProps } from 'types/api/user/loginPrecheck';
+import { trackEvent } from 'utils/segmentAnalytics';
 
 import {
 	ButtonContainer,
@@ -84,6 +85,13 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 			form.setFieldValue('email', responseDetails.email);
 			form.setFieldValue('organizationName', responseDetails.organization);
 			setIsDetailsDisable(true);
+
+			trackEvent('Account Creation Page Visited', {
+				email: responseDetails.email,
+				name: responseDetails.name,
+				company_name: responseDetails.organization,
+				source: 'SigNoz Cloud',
+			});
 		}
 	}, [
 		getInviteDetailsResponse.data?.payload,
@@ -230,6 +238,10 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 				setLoading(true);
 
 				if (!isPasswordValid(values.password)) {
+					trackEvent('Account Creation Page - Invalid Password', {
+						email: values.email,
+						name: values.firstName,
+					});
 					setIsPasswordPolicyError(true);
 					setLoading(false);
 					return;
@@ -238,6 +250,11 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 				if (isPreferenceVisible) {
 					await commonHandler(values, onAdminAfterLogin);
 				} else {
+					trackEvent('Account Created Successfully', {
+						email: values.email,
+						name: values.firstName,
+					});
+
 					await commonHandler(
 						values,
 						async (): Promise<void> => {
diff --git a/frontend/src/types/api/logs/log.ts b/frontend/src/types/api/logs/log.ts
index 0b519936a6..15b7f24c74 100644
--- a/frontend/src/types/api/logs/log.ts
+++ b/frontend/src/types/api/logs/log.ts
@@ -13,6 +13,7 @@ export interface ILog {
 	attributes_string: Record<string, never>;
 	attributesInt: Record<string, never>;
 	attributesFloat: Record<string, never>;
+	severity_text: string;
 }
 
 type OmitAttributesResources = Pick<
diff --git a/frontend/src/types/api/pipeline/def.ts b/frontend/src/types/api/pipeline/def.ts
index 5008cace6c..808aecf658 100644
--- a/frontend/src/types/api/pipeline/def.ts
+++ b/frontend/src/types/api/pipeline/def.ts
@@ -1,3 +1,5 @@
+import { TagFilter } from '../queryBuilder/queryBuilderData';
+
 export interface ProcessorData {
 	type: string;
 	id?: string;
@@ -23,7 +25,7 @@ export interface PipelineData {
 	description?: string;
 	createdBy: string;
 	enabled: boolean;
-	filter: string;
+	filter: TagFilter;
 	id?: string;
 	name: string;
 	orderId: number;
diff --git a/frontend/src/types/api/queryBuilder/queryBuilderData.ts b/frontend/src/types/api/queryBuilder/queryBuilderData.ts
index caf2d0554d..ff8c143bf2 100644
--- a/frontend/src/types/api/queryBuilder/queryBuilderData.ts
+++ b/frontend/src/types/api/queryBuilder/queryBuilderData.ts
@@ -13,8 +13,11 @@ export interface IBuilderFormula {
 	expression: string;
 	disabled: boolean;
 	queryName: string;
-	dataSource?: DataSource;
 	legend: string;
+	limit?: number | null;
+	having?: Having[];
+	stepInterval?: number;
+	orderBy?: OrderByPayload[];
 }
 
 export interface TagFilterItem {
diff --git a/frontend/src/types/common/operations.types.ts b/frontend/src/types/common/operations.types.ts
index 00ca569126..b1a21ce385 100644
--- a/frontend/src/types/common/operations.types.ts
+++ b/frontend/src/types/common/operations.types.ts
@@ -1,13 +1,18 @@
 import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import {
+	IBuilderFormula,
+	IBuilderQuery,
+} from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { SelectOption } from './select';
 
 type UseQueryOperationsParams = Pick<QueryProps, 'index' | 'query'> &
-	Pick<QueryBuilderProps, 'filterConfigs'>;
+	Pick<QueryBuilderProps, 'filterConfigs'> & {
+		formula?: IBuilderFormula;
+	};
 
 export type HandleChangeQueryData = <
 	Key extends keyof IBuilderQuery,
@@ -17,6 +22,14 @@ export type HandleChangeQueryData = <
 	value: Value,
 ) => void;
 
+export type HandleChangeFormulaData = <
+	Key extends keyof IBuilderFormula,
+	Value extends IBuilderFormula[Key]
+>(
+	key: Key,
+	value: Value,
+) => void;
+
 export type UseQueryOperations = (
 	params: UseQueryOperationsParams,
 ) => {
@@ -29,4 +42,6 @@ export type UseQueryOperations = (
 	handleChangeDataSource: (newSource: DataSource) => void;
 	handleDeleteQuery: () => void;
 	handleChangeQueryData: HandleChangeQueryData;
+	handleChangeFormulaData: HandleChangeFormulaData;
+	listOfAdditionalFormulaFilters: string[];
 };
diff --git a/frontend/src/typings/window.ts b/frontend/src/typings/window.ts
index a05152e5a5..02197e2444 100644
--- a/frontend/src/typings/window.ts
+++ b/frontend/src/typings/window.ts
@@ -1,8 +1,11 @@
 import { compose, Store } from 'redux';
 
+type ClarityType<T> = (...args: string[]) => T;
+
 declare global {
 	interface Window {
 		store: Store;
+		clarity: ClarityType<string>;
 		analytics: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
 	}
diff --git a/frontend/src/utils/selectPopupContainer.ts b/frontend/src/utils/selectPopupContainer.ts
new file mode 100644
index 0000000000..3add867bd2
--- /dev/null
+++ b/frontend/src/utils/selectPopupContainer.ts
@@ -0,0 +1,5 @@
+import { SelectProps } from 'antd';
+
+export const popupContainer: SelectProps['getPopupContainer'] = (
+	trigger,
+): HTMLElement => trigger.parentNode;
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 8690e5e55f..a5862179a4 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -21,6 +21,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 	}),
 	new webpack.ProvidePlugin({
 		process: 'process/browser',
@@ -31,6 +32,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		}),
 	}),
 ];
@@ -76,19 +78,10 @@ const config = {
 				use: ['babel-loader'],
 				exclude: /node_modules/,
 			},
+			// Add a rule for Markdown files using raw-loader
 			{
-				test: /\.mdx?$/,
-				use: [
-					// `babel-loader` is optional:
-					{ loader: 'babel-loader', options: {} },
-					{
-						loader: '@mdx-js/loader',
-						/** @type {import('@mdx-js/loader').Options} */
-						options: {
-							/* jsxImportSource: …, otherOptions… */
-						},
-					},
-				],
+				test: /\.md$/,
+				use: 'raw-loader',
 			},
 			{
 				test: /\.css$/,
diff --git a/frontend/webpack.config.prod.js b/frontend/webpack.config.prod.js
index b35c471fff..f026a83b0c 100644
--- a/frontend/webpack.config.prod.js
+++ b/frontend/webpack.config.prod.js
@@ -25,6 +25,7 @@ const plugins = [
 		template: 'src/index.html.ejs',
 		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 		SEGMENT_ID: process.env.SEGMENT_ID,
+		CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 	}),
 	new CompressionPlugin({
 		exclude: /.map$/,
@@ -40,6 +41,7 @@ const plugins = [
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
 			SEGMENT_ID: process.env.SEGMENT_ID,
+			CLARITY_PROJECT_ID: process.env.CLARITY_PROJECT_ID,
 		}),
 	}),
 	new MiniCssExtractPlugin(),
@@ -89,18 +91,8 @@ const config = {
 				exclude: /node_modules/,
 			},
 			{
-				test: /\.mdx?$/,
-				use: [
-					// `babel-loader` is optional:
-					{ loader: 'babel-loader', options: {} },
-					{
-						loader: '@mdx-js/loader',
-						/** @type {import('@mdx-js/loader').Options} */
-						options: {
-							/* jsxImportSource: …, otherOptions… */
-						},
-					},
-				],
+				test: /\.md$/,
+				use: 'raw-loader',
 			},
 			{
 				test: /\.css$/,
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0c2074a83e..a7998ef225 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2013,6 +2013,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.3.1":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz"
@@ -3499,6 +3506,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.7.tgz#bd29020ccb118543d88779848f99059b64b02d0f"
+  integrity sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^16.8.2":
   version "16.9.5"
   resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.5.tgz"
@@ -5229,16 +5243,31 @@ character-entities-html4@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
   integrity sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
 character-entities-legacy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz#76bc83a90738901d7bc223a9e93759fdd560125b"
   integrity sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==
 
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
 character-entities@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 character-reference-invalid@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
@@ -5451,6 +5480,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 comma-separated-tokens@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
@@ -7302,6 +7336,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz"
@@ -7495,6 +7536,11 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 forwarded@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz"
@@ -7849,6 +7895,11 @@ hast-util-is-element@^2.0.0:
     "@types/hast" "^2.0.0"
     "@types/unist" "^2.0.0"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
 hast-util-parse-selector@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz#25ab00ae9e75cbc62cf7a901f68a247eade659e2"
@@ -7956,6 +8007,17 @@ hast-util-whitespace@^2.0.0:
   resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
   integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
 
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
 hastscript@^7.0.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-7.2.0.tgz#0eafb7afb153d047077fa2a833dc9b7ec604d10b"
@@ -7972,6 +8034,11 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 history@4.10.1, history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.npmjs.org/history/-/history-4.10.1.tgz"
@@ -8346,11 +8413,24 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
 is-alphabetical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-2.0.1.tgz#01072053ea7c1036df3c7d19a6daaec7f19e789b"
   integrity sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==
 
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-alphanumerical@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz#7c03fbe96e3e931113e57f964b0a368cc2dfd875"
@@ -8451,6 +8531,11 @@ is-date-object@^1.0.1, is-date-object@^1.0.5:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-decimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-2.0.1.tgz#9469d2dc190d0214fd87d78b78caecc0cc14eef7"
@@ -8493,6 +8578,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-hexadecimal@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz#86b5bf668fca307498d319dfc03289d781a90027"
@@ -9777,6 +9867,14 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
@@ -11182,6 +11280,18 @@ parse-bmfont-xml@^1.1.4:
     xml-parse-from-string "^1.0.0"
     xml2js "^0.4.5"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-entities@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-4.0.1.tgz#4e2a01111fb1c986549b944af39eeda258fc9e4e"
@@ -11751,6 +11861,16 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz"
@@ -11795,6 +11915,13 @@ prop-types@15, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.8, prop-typ
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
 property-information@^6.0.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.3.0.tgz#ba4a06ec6b4e1e90577df9931286953cdf4282c3"
@@ -11905,6 +12032,14 @@ raw-body@2.5.1:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rbush@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz"
@@ -12430,7 +12565,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-markdown@~8.0.0:
+react-markdown@8.0.7, react-markdown@~8.0.0:
   version "8.0.7"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
   integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
@@ -12516,6 +12651,17 @@ react-router@5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-syntax-highlighter@15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
@@ -12628,6 +12774,15 @@ redux@^4.0.0, redux@^4.0.5, redux@^4.2.0:
   dependencies:
     "@babel/runtime" "^7.9.2"
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 refractor@^4.8.0:
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-4.8.1.tgz#fbdd889333a3d86c9c864479622855c9b38e9d42"
@@ -13467,6 +13622,11 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 space-separated-tokens@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
diff --git a/go.mod b/go.mod
index 7d82ac48bc..2402e92498 100644
--- a/go.mod
+++ b/go.mod
@@ -3,7 +3,7 @@ module go.signoz.io/signoz
 go 1.21
 
 require (
-	github.com/ClickHouse/clickhouse-go/v2 v2.13.2
+	github.com/ClickHouse/clickhouse-go/v2 v2.14.0
 	github.com/SigNoz/govaluate v0.0.0-20220522085550-d19c08c206cb
 	github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974
 	github.com/SigNoz/zap_otlp/zap_otlp_sync v0.0.0-20230822164844-1b861a431974
@@ -18,7 +18,7 @@ require (
 	github.com/go-redis/redis/v8 v8.11.5
 	github.com/go-redis/redismock/v8 v8.11.5
 	github.com/golang-jwt/jwt v3.2.2+incompatible
-	github.com/google/uuid v1.3.0
+	github.com/google/uuid v1.3.1
 	github.com/gorilla/handlers v1.5.1
 	github.com/gorilla/mux v1.8.0
 	github.com/gosimple/slug v1.10.0
@@ -45,9 +45,10 @@ require (
 	github.com/smartystreets/assertions v1.13.1
 	github.com/smartystreets/goconvey v1.8.1
 	github.com/soheilhy/cmux v0.1.5
+	github.com/srikanthccv/ClickHouse-go-mock v0.4.0
 	github.com/stretchr/testify v1.8.4
 	go.opentelemetry.io/collector/confmap v0.70.0
-	go.opentelemetry.io/otel v1.16.0
+	go.opentelemetry.io/otel v1.17.0
 	go.opentelemetry.io/otel/sdk v1.16.0
 	go.uber.org/multierr v1.11.0
 	go.uber.org/zap v1.25.0
@@ -69,6 +70,7 @@ require (
 	github.com/Azure/azure-sdk-for-go/sdk/internal v1.3.0 // indirect
 	github.com/AzureAD/microsoft-authentication-library-for-go v1.0.0 // indirect
 	github.com/ClickHouse/ch-go v0.58.2 // indirect
+	github.com/DATA-DOG/go-sqlmock v1.5.0 // indirect
 	github.com/alecthomas/units v0.0.0-20211218093645-b94a6e3cc137 // indirect
 	github.com/andybalholm/brotli v1.0.5 // indirect
 	github.com/aws/aws-sdk-go v1.44.302 // indirect
@@ -135,13 +137,13 @@ require (
 	go.opentelemetry.io/collector/pdata v1.0.0-rcv0014 // indirect
 	go.opentelemetry.io/collector/semconv v0.81.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.42.0 // indirect
-	go.opentelemetry.io/otel/metric v1.16.0 // indirect
-	go.opentelemetry.io/otel/trace v1.16.0 // indirect
+	go.opentelemetry.io/otel/metric v1.17.0 // indirect
+	go.opentelemetry.io/otel/trace v1.17.0 // indirect
 	go.opentelemetry.io/proto/otlp v1.0.0 // indirect
 	go.uber.org/atomic v1.11.0 // indirect
 	go.uber.org/goleak v1.2.1 // indirect
 	golang.org/x/sync v0.3.0 // indirect
-	golang.org/x/sys v0.10.0 // indirect
+	golang.org/x/sys v0.11.0 // indirect
 	golang.org/x/text v0.11.0 // indirect
 	golang.org/x/time v0.3.0 // indirect
 	google.golang.org/appengine v1.6.7 // indirect
diff --git a/go.sum b/go.sum
index 7c708cc8f2..6283ae2486 100644
--- a/go.sum
+++ b/go.sum
@@ -84,10 +84,12 @@ github.com/BurntSushi/toml v0.3.1/go.mod h1:xHWCNGjB5oqiDr8zfno3MHue2Ht5sIBksp03
 github.com/BurntSushi/xgb v0.0.0-20160522181843-27f122750802/go.mod h1:IVnqGOEym/WlBOVXweHU+Q+/VP0lqqI8lqeDx9IjBqo=
 github.com/ClickHouse/ch-go v0.58.2 h1:jSm2szHbT9MCAB1rJ3WuCJqmGLi5UTjlNu+f530UTS0=
 github.com/ClickHouse/ch-go v0.58.2/go.mod h1:Ap/0bEmiLa14gYjCiRkYGbXvbe8vwdrfTYWhsuQ99aw=
-github.com/ClickHouse/clickhouse-go/v2 v2.13.2 h1:LSg6670+xbd5VczO5Ei3DHZBIeGulfwhNuHCUth/qOA=
-github.com/ClickHouse/clickhouse-go/v2 v2.13.2/go.mod h1:4QITCrdY/ugPYA+QGnJ92h+v7TGaZQ7l0393Q/wlM3Q=
-github.com/Microsoft/go-winio v0.5.2 h1:a9IhgEQBCUEk6QCdml9CiJGhAws+YwffDHEMp1VMrpA=
-github.com/Microsoft/go-winio v0.5.2/go.mod h1:WpS1mjBmmwHBEWmogvA2mj8546UReBk4v8QkMxJ6pZY=
+github.com/ClickHouse/clickhouse-go/v2 v2.14.0 h1:7pzOLkWTc+Kn6e8Q2jtkTT9G+7RFY6QCw1Kc2nQ5pW4=
+github.com/ClickHouse/clickhouse-go/v2 v2.14.0/go.mod h1:PHqbMvJTQ0EI4a1vJhmbmL/Ajr+Cin2O+WJjnYctJvg=
+github.com/DATA-DOG/go-sqlmock v1.5.0 h1:Shsta01QNfFxHCfpW6YH2STWB0MudeXXEWMr20OEh60=
+github.com/DATA-DOG/go-sqlmock v1.5.0/go.mod h1:f/Ixk793poVmq4qj/V1dPUg2JEAKC73Q5eFN3EC/SaM=
+github.com/Microsoft/go-winio v0.6.1 h1:9/kr64B9VUZrLm5YYwbGtUJnMgqWVOdUAXu6Migciow=
+github.com/Microsoft/go-winio v0.6.1/go.mod h1:LRdKpFKfdobln8UmuiYcKPot9D2v6svN5+sAH+4kjUM=
 github.com/OneOfOne/xxhash v1.2.2 h1:KMrpdQIwFcEqXDklaen+P1axHaj9BSKzvpUUfnHldSE=
 github.com/OneOfOne/xxhash v1.2.2/go.mod h1:HSdplMjZKSmBqAxg5vPj2TmRDmfkzw+cTzAElWljhcU=
 github.com/SigNoz/govaluate v0.0.0-20220522085550-d19c08c206cb h1:bneLSKPf9YUSFmafKx32bynV6QrzViL/s+ZDvQxH1E4=
@@ -186,8 +188,8 @@ github.com/dnaeon/go-vcr v1.2.0 h1:zHCHvJYTMh1N7xnV7zf1m1GPBF9Ad0Jk/whtQ1663qI=
 github.com/dnaeon/go-vcr v1.2.0/go.mod h1:R4UdLID7HZT3taECzJs4YgbbH6PIGXB6W/sc5OLb6RQ=
 github.com/docker/distribution v2.8.2+incompatible h1:T3de5rq0dB1j30rp0sA2rER+m322EBzniBPB6ZIzuh8=
 github.com/docker/distribution v2.8.2+incompatible/go.mod h1:J2gT2udsDAN96Uj4KfcMRqY0/ypR+oyYUYmja8H+y+w=
-github.com/docker/docker v24.0.4+incompatible h1:s/LVDftw9hjblvqIeTiGYXBCD95nOEEl7qRsRrIOuQI=
-github.com/docker/docker v24.0.4+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
+github.com/docker/docker v24.0.5+incompatible h1:WmgcE4fxyI6EEXxBRxsHnZXrO1pQ3smi0k/jho4HLeY=
+github.com/docker/docker v24.0.5+incompatible/go.mod h1:eEKB0N0r5NX/I1kEveEz05bcu8tLC/8azJZsviup8Sk=
 github.com/docker/go-connections v0.4.0 h1:El9xVISelRB7BuFusrZozjnkIM5YnzCViNKohAFqRJQ=
 github.com/docker/go-connections v0.4.0/go.mod h1:Gbd7IOopHjR8Iph03tsViu4nIes5XhDvyHbTtUxmeec=
 github.com/docker/go-units v0.5.0 h1:69rxXcBk27SvSaaxTtLh/8llcHD8vYHT7WSdRZ/jvr4=
@@ -367,8 +369,8 @@ github.com/google/pprof v0.0.0-20210609004039-a478d1d731e9/go.mod h1:kpwsk12EmLe
 github.com/google/pprof v0.0.0-20210720184732-4bb14d4b1be1/go.mod h1:kpwsk12EmLew5upagYY7GY0pfYCcupk39gWOCRROcvE=
 github.com/google/renameio v0.1.0/go.mod h1:KWCgfxg9yswjAJkECMjeO8J8rahYeXnNhOm40UhjYkI=
 github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
+github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/googleapis/enterprise-certificate-proxy v0.0.0-20220520183353-fd19c99a87aa/go.mod h1:17drOmN3MwGY7t0e+Ei9b45FFGA3fBs3x36SsCg1hq8=
 github.com/googleapis/gax-go/v2 v2.0.4/go.mod h1:0Wqv26UfaUD9n4G6kQubkQ+KchISgw+vpHVxEJEs9eg=
 github.com/googleapis/gax-go/v2 v2.0.5/go.mod h1:DWXyrwAJ9X0FpwwEdw+IPEYBICEFu5mhpdKc/us6bOk=
@@ -614,8 +616,8 @@ github.com/open-telemetry/opamp-go v0.5.0 h1:2YFbb6G4qBkq3yTRdVb5Nfz9hKHW/ldUyex
 github.com/open-telemetry/opamp-go v0.5.0/go.mod h1:IMdeuHGVc5CjKSu5/oNV0o+UmiXuahoHvoZ4GOmAI9M=
 github.com/opencontainers/go-digest v1.0.0 h1:apOUWs51W5PlhuyGyz9FCeeBIOUDA/6nW8Oi/yOhh5U=
 github.com/opencontainers/go-digest v1.0.0/go.mod h1:0JzlMkj0TRzQZfJkVvzbP0HBR3IKzErnv2BNG4W4MAM=
-github.com/opencontainers/image-spec v1.0.3-0.20211202183452-c5a74bcca799 h1:rc3tiVYb5z54aKaDfakKn0dDjIyPpTtszkjuMzyt7ec=
-github.com/opencontainers/image-spec v1.0.3-0.20211202183452-c5a74bcca799/go.mod h1:BtxoFyWECRxE4U/7sNtV5W15zMzWCbyJoFRP3s7yZA0=
+github.com/opencontainers/image-spec v1.1.0-rc4 h1:oOxKUJWnFC4YGHCCMNql1x4YaDfYBTS5Y4x/Cgeo1E0=
+github.com/opencontainers/image-spec v1.1.0-rc4/go.mod h1:X4pATf0uXsnn3g5aiGIsVnJBR4mxhKzfwmvK/B2NTm8=
 github.com/opentracing/opentracing-go v1.2.0 h1:uEJPy/1a5RIPAJ0Ov+OIO8OxWu77jEv+1B0VhjKrZUs=
 github.com/opentracing/opentracing-go v1.2.0/go.mod h1:GxEUsuufX4nBwe+T+Wl9TAgYrxe9dPLANfrWvHYVTgc=
 github.com/ovh/go-ovh v1.4.1 h1:VBGa5wMyQtTP7Zb+w97zRCh9sLtM/2YKRyy+MEJmWaM=
@@ -729,6 +731,8 @@ github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72 h1:qLC7fQah7D6K1
 github.com/spaolacci/murmur3 v0.0.0-20180118202830-f09979ecbc72/go.mod h1:JwIasOWyU6f++ZhiEuf87xNszmSA2myDM2Kzu9HwQUA=
 github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
+github.com/srikanthccv/ClickHouse-go-mock v0.4.0 h1:tLk7qoDLg7Z5YD5mOmNqjRDbsm6ehJVXOFvSnG+gQAg=
+github.com/srikanthccv/ClickHouse-go-mock v0.4.0/go.mod h1:kRG9cuhS527AMXqKYgsii/CP28L/22fyJcOBExmLpEw=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.1.1/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
@@ -784,14 +788,14 @@ go.opentelemetry.io/collector/semconv v0.81.0 h1:lCYNNo3powDvFIaTPP2jDKIrBiV1T92
 go.opentelemetry.io/collector/semconv v0.81.0/go.mod h1:TlYPtzvsXyHOgr5eATi43qEMqwSmIziivJB2uctKswo=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.42.0 h1:pginetY7+onl4qN1vl0xW/V/v6OBZ0vVdH+esuJgvmM=
 go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.42.0/go.mod h1:XiYsayHc36K3EByOO6nbAXnAWbrUxdjUROCEeeROOH8=
-go.opentelemetry.io/otel v1.16.0 h1:Z7GVAX/UkAXPKsy94IU+i6thsQS4nb7LviLpnaNeW8s=
-go.opentelemetry.io/otel v1.16.0/go.mod h1:vl0h9NUa1D5s1nv3A5vZOYWn8av4K8Ml6JDeHrT/bx4=
-go.opentelemetry.io/otel/metric v1.16.0 h1:RbrpwVG1Hfv85LgnZ7+txXioPDoh6EdbZHo26Q3hqOo=
-go.opentelemetry.io/otel/metric v1.16.0/go.mod h1:QE47cpOmkwipPiefDwo2wDzwJrlfxxNYodqc4xnGCo4=
+go.opentelemetry.io/otel v1.17.0 h1:MW+phZ6WZ5/uk2nd93ANk/6yJ+dVrvNWUjGhnnFU5jM=
+go.opentelemetry.io/otel v1.17.0/go.mod h1:I2vmBGtFaODIVMBSTPVDlJSzBDNf93k60E6Ft0nyjo0=
+go.opentelemetry.io/otel/metric v1.17.0 h1:iG6LGVz5Gh+IuO0jmgvpTB6YVrCGngi8QGm+pMd8Pdc=
+go.opentelemetry.io/otel/metric v1.17.0/go.mod h1:h4skoxdZI17AxwITdmdZjjYJQH5nzijUUjm+wtPph5o=
 go.opentelemetry.io/otel/sdk v1.16.0 h1:Z1Ok1YsijYL0CSJpHt4cS3wDDh7p572grzNrBMiMWgE=
 go.opentelemetry.io/otel/sdk v1.16.0/go.mod h1:tMsIuKXuuIWPBAOrH+eHtvhTL+SntFtXF9QD68aP6p4=
-go.opentelemetry.io/otel/trace v1.16.0 h1:8JRpaObFoW0pxuVPapkgH8UhHQj+bJW8jJsCZEu5MQs=
-go.opentelemetry.io/otel/trace v1.16.0/go.mod h1:Yt9vYq1SdNz3xdjZZK7wcXv1qv2pwLkqr2QVwea0ef0=
+go.opentelemetry.io/otel/trace v1.17.0 h1:/SWhSRHmDPOImIAetP1QAeMnZYiQXrTy4fMMYOdSKWQ=
+go.opentelemetry.io/otel/trace v1.17.0/go.mod h1:I/4vKTgFclIsXRVucpH25X0mpFSczM7aHeaz0ZBLWjY=
 go.opentelemetry.io/proto/otlp v0.7.0/go.mod h1:PqfVotwruBrMGOCsRd/89rSnXhoiJIqeYNgFYFoEGnI=
 go.opentelemetry.io/proto/otlp v1.0.0 h1:T0TX0tmXU8a3CbNXzEKGeU5mIVOdf0oykP+u2lIVU/I=
 go.opentelemetry.io/proto/otlp v1.0.0/go.mod h1:Sy6pihPLfYHkr3NkUbEhGHFhINUSI/v80hjKIs5JXpM=
@@ -1043,8 +1047,8 @@ golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.10.0 h1:SqMFp9UcQJZa+pmYuAKjd9xq1f0j5rLcDIk0mj4qAsA=
-golang.org/x/sys v0.10.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.11.0 h1:eG7RXZHdqOJ1i+0lgLgCpSXAp6M3LYlAo6osgSi0xOM=
+golang.org/x/sys v0.11.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.1.0/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
diff --git a/pkg/query-service/app/http_handler.go b/pkg/query-service/app/http_handler.go
index 2d4b4c33ac..0729338158 100644
--- a/pkg/query-service/app/http_handler.go
+++ b/pkg/query-service/app/http_handler.go
@@ -3051,7 +3051,9 @@ func applyMetricLimit(results []*v3.Result, queryRangeParams *v3.QueryRangeParam
 
 	for _, result := range results {
 		builderQueries := queryRangeParams.CompositeQuery.BuilderQueries
-		if builderQueries != nil && builderQueries[result.QueryName].DataSource == v3.DataSourceMetrics {
+
+		if builderQueries != nil && (builderQueries[result.QueryName].DataSource == v3.DataSourceMetrics ||
+			result.QueryName != builderQueries[result.QueryName].Expression) {
 			limit := builderQueries[result.QueryName].Limit
 
 			orderByList := builderQueries[result.QueryName].OrderBy
diff --git a/pkg/query-service/app/logs/v3/enrich_query.go b/pkg/query-service/app/logs/v3/enrich_query.go
index c9a133ce0f..fe8ed8b9ed 100644
--- a/pkg/query-service/app/logs/v3/enrich_query.go
+++ b/pkg/query-service/app/logs/v3/enrich_query.go
@@ -1,6 +1,10 @@
 package v3
 
 import (
+	"fmt"
+	"strconv"
+	"strings"
+
 	"go.signoz.io/signoz/pkg/query-service/constants"
 	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 )
@@ -27,9 +31,6 @@ func EnrichmentRequired(params *v3.QueryRangeParamsV3) bool {
 		// check filter attribute
 		if query.Filters != nil && len(query.Filters.Items) != 0 {
 			for _, item := range query.Filters.Items {
-				if item.Key.IsJSON {
-					continue
-				}
 				if !isEnriched(item.Key) {
 					return true
 				}
@@ -100,6 +101,7 @@ func enrichLogsQuery(query *v3.BuilderQuery, fields map[string]v3.AttributeKey)
 	// enrich filter attribute
 	if query.Filters != nil && len(query.Filters.Items) != 0 {
 		for i := 0; i < len(query.Filters.Items); i++ {
+			query.Filters.Items[i] = jsonFilterEnrich(query.Filters.Items[i])
 			if query.Filters.Items[i].Key.IsJSON {
 				continue
 			}
@@ -149,3 +151,59 @@ func enrichFieldWithMetadata(field v3.AttributeKey, fields map[string]v3.Attribu
 	field.DataType = v3.AttributeKeyDataTypeString
 	return field
 }
+
+func jsonFilterEnrich(filter v3.FilterItem) v3.FilterItem {
+	// check if it is a json request
+	if !strings.HasPrefix(filter.Key.Key, "body.") {
+		return filter
+	}
+
+	// check if the value is a int, float, string, bool
+	valueType := ""
+	switch filter.Value.(type) {
+	case uint8, uint16, uint32, uint64, int, int8, int16, int32, int64:
+		valueType = "int64"
+	case float32, float64:
+		valueType = "float64"
+	case string:
+		valueType, filter.Value = parseStrValue(filter.Value.(string), filter.Operator)
+	case bool:
+		valueType = "bool"
+	}
+
+	// check if it is array
+	if strings.HasSuffix(filter.Key.Key, "[*]") {
+		valueType = fmt.Sprintf("array(%s)", valueType)
+	}
+
+	filter.Key.DataType = v3.AttributeKeyDataType(valueType)
+	filter.Key.IsJSON = true
+	return filter
+}
+
+func parseStrValue(valueStr string, operator v3.FilterOperator) (string, interface{}) {
+
+	valueType := "string"
+
+	// for the following operators it will always be string
+	if operator == v3.FilterOperatorContains || operator == v3.FilterOperatorNotContains ||
+		operator == v3.FilterOperatorRegex || operator == v3.FilterOperatorNotRegex ||
+		operator == v3.FilterOperatorLike || operator == v3.FilterOperatorNotLike {
+		return valueType, valueStr
+	}
+
+	var err error
+	var parsedValue interface{}
+	if parsedValue, err = strconv.ParseBool(valueStr); err == nil {
+		valueType = "bool"
+	} else if parsedValue, err = strconv.ParseInt(valueStr, 10, 64); err == nil {
+		valueType = "int64"
+	} else if parsedValue, err = strconv.ParseFloat(valueStr, 64); err == nil {
+		valueType = "float64"
+	} else {
+		parsedValue = valueStr
+		valueType = "string"
+	}
+
+	return valueType, parsedValue
+}
diff --git a/pkg/query-service/app/logs/v3/enrich_query_test.go b/pkg/query-service/app/logs/v3/enrich_query_test.go
index 6d1ba3953b..c1556534e1 100644
--- a/pkg/query-service/app/logs/v3/enrich_query_test.go
+++ b/pkg/query-service/app/logs/v3/enrich_query_test.go
@@ -96,13 +96,13 @@ var testEnrichmentRequiredData = []struct {
 						Expression: "test",
 						DataSource: v3.DataSourceLogs,
 						Filters: &v3.FilterSet{Operator: "AND", Items: []v3.FilterItem{
-							{Key: v3.AttributeKey{Key: "user_name", IsJSON: true}, Value: "john", Operator: "="},
+							{Key: v3.AttributeKey{Key: "body.xyz", IsJSON: true, DataType: v3.AttributeKeyDataTypeString}, Value: "john", Operator: "="},
 						}},
 					},
 				},
 			},
 		},
-		EnrichmentRequired: false,
+		EnrichmentRequired: true,
 	},
 	{
 		Name: "groupBy enrichment not required",
@@ -289,3 +289,154 @@ func TestEnrichParams(t *testing.T) {
 		})
 	}
 }
+
+var testJSONFilterEnrichData = []struct {
+	Name   string
+	Filter v3.FilterItem
+	Result v3.FilterItem
+}{
+	{
+		Name: "array string",
+		Filter: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.requestor_list[*]",
+				DataType: v3.AttributeKeyDataTypeUnspecified,
+				Type:     v3.AttributeKeyTypeUnspecified,
+			},
+			Operator: "has",
+			Value:    "index_service",
+		},
+		Result: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.requestor_list[*]",
+				DataType: v3.AttributeKeyDataTypeArrayString,
+				Type:     v3.AttributeKeyTypeUnspecified,
+				IsJSON:   true,
+			},
+			Operator: "has",
+			Value:    "index_service",
+		},
+	},
+	{
+		Name: "int64",
+		Filter: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.intx",
+				DataType: v3.AttributeKeyDataTypeUnspecified,
+				Type:     v3.AttributeKeyTypeUnspecified,
+			},
+			Operator: "=",
+			Value:    10,
+		},
+		Result: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.intx",
+				DataType: v3.AttributeKeyDataTypeInt64,
+				Type:     v3.AttributeKeyTypeUnspecified,
+				IsJSON:   true,
+			},
+			Operator: "=",
+			Value:    10,
+		},
+	},
+	{
+		Name: "float64",
+		Filter: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.float64[*]",
+				DataType: v3.AttributeKeyDataTypeArrayFloat64,
+				Type:     v3.AttributeKeyTypeUnspecified,
+			},
+			Operator: "!=",
+			Value:    10.0,
+		},
+		Result: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.float64[*]",
+				DataType: v3.AttributeKeyDataTypeArrayFloat64,
+				Type:     v3.AttributeKeyTypeUnspecified,
+				IsJSON:   true,
+			},
+			Operator: "!=",
+			Value:    10.0,
+		},
+	},
+	{
+		Name: "float64x",
+		Filter: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.float64x",
+				DataType: v3.AttributeKeyDataTypeUnspecified,
+				Type:     v3.AttributeKeyTypeUnspecified,
+			},
+			Operator: "!=",
+			Value:    "10.0",
+		},
+		Result: v3.FilterItem{
+			Key: v3.AttributeKey{
+				Key:      "body.float64x",
+				DataType: v3.AttributeKeyDataTypeFloat64,
+				Type:     v3.AttributeKeyTypeUnspecified,
+				IsJSON:   true,
+			},
+			Operator: "!=",
+			Value:    10.0,
+		},
+	},
+}
+
+func TestJsonEnrich(t *testing.T) {
+	for _, tt := range testJSONFilterEnrichData {
+		Convey(tt.Name, t, func() {
+			res := jsonFilterEnrich(tt.Filter)
+			So(res, ShouldResemble, tt.Result)
+		})
+	}
+}
+
+var testParseStrValueData = []struct {
+	Name       string
+	Operator   v3.FilterOperator
+	Value      interface{}
+	ResultType string
+	Result     interface{}
+}{
+	{
+		Name:       "bool",
+		Value:      "true",
+		Operator:   v3.FilterOperatorEqual,
+		ResultType: "bool",
+		Result:     true,
+	},
+	{
+		Name:       "int",
+		Value:      "10",
+		Operator:   v3.FilterOperatorNotEqual,
+		ResultType: "int64",
+		Result:     10,
+	},
+	{
+		Name:       "float",
+		Value:      "10.0",
+		Operator:   v3.FilterOperatorGreaterThan,
+		ResultType: "float64",
+		Result:     10.0,
+	},
+	{
+		Name:       "string",
+		Value:      "hello",
+		Operator:   v3.FilterOperatorLessThan,
+		ResultType: "string",
+		Result:     "hello",
+	},
+}
+
+func TestParseStrValue(t *testing.T) {
+	for _, tt := range testParseStrValueData {
+		Convey(tt.Name, t, func() {
+			vtype, value := parseStrValue(tt.Value.(string), tt.Operator)
+			So(vtype, ShouldEqual, tt.ResultType)
+			So(value, ShouldEqual, tt.Result)
+		})
+	}
+}
diff --git a/pkg/query-service/app/queryBuilder/query_builder.go b/pkg/query-service/app/queryBuilder/query_builder.go
index 328b519289..51d2fce667 100644
--- a/pkg/query-service/app/queryBuilder/query_builder.go
+++ b/pkg/query-service/app/queryBuilder/query_builder.go
@@ -87,7 +87,12 @@ func unique(slice []string) []string {
 }
 
 // expressionToQuery constructs the query for the expression
-func expressionToQuery(qp *v3.QueryRangeParamsV3, varToQuery map[string]string, expression *govaluate.EvaluableExpression) (string, error) {
+func expressionToQuery(
+	qp *v3.QueryRangeParamsV3,
+	varToQuery map[string]string,
+	expression *govaluate.EvaluableExpression,
+	queryName string,
+) (string, error) {
 	var formulaQuery string
 	variables := unique(expression.Vars())
 
@@ -134,6 +139,14 @@ func expressionToQuery(qp *v3.QueryRangeParamsV3, varToQuery map[string]string,
 		prevVar = variable
 	}
 	formulaQuery = fmt.Sprintf("SELECT %s, %s as value FROM ", joinUsing, formula.ExpressionString()) + formulaSubQuery
+	if len(qp.CompositeQuery.BuilderQueries[queryName].Having) > 0 {
+		conditions := []string{}
+		for _, having := range qp.CompositeQuery.BuilderQueries[queryName].Having {
+			conditions = append(conditions, fmt.Sprintf("%s %s %v", "value", having.Operator, having.Value))
+		}
+		havingClause := " HAVING " + strings.Join(conditions, " AND ")
+		formulaQuery += havingClause
+	}
 	return formulaQuery, nil
 }
 
@@ -236,7 +249,7 @@ func (qb *QueryBuilder) PrepareQueries(params *v3.QueryRangeParamsV3, args ...in
 			if query.Expression != query.QueryName {
 				expression, _ := govaluate.NewEvaluableExpressionWithFunctions(query.Expression, EvalFuncs)
 
-				queryString, err := expressionToQuery(params, queries, expression)
+				queryString, err := expressionToQuery(params, queries, expression, query.QueryName)
 				if err != nil {
 					return nil, err
 				}
diff --git a/pkg/query-service/dao/sqlite/rbac.go b/pkg/query-service/dao/sqlite/rbac.go
index 63dedf0a23..07e870fdff 100644
--- a/pkg/query-service/dao/sqlite/rbac.go
+++ b/pkg/query-service/dao/sqlite/rbac.go
@@ -563,13 +563,11 @@ func (mds *ModelDaoSqlite) UpdateUserFlags(ctx context.Context, userId string, f
 		return nil, apiError
 	}
 
-	if userPayload.Flags != nil {
-		for k, v := range userPayload.Flags {
-			if _, ok := flags[k]; !ok {
-				// insert only missing keys as we want to retain the
-				// flags in the db that are not part of this request
-				flags[k] = v
-			}
+	for k, v := range userPayload.Flags {
+		if _, ok := flags[k]; !ok {
+			// insert only missing keys as we want to retain the
+			// flags in the db that are not part of this request
+			flags[k] = v
 		}
 	}
 
diff --git a/pkg/query-service/model/v3/v3.go b/pkg/query-service/model/v3/v3.go
index 6dc7b1d24b..bd9811fdaa 100644
--- a/pkg/query-service/model/v3/v3.go
+++ b/pkg/query-service/model/v3/v3.go
@@ -138,6 +138,24 @@ func (a AggregateOperator) RequireAttribute(dataSource DataSource) bool {
 	}
 }
 
+func (a AggregateOperator) IsRateOperator() bool {
+	switch a {
+	case AggregateOperatorRate,
+		AggregateOperatorSumRate,
+		AggregateOperatorAvgRate,
+		AggregateOperatorMinRate,
+		AggregateOperatorMaxRate,
+		AggregateOperatorRateSum,
+		AggregateOperatorRateAvg,
+		AggregateOperatorRateMin,
+		AggregateOperatorRateMax:
+		return true
+
+	default:
+		return false
+	}
+}
+
 type ReduceToOperator string
 
 const (
@@ -392,27 +410,21 @@ func (c *CompositeQuery) Validate() error {
 		return fmt.Errorf("composite query must contain at least one query")
 	}
 
-	if c.BuilderQueries != nil {
-		for name, query := range c.BuilderQueries {
-			if err := query.Validate(); err != nil {
-				return fmt.Errorf("builder query %s is invalid: %w", name, err)
-			}
+	for name, query := range c.BuilderQueries {
+		if err := query.Validate(); err != nil {
+			return fmt.Errorf("builder query %s is invalid: %w", name, err)
 		}
 	}
 
-	if c.ClickHouseQueries != nil {
-		for name, query := range c.ClickHouseQueries {
-			if err := query.Validate(); err != nil {
-				return fmt.Errorf("clickhouse query %s is invalid: %w", name, err)
-			}
+	for name, query := range c.ClickHouseQueries {
+		if err := query.Validate(); err != nil {
+			return fmt.Errorf("clickhouse query %s is invalid: %w", name, err)
 		}
 	}
 
-	if c.PromQueries != nil {
-		for name, query := range c.PromQueries {
-			if err := query.Validate(); err != nil {
-				return fmt.Errorf("prom query %s is invalid: %w", name, err)
-			}
+	for name, query := range c.PromQueries {
+		if err := query.Validate(); err != nil {
+			return fmt.Errorf("prom query %s is invalid: %w", name, err)
 		}
 	}
 
@@ -497,11 +509,9 @@ func (b *BuilderQuery) Validate() error {
 		}
 	}
 
-	if b.SelectColumns != nil {
-		for _, selectColumn := range b.SelectColumns {
-			if err := selectColumn.Validate(); err != nil {
-				return fmt.Errorf("select column is invalid %w", err)
-			}
+	for _, selectColumn := range b.SelectColumns {
+		if err := selectColumn.Validate(); err != nil {
+			return fmt.Errorf("select column is invalid %w", err)
 		}
 	}
 
diff --git a/pkg/query-service/rules/thresholdRule.go b/pkg/query-service/rules/thresholdRule.go
index ced9577b79..c4d6fdbf12 100644
--- a/pkg/query-service/rules/thresholdRule.go
+++ b/pkg/query-service/rules/thresholdRule.go
@@ -406,6 +406,16 @@ func (r *ThresholdRule) prepareQueryRange(ts time.Time) *v3.QueryRangeParamsV3 {
 	}
 }
 
+func (r *ThresholdRule) shouldSkipFirstRecord() bool {
+	shouldSkip := false
+	for _, q := range r.ruleCondition.CompositeQuery.BuilderQueries {
+		if q.DataSource == v3.DataSourceMetrics && q.AggregateOperator.IsRateOperator() {
+			shouldSkip = true
+		}
+	}
+	return shouldSkip
+}
+
 // queryClickhouse runs actual query against clickhouse
 func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, query string) (Vector, error) {
 	rows, err := db.Query(ctx, query)
@@ -511,6 +521,7 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 		if math.IsNaN(sample.Point.V) {
 			continue
 		}
+		sample.Point.Vs = append(sample.Point.Vs, sample.Point.V)
 
 		// capture lables in result
 		sample.Metric = lbls.Labels()
@@ -530,6 +541,9 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 				} else if r.compareOp() == ValueIsBelow {
 					sample.Point.V = math.Max(existing.Point.V, sample.Point.V)
 					resultMap[labelHash] = sample
+				} else {
+					sample.Point.Vs = append(existing.Point.Vs, sample.Point.V)
+					resultMap[labelHash] = sample
 				}
 			case AtleastOnce:
 				if r.compareOp() == ValueIsAbove {
@@ -538,6 +552,9 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 				} else if r.compareOp() == ValueIsBelow {
 					sample.Point.V = math.Min(existing.Point.V, sample.Point.V)
 					resultMap[labelHash] = sample
+				} else {
+					sample.Point.Vs = append(existing.Point.Vs, sample.Point.V)
+					resultMap[labelHash] = sample
 				}
 			case OnAverage:
 				sample.Point.V = (existing.Point.V + sample.Point.V) / 2
@@ -553,7 +570,7 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 				// we skip the first record to support rate cases correctly
 				// improvement(amol): explore approaches to limit this only for
 				// rate uses cases
-				if exists := skipFirstRecord[labelHash]; exists {
+				if exists := skipFirstRecord[labelHash]; exists || !r.shouldSkipFirstRecord() {
 					resultMap[labelHash] = sample
 				} else {
 					// looks like the first record for this label combo, skip it
@@ -568,36 +585,37 @@ func (r *ThresholdRule) runChQuery(ctx context.Context, db clickhouse.Conn, quer
 
 		}
 
-		if s, ok := resultMap[labelHash]; ok {
-			s.Point.Vs = append(s.Point.Vs, s.Point.V)
-		}
 	}
 
-	for _, s := range resultMap {
+	for hash, s := range resultMap {
 		if r.matchType() == AllTheTimes && r.compareOp() == ValueIsEq {
 			for _, v := range s.Point.Vs {
 				if v != r.targetVal() { // if any of the values is not equal to target, alert shouldn't be sent
 					s.Point.V = v
 				}
 			}
+			resultMap[hash] = s
 		} else if r.matchType() == AllTheTimes && r.compareOp() == ValueIsNotEq {
 			for _, v := range s.Point.Vs {
 				if v == r.targetVal() { // if any of the values is equal to target, alert shouldn't be sent
 					s.Point.V = v
 				}
 			}
+			resultMap[hash] = s
 		} else if r.matchType() == AtleastOnce && r.compareOp() == ValueIsEq {
 			for _, v := range s.Point.Vs {
 				if v == r.targetVal() { // if any of the values is equal to target, alert should be sent
 					s.Point.V = v
 				}
 			}
+			resultMap[hash] = s
 		} else if r.matchType() == AtleastOnce && r.compareOp() == ValueIsNotEq {
 			for _, v := range s.Point.Vs {
 				if v != r.targetVal() { // if any of the values is not equal to target, alert should be sent
 					s.Point.V = v
 				}
 			}
+			resultMap[hash] = s
 		}
 	}
 
diff --git a/pkg/query-service/rules/thresholdRule_test.go b/pkg/query-service/rules/thresholdRule_test.go
new file mode 100644
index 0000000000..27ad6611f5
--- /dev/null
+++ b/pkg/query-service/rules/thresholdRule_test.go
@@ -0,0 +1,297 @@
+package rules
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	cmock "github.com/srikanthccv/ClickHouse-go-mock"
+	"github.com/stretchr/testify/assert"
+	"go.signoz.io/signoz/pkg/query-service/featureManager"
+	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
+)
+
+func TestThresholdRuleCombinations(t *testing.T) {
+	postableRule := PostableRule{
+		Alert:      "Tricky Condition Tests",
+		AlertType:  "METRICS_BASED_ALERT",
+		RuleType:   RuleTypeThreshold,
+		EvalWindow: Duration(5 * time.Minute),
+		Frequency:  Duration(1 * time.Minute),
+		RuleCondition: &RuleCondition{
+			CompositeQuery: &v3.CompositeQuery{
+				QueryType: v3.QueryTypeBuilder,
+				BuilderQueries: map[string]*v3.BuilderQuery{
+					"A": {
+						QueryName:    "A",
+						StepInterval: 60,
+						AggregateAttribute: v3.AttributeKey{
+							Key: "probe_success",
+						},
+						AggregateOperator: v3.AggregateOperatorNoOp,
+						DataSource:        v3.DataSourceMetrics,
+						Expression:        "A",
+					},
+				},
+			},
+		},
+	}
+	fm := featureManager.StartManager()
+	mock, err := cmock.NewClickHouseNative(nil)
+	if err != nil {
+		t.Errorf("an error '%s' was not expected when opening a stub database connection", err)
+	}
+
+	cols := make([]cmock.ColumnType, 0)
+	cols = append(cols, cmock.ColumnType{Name: "value", Type: "Int32"})
+	cols = append(cols, cmock.ColumnType{Name: "endpoint", Type: "String"})
+
+	cases := []struct {
+		values      [][]interface{}
+		expectAlert bool
+		compareOp   string
+		matchType   string
+		target      float64
+	}{
+		// Test cases for Equals Always
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "3", // Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "3", // Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "3", // Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "3", // Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		// Test cases for Equals Once
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "3", // Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "3", // Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "3", // Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "3", // Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		// Test cases for Not Equals Always
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "4", // Not Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "4", // Not Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "4", // Not Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "4", // Not Equals
+			matchType:   "2", // Always
+			target:      0.0,
+		},
+		// Test cases for Not Equals Once
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "4", // Not Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+			},
+			expectAlert: false,
+			compareOp:   "4", // Not Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(0), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(0), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "4", // Not Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+		{
+			values: [][]interface{}{
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+				{int32(1), "endpoint"},
+			},
+			expectAlert: true,
+			compareOp:   "4", // Not Equals
+			matchType:   "1", // Once
+			target:      0.0,
+		},
+	}
+
+	for idx, c := range cases {
+		rows := cmock.NewRows(cols, c.values)
+		// We are testing the eval logic after the query is run
+		// so we don't care about the query string here
+		queryString := "SELECT value, endpoint FROM table"
+		mock.
+			ExpectQuery(queryString).
+			WillReturnRows(rows)
+		postableRule.RuleCondition.CompareOp = CompareOp(c.compareOp)
+		postableRule.RuleCondition.MatchType = MatchType(c.matchType)
+		postableRule.RuleCondition.Target = &c.target
+
+		rule, err := NewThresholdRule("69", &postableRule, ThresholdRuleOpts{}, fm)
+		if err != nil {
+			assert.NoError(t, err)
+		}
+
+		result, err := rule.runChQuery(context.Background(), mock, queryString)
+		if err != nil {
+			assert.NoError(t, err)
+		}
+		if c.expectAlert {
+			assert.Equal(t, 1, len(result), "case %d", idx)
+		} else {
+			assert.Equal(t, 0, len(result), "case %d", idx)
+		}
+	}
+}