diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx
index 339f68acb7..c20bb402ae 100644
--- a/src/components/app/details/appDetails/utils.tsx
+++ b/src/components/app/details/appDetails/utils.tsx
@@ -16,7 +16,7 @@
 
 import moment from 'moment'
 import { AggregationKeys } from '../../types'
-import { getVersionArr, isVersionLessThanOrEqualToTarget, DayPickerRangeControllerPresets } from '../../../common'
+import { getVersionArr, isVersionLessThanOrEqualToTarget } from '../../../common'
 import { ChartTypes, AppMetricsTabType, StatusType, StatusTypes } from './appDetails.type'
 import {
     ZERO_TIME_STRING,
@@ -31,6 +31,7 @@ import {
     AppEnvironment,
     SelectPickerOptionType,
     IconsProps,
+    DayPickerRangeControllerPresets,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { GetIFrameSrcParamsType } from './types'
 
diff --git a/src/components/common/DatePickers/DayPickerRangeController.tsx b/src/components/common/DatePickers/DayPickerRangeController.tsx
index 81204d69a0..9136a5f183 100644
--- a/src/components/common/DatePickers/DayPickerRangeController.tsx
+++ b/src/components/common/DatePickers/DayPickerRangeController.tsx
@@ -24,101 +24,11 @@ import { isInclusivelyBeforeDay, DayPickerRangeController } from 'react-dates'
 import './calendar.css'
 import { ReactComponent as ArrowDown } from '../../../assets/icons/ic-chevron-down.svg'
 import { DA_APP_DETAILS_GA_EVENTS } from '@Components/app/details/appDetails/constants'
+import { Button, customDayStyles, DatePickerRangeControllerProps, DayPickerCalendarInfoHorizontal, DayPickerRangeControllerPresets } from '@devtron-labs/devtron-fe-common-lib/dist'
+import { customStyles } from './constants'
 
-interface DatePickerType2Props {
-    calendar
-    calendarInputs
-    focusedInput
-    handleFocusChange
-    handleDatesChange
-    handleCalendarInputs?
-    calendarValue: string
-    handlePredefinedRange: (start: Moment, end: Moment, endStr: string) => void
-    handleDateInput: (key: 'startDate' | 'endDate', value: string) => void
-    handleApply: (...args) => void
-}
-
-const hoveredSpanStyles = {
-    background: 'var(--B100)',
-    color: 'var(--B500)',
-}
-
-const selectedStyles = {
-    background: 'var(--B100)',
-    color: 'var(--B500)',
-    hover: {
-        background: 'var(--B500)',
-        color: 'var(--N0)',
-    },
-}
-
-const selectedSpanStyles = {
-    background: 'var(--B100)',
-    color: 'var(--B500)',
-
-    hover: {
-        background: 'var(--B500)',
-        color: 'var(--N0)',
-    },
-}
-
-const customDayStyles = {
-    selectedStartStyles: selectedStyles,
-    selectedEndStyles: selectedStyles,
-    hoveredSpanStyles,
-    selectedSpanStyles,
-    selectedStyles,
-    border: 'none',
-}
-
-const styless = {
-    PresetDateRangePicker_panel: {
-        padding: '0px',
-        width: '200px',
-        height: '100%',
-    },
-    PresetDateRangePicker_button: {
-        width: '188px',
-        background: 'var(--transparent)',
-        border: 'none',
-        color: 'var(--N900)',
-        padding: '8px',
-        font: 'inherit',
-        fontWeight: 500,
-        lineHeight: 'normal',
-        overflow: 'visible',
-        cursor: 'pointer',
-        ':active': {
-            outline: 0,
-        },
-    },
-    DayPicker__horizontal: {
-        borderRadius: '4px',
-    },
-    PresetDateRangePicker_button__selected: {
-        color: 'var(--B500)',
-        fontWeight: 600,
-        background: 'var(--B100)',
-        outline: 'none',
-    },
-}
-
-const DayPicker_calendarInfo__horizontal = {
-    width: '532px',
-    boxShadow: 'none',
-}
-
-export const DayPickerRangeControllerPresets = [
-    { text: 'Last 5 minutes', endDate: moment(), startDate: moment().subtract(5, 'minutes'), endStr: 'now-5m' },
-    { text: 'Last 30 minutes', endDate: moment(), startDate: moment().subtract(30, 'minutes'), endStr: 'now-30m' },
-    { text: 'Last 1 hour', endDate: moment(), startDate: moment().subtract(1, 'hours'), endStr: 'now-1h' },
-    { text: 'Last 24 hours', endDate: moment(), startDate: moment().subtract(24, 'hours'), endStr: 'now-24h' },
-    { text: 'Last 7 days', endDate: moment(), startDate: moment().subtract(7, 'days'), endStr: 'now-7d' },
-    { text: 'Last 1 month', endDate: moment(), startDate: moment().subtract(1, 'months'), endStr: 'now-1M' },
-    { text: 'Last 6 months', endDate: moment(), startDate: moment().subtract(6, 'months'), endStr: 'now-6M' },
-]
 
-export class DatePickerType2 extends Component<DatePickerType2Props, any> {
+export class DatePickerType2 extends Component<DatePickerRangeControllerProps, any> {
     constructor(props) {
         super(props)
         this.state = {
@@ -144,15 +54,15 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
             <div
                 className="flex left top"
                 style={{
-                    ...styless.PresetDateRangePicker_panel,
-                    ...DayPicker_calendarInfo__horizontal,
+                    ...customStyles.PresetDateRangePicker_panel,
+                    ...DayPickerCalendarInfoHorizontal,
                     ...{
                         PresetDateRangePicker_panel: {
                             padding: '0px',
                             width: '200px',
                             height: '100%',
                         },
-                        ...styless.DayPicker__horizontal,
+                        ...customStyles.DayPicker__horizontal,
                     },
                 }}
             >
@@ -181,12 +91,10 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
                                 }}
                             />
                         </label>
-                        <button type="button" className="cta small" onClick={this.onClickApplyTimeChange}>
-                            Apply Time Range
-                        </button>
+                        <Button text="Apply Time Range" onClick={this.onClickApplyTimeChange} dataTestId="apply-time-range" />
                     </div>
                 </div>
-                <div style={{ width: '220px', padding: '16px', borderLeft: 'solid 1px var(--N200)', height: '304px' }}>
+                <div className='w-200 p-16 h-300'>
                     {DayPickerRangeControllerPresets.map(({ text, startDate, endDate, endStr }) => {
                         const isSelected =
                             startDate.isSame(this.props.calendar.startDate, 'minute') &&
@@ -194,12 +102,12 @@ export class DatePickerType2 extends Component<DatePickerType2Props, any> {
                             startDate.isSame(this.props.calendar.startDate, 'day') &&
                             endDate.isSame(this.props.calendar.endDate, 'day')
                         let buttonStyles = {
-                            ...styless.PresetDateRangePicker_button,
+                            ...customStyles.PresetDateRangePicker_button,
                         }
                         if (isSelected) {
                             buttonStyles = {
                                 ...buttonStyles,
-                                ...styless.PresetDateRangePicker_button__selected,
+                                ...customStyles.PresetDateRangePicker_button__selected,
                             }
                         }
                         return (
diff --git a/src/components/common/DatePickers/constants.ts b/src/components/common/DatePickers/constants.ts
new file mode 100644
index 0000000000..03e7abad51
--- /dev/null
+++ b/src/components/common/DatePickers/constants.ts
@@ -0,0 +1,31 @@
+export const customStyles = {
+    PresetDateRangePicker_panel: {
+        padding: '0px',
+        width: '200px',
+        height: '100%',
+    },
+    PresetDateRangePicker_button: {
+        width: '188px',
+        background: 'var(--transparent)',
+        border: 'none',
+        color: 'var(--N900)',
+        padding: '8px',
+        font: 'inherit',
+        fontWeight: 500,
+        lineHeight: 'normal',
+        overflow: 'visible',
+        cursor: 'pointer',
+        ':active': {
+            outline: 0,
+        },
+    },
+    DayPicker__horizontal: {
+        borderRadius: '4px',
+    },
+    PresetDateRangePicker_button__selected: {
+        color: 'var(--B500)',
+        fontWeight: 600,
+        background: 'var(--B100)',
+        outline: 'none',
+    },
+}
diff --git a/src/components/common/navigation/Navigation.tsx b/src/components/common/navigation/Navigation.tsx
index 2fc2259364..0ca6c8ccc8 100644
--- a/src/components/common/navigation/Navigation.tsx
+++ b/src/components/common/navigation/Navigation.tsx
@@ -17,7 +17,7 @@
 import React, { Component } from 'react'
 import { NavLink, RouteComponentProps } from 'react-router-dom'
 import ReactGA from 'react-ga4'
-import { URLS as CommonURLS, Icon, MainContext } from '@devtron-labs/devtron-fe-common-lib'
+import { URLS as CommonURLS, Icon, MainContext, URLS as CommonUrls } from '@devtron-labs/devtron-fe-common-lib'
 import {
     ModuleNameMap,
     MODULE_STATUS_POLLING_INTERVAL,
@@ -96,6 +96,16 @@ const NavigationList: NavigationListItemType[] = [
         markAsBeta: false,
         isAvailableInDesktop: true,
     },
+    {
+        title: 'Observability',
+        dataTestId: 'click-on-observability',
+        type: 'link',
+        icon: 'ic-binoculars',
+        href: CommonUrls.OBSERVABILITY,
+        isAvailableInEA: false,
+        markAsBeta: false,
+        isAvailableInDesktop: true,
+    },
     {
         title: 'Resource Watcher',
         dataTestId: 'click-on-resource-watcher',
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index b9d174013d..ce85976fd2 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -104,6 +104,7 @@ const OnboardingGuide = lazy(() => import('../../onboardingGuide/OnboardingGuide
 const DevtronStackManager = lazy(() => import('../../v2/devtronStackManager/DevtronStackManager'))
 const AppGroupRoute = lazy(() => import('../../ApplicationGroup/AppGroupRoute'))
 const Jobs = lazy(() => import('../../Jobs/Jobs'))
+const Observability = lazy(() => import('../../observability/ObservabilityRouter'))
 
 const ResourceWatcherRouter = importComponentFromFELibrary('ResourceWatcherRouter')
 const SoftwareDistributionHub = importComponentFromFELibrary('SoftwareDistributionHub', null, 'function')
@@ -549,6 +550,9 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                                             path={URLS.SECURITY}
                                             render={(props) => <Security {...props} serverMode={serverMode} />}
                                         />,
+                                        <Route key={CommonURLS.OBSERVABILITY} path={CommonURLS.OBSERVABILITY}>
+                                            <Observability />
+                                        </Route>,
                                         ...(!window._env_.HIDE_RESOURCE_WATCHER && ResourceWatcherRouter
                                             ? [
                                                   <Route key={URLS.RESOURCE_WATCHER} path={URLS.RESOURCE_WATCHER}>
diff --git a/src/components/observability/Customer/CustomerList.tsx b/src/components/observability/Customer/CustomerList.tsx
new file mode 100644
index 0000000000..0df426c294
--- /dev/null
+++ b/src/components/observability/Customer/CustomerList.tsx
@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import { FiltersTypeEnum, PaginationEnum, Table, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+
+import { CUSTOMER_TABLE_COLUMN } from '../constants'
+import { getCustomerListData } from '../service'
+import { CustomerObservabilityDTO, CustomerTableProps } from '../types'
+
+export const CustomerList = () => {
+    // ASYNC CALLS
+    const [isFetching, customerData] = useAsync(() => getCustomerListData(), [])
+
+    // CONFIGS
+    const rows = useMemo<CustomerTableProps['rows']>(
+        () =>
+            (customerData || []).map((data) => ({
+                id: `observe_project_${data.id.toString()}`,
+                data,
+            })),
+        [customerData],
+    )
+
+    const filter: CustomerTableProps['filter'] = (
+        rowData: { id: string; data: CustomerObservabilityDTO },
+        filterData: { searchKey: string },
+    ) => rowData.data.name.toLowerCase().includes(filterData.searchKey.toLowerCase())
+
+    return (
+        <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
+            <Table<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>
+                id="table__customer-list"
+                loading={isFetching}
+                stylesConfig={{ showSeparatorBetweenRows: true }}
+                columns={CUSTOMER_TABLE_COLUMN}
+                rows={rows}
+                filtersVariant={FiltersTypeEnum.STATE}
+                emptyStateConfig={{
+                    noRowsConfig: {
+                        title: 'No resources found',
+                        subTitle: `No resources found in this cluster for upgrade compatibility check`,
+                    },
+                }}
+                filter={filter}
+                additionalFilterProps={{
+                    initialSortKey: 'name',
+                }}
+                paginationVariant={PaginationEnum.PAGINATED}
+            />
+        </div>
+    )
+}
diff --git a/src/components/observability/Customer/CustomerListCellComponent.tsx b/src/components/observability/Customer/CustomerListCellComponent.tsx
new file mode 100644
index 0000000000..c9d632eed7
--- /dev/null
+++ b/src/components/observability/Customer/CustomerListCellComponent.tsx
@@ -0,0 +1,86 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+
+import {
+    FiltersTypeEnum,
+    Icon,
+    TableCellComponentProps,
+    TableSignalEnum,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { CustomerObservabilityDTO, ObservabilityListFields } from '../types'
+
+export const CustomerListCellComponent: FunctionComponent<
+    TableCellComponentProps<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>
+> = ({
+    field,
+    row: {
+        data: { id, name, status, projects, totalVms, activeVms, healthStatus, icon },
+    },
+    isRowActive,
+    signals,
+}: TableCellComponentProps<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>) => {
+    const linkRef = useRef<HTMLAnchorElement>(null)
+    const match = useRouteMatch()
+
+    useEffect(() => {
+        const handleEnter = ({ detail: { activeRowData } }) => {
+            if (activeRowData.data.id === id) {
+                linkRef.current?.click()
+            }
+        }
+
+        if (isRowActive) {
+            signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+
+        return () => {
+            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+    }, [isRowActive])
+
+    switch (field) {
+        case ObservabilityListFields.ICON:
+            return (
+                <span className="flexbox dc__align-items-center dc__gap-6 py-10">
+                    <Icon name={icon as any} color={null} size={24} />
+                </span>
+            )
+        case ObservabilityListFields.PROJECT_NAME:
+            return (
+                <Link
+                    ref={linkRef}
+                    to={`${match.path}/${name}/overview`}
+                    className="flexbox dc__align-items-center dc__gap-6 py-10"
+                >
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                </Link>
+            )
+        case ObservabilityListFields.STATUS:
+            return (
+                <span className="flexbox dc__align-items-center dc__gap-6">
+                    <Icon name={status === 'ACTIVE' ? 'ic-success' : 'ic-error'} color={null} />
+                    {status}
+                </span>
+            )
+        case ObservabilityListFields.PROJECTS:
+            return <span className="flexbox dc__align-items-center dc__gap-6 py-10">{projects}</span>
+        case ObservabilityListFields.TOTAL_VMS:
+            return <span className="flexbox dc__align-items-center dc__gap-6 py-10">{totalVms}</span>
+        case ObservabilityListFields.ACTIVE_VMS:
+            return <span className="flexbox dc__align-items-center dc__gap-6 py-10">{activeVms}</span>
+        case ObservabilityListFields.HEALTH_STATUS:
+            return (
+                <div className="flexbox dc__align-items-center dc__gap-6 py-10">
+                    <Tooltip content={healthStatus}>
+                        <span className="dc__truncate">{healthStatus}</span>
+                    </Tooltip>
+                </div>
+            )
+        default:
+            return null
+    }
+}
diff --git a/src/components/observability/Customer/Customers.tsx b/src/components/observability/Customer/Customers.tsx
new file mode 100644
index 0000000000..3c5c1a83cf
--- /dev/null
+++ b/src/components/observability/Customer/Customers.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useState } from 'react'
+import { useRouteMatch } from 'react-router-dom'
+
+import {
+    BreadCrumb,
+    ComponentSizeType,
+    handleUTCTime,
+    PageHeader,
+    SearchBar,
+    TabGroup,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { getBreadCrumbObj } from '../utils'
+import { CustomerList } from './CustomerList'
+
+let interval
+const Customers = () => {
+    const { url, path } = useRouteMatch()
+    const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
+    const [isDataSyncing, setDataSyncing] = useState(false)
+    const [syncListData, setSyncListData] = useState<boolean>()
+    // TODO: Remove later
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [selectedTabIndex, setSelectedTabIndex] = useState(0)
+    const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
+    useEffect(() => {
+        if (isDataSyncing) {
+            setLastDataSyncTimeString(renderDataSyncingText)
+        } else {
+            const _lastDataSyncTime = Date()
+            setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            interval = setInterval(() => {
+                setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            }, 1000)
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval)
+            }
+        }
+    }, [isDataSyncing])
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const updateDataSyncing = (loading: boolean): void => {
+        setDataSyncing(loading)
+    }
+
+    const getObservabilityTabs = () => (
+        <TabGroup
+            tabs={[
+                {
+                    id: 'observability',
+                    label: 'Overview',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path.replace('tenants', 'overview')}`,
+                    },
+                },
+                {
+                    id: 'tenants',
+                    label: 'Tenants',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path}`,
+                        'data-testid': 'tenants',
+                    },
+                },
+            ]}
+            hideTopPadding
+        />
+    )
+
+    const syncNow = (): void => {
+        setSyncListData(!syncListData)
+    }
+
+    const renderLastSyncComponent = () => (
+        <div className="flex fs-13">
+            {lastDataSyncTimeString && (
+                <>
+                    <span data-testid="sync-now-text">{lastDataSyncTimeString}</span>
+                    {!isDataSyncing && (
+                        <>
+                            &nbsp;
+                            <button
+                                className="btn btn-link p-0 fw-6 cb-5 mb-2"
+                                type="button"
+                                onClick={syncNow}
+                                data-testid="sync-now-button"
+                            >
+                                Sync now
+                            </button>
+                        </>
+                    )}
+                </>
+            )}
+            {fetchingExternalApps && renderDataSyncingText()}
+        </div>
+    )
+
+    const { breadcrumbs } = useBreadcrumb(getBreadCrumbObj('project', url))
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    const renderPageHeader = () => (
+        <PageHeader showTabs renderHeaderTabs={getObservabilityTabs} breadCrumbs={renderBreadcrumbs} isBreadcrumbs />
+    )
+    const searchKey = ''
+    const handleSearch = () => {}
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto">
+            {renderPageHeader()}
+            <div className="flex dc__content-space  p-16 w-100 dc__gap-8 ">
+                <div className="flexbox dc__align-items-center dc__mxw-fit-content">
+                    <SearchBar
+                        containerClassName="w-250"
+                        dataTestId="search-customer-env"
+                        initialSearchText={searchKey}
+                        inputProps={{
+                            placeholder: 'Search customer',
+                        }}
+                        handleEnter={handleSearch}
+                        size={ComponentSizeType.medium}
+                        keyboardShortcut="/"
+                    />
+                </div>
+                {renderLastSyncComponent()}
+            </div>
+
+            <CustomerList />
+        </div>
+    )
+}
+
+export default Customers
diff --git a/src/components/observability/Customer/index.ts b/src/components/observability/Customer/index.ts
new file mode 100644
index 0000000000..67c2f5def6
--- /dev/null
+++ b/src/components/observability/Customer/index.ts
@@ -0,0 +1 @@
+export { default as Customers } from './Customers'
diff --git a/src/components/observability/Metrics/BarMetrics.tsx b/src/components/observability/Metrics/BarMetrics.tsx
new file mode 100644
index 0000000000..c1818a4868
--- /dev/null
+++ b/src/components/observability/Metrics/BarMetrics.tsx
@@ -0,0 +1,30 @@
+import { Tooltip } from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { BarMetricsProps } from '../types'
+import { CPUCapacityCellComponent, DiskCapacityCellComponent, MemoryCapacityCellComponent } from '../utils'
+
+export const BarMetrics = ({ data }: BarMetricsProps) => (
+    <div className="flexbox-col bg__primary border__secondary br-8">
+        <div className="flex dc__content-space py-12 px-16">
+            <span className="fs-14 fw-6 lh-1-5 cn-9">Tenants Capacity & Resource Allocation</span>
+        </div>
+        <div className="flexbox-col">
+            <div className="dc__grid dc__gap-24 bar-chart-table-row fs-12 fw-6 lh-20 cn-7 px-16 py-8">
+                <span>TENANTS NAME</span>
+                <span>CPU</span>
+                <span>MEMORY</span>
+                <span>DISK</span>
+            </div>
+            {data?.map(({ disk, name, memory, cpu }) => (
+                <div key={name} className="dc__grid dc__gap-24 bar-chart-table-row p-16 dc__hover-n50">
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                    <CPUCapacityCellComponent cpu={cpu} />
+                    <MemoryCapacityCellComponent memory={memory} />
+                    <DiskCapacityCellComponent disk={disk} />
+                </div>
+            ))}
+        </div>
+    </div>
+)
diff --git a/src/components/observability/Metrics/ObservabilityGraphMetrics.tsx b/src/components/observability/Metrics/ObservabilityGraphMetrics.tsx
new file mode 100644
index 0000000000..9ff5d8d5e7
--- /dev/null
+++ b/src/components/observability/Metrics/ObservabilityGraphMetrics.tsx
@@ -0,0 +1,195 @@
+import { useEffect, useState } from 'react'
+import Tippy from '@tippyjs/react'
+import moment, { Moment } from 'moment'
+
+import { useTheme } from '@devtron-labs/devtron-fe-common-lib'
+
+import {
+    CalendarFocusInput,
+    CalendarFocusInputType,
+    ChartType,
+} from '@Components/app/details/appDetails/appDetails.type'
+import { APP_METRICS_CALENDAR_INPUT_DATE_FORMAT } from '@Components/app/details/appDetails/constants'
+import { GraphModalProps } from '@Components/app/details/appDetails/GraphsModal'
+import { AppInfo, getCalendarValue, getIframeSrc } from '@Components/app/details/appDetails/utils'
+import { DatePickerType2 } from '@Components/common'
+
+import { ReactComponent as Fullscreen } from '../../../assets/icons/ic-fullscreen-2.svg'
+
+import '../styles.scss'
+
+export const ObservabilityGraphMetrics = () => {
+    const { appTheme } = useTheme()
+
+    const [dateRange, setDateRange] = useState<{ startDate: Moment; endDate: Moment }>({
+        startDate: moment().subtract(5, 'minute'),
+        endDate: moment(),
+    })
+    const [calendarInputs, setCalendarInput] = useState<{ startDate: string; endDate: string }>({
+        startDate: 'now-5m',
+        endDate: 'now',
+    })
+    const [focusedInput, setFocusedInput] = useState(CalendarFocusInput.StartDate)
+    const [calendarValue, setCalendarValue] = useState('')
+    const [graphs, setGraphs] = useState({
+        cpu: '',
+        ram: '',
+    })
+
+    const getIframeSrcWrapper: GraphModalProps['getIframeSrcWrapper'] = (params) =>
+        getIframeSrc({
+            ...params,
+            grafanaTheme: appTheme,
+        })
+
+    const appInfo: AppInfo = {
+        appId: 740,
+        envId: 36,
+        dataSourceName: '',
+        newPodHash: '',
+        k8sVersion: '',
+    }
+
+    function getNewGraphs(): void {
+        const cpu = getIframeSrcWrapper({
+            appInfo,
+            chartName: ChartType.Cpu,
+            calendarInputs,
+            tab: 'aggregate',
+            isLegendRequired: true,
+        })
+        const ram = getIframeSrcWrapper({
+            appInfo,
+            chartName: ChartType.Ram,
+            calendarInputs,
+            tab: 'aggregate',
+            isLegendRequired: true,
+        })
+        setGraphs({
+            cpu,
+            ram,
+        })
+    }
+
+    useEffect(() => {
+        getNewGraphs()
+    }, [calendarValue, appTheme])
+
+    const handlePredefinedRange = (start: Moment, end: Moment, startStr: string): void => {
+        setDateRange({
+            startDate: start,
+            endDate: end,
+        })
+        setCalendarInput({
+            startDate: startStr,
+            endDate: 'now',
+        })
+        const str = getCalendarValue(startStr, 'now')
+        setCalendarValue(str)
+    }
+
+    const handleDatesChange = ({ startDate, endDate }): void => {
+        setDateRange({
+            startDate,
+            endDate,
+        })
+        setCalendarInput({
+            startDate: startDate?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT),
+            endDate: endDate?.format(APP_METRICS_CALENDAR_INPUT_DATE_FORMAT) || '',
+        })
+    }
+
+    const handleDateInput = (key: CalendarFocusInputType, value: string): void => {
+        setCalendarInput({
+            ...calendarInputs,
+            [key]: value,
+        })
+    }
+
+    const handleFocusChange = (_focusedInput): void => {
+        setFocusedInput(_focusedInput || CalendarFocusInput.StartDate)
+    }
+
+    const handleApply = (): void => {
+        const str = getCalendarValue(calendarInputs.startDate, calendarInputs.endDate)
+        setCalendarValue(str)
+    }
+
+    return (
+        <div className="bg__primary border__secondary br-8 dc__content-space">
+            <div className="flex dc__content-space py-12 px-16">
+                <span className="fs-14 fw-6 lh-1-5 cn-9">Observability Metrics </span>
+                <DatePickerType2
+                    calendar={dateRange}
+                    calendarInputs={calendarInputs}
+                    focusedInput={focusedInput}
+                    calendarValue={calendarValue}
+                    handlePredefinedRange={handlePredefinedRange}
+                    handleDatesChange={handleDatesChange}
+                    handleFocusChange={handleFocusChange}
+                    handleDateInput={handleDateInput}
+                    handleApply={handleApply}
+                />
+            </div>
+
+            <div className="chart-containers px-16">
+                <div data-testid="app-metrics-memory-usage" className="app-metrics-graph chart">
+                    <div className="app-metrics-graph__title flexbox flex-justify">
+                        VMs Usage
+                        <Tippy className="default-tt" arrow={false} placement="bottom" content="Fullscreen">
+                            <div className="flex">
+                                <Fullscreen
+                                    className="icon-dim-16 cursor fcn-5"
+                                    // onClick={openTempAppWindow(ChartType.Status)}
+                                />
+                            </div>
+                        </Tippy>
+                    </div>
+                    <iframe title={ChartType.Ram} src={graphs.ram} className="app-metrics-graph__iframe" />
+                </div>
+                <div data-testid="app-metrics-cpu-usage" className="app-metrics-graph chart">
+                    <div className="app-metrics-graph__title flexbox flex-justify">
+                        CPU Usage
+                        <Tippy className="default-tt" arrow={false} placement="bottom" content="Fullscreen">
+                            <div className="flex">
+                                <Fullscreen
+                                    className="icon-dim-16 cursor fcn-5"
+                                    // onClick={openTempAppWindow(ChartType.Cpu)}
+                                />
+                            </div>
+                        </Tippy>
+                    </div>
+                    <iframe title={ChartType.Cpu} src={graphs.cpu} className="app-metrics-graph__iframe" />
+                </div>
+                <div data-testid="app-metrics-memory-usage" className="app-metrics-graph chart">
+                    <div className="app-metrics-graph__title flexbox flex-justify">
+                        Memory Usage
+                        <Tippy className="default-tt" arrow={false} placement="bottom" content="Fullscreen">
+                            <div className="flex">
+                                <Fullscreen
+                                    className="icon-dim-16 cursor fcn-5"
+                                    // onClick={openTempAppWindow(ChartType.Status)}
+                                />
+                            </div>
+                        </Tippy>
+                    </div>
+                    <iframe title={ChartType.Ram} src={graphs.ram} className="app-metrics-graph__iframe" />
+                </div>
+                <div data-testid="app-metrics-memory-usage" className="app-metrics-graph chart">
+                    <div className="app-metrics-graph__title flexbox flex-justify">
+                        Disk Usage
+                        <Tippy className="default-tt" arrow={false} placement="bottom" content="Fullscreen">
+                            <div className="flex">
+                                <Fullscreen
+                                    className="icon-dim-16 cursor fcn-5"
+                                    // onClick={openTempAppWindow(ChartType.Status)}
+                                />
+                            </div>
+                        </Tippy>
+                    </div>
+                    <iframe title={ChartType.Ram} src={graphs.ram} className="app-metrics-graph__iframe" />
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/observability/MetricsInfoCard.tsx b/src/components/observability/MetricsInfoCard.tsx
new file mode 100644
index 0000000000..6643f139cb
--- /dev/null
+++ b/src/components/observability/MetricsInfoCard.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react'
+
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ConditionalWrap,
+    Icon,
+    motion,
+    noop,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { MetricsInfoCardProps } from './types'
+
+export const MetricsInfoCard = ({
+    dataTestId,
+    metricTitle,
+    metricValue,
+    metricUnit,
+    valueOutOf,
+    iconName,
+    redirectionLink,
+    tooltipContent,
+}: MetricsInfoCardProps) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const handleHoverStart = () => setIsHovering(true)
+    const handleHoverEnd = () => setIsHovering(false)
+
+    return (
+        <ConditionalWrap condition={!!redirectionLink} wrap={noop}>
+            <motion.div
+                data-testid={dataTestId}
+                onHoverStart={redirectionLink ? handleHoverStart : noop}
+                onHoverEnd={redirectionLink ? handleHoverEnd : noop}
+                className={`flexbox-col br-8 bg__primary border__secondary cn-9 ${isHovering ? 'shadow__card--10' : ''}`}
+            >
+                <div className="flexbox dc__gap-12 p-16 dc__content-space">
+                    <div className="flexbox-col">
+                        <Tooltip alwaysShowTippyOnHover content={tooltipContent}>
+                            <span className={`fs-13 fw-4 lh-20 ${isHovering ? 'dc__underline-dotted' : ''}`}>
+                                {metricTitle}
+                            </span>
+                        </Tooltip>
+                        <div className="flexbox dc__gap-4 dc__align-baseline font-ibm-plex-sans">
+                            <span className="fs-24 fw-6 lh-1-5">{metricValue}</span>
+                            {valueOutOf && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">/ {valueOutOf}</span>
+                            )}
+                            {metricUnit && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">{metricUnit}</span>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        {isHovering ? (
+                            <Button
+                                dataTestId={`redirect-to-${metricTitle}`}
+                                icon={<Icon name="ic-arrow-square-out" color="B500" />}
+                                ariaLabel="redirect"
+                                showAriaLabelInTippy={false}
+                                style={ButtonStyleType.default}
+                                variant={ButtonVariantType.borderLess}
+                            />
+                        ) : (
+                            <Icon size={36} color={null} name={iconName} />
+                        )}
+                    </div>
+                </div>
+            </motion.div>
+        </ConditionalWrap>
+    )
+}
diff --git a/src/components/observability/ObservabilityIcon.tsx b/src/components/observability/ObservabilityIcon.tsx
new file mode 100644
index 0000000000..4437780867
--- /dev/null
+++ b/src/components/observability/ObservabilityIcon.tsx
@@ -0,0 +1,25 @@
+import {
+    Button,
+    ButtonComponentType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Icon,
+    URLS,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+const ObservabilityIconComponent = () => (
+    <Button
+        dataTestId="redirect-to-observability-overview-btn"
+        component={ButtonComponentType.link}
+        size={ComponentSizeType.xs}
+        variant={ButtonVariantType.borderLess}
+        linkProps={{
+            to: URLS.OBSERVABILITY_OVERVIEW,
+        }}
+        ariaLabel="Observability"
+        showAriaLabelInTippy
+        icon={<Icon name="ic-binoculars" color={null} />}
+    />
+)
+
+export default ObservabilityIconComponent
diff --git a/src/components/observability/ObservabilityRouter.tsx b/src/components/observability/ObservabilityRouter.tsx
new file mode 100644
index 0000000000..271b540727
--- /dev/null
+++ b/src/components/observability/ObservabilityRouter.tsx
@@ -0,0 +1,47 @@
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
+
+import { URLS } from '@devtron-labs/devtron-fe-common-lib'
+
+import Customers from './Customer/Customers'
+import Project from './ProjectObservability/Project'
+import VM from './VMObservability/VM'
+import { Overview } from './Overview'
+
+const ObservabilityRouter: React.FC = () => {
+    const { path, url } = useRouteMatch()
+    return (
+        <Switch>
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId/projects/:projectId/vms/:vmId`}>
+                <Overview view="singleVm" url={url} />
+            </Route>
+
+            <Route exact path={URLS.OBSERVABILITY_OVERVIEW}>
+                <Overview view="tenants" url={url} />
+            </Route>
+
+            <Route exact path={URLS.OBSERVABILITY_CUSTOMER_LIST}>
+                <Customers />
+            </Route>
+
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId/projects/:projectId`}>
+                <VM />
+            </Route>
+
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId/projects/:projectId/vms/overview`}>
+                <Overview view="vm" url={url} />
+            </Route>
+
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId`}>
+                <Project />
+            </Route>
+
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId/overview`}>
+                <Overview view="project" url={url} />
+            </Route>
+
+            <Redirect from={path} to={URLS.OBSERVABILITY_OVERVIEW} />
+        </Switch>
+    )
+}
+
+export default ObservabilityRouter
diff --git a/src/components/observability/Overview.tsx b/src/components/observability/Overview.tsx
new file mode 100644
index 0000000000..788b809c59
--- /dev/null
+++ b/src/components/observability/Overview.tsx
@@ -0,0 +1,80 @@
+import { useRouteMatch } from 'react-router-dom'
+
+import {
+    BreadCrumb,
+    GenericSectionErrorState,
+    PageHeader,
+    TabGroup,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { BarMetrics } from './Metrics/BarMetrics'
+import { ObservabilityGraphMetrics } from './Metrics/ObservabilityGraphMetrics'
+import { MetricsInfoCard } from './MetricsInfoCard'
+import { GlanceMetricsKeys, OverviewProps } from './types'
+import { getBreadCrumbObj, getTabsObj, MetricsInfoLoadingCard, useGetGlanceConfig } from './utils'
+
+import './styles.scss'
+
+export const Overview = ({ view = 'tenants', url }: OverviewProps) => {
+    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
+
+    const { path } = useRouteMatch()
+
+    const getObservabilityTabs = () => <TabGroup tabs={getTabsObj(view, path)} hideTopPadding />
+
+    const { breadcrumbs } = useBreadcrumb(getBreadCrumbObj(view, url), [])
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+    const renderPageHeader = () => (
+        <PageHeader
+            showTabs={view !== 'singleVm'}
+            renderHeaderTabs={getObservabilityTabs}
+            breadCrumbs={renderBreadcrumbs}
+            isBreadcrumbs
+        />
+    )
+    const renderGlanceConfig = () => {
+        if (isFetching) {
+            return (
+                <div className="dc__grid glance-cards-wrapper">
+                    {Object.keys(GlanceMetricsKeys).map((key) => (
+                        <MetricsInfoLoadingCard key={key} />
+                    ))}
+                </div>
+            )
+        }
+
+        if (isError) {
+            return <GenericSectionErrorState reload={refetch} rootClassName="bg__primary br-8 border__secondary" />
+        }
+
+        return (
+            <div className="dc__grid glance-cards-wrapper">
+                {data?.glanceConfig.map((config) => <MetricsInfoCard {...config} key={config.metricTitle} />)}
+            </div>
+        )
+    }
+
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto flexbox-col">
+            {renderPageHeader()}
+            <div className="flexbox-col dc__gap-32 bg__secondary p-20 flex-grow-1">
+                {view !== 'singleVm' && (
+                    <div className="flexbox-col dc__gap-12">
+                        <div className="flexbox dc__content-space">
+                            <h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
+                        </div>
+                        {renderGlanceConfig()}
+                    </div>
+                )}
+                <div className="flexbox-col dc__gap-12">
+                    <h2 className="m-0 fs-20 lh-1-5 fw-4 cn-9">Observability Metrics</h2>
+                    <ObservabilityGraphMetrics />
+
+                    <BarMetrics data={data?.metrics} />
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/observability/ProjectObservability/Project.tsx b/src/components/observability/ProjectObservability/Project.tsx
new file mode 100644
index 0000000000..51c3b1e81a
--- /dev/null
+++ b/src/components/observability/ProjectObservability/Project.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react'
+import { Route, useRouteMatch } from 'react-router-dom'
+
+import { BreadCrumb, handleUTCTime, TabGroup, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
+
+import { Overview } from '../Overview'
+import { getBreadCrumbObj, getTabsObj } from '../utils'
+import ProjectList from './ProjectList'
+
+let interval
+const Project = () => {
+    const { url } = useRouteMatch()
+
+    const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
+    const [isDataSyncing, setDataSyncing] = useState(false)
+    const [syncListData, setSyncListData] = useState<boolean>()
+
+    // TODO: Remove later
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
+
+    const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
+    useEffect(() => {
+        if (isDataSyncing) {
+            setLastDataSyncTimeString(renderDataSyncingText)
+        } else {
+            const _lastDataSyncTime = Date()
+            setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            interval = setInterval(() => {
+                setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            }, 1000)
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval)
+            }
+        }
+    }, [isDataSyncing])
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const updateDataSyncing = (loading: boolean): void => {
+        setDataSyncing(loading)
+    }
+
+    const syncNow = (): void => {
+        setSyncListData(!syncListData)
+    }
+
+    const rightComponent = (
+        <div className="flex fs-13">
+            {lastDataSyncTimeString && (
+                <>
+                    <span data-testid="sync-now-text">{lastDataSyncTimeString}</span>
+                    {!isDataSyncing && (
+                        <>
+                            &nbsp;
+                            <button
+                                className="btn btn-link p-0 fw-6 cb-5 mb-2"
+                                type="button"
+                                onClick={syncNow}
+                                data-testid="sync-now-button"
+                            >
+                                Sync now
+                            </button>
+                        </>
+                    )}
+                </>
+            )}
+            {fetchingExternalApps && renderDataSyncingText()}
+        </div>
+    )
+
+    const renderProjectTabs = () => (
+        <TabGroup tabs={getTabsObj('project', url)} rightComponent={rightComponent} hideTopPadding />
+    )
+
+    const { breadcrumbs } = useBreadcrumb(getBreadCrumbObj('project', url))
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto">
+            <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
+                <Route path={`${url}/overview`}>
+                    <Overview view="project" url={url} />
+                </Route>
+                <Route path={`${url}/projects`}>
+                    <ProjectList renderTabs={renderProjectTabs} renderBreadcrumbs={renderBreadcrumbs} />
+                </Route>
+            </div>
+        </div>
+    )
+}
+
+export default Project
diff --git a/src/components/observability/ProjectObservability/ProjectList.tsx b/src/components/observability/ProjectObservability/ProjectList.tsx
new file mode 100644
index 0000000000..d9c1748530
--- /dev/null
+++ b/src/components/observability/ProjectObservability/ProjectList.tsx
@@ -0,0 +1,83 @@
+import { useMemo, useState } from 'react'
+
+import {
+    ComponentSizeType,
+    FiltersTypeEnum,
+    PageHeader,
+    PaginationEnum,
+    SearchBar,
+    Table,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { PROJECT_TABLE_COLUMNS } from '../constants'
+import { getProjectList } from '../service'
+import { ObservabilityProject, ProjectTableProps } from '../types'
+
+const ProjectList = ({ renderBreadcrumbs, renderTabs }: { renderBreadcrumbs; renderTabs }) => {
+    // ASYNC CALLS
+    const [isFetching, projectData] = useAsync(() => getProjectList(), [])
+    const [searchKey, setSearchKey] = useState('')
+
+    // CONFIGS
+    const rows = useMemo<ProjectTableProps['rows']>(
+        () =>
+            (projectData || []).map((data) => ({
+                id: `observe_project_${data.id.toString()}`,
+                data,
+            })),
+        [projectData],
+    )
+
+    const handleSearch = (_searchKey: string) => {
+        setSearchKey(_searchKey)
+    }
+
+    const filter: ProjectTableProps['filter'] = (
+        rowData: { id: string; data: ObservabilityProject },
+        filterData: { searchKey: string },
+    ) => rowData.data.name.toLowerCase().includes(filterData.searchKey.toLowerCase())
+
+    return (
+        <div>
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} showTabs renderHeaderTabs={renderTabs} />
+
+            <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
+                <div className="px-20 py-12">
+                    <SearchBar
+                        containerClassName="w-250"
+                        dataTestId="search-project-env"
+                        initialSearchText={searchKey}
+                        inputProps={{
+                            placeholder: 'Search project',
+                        }}
+                        handleEnter={handleSearch}
+                        size={ComponentSizeType.medium}
+                        keyboardShortcut="/"
+                    />
+                </div>
+                <Table<ObservabilityProject, FiltersTypeEnum.STATE, {}>
+                    id="table__customer-list"
+                    loading={isFetching}
+                    stylesConfig={{ showSeparatorBetweenRows: true }}
+                    columns={PROJECT_TABLE_COLUMNS}
+                    rows={rows}
+                    filtersVariant={FiltersTypeEnum.STATE}
+                    paginationVariant={PaginationEnum.NOT_PAGINATED}
+                    emptyStateConfig={{
+                        noRowsConfig: {
+                            title: 'No resources found',
+                            subTitle: `No resources found in this cluster for upgrade compatibility check`,
+                        },
+                    }}
+                    filter={filter}
+                    additionalFilterProps={{
+                        initialSortKey: 'name',
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default ProjectList
diff --git a/src/components/observability/ProjectObservability/ProjectListCellComponent.tsx b/src/components/observability/ProjectObservability/ProjectListCellComponent.tsx
new file mode 100644
index 0000000000..891bfd060c
--- /dev/null
+++ b/src/components/observability/ProjectObservability/ProjectListCellComponent.tsx
@@ -0,0 +1,77 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+
+import {
+    FiltersTypeEnum,
+    TableCellComponentProps,
+    TableSignalEnum,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { ObservabilityListFields, ObservabilityProject } from '../types'
+
+export const ProjectListCellComponent: FunctionComponent<
+    TableCellComponentProps<ObservabilityProject, FiltersTypeEnum.STATE, {}>
+> = ({
+    field,
+    row: {
+        data: { id, name, description, status, totalVms, activeVms, healthStatus },
+    },
+    isRowActive,
+    signals,
+}: TableCellComponentProps<ObservabilityProject, FiltersTypeEnum.STATE, {}>) => {
+    const linkRef = useRef<HTMLAnchorElement>(null)
+
+    const match = useRouteMatch()
+
+    useEffect(() => {
+        const handleEnter = ({ detail: { activeRowData } }) => {
+            if (activeRowData.data.id === id) {
+                linkRef.current?.click()
+            }
+        }
+
+        if (isRowActive) {
+            signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+
+        return () => {
+            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+    }, [isRowActive])
+
+    switch (field) {
+        case ObservabilityListFields.PROJECT_NAME:
+            return (
+                <Link ref={linkRef} to={`${match.path}/${name}/overview`} className="flex left py-10">
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                </Link>
+            )
+        case ObservabilityListFields.PROJECT_DESCRIPTION:
+            return <span className="flex left py-10">{description}</span>
+        case ObservabilityListFields.STATUS:
+            return <span className="flex left py-10">{status}</span>
+        case ObservabilityListFields.TOTAL_VMS:
+            return <span className="flex left py-10">{totalVms}</span>
+        case ObservabilityListFields.ACTIVE_VMS:
+            return (
+                <div className="flex left py-10">
+                    <Tooltip content={activeVms}>
+                        <span className="dc__truncate">{activeVms}</span>
+                    </Tooltip>
+                </div>
+            )
+        case ObservabilityListFields.HEALTH_STATUS:
+            return (
+                <div className="flex left py-10">
+                    <Tooltip content={healthStatus}>
+                        <span className="dc__truncate">{healthStatus}</span>
+                    </Tooltip>
+                </div>
+            )
+        default:
+            return null
+    }
+}
diff --git a/src/components/observability/ProjectObservability/index.ts b/src/components/observability/ProjectObservability/index.ts
new file mode 100644
index 0000000000..02e1b0e063
--- /dev/null
+++ b/src/components/observability/ProjectObservability/index.ts
@@ -0,0 +1 @@
+export { default as ProjectObservability } from './Project'
diff --git a/src/components/observability/SingleVMOverview.tsx b/src/components/observability/SingleVMOverview.tsx
new file mode 100644
index 0000000000..eb073753b2
--- /dev/null
+++ b/src/components/observability/SingleVMOverview.tsx
@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    GenericSectionErrorState,
+    handleUTCTime,
+    PageHeader,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { MetricsInfoCard } from './MetricsInfoCard'
+import ObservabilityIconComponent from './ObservabilityIcon'
+import { GlanceMetricsKeys } from './types'
+import { MetricsInfoLoadingCard, useGetGlanceConfig } from './utils'
+
+import './styles.scss'
+
+let interval
+const SingleVMOverview = () => {
+    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
+
+    const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
+    const [isDataSyncing, setDataSyncing] = useState(false)
+    const [syncListData, setSyncListData] = useState<boolean>()
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
+    const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
+    useEffect(() => {
+        if (isDataSyncing) {
+            setLastDataSyncTimeString(renderDataSyncingText)
+        } else {
+            const _lastDataSyncTime = Date()
+            setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            interval = setInterval(() => {
+                setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            }, 1000)
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval)
+            }
+        }
+    }, [isDataSyncing])
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const updateDataSyncing = (loading: boolean): void => {
+        setDataSyncing(loading)
+    }
+
+    const { breadcrumbs } = useBreadcrumb({
+        alias: {
+            observability: {
+                component: <ObservabilityIconComponent />,
+                linked: true,
+            },
+            customer: {
+                component: <BreadcrumbText heading="VMs" isActive />,
+                linked: false,
+            },
+        },
+    })
+
+    const renderBody = () => {
+        if (isFetching) {
+            return (
+                <div className="dc__grid glance-cards-wrapper">
+                    {Object.keys(GlanceMetricsKeys).map((key) => (
+                        <MetricsInfoLoadingCard key={key} />
+                    ))}
+                </div>
+            )
+        }
+
+        if (isError) {
+            return (
+                <GenericSectionErrorState
+                    subTitle=""
+                    reload={refetch}
+                    rootClassName="bg__primary br-8 border__secondary"
+                />
+            )
+        }
+        // alert(JSON.stringify(data))
+        return (
+            <div className="dc__grid workflow-overview-cards-wrapper">
+                {data.glanceConfig.map((value) => (
+                    <MetricsInfoCard key={value.metricTitle} {...value} />
+                ))}
+            </div>
+        )
+    }
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    const syncNow = (): void => {
+        setSyncListData(!syncListData)
+    }
+
+    const renderLastSyncComponent = () => (
+        <div className="flex fs-13">
+            {lastDataSyncTimeString && (
+                <>
+                    <span data-testid="sync-now-text">{lastDataSyncTimeString}</span>
+                    {!isDataSyncing && (
+                        <>
+                            &nbsp;
+                            <button
+                                className="btn btn-link p-0 fw-6 cb-5 mb-2"
+                                type="button"
+                                onClick={syncNow}
+                                data-testid="sync-now-button"
+                            >
+                                Sync now
+                            </button>
+                        </>
+                    )}
+                </>
+            )}
+            {fetchingExternalApps && renderDataSyncingText()}
+        </div>
+    )
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto">
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
+            <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1 bg__secondary">
+                {renderLastSyncComponent()}
+
+                <div className="flexbox-col dc__gap-16">
+                    <div className="flexbox dc__content-space dc__gap-16">
+                        <h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
+                    </div>
+                </div>
+                <div className="flexbox-col dc__gap-12">{renderBody()}</div>
+                <div className="dc__grid workflow-overview-cards-wrapper">
+                    <div className="flexbox-col bg__primary br-8 border__secondary">
+                        <div className="flex left px-16 py-12 border__secondary--bottom">
+                            <span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
+                        </div>
+                        <div className="flex h-200">
+                            <img src="https://community.grafana.com/t/drill-down-in-bar-graph/70193" alt="" />
+                        </div>
+                    </div>
+                    <div className="flexbox-col bg__primary br-8 border__secondary">
+                        <div className="flex left px-16 py-12 border__secondary--bottom">
+                            <span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
+                        </div>
+                        <div className="flex h-200">
+                            <img src="https://community.grafana.com/t/drill-down-in-bar-graph/70193" alt="" />
+                        </div>
+                    </div>
+                    <div className="flexbox-col bg__primary br-8 border__secondary">
+                        <div className="flex left px-16 py-12 border__secondary--bottom">
+                            <span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
+                        </div>
+                        <div className="flex h-200">
+                            <img src="https://community.grafana.com/t/drill-down-in-bar-graph/70193" alt="" />
+                        </div>
+                    </div>
+                    <div className="flexbox-col bg__primary br-8 border__secondary">
+                        <div className="flex left px-16 py-12 border__secondary--bottom">
+                            <span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
+                        </div>
+                        <div className="flex h-200">
+                            <img src="https://community.grafana.com/t/drill-down-in-bar-graph/70193" alt="" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SingleVMOverview
diff --git a/src/components/observability/VMObservability/VM.tsx b/src/components/observability/VMObservability/VM.tsx
new file mode 100644
index 0000000000..d271026261
--- /dev/null
+++ b/src/components/observability/VMObservability/VM.tsx
@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import { Redirect, Route, useRouteMatch } from 'react-router-dom'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    handleUTCTime,
+    TabGroup,
+    TabProps,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import ObservabilityIconComponent from '../ObservabilityIcon'
+import { Overview } from '../Overview'
+import VMList from './VMList'
+
+import '../styles.scss'
+
+let interval
+
+const VM = () => {
+    const { url } = useRouteMatch()
+    const { breadcrumbs } = useBreadcrumb(
+        {
+            alias: {
+                observability: {
+                    component: <ObservabilityIconComponent />,
+                    linked: true,
+                },
+                ':projects': {
+                    component: <BreadcrumbText heading={url.split('projects/')[1]} isActive />,
+                    linked: false,
+                },
+            },
+        },
+        [],
+    )
+
+    const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
+    const [isDataSyncing, setDataSyncing] = useState(false)
+    const [syncListData, setSyncListData] = useState<boolean>()
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
+    const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
+    useEffect(() => {
+        if (isDataSyncing) {
+            setLastDataSyncTimeString(renderDataSyncingText)
+        } else {
+            const _lastDataSyncTime = Date()
+            setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            interval = setInterval(() => {
+                setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
+            }, 1000)
+        }
+        return () => {
+            if (interval) {
+                clearInterval(interval)
+            }
+        }
+    }, [isDataSyncing])
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const updateDataSyncing = (loading: boolean): void => {
+        setDataSyncing(loading)
+    }
+    const tabs: TabProps[] = [
+        {
+            id: 'vm_overview',
+            label: 'Overview',
+            tabType: 'navLink',
+            props: {
+                to: `${url}/overview`,
+            },
+        },
+        {
+            id: 'vm_list',
+            label: 'VMs',
+            tabType: 'navLink',
+            props: {
+                to: `${url}/vms`,
+            },
+        },
+    ]
+
+    const syncNow = (): void => {
+        setSyncListData(!syncListData)
+    }
+
+    const rightComponent = (
+        <div className="flex right fs-13">
+            {lastDataSyncTimeString && (
+                <>
+                    <span data-testid="sync-now-text">{lastDataSyncTimeString}</span>
+                    {!isDataSyncing && (
+                        <>
+                            &nbsp;
+                            <button
+                                className="btn btn-link p-0 fw-6 cb-5 mb-2"
+                                type="button"
+                                onClick={syncNow}
+                                data-testid="sync-now-button"
+                            >
+                                Sync now
+                            </button>
+                        </>
+                    )}
+                </>
+            )}
+            {fetchingExternalApps && renderDataSyncingText()}
+        </div>
+    )
+
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    const renderVmTabs = () => <TabGroup tabs={tabs} rightComponent={rightComponent} hideTopPadding />
+
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto">
+            <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
+                <Route path={`${url}/overview`}>
+                    <Overview view="vm" url={url} />
+                </Route>
+                <Route path={`${url}/vms`}>
+                    <VMList renderBreadcrumbs={renderBreadcrumbs} renderTabs={renderVmTabs} />
+                </Route>
+
+                <Redirect to={`${url}/overview`} />
+            </div>
+        </div>
+    )
+}
+
+export default VM
diff --git a/src/components/observability/VMObservability/VMList.tsx b/src/components/observability/VMObservability/VMList.tsx
new file mode 100644
index 0000000000..5b132a61cf
--- /dev/null
+++ b/src/components/observability/VMObservability/VMList.tsx
@@ -0,0 +1,81 @@
+import { useMemo, useState } from 'react'
+
+import {
+    ComponentSizeType,
+    FiltersTypeEnum,
+    PageHeader,
+    PaginationEnum,
+    SearchBar,
+    Table,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { VM_TABLE_COLUMNS } from '../constants'
+import { getVMList } from '../service'
+import { ObservabilityVM, VMTableProps } from '../types'
+
+const VMList = ({ renderBreadcrumbs, renderTabs }: { renderBreadcrumbs; renderTabs }) => {
+    // ASYNC CALLS
+    const [isFetching, vmData] = useAsync(() => getVMList(), [])
+    const [searchKey, setSearchKey] = useState('')
+
+    // CONFIGS
+    const rows = useMemo<VMTableProps['rows']>(
+        () =>
+            (vmData || []).map((data) => ({
+                id: `observe_vm_${data.id.toString()}`,
+                data,
+            })),
+        [vmData],
+    )
+
+    const handleSearch = (_searchKey: string) => {
+        setSearchKey(_searchKey)
+    }
+
+    const filter: VMTableProps['filter'] = (rowData, filterData) =>
+        rowData.data.name.includes(filterData.searchKey.toLowerCase())
+
+    return (
+        <div>
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} showTabs renderHeaderTabs={renderTabs} />
+
+            <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
+                <div className="px-20 py-12">
+                    <SearchBar
+                        containerClassName="w-250"
+                        dataTestId="search-project-env"
+                        initialSearchText={searchKey}
+                        inputProps={{
+                            placeholder: 'Search project',
+                        }}
+                        handleEnter={handleSearch}
+                        size={ComponentSizeType.medium}
+                        keyboardShortcut="/"
+                    />
+                </div>
+                <Table<ObservabilityVM, FiltersTypeEnum.STATE, {}>
+                    id="table__vm-list"
+                    loading={isFetching}
+                    stylesConfig={{ showSeparatorBetweenRows: true }}
+                    columns={VM_TABLE_COLUMNS}
+                    rows={rows}
+                    filtersVariant={FiltersTypeEnum.STATE}
+                    paginationVariant={PaginationEnum.NOT_PAGINATED}
+                    emptyStateConfig={{
+                        noRowsConfig: {
+                            title: 'No resources found',
+                            subTitle: `No resources found in this cluster for upgrade compatibility check`,
+                        },
+                    }}
+                    filter={filter}
+                    additionalFilterProps={{
+                        initialSortKey: 'name',
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default VMList
diff --git a/src/components/observability/VMObservability/VMListCellComponent.tsx b/src/components/observability/VMObservability/VMListCellComponent.tsx
new file mode 100644
index 0000000000..4ab2bb7b27
--- /dev/null
+++ b/src/components/observability/VMObservability/VMListCellComponent.tsx
@@ -0,0 +1,77 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+
+import {
+    FiltersTypeEnum,
+    TableCellComponentProps,
+    TableSignalEnum,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { ObservabilityVM, VMListFields } from '../types'
+
+export const VMListCellComponent: FunctionComponent<
+    TableCellComponentProps<ObservabilityVM, FiltersTypeEnum.STATE, {}>
+> = ({
+    field,
+    row: {
+        data: { id, name, ipAddress, status, cpu, memory, disk },
+    },
+    isRowActive,
+    signals,
+}: TableCellComponentProps<ObservabilityVM, FiltersTypeEnum.STATE, {}>) => {
+    const linkRef = useRef<HTMLAnchorElement>(null)
+
+    const match = useRouteMatch()
+
+    useEffect(() => {
+        const handleEnter = ({ detail: { activeRowData } }) => {
+            if (activeRowData.data.id === id) {
+                linkRef.current?.click()
+            }
+        }
+
+        if (isRowActive) {
+            signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+
+        return () => {
+            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+        }
+    }, [isRowActive])
+
+    switch (field) {
+        case VMListFields.VM_NAME:
+            return (
+                <Link ref={linkRef} to={`${match.path}/${name}`} className="flex left py-10">
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                </Link>
+            )
+        case VMListFields.VM_IPADDRESS:
+            return <span className="flex left py-10">{ipAddress}</span>
+        case VMListFields.VM_STATUS:
+            return <span className="flex left py-10">{status}</span>
+        case VMListFields.VM_CPU:
+            return <span className="flex left py-10">{cpu}</span>
+        case VMListFields.VM_MEMORY:
+            return (
+                <div className="flex left py-10">
+                    <Tooltip content={memory}>
+                        <span className="dc__truncate">{memory}</span>
+                    </Tooltip>
+                </div>
+            )
+        case VMListFields.VM_DISK:
+            return (
+                <div className="flex left py-10">
+                    <Tooltip content={disk}>
+                        <span className="dc__truncate">{disk}</span>
+                    </Tooltip>
+                </div>
+            )
+        default:
+            return null
+    }
+}
diff --git a/src/components/observability/VMObservability/index.ts b/src/components/observability/VMObservability/index.ts
new file mode 100644
index 0000000000..3a44bfda27
--- /dev/null
+++ b/src/components/observability/VMObservability/index.ts
@@ -0,0 +1 @@
+export { default as VMObservability } from './VM'
diff --git a/src/components/observability/constants.ts b/src/components/observability/constants.ts
new file mode 100644
index 0000000000..a7c4812676
--- /dev/null
+++ b/src/components/observability/constants.ts
@@ -0,0 +1,264 @@
+import {
+    numberComparatorBySortOrder,
+    SegmentedControlProps,
+    stringComparatorBySortOrder,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { CustomerListCellComponent } from './Customer/CustomerListCellComponent'
+import { ProjectListCellComponent } from './ProjectObservability/ProjectListCellComponent'
+import { VMListCellComponent } from './VMObservability/VMListCellComponent'
+import { CustomerTableProps, MetricsInfoCardProps, ProjectTableProps, TabDetailsSegment, VMTableProps } from './types'
+
+export enum ObservabilityGlanceMetricKeys {
+    PROJECTS = 'totalProjects',
+    TOTAL_VMS = 'totalVms',
+    RUNNING_VMS = 'runningVms',
+    HEALTH_STATUS = 'healthStatus',
+    TOTAL_CLUSTER = 'totalClusters',
+    TOTAL_CUSTOMERS = 'totalCustomers',
+}
+
+export const GLANCE_METRICS_CARDS_CONFIG: Partial<Record<ObservabilityGlanceMetricKeys, MetricsInfoCardProps>> = {
+    [ObservabilityGlanceMetricKeys.TOTAL_CUSTOMERS]: {
+        iconName: 'ic-users',
+        metricTitle: 'Total Customers',
+        tooltipContent: 'Number of all Customers',
+    },
+    [ObservabilityGlanceMetricKeys.PROJECTS]: {
+        iconName: 'ic-bg-cluster',
+        metricTitle: 'Projects',
+        tooltipContent: 'Number of all projects',
+    },
+    [ObservabilityGlanceMetricKeys.TOTAL_VMS]: {
+        iconName: 'ic-bg-cluster',
+        metricTitle: 'Total VMs',
+        tooltipContent: 'Number of all Vms',
+    },
+
+    [ObservabilityGlanceMetricKeys.HEALTH_STATUS]: {
+        iconName: 'ic-check',
+        metricTitle: 'Status',
+        tooltipContent: 'Percentage of all health status',
+    },
+}
+
+export const TAB_DETAILS_SEGMENTS: SegmentedControlProps['segments'] = [
+    {
+        label: 'Overview',
+        value: TabDetailsSegment.OVERVIEW,
+    },
+    {
+        label: 'Projects',
+        value: TabDetailsSegment.PROJECTS,
+    },
+]
+
+export const CUSTOMER_TABLE_COLUMN: CustomerTableProps['columns'] = [
+    {
+        field: 'icon',
+        size: {
+            fixed: 24,
+        },
+        CellComponent: CustomerListCellComponent,
+    },
+    {
+        field: 'name',
+        label: 'Tenants',
+        size: {
+            fixed: 250,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+    } as CustomerTableProps['columns'][0],
+    {
+        field: 'status',
+        label: 'Status',
+        size: {
+            fixed: 250,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+    },
+    {
+        field: 'projects',
+        label: 'Projects',
+        size: {
+            fixed: 250,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+    },
+    {
+        field: 'totalVms',
+        label: 'Total VMs',
+        size: {
+            fixed: 150,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+    },
+
+    {
+        field: 'activeVms',
+        label: 'Active VMs',
+        size: {
+            fixed: 150,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+    },
+
+    {
+        field: 'healthStatus',
+        label: 'Health',
+        size: {
+            fixed: 250,
+        },
+        CellComponent: CustomerListCellComponent,
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+    },
+]
+
+export const PROJECT_TABLE_COLUMNS: ProjectTableProps['columns'] = [
+    {
+        field: 'name',
+        label: 'Project name',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: ProjectListCellComponent,
+    },
+    {
+        field: 'description',
+        label: 'Description',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: ProjectListCellComponent,
+    },
+    {
+        field: 'status',
+        label: 'Status',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: ProjectListCellComponent,
+    },
+    {
+        field: 'totalVms',
+        label: 'Total VM',
+        size: {
+            fixed: 200,
+        },
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+        CellComponent: ProjectListCellComponent,
+    },
+    {
+        field: 'activeVms',
+        label: 'Active VM',
+        size: {
+            fixed: 200,
+        },
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+        CellComponent: ProjectListCellComponent,
+    },
+    {
+        field: 'healthStatus',
+        label: 'Health Status',
+        size: {
+            fixed: 200,
+        },
+        CellComponent: ProjectListCellComponent,
+    },
+]
+
+export const VM_TABLE_COLUMNS: VMTableProps['columns'] = [
+    {
+        field: 'name',
+        label: 'VM name',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+    {
+        field: 'status',
+        label: 'Status',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+    {
+        field: 'ipAddress',
+        label: 'IP Address',
+        size: {
+            fixed: 250,
+        },
+        isSortable: true,
+        comparator: stringComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+    {
+        field: 'cpu',
+        label: 'CPU',
+        size: {
+            fixed: 200,
+        },
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+    {
+        field: 'memory',
+        label: 'Memory',
+        size: {
+            fixed: 200,
+        },
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+    {
+        field: 'disk',
+        label: 'Disk',
+        size: {
+            fixed: 200,
+        },
+        isSortable: true,
+        comparator: numberComparatorBySortOrder,
+        CellComponent: VMListCellComponent,
+    },
+]
+
+export enum ObservabilityUtilizationKeys {
+    VM_RUNNING_STATUS = 'vmRUnningStatus',
+    CPU_UTILIZATION = 'cpuUtilization',
+    MEMORY_UTILIZATION = 'memoryUtilization',
+    DISK_UTILIZATION = 'diskUtilization',
+}
+
+export const OBSERVABILITY_UTILIZATION_CARDS_TITLE: Record<ObservabilityUtilizationKeys, string> = {
+    [ObservabilityUtilizationKeys.VM_RUNNING_STATUS]: 'VMS Running Status',
+    [ObservabilityUtilizationKeys.CPU_UTILIZATION]: 'CPU Utilization',
+    [ObservabilityUtilizationKeys.MEMORY_UTILIZATION]: 'Memory Utilization',
+    [ObservabilityUtilizationKeys.DISK_UTILIZATION]: 'Disk Utilization',
+}
diff --git a/src/components/observability/index.ts b/src/components/observability/index.ts
new file mode 100644
index 0000000000..d1371ea92b
--- /dev/null
+++ b/src/components/observability/index.ts
@@ -0,0 +1 @@
+export { default as ObservabilityRouter } from './ObservabilityRouter'
diff --git a/src/components/observability/service.ts b/src/components/observability/service.ts
new file mode 100644
index 0000000000..e5c4953f9a
--- /dev/null
+++ b/src/components/observability/service.ts
@@ -0,0 +1,191 @@
+import { ObservabilityGlanceMetricKeys } from './constants'
+import { CustomerObservabilityDTO, ObservabilityOverviewDTO } from './types'
+
+export const getObservabilityData: () => Promise<ObservabilityOverviewDTO> = () =>
+    Promise.resolve({
+        glanceConfig: {
+            [ObservabilityGlanceMetricKeys.TOTAL_CUSTOMERS]: 4,
+            [ObservabilityGlanceMetricKeys.TOTAL_VMS]: 20,
+            [ObservabilityGlanceMetricKeys.PROJECTS]: 5,
+            [ObservabilityGlanceMetricKeys.HEALTH_STATUS]: 50,
+            [ObservabilityGlanceMetricKeys.TOTAL_CLUSTER]: 2,
+            [ObservabilityGlanceMetricKeys.RUNNING_VMS]: 2,
+        },
+        metrics: [
+            {
+                id: 1,
+                name: 'Tenants1',
+                cpu: { capacity: 36, utilization: '10.75' },
+                memory: { capacity: 141, utilization: '22.75' },
+                disk: { capacity: 50, utilization: '32.75' },
+            },
+            {
+                id: 2,
+                name: 'Tenant2',
+                cpu: { capacity: 36, utilization: '20.75' },
+                memory: { capacity: 121, utilization: '40.75' },
+                disk: { capacity: 50, utilization: '60.75' },
+            },
+            {
+                id: 3,
+                name: 'Tenants3',
+                cpu: { capacity: 36, utilization: '6.75' },
+                memory: { capacity: 141, utilization: '2.75' },
+                disk: { capacity: 50, utilization: '22.75' },
+            },
+            {
+                id: 4,
+                name: 'Tenants4',
+                cpu: { capacity: 36, utilization: '6.75' },
+                memory: { capacity: 141, utilization: '22.75' },
+                disk: { capacity: 50, utilization: '22.75' },
+            },
+        ],
+    })
+
+export const getProjectList: () => Promise<any> = () =>
+    Promise.resolve([
+        {
+            id: 1,
+            name: 'Project-1',
+            description: 'Description of Project-1',
+            status: 'Active',
+            totalVms: 40,
+            activeVms: 50,
+            healthStatus: '80%',
+        },
+        {
+            id: 2,
+            name: 'Project-2',
+            description: 'Description of Project-2',
+            status: 'Active',
+            totalVms: 40,
+            activeVms: 50,
+            healthStatus: '80%',
+        },
+        {
+            id: 3,
+            name: 'Project-3',
+            description: 'Description of Project-3',
+            status: 'Active',
+            totalVms: 40,
+            activeVms: 50,
+            healthStatus: '80%',
+        },
+        {
+            id: 4,
+            name: 'Project-4',
+            description: 'Description of Project-4',
+            status: 'Active',
+            totalVms: 40,
+            activeVms: 50,
+            healthStatus: '80%',
+        },
+        {
+            id: 5,
+            name: 'Project-5',
+            description: 'Description of Project-5',
+            status: 'Active',
+            totalVms: 40,
+            activeVms: 50,
+            healthStatus: '80%',
+        },
+    ])
+
+export const getVMList: () => Promise<any> = () =>
+    Promise.resolve([
+        {
+            id: 1,
+            name: 'PIS-Web-Server-01',
+            ipAddress: '192.168.1.101',
+            status: 'running',
+            cpu: 40,
+            memory: 50,
+            disk: 80,
+        },
+        {
+            id: 2,
+            name: 'PIS-DB-Server-01',
+            ipAddress: '192.168.1.102',
+            status: 'running',
+            cpu: 40,
+            memory: 50,
+            disk: 80,
+        },
+    ])
+
+export const getCustomerListData: () => Promise<CustomerObservabilityDTO[]> = () =>
+    Promise.resolve([
+        {
+            id: 1,
+            name: 'Tenants1',
+            status: 'ACTIVE',
+            projects: 2,
+            totalVms: 14,
+            healthStatus: '80%',
+            activeVms: 2,
+            icon: 'ic-devtron',
+        },
+        {
+            id: 2,
+            name: 'Tenant2',
+            status: 'INACTIVE',
+            projects: 34,
+            totalVms: 4,
+            healthStatus: '20%',
+            activeVms: 1,
+            icon: 'ic-helm',
+        },
+        {
+            id: 3,
+            name: 'Tenants3',
+            status: 'INACTIVE',
+            project: 34,
+            totalVms: 4,
+            healthStatus: '20%',
+            activeVms: 1,
+            icon: 'ic-helm',
+        },
+        {
+            id: 4,
+            name: 'tenants4',
+            status: 'ACTIVE',
+            project: 34,
+            totalVms: 4,
+            healthStatus: '30%',
+            activeVms: 1,
+            icon: 'ic-devtron',
+        },
+    ] as unknown as CustomerObservabilityDTO[])
+
+export const getProjectOverViewCards: () => Promise<any> = () =>
+    Promise.resolve([
+        {
+            tooltipContent: '',
+            dataTestId: 'cpu_id',
+            metricValue: '16',
+            metricTitle: 'CPU',
+            iconName: 'ic-bg-cpu',
+        },
+        {
+            tooltipContent: '',
+            dataTestId: 'disk_id',
+            metricValue: '400',
+            metricTitle: 'DISK',
+            iconName: 'ic-bg-cpu',
+        },
+        {
+            tooltipContent: '',
+            dataTestId: 'memory_id',
+            metricValue: '1000',
+            metricTitle: 'MEMORY',
+            iconName: 'ic-bg-cpu',
+        },
+        {
+            tooltipContent: '',
+            dataTestId: 'running_id',
+            metricValue: '10',
+            metricTitle: 'RUNNING VMs',
+            iconName: 'ic-bg-cpu',
+        },
+    ])
diff --git a/src/components/observability/styles.scss b/src/components/observability/styles.scss
new file mode 100644
index 0000000000..020850c9f3
--- /dev/null
+++ b/src/components/observability/styles.scss
@@ -0,0 +1,45 @@
+.observability-overview {
+flexbox-col dc__gap-32 bg__secondary p-20
+    .cards-wrapper {
+        grid-template-columns: repeat(3, 1fr);
+        column-gap: 8px;
+    }
+
+    .bar-chart-table-row {
+        grid-template-columns: 150px 1fr 1fr 1fr;
+    }
+
+    .at-a-glance {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .observability-table-wrapper {
+
+        // Apply to every first child up to 4 levels deep
+        > :first-child,
+        > :first-child> :first-child,
+        > :first-child> :first-child> :first-child,
+        > :first-child> :first-child> :first-child> :first-child {
+            overflow: visible !important;
+        }
+    }
+
+    .search-filter-section {
+        padding: 12px 20px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        background-color: var(--bg-primary);
+        z-index: var(--filter-menu-index);
+    }
+
+    .glance-cards-wrapper {
+        grid-template-columns: repeat(4, 1fr);
+        column-gap: 8px;
+    }
+
+    .workflow-overview-cards-wrapper {
+        grid-template-columns: repeat(4, 1fr);
+        gap: 8px;
+    }
+}
diff --git a/src/components/observability/types.ts b/src/components/observability/types.ts
new file mode 100644
index 0000000000..22d47e445b
--- /dev/null
+++ b/src/components/observability/types.ts
@@ -0,0 +1,133 @@
+import { FiltersTypeEnum, IconName, TableProps } from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { ObservabilityGlanceMetricKeys } from './constants'
+
+export enum GlanceMetricsKeys {
+    REACHABLE_CUSTOMERS = 'customers',
+    TOTAL_PROJECTS = 'Projects',
+    TOTAL_VMs = 'vms',
+    HEALTH_STATUS = 'healthStatus',
+}
+
+export type ObservabilityStatus = 'ACTIVE' | 'INACTIVE'
+
+export interface BaseObservability {
+    id: number
+    name: string
+    status: ObservabilityStatus
+}
+
+export interface CustomerObservabilityDTO extends BaseObservability {
+    projects: number
+    totalVms: number
+    activeVms: number
+    healthStatus: string
+    icon: string
+}
+
+export type CustomerTableProps = TableProps<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>
+
+export interface ObservabilityProject
+    extends BaseObservability,
+        Pick<CustomerObservabilityDTO, 'activeVms' | 'totalVms' | 'healthStatus'> {
+    description: string
+}
+
+export type ProjectTableProps = TableProps<ObservabilityProject, FiltersTypeEnum.STATE, {}>
+
+export interface ObservabilityVM extends BaseObservability {
+    ipAddress: string
+    cpu: number
+    memory: number
+    disk: number
+}
+
+export type VMTableProps = TableProps<ObservabilityVM, FiltersTypeEnum.STATE, {}>
+
+export enum ObservabilityListFields {
+    PROJECT_ID = 'id',
+    PROJECT_NAME = 'name',
+    PROJECT_DESCRIPTION = 'description',
+    STATUS = 'status',
+    TOTAL_VMS = 'totalVms',
+    ACTIVE_VMS = 'activeVms',
+    HEALTH_STATUS = 'healthStatus',
+    PROJECTS = 'projects',
+    ICON = 'icon',
+}
+
+export enum VMListFields {
+    VM_ID = 'id',
+    VM_NAME = 'name',
+    VM_IPADDRESS = 'ipAddress',
+    VM_STATUS = 'status',
+    VM_CPU = 'cpu',
+    VM_MEMORY = 'memory',
+    VM_DISK = 'disk',
+}
+
+export enum ObservabilityFilters {
+    customer = 'customer',
+    project = 'project',
+    vm = 'vm',
+}
+
+export enum TabDetailsSegment {
+    'OVERVIEW' = 'Overview',
+    'PROJECTS' = 'Projects',
+}
+
+export interface TabDetailsSearchParams {
+    tab: TabDetailsSegment
+}
+
+export interface MetricsInfoCardProps {
+    iconName: IconName
+    metricTitle: string
+    dataTestId?: string
+    metricValue?: string
+    metricUnit?: string
+    valueOutOf?: string
+    tooltipContent?: string
+    redirectionLink?: string
+}
+
+export interface GlanceConfigDTO {
+    [ObservabilityGlanceMetricKeys.TOTAL_CLUSTER]: number
+    [ObservabilityGlanceMetricKeys.TOTAL_VMS]: number
+    [ObservabilityGlanceMetricKeys.PROJECTS]: number
+    [ObservabilityGlanceMetricKeys.HEALTH_STATUS]: number
+    [ObservabilityGlanceMetricKeys.RUNNING_VMS]: number
+}
+
+export interface CPUMemoryDiskUtilization {
+    capacity: number
+    utilization: string
+}
+
+export interface ObservabilityMetricsDTO {
+    id: number
+    name: string
+    cpu: CPUMemoryDiskUtilization
+    memory: CPUMemoryDiskUtilization
+    disk: CPUMemoryDiskUtilization
+}
+
+export interface ObservabilityOverviewDTO {
+    glanceConfig: Partial<GlanceConfigDTO>
+    metrics: ObservabilityMetricsDTO[]
+}
+
+export interface BarMetricsProps {
+    data: ObservabilityOverviewDTO['metrics']
+}
+
+export interface ResourceCapacityDistributionTypes extends CPUMemoryDiskUtilization {
+    bgColor?: string
+}
+
+export type ObservabilityViewType = 'singleVm' | 'vm' | 'project' | 'tenants'
+export interface OverviewProps {
+    view: ObservabilityViewType
+    url: string
+}
diff --git a/src/components/observability/utils.tsx b/src/components/observability/utils.tsx
new file mode 100644
index 0000000000..dc25a39e96
--- /dev/null
+++ b/src/components/observability/utils.tsx
@@ -0,0 +1,257 @@
+import {
+    BreadcrumbText,
+    SelectPickerOptionType,
+    TabProps,
+    Tooltip,
+    useQuery,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { GLANCE_METRICS_CARDS_CONFIG, ObservabilityGlanceMetricKeys } from './constants'
+import ObservabilityIconComponent from './ObservabilityIcon'
+import { getObservabilityData } from './service'
+import {
+    MetricsInfoCardProps,
+    ObservabilityMetricsDTO,
+    ObservabilityOverviewDTO,
+    ObservabilityViewType,
+    ResourceCapacityDistributionTypes,
+    TabDetailsSearchParams,
+    TabDetailsSegment,
+} from './types'
+
+// Will be removing while importing to dashboard
+export const MetricsInfoLoadingCard = () => (
+    <div className="flexbox-col br-8 bg__primary border__secondary">
+        <div className="flexbox dc__gap-12 p-16 dc__content-space">
+            <div className="flexbox-col">
+                <span className="h-12 mt-4 mb-4 w-40 shimmer" />
+                <span className="h-24 mt-6 mb-6 w-40 shimmer" />
+            </div>
+            <div className="h-24 w-24 m-6 shimmer" />
+        </div>
+    </div>
+)
+
+export const getObservabilityGlanceConfig = (result: Partial<ObservabilityOverviewDTO>) => {
+    const glanceConfig = Object.entries(GLANCE_METRICS_CARDS_CONFIG).map(
+        ([key, config]: [ObservabilityGlanceMetricKeys, MetricsInfoCardProps]) => {
+            const entry = result.glanceConfig?.[key]
+            const isNumber = typeof entry === 'number'
+            const metricValue = isNumber ? entry : (entry as any)?.value
+            const metricTitle = config?.metricTitle
+
+            return {
+                ...config,
+                dataTestId: key as string,
+                metricValue,
+                metricTitle,
+            }
+        },
+    )
+    return {
+        metrics: result?.metrics,
+        glanceConfig,
+    }
+}
+
+export const useGetGlanceConfig = () =>
+    useQuery({
+        queryKey: ['observabilityGlanceConfig'],
+        // queryFn: () => getProjectOverViewCards(), // Mukesh has to update this
+        queryFn: async () => ({
+            code: 200,
+            status: 'SUCCESS',
+            result: await getObservabilityData(),
+        }),
+        // queryFn: () => get<ObservabilityOverviewDTO>(ROUTES.OBSERVABILITY_OVERVIEW), // Will be replacing later
+        select: ({ result }) => getObservabilityGlanceConfig(result),
+    })
+
+export const parseChartDetailsSearchParams = (searchParams: URLSearchParams): TabDetailsSearchParams => ({
+    tab: (searchParams.get('tab') as TabDetailsSegment) || TabDetailsSegment.OVERVIEW,
+})
+
+const AllocatedResource = ({ label, value }: SelectPickerOptionType<string>) => (
+    <div className="flex left flex-grow-1 dc__gap-4 fs-11 fw-4 lh-1-5 cn-7 var(--B500)">
+        <span>{label}</span>
+        <span className="fw-5 cn-9 font-ibm-plex-sans">{value}</span>
+    </div>
+)
+
+export const ResourceAllocationBar = ({
+    capacity,
+    utilization,
+    bgColor = 'B500',
+}: ResourceCapacityDistributionTypes & { bgColor? }) => (
+    <div className="flexbox-col dc__gap-8">
+        <div className="h-8 br-4 dc__position-rel dc__overflow-hidden" style={{ backgroundColor: 'var(--N100)' }}>
+            {/* Fill div up to utilisation percentage */}
+            <Tooltip content="Utilisation" alwaysShowTippyOnHover>
+                <div
+                    className="h-8 br-4 dc__position-abs"
+                    style={{
+                        width: `${utilization}%`,
+                        backgroundColor: `var(--${bgColor})`,
+                    }}
+                />
+            </Tooltip>
+        </div>
+        <div className="flex left dc__gap-8">
+            <AllocatedResource label="Capacity" value={`${capacity}`} />
+            <div className="divider__secondary" />
+            <AllocatedResource label="Utilisation" value={`${utilization}%`} />
+        </div>
+    </div>
+)
+
+export const CPUCapacityCellComponent = ({ cpu }: Pick<ObservabilityMetricsDTO, 'cpu'>) => (
+    <ResourceAllocationBar {...cpu} bgColor="G500" />
+)
+
+export const MemoryCapacityCellComponent = ({ memory }: Pick<ObservabilityMetricsDTO, 'memory'>) => (
+    <ResourceAllocationBar {...memory} />
+)
+
+export const DiskCapacityCellComponent = ({ disk }: Pick<ObservabilityMetricsDTO, 'disk'>) => (
+    <ResourceAllocationBar {...disk} bgColor="Y500" />
+)
+
+export const getBreadCrumbObj = (view: ObservabilityViewType, url) => {
+    switch (view) {
+        case 'project':
+            return {
+                alias: {
+                    observability: {
+                        component: <ObservabilityIconComponent />,
+                        linked: true,
+                    },
+                    tenants: {
+                        component: <BreadcrumbText heading="Tenants" />,
+                        linked: true,
+                    },
+
+                    ':customerId': {
+                        component: <BreadcrumbText heading="Customer1" />,
+                        linked: true,
+                    },
+                    overview: {
+                        component: <BreadcrumbText heading="Overview" isActive />,
+                    },
+                    projects: {
+                        component: <BreadcrumbText heading="Projects" isActive />,
+                        linked: false,
+                    },
+                },
+            }
+        case 'tenants':
+            return {
+                alias: {
+                    observability: {
+                        component: <ObservabilityIconComponent />,
+                        linked: true,
+                    },
+                    overview: {
+                        component: <BreadcrumbText heading="Overview" isActive />,
+                    },
+                    tenants: {
+                        component: <BreadcrumbText heading="Tenants" isActive />,
+                    },
+                },
+            }
+        case 'singleVm':
+            return {
+                alias: {
+                    observability: {
+                        component: <ObservabilityIconComponent />,
+                        linked: true,
+                    },
+                    customer: {
+                        component: <BreadcrumbText heading="VMs" isActive />,
+                        linked: false,
+                    },
+                },
+            }
+
+        case 'vm':
+            return {
+                alias: {
+                    observability: {
+                        component: <ObservabilityIconComponent />,
+                        linked: true,
+                    },
+                    ':projects': {
+                        component: <BreadcrumbText heading={url.split('projects/')[1]} isActive />,
+                        linked: false,
+                    },
+                },
+                overview: {
+                    component: <BreadcrumbText heading="Overview" isActive />,
+                },
+            }
+        default:
+            return null
+    }
+}
+
+export const getTabsObj = (view: ObservabilityViewType, path): TabProps[] => {
+    switch (view) {
+        case 'project':
+            return [
+                {
+                    id: 'project_overview',
+                    label: 'Overview',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path}`,
+                    },
+                },
+                {
+                    id: 'project_list',
+                    label: 'Projects',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path.replace('overview', 'projects')}`,
+                    },
+                },
+            ]
+        case 'vm':
+            return [
+                {
+                    id: 'vm_overview',
+                    label: 'Overview',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path}`,
+                    },
+                },
+                {
+                    id: 'vm_list',
+                    label: 'VMs',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path.replace('overview', 'vms')}`,
+                    },
+                },
+            ]
+        default:
+            return [
+                {
+                    id: 'observability',
+                    label: 'Overview',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path}`,
+                    },
+                },
+                {
+                    id: 'tenants',
+                    label: 'Tenants',
+                    tabType: 'navLink',
+                    props: {
+                        to: `${path.replace('overview', 'tenants')}`,
+                        'data-testid': 'tenants',
+                    },
+                },
+            ]
+    }
+}
diff --git a/src/css/base.scss b/src/css/base.scss
index 630e1e6390..dfb615ebd6 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -1360,6 +1360,8 @@ button.anchor {
 
 .dc__devtron-breadcrumb__item__separator {
     margin: 0 4px;
+    font-weight: 400;
+    color: var(--N600);
 }
 
 .multi-chart-summary__values-select.popup-body,