diff --git a/src/Assets/IconV2/ic-binoculars.svg b/src/Assets/IconV2/ic-binoculars.svg
new file mode 100644
index 000000000..2eb3697bf
--- /dev/null
+++ b/src/Assets/IconV2/ic-binoculars.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M9.75 8.24978H14.25M21.5241 14.4673L17.4319 5.15603C17.0099 4.7341 16.4376 4.49707 15.8409 4.49707C15.2442 4.49707 14.672 4.7341 14.25 5.15603V15.7498M14.25 15.7498C14.25 17.8208 15.9289 19.4998 18 19.4998C20.0711 19.4998 21.75 17.8208 21.75 15.7498C21.75 13.6787 20.0711 11.9998 18 11.9998C15.9289 11.9998 14.25 13.6787 14.25 15.7498ZM9.75 15.7498V5.15603C9.32805 4.7341 8.75577 4.49707 8.15906 4.49707C7.56235 4.49707 6.99008 4.7341 6.56812 5.15603L2.47594 14.4673M9.75 15.7498C9.75 17.8208 8.07107 19.4998 6 19.4998C3.92893 19.4998 2.25 17.8208 2.25 15.7498C2.25 13.6787 3.92893 11.9998 6 11.9998C8.07107 11.9998 9.75 13.6787 9.75 15.7498Z" stroke="#3B444C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/Common/BreadCrumb/BreadCrumb.tsx b/src/Common/BreadCrumb/BreadCrumb.tsx
index 38d9bc5c5..f94cdd7ca 100644
--- a/src/Common/BreadCrumb/BreadCrumb.tsx
+++ b/src/Common/BreadCrumb/BreadCrumb.tsx
@@ -16,7 +16,7 @@
 
 import React, { useMemo, useEffect } from 'react'
 import { Link, useRouteMatch, useParams } from 'react-router-dom'
-import { useBreadcrumbContext } from './BreadcrumbStore'
+import { getBreadCrumbSeparator, useBreadcrumbContext } from './BreadcrumbStore'
 import { ConditionalWrap } from '../Helper'
 import { Breadcrumb, Breadcrumbs, UseBreadcrumbOptionalProps, UseBreadcrumbState } from './Types'
 
@@ -90,7 +90,7 @@ export function useBreadcrumb(props?: UseBreadcrumbOptionalProps, deps?: any[]):
 export const BreadCrumb: React.FC<Breadcrumbs> = ({
     breadcrumbs,
     sep = '/',
-    className = 'dc__devtron-breadcrumb__item',
+    className = 'dc__devtron-breadcrumb__item fs-16 fw-4 lh-1-5 dc__ellipsis-right dc__mxw-155',
 }) => {
     const { url } = useRouteMatch()
     const filteredCrumbs = breadcrumbs.filter((crumb) => !!crumb.name)
@@ -114,9 +114,7 @@ export const BreadCrumb: React.FC<Breadcrumbs> = ({
                         {breadcrumb.name}
                     </ConditionalWrap>
 
-                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && (
-                        <span className={`${className}__separator cn-5`}>{sep}</span>
-                    )}
+                    {idx + 1 !== filteredCrumbs.length && breadcrumb.name && getBreadCrumbSeparator()}
                 </React.Fragment>
             ))}
         </>
diff --git a/src/Common/BreadCrumb/BreadcrumbStore.tsx b/src/Common/BreadCrumb/BreadcrumbStore.tsx
index cf91aad28..006488a62 100644
--- a/src/Common/BreadCrumb/BreadcrumbStore.tsx
+++ b/src/Common/BreadCrumb/BreadcrumbStore.tsx
@@ -22,9 +22,14 @@ const initialState = {
 }
 
 export const BreadcrumbText = ({ heading, isActive, shouldTruncate = false }: BreadcrumbTextProps) => (
-    <h2 className={`m-0 fs-16 fw-6 lh-32 ${shouldTruncate ? 'dc__truncate' : ''} ${isActive ? 'cn-9' : 'cb-5'}`}>{heading}</h2>
+    <span className={`dc__breadcrumb-text cb-5 fs-16 lh-1-5 ${shouldTruncate ? 'dc__truncate' : ''} ${isActive ? 'cn-9 fw-6' : 'cb-5 fw-4 dc__mxw-155 dc__ellipsis-right'}`}>{heading}</span>
 )
 
+export const getBreadCrumbSeparator = (sep: string = '/') => (
+    <span className="dc__devtron-breadcrumb__item__separator">{sep}</span>
+)
+
+
 const Store = ({ children }) => {
     const [state, setState] = useState(initialState)
     return <BreadcrumbContext.Provider value={{ state, setState }}>{children}</BreadcrumbContext.Provider>
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 22219c2e0..ce392ca05 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -49,6 +49,7 @@ export const PATTERNS = {
 }
 
 const GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP = '/global-config/templates/devtron-apps'
+const OBSERVABILITY_ROOT = '/observability'
 
 export const URLS = {
     LOGIN: '/login',
@@ -88,6 +89,10 @@ export const URLS = {
     GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP_DETAIL: `${GLOBAL_CONFIG_TEMPLATES_DEVTRON_APP}/detail/:appId`,
     LICENSE_AUTH: '/license-auth',
     GLOBAL_CONFIG_EDIT_CLUSTER: '/global-config/cluster-env/edit/:clusterId',
+    // OBSERVABILITY
+    OBSERVABILITY: OBSERVABILITY_ROOT,
+    OBSERVABILITY_OVERVIEW: `${OBSERVABILITY_ROOT}/overview`,
+    OBSERVABILITY_CUSTOMER_LIST: `${OBSERVABILITY_ROOT}/tenants`,
 } as const
 
 export const ROUTES = {
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 9182ed7c6..93836eaef 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -20,6 +20,7 @@ import { ReactComponent as ICAzureAks } from '@IconsV2/ic-azure-aks.svg'
 import { ReactComponent as ICBgCluster } from '@IconsV2/ic-bg-cluster.svg'
 import { ReactComponent as ICBgEnvironment } from '@IconsV2/ic-bg-environment.svg'
 import { ReactComponent as ICBharatpe } from '@IconsV2/ic-bharatpe.svg'
+import { ReactComponent as ICBinoculars } from '@IconsV2/ic-binoculars.svg'
 import { ReactComponent as ICBitbucket } from '@IconsV2/ic-bitbucket.svg'
 import { ReactComponent as ICBookOpen } from '@IconsV2/ic-book-open.svg'
 import { ReactComponent as ICBrain } from '@IconsV2/ic-brain.svg'
@@ -262,6 +263,7 @@ export const iconMap = {
     'ic-bg-cluster': ICBgCluster,
     'ic-bg-environment': ICBgEnvironment,
     'ic-bharatpe': ICBharatpe,
+    'ic-binoculars': ICBinoculars,
     'ic-bitbucket': ICBitbucket,
     'ic-book-open': ICBookOpen,
     'ic-brain': ICBrain,