diff --git a/src/components/Navigation/constants.ts b/src/components/Navigation/constants.ts
index 19a7d13603..581af738b8 100644
--- a/src/components/Navigation/constants.ts
+++ b/src/components/Navigation/constants.ts
@@ -299,7 +299,7 @@ export const NAVIGATION_LIST: NavigationGroupType[] = [
                 dataTestId: 'observability-vms',
                 id: 'observability-vms',
                 icon: 'ic-cluster',
-                href: COMMON_URLS.OBSERVABILITY_LIST,
+                href: COMMON_URLS.OBSERVABILITY_CUSTOMER_LIST,
             },
         ],
     },
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index cbf810bbbd..4720926276 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -561,10 +561,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
                                     >
                                         <ResourceBrowser />
                                     </Route>
-                                    <Route
-                                        key={CommonURLS.OBSERVABILITY_OVERVIEW}
-                                        path={CommonURLS.OBSERVABILITY_OVERVIEW}
-                                    >
+                                    <Route key={CommonURLS.OBSERVABILITY} path={CommonURLS.OBSERVABILITY}>
                                         <Observability />
                                     </Route>
                                     <Route
diff --git a/src/components/observability/CustomerList.tsx b/src/components/observability/CustomerList.tsx
new file mode 100644
index 0000000000..0a016aeb7e
--- /dev/null
+++ b/src/components/observability/CustomerList.tsx
@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import { FiltersTypeEnum, PaginationEnum, Table, useAsync } from '@devtron-labs/devtron-fe-common-lib/dist'
+
+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/CustomerListCellComponent.tsx b/src/components/observability/CustomerListCellComponent.tsx
new file mode 100644
index 0000000000..3c73fb441c
--- /dev/null
+++ b/src/components/observability/CustomerListCellComponent.tsx
@@ -0,0 +1,76 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link, useRouteMatch } from 'react-router-dom'
+
+import {
+    FiltersTypeEnum,
+    getUrlWithSearchParams,
+    TableCellComponentProps,
+    TableSignalEnum,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { CustomerObservabilityDTO, ProjectListFields } from './types'
+
+export const CustomerListCellComponent: FunctionComponent<
+    TableCellComponentProps<CustomerObservabilityDTO, FiltersTypeEnum.STATE, {}>
+> = ({
+    field,
+    row: {
+        data: { id, name, status, project, totalVms, activeVms, healthStatus },
+    },
+    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 ProjectListFields.PROJECT_NAME:
+            return (
+                <Link
+                    ref={linkRef}
+                    to={getUrlWithSearchParams(match.path, { customer: name })}
+                    className="flex left py-10"
+                >
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                </Link>
+            )
+        case ProjectListFields.STATUS:
+            return <span className="flex left py-10">{status}</span>
+        case ProjectListFields.PROJECTS:
+            return <span className="flex left py-10">{project}</span>
+        case ProjectListFields.TOTAL_VMS:
+            return <span className="flex left py-10">{totalVms}</span>
+        case ProjectListFields.ACTIVE_VMS:
+            return <span className="flex left py-10">{activeVms}</span>
+        case ProjectListFields.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/Customers.tsx b/src/components/observability/Customers.tsx
new file mode 100644
index 0000000000..7a82fefc21
--- /dev/null
+++ b/src/components/observability/Customers.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    ComponentSizeType,
+    handleUTCTime,
+    PageHeader,
+    SearchBar,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { CustomerList } from './CustomerList'
+import ObservabilityIconComponent from './ObservabilityIcon'
+
+let interval
+const Customers = () => {
+    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 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({
+        alias: {
+            observability: {
+                component: <ObservabilityIconComponent />,
+                linked: true,
+            },
+            customers: {
+                component: <BreadcrumbText heading="Customers" isActive />,
+                linked: false,
+            },
+        },
+    })
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+    const searchKey = ''
+    const handleSearch = () => {}
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto bg__secondary">
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
+            <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/ObservabilityRouter.tsx b/src/components/observability/ObservabilityRouter.tsx
index d0bbd2d25b..4c8d660241 100644
--- a/src/components/observability/ObservabilityRouter.tsx
+++ b/src/components/observability/ObservabilityRouter.tsx
@@ -1,23 +1,30 @@
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import { URLS } from '@devtron-labs/devtron-fe-common-lib'
 
-import Project from './Project'
-import VMList from './VMList'
+import Project from './ProjectObservability/Project'
+import Customers from './Customers'
 import { Overview } from './Overview'
 
-const ObservabilityRouter: React.FC = () => (
-    <Switch>
-        <Route exact path={URLS.OBSERVABILITY_LIST}>
-            <Project />
-        </Route>
+const ObservabilityRouter: React.FC = () => {
+    const { path } = useRouteMatch()
+    return (
+        <Switch>
+            <Route exact path={URLS.OBSERVABILITY_OVERVIEW}>
+                <Overview />
+            </Route>
 
-        <Route exact path={URLS.OBSERVABILITY_OVERVIEW}>
-            <Project/>
-        </Route>
+            <Route exact path={URLS.OBSERVABILITY_CUSTOMER_LIST}>
+                <Customers />
+            </Route>
 
-        <Redirect exact to={URLS.OBSERVABILITY_OVERVIEW} />
-    </Switch>
-)
+            <Route exact path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customer`}>
+                <Project />
+            </Route>
+
+            <Redirect exact from={path} to={URLS.OBSERVABILITY_OVERVIEW} />
+        </Switch>
+    )
+}
 
 export default ObservabilityRouter
diff --git a/src/components/observability/Project.tsx b/src/components/observability/Project.tsx
deleted file mode 100644
index fe3198d913..0000000000
--- a/src/components/observability/Project.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useState,useEffect } from "react"
-import ProjectList from "./ProjectList"
-import { BreadCrumb, BreadcrumbText, ComponentSizeType, handleUTCTime, PageHeader, SearchBar, SegmentedControl, SegmentedControlProps, TabGroup, TabProps, useBreadcrumb, useUrlFilters } from ".yalc/@devtron-labs/devtron-fe-common-lib/dist"
-import { URLS } from "@Config/routes"
-import ObservabilityIconComponent from "./ObservabilityIcon"
-import ProjectOverview from "./ProjectOverview"
-import './styles.scss'
-import { TabDetailsSearchParams, TabDetailsSegment } from "./types"
-import { parseChartDetailsSearchParams } from "./utils"
-import { TAB_DETAILS_SEGMENTS } from "./constants"
-let interval
-const Project = () => {
-    const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
-    const [isDataSyncing, setDataSyncing] = useState(false)
-    const [syncListData, setSyncListData] = useState<boolean>()
-    const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
-    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])
-            
-    const updateDataSyncing = (loading: boolean): void => {
-        setDataSyncing(loading)
-    }
-    const tabs: TabProps = [
-        {
-            id: 'project_overview',
-            label: 'Overview',
-            tabType: 'button',
-            active: selectedTabIndex == 0,
-            props: {
-                onClick: () => {
-                    setSelectedTabIndex(0)
-                },
-            },
-        },
-        {
-            id: 'project_list',
-            label: 'Projects',
-            tabType: 'button',
-            active: selectedTabIndex == 1,
-            props: {
-                onClick: () => {
-                    setSelectedTabIndex(1)
-                },
-            },
-        }
-    ]
-            
-    const syncNow = (): void => {
-        setSyncListData(!syncListData)
-    }
-
-    const renderProjectOverview = () => {
-        return <ProjectOverview />
-    }
-
-    const renderProjectList = () => {
-        return <ProjectList />
-    }
-
-const { tab, updateSearchParams } = useUrlFilters<void, TabDetailsSearchParams>({
-        parseSearchParams: parseChartDetailsSearchParams,
-    })
-
-    const handleSegmentChange: SegmentedControlProps['onChange'] = (selectedSegment) => {
-        const updatedTab = selectedSegment.value as TabDetailsSegment
-
-        if (updatedTab === TabDetailsSegment.PROJECTS) {
-            renderProjectList()
-        }
-
-        updateSearchParams({ tab: updatedTab })
-    }
-
-    const renderProjectTabs = () => {
-        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 renderSegments = () => {
-        switch (tab) {
-            case TabDetailsSegment.OVERVIEW:
-                return (
-                    renderProjectOverview()
-                )
-            case TabDetailsSegment.PROJECTS:
-                return renderProjectList()
-            default:
-                return null
-        }
-    }
-        
-        return (
-            <div>
-                <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
-                    <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border px-20">
-                        {/* <TabGroup tabs={tabs} rightComponent={rightComponent}/> */}
-                        <SegmentedControl
-                                        name="chart-details-segmented-control"
-                                        segments={TAB_DETAILS_SEGMENTS}
-                                        value={tab}
-                                        onChange={handleSegmentChange}
-                                    />
-                    </div>
-                </div>
-                <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
-                    <div className=" pr-20 pl-20 pt-12 pb-12">
-                        {/* {selectedTabIndex == 0 && renderProjectOverview()}
-                        {selectedTabIndex == 1 && renderProjectList()} */}
-                        {renderSegments()}
-                    </div>
-                </div>
-            </div>
-        )
-    }
-
-    const { breadcrumbs } = useBreadcrumb({
-        alias: {
-            observability: {
-                component: <ObservabilityIconComponent />,
-                linked: true,
-            },
-            customer: {
-                component: <BreadcrumbText heading="Projects" isActive />,
-                linked: false,
-            },
-        },
-    })
-    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
-    const searchKey = ""
-    const handleSearch = () => {}
-    return (
-        <div className="observability-overview flex-grow-1 dc__overflow-auto bg__secondary">
-            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
-            <div className="search-filter-section">
-                <SearchBar
-                    containerClassName="w-250"
-                    dataTestId="search-project-env"
-                    initialSearchText={searchKey}
-                    inputProps={{
-                        placeholder: 'Search project',
-                    }}
-                    handleEnter={handleSearch}
-                    size={ComponentSizeType.medium}
-                    keyboardShortcut="/"
-                />
-            </div>
-            {renderProjectTabs()}
-        </div>
-    )
-}
-
-export default Project;
\ No newline at end of file
diff --git a/src/components/observability/ProjectList.tsx b/src/components/observability/ProjectList.tsx
deleted file mode 100644
index 97410c1171..0000000000
--- a/src/components/observability/ProjectList.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { FiltersTypeEnum, numberComparatorBySortOrder, PaginationEnum, stringComparatorBySortOrder, Table, TableCellComponentProps, TableSignalEnum, Tooltip, useAsync } from ".yalc/@devtron-labs/devtron-fe-common-lib/dist";
-import { FunctionComponent, useEffect, useMemo, useRef } from "react";
-import { ObservabilityProject, ProjectListFields, ProjectTableProps } from "./types";
-import { Link } from "react-router-dom";
-import { getProjectList } from "./service";
-
-const ProjectList = () => {
-
-    // ASYNC CALLS
-            const [isFetching, projectData, isError, refetch] = useAsync(
-                () => getProjectList(),
-                [],
-            )
-
-            // CONFIGS
-                const rows = useMemo<ProjectTableProps['rows']>(
-                    () =>
-                        (projectData || []).map((data) => ({
-                            id: `observe_project_${data.id.toString()}`,
-                            data,
-                        })),
-                    [projectData],
-                )
-
-                const filter: ProjectTableProps['filter'] = (rowData, filterData) =>
-            rowData.data.name.includes(filterData.searchKey.toLowerCase())
-
-    return <>
-        <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
-                    <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>
-    </>
-}
-
-export default ProjectList;
-
-export const ProjectListCellComponent: FunctionComponent<
-    TableCellComponentProps<ProjectTableProps, FiltersTypeEnum.STATE, {}>
-> = ({
-    field,
-    row: {
-        data: { id, name, description, status, totalVms, activeVms, healthStatus },
-    },
-    isRowActive,
-    signals,
-}: TableCellComponentProps<ProjectTableProps, FiltersTypeEnum.STATE, {}>) => {
-    const linkRef = useRef<HTMLAnchorElement>(null)
-
-    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 ProjectListFields.PROJECT_NAME:
-            return (
-                <Link
-                    ref={linkRef}
-                    to={'test'}
-                    className="flex left py-10"
-                >
-                    <Tooltip content={name}>
-                        <span className="dc__truncate">{name}</span>
-                    </Tooltip>
-                </Link>
-            )
-        case ProjectListFields.PROJECT_DESCRIPTION:
-            return <span className="flex left py-10">{description}</span>
-        case ProjectListFields.PROJECT_STATUS:
-            return <span className="flex left py-10">{status}</span>
-        case ProjectListFields.TOTAL_VMS:
-            return <span className="flex left py-10">{totalVms}</span>
-        case ProjectListFields.ACTIVE_VMS:
-            return (
-                <div className="flex left py-10">
-                    <Tooltip content={activeVms}>
-                        <span className="dc__truncate">{activeVms}</span>
-                    </Tooltip>
-                </div>
-            )
-        case ProjectListFields.HEALTH_STATUS:
-            return (
-                <div className="flex left py-10">
-                    <Tooltip content={healthStatus}>
-                        <span className="dc__truncate">{healthStatus}</span>
-                    </Tooltip>
-                </div>
-            )
-        default:
-            return null
-    }
-}
-
-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
-    }
-]
\ No newline at end of file
diff --git a/src/components/observability/ProjectObservability/Project.tsx b/src/components/observability/ProjectObservability/Project.tsx
new file mode 100644
index 0000000000..b3b3000a43
--- /dev/null
+++ b/src/components/observability/ProjectObservability/Project.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useState } from 'react'
+import { useRouteMatch } from 'react-router-dom'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    ComponentSizeType,
+    handleUTCTime,
+    PageHeader,
+    SearchBar,
+    TabGroup,
+    TabProps,
+    URLS,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import ObservabilityIconComponent from '../ObservabilityIcon'
+import ProjectList from './ProjectList'
+import { ProjectOverview } from './ProjectOverview'
+
+let interval
+const Project = () => {
+    const match = 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])
+
+    console.log(match)
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const updateDataSyncing = (loading: boolean): void => {
+        setDataSyncing(loading)
+    }
+    const tabs: TabProps[] = [
+        {
+            id: 'project_overview',
+            label: 'Overview',
+            tabType: 'link',
+            active: selectedTabIndex === 0,
+            props: {
+                to: `${match.url}/${URLS.OBSERVABILITY_OVERVIEW}`,
+                // onClick: () => {
+                //     setSelectedTabIndex(0)
+                // },
+            },
+        },
+        {
+            id: 'project_list',
+            label: 'Projects',
+            tabType: 'link',
+            active: selectedTabIndex === 1,
+            props: {
+                to: `${match.url}/projects`,
+                // onClick: () => {
+                //     setSelectedTabIndex(1)
+                // },
+            },
+        },
+    ]
+
+    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 = () => {
+        const renderSegments = () => {
+            if (selectedTabIndex === 0) {
+                return <ProjectOverview />
+            }
+
+            return <ProjectList />
+        }
+
+        return (
+            <div>
+                <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
+                    <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border px-20">
+                        <TabGroup tabs={tabs} rightComponent={rightComponent} />
+                    </div>
+                </div>
+                <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
+                    <div className=" pr-20 pl-20 pt-12 pb-12">{renderSegments()}</div>
+                </div>
+            </div>
+        )
+    }
+
+    const { breadcrumbs } = useBreadcrumb({
+        alias: {
+            observability: {
+                component: <ObservabilityIconComponent />,
+                linked: true,
+            },
+            customer: {
+                component: <BreadcrumbText heading="Projects" isActive />,
+                linked: false,
+            },
+        },
+    })
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+    const searchKey = ''
+    const handleSearch = () => {}
+    return (
+        <div className="observability-overview flex-grow-1 dc__overflow-auto bg__secondary">
+            <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
+            <div className="search-filter-section">
+                <SearchBar
+                    containerClassName="w-250"
+                    dataTestId="search-project-env"
+                    initialSearchText={searchKey}
+                    inputProps={{
+                        placeholder: 'Search project',
+                    }}
+                    handleEnter={handleSearch}
+                    size={ComponentSizeType.medium}
+                    keyboardShortcut="/"
+                />
+            </div>
+            {renderProjectTabs()}
+        </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..6a29b7153b
--- /dev/null
+++ b/src/components/observability/ProjectObservability/ProjectList.tsx
@@ -0,0 +1,53 @@
+import { useMemo } from 'react'
+
+import { FiltersTypeEnum, PaginationEnum, 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 = () => {
+    // ASYNC CALLS
+    const [isFetching, projectData] = useAsync(() => getProjectList(), [])
+
+    // CONFIGS
+    const rows = useMemo<ProjectTableProps['rows']>(
+        () =>
+            (projectData || []).map((data) => ({
+                id: `observe_project_${data.id.toString()}`,
+                data,
+            })),
+        [projectData],
+    )
+
+    const filter: ProjectTableProps['filter'] = (
+        rowData: { id: string; data: ObservabilityProject },
+        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<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>
+    )
+}
+
+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..98d7d90087
--- /dev/null
+++ b/src/components/observability/ProjectObservability/ProjectListCellComponent.tsx
@@ -0,0 +1,75 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link } from 'react-router-dom'
+
+import {
+    FiltersTypeEnum,
+    TableCellComponentProps,
+    TableSignalEnum,
+    Tooltip,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import { ObservabilityProject, ProjectListFields } 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)
+
+    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 ProjectListFields.PROJECT_NAME:
+            return (
+                <Link ref={linkRef} to="test" className="flex left py-10">
+                    <Tooltip content={name}>
+                        <span className="dc__truncate">{name}</span>
+                    </Tooltip>
+                </Link>
+            )
+        case ProjectListFields.PROJECT_DESCRIPTION:
+            return <span className="flex left py-10">{description}</span>
+        case ProjectListFields.STATUS:
+            return <span className="flex left py-10">{status}</span>
+        case ProjectListFields.TOTAL_VMS:
+            return <span className="flex left py-10">{totalVms}</span>
+        case ProjectListFields.ACTIVE_VMS:
+            return (
+                <div className="flex left py-10">
+                    <Tooltip content={activeVms}>
+                        <span className="dc__truncate">{activeVms}</span>
+                    </Tooltip>
+                </div>
+            )
+        case ProjectListFields.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/ProjectOverview.tsx b/src/components/observability/ProjectObservability/ProjectOverview.tsx
new file mode 100644
index 0000000000..cbbf347952
--- /dev/null
+++ b/src/components/observability/ProjectObservability/ProjectOverview.tsx
@@ -0,0 +1,59 @@
+import { GenericSectionErrorState } from '@devtron-labs/devtron-fe-common-lib'
+
+import { MetricsInfoCard } from '../MetricsInfoCard'
+import { GlanceMetricsKeys } from '../types'
+import { MetricsInfoLoadingCard, useGetGlanceConfig } from '../utils'
+
+export const ProjectOverview = () => {
+    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
+    console.log(data)
+
+    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 glance-cards-wrapper">
+                <MetricsInfoCard
+                    tooltipContent="paliwal"
+                    dataTestId="id"
+                    metricValue="value"
+                    metricTitle="title"
+                    metricUnit="unit"
+                    valueOutOf="valueof"
+                    iconName="ic-bg-cpu"
+                />
+            </div>
+        )
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
+            <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>
+            {renderBody()}
+        </div>
+    )
+}
+
+export default ProjectOverview
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/ProjectOverview.tsx b/src/components/observability/ProjectOverview.tsx
deleted file mode 100644
index 861a2cf6e2..0000000000
--- a/src/components/observability/ProjectOverview.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-    BreadCrumb,
-    BreadcrumbText,
-    GenericSectionErrorState,
-    PageHeader,
-    useBreadcrumb,
-} from '@devtron-labs/devtron-fe-common-lib'
-
-import ObservabilityIconComponent from './ObservabilityIcon'
-import { GlanceMetricsKeys } from './types'
-import { MetricsInfoLoadingCard, useGetGlanceConfig } from './utils'
-
-import './styles.scss'
-import { MetricsInfoCard } from './MetricsInfoCard'
-
-export const ProjectOverview = () => {
-    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
-
-    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 glance-cards-wrapper">
-                <MetricsInfoCard tooltipContent='paliwal' dataTestId='id' metricValue='value' metricTitle='title' metricUnit='unit' valueOutOf='valueof' iconName='ic-bg-cpu' />
-            </div>
-        )
-    }
-
-    return (
-            <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
-                <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>
-                {renderBody()}
-            </div>
-    )
-}
-
-
-export default ProjectOverview;
\ No newline at end of file
diff --git a/src/components/observability/VMList.tsx b/src/components/observability/VMList.tsx
deleted file mode 100644
index aba1d9ffbb..0000000000
--- a/src/components/observability/VMList.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { FiltersTypeEnum, numberComparatorBySortOrder, PaginationEnum, stringComparatorBySortOrder, Table, TableCellComponentProps, TableSignalEnum, Tooltip, useAsync } from ".yalc/@devtron-labs/devtron-fe-common-lib/dist";
-import { FunctionComponent, useEffect, useMemo, useRef } from "react";
-import { ObservabilityVM, VMListFields, VMTableProps } from "./types";
-import { Link } from "react-router-dom";
-import { getVMList } from "./service";
-
-const VMList = () => {
-
-    // ASYNC CALLS
-    const [isFetching, vmData, isError, refetch] = useAsync(
-        () => getVMList(),
-        [],
-    )
-
-    // CONFIGS
-    const rows = useMemo<VMTableProps['rows']>(
-        () =>
-            (vmData || []).map((data) => ({
-                id: `observe_vm_${data.id.toString()}`,
-                data,
-            })),
-        [vmData],
-    )
-
-    const filter: VMTableProps['filter'] = (rowData, filterData) =>
-        rowData.data.name.includes(filterData.searchKey.toLowerCase())
-
-    return (
-        <>
-            <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
-                <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>
-        </>
-    )
-}
-
-export default VMList;
-
-export const VMListCellComponent: FunctionComponent<
-    TableCellComponentProps<VMTableProps, FiltersTypeEnum.STATE, {}>
-> = ({
-    field,
-    row: {
-        data: { id, name, ipAddress, status, cpu, memory, disk },
-    },
-    isRowActive,
-    signals,
-}: TableCellComponentProps<VMTableProps, FiltersTypeEnum.STATE, {}>) => {
-    const linkRef = useRef<HTMLAnchorElement>(null)
-
-    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={'test'}
-                    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
-    }
-}
-
-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,
-        },
-        comparator: numberComparatorBySortOrder,
-        CellComponent: VMListCellComponent
-    }
-]
\ No newline at end of file
diff --git a/src/components/observability/VM.tsx b/src/components/observability/VMObservability/VM.tsx
similarity index 81%
rename from src/components/observability/VM.tsx
rename to src/components/observability/VMObservability/VM.tsx
index d14d544554..ac78a2fa2d 100644
--- a/src/components/observability/VM.tsx
+++ b/src/components/observability/VMObservability/VM.tsx
@@ -1,14 +1,29 @@
-import { useState,useEffect } from "react"
-import { BreadCrumb, BreadcrumbText, ComponentSizeType, handleUTCTime, PageHeader, SearchBar, TabGroup, TabProps, useBreadcrumb } from ".yalc/@devtron-labs/devtron-fe-common-lib/dist"
-import ObservabilityIconComponent from "./ObservabilityIcon"
-import './styles.scss'
-import VMOverview from "./VMOverview"
-import VMList from "./VMList"
+import { useEffect, useState } from 'react'
+
+import {
+    BreadCrumb,
+    BreadcrumbText,
+    ComponentSizeType,
+    handleUTCTime,
+    PageHeader,
+    SearchBar,
+    TabGroup,
+    TabProps,
+    useBreadcrumb,
+} from '@devtron-labs/devtron-fe-common-lib/dist'
+
+import ObservabilityIconComponent from '../ObservabilityIcon'
+import VMList from './VMList'
+import { VMOverview } from './VMOverview'
+
+import '../styles.scss'
+
 let interval
 const VM = () => {
     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 [selectedTabIndex, setSelectedTabIndex] = useState(0)
     const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
@@ -28,16 +43,17 @@ const VM = () => {
             }
         }
     }, [isDataSyncing])
-            
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const updateDataSyncing = (loading: boolean): void => {
         setDataSyncing(loading)
     }
-    const tabs: TabProps = [
+    const tabs: TabProps[] = [
         {
             id: 'vm_overview',
             label: 'Overview',
             tabType: 'button',
-            active: selectedTabIndex == 0,
+            active: selectedTabIndex === 0,
             props: {
                 onClick: () => {
                     setSelectedTabIndex(0)
@@ -48,31 +64,27 @@ const VM = () => {
             id: 'vm_list',
             label: 'VMs',
             tabType: 'button',
-            active: selectedTabIndex == 1,
+            active: selectedTabIndex === 1,
             props: {
                 onClick: () => {
                     setSelectedTabIndex(1)
                 },
             },
-        }
+        },
     ]
-            
+
     const syncNow = (): void => {
         setSyncListData(!syncListData)
     }
 
-    const renderVMOverview = () => {
-        return <VMOverview />
-    }
+    const renderVMOverview = () => <VMOverview />
 
-    const renderVMList = () => {
-        return <VMList />
-    }
+    const renderVMList = () => <VMList />
 
     const renderVMTabs = () => {
         const rightComponent = (
             <div className="flex fs-13">
-                {lastDataSyncTimeString &&
+                {lastDataSyncTimeString && (
                     <>
                         <span data-testid="sync-now-text">{lastDataSyncTimeString}</span>
                         {!isDataSyncing && (
@@ -89,22 +101,22 @@ const VM = () => {
                             </>
                         )}
                     </>
-                }
+                )}
                 {fetchingExternalApps && renderDataSyncingText()}
             </div>
         )
-        
+
         return (
             <div>
                 <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
                     <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border px-20">
-                        <TabGroup tabs={tabs} rightComponent={rightComponent}/>
+                        <TabGroup tabs={tabs} rightComponent={rightComponent} />
                     </div>
                 </div>
                 <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
                     <div className=" pr-20 pl-20 pt-12 pb-12">
-                        {selectedTabIndex == 0 && renderVMOverview()}
-                        {selectedTabIndex == 1 && renderVMList()}
+                        {selectedTabIndex === 0 && renderVMOverview()}
+                        {selectedTabIndex === 1 && renderVMList()}
                     </div>
                 </div>
             </div>
@@ -124,7 +136,7 @@ const VM = () => {
         },
     })
     const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
-    const searchKey = ""
+    const searchKey = ''
     const handleSearch = () => {}
     return (
         <div className="observability-overview flex-grow-1 dc__overflow-auto bg__secondary">
@@ -147,4 +159,4 @@ const VM = () => {
     )
 }
 
-export default VM;
\ No newline at end of file
+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..b00d730403
--- /dev/null
+++ b/src/components/observability/VMObservability/VMList.tsx
@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+
+import { FiltersTypeEnum, PaginationEnum, 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 = () => {
+    // ASYNC CALLS
+    const [isFetching, vmData] = useAsync(() => getVMList(), [])
+
+    // CONFIGS
+    const rows = useMemo<VMTableProps['rows']>(
+        () =>
+            (vmData || []).map((data) => ({
+                id: `observe_vm_${data.id.toString()}`,
+                data,
+            })),
+        [vmData],
+    )
+
+    const filter: VMTableProps['filter'] = (rowData, filterData) =>
+        rowData.data.name.includes(filterData.searchKey.toLowerCase())
+
+    return (
+        <div className="observability-table-wrapper flexbox-col flex-grow-1 dc__overflow-auto">
+            <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>
+    )
+}
+
+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..1fc53cef30
--- /dev/null
+++ b/src/components/observability/VMObservability/VMListCellComponent.tsx
@@ -0,0 +1,75 @@
+import { FunctionComponent, useEffect, useRef } from 'react'
+import { Link } 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)
+
+    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="test" 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/VMOverview.tsx b/src/components/observability/VMObservability/VMOverview.tsx
new file mode 100644
index 0000000000..2727eaccf1
--- /dev/null
+++ b/src/components/observability/VMObservability/VMOverview.tsx
@@ -0,0 +1,61 @@
+import { GenericSectionErrorState } from '@devtron-labs/devtron-fe-common-lib'
+
+import { MetricsInfoCard } from '../MetricsInfoCard'
+// import ObservabilityIconComponent from './ObservabilityIcon'
+import { GlanceMetricsKeys } from '../types'
+import { MetricsInfoLoadingCard, useGetGlanceConfig } from '../utils'
+
+import '../styles.scss'
+
+export const VMOverview = () => {
+    const { isFetching, isError, refetch } = useGetGlanceConfig()
+
+    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 glance-cards-wrapper">
+                <MetricsInfoCard
+                    tooltipContent="paliwal"
+                    dataTestId="id"
+                    metricValue="value"
+                    metricTitle="title"
+                    metricUnit="unit"
+                    valueOutOf="valueof"
+                    iconName="ic-bg-cpu"
+                />
+            </div>
+        )
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
+            <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>
+            {renderBody()}
+        </div>
+    )
+}
+
+export default VMOverview
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/VMOverview.tsx b/src/components/observability/VMOverview.tsx
deleted file mode 100644
index 3d85d1894b..0000000000
--- a/src/components/observability/VMOverview.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import {
-    BreadCrumb,
-    BreadcrumbText,
-    GenericSectionErrorState,
-    PageHeader,
-    useBreadcrumb,
-} from '@devtron-labs/devtron-fe-common-lib'
-
-import ObservabilityIconComponent from './ObservabilityIcon'
-import { GlanceMetricsKeys } from './types'
-import { MetricsInfoLoadingCard, useGetGlanceConfig } from './utils'
-
-import './styles.scss'
-import { MetricsInfoCard } from './MetricsInfoCard'
-
-export const VMOverview = () => {
-    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
-
-    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 glance-cards-wrapper">
-                <MetricsInfoCard tooltipContent='paliwal' dataTestId='id' metricValue='value' metricTitle='title' metricUnit='unit' valueOutOf='valueof' iconName='ic-bg-cpu' />
-            </div>
-        )
-    }
-
-    return (
-            <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
-                <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>
-                {renderBody()}
-            </div>
-    )
-}
-
-
-export default VMOverview;
\ No newline at end of file
diff --git a/src/components/observability/constants.ts b/src/components/observability/constants.ts
index f0a1892809..73b3a461eb 100644
--- a/src/components/observability/constants.ts
+++ b/src/components/observability/constants.ts
@@ -1,5 +1,14 @@
-import { IconName, SegmentedControlProps } from '@devtron-labs/devtron-fe-common-lib'
-import { TabDetailsSegment } from './types'
+import {
+    IconName,
+    numberComparatorBySortOrder,
+    SegmentedControlProps,
+    stringComparatorBySortOrder,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ProjectListCellComponent } from './ProjectObservability/ProjectListCellComponent'
+import { VMListCellComponent } from './VMObservability/VMListCellComponent'
+import { CustomerListCellComponent } from './CustomerListCellComponent'
+import { CustomerTableProps, ProjectTableProps, TabDetailsSegment, VMTableProps } from './types'
 
 export enum GlanceMetricKeys {
     PROJECTS = 'projects',
@@ -40,5 +49,201 @@ export const TAB_DETAILS_SEGMENTS: SegmentedControlProps['segments'] = [
     {
         label: 'Projects',
         value: TabDetailsSegment.PROJECTS,
-    }
+    },
+]
+
+export const CUSTOMER_TABLE_COLUMN: CustomerTableProps['columns'] = [
+    {
+        field: 'icon',
+        size: {
+            fixed: 24,
+        },
+        CellComponent: CustomerListCellComponent,
+    },
+    {
+        field: 'name',
+        label: 'Customer',
+        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: 'project',
+        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,
+    },
 ]
diff --git a/src/components/observability/service.ts b/src/components/observability/service.ts
index b5a8de4d1c..1f828eff58 100644
--- a/src/components/observability/service.ts
+++ b/src/components/observability/service.ts
@@ -1,3 +1,5 @@
+import { CustomerObservabilityDTO } from './types'
+
 export const getObservabilityData: () => Promise<any> = () =>
     Promise.resolve({
         totalClusters: 10,
@@ -7,71 +9,95 @@ export const getObservabilityData: () => Promise<any> = () =>
         healthStatus: 50,
     })
 
-    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 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 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
-    },
-    ])
\ No newline at end of file
+export const getCustomerListData: () => Promise<CustomerObservabilityDTO[]> = () =>
+    Promise.resolve([
+        {
+            id: 1,
+            name: 'Customer1',
+            status: 'ACTIVE',
+            project: 2,
+            totalVms: 14,
+            healthStatus: '80%',
+            activeVms: 2,
+        },
+        {
+            id: 2,
+            name: 'Customer2',
+            status: 'INACTIVE',
+            project: 34,
+            totalVms: 4,
+            healthStatus: '20%',
+            activeVms: 1,
+        },
+    ])
diff --git a/src/components/observability/styles.scss b/src/components/observability/styles.scss
index a569c3f908..a87e223ec5 100644
--- a/src/components/observability/styles.scss
+++ b/src/components/observability/styles.scss
@@ -10,17 +10,18 @@
         grid-template-columns: 150px 1fr 1fr;
     }
 
-     .at-a-glance {
-            grid-template-columns: 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 {
+    > :first-child> :first-child,
+    > :first-child> :first-child> :first-child,
+    > :first-child> :first-child> :first-child> :first-child {
         overflow: visible !important;
     }
 }
diff --git a/src/components/observability/types.ts b/src/components/observability/types.ts
index 86a35d87d8..f2cadb3a62 100644
--- a/src/components/observability/types.ts
+++ b/src/components/observability/types.ts
@@ -1,4 +1,4 @@
-import { FiltersTypeEnum, TableProps } from ".yalc/@devtron-labs/devtron-fe-common-lib/dist"
+import { FiltersTypeEnum, TableProps } from '.yalc/@devtron-labs/devtron-fe-common-lib/dist'
 
 export enum GlanceMetricsKeys {
     REACHABLE_CUSTOMERS = 'customers',
@@ -7,49 +7,51 @@ export enum GlanceMetricsKeys {
     HEALTH_STATUS = 'healthStatus',
 }
 
+export type ObservabilityStatus = 'ACTIVE' | 'INACTIVE'
 
-export interface ObservabilityProject {
-    id: string,
-    name: string,
-    description: string,
-    status: string,
-    totalVms: number,
-    activeVms: number,
+export interface BaseObservability {
+    id: number
+    name: string
+    status: ObservabilityStatus
+}
+
+export interface CustomerObservabilityDTO extends BaseObservability {
+    project: number
+    totalVms: number
+    activeVms: number
     healthStatus: string
 }
 
-export type ProjectTableProps = TableProps<
-    ObservabilityProject,
-    FiltersTypeEnum.STATE,
-    {}
->
+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 ProjectListFields {
     PROJECT_ID = 'id',
     PROJECT_NAME = 'name',
     PROJECT_DESCRIPTION = 'description',
-    PROJECT_STATUS = 'status',
+    STATUS = 'status',
     TOTAL_VMS = 'totalVms',
     ACTIVE_VMS = 'activeVms',
     HEALTH_STATUS = 'healthStatus',
+    PROJECTS = 'projects',
 }
 
-export interface ObservabilityVM {
-    id: string,
-    name: string,
-    ipAddress: string,
-    status: string,
-    cpu: number,
-    memory: number,
-    disk: number
-}
-
-export type VMTableProps = TableProps<
-    ObservabilityVM,
-    FiltersTypeEnum.STATE,
-    {}
->
-
 export enum VMListFields {
     VM_ID = 'id',
     VM_NAME = 'name',
@@ -68,9 +70,9 @@ export enum ObservabilityFilters {
 
 export enum TabDetailsSegment {
     'OVERVIEW' = 'Overview',
-    'PROJECTS' = 'Projects'
+    'PROJECTS' = 'Projects',
 }
 
 export interface TabDetailsSearchParams {
     tab: TabDetailsSegment
-}
\ No newline at end of file
+}
diff --git a/src/components/observability/utils.tsx b/src/components/observability/utils.tsx
index fe934d565d..382130f680 100644
--- a/src/components/observability/utils.tsx
+++ b/src/components/observability/utils.tsx
@@ -24,4 +24,4 @@ export const useGetGlanceConfig = () =>
 
 export const parseChartDetailsSearchParams = (searchParams: URLSearchParams): TabDetailsSearchParams => ({
     tab: (searchParams.get('tab') as TabDetailsSegment) || TabDetailsSegment.OVERVIEW,
-})
\ No newline at end of file
+})
diff --git a/src/components/project/ProjectList.tsx b/src/components/project/ProjectList.tsx
index fd2b7dd8bc..799a63bbfc 100644
--- a/src/components/project/ProjectList.tsx
+++ b/src/components/project/ProjectList.tsx
@@ -20,7 +20,6 @@ import {
     Progressing,
     ErrorScreenManager,
     ErrorScreenNotAuthorized,
-    FeatureTitleWithInfo,
     ToastVariantType,
     ToastManager,
     PageHeader,
diff --git a/vite.config.mts b/vite.config.mts
index dcb785595b..e7d3de936c 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -31,7 +31,7 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 import { compression, defineAlgorithm } from 'vite-plugin-compression2'
 
 const WRONG_CODE = `import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";`
-const TARGET_URL = 'https://preview.devtron.ai/'
+const TARGET_URL = 'https://devtron-ent-7.devtron.info/'
 
 function reactVirtualized(): PluginOption {
     return {