diff --git a/package-lock.json b/package-lock.json
index 35c03b3bc..9548bd586 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.21.0-pre-2",
+    "version": "1.21.0-beta-10",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.21.0-pre-2",
+            "version": "1.21.0-beta-10",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 64a08f45d..ae16c82a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.21.0-pre-2",
+    "version": "1.21.0-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Common/Constants.ts b/src/Common/Constants.ts
index 8e1485e53..24a586454 100644
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -223,6 +223,12 @@ export const ROUTES = {
     LICENSE_DATA: 'license/data',
     ENV: 'env',
     APP_METADATA: 'app-metadata',
+    APPS_OVERVIEW: 'overview/apps-overview',
+    WORKFLOW_OVERVIEW: 'overview/workflow-overview',
+    DORA_METRICS: 'overview/dora-metrics',
+    BUILD_DEPLOYMENT_ACTIVITY: 'overview/build-deployment-activity',
+    BUILD_DEPLOYMENT_ACTIVITY_DETAILED: 'overview/build-deployment-activity/detailed',
+    PIPELINE_INSIGHTS: 'overview/pipeline-insights',
 } as const
 
 export enum KEY_VALUE {
diff --git a/src/Pages-Devtron-2.0/Navigation/index.ts b/src/Pages-Devtron-2.0/Navigation/index.ts
new file mode 100644
index 000000000..c9f6f047d
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Navigation/index.ts
@@ -0,0 +1 @@
+export * from './types'
diff --git a/src/Pages-Devtron-2.0/Navigation/types.ts b/src/Pages-Devtron-2.0/Navigation/types.ts
new file mode 100644
index 000000000..fb8fb1f65
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Navigation/types.ts
@@ -0,0 +1,116 @@
+import { customEnv, Never } from 'src'
+
+import { IconsProps } from '@Shared/Components'
+
+export type NavigationItemID =
+    | 'application-management-overview'
+    | 'application-management-devtron-applications'
+    | 'application-management-application-groups'
+    | 'application-management-bulk-edit'
+    | 'application-management-application-templates'
+    | 'application-management-projects'
+    | 'application-management-configurations'
+    | 'application-management-policies'
+    | 'infrastructure-management-overview'
+    | 'infrastructure-management-applications'
+    | 'infrastructure-management-chart-store'
+    | 'infrastructure-management-resource-browser'
+    | 'infrastructure-management-resource-watcher'
+    | 'infrastructure-management-catalog-framework'
+    | 'software-release-management-overview'
+    | 'software-release-management-release-hub'
+    | 'software-release-management-tenants'
+    | 'cost-visibility-overview'
+    | 'cost-visibility-cost-breakdown'
+    | 'cost-visibility-configurations'
+    | 'security-center-overview'
+    | 'security-center-security-vulnerabilities'
+    | 'security-center-security-enablement'
+    | 'security-center-security-policy'
+    | 'automation-and-enablement-jobs'
+    | 'automation-and-enablement-alerting'
+    | 'automation-and-enablement-incident-response'
+    | 'automation-and-enablement-api-portal'
+    | 'automation-and-enablement-runbook-automation'
+    | 'global-configuration-sso-login-services'
+    | 'global-configuration-host-urls'
+    | 'global-configuration-external-links'
+    | 'global-configuration-chart-repository'
+    | 'global-configuration-cluster-and-environments'
+    | 'global-configuration-container-oci-registry'
+    | 'global-configuration-authorization'
+    | 'data-protection-overview'
+    | 'data-protection-backup-and-schedule'
+    | 'data-protection-restores'
+    | 'data-protection-backup-repositories'
+    | 'data-protection-backup-locations'
+    | 'data-protection-history-and-logs'
+
+export type NavigationSubMenuItemID =
+    | 'application-management-configurations-gitops'
+    | 'application-management-configurations-git-accounts'
+    | 'application-management-configurations-deployment-charts'
+    | 'application-management-configurations-notifications'
+    | 'application-management-configurations-catalog-frameworks'
+    | 'application-management-configurations-scoped-variables'
+    | 'application-management-configurations-build-infra'
+    | 'application-management-policies-deployment-window'
+    | 'application-management-policies-approval-policy'
+    | 'application-management-policies-plugin-policy'
+    | 'application-management-policies-pull-image-digest'
+    | 'application-management-policies-tag-policy'
+    | 'application-management-policies-filter-conditions'
+    | 'application-management-policies-image-promotion'
+    | 'application-management-policies-lock-deployment-configuration'
+    | 'cost-visibility-cost-breakdown-clusters'
+    | 'cost-visibility-cost-breakdown-environments'
+    | 'cost-visibility-cost-breakdown-projects'
+    | 'cost-visibility-cost-breakdown-applications'
+    | 'global-configuration-authorization-user-permissions'
+    | 'global-configuration-authorization-permission-groups'
+    | 'global-configuration-authorization-api-tokens'
+
+export type NavigationRootItemID =
+    | 'application-management'
+    | 'infrastructure-management'
+    | 'software-release-management'
+    | 'cost-visibility'
+    | 'security-center'
+    | 'automation-and-enablement'
+    | 'data-protection-management'
+    | 'global-configuration'
+
+export type CommonNavigationItemType = {
+    title: string
+    dataTestId: string
+    icon: IconsProps['name']
+    href: string
+    disabled?: boolean
+    keywords?: string[]
+    forceHideEnvKey?: keyof customEnv
+    hideNav?: boolean
+    isAvailableInEA?: boolean
+}
+
+export type NavigationItemType = Pick<
+    CommonNavigationItemType,
+    'dataTestId' | 'title' | 'disabled' | 'keywords' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'
+> & {
+    id: NavigationItemID
+} & (
+        | (Pick<CommonNavigationItemType, 'icon' | 'href'> & {
+              hasSubMenu?: false
+              subItems?: never
+          })
+        | (Never<Pick<CommonNavigationItemType, 'icon' | 'href'>> & {
+              hasSubMenu: true
+              subItems: (Omit<CommonNavigationItemType, 'icon'> & { id: NavigationSubMenuItemID })[]
+          })
+    )
+
+export interface NavigationGroupType
+    extends Pick<CommonNavigationItemType, 'title' | 'icon' | 'hideNav' | 'forceHideEnvKey' | 'isAvailableInEA'> {
+    id: NavigationRootItemID
+    items: NavigationItemType[]
+    disabled?: boolean
+}
diff --git a/src/Pages-Devtron-2.0/Shared/components.tsx b/src/Pages-Devtron-2.0/Shared/components.tsx
new file mode 100644
index 000000000..cf50c151f
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/components.tsx
@@ -0,0 +1,43 @@
+import { CHART_COLORS } from '@Shared/Components/Charts'
+import { useTheme } from '@Shared/Providers/ThemeProvider'
+
+import { ChartTooltipProps } from './types'
+
+export const LoadingDonutChart = () => (
+    <div className="flex p-20 dc__gap-20 h-200">
+        <div className="dc__border-radius-50-per h-150 w-150 shimmer" />
+        <div className="flexbox-col dc__gap-8">
+            <span className="shimmer w-80px" />
+            <span className="shimmer w-80px" />
+        </div>
+    </div>
+)
+
+export const ChartTooltip = ({ title, label, value, chartColorKey }: ChartTooltipProps) => {
+    const { appTheme } = useTheme()
+    const backgroundColor = CHART_COLORS[appTheme][chartColorKey]
+    return (
+        <div className="dc__mxw-200 flexbox-col dc__gap-8 py-6 px-10 fw-4">
+            {title && <span className="fw-6">{title}</span>}
+            <div className="flexbox dc__gap-4">
+                <div className="py-4">
+                    <div className="icon-dim-12 br-2" style={{ backgroundColor }} />
+                </div>
+                <div className="flexbox-col dc__gap-12">
+                    <span>
+                        {label}:&nbsp;{value}
+                    </span>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export const ChartColorIndicator = ({ title, backgroundColor }: { title: string; backgroundColor: string }) => (
+    <div className="flexbox dc__gap-4">
+        <div className="py-4">
+            <div className="icon-dim-12 br-2" style={{ backgroundColor }} />
+        </div>
+        <span>{title}</span>
+    </div>
+)
diff --git a/src/Pages-Devtron-2.0/Shared/constants.ts b/src/Pages-Devtron-2.0/Shared/constants.ts
new file mode 100644
index 000000000..d1984dc5a
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/constants.ts
@@ -0,0 +1,66 @@
+import { SortingOrder } from '@Common/Constants'
+import { SelectPickerOptionType } from '@Shared/Components'
+
+import { RelativeTimeWindow, TIME_WINDOW } from './types'
+
+const OVERVIEW_DEFAULT_PAGE_SIZE = {
+    SMALL: 5,
+    MEDIUM: 10,
+    LARGE: 20,
+}
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.LARGE,
+        selected: false,
+    },
+]
+
+export const OVERVIEW_PAGE_SIZE_OPTIONS_SMALL = [
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.SMALL,
+        selected: true,
+    },
+    {
+        value: OVERVIEW_DEFAULT_PAGE_SIZE.MEDIUM,
+        selected: false,
+    },
+]
+
+export const RELATIVE_TIME_WINDOW_LABEL_MAP: Record<RelativeTimeWindow, string> = {
+    [RelativeTimeWindow.LAST_7_DAYS]: 'Last 7 Days',
+    [RelativeTimeWindow.LAST_30_DAYS]: 'Last 30 Days',
+    [RelativeTimeWindow.LAST_90_DAYS]: 'Last 90 Days',
+}
+
+export const RELATIVE_TIME_WINDOW_SELECT_OPTIONS: SelectPickerOptionType<RelativeTimeWindow>[] = (
+    Object.keys(RELATIVE_TIME_WINDOW_LABEL_MAP) as RelativeTimeWindow[]
+).map((value) => ({
+    label: RELATIVE_TIME_WINDOW_LABEL_MAP[value],
+    value,
+}))
+
+export const SORT_ORDER_OPTIONS: SelectPickerOptionType<SortingOrder>[] = [
+    { label: 'Low to high', value: SortingOrder.ASC },
+    { label: 'High to low', value: SortingOrder.DESC },
+]
+
+export const TIME_WINDOW_LABEL_MAP: Record<TIME_WINDOW, string> = {
+    [TIME_WINDOW.TODAY]: 'Today',
+    [TIME_WINDOW.THIS_WEEK]: 'This week',
+    [TIME_WINDOW.THIS_MONTH]: 'This month',
+    [TIME_WINDOW.THIS_QUARTER]: 'This quarter',
+    [TIME_WINDOW.LAST_WEEK]: 'Last week',
+    [TIME_WINDOW.LAST_MONTH]: 'Last month',
+}
+
+export const TIME_WINDOW_SELECT_OPTIONS: SelectPickerOptionType<TIME_WINDOW>[] = (
+    Object.keys(TIME_WINDOW_LABEL_MAP) as TIME_WINDOW[]
+).map((value) => ({
+    label: TIME_WINDOW_LABEL_MAP[value],
+    value,
+}))
diff --git a/src/Pages-Devtron-2.0/Shared/index.ts b/src/Pages-Devtron-2.0/Shared/index.ts
new file mode 100644
index 000000000..b66f7e6b2
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/index.ts
@@ -0,0 +1,4 @@
+export * from './components'
+export * from './constants'
+export * from './types'
+export * from './utils'
diff --git a/src/Pages-Devtron-2.0/Shared/types.ts b/src/Pages-Devtron-2.0/Shared/types.ts
new file mode 100644
index 000000000..22c5d1ad4
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/types.ts
@@ -0,0 +1,29 @@
+import { ChartColorKey } from '@Shared/Components/Charts/types'
+
+export enum ProdNonProdSelectValueTypes {
+    ALL = 'All',
+    PRODUCTION = 'Prod',
+    NON_PRODUCTION = 'Non-Prod',
+}
+
+export enum RelativeTimeWindow {
+    LAST_7_DAYS = 'last7Days',
+    LAST_30_DAYS = 'last30Days',
+    LAST_90_DAYS = 'last90Days',
+}
+
+export interface ChartTooltipProps {
+    title?: string
+    label: string
+    value: string | number
+    chartColorKey: ChartColorKey
+}
+
+export enum TIME_WINDOW {
+    TODAY = 'today',
+    THIS_WEEK = 'week',
+    THIS_MONTH = 'month',
+    THIS_QUARTER = 'quarter',
+    LAST_WEEK = 'lastWeek',
+    LAST_MONTH = 'lastMonth',
+}
diff --git a/src/Pages-Devtron-2.0/Shared/utils.ts b/src/Pages-Devtron-2.0/Shared/utils.ts
new file mode 100644
index 000000000..6afba8e6c
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/utils.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+
+import { DATE_TIME_FORMATS } from '@Common/Constants'
+
+export const parseTimestampToDate = (timestamp: string): string => {
+    const dateObj = dayjs(timestamp)
+    return dateObj.format(DATE_TIME_FORMATS.DD_MMM)
+}
diff --git a/src/Pages-Devtron-2.0/index.ts b/src/Pages-Devtron-2.0/index.ts
index 12ea29ca5..df634e1ce 100644
--- a/src/Pages-Devtron-2.0/index.ts
+++ b/src/Pages-Devtron-2.0/index.ts
@@ -2,4 +2,6 @@ export * from './ApplicationManagement'
 export * from './CostVisibility'
 export * from './DataProtectionManagement'
 export * from './InfrastructureManagement'
+export * from './Navigation'
 export * from './SecurityCenter'
+export * from './Shared'
diff --git a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx
index 9ebecb106..194cd67a1 100644
--- a/src/Shared/Components/InfoBlock/InfoBlock.component.tsx
+++ b/src/Shared/Components/InfoBlock/InfoBlock.component.tsx
@@ -98,7 +98,7 @@ const InfoBlock = ({
     if (layout === 'row') {
         return (
             <div className={`${baseContainerClass} flexbox dc__gap-16`}>
-                <div className="flex left dc__gap-8 flex-grow-1">
+                <div className="flexbox dc__gap-8 flex-grow-1">
                     {renderIcon()}
                     {renderContent()}
                 </div>
diff --git a/src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx b/src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx
index 5fe8fdb38..2f7181d94 100644
--- a/src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx
+++ b/src/Shared/Components/SelectPicker/SelectPickerTextArea.component.tsx
@@ -183,10 +183,8 @@ export const SelectPickerTextArea = ({
                 selectRef.current.inputRef.selectionEnd = selectionStart + 1
             })
 
-            return
+            updateValueIfOnlyDirty()
         }
-
-        updateValueIfOnlyDirty()
     }
 
     return (
diff --git a/src/Shared/Hooks/useUserPreferences/types.ts b/src/Shared/Hooks/useUserPreferences/types.ts
index a3c2db55d..a03c7eb10 100644
--- a/src/Shared/Hooks/useUserPreferences/types.ts
+++ b/src/Shared/Hooks/useUserPreferences/types.ts
@@ -17,74 +17,7 @@
 import { USER_PREFERENCES_ATTRIBUTE_KEY } from '@Shared/Hooks/useUserPreferences/constants'
 import { AppThemeType, ThemeConfigType, ThemePreferenceType } from '@Shared/Providers/ThemeProvider/types'
 import { ResourceKindType } from '@Shared/types'
-
-export type NavigationItemID =
-    | 'application-management-overview'
-    | 'application-management-devtron-applications'
-    | 'application-management-application-groups'
-    | 'application-management-bulk-edit'
-    | 'application-management-application-templates'
-    | 'application-management-projects'
-    | 'application-management-configurations'
-    | 'application-management-policies'
-    | 'infrastructure-management-overview'
-    | 'infrastructure-management-applications'
-    | 'infrastructure-management-chart-store'
-    | 'infrastructure-management-resource-browser'
-    | 'infrastructure-management-resource-watcher'
-    | 'infrastructure-management-catalog-framework'
-    | 'software-release-management-overview'
-    | 'software-release-management-release-hub'
-    | 'software-release-management-tenants'
-    | 'cost-visibility-overview'
-    | 'cost-visibility-cost-breakdown'
-    | 'cost-visibility-configurations'
-    | 'security-center-overview'
-    | 'security-center-security-vulnerabilities'
-    | 'security-center-security-enablement'
-    | 'security-center-security-policy'
-    | 'automation-and-enablement-jobs'
-    | 'automation-and-enablement-alerting'
-    | 'automation-and-enablement-incident-response'
-    | 'automation-and-enablement-api-portal'
-    | 'automation-and-enablement-runbook-automation'
-    | 'global-configuration-sso-login-services'
-    | 'global-configuration-host-urls'
-    | 'global-configuration-cluster-and-environments'
-    | 'global-configuration-container-oci-registry'
-    | 'global-configuration-authorization'
-    | 'data-protection-overview'
-    | 'data-protection-backup-and-schedule'
-    | 'data-protection-restores'
-    | 'data-protection-backup-repositories'
-    | 'data-protection-backup-locations'
-    | 'data-protection-history-and-logs'
-
-export type NavigationSubMenuItemID =
-    | 'application-management-configurations-gitops'
-    | 'application-management-configurations-git-accounts'
-    | 'application-management-configurations-external-links'
-    | 'application-management-configurations-chart-repository'
-    | 'application-management-configurations-deployment-charts'
-    | 'application-management-configurations-notifications'
-    | 'application-management-configurations-catalog-frameworks'
-    | 'application-management-configurations-scoped-variables'
-    | 'application-management-configurations-build-infra'
-    | 'application-management-policies-deployment-window'
-    | 'application-management-policies-approval-policy'
-    | 'application-management-policies-plugin-policy'
-    | 'application-management-policies-pull-image-digest'
-    | 'application-management-policies-tag-policy'
-    | 'application-management-policies-filter-conditions'
-    | 'application-management-policies-image-promotion'
-    | 'application-management-policies-lock-deployment-configuration'
-    | 'cost-visibility-cost-breakdown-clusters'
-    | 'cost-visibility-cost-breakdown-environments'
-    | 'cost-visibility-cost-breakdown-projects'
-    | 'cost-visibility-cost-breakdown-applications'
-    | 'global-configuration-authorization-user-permissions'
-    | 'global-configuration-authorization-permission-groups'
-    | 'global-configuration-authorization-api-tokens'
+import { NavigationItemID, NavigationSubMenuItemID } from '@PagesDevtron2.0/Navigation'
 
 export interface GetUserPreferencesQueryParamsType {
     key: typeof USER_PREFERENCES_ATTRIBUTE_KEY
diff --git a/src/Shared/utils.ts b/src/Shared/utils.ts
new file mode 100644
index 000000000..6afba8e6c
--- /dev/null
+++ b/src/Shared/utils.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+
+import { DATE_TIME_FORMATS } from '@Common/Constants'
+
+export const parseTimestampToDate = (timestamp: string): string => {
+    const dateObj = dayjs(timestamp)
+    return dateObj.format(DATE_TIME_FORMATS.DD_MMM)
+}