diff --git a/frontend/src/assets/index.css b/frontend/src/assets/index.css
index 1efc7ce2a1..cf0be7ff6f 100644
--- a/frontend/src/assets/index.css
+++ b/frontend/src/assets/index.css
@@ -13,3 +13,10 @@
   .site-layout .site-layout-background {
     background: #fff;
   } */
+.instrument-card{
+	border-radius: 4px;
+	background: #313131;
+	padding: 33px 23px;
+	max-width: 800px;
+	margin-top: 40px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 078fda147c..3a7bb88bfb 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -15,6 +15,7 @@ import {
 	AlignLeftOutlined,
 	AppstoreOutlined,
 	SettingOutlined,
+	ApiOutlined
 } from "@ant-design/icons";
 
 import DateTimeSelector from "Src/components/DateTimeSelector";
@@ -45,6 +46,10 @@ const Signup = React.lazy(() => import("Src/components/Signup"));
 const SettingsPage = React.lazy(
 	() => import("Src/components/settings/settingsPage"),
 );
+
+const IntstrumentationPage = React.lazy(
+	() => import("Src/components/add-instrumentation/instrumentationPage"),
+);
 //PNOTE
 //React. lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
 
@@ -133,6 +138,11 @@ const App = () => {
 								Settings
 							</NavLink>
 						</Menu.Item>
+						<Menu.Item key="5" icon={<ApiOutlined />}>
+							<NavLink to="/add-instrumentation" style={{ fontSize: 12, textDecoration: "none" }}>
+								Add instrumentation
+							</NavLink>
+						</Menu.Item>
 					</Menu>
 				</Sider>
 				<Layout className="site-layout">
@@ -156,6 +166,7 @@ const App = () => {
 								<Route path="/traces" exact component={TraceDetail} />
 								<Route path="/traces/:id" component={TraceGraph} />
 								<Route path="/settings" exact component={SettingsPage} />
+								<Route path="/add-instrumentation" exact component={IntstrumentationPage} />
 								<Route path="/usage-explorer" component={UsageExplorer} />
 								<Route path="/" component={ServicesTable} />
 								<Route path="/application" exact component={ServicesTable} />
diff --git a/frontend/src/components/AppWrapper.tsx b/frontend/src/components/AppWrapper.tsx
index 82964e72cf..221da52c5a 100644
--- a/frontend/src/components/AppWrapper.tsx
+++ b/frontend/src/components/AppWrapper.tsx
@@ -5,7 +5,6 @@ import Signup from "./Signup";
 const App = React.lazy(() => import("Src/components/App"));
 
 const AppWrapper = () => {
-	console.log("other");
 	return (
 		<Suspense fallback={<Spin size="large" />}>
 			<Switch>
@@ -16,6 +15,7 @@ const AppWrapper = () => {
 				<Route path="/traces/:id" component={App} />
 				<Route path="/usage-explorer" component={App} />
 				<Route path="/settings" component={App} />
+				<Route path="/instumentation" component={App} />
 				<Route path="/signup" component={Signup} />
 				<Route
 					path="/"
diff --git a/frontend/src/components/ShowBreadcrumbs.tsx b/frontend/src/components/ShowBreadcrumbs.tsx
index 9528af5abf..b76af21eec 100644
--- a/frontend/src/components/ShowBreadcrumbs.tsx
+++ b/frontend/src/components/ShowBreadcrumbs.tsx
@@ -14,6 +14,7 @@ const breadcrumbNameMap: any = {
 	"/traces": "Traces",
 	"/service-map": "Service Map",
 	"/usage-explorer": "Usage Explorer",
+	"/add-instrumentation": "Add instrumentation",
 	"/settings": "Settings",
 };
 
diff --git a/frontend/src/components/add-instrumentation/instrumentationPage.tsx b/frontend/src/components/add-instrumentation/instrumentationPage.tsx
new file mode 100644
index 0000000000..652d3bcd22
--- /dev/null
+++ b/frontend/src/components/add-instrumentation/instrumentationPage.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { Form, Input, Space } from "antd";
+import { connect } from "react-redux";
+import { Tooltip } from "antd";
+import {
+	InfoCircleOutlined,
+	EyeTwoTone,
+	EyeInvisibleOutlined,
+} from "@ant-design/icons";
+import { StoreState } from "../../reducers";
+import { useAuthenticationData } from "../../hooks/authentication";
+import { TOKEN_DATE } from "../../../../../sass/frontend/src/constants/accessToken";
+import { Alert } from "antd";
+
+interface SettingsPageProps {}
+
+const layout = {
+	labelCol: { span: 3 },
+	wrapperCol: { span: 6 },
+};
+
+const InstrumentationPage = (props: SettingsPageProps) => {
+
+
+	return (
+		<React.Fragment>
+
+
+			<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
+				<div>
+					<h2>
+						Instrument your application
+					</h2>
+				</div>
+
+				<div className={"instrument-card"}>
+					Congrats, you have successfully installed SigNoz!<br/>
+					To start seeing YOUR application data here, follow the instructions in the docs -
+					<a href={"https://signoz.io/docs/instrumentation/overview"}> https://signoz.io/docs/instrumentation/overview</a>
+					<br/>
+					If you face any issues, join our <a href={"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"}>
+					slack community</a> to ask any questions or mail us at <a href={"mailto:support@signoz.io"}>
+					support@signoz.io
+				</a>
+				</div>
+			</Space>
+		</React.Fragment>
+	);
+};
+
+const mapStateToProps = (state: StoreState): {} => {
+	return {};
+};
+
+export default connect(mapStateToProps, {})(InstrumentationPage);