diff --git a/package-lock.json b/package-lock.json
index 85301cabc..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-5",
+    "version": "1.21.0-beta-10",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.21.0-pre-5",
+            "version": "1.21.0-beta-10",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index 104dde616..ae16c82a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.21.0-pre-5",
+    "version": "1.21.0-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/IconV2/ic-chart-repo.svg b/src/Assets/IconV2/ic-chart-repo.svg
new file mode 100644
index 000000000..8d0dff3f9
--- /dev/null
+++ b/src/Assets/IconV2/ic-chart-repo.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 6.984v12.564a.771.771 0 0 0 .77.77h5.244M2 6.983h19.167a.833.833 0 0 1 .833.833v1.38M2 6.984v-2.5a.833.833 0 0 1 .833-.834h5.488a.833.833 0 0 1 .59.244L12 6.984" vector-effect="non-scaling-stroke"/>
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="M18.752 13.248a3.892 3.892 0 0 1 0 5.504m0-5.504a3.892 3.892 0 0 0-5.504 0m5.504 0 1.49-1.49m-1.49 6.994a3.892 3.892 0 0 1-5.504 0m5.504 0 1.49 1.49m-6.994-1.49a3.892 3.892 0 0 1 0-5.504m0 5.504-1.49 1.49m1.49-6.994-1.49-1.49M16 10v2.108m0 7.784V22m-6-6h2.108m7.784 0H22" vector-effect="non-scaling-stroke"/>
+  <path fill="#3B444C" d="M16.445 16a.446.446 0 1 0-.445.445v1.5l-.2-.01a1.947 1.947 0 0 1-1.737-1.737l-.01-.198c0-1.075.872-1.946 1.947-1.946l.198.01A1.945 1.945 0 0 1 17.945 16l-.01.198A1.946 1.946 0 0 1 16 17.945v-1.5a.445.445 0 0 0 .445-.445Z"/>
+</svg>
diff --git a/src/Assets/IconV2/ic-external-link.svg b/src/Assets/IconV2/ic-external-link.svg
new file mode 100644
index 000000000..ddcdbcf6f
--- /dev/null
+++ b/src/Assets/IconV2/ic-external-link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.251 8.4H11.5M4.74 20.25H2.908c-.363 0-.657-.315-.657-.703V4.453c0-.388.294-.703.657-.703h16.2c.363 0 .657.315.657.703V5" vector-effect="non-scaling-stroke"/>
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m17.347 12.654-4.694 4.693m7.135-1.81 1.11-1.109a3.766 3.766 0 0 0-5.326-5.325l-1.11 1.11m-4.25 4.25-1.11 1.109a3.766 3.766 0 0 0 5.326 5.325l1.11-1.11" vector-effect="non-scaling-stroke"/>
+</svg>
diff --git a/src/Pages-Devtron-2.0/Shared/Overview/components.tsx b/src/Pages-Devtron-2.0/Shared/Overview/components.tsx
new file mode 100644
index 000000000..82e343284
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/Overview/components.tsx
@@ -0,0 +1,128 @@
+import { ReactNode, useState } from 'react'
+import { NavLink } from 'react-router-dom'
+import { motion } from 'framer-motion'
+
+import { ConditionalWrap } from '@Common/Helper'
+import { Tooltip } from '@Common/Tooltip'
+import { Button, ButtonStyleType, ButtonVariantType, Icon } from '@Shared/Components'
+
+import { MetricsInfoCardProps, SectionEmptyStateProps } from './types'
+
+export const SectionEmptyState = ({
+    iconName = 'ic-priority-medium-fill',
+    iconColor,
+    title,
+    subtitle,
+    buttonConfig,
+}: SectionEmptyStateProps) => (
+    <div className="flex column p-16 dc__gap-12">
+        <Icon name={iconName} size={24} color={iconColor} />
+        <div className="flexbox-col dc__gap-2 fs-13 lh-20">
+            <span className="text-center fw-6 cn-9">{title}</span>
+            {subtitle && <span className="text-center fw-4 cn-8">{subtitle}</span>}
+        </div>
+        {buttonConfig && <Button {...buttonConfig} />}
+    </div>
+)
+
+const navLinkWrap = (redirectionLink: string) => (children: ReactNode) => (
+    <NavLink to={redirectionLink}>{children}</NavLink>
+)
+
+export const MetricsInfoLoadingCard = ({ withSubtitle }: { withSubtitle?: boolean }) => (
+    <div className="flexbox-col br-8 bg__primary border__secondary">
+        <div className="flexbox dc__gap-12 p-16 dc__content-space">
+            <div className="flexbox-col">
+                <span className="h-12 mt-4 mb-4 w-40 shimmer" />
+                <span className="h-24 mt-6 mb-6 w-40 shimmer" />
+            </div>
+            <div className="h-24 w-24 m-6 shimmer" />
+        </div>
+        {withSubtitle && (
+            <div className="border__secondary--top px-16 py-8">
+                <span className="w-100px h-18 shimmer" />
+            </div>
+        )}
+    </div>
+)
+
+export const MetricsInfoCard = ({
+    dataTestId,
+    metricTitle,
+    metricValue,
+    metricUnit,
+    valueOutOf,
+    iconName,
+    subtitle,
+    redirectionLink,
+    tooltipContent,
+    subtitleRedirection,
+}: MetricsInfoCardProps) => {
+    const [isHovering, setIsHovering] = useState(false)
+
+    const handleHoverStart = () => setIsHovering(true)
+    const handleHoverEnd = () => setIsHovering(false)
+
+    return (
+        <ConditionalWrap condition={!!redirectionLink} wrap={navLinkWrap(redirectionLink)}>
+            <motion.div
+                data-testid={dataTestId}
+                onHoverStart={handleHoverStart}
+                onHoverEnd={handleHoverEnd}
+                className={`flexbox-col br-8 bg__primary border__secondary cn-9 ${isHovering ? 'shadow__card--10' : ''}`}
+            >
+                <div className="flexbox dc__gap-12 p-16 dc__content-space">
+                    <div className="flexbox-col">
+                        <Tooltip alwaysShowTippyOnHover content={tooltipContent}>
+                            <span className={`fs-13 fw-4 lh-20 ${isHovering ? 'dc__underline-dotted' : ''}`}>
+                                {metricTitle}
+                            </span>
+                        </Tooltip>
+                        <div className="flexbox dc__gap-4 dc__align-baseline font-ibm-plex-sans">
+                            <span className="fs-24 fw-6 lh-1-5">{metricValue}</span>
+                            {valueOutOf && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">/ {valueOutOf}</span>
+                            )}
+                            {metricUnit && (
+                                <span className="fs-16 fw-4 lh-20 dc__first-letter-capitalize">{metricUnit}</span>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        {redirectionLink && isHovering ? (
+                            <Button
+                                dataTestId={`redirect-to-${metricTitle}`}
+                                icon={<Icon name="ic-arrow-square-out" color="B500" />}
+                                ariaLabel="redirect"
+                                showAriaLabelInTippy={false}
+                                style={ButtonStyleType.default}
+                                variant={ButtonVariantType.borderLess}
+                            />
+                        ) : (
+                            <Icon size={36} color={null} name={iconName} />
+                        )}
+                    </div>
+                </div>
+                {subtitle && (
+                    <div className="border__secondary--top px-16 py-8">
+                        <ConditionalWrap condition={!!subtitleRedirection} wrap={navLinkWrap(subtitleRedirection)}>
+                            <span className={`fs-13 fw-4 lh-1-5 ${subtitleRedirection ? 'cb-5' : 'cn-7'}`}>
+                                {subtitle}
+                            </span>
+                        </ConditionalWrap>
+                    </div>
+                )}
+            </motion.div>
+        </ConditionalWrap>
+    )
+}
+
+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>
+)
diff --git a/src/Pages-Devtron-2.0/Shared/Overview/constants.ts b/src/Pages-Devtron-2.0/Shared/Overview/constants.ts
new file mode 100644
index 000000000..c83e60d16
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/Overview/constants.ts
@@ -0,0 +1,27 @@
+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,
+    },
+]
diff --git a/src/Pages-Devtron-2.0/Shared/Overview/index.ts b/src/Pages-Devtron-2.0/Shared/Overview/index.ts
new file mode 100644
index 000000000..d3f2deaa4
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/Overview/index.ts
@@ -0,0 +1,3 @@
+export * from './components'
+export * from './constants'
+export { type MetricsInfoCardProps, ProdNonProdSelectValueTypes } from './types'
diff --git a/src/Pages-Devtron-2.0/Shared/Overview/types.ts b/src/Pages-Devtron-2.0/Shared/Overview/types.ts
new file mode 100644
index 000000000..bf8556b87
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/Overview/types.ts
@@ -0,0 +1,29 @@
+import { ButtonComponentType, ButtonProps, IconName } from '@Shared/Components'
+import { IconBaseColorType } from '@Shared/types'
+
+export interface SectionEmptyStateProps {
+    iconColor?: IconBaseColorType
+    iconName?: IconName
+    title: string
+    subtitle?: string
+    buttonConfig?: ButtonProps<ButtonComponentType>
+}
+
+export interface MetricsInfoCardProps {
+    dataTestId: string
+    metricTitle: string
+    metricValue: string
+    metricUnit?: string
+    valueOutOf?: string
+    iconName: IconName
+    subtitle?: string
+    tooltipContent: string
+    redirectionLink?: string
+    subtitleRedirection?: string
+}
+
+export enum ProdNonProdSelectValueTypes {
+    ALL = 'All',
+    PRODUCTION = 'Prod',
+    NON_PRODUCTION = 'Non-Prod',
+}
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..bb81fdde1
--- /dev/null
+++ b/src/Pages-Devtron-2.0/Shared/index.ts
@@ -0,0 +1 @@
+export * from './Overview'
diff --git a/src/Pages-Devtron-2.0/index.ts b/src/Pages-Devtron-2.0/index.ts
index 900f8bd9b..df634e1ce 100644
--- a/src/Pages-Devtron-2.0/index.ts
+++ b/src/Pages-Devtron-2.0/index.ts
@@ -4,3 +4,4 @@ export * from './DataProtectionManagement'
 export * from './InfrastructureManagement'
 export * from './Navigation'
 export * from './SecurityCenter'
+export * from './Shared'
diff --git a/src/Shared/Components/Icon/Icon.tsx b/src/Shared/Components/Icon/Icon.tsx
index 4d80ff930..f9517d50e 100644
--- a/src/Shared/Components/Icon/Icon.tsx
+++ b/src/Shared/Components/Icon/Icon.tsx
@@ -64,6 +64,7 @@ import { ReactComponent as ICCaretLeft } from '@IconsV2/ic-caret-left.svg'
 import { ReactComponent as ICCaretRight } from '@IconsV2/ic-caret-right.svg'
 import { ReactComponent as ICCd } from '@IconsV2/ic-cd.svg'
 import { ReactComponent as ICChartLineUp } from '@IconsV2/ic-chart-line-up.svg'
+import { ReactComponent as ICChartRepo } from '@IconsV2/ic-chart-repo.svg'
 import { ReactComponent as ICChatCircleDots } from '@IconsV2/ic-chat-circle-dots.svg'
 import { ReactComponent as ICChatCircleOnline } from '@IconsV2/ic-chat-circle-online.svg'
 import { ReactComponent as ICCheck } from '@IconsV2/ic-check.svg'
@@ -129,6 +130,7 @@ import { ReactComponent as ICError } from '@IconsV2/ic-error.svg'
 import { ReactComponent as ICExitFullscreen } from '@IconsV2/ic-exit-fullscreen.svg'
 import { ReactComponent as ICExpandRightSm } from '@IconsV2/ic-expand-right-sm.svg'
 import { ReactComponent as ICExpandSm } from '@IconsV2/ic-expand-sm.svg'
+import { ReactComponent as ICExternalLink } from '@IconsV2/ic-external-link.svg'
 import { ReactComponent as ICFailure } from '@IconsV2/ic-failure.svg'
 import { ReactComponent as ICFastForward } from '@IconsV2/ic-fast-forward.svg'
 import { ReactComponent as ICFile } from '@IconsV2/ic-file.svg'
@@ -378,6 +380,7 @@ export const iconMap = {
     'ic-caret-right': ICCaretRight,
     'ic-cd': ICCd,
     'ic-chart-line-up': ICChartLineUp,
+    'ic-chart-repo': ICChartRepo,
     'ic-chat-circle-dots': ICChatCircleDots,
     'ic-chat-circle-online': ICChatCircleOnline,
     'ic-check-all': ICCheckAll,
@@ -443,6 +446,7 @@ export const iconMap = {
     'ic-exit-fullscreen': ICExitFullscreen,
     'ic-expand-right-sm': ICExpandRightSm,
     'ic-expand-sm': ICExpandSm,
+    'ic-external-link': ICExternalLink,
     'ic-failure': ICFailure,
     'ic-fast-forward': ICFastForward,
     'ic-file-code': ICFileCode,