diff --git a/.eslintignore b/.eslintignore
index 14e8752f14..29fad0d33e 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -54,7 +54,6 @@ src/components/CIPipelineN/ciPipeline.utils.tsx
 src/components/ClusterNodes/ClusterEvents.tsx
 src/components/ClusterNodes/ClusterManifest.tsx
 src/components/ClusterNodes/ClusterNodeEmptyStates.tsx
-src/components/ClusterNodes/ClusterOverview.tsx
 src/components/ClusterNodes/NodeActions/EditTaintsModal.tsx
 src/components/ClusterNodes/NodeActions/NodeActionsMenu.tsx
 src/components/ClusterNodes/NodeActions/validationRules.ts
@@ -210,7 +209,6 @@ src/components/ciPipeline/ciPipeline.service.ts
 src/components/ciPipeline/validationRules.ts
 src/components/cluster/Cluster.tsx
 src/components/cluster/ClusterComponentModal.tsx
-src/components/cluster/ClusterForm.tsx
 src/components/cluster/ClusterInfoStepsModal.tsx
 src/components/cluster/ClusterInstallStatus.tsx
 src/components/cluster/UseNameListDropdown.tsx
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/constants.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/constants.tsx
index 327f0fe409..4ef8110e5e 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/constants.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/constants.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { EnterpriseTag, OverrideMergeStrategyType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
+import { Icon, OverrideMergeStrategyType, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
 
@@ -37,7 +37,11 @@ export const MERGE_STRATEGY_OPTIONS: SelectPickerOptionType[] = [
         label: (
             <div className="flexbox dc__gap-8">
                 <span>Patch</span>
-                {!isFELibAvailable && <EnterpriseTag />}
+                {!isFELibAvailable && (
+                    <div className="dc__fill-available-space dc__w-fit-content h-20">
+                        <Icon name="ic-enterprise-tag" size={null} color={null} />
+                    </div>
+                )}
             </div>
         ),
         description: 'Override values for specific keys',
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
index 04d9c0feff..3880876e55 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useState } from 'react'
+import { generatePath } from 'react-router-dom'
 
 import {
     Button,
@@ -45,6 +46,7 @@ import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Components/cluster/cons
 import { importComponentFromFELibrary } from '@Components/common'
 import { URLS } from '@Config/routes'
 
+import { CreateClusterTypeEnum } from '../CreateCluster/types'
 import { EnvironmentDeleteComponent } from '../EnvironmentDeleteComponent'
 import { clusterEnvironmentDrawerFormValidationSchema } from './schema'
 import { ClusterEnvironmentDrawerFormProps, ClusterEnvironmentDrawerProps, ClusterNamespacesDTO } from './types'
@@ -67,6 +69,7 @@ export const ClusterEnvironmentDrawer = ({
     reload,
     hideClusterDrawer,
     isVirtual,
+    clusterName,
 }: ClusterEnvironmentDrawerProps) => {
     // STATES
     // Manages the loading state for create and update actions
@@ -259,7 +262,9 @@ export const ClusterEnvironmentDrawer = ({
         <Button
             dataTestId="add_cluster_button"
             linkProps={{
-                to: URLS.GLOBAL_CONFIG_CREATE_CLUSTER,
+                to: generatePath(URLS.GLOBAL_CONFIG_CREATE_CLUSTER, {
+                    type: CreateClusterTypeEnum.CONNECT_CLUSTER,
+                }),
             }}
             component={ButtonComponentType.link}
             startIcon={<ICAdd />}
@@ -400,7 +405,9 @@ export const ClusterEnvironmentDrawer = ({
         <Drawer position="right" width="800px" onEscape={hideClusterDrawer} onClose={hideClusterDrawer}>
             <div className="h-100 bg__primary flexbox-col" onClick={stopPropagation}>
                 <div className="flexbox dc__align-items-center dc__content-space dc__border-bottom bg__primary py-12 px-20">
-                    <h3 className="m-0 fs-16 fw-6 lh-1-43">{id ? 'Edit Environment' : 'Add Environment'}</h3>
+                    <h3 className="m-0 fs-16 fw-6 lh-1-43 dc__truncate">
+                        {id ? 'Edit Environment' : `Add Environment in '${clusterName}'`}
+                    </h3>
                     <button
                         type="button"
                         aria-label="close-btn"
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts
index dd1d087b22..a5c6d798f9 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/types.ts
@@ -30,6 +30,7 @@ export interface ClusterEnvironmentDrawerProps extends ClusterEnvironmentDrawerF
     reload: () => void
     hideClusterDrawer: () => void
     isVirtual: boolean
+    clusterName: string
 }
 
 export type GetClusterEnvironmentUpdatePayloadType = Pick<
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component.tsx
new file mode 100644
index 0000000000..0c42b97e37
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { generatePath, Prompt, Redirect, useHistory, useParams } from 'react-router-dom'
+
+import {
+    Button,
+    ButtonComponentType,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    DEFAULT_ROUTE_PROMPT_MESSAGE,
+    Drawer,
+    stopPropagation,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
+import ClusterForm from '@Components/cluster/ClusterForm'
+import { importComponentFromFELibrary } from '@Components/common'
+import { URLS } from '@Config/routes'
+import EnterpriseTrialDialog from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog'
+
+import FooterComponent from './FooterComponent'
+import Sidebar from './Sidebar'
+import { CreateClusterParams, CreateClusterProps, CreateClusterTypeEnum } from './types'
+
+import './styles.scss'
+
+const CreateClusterForm = importComponentFromFELibrary(
+    'CreateClusterForm',
+    () => (
+        <EnterpriseTrialDialog
+            featureTitle="EKS Cluster"
+            featureDescription="With Devtron, you can effortlessly create an Amazon EKS cluster."
+        />
+    ),
+    'function',
+)
+const VirtualClusterForm = importComponentFromFELibrary(
+    'VirtualClusterForm',
+    () => (
+        <EnterpriseTrialDialog
+            featureTitle="Isolated Cluster"
+            featureDescription="An isolated cluster in Devtron is an air-gapped Kubernetes cluster with restricted network access."
+        />
+    ),
+    'function',
+)
+
+const CreateCluster = ({ handleReloadClusterList, handleRedirectOnModalClose }: CreateClusterProps) => {
+    const { type } = useParams<CreateClusterParams>()
+
+    const [apiCallInProgress, setApiCallInProgress] = useState(false)
+
+    const { push } = useHistory()
+
+    const handleRedirectToClusterList = () => {
+        push(URLS.GLOBAL_CONFIG_CLUSTER)
+        handleReloadClusterList()
+    }
+
+    const handleModalClose = handleRedirectOnModalClose ?? handleRedirectToClusterList
+
+    const handleRedirectToClusterInstallationStatus = (installationId: string) => {
+        push(generatePath(URLS.RESOURCE_BROWSER_INSTALLATION_CLUSTER, { installationId }))
+    }
+
+    const renderContent = () => {
+        switch (type) {
+            case CreateClusterTypeEnum.CONNECT_CLUSTER:
+                return (
+                    <ClusterForm
+                        handleCloseCreateClusterForm={handleModalClose}
+                        reload={handleReloadClusterList}
+                        handleModalClose={handleModalClose}
+                        FooterComponent={FooterComponent}
+                    />
+                )
+            case CreateClusterTypeEnum.CREATE_EKS_CLUSTER:
+                return (
+                    // TODO: reload the cluster list after creating the cluster
+                    <CreateClusterForm
+                        apiCallInProgress={apiCallInProgress}
+                        setApiCallInProgress={setApiCallInProgress}
+                        handleModalClose={handleModalClose}
+                        handleRedirectToClusterInstallationStatus={handleRedirectToClusterInstallationStatus}
+                        FooterComponent={FooterComponent}
+                    />
+                )
+            case CreateClusterTypeEnum.ADD_ISOLATED_CLUSTER:
+                return (
+                    <VirtualClusterForm
+                        id={null}
+                        newClusterFormProps={{ apiCallInProgress, setApiCallInProgress, FooterComponent }}
+                        handleModalClose={handleModalClose}
+                        reload={handleReloadClusterList}
+                    />
+                )
+            default:
+                return <Redirect to={URLS.GLOBAL_CONFIG_CLUSTER} />
+        }
+    }
+
+    return (
+        <Drawer position="right" width="1024px" onEscape={handleModalClose} onClose={handleModalClose}>
+            <div
+                className="bg__primary h-100 cn-9 w-100 flexbox-col dc__overflow-hidden p-0 create-cluster"
+                onClick={stopPropagation}
+            >
+                <header className="px-20 py-12 lh-24 flexbox dc__content-space dc__align-items-center dc__border-bottom">
+                    <h3 className="m-0 fs-16 fw-6 lh-1-43 dc__first-letter-capitalize">New Cluster</h3>
+
+                    <Button
+                        icon={<ICClose />}
+                        dataTestId="close-create-cluster-modal-button"
+                        component={ButtonComponentType.button}
+                        style={ButtonStyleType.negativeGrey}
+                        size={ComponentSizeType.xs}
+                        variant={ButtonVariantType.borderLess}
+                        ariaLabel="Close new cluster drawer"
+                        showTooltip={apiCallInProgress}
+                        tooltipProps={{
+                            content: DEFAULT_ROUTE_PROMPT_MESSAGE,
+                        }}
+                        disabled={apiCallInProgress}
+                        onClick={handleModalClose}
+                        showAriaLabelInTippy={false}
+                    />
+                </header>
+
+                <div className="flexbox flex-grow-1 dc__overflow-hidden create-cluster__body">
+                    <Sidebar />
+
+                    <div className="bg__tertiary flex-grow-1 flexbox-col dc__overflow-auto p-20 dc__gap-16">
+                        {renderContent()}
+                    </div>
+                </div>
+
+                <Prompt when={apiCallInProgress} message={DEFAULT_ROUTE_PROMPT_MESSAGE} />
+            </div>
+        </Drawer>
+    )
+}
+
+export default CreateCluster
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog.tsx
new file mode 100644
index 0000000000..ba0c847fc1
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/EnterpriseTrialDialog.tsx
@@ -0,0 +1,58 @@
+import {
+    Button,
+    ComponentSizeType,
+    DOCUMENTATION,
+    getHandleOpenURL,
+    Icon,
+    TESTIMONIAL_CARD_DATA,
+    TestimonialContent,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { EnterpriseTrialDialogProps } from './types'
+
+const EnterpriseTrialDialog = ({ featureTitle, featureDescription }: EnterpriseTrialDialogProps) => {
+    const testimonialCount = TESTIMONIAL_CARD_DATA.length
+    const randomNumber = Math.round(Math.random() * testimonialCount) % testimonialCount
+    const testimonialConfig = TESTIMONIAL_CARD_DATA[randomNumber]
+
+    return (
+        <div
+            className="flexbox-col br-16 border__primary dc__overflow-hidden"
+            style={{
+                background:
+                    'linear-gradient(249deg, var(--bg-primary, #FFF) 0%, var(--bg-primary, #FFF) 70.16%, var(--B100, #E5F2FF) 84.88%, var(--V200, #C5BBFA) 100%)',
+            }}
+        >
+            <div className="p-24 flexbox-col dc__gap-16 border__secondary--bottom">
+                <Icon name="ic-enterprise-tag" size={null} color={null} />
+                <div className="flexbox-col dc__gap-8 ">
+                    <span className="fs-24 fw-7 lh-1-5 cn-9 font-merriweather">{featureTitle}</span>
+                    <span className="fs-16 fw-4 lh-1-5">{featureDescription}</span>
+                </div>
+            </div>
+            <div className="p-24 flexbox-col dc__gap-24">
+                <div className="flex dc__content-space">
+                    <span className="fs-16 fw-6 lh-1-5 cn-9">Unlock Devtron&apos;s Full Potential</span>
+                    <Button
+                        dataTestId="get-free-trial"
+                        text="Get free trial"
+                        endIcon={<Icon name="ic-arrow-right" color={null} />}
+                        onClick={getHandleOpenURL(DOCUMENTATION.ENTERPRISE_LICENSE)}
+                        size={ComponentSizeType.medium}
+                    />
+                </div>
+                <div className="p-24 flexbox dc__gap-12 br-8 border__primary bg__primary">
+                    <div className="flexbox-col dc__align-items-center h-100 dc__gap-8">
+                        <Icon name="ic-quote" color="N900" />
+                        <div className="border__primary--left w-1 flex-grow-1" />
+                    </div>
+                    <div className="flexbox-col dc__gap-20">
+                        <TestimonialContent {...testimonialConfig} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default EnterpriseTrialDialog
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/FooterComponent.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/FooterComponent.tsx
new file mode 100644
index 0000000000..301d921aef
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/FooterComponent.tsx
@@ -0,0 +1,61 @@
+import { Children, PropsWithChildren, ReactElement } from 'react'
+
+import { Button, ButtonVariantType, NewClusterFormFooterProps } from '@devtron-labs/devtron-fe-common-lib'
+
+import { FooterComponentChildKey } from './types'
+
+const StartComponent = ({ children }: PropsWithChildren<{ __TYPE: FooterComponentChildKey.START }>) => (
+    <div className="flex-grow-1">{children}</div>
+)
+
+StartComponent.defaultProps = {
+    // Defining for our internal use. We can't rely on name of the component due to minification
+    __TYPE: FooterComponentChildKey.START,
+}
+
+const CTAComponent = ({ children }: PropsWithChildren<{ __TYPE: FooterComponentChildKey.CTA }>) =>
+    children as JSX.Element
+
+CTAComponent.defaultProps = {
+    __TYPE: FooterComponentChildKey.CTA,
+}
+
+/**
+ * FooterComponent uses composition pattern. We want to take components as children but render them in a specific order
+ * Therefore if the user want to render the CTA button, they simply need to wrap it with <FooterComponent.CTA>
+ */
+const FooterComponent = ({
+    apiCallInProgress,
+    handleModalClose,
+    children,
+}: PropsWithChildren<NewClusterFormFooterProps>) => {
+    const childrenArray = Children.toArray(children)
+    // We need to find the children that are of type CTA and Start
+    const CTA = childrenArray.find((child) => (child as ReactElement)?.props?.__TYPE === FooterComponentChildKey.CTA)
+    const Start = childrenArray.find(
+        (child) => (child as ReactElement)?.props?.__TYPE === FooterComponentChildKey.START,
+    )
+
+    return (
+        <footer className="dc__position-abs dc__bottom-0 dc__left-0 w-100 dc__zi-1 bg__primary flexbox dc__content-end dc__border-top-n1 px-20 py-16 dc__gap-12 dc__no-shrink">
+            {Start}
+
+            <div className="flexbox dc__gap-12">
+                <Button
+                    dataTestId="cancel-create-cluster-button"
+                    onClick={handleModalClose}
+                    disabled={apiCallInProgress}
+                    text="Cancel"
+                    variant={ButtonVariantType.secondary}
+                />
+
+                {CTA}
+            </div>
+        </footer>
+    )
+}
+
+FooterComponent.Start = StartComponent
+FooterComponent.CTA = CTAComponent
+
+export default FooterComponent
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/Sidebar.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/Sidebar.tsx
new file mode 100644
index 0000000000..0fb6ceb5bd
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/Sidebar.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2024. Devtron Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { generatePath, NavLink, useParams, useRouteMatch } from 'react-router-dom'
+
+import { Icon, IconName, ModalSidebarPanel, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+
+import { importComponentFromFELibrary } from '@Components/common'
+import { DOCUMENTATION } from '@Config/constants'
+
+import { SIDEBAR_CONFIG } from './constants'
+import { CreateClusterParams } from './types'
+
+const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
+
+const Sidebar = () => {
+    const { path } = useRouteMatch()
+    const { type } = useParams<CreateClusterParams>()
+
+    const selectedSidebarElement = SIDEBAR_CONFIG[type]
+
+    return (
+        <div className="w-250 p-20 flexbox-col dc__gap-24 dc__no-shrink dc__overflow-auto">
+            <div className="flexbox-col">
+                {Object.entries(SIDEBAR_CONFIG).map(([key, { title, iconName, isEnterprise }]) => {
+                    const isSelected = type.toLowerCase() === key.toLowerCase()
+
+                    return (
+                        <NavLink
+                            key={key}
+                            className={`dc__transparent flex left dc__gap-8 py-6 px-8 br-4 ${isSelected ? 'bcb-1' : 'dc__hover-n50'}`}
+                            to={generatePath(path, { type: key })}
+                        >
+                            <span className="dc__fill-available-space dc__no-shrink icon-dim-16">
+                                <Icon name={iconName as IconName} color={isSelected ? 'B500' : 'N600'} />
+                            </span>
+
+                            <span
+                                className={`fs-13 lh-20 dc__truncate flex-grow-1 ${isSelected ? 'cb-5 fw-6' : 'cn-9'}`}
+                            >
+                                {title}
+                            </span>
+
+                            {isEnterprise && !isFELibAvailable && (
+                                <Tooltip
+                                    content="This is an enterprise only feature"
+                                    alwaysShowTippyOnHover
+                                    placement="right"
+                                >
+                                    <div className="flex">
+                                        <Icon name="ic-enterprise-feat" color="Y700" />
+                                    </div>
+                                </Tooltip>
+                            )}
+                        </NavLink>
+                    )
+                })}
+            </div>
+
+            <div className="divider__secondary--horizontal" />
+
+            <ModalSidebarPanel
+                heading={selectedSidebarElement.documentationHeader ?? selectedSidebarElement.title}
+                documentationLink={DOCUMENTATION.CLUSTER_AND_ENVIRONMENT}
+                rootClassName="w-100 dc__no-background-imp"
+            >
+                <div className="flexbox-col dc__gap-24">{selectedSidebarElement.body}</div>
+            </ModalSidebarPanel>
+        </div>
+    )
+}
+
+export default Sidebar
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx
new file mode 100644
index 0000000000..6a619429a8
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/constants.tsx
@@ -0,0 +1,47 @@
+import { IconName } from '@devtron-labs/devtron-fe-common-lib'
+
+import { CreateClusterTypeEnum, SidebarConfigType } from './types'
+
+export const SIDEBAR_CONFIG: SidebarConfigType = {
+    [CreateClusterTypeEnum.CONNECT_CLUSTER]: {
+        title: 'Connect Cluster',
+        iconName: 'ic-ci-linked' as IconName,
+        body: (
+            <p className="m-0">
+                Connect an existing Kubernetes cluster to manage Kubernetes resources and deploy containerized
+                applications using Devtron.
+            </p>
+        ),
+    },
+    [CreateClusterTypeEnum.CREATE_EKS_CLUSTER]: {
+        title: 'Create EKS Cluster',
+        iconName: 'ic-cluster' as IconName,
+        body: (
+            <>
+                <p className="m-0">With Devtron, you can effortlessly create an Amazon EKS cluster.</p>
+                <p className="m-0">
+                    Amazon Elastic Kubernetes Service (Amazon EKS) is a fully managed Kubernetes service that enables
+                    you to run Kubernetes seamlessly in both AWS Cloud and on-premises data centers.
+                </p>
+            </>
+        ),
+        isEnterprise: true,
+    },
+    [CreateClusterTypeEnum.ADD_ISOLATED_CLUSTER]: {
+        title: 'Add Isolated Cluster',
+        iconName: 'ic-add' as IconName,
+        documentationHeader: 'Isolated Cluster',
+        body: (
+            <>
+                <p className="m-0">
+                    An isolated cluster in Devtron is an air-gapped Kubernetes cluster with restricted network access.
+                </p>
+                <p className="m-0">
+                    Since Devtron does not have connectivity to these clusters, deployments are managed by packaging
+                    manifests and images for manual installation or retrieval from an OCI registry (if enabled).
+                </p>
+            </>
+        ),
+        isEnterprise: true,
+    },
+} as const
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/index.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/index.ts
new file mode 100644
index 0000000000..13f713628a
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/index.ts
@@ -0,0 +1 @@
+export { default as CreateClusterDrawer } from './CreateCluster.component'
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/styles.scss b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/styles.scss
new file mode 100644
index 0000000000..d1dbe9ef2a
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/styles.scss
@@ -0,0 +1,5 @@
+.create-cluster {
+    &__body:has(footer) {
+        margin-bottom: 69px;
+    }
+}
\ No newline at end of file
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts
new file mode 100644
index 0000000000..177e8f2f04
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types.ts
@@ -0,0 +1,35 @@
+export enum CreateClusterTypeEnum {
+    CONNECT_CLUSTER = 'connect-cluster',
+    CREATE_EKS_CLUSTER = 'create-eks-cluster',
+    ADD_ISOLATED_CLUSTER = 'add-isolated-cluster',
+}
+
+export type SidebarConfigType = Record<
+    CreateClusterTypeEnum,
+    {
+        title: string
+        iconName: string
+        body: React.ReactElement
+        documentationHeader?: string
+        isEnterprise?: true
+    }
+>
+
+export interface CreateClusterParams {
+    type: CreateClusterTypeEnum
+}
+
+export interface CreateClusterProps {
+    handleReloadClusterList: () => void
+    handleRedirectOnModalClose?: () => void
+}
+
+export enum FooterComponentChildKey {
+    START = 'Start',
+    CTA = 'CTA',
+}
+
+export interface EnterpriseTrialDialogProps {
+    featureTitle: string
+    featureDescription: string
+}
diff --git a/src/assets/icons/appstatus/ic-menu-dots.svg b/src/assets/icons/appstatus/ic-menu-dots.svg
deleted file mode 100644
index 45b997a551..0000000000
--- a/src/assets/icons/appstatus/ic-menu-dots.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-  - Copyright (c) 2024. Devtron Inc.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#999" fill-rule="nonzero" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-    </g>
-</svg>
diff --git a/src/assets/icons/ic-dot.svg b/src/assets/icons/ic-dot.svg
index 2f2c4d9f5b..1e18b9fe19 100644
--- a/src/assets/icons/ic-dot.svg
+++ b/src/assets/icons/ic-dot.svg
@@ -14,6 +14,8 @@
   - limitations under the License.
   -->
 
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="7.5" cy="7.5" r="6" fill="#3385D6" stroke="white" stroke-width="3"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#999" fill-rule="nonzero" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
+    </g>
 </svg>
diff --git a/src/components/CIPipelineN/TaskList.tsx b/src/components/CIPipelineN/TaskList.tsx
index 15a734827c..9f09b30f98 100644
--- a/src/components/CIPipelineN/TaskList.tsx
+++ b/src/components/CIPipelineN/TaskList.tsx
@@ -32,7 +32,7 @@ import { importComponentFromFELibrary } from '@Components/common'
 import TaskTitle from './TaskTitle'
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import { ReactComponent as Drag } from '../../assets/icons/drag.svg'
-import { ReactComponent as Dots } from '../../assets/icons/appstatus/ic-menu-dots.svg'
+import { ReactComponent as Dots } from '@Icons/ic-dot.svg'
 import { ReactComponent as Trash } from '../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as AlertTriangle } from '../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as MoveToPre } from '../../assets/icons/ic-arrow-backward.svg'
@@ -367,7 +367,7 @@ export const TaskList = ({ withWarning, setInputVariablesListFromPrevStep, isJob
                             <PopupMenu autoClose>
                                 <PopupMenu.Button isKebab>
                                     <Dots
-                                        className="icon-dim-16 mt-2 rotate"
+                                        className="icon-dim-16 mt-2 rotate fcn-7"
                                         style={{ ['--rotateBy' as any]: '90deg' }}
                                     />
                                 </PopupMenu.Button>
diff --git a/src/components/ClusterNodes/ClusterList/ClusterList.tsx b/src/components/ClusterNodes/ClusterList/ClusterList.tsx
index 31b02a1a58..472a3652d6 100644
--- a/src/components/ClusterNodes/ClusterList/ClusterList.tsx
+++ b/src/components/ClusterNodes/ClusterList/ClusterList.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
     BulkSelection,
     ClusterFiltersType,
@@ -40,17 +38,15 @@ const ClusterList = ({
             <div className="cluster-list-row fw-6 cn-7 fs-12 dc__border-bottom pt-8 pb-8 pr-20 pl-20 dc__uppercase bg__primary dc__position-sticky dc__top-0 dc__zi-3">
                 {KubeConfigRowCheckbox ? <BulkSelection showPagination={false} /> : <div />}
                 {Object.entries(ClusterMapListSortableKeys).map(([cellName, cellKey]) => (
-                    <React.Fragment key={cellName}>
-                        <SortableTableHeaderCell
-                            key={cellName}
-                            title={ClusterMapListSortableTitle[cellName]}
-                            isSorted={sortBy === cellKey}
-                            sortOrder={sortOrder}
-                            isSortable
-                            disabled={false}
-                            triggerSorting={handleCellSorting(cellKey)}
-                        />
-                    </React.Fragment>
+                    <SortableTableHeaderCell
+                        key={cellName}
+                        title={ClusterMapListSortableTitle[cellName]}
+                        isSorted={sortBy === cellKey}
+                        sortOrder={sortOrder}
+                        isSortable
+                        disabled={false}
+                        triggerSorting={handleCellSorting(cellKey)}
+                    />
                 ))}
             </div>
             {filteredList.map((clusterData) => (
diff --git a/src/components/ClusterNodes/ClusterList/ClusterListRow.tsx b/src/components/ClusterNodes/ClusterList/ClusterListRow.tsx
index 24c35a098c..a980285ec1 100644
--- a/src/components/ClusterNodes/ClusterList/ClusterListRow.tsx
+++ b/src/components/ClusterNodes/ClusterList/ClusterListRow.tsx
@@ -12,14 +12,15 @@ import {
     ComponentSizeType,
     Icon,
     Tooltip,
-    URLS,
     useBulkSelection,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { importComponentFromFELibrary } from '@Components/common'
-import { K8S_EMPTY_GROUP, SIDEBAR_KEYS } from '@Components/ResourceBrowser/Constants'
+import { K8S_EMPTY_GROUP } from '@Components/ResourceBrowser/Constants'
+import { getClusterChangeRedirectionUrl } from '@Components/ResourceBrowser/Utils'
 import { AppDetailsTabs } from '@Components/v2/appDetails/appDetails.store'
+import { URLS } from '@Config/routes'
 
 import { ClusterMapInitialStatus } from '../ClusterMapInitialStatus'
 import { CLUSTER_PROD_TYPE } from '../constants'
@@ -59,6 +60,13 @@ const ClusterListRow = ({
 
     // TODO: @Elessar1802 will be replacing all terminal url with new utils
 
+    const clusterLinkURL = getClusterChangeRedirectionUrl(
+        !!clusterData.installationId,
+        // NOTE: installationId is 0 for added clusters
+        // it is non zero for created clusters, therefore using || instead of ??
+        String(clusterData.installationId || clusterData.id),
+    )
+
     return (
         <div
             key={`cluster-${clusterData.id}`}
@@ -72,10 +80,7 @@ const ClusterListRow = ({
                 </div>
             )}
             <div data-testid={`cluster-row-${clusterData.name}`} className="flex left dc__overflow-hidden">
-                <Link
-                    className="dc__ellipsis-right dc__no-decor lh-24"
-                    to={`${URLS.RESOURCE_BROWSER}/${clusterData.id}/${ALL_NAMESPACE_OPTION.value}/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`}
-                >
+                <Link className="dc__ellipsis-right dc__no-decor lh-24" to={clusterLinkURL}>
                     {clusterData.name}
                 </Link>
                 {/* NOTE: visible-hover plays with display prop; therefore need to set display: flex on a new div */}
diff --git a/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx b/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx
index 4a18e8ffcf..8de2aaa571 100644
--- a/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx
+++ b/src/components/ClusterNodes/ClusterList/ClusterSelectionBody.tsx
@@ -28,7 +28,7 @@ import {
 
 import NoClusterEmptyState from '@Images/no-cluster-empty-state.png'
 import { importComponentFromFELibrary } from '@Components/common'
-import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
+import { renderNewClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
 
 import ClusterNodeEmptyState from '../ClusterNodeEmptyStates'
 import { ClusterMapListSortableKeys } from '../constants'
@@ -50,6 +50,7 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
     clusterOptions,
     clusterListLoader,
     filteredList,
+    refreshData,
 }) => {
     const parentRef = useRef<HTMLDivElement>(null)
 
@@ -78,7 +79,7 @@ const ClusterSelectionBody: React.FC<ClusterSelectionBodyTypes> = ({
                 image={NoClusterEmptyState}
                 title="No clusters found"
                 subTitle="Add a cluster to view and debug Kubernetes resources in the cluster"
-                renderButton={AddClusterButton}
+                renderButton={renderNewClusterButton(refreshData)}
             />
         )
     }
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
index ec1d3f1d7c..d16ffa844d 100644
--- a/src/components/ClusterNodes/ClusterOverview.tsx
+++ b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -14,50 +14,55 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { generatePath, useHistory, useParams, useRouteMatch } from 'react-router-dom'
 import moment from 'moment'
+
 import {
+    EditableTextArea,
     ErrorScreenManager,
+    getIsRequestAborted,
     getRandomColor,
+    getUrlWithSearchParams,
+    Icon,
     InfoIconTippy,
-    EditableTextArea,
+    InstallationClusterConfigType,
+    noop,
     ResourceKindType,
-    getUrlWithSearchParams,
     showError,
-    ClusterCapacityType,
-    Icon,
+    StatusComponent,
+    StatusType,
+    useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
-import {
-    ClusterErrorType,
-    ClusterOverviewProps,
-    DescriptionDataType,
-    ERROR_TYPE,
-    ClusterDetailsType,
-    ClusterDescriptionResponse,
-    ClusterCapacityResponse,
-} from './types'
+
+import { getUpgradeCompatibilityTippyConfig } from '@Components/ResourceBrowser/ResourceList/utils'
 import { getURLBasedOnSidebarGVK } from '@Components/ResourceBrowser/Utils'
+import { getAvailableCharts } from '@Services/service'
+
 import { ReactComponent as Error } from '../../assets/icons/ic-error-exclamation.svg'
-import { getClusterCapacity, getClusterDetails, updateClusterShortDescription } from './clusterNodes.service'
-import GenericDescription from '../common/Description/GenericDescription'
-import { defaultClusterNote, defaultClusterShortDescription } from './constants'
 import { Moment12HourFormat, URLS } from '../../config'
+import { MAX_LENGTH_350 } from '../../config/constantMessaging'
+import { importComponentFromFELibrary } from '../common'
+import GenericDescription from '../common/Description/GenericDescription'
 import {
     K8S_EMPTY_GROUP,
     SIDEBAR_KEYS,
     TARGET_K8S_VERSION_SEARCH_KEY,
     UPGRADE_CLUSTER_CONSTANTS,
 } from '../ResourceBrowser/Constants'
-import { unauthorizedInfoText } from '../ResourceBrowser/ResourceList/ClusterSelector'
-import { ReactComponent as ClusterOverviewIcon } from '../../assets/icons/cluster-overview.svg'
-import { MAX_LENGTH_350 } from '../../config/constantMessaging'
-import ConnectingToClusterState from '../ResourceBrowser/ResourceList/ConnectingToClusterState'
-import { importComponentFromFELibrary } from '../common'
-import { getUpgradeCompatibilityTippyConfig } from '@Components/ResourceBrowser/ResourceList/utils'
+import { getClusterCapacity, getClusterDetails, updateClusterShortDescription } from './clusterNodes.service'
+import {
+    CLUSTER_CONFIG_POLLING_INTERVAL,
+    CLUSTER_DESCRIPTION_DUMMY_DATA,
+    defaultClusterShortDescription,
+} from './constants'
+import { ClusterDetailsType, ClusterOverviewProps, DescriptionDataType, ERROR_TYPE } from './types'
 
 const Catalog = importComponentFromFELibrary('Catalog', null, 'function')
+const ClusterConfig = importComponentFromFELibrary('ClusterConfig', null, 'function')
+const ClusterAddOns = importComponentFromFELibrary('ClusterAddOns', null, 'function')
 const MigrateClusterVersionInfoBar = importComponentFromFELibrary('MigrateClusterVersionInfoBar', null, 'function')
+const getInstallationClusterConfig = importComponentFromFELibrary('getInstallationClusterConfig', null, 'function')
 
 /* TODO: move into utils */
 const metricsApiTippyContent = () => (
@@ -76,49 +81,79 @@ const metricsApiTippyContent = () => (
 )
 
 /* TODO: move into utils */
-const tippyForMetricsApi = () => {
-    return (
-        <div className="flexbox dc__gap-6">
-            <span>NA</span>
-            <InfoIconTippy
-                heading="Metrics API is not available"
-                additionalContent={metricsApiTippyContent()}
-                documentationLinkText="View metrics-server helm chart"
-                documentationLink={`/dashboard${URLS.CHARTS_DISCOVER}?appStoreName=metrics-server`}
-                iconClassName="icon-dim-20 ml-8 fcn-5"
-            />
-        </div>
-    )
-}
+const tippyForMetricsApi = () => (
+    <div className="flexbox dc__gap-6">
+        <span>NA</span>
+        <InfoIconTippy
+            heading="Metrics API is not available"
+            additionalContent={metricsApiTippyContent()}
+            documentationLinkText="View metrics-server helm chart"
+            documentationLink={`/dashboard${URLS.CHARTS_DISCOVER}?appStoreName=metrics-server`}
+            iconClassName="icon-dim-20 ml-8 fcn-5"
+        />
+    </div>
+)
 
 function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
     const { clusterId, namespace } = useParams<{
         clusterId: string
         namespace: string
     }>()
-    const [errorMsg, setErrorMsg] = useState('')
-
-    const [descriptionData, setDescriptionData] = useState<DescriptionDataType>({
-        descriptionId: 0,
-        descriptionText: defaultClusterNote,
-        descriptionUpdatedBy: defaultClusterNote,
-        descriptionUpdatedOn: '',
-    })
-    const [isLoading, setIsLoading] = useState(true)
+
     const history = useHistory()
     const { path } = useRouteMatch()
-    const [errorCode, setErrorCode] = useState(0)
-    const [errorStatusCode, setErrorStatusCode] = useState(0)
-    const [clusterErrorList, setClusterErrorList] = useState<ClusterErrorType[]>([])
-    const [clusterDetails, setClusterDetails] = useState<ClusterDetailsType>({} as ClusterDetailsType)
-    const [clusterCapacityData, setClusterCapacityData] = useState<ClusterCapacityType>(null)
+    const [clusterConfig, setClusterConfig] = useState<InstallationClusterConfigType | null>(null)
+
+    const requestAbortControllerRef = useRef(new AbortController())
+    const clusterConfigPollTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
+    const getClusterConfigAbortControllerRef = useRef(new AbortController())
+
+    const [
+        isClusterNoteDetailsLoading,
+        clusterNodeDetailsResponse,
+        clusterNodeDetailsError,
+        reloadClusterNodeDetails,
+        setClusterNodeDetails,
+    ] = useAsync(async () => {
+        try {
+            const { result } = await getClusterDetails(clusterId, requestAbortControllerRef.current.signal)
 
-    const requestAbortControllerRef = useRef(null)
+            const _clusterNote = result.clusterNote
+            let _moment: moment.Moment
+            const clusterDetails = {} as ClusterDetailsType
+            clusterDetails.clusterName = result.clusterName
+            clusterDetails.shortDescription = result.description || defaultClusterShortDescription
+            clusterDetails.addedBy = result.clusterCreatedBy
+            _moment = moment(result.clusterCreatedOn, 'YYYY-MM-DDTHH:mm:ssZ')
+            clusterDetails.addedOn = _moment.format(Moment12HourFormat)
+            clusterDetails.serverURL = result.serverUrl
 
-    const handleRetry = async () => {
-        abortRequestAndResetError(true)
-        await getClusterNoteAndCapacity(clusterId)
-    }
+            const data: DescriptionDataType = CLUSTER_DESCRIPTION_DUMMY_DATA
+
+            if (_clusterNote) {
+                data.descriptionText = _clusterNote.description
+                data.descriptionId = _clusterNote.id
+                data.descriptionUpdatedBy = _clusterNote.updatedBy
+                _moment = moment(_clusterNote.updatedOn, 'YYYY-MM-DDTHH:mm:ssZ')
+                data.descriptionUpdatedOn = _moment.isValid()
+                    ? _moment.format(Moment12HourFormat)
+                    : _clusterNote.updatedOn
+            }
+
+            return {
+                clusterDetails,
+                descriptionData: data,
+            }
+        } catch (error) {
+            if (!getIsRequestAborted(error)) {
+                showError(error)
+            }
+            throw error
+        }
+    }, [selectedCluster])
+
+    const { clusterDetails, descriptionData = structuredClone(CLUSTER_DESCRIPTION_DUMMY_DATA) } =
+        clusterNodeDetailsResponse ?? {}
 
     const handleUpdateClusterDescription = async (description: string): Promise<void> => {
         const requestPayload = {
@@ -128,9 +163,12 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
         try {
             const response = await updateClusterShortDescription(requestPayload)
             if (response.result) {
-                setClusterDetails({
-                    ...clusterDetails,
-                    shortDescription: description,
+                setClusterNodeDetails({
+                    ...clusterNodeDetailsResponse,
+                    clusterDetails: {
+                        ...clusterDetails,
+                        shortDescription: description,
+                    },
                 })
             }
         } catch (error) {
@@ -139,66 +177,62 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
         }
     }
 
-    const setClusterNoteDetails = (clusterNoteResponse: PromiseSettledResult<ClusterDescriptionResponse>) => {
-        if (clusterNoteResponse.status === 'fulfilled') {
-            let _moment: moment.Moment
-            const _clusterNote = clusterNoteResponse.value.result.clusterNote
-            const clusterDetails = {} as ClusterDetailsType
-            clusterDetails.clusterName = clusterNoteResponse.value.result.clusterName
-            clusterDetails.shortDescription =
-                clusterNoteResponse.value.result.description || defaultClusterShortDescription
-            clusterDetails.addedBy = clusterNoteResponse.value.result.clusterCreatedBy
-            _moment = moment(clusterNoteResponse.value.result.clusterCreatedOn, 'YYYY-MM-DDTHH:mm:ssZ')
-            clusterDetails.addedOn = _moment.format(Moment12HourFormat)
-            clusterDetails.serverURL = clusterNoteResponse.value.result.serverUrl
-            setClusterDetails(clusterDetails)
-
-            const data: DescriptionDataType = {
-                descriptionText: defaultClusterNote,
-                descriptionId: 0,
-                descriptionUpdatedBy: '',
-                descriptionUpdatedOn: '',
-            }
-            if (_clusterNote) {
-                data.descriptionText = _clusterNote.description
-                data.descriptionId = _clusterNote.id
-                data.descriptionUpdatedBy = _clusterNote.updatedBy
-                _moment = moment(_clusterNote.updatedOn, 'YYYY-MM-DDTHH:mm:ssZ')
-                data.descriptionUpdatedOn = _moment.isValid()
-                    ? _moment.format(Moment12HourFormat)
-                    : _clusterNote.updatedOn
-            }
-            setDescriptionData(data)
-        } else {
-            setErrorCode(clusterNoteResponse.reason['code'])
+    const fetchClusterConfig = async (clusterName: string) => {
+        if (!getInstallationClusterConfig) {
+            return
         }
+
+        const config = await (getInstallationClusterConfig({
+            clusterName,
+            abortControllerRef: getClusterConfigAbortControllerRef,
+        }) as Promise<InstallationClusterConfigType>)
+        setClusterConfig(config)
     }
 
-    const setClusterCapacityDetails = (clusterCapacityResponse: PromiseSettledResult<ClusterCapacityResponse>) => {
-        if (clusterCapacityResponse.status === 'fulfilled') {
-            setClusterCapacityData(clusterCapacityResponse.value.result)
+    const [isClusterCapacityDataLoading, clusterCapacityResponse] = useAsync(async () => {
+        try {
+            const { result } = await getClusterCapacity(clusterId, requestAbortControllerRef.current.signal)
+
+            const clusterCapacity = result
+
+            if (clusterCapacity?.name) {
+                fetchClusterConfig(clusterCapacity.name).catch(noop)
+            }
+
             const _errorList = []
-            const _nodeErrors = Object.keys(clusterCapacityResponse.value.result.nodeErrors || {})
-            const _nodeK8sVersions = clusterCapacityResponse.value.result.nodeK8sVersions || []
+            const _nodeErrors = Object.keys(result.nodeErrors || {})
+            const _nodeK8sVersions = result.nodeK8sVersions || []
             if (_nodeK8sVersions.length > 1) {
-                let diffType = ''
                 let majorVersion
                 let minorVersion
-                for (const _nodeK8sVersion of _nodeK8sVersions) {
+
+                const diffType = _nodeK8sVersions.reduce((dt, _nodeK8sVersion) => {
+                    if (dt === 'Major') {
+                        return dt
+                    }
+
                     const elementArr = _nodeK8sVersion.split('.')
+                    const [_majorVersion, _minorVersion] = elementArr
+
                     if (!majorVersion) {
-                        majorVersion = elementArr[0]
+                        majorVersion = _majorVersion
                     }
+
                     if (!minorVersion) {
-                        minorVersion = elementArr[1]
+                        minorVersion = _minorVersion
+                    }
+
+                    if (majorVersion !== _majorVersion) {
+                        return 'Major'
                     }
-                    if (majorVersion !== elementArr[0]) {
-                        diffType = 'Major'
-                        break
-                    } else if (diffType !== 'Minor' && minorVersion !== elementArr[1]) {
-                        diffType = 'Minor'
+
+                    if (dt !== 'Minor' && minorVersion !== elementArr[1]) {
+                        return 'Minor'
                     }
-                }
+
+                    return dt
+                }, '')
+
                 if (diffType !== '') {
                     _errorList.push({
                         errorText: `${diffType} version diff identified among nodes. Current versions `,
@@ -209,68 +243,75 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             }
 
             if (_nodeErrors.length > 0) {
-                for (const _nodeError of _nodeErrors) {
-                    const _errorLength = clusterCapacityResponse.value.result.nodeErrors[_nodeError].length
+                _nodeErrors.forEach((_nodeError) => {
+                    const _errorLength = result.nodeErrors[_nodeError].length
                     _errorList.push({
                         errorText: `${_nodeError} on ${
                             _errorLength === 1 ? `${_errorLength} node` : `${_errorLength} nodes`
                         }`,
                         errorType: _nodeError,
-                        filterText: clusterCapacityResponse.value.result.nodeErrors[_nodeError],
+                        filterText: result.nodeErrors[_nodeError],
                     })
-                }
+                })
+            }
+
+            return {
+                clusterErrorList: _errorList,
+                clusterCapacityData: clusterCapacity,
             }
-            setClusterErrorList(_errorList)
-        } else {
-            setErrorCode(clusterCapacityResponse.reason['code'])
+        } catch (error) {
+            if (!getIsRequestAborted(error)) {
+                showError(error)
+            }
+            throw error
         }
-    }
-    const abortRequestAndResetError = (emptyPrev?: boolean) => {
-        requestAbortControllerRef.current.abort()
-        setErrorMsg('')
-    }
+    }, [selectedCluster])
 
-    const getClusterNoteAndCapacity = async (clusterId: string): Promise<void> => {
-        setErrorMsg('')
-        setIsLoading(true)
-        requestAbortControllerRef.current = new AbortController()
-        const [clusterNoteResponse, clusterCapacityResponse] = await Promise.allSettled([
-            getClusterDetails(clusterId, requestAbortControllerRef.current.signal),
-            getClusterCapacity(clusterId, requestAbortControllerRef.current.signal),
-        ])
-        setClusterNoteDetails(clusterNoteResponse)
-        setClusterCapacityDetails(clusterCapacityResponse)
-        setIsLoading(false)
-    }
+    const { clusterCapacityData, clusterErrorList = [] } = clusterCapacityResponse ?? {}
 
-    useEffect(() => {
-        if (errorStatusCode > 0) {
-            return
+    const pollClusterConfig = (clusterName: string) => {
+        if (clusterCapacityData?.name && clusterConfigPollTimeoutRef.current === null) {
+            clusterConfigPollTimeoutRef.current = setTimeout(() => {
+                fetchClusterConfig(clusterCapacityData.name)
+                    .then(() => {
+                        clusterConfigPollTimeoutRef.current = null
+                        pollClusterConfig(clusterName)
+                    })
+                    .catch(noop)
+            }, CLUSTER_CONFIG_POLLING_INTERVAL)
         }
-        setErrorStatusCode(0)
-        getClusterNoteAndCapacity(clusterId)
-    }, [selectedCluster])
+    }
 
-    useEffect(() => {
-        return () => requestAbortControllerRef.current?.abort()
-    }, [])
+    const refreshImmediateAndStartPolling = (clusterName: string) => {
+        fetchClusterConfig(clusterCapacityData.name).catch(noop)
+        pollClusterConfig(clusterName)
+    }
+
+    useEffect(
+        () => () => {
+            requestAbortControllerRef.current.abort()
+            clearTimeout(clusterConfigPollTimeoutRef.current)
+            getClusterConfigAbortControllerRef.current.abort()
+        },
+        [],
+    )
 
     const setCustomFilter = (errorType: ERROR_TYPE, filterText: string): void => {
         const queryParam = errorType === ERROR_TYPE.VERSION_ERROR ? 'k8sversion' : 'name'
-        const newUrl =
-            `${generatePath(path, {
-                clusterId,
-                namespace,
-                nodeType: SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase(),
-                group: K8S_EMPTY_GROUP,
-            })}?` + `${queryParam}=${encodeURIComponent(filterText)}`
+        const newUrl = `${generatePath(path, {
+            clusterId,
+            namespace,
+            nodeType: SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase(),
+            group: K8S_EMPTY_GROUP,
+        })}?${queryParam}=${encodeURIComponent(filterText)}`
         history.push(newUrl)
     }
 
     const renderClusterError = (): JSX.Element => {
         if (clusterErrorList.length === 0) {
-            return
+            return null
         }
+
         return (
             <div className="mb-16 dc__border br-4 pt-12 bg__primary">
                 <div className="flexbox pointer mb-12 pl-16 pr-16">
@@ -285,6 +326,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
                 </div>
                 <div className="pl-16 pr-16 fs-13 fw-4">
                     {clusterErrorList.map((error, index) => (
+                        // eslint-disable-next-line react/no-array-index-key
                         <div className="flex left pt-8 pb-8" key={`${error.errorType}-${index}`}>
                             <div className="w-250 cn-9">{error.errorType}</div>
                             <div className="fw-4 fs-13 cn-9">
@@ -292,20 +334,20 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
                                 {error.errorType !== ERROR_TYPE.VERSION_ERROR ? (
                                     <span
                                         className="cb-5 pointer"
-                                        onClick={(event) => {
+                                        onClick={() => {
                                             setCustomFilter(error.errorType, error.filterText.join(','))
                                         }}
                                     >
                                         &nbsp; View nodes
                                     </span>
                                 ) : (
-                                    error.filterText.map((filter, index) => (
+                                    error.filterText.map((filter, _index) => (
                                         <>
                                             &nbsp;
-                                            {index > 0 && ', '}
+                                            {_index > 0 && ', '}
                                             <span
                                                 className="cb-5 pointer"
-                                                onClick={(event) => {
+                                                onClick={() => {
                                                     setCustomFilter(error.errorType, filter)
                                                 }}
                                             >
@@ -322,71 +364,85 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
         )
     }
 
-    const renderCardDetails = () => {
-        return (
-            <>
-                {/* Commented to be used in future */}
-                {/* {cardDetailsInBar()} */}
-                <div className="dc__grid-cols-2 dc__gap-16 pb-16">
-                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Usage</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.cpu?.usagePercentage
-                                    ? clusterCapacityData?.cpu?.usagePercentage
-                                    : tippyForMetricsApi()}
-                            </div>
-                        </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Capacity</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">{clusterCapacityData?.cpu?.capacity}</div>
+    const loadingMetricCard = () => (
+        <div className="dc__grid-cols-2 dc__gap-16 pb-16">
+            <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                <div className="flexbox-col dc__gap-6">
+                    <div className="shimmer w-200" />
+                    <div className="shimmer h-36 w-64" />
+                </div>
+            </div>
+
+            <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                <div className="flexbox-col dc__gap-6">
+                    <div className="shimmer w-200" />
+                    <div className="shimmer h-36 w-64" />
+                </div>
+            </div>
+        </div>
+    )
+
+    const renderCardDetails = () => (
+        <>
+            {/* Commented to be used in future */}
+            {/* {cardDetailsInBar()} */}
+            <div className="dc__grid-cols-2 dc__gap-16 pb-16">
+                <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Usage</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.cpu?.usagePercentage
+                                ? clusterCapacityData?.cpu?.usagePercentage
+                                : tippyForMetricsApi()}
                         </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Requests</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.cpu?.requestPercentage}
-                            </div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Capacity</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">{clusterCapacityData?.cpu?.capacity}</div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Requests</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.cpu?.requestPercentage}
                         </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Limits</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.cpu?.limitPercentage}
-                            </div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">CPU Limits</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.cpu?.limitPercentage}
                         </div>
                     </div>
+                </div>
 
-                    <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Usage</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.memory?.usagePercentage
-                                    ? clusterCapacityData?.memory?.usagePercentage
-                                    : tippyForMetricsApi()}
-                            </div>
-                        </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Capacity</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.memory?.capacity}
-                            </div>
+                <div className="flexbox dc__gap-12 dc__content-space dc__overflow-auto bg__primary br-4 en-2 bw-1 pt-16 pl-16 pb-16 pr-16">
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Usage</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.memory?.usagePercentage
+                                ? clusterCapacityData?.memory?.usagePercentage
+                                : tippyForMetricsApi()}
                         </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Requests</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.memory?.requestPercentage}
-                            </div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Capacity</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">{clusterCapacityData?.memory?.capacity}</div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Requests</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.memory?.requestPercentage}
                         </div>
-                        <div>
-                            <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Limits</div>
-                            <div className="dc__align-left fs-24 fw-4 cn-9">
-                                {clusterCapacityData?.memory?.limitPercentage}
-                            </div>
+                    </div>
+                    <div>
+                        <div className="dc__align-left fs-13 fw-4 cn-7 dc__ellipsis-right">Memory Limits</div>
+                        <div className="dc__align-left fs-24 fw-4 cn-9">
+                            {clusterCapacityData?.memory?.limitPercentage}
                         </div>
                     </div>
                 </div>
-            </>
-        )
-    }
+            </div>
+        </>
+    )
 
     const handleOpenScanClusterTab = (selectedVersion: string) => {
         const upgradeClusterLowerCaseKind = SIDEBAR_KEYS.upgradeClusterGVK.Kind.toLowerCase()
@@ -403,100 +459,117 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             url: URL,
             dynamicTitle: `${UPGRADE_CLUSTER_CONSTANTS.DYNAMIC_TITLE} to v${selectedVersion}`,
             tippyConfig: getUpgradeCompatibilityTippyConfig({
-                targetK8sVersion: selectedVersion
+                targetK8sVersion: selectedVersion,
             }),
-        }).then(() => history.push(URL))
+        })
+            .then(() => history.push(URL))
+            .catch(noop)
     }
 
-    const renderSideInfoData = () => {
-        return (
-            <aside className="flexbox-col dc__gap-16 w-300 dc__no-shrink">
-                <div className="flexbox-col dc__gap-12">
-                    <div>
-                        <Icon name='ic-bg-cluster' size={48} color={null} />
-                    </div>
+    const creationPrefix = clusterConfig ? 'Created' : 'Added'
+
+    const renderShimmers = () => (
+        <div className="flexbox-col dc__gap-6 w-100">
+            <div className="shimmer" />
+            <div className="shimmer" />
+            <div className="shimmer w-50" />
+        </div>
+    )
+
+    const renderSideInfoData = () => (
+        <aside className="flexbox-col dc__gap-16 w-300 dc__no-shrink">
+            <div className="flexbox-col dc__gap-12">
+                <div>
+                    <Icon name="ic-bg-cluster" size={48} color={null} />
+                </div>
+                {isClusterNoteDetailsLoading ? (
+                    <div className="shimmer w-50" />
+                ) : (
                     <div className="fs-16 fw-7 lh-24 cn-9 font-merriweather" data-testid="clusterOveviewName">
                         {clusterDetails?.clusterName}
                     </div>
-                    <EditableTextArea
-                        emptyState={defaultClusterShortDescription}
-                        placeholder={defaultClusterShortDescription}
-                        updateContent={handleUpdateClusterDescription}
-                        initialText={clusterDetails.shortDescription}
-                        validations={{
-                            maxLength: {
-                                value: 350,
-                                message: MAX_LENGTH_350,
-                            },
-                        }}
-                    />
-                </div>
-                <div className="dc__border-top-n1" />
-                <div className="flexbox-col dc__gap-12">
-                    <div>
-                        <div className="fs-13 fw-4 lh-20 cn-7 mb-4">Added on</div>
-                        <div className="fs-13 fw-6 lh-20 cn-9 dc__ellipsis-right">{clusterDetails.addedOn}</div>
-                    </div>
-                    <div>
-                        <div className="fs-13 fw-4 lh-20 cn-7 mb-4">Added by</div>
-                        <div className="fs-13 fw-6 lh-20 cn-9 dc__ellipsis-right flexbox">
-                            {clusterDetails.addedBy && (
-                                <>
-                                    <div
-                                        className="icon-dim-20 mw-20 flex dc__border-radius-50-per dc__uppercase mr-8 cn-0 fw-4"
-                                        style={{ backgroundColor: getRandomColor(clusterDetails.addedBy) }}
-                                    >
-                                        {clusterDetails.addedBy[0]}
-                                    </div>
-                                    <div>{clusterDetails.addedBy}</div>
-                                </>
+                )}
+                <EditableTextArea
+                    emptyState={defaultClusterShortDescription}
+                    placeholder={defaultClusterShortDescription}
+                    updateContent={handleUpdateClusterDescription}
+                    initialText={clusterDetails?.shortDescription}
+                    validations={{
+                        maxLength: {
+                            value: 350,
+                            message: MAX_LENGTH_350,
+                        },
+                    }}
+                />
+            </div>
+            <div className="dc__border-top-n1" />
+            {isClusterNoteDetailsLoading ? (
+                renderShimmers()
+            ) : (
+                <>
+                    <div className="flexbox-col dc__gap-12">
+                        <div>
+                            <div className="fs-13 fw-4 lh-20 cn-7 mb-4">Status</div>
+                            {isClusterCapacityDataLoading ? (
+                                <div className="shimmer w-64" />
+                            ) : (
+                                <div className="fs-13 fw-6">
+                                    <StatusComponent
+                                        status={clusterCapacityData?.status ?? StatusType.FAILED}
+                                        message={clusterCapacityData?.status ?? 'Connection Failed'}
+                                        iconSize={20}
+                                    />
+                                </div>
                             )}
                         </div>
+                        <div>
+                            <div className="fs-13 fw-4 lh-20 cn-7 mb-4">{creationPrefix} on</div>
+                            <div className="fs-13 fw-6 lh-20 cn-9 dc__ellipsis-right">{clusterDetails.addedOn}</div>
+                        </div>
+                        <div>
+                            <div className="fs-13 fw-4 lh-20 cn-7 mb-4">{creationPrefix} by</div>
+                            <div className="fs-13 fw-6 lh-20 cn-9 dc__ellipsis-right flexbox">
+                                {clusterDetails.addedBy && (
+                                    <>
+                                        <div
+                                            className="icon-dim-20 mw-20 flex dc__border-radius-50-per dc__uppercase mr-8 cn-0 fw-4"
+                                            style={{ backgroundColor: getRandomColor(clusterDetails.addedBy) }}
+                                        >
+                                            {clusterDetails.addedBy[0]}
+                                        </div>
+                                        <div>{clusterDetails.addedBy}</div>
+                                    </>
+                                )}
+                            </div>
+                        </div>
                     </div>
-                </div>
 
-                <div className="dc__border-top-n1" />
+                    <div className="dc__border-top-n1" />
 
-                <div className="flexbox-col dc__gap-12">
-                    <div className="flexbox-col dc__gap-4">
-                        <span className="fs-13 fw-4 lh-20 cn-7">Kubernetes version</span>
-                        <span className="cn-9 fs-13 fw-6 lh-20 dc__truncate">
-                            {clusterCapacityData?.serverVersion || '-'}
-                        </span>
-                    </div>
+                    <div className="flexbox-col dc__gap-12">
+                        <div className="flexbox-col dc__gap-4">
+                            <span className="fs-13 fw-4 lh-20 cn-7">Kubernetes version</span>
+                            <span className="cn-9 fs-13 fw-6 lh-20 dc__truncate">
+                                {clusterCapacityData?.serverVersion || '-'}
+                            </span>
+                        </div>
 
-                    {MigrateClusterVersionInfoBar && (
-                        <MigrateClusterVersionInfoBar
-                            handleOpenScanClusterTab={handleOpenScanClusterTab}
-                            clusterName={clusterDetails?.clusterName}
-                            currentVersion={clusterCapacityData?.serverVersion}
-                        />
-                    )}
-                </div>
-            </aside>
-        )
-    }
+                        {MigrateClusterVersionInfoBar && (
+                            <MigrateClusterVersionInfoBar
+                                handleOpenScanClusterTab={handleOpenScanClusterTab}
+                                clusterName={clusterDetails?.clusterName}
+                                currentVersion={clusterCapacityData?.serverVersion}
+                            />
+                        )}
+                    </div>
+                </>
+            )}
+        </aside>
+    )
 
     const renderState = () => {
-        if (errorStatusCode || errorCode) {
-            return (
-                <ErrorScreenManager
-                    code={errorStatusCode || errorCode}
-                    subtitle={errorCode == 403 ? unauthorizedInfoText(SIDEBAR_KEYS.overviewGVK.Kind.toLowerCase()) : ''}
-                />
-            )
-        }
-
-        if (isLoading || errorMsg) {
-            return (
-                <ConnectingToClusterState
-                    loader={isLoading}
-                    errorMsg={errorMsg}
-                    selectedCluster={selectedCluster}
-                    handleRetry={handleRetry}
-                    requestAbortController={requestAbortControllerRef.current}
-                />
-            )
+        if (clusterNodeDetailsError) {
+            return <ErrorScreenManager code={clusterNodeDetailsError?.code} reload={reloadClusterNodeDetails} />
         }
 
         return (
@@ -506,8 +579,15 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
             >
                 {renderSideInfoData()}
                 <div className="dc__mxw-1068 flex-grow-1 mw-none">
-                    {renderCardDetails()}
+                    {isClusterCapacityDataLoading ? loadingMetricCard() : renderCardDetails()}
+                    {ClusterConfig && clusterConfig && (
+                        <ClusterConfig
+                            clusterConfig={clusterConfig}
+                            pollClusterConfig={refreshImmediateAndStartPolling}
+                        />
+                    )}
                     {renderClusterError()}
+                    {ClusterAddOns && <ClusterAddOns clusterId={clusterId} getAvailableCharts={getAvailableCharts} />}
                     {Catalog && <Catalog resourceId={clusterId} resourceType={ResourceKindType.cluster} />}
                     <GenericDescription
                         isClusterTerminal
diff --git a/src/components/ClusterNodes/clusterNodes.service.tsx b/src/components/ClusterNodes/clusterNodes.service.tsx
index f63402286b..03fa9a3a9d 100644
--- a/src/components/ClusterNodes/clusterNodes.service.tsx
+++ b/src/components/ClusterNodes/clusterNodes.service.tsx
@@ -14,7 +14,16 @@
  * limitations under the License.
  */
 
-import { APIOptions, get, post, put, ResponseType, ROUTES as COMMON_ROUTES } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    APIOptions,
+    ClusterDetail,
+    get,
+    getUrlWithSearchParams,
+    post,
+    put,
+    ResponseType,
+    ROUTES as COMMON_ROUTES,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { Routes } from '../../config'
 import {
@@ -40,12 +49,22 @@ export const patchClusterNote = (requestPayload: ClusteNotePatchRequest): Promis
 export const patchApplicationNote = (requestPayload: ClusteNotePatchRequest): Promise<ClusterNoteResponse> =>
     put(Routes.APPLICATION_NOTE, requestPayload)
 
-export const getClusterList = (signal: AbortSignal): Promise<ClusterListResponse> =>
-    get(Routes.CLUSTER_LIST, { signal })
+export const getClusterList = (abortControllerRef?: APIOptions['abortControllerRef']): Promise<ClusterListResponse> =>
+    get(Routes.CLUSTER_LIST, { abortControllerRef })
+
+export const getClusterListWithInstalledClusters = (abortControllerRef?: APIOptions['abortControllerRef']) =>
+    get<ClusterDetail[]>(getUrlWithSearchParams(Routes.CLUSTER_LIST, { includeInstallations: true }), {
+        abortControllerRef,
+    })
 
 /** @deprecated - use `getClusterListRaw` from fe-common-lib */
 export const getClusterListMin = (): Promise<ClusterListResponse> => get(COMMON_ROUTES.CLUSTER_LIST_RAW)
 
+export const getClusterListMinWithInstalledClusters = (abortControllerRef?: APIOptions['abortControllerRef']) =>
+    get<ClusterDetail[]>(getUrlWithSearchParams(COMMON_ROUTES.CLUSTER_LIST_RAW, { includeInstallations: true }), {
+        abortControllerRef,
+    })
+
 export const getClusterCapacity = (clusterId: string, signal?): Promise<ClusterCapacityResponse> =>
     get(`${Routes.CLUSTER_CAPACITY}/${clusterId}`, { signal })
 
diff --git a/src/components/ClusterNodes/constants.ts b/src/components/ClusterNodes/constants.ts
index 8cce7f0c57..1370040aa5 100644
--- a/src/components/ClusterNodes/constants.ts
+++ b/src/components/ClusterNodes/constants.ts
@@ -17,7 +17,7 @@
 import { ClusterFiltersType, ClusterStatusType } from '@devtron-labs/devtron-fe-common-lib'
 
 import { multiSelectStyles } from '../v2/common/ReactSelectCustomization'
-import { EFFECT_TYPE } from './types'
+import { DescriptionDataType, EFFECT_TYPE } from './types'
 
 export const clusterSelectStyle = {
     ...multiSelectStyles,
@@ -334,3 +334,12 @@ export enum CLUSTER_PROD_TYPE {
     NON_PRODUCTION= 'Non Production',
 
 }
+
+export const CLUSTER_CONFIG_POLLING_INTERVAL = 10000 // 10 seconds
+
+export const CLUSTER_DESCRIPTION_DUMMY_DATA: DescriptionDataType = {
+    descriptionId: 0,
+    descriptionText: defaultClusterNote,
+    descriptionUpdatedBy: '',
+    descriptionUpdatedOn: '',
+}
\ No newline at end of file
diff --git a/src/components/ResourceBrowser/ClusterInstallationStatus.tsx b/src/components/ResourceBrowser/ClusterInstallationStatus.tsx
new file mode 100644
index 0000000000..1e6a6e3642
--- /dev/null
+++ b/src/components/ResourceBrowser/ClusterInstallationStatus.tsx
@@ -0,0 +1,72 @@
+import { useMemo } from 'react'
+import { useHistory, useParams } from 'react-router-dom'
+
+import { useAsync, useBreadcrumb } from '@devtron-labs/devtron-fe-common-lib'
+
+import { importComponentFromFELibrary } from '@Components/common'
+
+import ClusterSelector from './ResourceList/ClusterSelector'
+import ResourcePageHeader from './ResourceList/ResourcePageHeader'
+import { getClusterOptions } from './ResourceList/utils'
+import { getClusterListing } from './ResourceBrowser.service'
+import { ClusterOptionType } from './Types'
+import { getClusterChangeRedirectionUrl } from './Utils'
+
+const ClusterInstallationStatusDialog = importComponentFromFELibrary(
+    'ClusterInstallationStatusDialog',
+    null,
+    'function',
+)
+
+const ClusterInstallationStatus = () => {
+    const { replace } = useHistory()
+    const { installationId } = useParams<{ installationId: string }>()
+
+    const [, clusterList] = useAsync(() => getClusterListing(true))
+
+    const clusterOptions = useMemo(() => getClusterOptions(clusterList), [clusterList, installationId])
+
+    const onClusterChange = ({ value, isInstallationCluster }: ClusterOptionType) => {
+        const path = getClusterChangeRedirectionUrl(isInstallationCluster, value)
+
+        replace({
+            pathname: path,
+        })
+    }
+
+    const { breadcrumbs } = useBreadcrumb(
+        {
+            alias: {
+                'resource-browser': {
+                    component: <span className="cb-5 fs-16 dc__capitalize">Resource Browser</span>,
+                    linked: true,
+                },
+                'installation-cluster': {
+                    component: (
+                        <ClusterSelector
+                            onChange={onClusterChange}
+                            clusterList={clusterOptions}
+                            clusterId={installationId}
+                            isInstallationStatusView
+                        />
+                    ),
+                },
+                ':installationId': {
+                    component: null,
+                },
+            },
+        },
+        [clusterOptions, installationId],
+    )
+
+    return (
+        <div className="flexbox-col flex-grow-1">
+            <ResourcePageHeader breadcrumbs={breadcrumbs} />
+            <div className="flex flex-grow-1">
+                <ClusterInstallationStatusDialog key={installationId} installationId={installationId} />
+            </div>
+        </div>
+    )
+}
+
+export default ClusterInstallationStatus
diff --git a/src/components/ResourceBrowser/PageHeader.buttons.tsx b/src/components/ResourceBrowser/PageHeader.buttons.tsx
index 6da2c86b10..dc65dd69a6 100644
--- a/src/components/ResourceBrowser/PageHeader.buttons.tsx
+++ b/src/components/ResourceBrowser/PageHeader.buttons.tsx
@@ -15,9 +15,15 @@
  */
 
 import React, { useState } from 'react'
-import { NavLink } from 'react-router-dom'
+import { generatePath, Route, useHistory } from 'react-router-dom'
 
-import { Button, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+import { Button, ButtonComponentType, ComponentSizeType, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+
+import CreateCluster from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component'
+import {
+    CreateClusterProps,
+    CreateClusterTypeEnum,
+} from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types'
 
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import { URLS } from '../../config'
@@ -52,15 +58,44 @@ export const renderCreateResourceButton = (clusterId: string, callback: CreateRe
     <CreateResourceButton closeModal={callback} clusterId={clusterId} />
 )
 
-export const AddClusterButton = (): JSX.Element => (
-    <div>
-        <NavLink
-            className="flex dc__no-decor cta small h-28 pl-8 pr-10 pt-5 pb-5 lh-n fcb-5"
-            to={URLS.GLOBAL_CONFIG_CLUSTER}
-        >
-            <Add data-testid="add_cluster_button" className="icon-dim-16 mr-4 fcb-5 dc__vertical-align-middle" />
-            Add cluster
-        </NavLink>
-        <span className="dc__divider" />
-    </div>
+export const NewClusterButton = ({ handleReloadClusterList }: Pick<CreateClusterProps, 'handleReloadClusterList'>) => {
+    const { replace } = useHistory()
+    const { isSuperAdmin } = useMainContext()
+
+    const handleCloseCreateClusterModal = () => {
+        replace(URLS.RESOURCE_BROWSER)
+    }
+
+    return (
+        isSuperAdmin && (
+            <>
+                <div>
+                    <Button
+                        dataTestId="add_cluster_button"
+                        text="New Cluster"
+                        size={ComponentSizeType.small}
+                        component={ButtonComponentType.link}
+                        startIcon={<Add />}
+                        linkProps={{
+                            to: generatePath(URLS.RESOURCE_BROWSER_CREATE_CLUSTER, {
+                                type: CreateClusterTypeEnum.CONNECT_CLUSTER,
+                            }),
+                        }}
+                    />
+                    <span className="dc__divider" />
+                </div>
+
+                <Route path={URLS.RESOURCE_BROWSER_CREATE_CLUSTER} exact>
+                    <CreateCluster
+                        handleReloadClusterList={handleReloadClusterList}
+                        handleRedirectOnModalClose={handleCloseCreateClusterModal}
+                    />
+                </Route>
+            </>
+        )
+    )
+}
+
+export const renderNewClusterButton = (handleReloadClusterList: () => void) => () => (
+    <NewClusterButton handleReloadClusterList={handleReloadClusterList} />
 )
diff --git a/src/components/ResourceBrowser/ResourceBrowser.service.tsx b/src/components/ResourceBrowser/ResourceBrowser.service.tsx
index 4f5bfbf941..b7d10f2ebc 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.service.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowser.service.tsx
@@ -17,32 +17,31 @@
 import { RefObject } from 'react'
 
 import {
+    APIOptions,
     ApiResourceType,
+    ClusterDetail,
     get,
     getIsRequestAborted,
     getK8sResourceList,
     getK8sResourceListPayload,
+    getNamespaceListMin,
     getUrlWithSearchParams,
+    Nodes,
     ResponseType,
     showError,
     stringComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
 
+import {
+    getClusterListMinWithInstalledClusters,
+    getClusterListWithInstalledClusters,
+} from '@Components/ClusterNodes/clusterNodes.service'
+
 import { Routes } from '../../config'
-import { ClusterListResponse } from '../../services/service.types'
 import { SIDEBAR_KEYS } from './Constants'
 import { GetResourceDataType, NodeRowDetail, URLParams } from './Types'
 import { parseNodeList } from './Utils'
 
-export const getClusterList = async (): Promise<ClusterListResponse> => {
-    const response = await get<ClusterListResponse['result']>(Routes.CLUSTER_LIST_PERMISSION)
-
-    return {
-        ...response,
-        result: (response?.result ?? []).sort((a, b) => stringComparatorBySortOrder(a.cluster_name, b.cluster_name)),
-    }
-}
-
 export const namespaceListByClusterId = async (clusterId: string) => {
     const response = await get<string[]>(`${Routes.CLUSTER_NAMESPACE}/${clusterId}`)
 
@@ -79,10 +78,41 @@ export const getResourceData = async ({
             return parseNodeList(response)
         }
 
-        return await getK8sResourceList(
+        const response = await getK8sResourceList(
             getK8sResourceListPayload(clusterId, selectedNamespace.value.toLowerCase(), selectedResource, filters),
             abortControllerRef.current.signal,
         )
+
+        if (selectedResource.gvk.Kind.toLowerCase() === Nodes.Namespace.toLowerCase()) {
+            const { result } = await getNamespaceListMin(clusterId, abortControllerRef)
+            const [{ environments }] = result
+
+            const namespaceToEnvironmentMap = environments.reduce(
+                (acc, { environmentName, namespace, environmentId }) => {
+                    if (environmentId === 0) {
+                        return acc
+                    }
+
+                    acc[namespace] = environmentName
+                    return acc
+                },
+                {},
+            )
+
+            return {
+                ...response,
+                result: {
+                    ...response.result,
+                    headers: [...response.result.headers, 'environment'],
+                    data: response.result.data.map((data) => ({
+                        ...data,
+                        environment: namespaceToEnvironmentMap[data.name as string],
+                    })),
+                },
+            }
+        }
+
+        return response
     } catch (err) {
         if (!getIsRequestAborted(err)) {
             showError(err)
@@ -92,3 +122,21 @@ export const getResourceData = async ({
         return null
     }
 }
+
+export const getClusterListing = async (
+    minified: boolean,
+    abortControllerRef?: APIOptions['abortControllerRef'],
+): Promise<ClusterDetail[]> => {
+    try {
+        const { result: clusterList } = await (
+            minified ? getClusterListMinWithInstalledClusters : getClusterListWithInstalledClusters
+        )(abortControllerRef)
+
+        return clusterList
+    } catch (err) {
+        if (!getIsRequestAborted(err)) {
+            showError(err)
+        }
+        throw err
+    }
+}
diff --git a/src/components/ResourceBrowser/ResourceBrowser.tsx b/src/components/ResourceBrowser/ResourceBrowser.tsx
index 293c3ba32f..1b5fac4ad9 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowser.tsx
@@ -20,33 +20,24 @@ import {
     ClusterDetail,
     DevtronProgressing,
     ErrorScreenManager,
-    getIsRequestAborted,
     PageHeader,
-    showError,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { DEFAULT_CLUSTER_ID } from '@Components/cluster/cluster.type'
 import { ClusterListView } from '@Components/ClusterNodes/ClusterList'
 
-import { getClusterList, getClusterListMin } from '../ClusterNodes/clusterNodes.service'
 import { sortObjectArrayAlphabetically } from '../common'
-import { AddClusterButton } from './PageHeader.buttons'
+import { renderNewClusterButton } from './PageHeader.buttons'
+import { getClusterListing } from './ResourceBrowser.service'
 
 const ResourceBrowser: React.FC = () => {
     const abortControllerRef = useRef<AbortController>(new AbortController())
 
-    const [detailClusterListLoading, detailClusterList, , reloadDetailClusterList] = useAsync(async () => {
-        try {
-            return await getClusterList(abortControllerRef.current.signal)
-        } catch (err) {
-            if (!getIsRequestAborted(err)) {
-                showError(err)
-            }
-            return null
-        }
-    })
-    const [initialLoading, clusterListMinData, error] = useAsync(() => getClusterListMin())
+    const [detailClusterListLoading, detailClusterList, , reloadDetailClusterList] = useAsync(() =>
+        getClusterListing(false, abortControllerRef),
+    )
+    const [initialLoading, clusterListMinData, error] = useAsync(() => getClusterListing(true, abortControllerRef))
 
     useEffect(
         () => () => {
@@ -57,7 +48,7 @@ const ResourceBrowser: React.FC = () => {
 
     const sortedClusterList: ClusterDetail[] = useMemo(
         () =>
-            sortObjectArrayAlphabetically(detailClusterList?.result || clusterListMinData?.result || [], 'name').filter(
+            sortObjectArrayAlphabetically(detailClusterList || clusterListMinData || [], 'name').filter(
                 (option) =>
                     !(window._env_.HIDE_DEFAULT_CLUSTER && option.id === DEFAULT_CLUSTER_ID) &&
                     !option.isVirtualCluster,
@@ -89,7 +80,7 @@ const ResourceBrowser: React.FC = () => {
             <PageHeader
                 isBreadcrumbs={false}
                 headerName="Kubernetes Resource Browser"
-                renderActionButtons={AddClusterButton}
+                renderActionButtons={renderNewClusterButton(reloadDetailClusterList)}
             />
             {renderContent()}
         </div>
diff --git a/src/components/ResourceBrowser/ResourceBrowserRouter.tsx b/src/components/ResourceBrowser/ResourceBrowserRouter.tsx
index 04b7013fda..b7bd257672 100644
--- a/src/components/ResourceBrowser/ResourceBrowserRouter.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowserRouter.tsx
@@ -20,30 +20,39 @@ import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 import { URLS as COMMON_URLS } from '@devtron-labs/devtron-fe-common-lib'
 
 import { importComponentFromFELibrary } from '@Components/common'
+import { URLS } from '@Config/routes'
 
+import ClusterInstallationStatus from './ClusterInstallationStatus'
 import ResourceBrowser from './ResourceBrowser'
 import ResourceList from './ResourceList'
 
 import './ResourceBrowser.scss'
 
 const CompareClusterViewWrapper = importComponentFromFELibrary('CompareClusterViewWrapper', null, 'function')
+const isFeLibAvailable = !!CompareClusterViewWrapper
 
 const ResourceBrowserRouter: React.FC = () => {
     const { path } = useRouteMatch()
 
     return (
         <Switch>
+            {isFeLibAvailable && (
+                <Route path={URLS.RESOURCE_BROWSER_INSTALLATION_CLUSTER} exact>
+                    <ClusterInstallationStatus />
+                </Route>
+            )}
+
             <Route path={`${path}/:clusterId/:namespace/:nodeType/:group/:node?`}>
                 <ResourceList />
             </Route>
 
-            {CompareClusterViewWrapper && window._env_.FEATURE_RB_SYNC_CLUSTER_ENABLE && (
+            {isFeLibAvailable && window._env_.FEATURE_RB_SYNC_CLUSTER_ENABLE && (
                 <Route path={`${COMMON_URLS.RESOURCE_BROWSER}${COMMON_URLS.COMPARE_CLUSTERS}`} exact>
                     <CompareClusterViewWrapper />
                 </Route>
             )}
 
-            <Route path={path} exact>
+            <Route path={[path, URLS.RESOURCE_BROWSER_CREATE_CLUSTER]} exact>
                 <ResourceBrowser />
             </Route>
 
diff --git a/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx b/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
index 9d16b332ce..915c9c587b 100644
--- a/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
+++ b/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
@@ -23,6 +23,8 @@ import {
     BulkSelection,
     BulkSelectionEvents,
     BulkSelectionProvider,
+    Button,
+    ButtonVariantType,
     Checkbox,
     CHECKBOX_VALUE,
     ClipboardButton,
@@ -47,6 +49,9 @@ import {
 
 import { ReactComponent as ICErrorExclamation } from '@Icons/ic-error-exclamation.svg'
 import WebWorker from '@Components/app/WebWorker'
+import { getClusterList } from '@Components/cluster/cluster.service'
+import { AddEnvironmentFormPrefilledInfoType } from '@Components/cluster/cluster.type'
+import { ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY } from '@Components/cluster/constants'
 import NodeActionsMenu from '@Components/ResourceBrowser/ResourceList/NodeActionsMenu'
 import {
     getManifestResource,
@@ -54,6 +59,7 @@ import {
 } from '@Components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.api'
 import { URLS } from '@Config/routes'
 import searchWorker from '@Config/searchWorker'
+import { ClusterEnvironmentDrawer } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer'
 
 import { importComponentFromFELibrary } from '../../common/helpers/Helpers'
 import {
@@ -113,8 +119,10 @@ const BaseResourceListContent = ({
 }: BaseResourceListProps) => {
     const [filteredResourceList, setFilteredResourceList] = useState<K8sResourceDetailType['data']>(null)
     const [pageSize, setPageSize] = useState(DEFAULT_K8SLIST_PAGE_SIZE)
+    const [clusterList, setClusterList] = useState<Awaited<ReturnType<typeof getClusterList>>>(null)
     const [resourceListOffset, setResourceListOffset] = useState(0)
     const [bulkOperationModalState, setBulkOperationModalState] = useState<BulkOperationsModalState>('closed')
+    const [showCreateEnvironmentDrawer, setShowCreateEnvironmentDrawer] = useState(false)
 
     // NOTE: this is to re-mount node filters component & avoid useEffects inside it
     const [lastTimeStringSinceClearAllFilters, setLastTimeStringSinceClearAllFilters] = useState(null)
@@ -132,7 +140,19 @@ const BaseResourceListContent = ({
 
     const { searchParams } = useSearchString()
 
-    const isNodeListing = selectedResource?.gvk.Kind === SIDEBAR_KEYS.nodeGVK.Kind
+    const isNodeListing = selectedResource?.gvk.Kind.toLowerCase() === SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()
+
+    useEffect(() => {
+        if (selectedResource?.gvk.Kind !== Nodes.Namespace) {
+            return
+        }
+
+        getClusterList()
+            .then(({ result }) => {
+                setClusterList(result)
+            })
+            .catch(noop)
+    }, [selectedResource])
 
     const {
         selectedIdentifiers: bulkSelectionState,
@@ -385,6 +405,20 @@ const BaseResourceListContent = ({
         }
     }
 
+    const getAddEnvironmentClickHandler = (namespace: string) => () => {
+        const environmentFormData: AddEnvironmentFormPrefilledInfoType = {
+            namespace,
+        }
+
+        localStorage.setItem(ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY, JSON.stringify(environmentFormData))
+
+        setShowCreateEnvironmentDrawer(true)
+    }
+
+    const handleCloseCreateEnvironmentDrawer = () => {
+        setShowCreateEnvironmentDrawer(false)
+    }
+
     const renderResourceRow = (resourceData: K8sResourceDetailDataType): JSX.Element => {
         const lowercaseKind = (resourceData.kind as string)?.toLowerCase()
         // Redirection and actions are not possible for Events since the required data for the same is not available
@@ -519,6 +553,14 @@ const BaseResourceListContent = ({
                                         }}
                                     />
                                 </Tooltip>
+                                {columnName === 'environment' && !resourceData.environment && (
+                                    <Button
+                                        text="Add environment"
+                                        dataTestId="add-environment"
+                                        variant={ButtonVariantType.text}
+                                        onClick={getAddEnvironmentClickHandler(resourceData.name as string)}
+                                    />
+                                )}
                                 {columnName === 'status' && isNodeUnschedulable && (
                                     <>
                                         <span className="dc__bullet mr-4 ml-4 mw-4 bcn-4" />
@@ -631,6 +673,31 @@ const BaseResourceListContent = ({
         )
     }
 
+    const renderCreateEnvironmentDrawer = () => {
+        if (!clusterList) {
+            return null
+        }
+
+        const { isVirtualCluster, prometheus_url: prometheusUrl } =
+            clusterList.find((cluster) => cluster.cluster_name === clusterName) || {}
+
+        return (
+            <ClusterEnvironmentDrawer
+                reload={reloadResourceListData}
+                clusterName={clusterName}
+                id={null}
+                environmentName={null}
+                clusterId={Number(clusterId)}
+                namespace={null}
+                prometheusEndpoint={prometheusUrl}
+                isProduction={null}
+                description={null}
+                hideClusterDrawer={handleCloseCreateEnvironmentDrawer}
+                isVirtual={isVirtualCluster}
+            />
+        )
+    }
+
     return (
         <div
             className={`resource-list-container flex-grow-1 dc__border-left flexbox-col dc__overflow-hidden ${
@@ -709,6 +776,7 @@ const BaseResourceListContent = ({
                     )}
                 </>
             )}
+            {showCreateEnvironmentDrawer && renderCreateEnvironmentDrawer()}
         </div>
     )
 }
diff --git a/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx b/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx
index 74d34c65a9..7cf83007f0 100644
--- a/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ClusterSelector.tsx
@@ -14,10 +14,13 @@
  * limitations under the License.
  */
 
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import ReactSelect, { Props as SelectProps, SelectInstance } from 'react-select'
 
-import { APP_SELECTOR_STYLES, AppSelectorDropdownIndicator } from '@devtron-labs/devtron-fe-common-lib'
+import { APP_SELECTOR_STYLES, AppSelectorDropdownIndicator, Icon, PopupMenu } from '@devtron-labs/devtron-fe-common-lib'
+
+import { ReactComponent as MenuDots } from '@Icons/ic-dot.svg'
+import DeleteClusterConfirmationModal from '@Components/cluster/DeleteClusterConfirmationModal'
 
 import { DOCUMENTATION } from '../../../config'
 import { DEFAULT_CLUSTER_ID } from '../../cluster/cluster.type'
@@ -30,14 +33,22 @@ import {
 } from '../Constants'
 import { ClusterSelectorType } from '../Types'
 
-const ClusterSelector: React.FC<ClusterSelectorType> = ({ onChange, clusterList, clusterId }) => {
+const ClusterSelector: React.FC<ClusterSelectorType> = ({
+    onChange,
+    clusterList,
+    clusterId,
+    isInstallationStatusView,
+}) => {
+    const [openDeleteClusterModal, setOpenDeleteClusterModal] = useState(false)
     const selectRef = useRef<SelectInstance>(null)
 
     let filteredClusterList = clusterList
     if (window._env_.HIDE_DEFAULT_CLUSTER) {
         filteredClusterList = clusterList.filter((item) => Number(item.value) !== DEFAULT_CLUSTER_ID)
     }
-    const defaultOption = filteredClusterList.find((item) => String(item.value) === clusterId)
+    const defaultOption = filteredClusterList.find(
+        (item) => String(item.value) === clusterId && (!isInstallationStatusView || item.isInstallationCluster),
+    )
 
     const handleOnKeyDown: SelectProps['onKeyDown'] = (event) => {
         if (event.key === 'Escape') {
@@ -45,6 +56,14 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({ onChange, clusterList,
         }
     }
 
+    const handleOpenDeleteModal = () => {
+        setOpenDeleteClusterModal(true)
+    }
+
+    const handleCloseDeleteModal = () => {
+        setOpenDeleteClusterModal(false)
+    }
+
     return (
         <div className="flexbox dc__align-items-center dc__gap-12">
             <ReactSelect
@@ -62,7 +81,36 @@ const ClusterSelector: React.FC<ClusterSelectorType> = ({ onChange, clusterList,
                 value={defaultOption}
                 styles={APP_SELECTOR_STYLES}
             />
+
             {defaultOption?.isProd && <span className="px-6 py-2 br-4 bcb-1 cb-7 fs-12 lh-16 fw-5">Production</span>}
+
+            <PopupMenu autoClose>
+                <PopupMenu.Button rootClassName="flex ml-auto p-4 border__secondary" isKebab>
+                    <MenuDots className="icon-dim-16 fcn-7" data-testid="popup-menu-button" />
+                </PopupMenu.Button>
+
+                <PopupMenu.Body rootClassName="dc__border p-4">
+                    <div className="w-150 flexbox-col">
+                        <button
+                            type="button"
+                            className="dc__outline-none flexbox dc__gap-8 dc__transparent dc__hover-n50 px-12 py-6 dc__align-items-center"
+                            onClick={handleOpenDeleteModal}
+                        >
+                            <Icon name="ic-delete" color="R500" />
+                            <span className="fs-14 lh-1-5 cr-5">Delete</span>
+                        </button>
+                    </div>
+                </PopupMenu.Body>
+            </PopupMenu>
+
+            {openDeleteClusterModal && (
+                <DeleteClusterConfirmationModal
+                    clusterId={clusterId}
+                    clusterName={defaultOption?.label}
+                    handleClose={handleCloseDeleteModal}
+                    {...(defaultOption?.isInstallationCluster ? { installationId: clusterId } : {})}
+                />
+            )}
         </div>
     )
 }
diff --git a/src/components/ResourceBrowser/ResourceList/NodeActionsMenu.tsx b/src/components/ResourceBrowser/ResourceList/NodeActionsMenu.tsx
index 29689d6749..11f3a85bbf 100644
--- a/src/components/ResourceBrowser/ResourceList/NodeActionsMenu.tsx
+++ b/src/components/ResourceBrowser/ResourceList/NodeActionsMenu.tsx
@@ -19,11 +19,11 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { noop, PopupMenu } from '@devtron-labs/devtron-fe-common-lib'
 
+import { ReactComponent as MenuDots } from '@Icons/ic-dot.svg'
 import { ReactComponent as UncordonIcon } from '@Icons/ic-play-outline.svg'
 import { TaintType } from '@Components/ClusterNodes/types'
 import { AppDetailsTabs } from '@Components/v2/appDetails/appDetails.store'
 
-import { ReactComponent as MenuDots } from '../../../assets/icons/appstatus/ic-menu-dots.svg'
 import { ReactComponent as DrainIcon } from '../../../assets/icons/ic-clean-brush.svg'
 import { ReactComponent as CordonIcon } from '../../../assets/icons/ic-cordon.svg'
 import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-interactive.svg'
@@ -158,7 +158,7 @@ const NodeActionsMenu = ({ nodeData, getNodeListData, addTab, handleClearBulkSel
         <>
             <PopupMenu autoClose>
                 <PopupMenu.Button rootClassName="flex ml-auto p-4 dc__no-background" isKebab>
-                    <MenuDots className="node-actions-menu-icon icon-dim-16" />
+                    <MenuDots className="fcn-7 icon-dim-16" />
                 </PopupMenu.Button>
                 <PopupMenu.Body rootClassName="dc__border">
                     <div className="fs-13 fw-4 lh-20 pt-8 pb-8 w-160">
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx b/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
index 8c17f03ed2..4c52ea98ba 100644
--- a/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
@@ -28,7 +28,8 @@ import {
     useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as MenuDots } from '../../../assets/icons/appstatus/ic-menu-dots.svg'
+import { ReactComponent as MenuDots } from '@Icons/ic-dot.svg'
+
 import { ReactComponent as CalendarIcon } from '../../../assets/icons/ic-calendar.svg'
 import { ReactComponent as DeleteIcon } from '../../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as ManifestIcon } from '../../../assets/icons/ic-file-code.svg'
@@ -108,7 +109,7 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
         <>
             <PopupMenu autoClose>
                 <PopupMenu.Button rootClassName="flex ml-auto p-4 dc__no-background" isKebab>
-                    <MenuDots className="node-actions-menu-icon icon-dim-16" data-testid="popup-menu-button" />
+                    <MenuDots className="fcn-7 icon-dim-16" data-testid="popup-menu-button" />
                 </PopupMenu.Button>
                 <PopupMenu.Body rootClassName="dc__border pt-4 pb-4">
                     <div className="fs-13 fw-4 lh-20 w-120 flexbox-col">
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceList.tsx b/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
index 8fe4fdab65..97ae3a0e9b 100644
--- a/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
@@ -20,14 +20,12 @@ import { useHistory, useLocation, useParams, useRouteMatch } from 'react-router-
 import {
     ALL_NAMESPACE_OPTION,
     ApiResourceGroupType,
-    BreadCrumb,
     DevtronProgressing,
     DynamicTabType,
     ErrorScreenManager,
     getResourceGroupListRaw,
     InitTabType,
     noop,
-    PageHeader,
     useAsync,
     useBreadcrumb,
     useEffectAfterMount,
@@ -45,10 +43,9 @@ import { DynamicTabsProps, DynamicTabsVariantType, UpdateTabUrlParamsType } from
 
 import { URLS } from '../../../config'
 import { DEFAULT_CLUSTER_ID } from '../../cluster/cluster.type'
-import { getClusterListMin } from '../../ClusterNodes/clusterNodes.service'
 import ClusterOverview from '../../ClusterNodes/ClusterOverview'
 import NodeDetails from '../../ClusterNodes/NodeDetails'
-import { convertToOptionsList, importComponentFromFELibrary, sortObjectArrayAlphabetically } from '../../common'
+import { importComponentFromFELibrary } from '../../common'
 import { DynamicTabs, useTabs } from '../../common/DynamicTabs'
 import { AppDetailsTabs } from '../../v2/appDetails/appDetails.store'
 import NodeDetailComponent from '../../v2/appDetails/k8Resource/nodeDetail/NodeDetail.component'
@@ -60,15 +57,22 @@ import {
     UPGRADE_CLUSTER_CONSTANTS,
 } from '../Constants'
 import { renderCreateResourceButton } from '../PageHeader.buttons'
+import { getClusterListing } from '../ResourceBrowser.service'
 import { ClusterOptionType, K8SResourceListType, URLParams } from '../Types'
-import { getTabsBasedOnRole } from '../Utils'
+import { getClusterChangeRedirectionUrl, getTabsBasedOnRole } from '../Utils'
 import AdminTerminal from './AdminTerminal'
 import ClusterSelector from './ClusterSelector'
 import ClusterUpgradeCompatibilityInfo from './ClusterUpgradeCompatibilityInfo'
 import K8SResourceTabComponent from './K8SResourceTabComponent'
 import { renderRefreshBar } from './ResourceList.component'
+import ResourcePageHeader from './ResourcePageHeader'
 import { ResourceListUrlFiltersType } from './types'
-import { getFirstResourceFromKindResourceMap, getUpgradeCompatibilityTippyConfig, parseSearchParams } from './utils'
+import {
+    getClusterOptions,
+    getFirstResourceFromKindResourceMap,
+    getUpgradeCompatibilityTippyConfig,
+    parseSearchParams,
+} from './utils'
 
 const EventsAIResponseWidget = importComponentFromFELibrary('EventsAIResponseWidget', null, 'function')
 const MonitoringDashboard = importComponentFromFELibrary('MonitoringDashboard', null, 'function')
@@ -105,22 +109,9 @@ const ResourceList = () => {
         [clusterId],
     )
 
-    const [loading, clusterListData, error] = useAsync(() => getClusterListMin())
+    const [loading, clusterList, error] = useAsync(() => getClusterListing(true))
 
-    const clusterList = clusterListData?.result || null
-
-    const clusterOptions = useMemo(
-        () =>
-            clusterList &&
-            (convertToOptionsList(
-                sortObjectArrayAlphabetically(clusterList, 'name').filter(({ isVirtualCluster }) => !isVirtualCluster),
-                'name',
-                'id',
-                'nodeErrors',
-                'isProd',
-            ) as ClusterOptionType[]),
-        [clusterList],
-    )
+    const clusterOptions: ClusterOptionType[] = useMemo(() => getClusterOptions(clusterList), [clusterList])
 
     /* NOTE: this is being used as dependency in useEffect down the tree */
     const selectedCluster = useMemo(
@@ -128,8 +119,8 @@ const ResourceList = () => {
             clusterOptions?.find((cluster) => String(cluster.value) === clusterId) || {
                 label: '',
                 value: clusterId,
-                errorInConnecting: '',
                 isProd: false,
+                isInstallationCluster: false,
             },
         [clusterId, clusterOptions],
     )
@@ -299,9 +290,7 @@ const ResourceList = () => {
             return
         }
 
-        const path = `${URLS.RESOURCE_BROWSER}/${selected.value}/${
-            ALL_NAMESPACE_OPTION.value
-        }/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`
+        const path = getClusterChangeRedirectionUrl(selected.isInstallationCluster, selected.value)
 
         replace({
             pathname: path,
@@ -364,8 +353,6 @@ const ResourceList = () => {
         }
     }
 
-    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
-
     const updateTerminalTabUrl = (queryParams: string) => {
         const terminalTab = getTabById(ResourceBrowserTabsId.terminal)
         if (!terminalTab || terminalTab.name !== AppDetailsTabs.terminal) {
@@ -587,11 +574,9 @@ const ResourceList = () => {
 
     return (
         <div className="resource-browser-container flexbox-col h-100 bg__primary" ref={resourceBrowserRef}>
-            <PageHeader
-                isBreadcrumbs
-                breadCrumbs={renderBreadcrumbs}
-                headerName=""
-                renderActionButtons={renderPageHeaderActionButtons}
+            <ResourcePageHeader
+                breadcrumbs={breadcrumbs}
+                renderPageHeaderActionButtons={renderPageHeaderActionButtons}
             />
             {renderMainBody()}
         </div>
diff --git a/src/components/ResourceBrowser/ResourceList/ResourcePageHeader.tsx b/src/components/ResourceBrowser/ResourceList/ResourcePageHeader.tsx
new file mode 100644
index 0000000000..ffb1d4154e
--- /dev/null
+++ b/src/components/ResourceBrowser/ResourceList/ResourcePageHeader.tsx
@@ -0,0 +1,18 @@
+import { BreadCrumb, noop, PageHeader } from '@devtron-labs/devtron-fe-common-lib'
+
+import { ResourcePageHeaderProps } from './types'
+
+const ResourcePageHeader = ({ breadcrumbs, renderPageHeaderActionButtons }: ResourcePageHeaderProps) => {
+    const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
+
+    return (
+        <PageHeader
+            isBreadcrumbs
+            breadCrumbs={renderBreadcrumbs}
+            headerName=""
+            renderActionButtons={renderPageHeaderActionButtons ?? noop}
+        />
+    )
+}
+
+export default ResourcePageHeader
diff --git a/src/components/ResourceBrowser/ResourceList/types.ts b/src/components/ResourceBrowser/ResourceList/types.ts
index 604c2e0d07..718e9893c6 100644
--- a/src/components/ResourceBrowser/ResourceList/types.ts
+++ b/src/components/ResourceBrowser/ResourceList/types.ts
@@ -21,6 +21,7 @@ import {
     K8sResourceDetailType,
     RBBulkOperationType,
     ServerErrors,
+    useBreadcrumb,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ClusterListType } from '@Components/ClusterNodes/types'
@@ -82,3 +83,8 @@ export interface ResourceListUrlFiltersType {
 }
 
 export type BulkOperationsModalState = RBBulkOperationType | 'closed'
+
+export interface ResourcePageHeaderProps {
+    breadcrumbs: ReturnType<typeof useBreadcrumb>['breadcrumbs']
+    renderPageHeaderActionButtons?: () => JSX.Element
+}
diff --git a/src/components/ResourceBrowser/ResourceList/utils.tsx b/src/components/ResourceBrowser/ResourceList/utils.tsx
index 3779fd0506..473e00eeab 100644
--- a/src/components/ResourceBrowser/ResourceList/utils.tsx
+++ b/src/components/ResourceBrowser/ResourceList/utils.tsx
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { logExceptionToSentry, noop } from '@devtron-labs/devtron-fe-common-lib'
+import { ClusterDetail, logExceptionToSentry, noop } from '@devtron-labs/devtron-fe-common-lib'
+
+import { sortObjectArrayAlphabetically } from '@Components/common'
 
 import {
     LOCAL_STORAGE_EXISTS,
@@ -22,7 +24,7 @@ import {
     OPTIONAL_NODE_LIST_HEADERS,
     TARGET_K8S_VERSION_SEARCH_KEY,
 } from '../Constants'
-import { K8SResourceListType } from '../Types'
+import { ClusterOptionType, K8SResourceListType } from '../Types'
 import { ResourceListUrlFiltersType } from './types'
 
 export const parseSearchParams = (searchParams: URLSearchParams) => ({
@@ -88,3 +90,16 @@ export const getFirstResourceFromKindResourceMap = (
         (resourceGroup) => resourceGroup.gvk.Kind?.toLowerCase() === kind?.toLowerCase(),
     )
 }
+
+export const getClusterOptions = (clusterList: ClusterDetail[]): ClusterOptionType[] =>
+    clusterList
+        ? sortObjectArrayAlphabetically(clusterList, 'name')
+              .filter(({ isVirtualCluster }) => !isVirtualCluster)
+              .map(({ name, id, nodeErrors, isProd, installationId }) => ({
+                  label: name,
+                  value: String(id ?? installationId),
+                  description: nodeErrors,
+                  isProd,
+                  isInstallationCluster: !!installationId,
+              }))
+        : []
diff --git a/src/components/ResourceBrowser/Types.ts b/src/components/ResourceBrowser/Types.ts
index 969d89f6c4..c464f87213 100644
--- a/src/components/ResourceBrowser/Types.ts
+++ b/src/components/ResourceBrowser/Types.ts
@@ -89,8 +89,8 @@ export interface SidebarType {
 }
 
 export interface ClusterOptionType extends OptionType {
-    errorInConnecting: string
     isProd: boolean
+    isInstallationCluster: boolean
 }
 
 export interface ResourceFilterOptionsProps extends Pick<SidebarType, 'updateK8sResourceTab'> {
@@ -222,6 +222,7 @@ export interface ClusterSelectorType {
     onChange: ({ label, value }) => void
     clusterList: ClusterOptionType[]
     clusterId: string
+    isInstallationStatusView?: boolean
 }
 
 export interface CreateResourceButtonType {
diff --git a/src/components/ResourceBrowser/Utils.tsx b/src/components/ResourceBrowser/Utils.tsx
index d2e71b311b..445dc108b1 100644
--- a/src/components/ResourceBrowser/Utils.tsx
+++ b/src/components/ResourceBrowser/Utils.tsx
@@ -20,6 +20,7 @@ import moment from 'moment'
 import queryString from 'query-string'
 
 import {
+    ALL_NAMESPACE_OPTION,
     ApiResourceGroupType,
     DATE_TIME_FORMAT_STRING,
     GVKType,
@@ -408,3 +409,10 @@ export const parseNodeList = (response: ResponseType<NodeRowDetail[]>): Response
         }),
     },
 })
+
+export const getClusterChangeRedirectionUrl = (isInstallationCluster: boolean, clusterId: string) =>
+    isInstallationCluster
+        ? `${URLS.RESOURCE_BROWSER}/installation-cluster/${clusterId}`
+        : `${URLS.RESOURCE_BROWSER}/${clusterId}/${
+              ALL_NAMESPACE_OPTION.value
+          }/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`
diff --git a/src/components/cdPipeline/MigrateToDevtron/MigrateToDevtronValidationFactory.tsx b/src/components/cdPipeline/MigrateToDevtron/MigrateToDevtronValidationFactory.tsx
index a4edf2d00a..dd27d4469f 100644
--- a/src/components/cdPipeline/MigrateToDevtron/MigrateToDevtronValidationFactory.tsx
+++ b/src/components/cdPipeline/MigrateToDevtron/MigrateToDevtronValidationFactory.tsx
@@ -15,7 +15,7 @@
  */
 
 import { ComponentProps } from 'react'
-import { Link } from 'react-router-dom'
+import { generatePath, Link } from 'react-router-dom'
 
 import {
     Button,
@@ -41,6 +41,7 @@ import {
     ADD_ENVIRONMENT_FORM_LOCAL_STORAGE_KEY,
 } from '@Components/cluster/constants'
 import { URLS } from '@Config/routes'
+import { CreateClusterTypeEnum } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types'
 
 import { MigrationSourceValidationReasonType } from '../cdPipeline.types'
 import { GENERIC_SECTION_ERROR_STATE_COMMON_PROPS, TARGET_ENVIRONMENT_INFO_LIST } from './constants'
@@ -249,7 +250,9 @@ const MigrateToDevtronValidationFactory = ({
                                 component: ButtonComponentType.link,
                                 onClick: handleAddClusterClick,
                                 linkProps: {
-                                    to: URLS.GLOBAL_CONFIG_CREATE_CLUSTER,
+                                    to: generatePath(URLS.GLOBAL_CONFIG_CREATE_CLUSTER, {
+                                        type: CreateClusterTypeEnum.CONNECT_CLUSTER,
+                                    }),
                                     target: '_blank',
                                 },
                             }}
diff --git a/src/components/charts/ChartGroupUpdate.tsx b/src/components/charts/ChartGroupUpdate.tsx
index cbf0cfb867..8a1383f254 100644
--- a/src/components/charts/ChartGroupUpdate.tsx
+++ b/src/components/charts/ChartGroupUpdate.tsx
@@ -16,7 +16,16 @@
 
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { useParams, useRouteMatch, useHistory, useLocation, Prompt } from 'react-router-dom'
-import { showError, Progressing, BreadCrumb, useBreadcrumb, PageHeader, DetectBottom, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    showError,
+    Progressing,
+    BreadCrumb,
+    useBreadcrumb,
+    PageHeader,
+    DetectBottom,
+    ToastManager,
+    ToastVariantType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import ChartSelect from './util/ChartSelect'
 import { ChartGroupEntry, Chart, ChartListType } from './charts.types'
 import MultiChartSummary from './MultiChartSummary'
@@ -66,6 +75,7 @@ export default function ChartGroupUpdate({}) {
     const [chartListLoading, setChartListLoading] = useState(true)
     const chartList: Chart[] = Array.from(state.availableCharts.values())
     const [chartLists, setChartLists] = useState<ChartListType[]>([])
+    const [chartCategoryIds, setChartCategoryIds] = useState<string[]>([])
     const [isGrid, setIsGrid] = useState<boolean>(true)
 
     const { breadcrumbs } = useBreadcrumb(
@@ -109,10 +119,10 @@ export default function ChartGroupUpdate({}) {
             await updateChartGroupEntries(requestBody)
             await reloadState()
             updateChartGroupEntriesFromResponse()
-             ToastManager.showToast({
-                 variant: ToastVariantType.success,
-                 description: 'Successfully saved',
-             })
+            ToastManager.showToast({
+                variant: ToastVariantType.success,
+                description: 'Successfully saved',
+            })
         } catch (err) {
             showError(err)
         } finally {
@@ -186,6 +196,7 @@ export default function ChartGroupUpdate({}) {
         const allRegistryIds: string = searchParams.get(QueryParams.RegistryId)
         const deprecated: string = searchParams.get(QueryParams.IncludeDeprecated)
         const appStoreName: string = searchParams.get(QueryParams.AppStoreName)
+        const chartCategoryCsv: string = searchParams.get(QueryParams.ChartCategoryId)
         let chartRepoIdArray = []
         let ociRegistryArray = []
         if (allChartRepoIds) {
@@ -215,6 +226,8 @@ export default function ChartGroupUpdate({}) {
         }
         if (deprecated) {
             setIncludeDeprecated(parseInt(deprecated))
+        } else {
+            setIncludeDeprecated(0)
         }
         if (appStoreName) {
             setSearchApplied(true)
@@ -223,6 +236,14 @@ export default function ChartGroupUpdate({}) {
             setSearchApplied(false)
             setAppStoreName('')
         }
+        if (chartCategoryCsv) {
+            const idsArray = chartCategoryCsv.split(',')
+            if (idsArray) {
+                setChartCategoryIds(idsArray)
+            }
+        } else {
+            setChartCategoryIds([])
+        }
     }
 
     async function callApplyFilterOnCharts(resetPage?: boolean) {
@@ -291,6 +312,8 @@ export default function ChartGroupUpdate({}) {
                                 selectedChartRepo={selectedChartRepo}
                                 isGrid={isGrid}
                                 setIsGrid={setIsGrid}
+                                chartCategoryIds={chartCategoryIds}
+                                setChartCategoryIds={setChartCategoryIds}
                             />
                         ) : null}
                         {chartListLoading ? (
@@ -309,9 +332,7 @@ export default function ChartGroupUpdate({}) {
                                         discardValuesYamlChanges={discardValuesYamlChanges}
                                     />
                                 ) : !chartList.length ? (
-                                    <ChartEmptyState
-                                        onClickViewChartButton={handleViewAllCharts}
-                                    />
+                                    <ChartEmptyState onClickViewChartButton={handleViewAllCharts} />
                                 ) : (
                                     <div className={`${!isGrid ? 'chart-list-view ' : ''}`}>
                                         <ChartList
diff --git a/src/components/charts/ChartHeaderFilters.tsx b/src/components/charts/ChartHeaderFilters.tsx
index 20034aa6c8..f256443981 100644
--- a/src/components/charts/ChartHeaderFilters.tsx
+++ b/src/components/charts/ChartHeaderFilters.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react'
 import { CHECKBOX_VALUE, Checkbox, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
 import { useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Grid } from '../../assets/icons/ic-grid-view.svg'
@@ -24,6 +23,9 @@ import { Accordian } from '../common/Accordian/Accordian'
 import { URLS } from '../../config'
 import { CHART_KEYS } from './constants'
 import { ChartHeaderFilterProps } from './charts.types'
+import { importComponentFromFELibrary } from '@Components/common'
+
+const ChartCategoryFilters = importComponentFromFELibrary('ChartCategoryFilters', null, 'function')
 
 const ChartHeaderFilter = ({
     selectedChartRepo,
@@ -33,6 +35,8 @@ const ChartHeaderFilter = ({
     appStoreName,
     isGrid,
     setIsGrid,
+    chartCategoryIds,
+    setChartCategoryIds,
 }: ChartHeaderFilterProps) => {
     const match = useRouteMatch()
     const history = useHistory()
@@ -53,12 +57,15 @@ const ChartHeaderFilter = ({
         history.push(`${match.url.split('/chart-store')[0]}${URLS.GLOBAL_CONFIG_CHART}`)
     }
 
+    // Should be replaced with useURLFilters
     function handleFilterChanges(selected, key): void {
         const searchParams = new URLSearchParams(location.search)
         const app = searchParams.get(QueryParams.AppStoreName)
         const deprecate = searchParams.get(QueryParams.IncludeDeprecated)
         const chartRepoId = searchParams.get(QueryParams.ChartRepoId)
         const registryId = searchParams.get(QueryParams.RegistryId)
+        const chartCategoryIdsCsv = searchParams.get(QueryParams.ChartCategoryId)
+
         let isOCIRegistry
         if (key === CHART_KEYS.CHART_REPO) {
             const paramsChartRepoIds = selected
@@ -86,6 +93,9 @@ const ChartHeaderFilter = ({
                 if (deprecate) {
                     qsr = `${qsr}&${QueryParams.IncludeDeprecated}=${deprecate}`
                 }
+                if (chartCategoryIdsCsv) {
+                    qsr = `${qsr}&${QueryParams.ChartCategoryId}=${chartCategoryIdsCsv}`
+                }
                 history.push(`${url}?${qsr}`)
             } else {
                 let qs = `${QueryParams.ChartRepoId}=${paramsChartRepoIds}`
@@ -98,12 +108,16 @@ const ChartHeaderFilter = ({
                 if (deprecate) {
                     qs = `${qs}&${QueryParams.IncludeDeprecated}=${deprecate}`
                 }
+                if (chartCategoryIdsCsv) {
+                    qs = `${qs}&${QueryParams.ChartCategoryId}=${chartCategoryIdsCsv}`
+                }
                 history.push(`${url}?${qs}`)
             }
         }
 
-        if (key === CHART_KEYS.DEPRECATED) {
-            let qs = `${QueryParams.IncludeDeprecated}=${selected}`
+        if (key === CHART_KEYS.CHART_CATEGORY) {
+            const chartCategoryCsv = selected.join(',')
+            let qs = `${QueryParams.ChartCategoryId}=${chartCategoryCsv}`
             if (app) {
                 qs = `${qs}&${QueryParams.AppStoreName}=${app}`
             }
@@ -113,13 +127,16 @@ const ChartHeaderFilter = ({
             if (registryId) {
                 qs = `${qs}&${QueryParams.RegistryId}=${registryId}`
             }
+            if (deprecate) {
+                qs = `${qs}&${QueryParams.IncludeDeprecated}=${deprecate}`
+            }
             history.push(`${url}?${qs}`)
         }
 
-        if (key === CHART_KEYS.SEARCH) {
-            let qs = `${QueryParams.AppStoreName}=${selected}`
-            if (deprecate) {
-                qs = `${qs}&${QueryParams.IncludeDeprecated}=${deprecate}`
+        if (key === CHART_KEYS.DEPRECATED) {
+            let qs = `${QueryParams.IncludeDeprecated}=${selected}`
+            if (app) {
+                qs = `${qs}&${QueryParams.AppStoreName}=${app}`
             }
             if (chartRepoId) {
                 qs = `${qs}&${QueryParams.ChartRepoId}=${chartRepoId}`
@@ -127,11 +144,14 @@ const ChartHeaderFilter = ({
             if (registryId) {
                 qs = `${qs}&${QueryParams.RegistryId}=${registryId}`
             }
+            if (chartCategoryIdsCsv) {
+                qs = `${qs}&${QueryParams.ChartCategoryId}=${chartCategoryIdsCsv}`
+            }
             history.push(`${url}?${qs}`)
         }
 
-        if (key === CHART_KEYS.CLEAR) {
-            let qs: string = ''
+        if (key === CHART_KEYS.SEARCH) {
+            let qs = `${QueryParams.AppStoreName}=${selected}`
             if (deprecate) {
                 qs = `${qs}&${QueryParams.IncludeDeprecated}=${deprecate}`
             }
@@ -141,6 +161,9 @@ const ChartHeaderFilter = ({
             if (registryId) {
                 qs = `${qs}&${QueryParams.RegistryId}=${registryId}`
             }
+            if (chartCategoryIdsCsv) {
+                qs = `${qs}&${QueryParams.ChartCategoryId}=${chartCategoryIdsCsv}`
+            }
             history.push(`${url}?${qs}`)
         }
     }
@@ -162,6 +185,11 @@ const ChartHeaderFilter = ({
         handleFilterChanges(searchKey, CHART_KEYS.SEARCH)
     }
 
+    const handleUpdateCategoryFilter = (selectedCategories: string[]) => {
+        setChartCategoryIds(selectedCategories)
+        handleFilterChanges(selectedCategories, CHART_KEYS.CHART_CATEGORY)
+    }
+
     return (
         <div className="filter-column-container flexbox-col h-100 dc__overflow-hidden">
             <div className="pb-12 pl-12 pr-12 pt-16">
@@ -171,35 +199,29 @@ const ChartHeaderFilter = ({
                     handleEnter={handleSearchEnter}
                     inputProps={{
                         placeholder: 'Search charts',
-                        autoFocus: true
+                        autoFocus: true,
                     }}
                     dataTestId="chart-store-search-box"
                 />
             </div>
             <div className="pl-12 pr-12 flexbox-col flex-grow-1 dc__overflow-auto">
-                <div className="fs-12 fw-6 ml-8 cn-6 pb-8 pt-8" data-testid="chart-store-view-type-heading">
-                    VIEW AS
-                </div>
-                <div className="cursor flex">
-                    <div
-                        onClick={setGrid}
-                        className={`flex pt-8 pb-8 pl-10 pr-10 fs-13 br-4 w-100 ${
-                            isGrid ? 'cb-5 bcb-1 scb-5' : 'dc__hover-n50'
-                        }`}
-                        data-testid="chart-store-grid-view"
-                    >
-                        <Grid className="icon-dim-20 mr-8" />
-                        Grid
-                    </div>
-                    <div
-                        onClick={setList}
-                        className={`flex pt-8 pb-8 fs-13 pr-10 pl-10 br-4 w-100 ${
-                            !isGrid ? 'cb-5 bcb-1 scb-5' : 'dc__hover-n50'
-                        }`}
-                        data-testid="chart-store-list-view"
-                    >
-                        <List className="icon-dim-20 mr-8" />
-                        List
+                <div className="flex dc__content-space px-8 py-6 dc__gap-8">
+                    <span className="fs-12 cn-6 fw-6 lh-20">VIEW AS</span>
+                    <div className="cursor flex dc__gap-8">
+                        <button
+                            onClick={setGrid}
+                            className={`flex dc__unset-button-styles ${isGrid ? 'scb-5' : ''}`}
+                            data-testid="chart-store-grid-view"
+                        >
+                            <Grid className="icon-dim-20" />
+                        </button>
+                        <button
+                            onClick={setList}
+                            className={`flex dc__unset-button-styles ${!isGrid ? 'scb-5' : ''}`}
+                            data-testid="chart-store-list-view"
+                        >
+                            <List className="icon-dim-20" />
+                        </button>
                     </div>
                 </div>
                 <hr className="mt-8 mb-8" />
@@ -215,6 +237,15 @@ const ChartHeaderFilter = ({
                 >
                     <div> Show deprecated charts</div>
                 </Checkbox>
+                {ChartCategoryFilters && (
+                    <>
+                        <hr className="mt-8 mb-8" />
+                        <ChartCategoryFilters
+                            selectedCategories={chartCategoryIds}
+                            handleUpdateCategoryFilter={handleUpdateCategoryFilter}
+                        />
+                    </>
+                )}
                 <hr className="mt-8 mb-8" />
                 <Accordian
                     header="CHART SOURCE"
diff --git a/src/components/charts/charts.types.tsx b/src/components/charts/charts.types.tsx
index 9cb65f3dc4..7e134aa111 100644
--- a/src/components/charts/charts.types.tsx
+++ b/src/components/charts/charts.types.tsx
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { Dispatch, SetStateAction } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 
 import { OptionType, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
@@ -403,6 +404,8 @@ export interface ChartHeaderFilterProps {
     appStoreName: string
     isGrid: boolean
     setIsGrid: (isGrid: boolean) => void
+    chartCategoryIds: string[]
+    setChartCategoryIds: Dispatch<SetStateAction<string[]>>
 }
 
 export interface DeleteInstalledChartParamsType {
diff --git a/src/components/charts/charts.util.tsx b/src/components/charts/charts.util.tsx
index be27a9d554..13c5ed7c35 100644
--- a/src/components/charts/charts.util.tsx
+++ b/src/components/charts/charts.util.tsx
@@ -117,6 +117,7 @@ export const QueryParams = {
     AppStoreName: 'appStoreName',
     RegistryId: 'registryId',
     SearchKey: 'searchKey',
+    ChartCategoryId: 'chartCategoryId',
 }
 
 export const PaginationParams = {
diff --git a/src/components/charts/constants.ts b/src/components/charts/constants.ts
index bd38f5063c..8c38cb6012 100644
--- a/src/components/charts/constants.ts
+++ b/src/components/charts/constants.ts
@@ -34,7 +34,7 @@ export const APP_NAME_TAKEN = 'App name already taken'
 
 export enum CHART_KEYS {
     CHART_REPO = 'chart-repo',
+    CHART_CATEGORY = 'chart-category',
     DEPRECATED = 'deprecated',
     SEARCH = 'search',
-    CLEAR = 'clear',
 }
diff --git a/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx b/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx
index ec0015b3c3..eabd1b7331 100644
--- a/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx
+++ b/src/components/charts/discoverChartDetail/ChartDeploymentList.tsx
@@ -36,7 +36,7 @@ import { Td } from '../../common'
 import { Routes, URLS, ViewType, SERVER_MODE, DELETE_ACTION } from '../../../config'
 import { deleteInstalledChart } from '../charts.service'
 import AppNotDeployedIcon from '../../../assets/img/app-not-configured.png'
-import dots from '../../../assets/icons/appstatus/ic-menu-dots.svg'
+import { ReactComponent as Dots } from '@Icons/ic-dot.svg'
 import trash from '../../../assets/icons/ic-delete.svg'
 import { getAppId } from '../../v2/appDetails/k8Resource/nodeDetail/nodeDetail.api'
 import ClusterNotReachableDialog from '../../common/ClusterNotReachableDialog/ClusterNotReachableDialog'
@@ -243,8 +243,8 @@ export const DeploymentRow = ({
                 </Td>
                 <Td>
                     <PopupMenu autoClose>
-                        <PopupMenu.Button isKebab>
-                            <img src={dots} alt="" />
+                        <PopupMenu.Button isKebab rootClassName='p-4 flex'>
+                            <Dots className='icon-dim-16 fcn-7 dc__no-shrink' />
                         </PopupMenu.Button>
                         <PopupMenu.Body rootClassName="deployment-table-row__delete">
                             <div className="flex left" onClick={(e) => setConfirmation(true)}>
diff --git a/src/components/charts/list/DiscoverCharts.tsx b/src/components/charts/list/DiscoverCharts.tsx
index 8c1eae5504..5adfb66f15 100644
--- a/src/components/charts/list/DiscoverCharts.tsx
+++ b/src/components/charts/list/DiscoverCharts.tsx
@@ -26,6 +26,9 @@ import {
     FeatureTitleWithInfo,
     ToastVariantType,
     ToastManager,
+    Button,
+    ComponentSizeType,
+    ButtonVariantType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, NavLink, useHistory, useLocation, useRouteMatch, Prompt } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -111,6 +114,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
     const [appStoreName, setAppStoreName] = useState('')
     const [searchApplied, setSearchApplied] = useState(false)
     const [includeDeprecated, setIncludeDeprecated] = useState(0)
+    const [chartCategoryIds, setChartCategoryIds] = useState<string[]>([])
     const projectsMap = mapByKey(state.projects, 'id')
     const chartList: Chart[] = Array.from(state.availableCharts.values())
     const isLeavingPageNotAllowed = useRef(false)
@@ -125,7 +129,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false)
     const [filteredChartList, setFilteredChartList] = useState<ChartListType[]>([])
 
-    const noChartAvailable: boolean = chartList.length > 0 || searchApplied || selectedChartRepo.length > 0
+    const noChartAvailable: boolean = chartList.length > 0 || searchApplied || selectedChartRepo.length > 0 || !!chartCategoryIds
     isLeavingPageNotAllowed.current = !state.charts.reduce((acc: boolean, chart: ChartGroupEntry) => {
         return (acc = acc && chart.originalValuesYaml === chart.valuesYaml)
     }, true)
@@ -262,12 +266,14 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
         toggleDeployModal(false)
     }
 
+    // should be removed and use useUrlFilters instead
     function initialiseFromQueryParams(chartRepoList): void {
         const searchParams = new URLSearchParams(location.search)
         const allChartRepoIds: string = searchParams.get(QueryParams.ChartRepoId)
         const allRegistryIds: string = searchParams.get(QueryParams.RegistryId)
         const deprecated: string = searchParams.get(QueryParams.IncludeDeprecated)
         const appStoreName: string = searchParams.get(QueryParams.AppStoreName)
+        const chartCategoryCsv: string = searchParams.get(QueryParams.ChartCategoryId)
         let chartRepoIdArray = []
         let ociRegistryArray = []
         if (allChartRepoIds) {
@@ -297,6 +303,8 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
         }
         if (deprecated) {
             setIncludeDeprecated(parseInt(deprecated))
+        } else {
+            setIncludeDeprecated(0)
         }
         if (appStoreName) {
             setSearchApplied(true)
@@ -305,6 +313,14 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
             setSearchApplied(false)
             setAppStoreName('')
         }
+        if (chartCategoryCsv) {
+            const idsArray = chartCategoryCsv.split(',')
+            if (idsArray) {
+                setChartCategoryIds(idsArray)
+            }
+        } else {
+            setChartCategoryIds([])
+        }
     }
 
     async function callApplyFilterOnCharts(resetPage?: boolean) {
@@ -369,24 +385,25 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
                             <span className="fs-16 cn-5 ml-4 mr-4"> / </span>
                         </>
                     )}
-                    <span className="fs-16 cn-9">
+                    <div className="flex dc__gap-16">
                         {state.charts.length === 0 ? (
                             <>
-                                Chart Store
+                                <span className="fs-16 cn-9">Chart Store</span>
                                 {isSuperAdmin && (
-                                    <button
-                                        className="en-2 bw-1 br-4 cb-5 fw-6 bg__primary ml-16 scb-5"
+                                    <Button
+                                        dataTestId="chart-store-source-button"
+                                        text="Source"
+                                        startIcon={<SourceIcon />}
                                         onClick={onChangeShowSourcePopup}
-                                    >
-                                        <SourceIcon className="mr-4" />
-                                        <span className="fs-12">Source</span>
-                                    </button>
+                                        size={ComponentSizeType.xs}
+                                        variant={ButtonVariantType.secondary}
+                                    />
                                 )}
                             </>
                         ) : (
                             'Deploy multiple charts'
                         )}
-                    </span>
+                    </div>
                 </div>
                 <div>
                     {showSourcePopoUp && (
@@ -429,9 +446,7 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
 
     return (
         <>
-            <div
-                className={`discover-charts bg__primary ${state.charts.length > 0 ? 'summary-show' : ''} chart-store-header`}
-            >
+            <div className={`discover-charts bg__primary ${state.charts.length > 0 ? 'summary-show' : ''}`}>
                 <ConditionalWrap condition={state.charts.length > 0} wrap={(children) => <div>{children}</div>}>
                     <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
                 </ConditionalWrap>
@@ -451,6 +466,8 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
                                 selectedChartRepo={selectedChartRepo}
                                 isGrid={isGrid}
                                 setIsGrid={setIsGrid}
+                                chartCategoryIds={chartCategoryIds}
+                                setChartCategoryIds={setChartCategoryIds}
                             />
                         )}
                         {state.loading || chartListLoading ? (
@@ -495,7 +512,8 @@ const DiscoverChartList = ({ isSuperAdmin }: { isSuperAdmin: boolean }) => {
                                             <div className={`h-100 ${!isGrid ? 'chart-list-view ' : ''}`}>
                                                 {serverMode == SERVER_MODE.FULL &&
                                                     !searchApplied &&
-                                                    selectedChartRepo.length === 0 && (
+                                                    !selectedChartRepo.length &&
+                                                    !chartCategoryIds.length && (
                                                         <ChartGroupListMin
                                                             chartGroups={state.chartGroups.slice(0, isGrid ? 5 : 1)}
                                                             showChartGroupModal={showChartGroupModal}
diff --git a/src/components/charts/list/list.scss b/src/components/charts/list/list.scss
index c982526b4a..11610791b1 100644
--- a/src/components/charts/list/list.scss
+++ b/src/components/charts/list/list.scss
@@ -362,9 +362,6 @@
         }
     }
 }
-.chart-store-header {
-    grid-template-rows: 48px;
-}
 
 .discover-charts.summary-show,
 .deploy-and-details-view.summary-show,
diff --git a/src/components/cluster/Cluster.tsx b/src/components/cluster/Cluster.tsx
index a6103faddf..c89978c594 100644
--- a/src/components/cluster/Cluster.tsx
+++ b/src/components/cluster/Cluster.tsx
@@ -23,10 +23,7 @@ import {
     Drawer,
     sortCallback,
     noop,
-    DEFAULT_SECRET_PLACEHOLDER,
     FeatureTitleWithInfo,
-    ToastVariantType,
-    ToastManager,
     Button,
     ButtonComponentType,
     ButtonVariantType,
@@ -35,9 +32,9 @@ import {
     useStickyEvent,
     getClassNameForStickyHeaderWithShadow,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { Route, useHistory, withRouter } from 'react-router-dom'
+import { generatePath, Route, withRouter } from 'react-router-dom'
 import { ReactComponent as ClusterIcon } from '@Icons/ic-cluster.svg'
-import { importComponentFromFELibrary, useForm } from '../common'
+import { importComponentFromFELibrary } from '../common'
 import { List } from '../globalConfigurations/GlobalConfiguration'
 import {
     getClusterList,
@@ -51,18 +48,20 @@ import { ReactComponent as PencilEdit } from '@Icons/ic-pencil.svg'
 import { ReactComponent as Trash } from '@Icons/ic-delete-interactive.svg'
 import { ReactComponent as VirtualClusterIcon } from '@Icons/ic-virtual-cluster.svg'
 import { ReactComponent as VirtualEnvIcon } from '@Icons/ic-environment-temp.svg'
-import { POLLING_INTERVAL, ClusterListProps, AuthenticationType, ClusterFormProps } from './cluster.type'
+import { POLLING_INTERVAL, ClusterListProps, AuthenticationType, ClusterFormProps, EditClusterFormProps } from './cluster.type'
 import { DOCUMENTATION, ViewType, CONFIGURATION_TYPES, URLS, AppCreationType } from '../../config'
-import { getEnvName } from './cluster.util'
 import ClusterForm from './ClusterForm'
 import { ClusterEnvironmentDrawer } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer'
 import { EnvironmentDeleteComponent } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/EnvironmentDeleteComponent'
+import CreateCluster from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/CreateCluster.component'
+import { CreateClusterTypeEnum } from '@Pages/GlobalConfigurations/ClustersAndEnvironments/CreateCluster/types'
 
 const getRemoteConnectionConfig = importComponentFromFELibrary('getRemoteConnectionConfig', noop, 'function')
 const getSSHConfig: (
     ...props
-) => Pick<ClusterFormProps, 'sshUsername' | 'sshPassword' | 'sshAuthKey' | 'sshServerAddress'> =
+) => Pick<EditClusterFormProps, 'sshUsername' | 'sshPassword' | 'sshAuthKey' | 'sshServerAddress'> =
     importComponentFromFELibrary('getSSHConfig', noop, 'function')
+const VirtualClusterForm = importComponentFromFELibrary('VirtualClusterForm', null, 'function')
 
 class ClusterList extends Component<ClusterListProps, any> {
     timerRef
@@ -73,21 +72,14 @@ class ClusterList extends Component<ClusterListProps, any> {
             view: ViewType.LOADING,
             clusters: [],
             clusterEnvMap: {},
-            isTlsConnection: false,
             appCreationType: AppCreationType.Blank,
-            isKubeConfigFile: false,
             browseFile: false,
-            isClusterDetails: false,
             showEditCluster: false,
             isConnectedViaProxy: false,
             isConnectedViaSSHTunnel: false,
         }
         this.initialise = this.initialise.bind(this)
-        this.toggleCheckTlsConnection = this.toggleCheckTlsConnection.bind(this)
-        this.setTlsConnectionFalse = this.setTlsConnectionFalse.bind(this)
-        this.toggleKubeConfigFile = this.toggleKubeConfigFile.bind(this)
         this.toggleBrowseFile = this.toggleBrowseFile.bind(this)
-        this.toggleClusterDetails = this.toggleClusterDetails.bind(this)
         this.toggleShowEditCluster = this.toggleShowEditCluster.bind(this)
     }
 
@@ -187,26 +179,10 @@ class ClusterList extends Component<ClusterListProps, any> {
         clearInterval(this.timerRef)
     }
 
-    toggleCheckTlsConnection() {
-        this.setState({ isTlsConnection: !this.state.isTlsConnection })
-    }
-
-    setTlsConnectionFalse() {
-        this.setState({ isTlsConnection: false })
-    }
-
-    toggleClusterDetails(updateClusterDetails: boolean) {
-        this.setState({ isClusterDetails: updateClusterDetails })
-    }
-
     toggleShowEditCluster() {
         this.setState({ showEditCluster: !this.state.showEditCluster })
     }
 
-    toggleKubeConfigFile(updateKubeConfigFile: boolean) {
-        this.setState({ isKubeConfigFile: updateKubeConfigFile })
-    }
-
     toggleBrowseFile() {
         this.setState({ browseFile: !this.state.browseFile })
     }
@@ -250,12 +226,14 @@ class ClusterList extends Component<ClusterListProps, any> {
                     <Button
                         dataTestId="add_cluster_button"
                         linkProps={{
-                            to: URLS.GLOBAL_CONFIG_CREATE_CLUSTER,
+                            to: generatePath(URLS.GLOBAL_CONFIG_CREATE_CLUSTER, {
+                                type: CreateClusterTypeEnum.CONNECT_CLUSTER,
+                            }),
                         }}
                         component={ButtonComponentType.link}
                         startIcon={<Add />}
                         size={ComponentSizeType.medium}
-                        text="Add cluster"
+                        text="New Cluster"
                     />
                 </div>
                 {this.state.clusters.map(
@@ -267,41 +245,16 @@ class ClusterList extends Component<ClusterListProps, any> {
                                 key={cluster.id || Math.random().toString(36).substr(2, 5)}
                                 showEditCluster={this.state.showEditCluster}
                                 toggleShowAddCluster={this.toggleShowEditCluster}
-                                toggleCheckTlsConnection={this.toggleCheckTlsConnection}
-                                setTlsConnectionFalse={this.setTlsConnectionFalse}
-                                isTlsConnection={this.state.isTlsConnection}
+                                isTlsConnection={cluster.isTlsConnection}
                                 prometheus_url={cluster.prometheus_url}
                             />
                         ),
                 )}
 
                 <Route path={URLS.GLOBAL_CONFIG_CREATE_CLUSTER}>
-                    <Drawer position="right" width="1000px" onEscape={this.handleRedirectToClusterList}>
-                        <ClusterForm
-                            {...getSSHConfig(this.state)}
-                            cluster_name={this.state.cluster_name}
-                            server_url={this.state.server_url}
-                            active
-                            config={{}}
-                            reload={this.initialise}
-                            prometheus_url=""
-                            prometheusAuth={this.state.prometheus}
-                            defaultClusterComponent={this.state.defaultClusterComponent}
-                            isTlsConnection={this.state.isTlsConnection}
-                            isClusterDetails={this.state.isClusterDetails}
-                            proxyUrl={this.state.proxyUrl}
-                            isConnectedViaProxy={this.state.isConnectedViaProxy}
-                            isConnectedViaSSHTunnel={this.state.isConnectedViaSSHTunnel}
-                            toggleCheckTlsConnection={this.toggleCheckTlsConnection}
-                            setTlsConnectionFalse={this.setTlsConnectionFalse}
-                            toggleKubeConfigFile={this.toggleKubeConfigFile}
-                            isKubeConfigFile={this.state.isKubeConfigFile}
-                            toggleClusterDetails={this.toggleClusterDetails}
-                            handleCloseCreateClusterForm={this.handleRedirectToClusterList}
-                            isVirtualCluster={false}
-                            isProd={false}
-                        />
-                    </Drawer>
+                    <CreateCluster
+                        handleReloadClusterList={this.initialise}
+                    />
                 </Route>
 
                 <Route
@@ -317,6 +270,7 @@ class ClusterList extends Component<ClusterListProps, any> {
                         return (
                             <ClusterEnvironmentDrawer
                                 reload={this.initialise}
+                                clusterName={clusterName}
                                 id={null}
                                 environmentName={null}
                                 clusterId={clusterId}
@@ -338,40 +292,24 @@ class ClusterList extends Component<ClusterListProps, any> {
 export default withRouter(ClusterList)
 
 const Cluster = ({
-    id,
     id: clusterId,
     cluster_name,
     insecureSkipTlsVerify,
-    defaultClusterComponent,
-    agentInstallationStage,
     server_url,
-    active,
-    config: defaultConfig,
     environments,
     reload,
     prometheus_url,
     proxyUrl,
     toConnectWithSSHTunnel,
     sshTunnelConfig,
-    isTlsConnection,
-    toggleShowAddCluster,
-    toggleCheckTlsConnection,
-    setTlsConnectionFalse,
     isVirtualCluster,
     isProd,
 }) => {
     const [editMode, toggleEditMode] = useState(false)
     const [environment, setEnvironment] = useState(null)
-    const [config, setConfig] = useState(defaultConfig)
     const [prometheusAuth, setPrometheusAuth] = useState(undefined)
     const [showWindow, setShowWindow] = useState(false)
     const [confirmation, setConfirmation] = useState(false)
-    const [prometheusToggleEnabled] = useState(!!prometheus_url)
-
-    const [prometheusAuthenticationType] = useState({
-        type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
-    })
-    const authenticationType = prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS
 
     const drawerRef = useRef(null)
 
@@ -380,189 +318,28 @@ const Cluster = ({
         identifier: `cluster-list__${cluster_name}`,
     })
 
-    const isDefaultCluster = (): boolean => {
-        return id == 1
+    const handleModalClose = () => {
+        toggleEditMode(false)
     }
 
-    const { state } = useForm(
-        {
-            cluster_name: { value: cluster_name, error: '' },
-            url: { value: server_url, error: '' },
-            userName: { value: prometheusAuth?.userName, error: '' },
-            password: { value: prometheusAuth?.password, error: '' },
-            prometheusTlsClientKey: { value: prometheusAuth?.tlsClientKey, error: '' },
-            prometheusTlsClientCert: { value: prometheusAuth?.tlsClientCert, error: '' },
-            proxyUrl: { value: proxyUrl, error: '' },
-            sshUsername: { value: sshTunnelConfig?.user, error: '' },
-            sshPassword: { value: sshTunnelConfig?.password, error: '' },
-            sshAuthKey: { value: sshTunnelConfig?.authKey, error: '' },
-            sshServerAddress: { value: sshTunnelConfig?.sshServerAddress, error: '' },
-            isConnectedViaProxy: !!proxyUrl?.length,
-            isConnectedViaSSHTunnel: toConnectWithSSHTunnel,
-            tlsClientKey: { value: config.tls_key, error: '' },
-            tlsClientCert: { value: config.cert_data, error: '' },
-            certificateAuthorityData: { value: config.cert_auth_data, error: '' },
-            token: { value: config?.bearer_token ? config.bearer_token : '', error: '' },
-            endpoint: { value: prometheus_url || '', error: '' },
-            authType: { value: authenticationType, error: '' },
-        },
-        {
-            cluster_name: {
-                required: true,
-                validators: [
-                    { error: 'Name is required', regex: /^.*$/ },
-                    { error: "Use only lowercase alphanumeric characters, '-', '_' or '.'", regex: /^[a-z0-9-\.\_]+$/ },
-                    { error: "Cannot start/end with '-', '_' or '.'", regex: /^(?![-._]).*[^-._]$/ },
-                    { error: 'Minimum 3 and Maximum 63 characters required', regex: /^.{3,63}$/ },
-                ],
-            },
-            url: {
-                required: true,
-                validator: { error: 'URL is required', regex: /^.*$/ },
-            },
-            proxyUrl: {
-                required: false,
-                validator: { error: 'Incorrect Url', regex: /^.*$/ },
-            },
-            toConnectWithSSHTunnel: {
-                required: false,
-            },
-            sshUsername: {
-                required: false,
-                validator: {
-                    error: 'Username or User Identifier is required. Username cannot contain spaces or special characters other than _ and -',
-                    regex: /^[A-Za-z0-9_-]+$/,
-                },
-            },
-            sshPassword: {
-                required: false,
-                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
-            },
-            sshAuthKey: {
-                required: false,
-                validator: { error: 'ssh private key is required', regex: /^(?!\s*$).+/ },
-            },
-            sshServerAddress: {
-                required: false,
-                validator: { error: 'URL is required', regex: /^.*$/ },
-            },
-            isConnectedViaProxy: {
-                required: false,
-            },
-            authType: {
-                required: false,
-                validator: { error: 'Authentication Type is required', regex: /^(?!\s*$).+/ },
-            },
-            userName: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
-                validator: { error: 'username is required', regex: /^(?!\s*$).+/ },
-            },
-            password: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
-                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
-            },
-            tlsClientKey: {
-                required: false,
-                validator: { error: 'TLS Key is required', regex: /^(?!\s*$).+/ },
-            },
-            tlsClientCert: {
-                required: false,
-                validator: { error: 'TLS Certificate is required', regex: /^(?!\s*$).+/ },
-            },
-            prometheusTlsClientKey: {
-                required: false,
-            },
-            prometheusTlsClientCert: {
-                required: false,
-            },
-            certificateAuthorityData: {
-                required: false,
-                validator: { error: 'Certificate authority data is required', regex: /^(?!\s*$).+/ },
-            },
-            token:
-                isDefaultCluster() || id
-                    ? {}
-                    : {
-                          required: true,
-                          validator: { error: 'token is required', regex: /[^]+/ },
-                      },
-            endpoint: {
-                required: !!prometheusToggleEnabled,
-                validator: { error: 'endpoint is required', regex: /^.*$/ },
-            },
-        },
-        onValidation,
-    )
-
-    const history = useHistory()
     const newEnvs = useMemo(() => {
         return clusterId ? [{ id: null }].concat(environments || []) : environments || []
     }, [environments])
 
-    async function handleEdit(e) {
+    async function handleEdit() {
         try {
             const { result } = await getCluster(clusterId)
             setPrometheusAuth(result.prometheusAuth)
-            setConfig({ ...result.config, ...(clusterId != 1 ? { bearer_token: DEFAULT_SECRET_PLACEHOLDER } : null) })
             toggleEditMode((t) => !t)
         } catch (err) {
             showError(err)
         }
     }
 
-    const hideClusterDrawer = (e) => {
+    const hideClusterDrawer = () => {
         setShowWindow(false)
     }
 
-    async function onValidation() {
-        const payload = getClusterPayload()
-        const urlValue = state.url.value?.trim() ?? ''
-        if (urlValue.endsWith('/')) {
-            payload['server_url'] = urlValue.slice(0, -1)
-        } else {
-            payload['server_url'] = urlValue
-        }
-        const proxyUrlValue = state.proxyUrl.value?.trim() ?? ''
-        if (proxyUrlValue.endsWith('/')) {
-            payload.remoteConnectionConfig.proxyConfig['proxyUrl'] = proxyUrlValue.slice(0, -1)
-        }
-        if (state.authType.value === AuthenticationType.BASIC && prometheusToggleEnabled) {
-            const isValid = state.userName?.value && state.password?.value
-            if (!isValid) {
-                ToastManager.showToast({
-                    variant: ToastVariantType.error,
-                    description: 'Please add both username and password',
-                })
-            } else {
-                payload.prometheusAuth['userName'] = state.userName.value || ''
-                payload.prometheusAuth['password'] = state.password.value || ''
-            }
-        }
-    }
-
-    const getClusterPayload = () => {
-        return {
-            id,
-            cluster_name: state.cluster_name.value,
-            config: {
-                bearer_token:
-                    state.token.value && state.token.value !== DEFAULT_SECRET_PLACEHOLDER ? state.token.value : '',
-            },
-            active,
-            prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
-            prometheusAuth: {
-                userName: prometheusToggleEnabled ? state.userName.value : '',
-                password: prometheusToggleEnabled ? state.password.value : '',
-                tlsClientKey: prometheusToggleEnabled ? state.tlsClientKey.value : '',
-                tlsClientCert: prometheusToggleEnabled ? state.tlsClientCert.value : '',
-            },
-            remoteConnectionConfig: getRemoteConnectionConfig(state),
-            insecureSkipTlsVerify: !isTlsConnection,
-        }
-    }
-
-    const envName: string = getEnvName(defaultClusterComponent, agentInstallationStage)
-
     const renderNoEnvironmentTab = () => {
         return (
             <div className="br-4 dashed dc__border flex bg__secondary pb-16 pt-16 m-16 fs-12 fw-4">
@@ -586,9 +363,6 @@ const Cluster = ({
         if (!clusterId) {
             toggleEditMode((t) => !t)
         }
-        if (isTlsConnection === insecureSkipTlsVerify) {
-            toggleCheckTlsConnection()
-        }
     }
 
     const clusterIcon = () => {
@@ -635,9 +409,14 @@ const Cluster = ({
                     clusterId ? 'cluster-list--update' : 'cluster-list--create collapsed-list'
                 }`}
             >
-                <List internalRef={stickyElementRef} className={`dc__border dc__zi-1 ${getClassNameForStickyHeaderWithShadow(isHeaderStuck)} ${
-                    isHeaderStuck ? 'dc__no-border-radius' : ''
-                }`} key={clusterId} onClick={editModeToggle}>
+                <List
+                    internalRef={stickyElementRef}
+                    className={`dc__border dc__zi-1 ${getClassNameForStickyHeaderWithShadow(isHeaderStuck)} ${
+                        isHeaderStuck ? 'dc__no-border-radius' : ''
+                    }`}
+                    key={clusterId}
+                    onClick={editModeToggle}
+                >
                     {!clusterId && (
                         <List.Logo>
                             <Add className="icon-dim-24 fcb-5 dc__vertical-align-middle" />
@@ -774,42 +553,40 @@ const Cluster = ({
                 ) : (
                     clusterId && renderNoEnvironmentTab()
                 )}
-                {editMode && (
-                    <Drawer position="right" width="1000px" onEscape={handleToggleEditMode}>
-                        <div className="h-100 bg__primary" ref={drawerRef}>
-                            <ClusterForm
-                                {...getSSHConfig(sshTunnelConfig)}
-                                id={clusterId}
-                                cluster_name={cluster_name}
-                                server_url={server_url}
-                                active
-                                config={{}}
-                                reload={reload}
-                                prometheus_url={prometheus_url}
-                                prometheusAuth={prometheusAuth}
-                                defaultClusterComponent={state.defaultClusterComponent}
-                                isTlsConnection={isTlsConnection}
-                                isClusterDetails={state.isClusterDetails}
-                                proxyUrl={proxyUrl}
-                                isConnectedViaProxy={!!proxyUrl}
-                                isConnectedViaSSHTunnel={toConnectWithSSHTunnel}
-                                toggleCheckTlsConnection={toggleCheckTlsConnection}
-                                setTlsConnectionFalse={setTlsConnectionFalse}
-                                toggleKubeConfigFile
-                                isKubeConfigFile={state.isKubeConfigFile}
-                                toggleEditMode={toggleEditMode}
-                                toggleClusterDetails
-                                isVirtualCluster={isVirtualCluster}
-                                isProd={isProd}
-                            />
-                        </div>
-                    </Drawer>
-                )}
+                {editMode &&
+                    (!isVirtualCluster ? (
+                        <Drawer position="right" width="1000px" onEscape={handleToggleEditMode}>
+                            <div className="h-100 bg__primary" ref={drawerRef}>
+                                <ClusterForm
+                                    {...getSSHConfig(sshTunnelConfig)}
+                                    id={clusterId}
+                                    clusterName={cluster_name}
+                                    serverUrl={server_url}
+                                    reload={reload}
+                                    prometheusUrl={prometheus_url}
+                                    prometheusAuth={prometheusAuth}
+                                    proxyUrl={proxyUrl}
+                                    isConnectedViaSSHTunnel={toConnectWithSSHTunnel}
+                                    toggleEditMode={toggleEditMode}
+                                    isProd={isProd}
+                                    isTlsConnection={!insecureSkipTlsVerify}
+                                />
+                            </div>
+                        </Drawer>
+                    ) : (
+                        <VirtualClusterForm
+                            id={clusterId}
+                            clusterName={cluster_name}
+                            handleModalClose={handleModalClose}
+                            reload={reload}
+                        />
+                    ))}
             </article>
+
             {showWindow && (
                 <ClusterEnvironmentDrawer
                     reload={reload}
-                    cluster_name={cluster_name}
+                    clusterName={cluster_name}
                     {...environment}
                     hideClusterDrawer={hideClusterDrawer}
                     isVirtual={isVirtualCluster}
diff --git a/src/components/cluster/ClusterForm.tsx b/src/components/cluster/ClusterForm.tsx
index ba5a9cae3c..36377a90fb 100644
--- a/src/components/cluster/ClusterForm.tsx
+++ b/src/components/cluster/ClusterForm.tsx
@@ -14,142 +14,136 @@
  * limitations under the License.
  */
 
-import { useState, useRef, useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import TippyHeadless from '@tippyjs/react/headless'
+import YAML from 'yaml'
+
 import {
-    showError,
-    Progressing,
-    CHECKBOX_VALUE,
+    Button,
+    ButtonComponentType,
+    ButtonStyleType,
+    ButtonVariantType,
     Checkbox,
-    RadioGroupItem,
-    RadioGroup,
-    InfoColourBar,
-    Toggle,
-    GenericEmptyState,
-    useAsync,
+    CHECKBOX_VALUE,
+    CodeEditor,
+    ComponentSizeType,
     CustomInput,
-    noop,
     DEFAULT_SECRET_PLACEHOLDER,
     GenericFilterEmptyState,
-    CodeEditor,
-    ToastManager,
-    ToastVariantType,
-    ButtonStyleType,
-    ButtonVariantType,
-    Button,
-    ERROR_STATUS_CODE,
-    DeleteConfirmationModal,
-    DC_DELETE_SUBTITLES,
-    Textarea,
     Icon,
+    InfoColourBar,
+    NewClusterFormProps,
+    noop,
     PasswordField,
+    RadioGroup,
+    RadioGroupItem,
+    showError,
+    Textarea,
+    ToastManager,
+    ToastVariantType,
+    Toggle,
+    useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
-import YAML from 'yaml'
-import TippyHeadless from '@tippyjs/react/headless'
-import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
-import { ReactComponent as ErrorIcon } from '@Icons/ic-warning-y6.svg'
-import { useForm, importComponentFromFELibrary } from '../common'
-import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
-import { saveCluster, updateCluster, deleteCluster, validateCluster, saveClusters } from './cluster.service'
-import { ReactComponent as Close } from '@Icons/ic-close.svg'
+
 import { ReactComponent as Warning } from '@Icons/ic-alert-triangle.svg'
-import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as ForwardArrow } from '@Icons/ic-arrow-right.svg'
 import { ReactComponent as Trash } from '@Icons/ic-delete-interactive.svg'
+import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
+import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
+import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
+import { ReactComponent as ErrorIcon } from '@Icons/ic-warning-y6.svg'
+import { ReactComponent as InfoIcon } from '@Icons/info-filled.svg'
+import { UPLOAD_STATE } from '@Pages/GlobalConfigurations/DeploymentCharts/types'
 
-import { ReactComponent as MechanicalOperation } from '../../assets/img/ic-mechanical-operation.svg'
+import { AppCreationType, CLUSTER_COMMAND, MODES, ModuleNameMap } from '../../config'
+import { clusterId } from '../ClusterNodes/__mocks__/clusterAbout.mock'
+import { importComponentFromFELibrary, useForm } from '../common'
+import { RemoteConnectionType } from '../dockerRegistry/dockerType'
+import { getModuleInfo } from '../v2/devtronStackManager/DevtronStackManager.service'
+import { ModuleStatus } from '../v2/devtronStackManager/DevtronStackManager.type'
+import { saveCluster, saveClusters, updateCluster, validateCluster } from './cluster.service'
 import {
     AuthenticationType,
+    ClusterFormProps,
     DataListType,
-    UserDetails,
-    SaveClusterPayloadType,
     DEFAULT_CLUSTER_ID,
-    SSHAuthenticationType,
     RemoteConnectionTypeCluster,
-    ClusterFormProps,
+    SaveClusterPayloadType,
+    SSHAuthenticationType,
+    UserDetails,
 } from './cluster.type'
-
-import { CLUSTER_COMMAND, AppCreationType, MODES, ModuleNameMap } from '../../config'
-import { DeleteComponentsName, EMPTY_STATE_STATUS } from '../../config/constantMessaging'
-import { ReactComponent as ICHelpOutline } from '@Icons/ic-help-outline.svg'
-import { ReactComponent as InfoIcon } from '@Icons/info-filled.svg'
-import ClusterInfoStepsModal from './ClusterInfoStepsModal'
-import { UPLOAD_STATE } from '@Pages/GlobalConfigurations/DeploymentCharts/types'
-import UserNameDropDownList from './UseNameListDropdown'
-import { clusterId } from '../ClusterNodes/__mocks__/clusterAbout.mock'
-import { getModuleInfo } from '../v2/devtronStackManager/DevtronStackManager.service'
-import { RemoteConnectionType } from '../dockerRegistry/dockerType'
 import { getServerURLFromLocalStorage } from './cluster.util'
+import ClusterInfoStepsModal from './ClusterInfoStepsModal'
 import { ADD_CLUSTER_FORM_LOCAL_STORAGE_KEY } from './constants'
+import DeleteClusterConfirmationModal from './DeleteClusterConfirmationModal'
+import UserNameDropDownList from './UseNameListDropdown'
 
-const VirtualClusterSelectionTab = importComponentFromFELibrary('VirtualClusterSelectionTab')
 const RemoteConnectionRadio = importComponentFromFELibrary('RemoteConnectionRadio')
 const getRemoteConnectionConfig = importComponentFromFELibrary('getRemoteConnectionConfig', noop, 'function')
 
-const PrometheusWarningInfo = () => {
-    return (
-        <div className="pt-10 pb-10 pl-16 pr-16 bcy-1 br-4 bw-1 dc__cluster-error mb-40">
-            <div className="flex left dc__align-start">
-                <Warning className="icon-dim-20 fcr-7" />
-                <div className="ml-8 fs-13">
-                    <span className="fw-6 dc__capitalize">Warning: </span>Prometheus configuration will be removed and
-                    you won’t be able to see metrics for applications deployed in this cluster.
-                </div>
+const PrometheusWarningInfo = () => (
+    <div className="pt-10 pb-10 pl-16 pr-16 bcy-1 br-4 bw-1 dc__cluster-error mb-40">
+        <div className="flex left dc__align-start">
+            <Warning className="icon-dim-20 fcr-7" />
+            <div className="ml-8 fs-13">
+                <span className="fw-6 dc__capitalize">Warning: </span>Prometheus configuration will be removed and you
+                won’t be able to see metrics for applications deployed in this cluster.
             </div>
         </div>
-    )
-}
-
-const PrometheusRequiredFieldInfo = () => {
-    return (
-        <div className="pt-10 pb-10 pl-16 pr-16 bcr-1 br-4 bw-1 er-2 mb-16">
-            <div className="flex left dc__align-start">
-                <Error className="icon-dim-20" />
-                <div className="ml-8 fs-13">
-                    Fill all the required fields OR turn off the above switch to skip configuring prometheus.
-                </div>
+    </div>
+)
+
+const PrometheusRequiredFieldInfo = () => (
+    <div className="pt-10 pb-10 pl-16 pr-16 bcr-1 br-4 bw-1 er-2 mb-16">
+        <div className="flex left dc__align-start">
+            <Error className="icon-dim-20" />
+            <div className="ml-8 fs-13">
+                Fill all the required fields OR turn off the above switch to skip configuring prometheus.
             </div>
         </div>
-    )
-}
+    </div>
+)
 
-export default function ClusterForm({
+const ClusterForm = ({
     id = null,
-    cluster_name,
-    server_url,
-    active,
-    config,
+    clusterName,
+    serverUrl,
     toggleEditMode = noop,
-    reload,
-    prometheus_url,
+    reload = noop,
+    prometheusUrl = '',
     prometheusAuth,
-    defaultClusterComponent,
-    proxyUrl,
-    sshUsername,
-    sshPassword,
-    sshAuthKey,
-    sshServerAddress,
-    isConnectedViaProxy,
-    isConnectedViaSSHTunnel,
-    isTlsConnection,
-    toggleCheckTlsConnection,
-    setTlsConnectionFalse,
+    proxyUrl = '',
+    sshUsername = '',
+    sshPassword = '',
+    sshAuthKey = '',
+    sshServerAddress = '',
+    isConnectedViaSSHTunnel = false,
     handleCloseCreateClusterForm = noop,
-    toggleKubeConfigFile,
-    isKubeConfigFile,
-    isClusterDetails,
-    toggleClusterDetails,
-    isVirtualCluster,
     isProd = false,
-}: ClusterFormProps) {
-    const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheus_url)
+    FooterComponent,
+    handleModalClose = noop,
+    isTlsConnection: initialIsTlsConnection = false,
+}: ClusterFormProps & Partial<NewClusterFormProps>) => {
+    const [prometheusToggleEnabled, setPrometheusToggleEnabled] = useState(!!prometheusUrl)
     const [prometheusAuthenticationType, setPrometheusAuthenticationType] = useState({
         type: prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS,
     })
+    const [isTlsConnection, setIsTlsConnection] = useState(initialIsTlsConnection)
+    const [isKubeConfigFile, toggleKubeConfigFile] = useState(false)
+    const [isClusterDetails, toggleClusterDetails] = useState(false)
     const authenTicationType = prometheusAuth?.userName ? AuthenticationType.BASIC : AuthenticationType.ANONYMOUS
 
-    const isDefaultCluster = (): boolean => {
-        return id == 1
+    const isConnectedViaProxy = !!proxyUrl
+
+    const toggleCheckTlsConnection = () => {
+        setIsTlsConnection((prev) => !prev)
+    }
+
+    const setTlsConnectionFalse = () => {
+        setIsTlsConnection(false)
     }
+
+    const isDefaultCluster = id === 1
     const [confirmation, setConfirmation] = useState(false)
     const inputFileRef = useRef(null)
     const [uploadState, setUploadState] = useState<string>(UPLOAD_STATE.UPLOAD)
@@ -164,8 +158,6 @@ export default function ClusterForm({
     const [selectedUserNameOptions, setSelectedUserNameOptions] = useState<Record<string, any>>({})
     const [isClusterSelected, setClusterSeleceted] = useState<Record<string, boolean>>({})
     const [selectAll, setSelectAll] = useState<boolean>(false)
-    const [getClusterVar, setGetClusterState] = useState<boolean>(false)
-    const [isVirtual, setIsVirtual] = useState(isVirtualCluster)
     const [isConnectedViaProxyTemp, setIsConnectedViaProxyTemp] = useState(isConnectedViaProxy)
     const [isConnectedViaSSHTunnelTemp, setIsConnectedViaSSHTunnelTemp] = useState(isConnectedViaSSHTunnel)
 
@@ -184,151 +176,42 @@ export default function ClusterForm({
         !window._env_.K8S_CLIENT,
     )
 
-    const _remoteConnectionMethod = isConnectedViaProxyTemp
-        ? RemoteConnectionType.Proxy
-        : isConnectedViaSSHTunnelTemp
-          ? RemoteConnectionType.SSHTunnel
-          : RemoteConnectionType.Direct
-    const [remoteConnectionMethod, setRemoteConnectionMethod] = useState(_remoteConnectionMethod)
-    const initialSSHAuthenticationType =
-        sshPassword && sshAuthKey
-            ? SSHAuthenticationType.Password_And_SSH_Private_Key
-            : sshAuthKey
-              ? SSHAuthenticationType.SSH_Private_Key
-              : SSHAuthenticationType.Password
-    const [SSHConnectionType, setSSHConnectionType] = useState(initialSSHAuthenticationType)
+    const getRemoteConnectionConfigType = () => {
+        if (isConnectedViaProxyTemp) {
+            return RemoteConnectionType.Proxy
+        }
 
-    const { state, handleOnChange, handleOnSubmit } = useForm(
-        {
-            cluster_name: { value: cluster_name, error: '' },
-            url: { value: !id ? getServerURLFromLocalStorage(server_url) : server_url, error: '' },
-            userName: { value: prometheusAuth?.userName, error: '' },
-            password: { value: prometheusAuth?.password, error: '' },
-            prometheusTlsClientKey: { value: prometheusAuth?.tlsClientKey, error: '' },
-            prometheusTlsClientCert: { value: prometheusAuth?.tlsClientCert, error: '' },
-            proxyUrl: { value: proxyUrl, error: '' },
-            sshUsername: { value: sshUsername, error: '' },
-            sshPassword: { value: sshPassword, error: '' },
-            sshAuthKey: { value: sshAuthKey, error: '' },
-            sshServerAddress: { value: sshServerAddress, error: '' },
-            tlsClientKey: { value: config?.tls_key, error: '' },
-            tlsClientCert: { value: config?.cert_data, error: '' },
-            certificateAuthorityData: { value: config?.cert_auth_data, error: '' },
-            token: { value: config?.bearer_token ? config.bearer_token : '', error: '' },
-            endpoint: { value: prometheus_url || '', error: '' },
-            authType: { value: authenTicationType, error: '' },
-            isProd: { value: isProd.toString(), error: '' },
-        },
-        {
-            cluster_name: {
-                required: true,
-                validators: [
-                    { error: 'Name is required', regex: /^.*$/ },
-                    { error: "Use only lowercase alphanumeric characters, '-', '_' or '.'", regex: /^[a-z0-9-\.\_]+$/ },
-                    { error: "Cannot start/end with '-', '_' or '.'", regex: /^(?![-._]).*[^-._]$/ },
-                    { error: 'Minimum 3 and Maximum 63 characters required', regex: /^.{3,63}$/ },
-                ],
-            },
-            url: {
-                required: true,
-                validator: { error: 'URL is required', regex: /^.*$/ },
-            },
-            authType: {
-                required: false,
-                validator: { error: 'Authentication Type is required', regex: /^(?!\s*$).+/ },
-            },
-            userName: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
-                validator: { error: 'username is required', regex: /^(?!\s*$).+/ },
-            },
-            password: {
-                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
-                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
-            },
-            prometheusTlsClientKey: {
-                required: false,
-            },
-            prometheusTlsClientCert: {
-                required: false,
-            },
-            proxyUrl: {
-                required: RemoteConnectionRadio && proxyUrl,
-                validator: {
-                    error: 'Please provide a valid URL. URL must start with http:// or https://',
-                    regex: /^(http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
-                },
-            },
-            sshUsername: {
-                required: RemoteConnectionRadio && remoteConnectionMethod === RemoteConnectionType.SSHTunnel,
-                validator: {
-                    error: 'Username or User Identifier is required. Username cannot contain spaces or special characters other than _ and -',
-                    regex: /^[A-Za-z0-9_-]+$/,
-                },
-            },
-            sshPassword: {
-                required:
-                    RemoteConnectionRadio &&
-                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel &&
-                    (SSHConnectionType === SSHAuthenticationType.Password ||
-                        SSHConnectionType === SSHAuthenticationType.Password_And_SSH_Private_Key),
-                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
-            },
-            sshAuthKey: {
-                required:
-                    RemoteConnectionRadio &&
-                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel &&
-                    (SSHConnectionType === SSHAuthenticationType.SSH_Private_Key ||
-                        SSHConnectionType === SSHAuthenticationType.Password_And_SSH_Private_Key),
-                validator: { error: 'private key is required', regex: /^(?!\s*$).+/ },
-            },
-            sshServerAddress: {
-                required: RemoteConnectionRadio && remoteConnectionMethod === RemoteConnectionType.SSHTunnel,
-                validator:
-                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel
-                        ? {
-                              error: 'Please provide a valid URL. URL must start with http:// or https://',
-                              regex: /^(http(s)?:\/\/)[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
-                          }
-                        : { error: '', regex: /^(?!\s*$).+/ },
-            },
-            tlsClientKey: {
-                required: id ? false : isTlsConnection,
-            },
-            tlsClientCert: {
-                required: id ? false : isTlsConnection,
-            },
-            certificateAuthorityData: {
-                required: id ? false : isTlsConnection,
-            },
-            token:
-                isDefaultCluster() || id
-                    ? {}
-                    : {
-                          required: true,
-                          validator: { error: 'token is required', regex: /[^]+/ },
-                      },
-            endpoint: {
-                required: !!prometheusToggleEnabled,
-                validator: { error: 'endpoint is required', regex: /^.*$/ },
-            },
-        },
-        onValidation,
-    )
+        if (isConnectedViaSSHTunnelTemp) {
+            return RemoteConnectionType.SSHTunnel
+        }
 
-    const isGrafanaModuleInstalled = grafanaModuleStatus?.result?.status === ModuleStatus.INSTALLED
+        return RemoteConnectionType.Direct
+    }
+
+    const resolveSSHAuthType = () => {
+        if (sshPassword && sshAuthKey) {
+            return SSHAuthenticationType.Password_And_SSH_Private_Key
+        }
+
+        if (sshAuthKey) {
+            return SSHAuthenticationType.SSH_Private_Key
+        }
 
-    const toggleGetCluster = () => {
-        setGetClusterState(!getClusterVar)
+        return SSHAuthenticationType.Password
     }
 
+    const [remoteConnectionMethod, setRemoteConnectionMethod] = useState(getRemoteConnectionConfigType)
+    const [SSHConnectionType, setSSHConnectionType] = useState(resolveSSHAuthType)
+
+    const isGrafanaModuleInstalled = grafanaModuleStatus?.result?.status === ModuleStatus.INSTALLED
+
     const handleEditConfigClick = () => {
-        toggleGetCluster()
-        toggleKubeConfigFile(true)
+        setDataList([])
     }
 
     const getSaveClusterPayload = (dataLists: DataListType[]) => {
         const saveClusterPayload: SaveClusterPayloadType[] = []
-        for (const _dataList of dataLists) {
+        dataLists.forEach((_dataList) => {
             if (isClusterSelected[_dataList.cluster_name]) {
                 const _clusterDetails: SaveClusterPayloadType = {
                     id: _dataList.id,
@@ -348,34 +231,34 @@ export default function ClusterForm({
                 }
                 saveClusterPayload.push(_clusterDetails)
             }
-        }
+        })
 
         return saveClusterPayload
     }
 
-    async function saveClustersDetails() {
+    const saveClustersDetails = async () => {
         try {
             const payload = getSaveClusterPayload(dataList)
             await saveClusters(payload).then((response) => {
-                const _clusterList = response.result.map((_clusterSaveDetails, index) => {
+                const _clusterList = response.result.map((_clusterSaveDetails) => {
                     let status
                     let message
                     if (
-                        _clusterSaveDetails['errorInConnecting'].length === 0 &&
-                        _clusterSaveDetails['clusterUpdated'] === false
+                        _clusterSaveDetails.errorInConnecting.length === 0 &&
+                        _clusterSaveDetails.clusterUpdated === false
                     ) {
                         status = 'Added'
                         message = 'Cluster Added'
-                    } else if (_clusterSaveDetails['clusterUpdated'] === true) {
+                    } else if (_clusterSaveDetails.clusterUpdated === true) {
                         status = 'Updated'
                         message = 'Cluster Updated'
                     } else {
                         status = 'Failed'
-                        message = _clusterSaveDetails['errorInConnecting']
+                        message = _clusterSaveDetails.errorInConnecting
                     }
 
                     return {
-                        clusterName: _clusterSaveDetails['cluster_name'],
+                        clusterName: _clusterSaveDetails.cluster_name,
                         status,
                         message,
                     }
@@ -389,59 +272,61 @@ export default function ClusterForm({
         }
     }
 
-    function YAMLtoJSON(saveYamlData) {
+    const YAMLtoJSON = (yamlString: string) => {
         try {
-            const obj = YAML.parse(saveYamlData)
+            const obj = YAML.parse(yamlString)
             const jsonStr = JSON.stringify(obj)
             return jsonStr
-        } catch (error) {}
+        } catch {
+            noop()
+            return ''
+        }
     }
 
-    function isCheckboxDisabled() {
+    const isCheckboxDisabled = () => {
         const clusters = Object.values(selectedUserNameOptions)
 
         if (clusters.length === 0) {
             return true
         }
 
-        return clusters.every((cluster) => {
-            return cluster.errorInConnecting !== 'cluster-already-exists' && cluster.errorInConnecting.length > 0
-        })
+        return clusters.every(
+            (cluster) => cluster.errorInConnecting !== 'cluster-already-exists' && cluster.errorInConnecting.length > 0,
+        )
     }
 
-    async function validateClusterDetail() {
+    const validateClusterDetail = async () => {
         try {
             const payload = { config: YAMLtoJSON(saveYamlData) }
             await validateCluster(payload).then((response) => {
                 const defaultUserNameSelections: Record<string, any> = {}
                 const _clusterSelections: Record<string, boolean> = {}
                 setDataList([
-                    ...Object.values(response.result).map((_cluster) => {
-                        const _userInfoList = [...Object.values(_cluster['userInfos'] as UserDetails[])]
-                        defaultUserNameSelections[_cluster['cluster_name']] = {
+                    ...Object.values<any>(response.result).map((_cluster) => {
+                        const _userInfoList = [...Object.values(_cluster.userInfos as UserDetails[])]
+                        defaultUserNameSelections[_cluster.cluster_name] = {
                             label: _userInfoList[0].userName,
                             value: _userInfoList[0].userName,
                             errorInConnecting: _userInfoList[0].errorInConnecting,
                             config: _userInfoList[0].config,
                         }
-                        _clusterSelections[_cluster['cluster_name']] = false
+                        _clusterSelections[_cluster.cluster_name] = false
 
                         return {
-                            cluster_name: _cluster['cluster_name'],
+                            cluster_name: _cluster.cluster_name,
                             userInfos: _userInfoList,
-                            server_url: _cluster['server_url'],
-                            active: _cluster['active'],
-                            defaultClusterComponent: _cluster['defaultClusterComponent'],
-                            insecureSkipTlsVerify: _cluster['insecureSkipTlsVerify'],
-                            id: _cluster['id'],
-                            remoteConnectionConfig: _cluster['remoteConnectionConfig'],
+                            server_url: _cluster.server_url,
+                            active: _cluster.active,
+                            defaultClusterComponent: _cluster.defaultClusterComponent,
+                            insecureSkipTlsVerify: _cluster.insecureSkipTlsVerify,
+                            id: _cluster.id,
+                            remoteConnectionConfig: _cluster.remoteConnectionConfig,
                         }
                     }),
                 ])
                 setSelectedUserNameOptions(defaultUserNameSelections)
                 setClusterSeleceted(_clusterSelections)
                 setLoadingState(false)
-                toggleGetCluster()
                 setValidationError(false)
             })
         } catch (err: any) {
@@ -464,47 +349,49 @@ export default function ClusterForm({
         }
     }
 
-    const getClusterPayload = () => {
-        return {
-            id,
-            insecureSkipTlsVerify: !isTlsConnection,
-            cluster_name: state.cluster_name.value,
-            config: {
-                bearer_token:
-                    state.token.value && state.token.value !== DEFAULT_SECRET_PLACEHOLDER
-                        ? state.token.value.trim()
-                        : '',
-                tls_key: state.tlsClientKey.value,
-                cert_data: state.tlsClientCert.value,
-                cert_auth_data: state.certificateAuthorityData.value,
-            },
-            isProd: state.isProd.value === 'true',
-            active,
-            remoteConnectionConfig: getRemoteConnectionConfig(state, remoteConnectionMethod, SSHConnectionType),
-            prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
-            prometheusAuth: {
-                userName:
-                    prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
-                        ? state.userName.value
-                        : '',
-                password:
-                    prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
-                        ? state.password.value
-                        : '',
-                tlsClientKey: prometheusToggleEnabled ? state.prometheusTlsClientKey.value : '',
-                tlsClientCert: prometheusToggleEnabled ? state.prometheusTlsClientCert.value : '',
-                isAnonymous: state.authType.value === AuthenticationType.ANONYMOUS,
-            },
-        }
+    const setRemoteConnectionFalse = () => {
+        setIsConnectedViaProxyTemp(false)
+        setIsConnectedViaSSHTunnelTemp(false)
     }
 
-    async function onValidation() {
-        const payload = getClusterPayload()
+    const getClusterPayload = (state) => ({
+        id,
+        insecureSkipTlsVerify: !isTlsConnection,
+        cluster_name: state.cluster_name.value,
+        config: {
+            bearer_token:
+                state.token.value && state.token.value !== DEFAULT_SECRET_PLACEHOLDER ? state.token.value.trim() : '',
+            tls_key: state.tlsClientKey.value,
+            cert_data: state.tlsClientCert.value,
+            cert_auth_data: state.certificateAuthorityData.value,
+        },
+        isProd: state.isProd.value === 'true',
+        active: true,
+        remoteConnectionConfig: getRemoteConnectionConfig(state, remoteConnectionMethod, SSHConnectionType),
+        prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
+        prometheusAuth: {
+            userName:
+                prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
+                    ? state.userName.value
+                    : '',
+            password:
+                prometheusToggleEnabled && state.authType.value === AuthenticationType.BASIC
+                    ? state.password.value
+                    : '',
+            tlsClientKey: prometheusToggleEnabled ? state.prometheusTlsClientKey.value : '',
+            tlsClientCert: prometheusToggleEnabled ? state.prometheusTlsClientCert.value : '',
+            isAnonymous: state.authType.value === AuthenticationType.ANONYMOUS,
+        },
+        server_url: '',
+    })
+
+    const onValidation = async (state) => {
+        const payload = getClusterPayload(state)
         const urlValue = state.url.value?.trim() ?? ''
         if (urlValue.endsWith('/')) {
-            payload['server_url'] = urlValue.slice(0, -1)
+            payload.server_url = urlValue.slice(0, -1)
         } else {
-            payload['server_url'] = urlValue
+            payload.server_url = urlValue
         }
         if (remoteConnectionMethod === RemoteConnectionType.Proxy) {
             let proxyUrlValue = state.proxyUrl?.value?.trim() ?? ''
@@ -525,16 +412,16 @@ export default function ClusterForm({
                 })
                 return
             }
-            payload.prometheusAuth['userName'] = state.userName.value || ''
-            payload.prometheusAuth['password'] = state.password.value || ''
-            payload.prometheusAuth['tlsClientKey'] = state.prometheusTlsClientKey.value || ''
-            payload.prometheusAuth['tlsClientCert'] = state.prometheusTlsClientCert.value || ''
+            payload.prometheusAuth.userName = state.userName.value || ''
+            payload.prometheusAuth.password = state.password.value || ''
+            payload.prometheusAuth.tlsClientKey = state.prometheusTlsClientKey.value || ''
+            payload.prometheusAuth.tlsClientCert = state.prometheusTlsClientCert.value || ''
         }
         if (isTlsConnection) {
             if (state.tlsClientKey.value || state.tlsClientCert.value || state.certificateAuthorityData.value) {
-                payload.config['tls_key'] = state.tlsClientKey.value || ''
-                payload.config['cert_data'] = state.tlsClientCert.value || ''
-                payload.config['cert_auth_data'] = state.certificateAuthorityData.value || ''
+                payload.config.tls_key = state.tlsClientKey.value || ''
+                payload.config.cert_data = state.tlsClientCert.value || ''
+                payload.config.cert_auth_data = state.certificateAuthorityData.value || ''
             }
         }
 
@@ -558,20 +445,138 @@ export default function ClusterForm({
         }
     }
 
+    const { state, handleOnChange, handleOnSubmit } = useForm(
+        {
+            cluster_name: { value: clusterName, error: '' },
+            url: { value: !id ? getServerURLFromLocalStorage(serverUrl) : serverUrl, error: '' },
+            userName: { value: prometheusAuth?.userName, error: '' },
+            password: { value: prometheusAuth?.password, error: '' },
+            prometheusTlsClientKey: { value: prometheusAuth?.tlsClientKey, error: '' },
+            prometheusTlsClientCert: { value: prometheusAuth?.tlsClientCert, error: '' },
+            proxyUrl: { value: proxyUrl, error: '' },
+            sshUsername: { value: sshUsername, error: '' },
+            sshPassword: { value: sshPassword, error: '' },
+            sshAuthKey: { value: sshAuthKey, error: '' },
+            sshServerAddress: { value: sshServerAddress, error: '' },
+            tlsClientKey: { value: undefined, error: '' },
+            tlsClientCert: { value: undefined, error: '' },
+            certificateAuthorityData: { value: undefined, error: '' },
+            token: { value: '', error: '' },
+            endpoint: { value: prometheusUrl || '', error: '' },
+            authType: { value: authenTicationType, error: '' },
+            isProd: { value: isProd.toString(), error: '' },
+        },
+        {
+            cluster_name: {
+                required: true,
+                validators: [
+                    { error: 'Name is required', regex: /^.*$/ },
+                    { error: "Use only lowercase alphanumeric characters, '-', '_' or '.'", regex: /^[a-z0-9-._]+$/ },
+                    { error: "Cannot start/end with '-', '_' or '.'", regex: /^(?![-._]).*[^-._]$/ },
+                    { error: 'Minimum 3 and Maximum 63 characters required', regex: /^.{3,63}$/ },
+                ],
+            },
+            url: {
+                required: true,
+                validator: { error: 'URL is required', regex: /^.*$/ },
+            },
+            authType: {
+                required: false,
+                validator: { error: 'Authentication Type is required', regex: /^(?!\s*$).+/ },
+            },
+            userName: {
+                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
+                validator: { error: 'username is required', regex: /^(?!\s*$).+/ },
+            },
+            password: {
+                required: !!(prometheusToggleEnabled && prometheusAuthenticationType.type === AuthenticationType.BASIC),
+                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
+            },
+            prometheusTlsClientKey: {
+                required: false,
+            },
+            prometheusTlsClientCert: {
+                required: false,
+            },
+            proxyUrl: {
+                required: RemoteConnectionRadio && proxyUrl,
+                validator: {
+                    error: 'Please provide a valid URL. URL must start with http:// or https://',
+                    regex: /^(http(s)?:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/,
+                },
+            },
+            sshUsername: {
+                required: RemoteConnectionRadio && remoteConnectionMethod === RemoteConnectionType.SSHTunnel,
+                validator: {
+                    error: 'Username or User Identifier is required. Username cannot contain spaces or special characters other than _ and -',
+                    regex: /^[A-Za-z0-9_-]+$/,
+                },
+            },
+            sshPassword: {
+                required:
+                    RemoteConnectionRadio &&
+                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel &&
+                    (SSHConnectionType === SSHAuthenticationType.Password ||
+                        SSHConnectionType === SSHAuthenticationType.Password_And_SSH_Private_Key),
+                validator: { error: 'password is required', regex: /^(?!\s*$).+/ },
+            },
+            sshAuthKey: {
+                required:
+                    RemoteConnectionRadio &&
+                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel &&
+                    (SSHConnectionType === SSHAuthenticationType.SSH_Private_Key ||
+                        SSHConnectionType === SSHAuthenticationType.Password_And_SSH_Private_Key),
+                validator: { error: 'private key is required', regex: /^(?!\s*$).+/ },
+            },
+            sshServerAddress: {
+                required: RemoteConnectionRadio && remoteConnectionMethod === RemoteConnectionType.SSHTunnel,
+                validator:
+                    remoteConnectionMethod === RemoteConnectionType.SSHTunnel
+                        ? {
+                              error: 'Please provide a valid URL. URL must start with http:// or https://',
+                              regex: /^(http(s)?:\/\/)[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/,
+                          }
+                        : { error: '', regex: /^(?!\s*$).+/ },
+            },
+            tlsClientKey: {
+                required: id ? false : isTlsConnection,
+            },
+            tlsClientCert: {
+                required: id ? false : isTlsConnection,
+            },
+            certificateAuthorityData: {
+                required: id ? false : isTlsConnection,
+            },
+            token:
+                isDefaultCluster || id
+                    ? {}
+                    : {
+                          required: true,
+                          validator: { error: 'token is required', regex: /[^]+/ },
+                      },
+            endpoint: {
+                required: !!prometheusToggleEnabled,
+                validator: { error: 'endpoint is required', regex: /^.*$/ },
+            },
+        },
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        onValidation,
+    )
+
     const setPrometheusToggle = () => {
         setPrometheusToggleEnabled(!prometheusToggleEnabled)
     }
 
     const OnPrometheusAuthTypeChange = (e) => {
         handleOnChange(e)
-        if (state.authType.value == AuthenticationType.BASIC) {
+        if (state.authType.value === AuthenticationType.BASIC) {
             setPrometheusAuthenticationType({ type: AuthenticationType.ANONYMOUS })
         } else {
             setPrometheusAuthenticationType({ type: AuthenticationType.BASIC })
         }
     }
 
-    const ClusterInfoComponent = () => {
+    const renderClusterInfo = () => {
         const k8sClusters = Object.values(CLUSTER_COMMAND)
         return (
             <>
@@ -601,18 +606,16 @@ export default function ClusterForm({
         )
     }
 
-    const clusterLabel = () => {
-        return (
-            <div className="flex left ">
-                Server URL & Bearer token{isDefaultCluster() ? '' : '*'}
-                <span className="icon-dim-16 fcn-9 mr-4 ml-16">
-                    <ICHelpOutline className="icon-dim-16" />
-                </span>
-                <span>How to find for </span>
-                <ClusterInfoComponent />
-            </div>
-        )
-    }
+    const clusterLabel = () => (
+        <div className="flex left ">
+            Server URL & Bearer token{isDefaultCluster ? '' : '*'}
+            <span className="icon-dim-16 fcn-9 mr-4 ml-16">
+                <ICHelpOutline className="icon-dim-16" />
+            </span>
+            <span>How to find for </span>
+            {renderClusterInfo()}
+        </div>
+    )
 
     const onFileChange = (e): void => {
         setUploadState(UPLOAD_STATE.UPLOADING)
@@ -621,7 +624,9 @@ export default function ClusterForm({
         reader.onload = () => {
             try {
                 setSaveYamlData(reader.result.toString())
-            } catch (e) {}
+            } catch {
+                noop()
+            }
         }
         reader.readAsText(file)
         setUploadState(UPLOAD_STATE.SUCCESS)
@@ -641,9 +646,6 @@ export default function ClusterForm({
         if (isKubeConfigFile) {
             toggleKubeConfigFile(!isKubeConfigFile)
         }
-        if (getClusterVar) {
-            toggleGetCluster()
-        }
         if (isClusterDetails) {
             toggleClusterDetails(!isClusterDetails)
         }
@@ -671,11 +673,34 @@ export default function ClusterForm({
         setSSHConnectionType(authType)
     }
 
-    const setRemoteConnectionFalse = () => {
-        setIsConnectedViaProxyTemp(false)
-        setIsConnectedViaSSHTunnelTemp(false)
+    const clusterTitle = () => {
+        if (!id) {
+            return 'Add Cluster'
+        }
+        return 'Edit Cluster'
     }
 
+    const renderHeader = () => (
+        <div className="flex flex-align-center dc__border-bottom flex-justify bg__primary py-12 px-20">
+            <h2 data-testid="add_cluster_header" className="fs-16 fw-6 lh-1-43 m-0 title-padding">
+                <span className="fw-6 fs-16 cn-9">{clusterTitle()}</span>
+            </h2>
+
+            <Button
+                icon={<Icon name="ic-close-large" color={null} />}
+                dataTestId="header_close_icon"
+                component={ButtonComponentType.button}
+                style={ButtonStyleType.negativeGrey}
+                size={ComponentSizeType.xs}
+                variant={ButtonVariantType.borderLess}
+                ariaLabel="Close edit cluster drawer"
+                disabled={loader}
+                onClick={handleCloseButton}
+                showAriaLabelInTippy={false}
+            />
+        </div>
+    )
+
     const renderUrlAndBearerToken = () => {
         let proxyConfig
         let sshConfig
@@ -701,13 +726,29 @@ export default function ClusterForm({
             }
         }
         const passedRemoteConnectionMethod = { value: remoteConnectionMethod, error: '' }
+
+        const getTokenText = () => {
+            if (!id) {
+                return state.token.value
+            }
+
+            return id === DEFAULT_CLUSTER_ID ? '' : DEFAULT_SECRET_PLACEHOLDER
+        }
+
+        const getGrafanaModuleSectionClassName = () => {
+            if (prometheusToggleEnabled) {
+                return 'mb-20'
+            }
+            return prometheusUrl ? 'mb-20' : 'mb-40'
+        }
+
         return (
             <>
                 <div className="form__row">
                     <CustomInput
                         required
                         name="cluster_name"
-                        disabled={isDefaultCluster()}
+                        disabled={isDefaultCluster}
                         value={state.cluster_name.value}
                         error={state.cluster_name.error}
                         onChange={handleOnChange}
@@ -722,7 +763,7 @@ export default function ClusterForm({
                         error={state.url.error}
                         onChange={handleOnChange}
                         label={clusterLabel()}
-                        disabled={isDefaultCluster()}
+                        disabled={isDefaultCluster}
                         placeholder="Enter server URL"
                     />
                 </div>
@@ -730,15 +771,7 @@ export default function ClusterForm({
                     {id !== DEFAULT_CLUSTER_ID && (
                         <Textarea
                             name="token"
-                            value={
-                                id
-                                    ? id !== 1
-                                        ? DEFAULT_SECRET_PLACEHOLDER
-                                        : config?.bearer_token
-                                          ? config.bearer_token
-                                          : ''
-                                    : state.token.value
-                            }
+                            value={getTokenText()}
                             onChange={handleOnChange}
                             onBlur={handleOnBlur}
                             onFocus={handleOnFocus}
@@ -852,7 +885,7 @@ export default function ClusterForm({
                     </>
                 )}
                 {isGrafanaModuleInstalled && (
-                    <div className={`${prometheusToggleEnabled ? 'mb-20' : prometheus_url ? 'mb-20' : 'mb-40'} mt-20`}>
+                    <div className={`${getGrafanaModuleSectionClassName()} mt-20`}>
                         <div className="dc__content-space flex">
                             <span className="form__input-header">See metrics for applications in this cluster</span>
                             <div className="w-32 h-20">
@@ -865,7 +898,7 @@ export default function ClusterForm({
                         </span>
                     </div>
                 )}
-                {isGrafanaModuleInstalled && !prometheusToggleEnabled && prometheus_url && <PrometheusWarningInfo />}
+                {isGrafanaModuleInstalled && !prometheusToggleEnabled && prometheusUrl && <PrometheusWarningInfo />}
                 {isGrafanaModuleInstalled && prometheusToggleEnabled && (
                     <div className="">
                         {(state.userName.error || state.password.error || state.endpoint.error) && (
@@ -951,136 +984,72 @@ export default function ClusterForm({
         setSaveYamlData(val)
     }
 
-    const codeEditor = () => {
-        return (
-            <CodeEditor.Container flexExpand overflowHidden>
-                <CodeEditor
-                    diffView={false}
-                    mode={MODES.YAML}
-                    codeEditorProps={{
-                        value: saveYamlData,
-                        onChange: onChangeEditorValue,
-                        height: '0',
-                    }}
-                    codeMirrorProps={{
-                        value: saveYamlData,
-                        onChange: onChangeEditorValue,
-                        height: 'fitToParent',
-                    }}
-                >
-                    <CodeEditor.Header>
-                        <div className="user-list__subtitle flex fs-13 lh-20 w-100">
-                            <span className="flex left">Paste the contents of kubeconfig file here</span>
-                            <div className="dc__link ml-auto cursor">
-                                {uploadState !== UPLOAD_STATE.UPLOADING && (
-                                    <div
-                                        data-testid="browse_file_to_upload"
-                                        onClick={handleBrowseFileClick}
-                                        className="flex fw-6"
-                                    >
-                                        Browse file...
-                                    </div>
-                                )}
-                            </div>
-                            <input
-                                type="file"
-                                ref={inputFileRef}
-                                onChange={onFileChange}
-                                accept=".yaml"
-                                style={{ display: 'none' }}
-                                data-testid="select_code_editor"
-                            />
-                        </div>
-                    </CodeEditor.Header>
-                    {hasValidationError && <CodeEditor.ErrorBar text={errorText} />}
-                </CodeEditor>
-            </CodeEditor.Container>
-        )
-    }
-
-    const LoadingCluster = (): JSX.Element => {
-        return (
-            <div className="cluster-form dc__position-rel h-100 bg__primary flexbox-col">
-                <div className="flex flex-align-center dc__border-bottom flex-justify bg__primary pb-12 pt-12 pl-20 pr-20">
-                    <h2 className="fs-16 fw-6 lh-1-43 m-0 title-padding">Add Cluster</h2>
-                    <button type="button" className="dc__transparent flex icon-dim-24 " onClick={handleCloseButton}>
-                        <Close className="icon-dim-24" />
-                    </button>
-                </div>
-                <div className="dc__position-rel flex-grow-1">
-                    <GenericEmptyState
-                        SvgImage={MechanicalOperation}
-                        title={EMPTY_STATE_STATUS.LOADING_CLUSTER.TITLE}
-                        subTitle={EMPTY_STATE_STATUS.LOADING_CLUSTER.SUBTITLE}
-                    />
-                </div>
-                <div className="w-100 dc__border-top flex right py-12 px-20 dc__no-shrink">
-                    <button className="cta cancel h-36 lh-36" type="button" onClick={handleCloseButton} disabled>
-                        Cancel
-                    </button>
-                    <button className="cta ml-12 h-36 lh-36" disabled>
-                        <Progressing />
-                    </button>
-                </div>
-            </div>
-        )
-    }
-
-    const NoMatchingResults = (): JSX.Element => {
-        return <GenericFilterEmptyState />
-    }
-
-    if (loader) {
-        return <LoadingCluster />
-    }
-
-    const clusterTitle = () => {
-        if (!id) {
-            return 'Add Cluster'
-        }
-        return 'Edit Cluster'
-    }
-
-    const AddClusterHeader = () => (
-        <div className="flex flex-align-center dc__border-bottom flex-justify bg__primary py-12 px-20">
-            <h2 data-testid="add_cluster_header" className="fs-16 fw-6 lh-1-43 m-0 title-padding">
-                <span className="fw-6 fs-16 cn-9">{clusterTitle()}</span>
-            </h2>
-            <button
-                data-testid="header_close_icon"
-                type="button"
-                className="dc__transparent flex icon-dim-24"
-                onClick={handleCloseButton}
+    const codeEditor = () => (
+        <CodeEditor.Container flexExpand overflowHidden>
+            <CodeEditor
+                diffView={false}
+                mode={MODES.YAML}
+                codeEditorProps={{
+                    value: saveYamlData,
+                    onChange: onChangeEditorValue,
+                    height: '0',
+                }}
+                codeMirrorProps={{
+                    value: saveYamlData,
+                    onChange: onChangeEditorValue,
+                    height: 'fitToParent',
+                }}
             >
-                <Close className="icon-dim-24" />
-            </button>
-        </div>
+                <CodeEditor.Header>
+                    <div className="user-list__subtitle flex fs-13 lh-20 w-100">
+                        <span className="flex left">Paste the contents of kubeconfig file here</span>
+                        <div className="dc__link ml-auto cursor">
+                            {uploadState !== UPLOAD_STATE.UPLOADING && (
+                                <div
+                                    data-testid="browse_file_to_upload"
+                                    onClick={handleBrowseFileClick}
+                                    className="flex fw-6"
+                                >
+                                    Browse file...
+                                </div>
+                            )}
+                        </div>
+                        <input
+                            type="file"
+                            ref={inputFileRef}
+                            onChange={onFileChange}
+                            accept="text/plain application/yaml"
+                            style={{ display: 'none' }}
+                            data-testid="select_code_editor"
+                        />
+                    </div>
+                </CodeEditor.Header>
+                {hasValidationError && <CodeEditor.ErrorBar text={errorText} />}
+            </CodeEditor>
+        </CodeEditor.Container>
     )
 
     const saveClusterDetails = (): JSX.Element => (
-        <div className="cluster-form dc__position-rel h-100 bg__primary flexbox-col">
-            <AddClusterHeader />
+        <>
             <div className="api-token__list en-2 bw-0 bg__primary br-8 flexbox-col flex-grow-1 dc__overflow-auto">
                 <div
                     data-testid="cluster_list_page_after_selection"
                     className="saved-cluster-list-row cluster-env-list_table fs-12 pt-6 pb-6 fw-6 flex left lh-20 pl-20 pr-20  dc__border-bottom-n1"
                 >
-                    <div />
                     <div data-testid="cluster_validate">CLUSTER</div>
                     <div data-testid="status_validate">STATUS</div>
                     <div data-testid="message_validate">MESSAGE</div>
-                    <div />
                 </div>
                 <div className="dc__overflow-auto flex-grow-1 h-100">
                     {!saveClusterList || saveClusterList.length === 0 ? (
-                        <NoMatchingResults />
+                        <GenericFilterEmptyState />
                     ) : (
                         saveClusterList.map((clusterListDetail, index) => (
                             <div
+                                // eslint-disable-next-line react/no-array-index-key
                                 key={`api_${index}`}
                                 className="saved-cluster-list-row cluster-env-list_table flex-align-center fw-4 cn-9 fs-13 pr-16 pl-16 pt-6 pb-6"
                             >
-                                <div />
                                 <div
                                     data-testid={`validate-cluster-${clusterListDetail.clusterName}`}
                                     className="flexbox dc__align-items-center ml-2"
@@ -1105,29 +1074,50 @@ export default function ClusterForm({
                     )}
                 </div>
             </div>
-            <div className="dc__border-top flex right py-12 px-20 dc__no-shrink">
-                <button
-                    className="dc__edit_button cb-5 h-36 lh-36"
-                    type="button"
-                    onClick={handleEditConfigClick}
-                    style={{ marginRight: 'auto' }}
-                >
-                    <span className="flex dc__align-items-center">
-                        <Edit className="icon-dim-16 scb-5 mr-4" />
-                        Edit Kubeconfig
-                    </span>
-                </button>
-                <button
-                    data-testid="close_after_cluster_list_display"
-                    className="cta  h-36 lh-36"
-                    type="button"
-                    onClick={handleCloseButton}
-                    style={{ marginLeft: 'auto' }}
-                >
-                    Close
-                </button>
-            </div>
-        </div>
+
+            {id && (
+                <div className="dc__border-top flex right py-12 px-20 dc__no-shrink">
+                    <button
+                        className="dc__edit_button cb-5 h-36 lh-36"
+                        type="button"
+                        onClick={handleEditConfigClick}
+                        style={{ marginRight: 'auto' }}
+                    >
+                        <span className="flex dc__align-items-center">
+                            <Edit className="icon-dim-16 scb-5 mr-4" />
+                            Edit Kubeconfig
+                        </span>
+                    </button>
+                    <button
+                        data-testid="close_after_cluster_list_display"
+                        className="cta  h-36 lh-36"
+                        type="button"
+                        onClick={handleCloseButton}
+                        style={{ marginLeft: 'auto' }}
+                    >
+                        Close
+                    </button>
+                </div>
+            )}
+
+            {!id && (
+                <FooterComponent apiCallInProgress={loader} handleModalClose={handleModalClose}>
+                    <FooterComponent.Start>
+                        <button
+                            className="dc__edit_button cb-5 h-36 lh-36"
+                            type="button"
+                            onClick={handleEditConfigClick}
+                            style={{ marginRight: 'auto' }}
+                        >
+                            <span className="flex dc__align-items-center">
+                                <Edit className="icon-dim-16 scb-5 mr-4" />
+                                Edit Kubeconfig
+                            </span>
+                        </button>
+                    </FooterComponent.Start>
+                </FooterComponent>
+            )}
+        </>
     )
 
     const handleClusterDetailCall = async () => {
@@ -1137,10 +1127,10 @@ export default function ClusterForm({
         toggleClusterDetails(true)
     }
 
-    function toggleIsSelected(clusterName: string, forceUnselect?: boolean) {
+    const toggleIsSelected = (clusterNameString: string, forceUnselect?: boolean) => {
         const _currentSelections = {
             ...isClusterSelected,
-            [clusterName]: forceUnselect ? false : !isClusterSelected[clusterName],
+            [clusterNameString]: forceUnselect ? false : !isClusterSelected[clusterNameString],
         }
         setClusterSeleceted(_currentSelections)
 
@@ -1151,7 +1141,7 @@ export default function ClusterForm({
         }
     }
 
-    function toggleSelectAll(event) {
+    const toggleSelectAll = (event) => {
         if (isCheckboxDisabled()) {
             return
         }
@@ -1173,7 +1163,7 @@ export default function ClusterForm({
         setClusterSeleceted(currentSelections)
     }
 
-    function validCluster() {
+    const validCluster = () => {
         const _validCluster = dataList
         let count = 0
 
@@ -1188,7 +1178,7 @@ export default function ClusterForm({
                 }
             })
             if (found) {
-                count++
+                count += 1
             }
         })
         return count
@@ -1201,6 +1191,7 @@ export default function ClusterForm({
         if (Object.values(isClusterSelected).some((_selected) => _selected)) {
             return CHECKBOX_VALUE.INTERMEDIATE
         }
+        return null
     }
 
     const onChangeUserName = (selectedOption: any, clusterDetail: DataListType) => {
@@ -1211,23 +1202,14 @@ export default function ClusterForm({
         toggleIsSelected(clusterDetail.cluster_name, true)
     }
 
-    if (loader) {
-        return <LoadingCluster />
-    }
-
     const displayClusterDetails = () => {
         const isAnyCheckboxSelected = Object.values(isClusterSelected).some((value) => value === true)
         return (
             <>
                 {isKubeConfigFile && (
-                    <div
-                        data-testid="valid_cluster_infocolor_bar"
-                        className="cluster-form dc__position-rel h-100 bg__primary flexbox-col"
-                    >
-                        <AddClusterHeader />
-
+                    <div data-testid="valid_cluster_infocolor_bar">
                         <div className="flexbox-col flex-grow-1 dc__overflow-auto">
-                            <div className="api-token__list en-2 bw-1 bg__primary br-4 mr-20 ml-20 mt-16">
+                            <div className="api-token__list en-2 bw-1 bg__primary br-4 m-20">
                                 <InfoColourBar
                                     message={
                                         <>
@@ -1239,7 +1221,7 @@ export default function ClusterForm({
                                     Icon={InfoIcon}
                                     styles={{ borderRadius: '3px 3px 0 0' }}
                                 />
-                                <div className="cluster-list-row-1 cluster-env-list_table fs-12 pt-6 pb-6 fw-6 flex left lh-20 pl-16 pr-16 dc__border-top dc__border-bottom">
+                                <div className="cluster-list-row-1 border__secondary--bottom cluster-env-list_table fs-12 pt-6 pb-6 fw-6 flex left lh-20 pl-16 pr-16 dc__border-top dc__border-bottom">
                                     <div data-testid="select_all_cluster_checkbox">
                                         <Checkbox
                                             rootClassName={`form__checkbox-label--ignore-cache mb-0 flex${
@@ -1254,29 +1236,28 @@ export default function ClusterForm({
                                     <div>CLUSTER</div>
                                     <div>USER</div>
                                     <div>MESSAGE</div>
-                                    <div />
                                 </div>
                                 <div style={{ height: 'auto' }}>
-                                    {!dataList || dataList.length === 0 ? (
-                                        <NoMatchingResults />
+                                    {!dataList?.length ? (
+                                        <GenericFilterEmptyState />
                                     ) : (
                                         dataList.map((clusterDetail, index) => (
                                             <div
+                                                // eslint-disable-next-line react/no-array-index-key
                                                 key={`api_${index}`}
-                                                className="cluster-list-row-1 flex-align-center fw-4 cn-9 fs-13 pr-16 pl-16 pt-6 pb-6"
+                                                className="cluster-list-row-1 border__secondary--bottom flex-align-center fw-4 cn-9 fs-13 pr-16 pl-16 pt-6 pb-6"
                                                 style={{
                                                     height: 'auto',
                                                     alignItems: 'start',
                                                 }}
                                             >
                                                 <Checkbox
-                                                    key={`app-$${index}`}
                                                     dataTestId={`checkbox_selection_of_cluster-${clusterDetail.cluster_name}`}
                                                     rootClassName={`form__checkbox-label--ignore-cache mb-0 flex${
                                                         selectedUserNameOptions[clusterDetail.cluster_name]
-                                                            .errorInConnecting === 'cluster-already-exists' ||
+                                                            ?.errorInConnecting === 'cluster-already-exists' ||
                                                         !selectedUserNameOptions[clusterDetail.cluster_name]
-                                                            .errorInConnecting
+                                                            ?.errorInConnecting
                                                             ? ''
                                                             : ' dc__opacity-0_5'
                                                     }`}
@@ -1285,10 +1266,10 @@ export default function ClusterForm({
                                                     value={CHECKBOX_VALUE.CHECKED}
                                                     disabled={
                                                         selectedUserNameOptions[clusterDetail.cluster_name]
-                                                            .errorInConnecting === 'cluster-already-exists'
+                                                            ?.errorInConnecting === 'cluster-already-exists'
                                                             ? false
                                                             : selectedUserNameOptions[clusterDetail.cluster_name]
-                                                                  .errorInConnecting.length > 0
+                                                                  ?.errorInConnecting.length > 0
                                                     }
                                                 />
                                                 <div
@@ -1296,9 +1277,9 @@ export default function ClusterForm({
                                                     onClick={() => {
                                                         if (
                                                             selectedUserNameOptions[clusterDetail.cluster_name]
-                                                                .errorInConnecting !== 'cluster-already-exists' &&
+                                                                ?.errorInConnecting !== 'cluster-already-exists' &&
                                                             selectedUserNameOptions[clusterDetail.cluster_name]
-                                                                .errorInConnecting.length > 0
+                                                                ?.errorInConnecting.length > 0
                                                         ) {
                                                             return
                                                         }
@@ -1331,9 +1312,9 @@ export default function ClusterForm({
                                                         </div>
                                                     )}
                                                     {selectedUserNameOptions[clusterDetail.cluster_name]
-                                                        .errorInConnecting !== '' &&
+                                                        ?.errorInConnecting !== '' &&
                                                         selectedUserNameOptions[clusterDetail.cluster_name]
-                                                            .errorInConnecting !== 'cluster-already-exists' && (
+                                                            ?.errorInConnecting !== 'cluster-already-exists' && (
                                                             <div
                                                                 className="flex left top"
                                                                 style={{
@@ -1341,7 +1322,7 @@ export default function ClusterForm({
                                                                 }}
                                                             >
                                                                 {selectedUserNameOptions[clusterDetail.cluster_name]
-                                                                    .errorInConnecting.length !== 0 && (
+                                                                    ?.errorInConnecting.length !== 0 && (
                                                                     <div className="m-2">
                                                                         <Icon name="ic-error" color={null} />
                                                                     </div>
@@ -1361,31 +1342,60 @@ export default function ClusterForm({
                             </div>
                         </div>
 
-                        <div className="w-100 dc__border-top flex right py-12 px-20 bg__primary dc__no-shrink">
-                            <button
-                                className="dc__edit_button cb-5"
-                                type="button"
-                                onClick={handleEditConfigClick}
-                                style={{ marginRight: 'auto' }}
-                            >
-                                <span
-                                    data-testid="edit_kubeconfig_button_cluster_checkbox"
-                                    style={{ display: 'flex', alignItems: 'center' }}
+                        {id && (
+                            <div className="w-100 dc__border-top flex right py-12 px-20 bg__primary dc__no-shrink">
+                                <button
+                                    className="dc__edit_button cb-5"
+                                    type="button"
+                                    onClick={handleEditConfigClick}
+                                    style={{ marginRight: 'auto' }}
                                 >
-                                    <Edit className="icon-dim-16 scb-5 mr-4 h-36 lh-36" />
-                                    Edit Kubeconfig
-                                </span>
-                            </button>
-                            <button
-                                data-testid="save_cluster_list_button_after_selection"
-                                className="cta h-36 lh-36"
-                                type="button"
-                                onClick={() => handleClusterDetailCall()}
-                                disabled={!saveClusterList || !isAnyCheckboxSelected}
-                            >
-                                Save
-                            </button>
-                        </div>
+                                    <span
+                                        data-testid="edit_kubeconfig_button_cluster_checkbox"
+                                        style={{ display: 'flex', alignItems: 'center' }}
+                                    >
+                                        <Edit className="icon-dim-16 scb-5 mr-4 h-36 lh-36" />
+                                        Edit Kubeconfig
+                                    </span>
+                                </button>
+                                <button
+                                    data-testid="save_cluster_list_button_after_selection"
+                                    className="cta h-36 lh-36"
+                                    type="button"
+                                    onClick={() => handleClusterDetailCall()}
+                                    disabled={!saveClusterList || !isAnyCheckboxSelected}
+                                >
+                                    Save
+                                </button>
+                            </div>
+                        )}
+
+                        <FooterComponent apiCallInProgress={loader} handleModalClose={handleModalClose}>
+                            <FooterComponent.Start>
+                                <button
+                                    className="dc__edit_button cb-5 h-36 lh-36"
+                                    type="button"
+                                    onClick={handleEditConfigClick}
+                                    style={{ marginRight: 'auto' }}
+                                >
+                                    <span className="flex dc__align-items-center">
+                                        <Edit className="icon-dim-16 scb-5 mr-4" />
+                                        Edit Kubeconfig
+                                    </span>
+                                </button>
+                            </FooterComponent.Start>
+                            <FooterComponent.CTA>
+                                <button
+                                    data-testid="save_cluster_list_button_after_selection"
+                                    className="cta h-36 lh-36"
+                                    type="button"
+                                    onClick={() => handleClusterDetailCall()}
+                                    disabled={!saveClusterList || !isAnyCheckboxSelected}
+                                >
+                                    Save
+                                </button>
+                            </FooterComponent.CTA>
+                        </FooterComponent>
                     </div>
                 )}
                 {isClusterDetails && !isKubeConfigFile && saveClusterDetails()}
@@ -1393,45 +1403,11 @@ export default function ClusterForm({
         )
     }
 
-    const handleVirtualCloseButton = (e) => {
-        toggleEditMode(e)
-        setLoadingState(false)
-        reload()
-        handleCloseCreateClusterForm()
-    }
-
     const showConfirmationModal = () => setConfirmation(true)
     const hideConfirmationModal = () => setConfirmation(false)
 
-    const onDelete = async () => {
-        const payload = {
-            id,
-            cluster_name,
-            config: { bearer_token: state.token.value },
-            active,
-            prometheus_url: prometheusToggleEnabled ? state.endpoint.value : '',
-            prometheusAuth: {
-                userName: prometheusToggleEnabled ? state.userName.value : '',
-                password: prometheusToggleEnabled ? state.password.value : '',
-                tlsClientCert: prometheusToggleEnabled ? state.prometheusTlsClientKey.value : '',
-                tlsClientKey: prometheusToggleEnabled ? state.prometheusTlsClientCert.value : '',
-            },
-            remoteConnectionConfig: getRemoteConnectionConfig(state, remoteConnectionMethod),
-            server_url,
-            defaultClusterComponent,
-            k8sversion: '',
-            insecureSkipTlsVerify: !isTlsConnection,
-        }
-        await deleteCluster(payload)
-        reload()
-    }
-
-    const renderNonVirtualFooter = () => {
-        if (isVirtual) {
-            return null
-        }
-
-        if (isKubeConfigFile) {
+    const renderFooter = () => {
+        if (isKubeConfigFile && id) {
             return (
                 <div className="dc__border-top flex right py-12 px-20">
                     <button
@@ -1459,61 +1435,88 @@ export default function ClusterForm({
             )
         }
 
+        if (isKubeConfigFile && !id) {
+            return (
+                <FooterComponent apiCallInProgress={loader} handleModalClose={handleModalClose}>
+                    <FooterComponent.CTA>
+                        <Button
+                            text="Get Cluster"
+                            endIcon={<Icon name="ic-arrow-right" color="N900" />}
+                            disabled={isDefaultCluster}
+                            dataTestId="get_cluster_button"
+                            onClick={handleGetClustersClick}
+                            isLoading={loader}
+                        />
+                    </FooterComponent.CTA>
+                </FooterComponent>
+            )
+        }
+
         return (
-            <div className="dc__border-top flexbox py-12 px-20 dc__content-space">
+            <div className={id ? 'dc__border-top flexbox py-12 px-20 dc__content-space' : ''}>
                 {id && (
                     <Button
                         text="Delete"
                         variant={ButtonVariantType.secondary}
                         style={ButtonStyleType.negative}
                         startIcon={<Trash />}
-                        disabled={isDefaultCluster()}
+                        disabled={isDefaultCluster || loader}
                         dataTestId="delete_cluster"
                         onClick={showConfirmationModal}
                     />
                 )}
-                <div className="flex dc__gap-12 right w-100">
-                    <Button
-                        text="Cancel"
-                        variant={ButtonVariantType.secondary}
-                        style={ButtonStyleType.neutral}
-                        dataTestId="cancel_button"
-                        onClick={handleCloseButton}
-                    />
-                    <Button
-                        dataTestId="save_cluster_after_entering_cluster_details"
-                        onClick={handleOnSubmit}
-                        text={id ? 'Update cluster' : 'Save cluster'}
-                        buttonProps={{
-                            type: 'submit',
-                        }}
-                    />
-                </div>
+                {id ? (
+                    <div className="flex dc__gap-12 right w-100">
+                        <Button
+                            text="Cancel"
+                            variant={ButtonVariantType.secondary}
+                            style={ButtonStyleType.neutral}
+                            disabled={loader}
+                            dataTestId="cancel_button"
+                            onClick={handleCloseButton}
+                        />
+                        <Button
+                            dataTestId="save_cluster_after_entering_cluster_details"
+                            onClick={handleOnSubmit}
+                            text="Update cluster"
+                            isLoading={loader}
+                            buttonProps={{
+                                type: 'submit',
+                            }}
+                        />
+                    </div>
+                ) : (
+                    <FooterComponent apiCallInProgress={loader} handleModalClose={handleModalClose}>
+                        <FooterComponent.CTA>
+                            <Button
+                                dataTestId="save_cluster_after_entering_cluster_details"
+                                onClick={handleOnSubmit}
+                                text="Save cluster"
+                                buttonProps={{
+                                    type: 'submit',
+                                }}
+                            />
+                        </FooterComponent.CTA>
+                    </FooterComponent>
+                )}
             </div>
         )
     }
 
-    return getClusterVar ? (
-        displayClusterDetails()
-    ) : (
-        <div className="cluster-form dc__position-rel h-100 bg__primary flexbox-col">
-            <AddClusterHeader />
-            <div className="flex-grow-1 flexbox-col dc__overflow-auto">
-                {VirtualClusterSelectionTab && (
-                    <VirtualClusterSelectionTab
-                        id={id}
-                        clusterName={cluster_name}
-                        isVirtual={isVirtual}
-                        setIsVirtual={setIsVirtual}
-                        reload={reload}
-                        toggleEditMode={handleVirtualCloseButton}
-                    />
-                )}
-                {!isVirtual && (
-                    <>
+    return (
+        <div
+            className={`${id ? 'dc__position-rel h-100' : 'br-8 border__secondary'} ${isKubeConfigFile && !dataList.length ? 'flex-grow-1' : ''} cluster-form bg__primary flexbox-col`}
+        >
+            {id && renderHeader()}
+
+            {dataList.length ? (
+                displayClusterDetails()
+            ) : (
+                <>
+                    <div className={`flex-grow-1 flexbox-col ${id ? 'dc__overflow-auto' : ''}`}>
                         <div className="p-20 flex-grow-1 flexbox-col">
                             {!id && (
-                                <div className="form__row clone-apps dc__inline-block pd-0 pt-0 pb-12">
+                                <div className="form__row clone-apps dc__inline-block p-0">
                                     <RadioGroup
                                         className="radio-group-no-border"
                                         value={isKubeConfigFile ? 'EXISTING' : 'BLANK'}
@@ -1537,20 +1540,21 @@ export default function ClusterForm({
                         </div>
 
                         {confirmation && (
-                            <DeleteConfirmationModal
-                                title={cluster_name}
-                                component={DeleteComponentsName.Cluster}
-                                subtitle={DC_DELETE_SUBTITLES.DELETE_ENVIRONMENT_SUBTITLE}
-                                onDelete={onDelete}
-                                closeConfirmationModal={hideConfirmationModal}
-                                errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.BAD_REQUEST}
+                            <DeleteClusterConfirmationModal
+                                clusterId={clusterId}
+                                clusterName={clusterName}
+                                handleClose={hideConfirmationModal}
+                                reload={reload}
+                                // TODO: get installationId here
                             />
                         )}
-                    </>
-                )}
-            </div>
+                    </div>
 
-            {renderNonVirtualFooter()}
+                    {renderFooter()}
+                </>
+            )}
         </div>
     )
 }
+
+export default ClusterForm
diff --git a/src/components/cluster/DeleteClusterConfirmationModal.tsx b/src/components/cluster/DeleteClusterConfirmationModal.tsx
new file mode 100644
index 0000000000..8b0a4fdb18
--- /dev/null
+++ b/src/components/cluster/DeleteClusterConfirmationModal.tsx
@@ -0,0 +1,65 @@
+import { useState } from 'react'
+
+import {
+    Checkbox,
+    CHECKBOX_VALUE,
+    DC_DELETE_SUBTITLES,
+    DeleteConfirmationModal,
+    ERROR_STATUS_CODE,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { importComponentFromFELibrary } from '@Components/common'
+
+import { DeleteComponentsName } from '../../config/constantMessaging'
+import { deleteCluster } from './cluster.service'
+import { DeleteClusterConfirmationModalProps } from './cluster.type'
+
+const deleteInstalledCluster = importComponentFromFELibrary('deleteInstalledCluster', null, 'function')
+
+const DeleteClusterConfirmationModal = ({
+    clusterName,
+    clusterId,
+    handleClose,
+    installationId,
+    reload,
+}: DeleteClusterConfirmationModalProps) => {
+    const [shouldDeleteInstalledCluster, setShouldDeleteInstalledCluster] = useState(false)
+
+    const handleDelete = async () => {
+        if (shouldDeleteInstalledCluster && deleteInstalledCluster) {
+            await deleteInstalledCluster(Number(installationId))
+        }
+        await deleteCluster({ id: Number(clusterId) })
+        reload()
+    }
+
+    const handleToggleShouldDeleteInstalledCluster = () => {
+        setShouldDeleteInstalledCluster(!shouldDeleteInstalledCluster)
+    }
+
+    return (
+        <DeleteConfirmationModal
+            title={clusterName}
+            component={DeleteComponentsName.Cluster}
+            subtitle={DC_DELETE_SUBTITLES.DELETE_CLUSTER_SUBTITLES}
+            onDelete={handleDelete}
+            confirmationConfig={{ confirmationKeyword: clusterName, identifier: 'delete-cluster-confirmation-input' }}
+            closeConfirmationModal={handleClose}
+            errorCodeToShowCannotDeleteDialog={ERROR_STATUS_CODE.BAD_REQUEST}
+        >
+            {!!installationId && !!deleteInstalledCluster && (
+                <Checkbox
+                    value={CHECKBOX_VALUE.CHECKED}
+                    isChecked={shouldDeleteInstalledCluster}
+                    dataTestId="delete-installed-cluster"
+                    rootClassName="m-0"
+                    onChange={handleToggleShouldDeleteInstalledCluster}
+                >
+                    Delete cluster from AWS
+                </Checkbox>
+            )}
+        </DeleteConfirmationModal>
+    )
+}
+
+export default DeleteClusterConfirmationModal
diff --git a/src/components/cluster/cluster.scss b/src/components/cluster/cluster.scss
index 5088bd4533..08e959b9e2 100644
--- a/src/components/cluster/cluster.scss
+++ b/src/components/cluster/cluster.scss
@@ -70,13 +70,13 @@
 
 .saved-cluster-list-row {
     display: grid;
-    grid-template-columns: 0px minmax(278px, 346px) 100px 360px 190px minmax(80px, 90px);
+    grid-template-columns: minmax(278px, 346px) 100px 1fr;
     grid-column-gap: 16px;
 }
 
 .cluster-list-row-1 {
     display: grid;
-    grid-template-columns: 24px minmax(240px, 250px) 150px 420px minmax(80px, 90px);
+    grid-template-columns: 24px minmax(240px, 250px) 150px 1fr;
     grid-column-gap: 16px;
     line-height: 20px;
 }
@@ -85,4 +85,8 @@
     .react-monaco-editor-container {
         flex-grow: 1;
     }
+
+    .radio__button {
+        margin-top: 2px;
+    }
 }
diff --git a/src/components/cluster/cluster.service.ts b/src/components/cluster/cluster.service.ts
index e9168a417c..57737beac1 100644
--- a/src/components/cluster/cluster.service.ts
+++ b/src/components/cluster/cluster.service.ts
@@ -16,6 +16,7 @@
 
 import { get, post, put, trash, ResponseType } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../config'
+import { DeleteClusterPayload } from './cluster.type'
 
 export function getClusterList(): Promise<any> {
     const URL = `${Routes.CLUSTER}`
@@ -67,8 +68,8 @@ export const getEnvironmentList = (): Promise<any> => {
     return get(URL).then((response) => response)
 }
 
-export function deleteCluster(request): Promise<any> {
-    return trash(Routes.CLUSTER, request)
+export function deleteCluster(payload: DeleteClusterPayload): Promise<any> {
+    return trash(Routes.CLUSTER, payload)
 }
 
 export function deleteEnvironment(request): Promise<any> {
diff --git a/src/components/cluster/cluster.type.ts b/src/components/cluster/cluster.type.ts
index 535dfb8f90..3c669619df 100644
--- a/src/components/cluster/cluster.type.ts
+++ b/src/components/cluster/cluster.type.ts
@@ -179,45 +179,32 @@ export interface ClusterFormType {
 
 export const RemoteConnectionTypeCluster = 'cluster'
 
-export type ClusterFormProps = {
-    /**
-     * @default false
-     */
+export type EditClusterFormProps = {
+    id: number
+    toggleEditMode: Dispatch<SetStateAction<boolean>>
     isProd?: boolean
-    cluster_name: string
-    server_url: string
-    active: boolean
-    config: any
-    reload: () => void
-    prometheus_url: string
+    clusterName: string
+    serverUrl: string
+    prometheusUrl: string
     prometheusAuth: any
-    defaultClusterComponent: any
     proxyUrl: string
     sshUsername: string
     sshPassword: string
     sshAuthKey: string
     sshServerAddress: string
-    isConnectedViaProxy: boolean
     isConnectedViaSSHTunnel: boolean
     isTlsConnection: boolean
-    toggleCheckTlsConnection: any
-    setTlsConnectionFalse: any
-    toggleKubeConfigFile: any
-    isKubeConfigFile: boolean
-    isClusterDetails: boolean
-    toggleClusterDetails: any
-    isVirtualCluster: boolean
-} & (
-    | {
-          id: number
-          toggleEditMode: Dispatch<SetStateAction<boolean>>
+}
+
+export type ClusterFormProps = { reload: () => void } & (
+    | ({
           handleCloseCreateClusterForm?: never
-      }
-    | {
+          id: number
+      } & EditClusterFormProps)
+    | ({
           handleCloseCreateClusterForm: () => void
           id?: never
-          toggleEditMode?: never
-      }
+      } & Partial<Record<keyof EditClusterFormProps, never>>)
 )
 
 export interface AddClusterFormPrefilledInfoType {
@@ -227,3 +214,15 @@ export interface AddClusterFormPrefilledInfoType {
 export interface AddEnvironmentFormPrefilledInfoType {
     namespace: string
 }
+
+export interface DeleteClusterConfirmationModalProps {
+    clusterId: string
+    clusterName: string
+    handleClose: () => void
+    installationId?: string
+    reload?: () => void
+}
+
+export interface DeleteClusterPayload {
+    id: number
+}
diff --git a/src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx b/src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx
index 2d71d0880b..e4077ac0f3 100644
--- a/src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx
+++ b/src/components/v2/appDetails/sourceInfo/EnvironmentSelector.component.tsx
@@ -40,7 +40,7 @@ import { ReactComponent as LinkIcon } from '../../../../assets/icons/ic-link.svg
 import { ReactComponent as Trash } from '../../../../assets/icons/ic-delete-interactive.svg'
 import { deleteApplicationRelease } from '../../../external-apps/ExternalAppService'
 import { deleteInstalledChart } from '../../../charts/charts.service'
-import { ReactComponent as Dots } from '../../assets/icons/ic-menu-dot.svg'
+import { ReactComponent as Dots } from '@Icons/ic-dot.svg'
 import { DELETE_ACTION, URLS, checkIfDevtronOperatorHelmRelease } from '../../../../config'
 import { ReactComponent as BinWithDots } from '../../../../assets/icons/ic-delete-dots.svg'
 import { DELETE_DEPLOYMENT_PIPELINE, DeploymentAppTypeNameMapping } from '../../../../config/constantMessaging'
@@ -384,7 +384,7 @@ const EnvironmentSelectorComponent = ({
                         >
                             <PopupMenu autoClose>
                                 <PopupMenu.Button rootClassName="flex" isKebab>
-                                    <Dots className="pod-info__dots icon-dim-20 icon-color-n6" />
+                                    <Dots className="pod-info__dots icon-dim-20 fcn-6" />
                                 </PopupMenu.Button>
                                 <PopupMenu.Body>
                                     <div className="helm-delete-pop-up bg__primary br-4">
diff --git a/src/components/v2/assets/icons/ic-menu-dot.svg b/src/components/v2/assets/icons/ic-menu-dot.svg
deleted file mode 100644
index 45b997a551..0000000000
--- a/src/components/v2/assets/icons/ic-menu-dot.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
-  - Copyright (c) 2024. Devtron Inc.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <g fill="none" fill-rule="evenodd">
-        <path d="M0 0h24v24H0z"/>
-        <path fill="#999" fill-rule="nonzero" d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
-    </g>
-</svg>
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
index 0ea4ae39a6..b92845976e 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
@@ -644,7 +644,7 @@ export const ActiveReadmeColumn = ({ fetchingReadMe, activeReadMe }: ActiveReadm
     return (
         <div className="dc__overflow-auto dc__border-right">
             <div
-                className="code-editor__header flex left fs-12 fw-6 cn-7 dc__position-sticky dc__top-0 dc__zi-1"
+                className="px-16 pt-6 pb-5 bg__secondary border__primary--bottom flex left fs-12 fw-6 cn-7 dc__position-sticky dc__top-0 dc__zi-1"
                 data-testid="readme-heading"
             >
                 Readme
diff --git a/src/config/constants.ts b/src/config/constants.ts
index 533d756406..53d5d9b87f 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -150,7 +150,6 @@ export const Routes = {
     CHART_INSTALLED: 'app-store/installed-app',
     ARGO_APPS: 'argo-application',
     FLUX_APPS: 'flux-application',
-    CHART_AVAILABLE: 'app-store',
     CHART_STORE: 'app-store',
     CHART_REPO: 'chart-repo',
     CHART_RESYNC: 'sync-charts',
@@ -390,6 +389,7 @@ export const DOCUMENTATION = {
     SECURITY: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/security-features`,
     SPECIFY_IMAGE_PULL_SECRET: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/getting-started/global-configurations/container-registries#specify-image-pull-secret`,
     WEBHOOK_CI: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/usage/applications/creating-application/ci-pipeline#3.-deploy-image-from-external-service`,
+    CLUSTER_AND_ENVIRONMENT: `${DOCUMENTATION_HOME_PAGE}${DOCUMENTATION_VERSION}/global-configurations/cluster-and-environments`,
 }
 
 export const HEADER_TEXT = {
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 316a3a50c5..896424395f 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -24,6 +24,8 @@ export interface NavItem {
     isLocked: boolean
 }
 
+const CREATE_CLUSTER_PATH = 'create/cluster/:type(connect-cluster|create-eks-cluster|add-isolated-cluster)'
+
 export const URLS = {
     CHARTS: '/chart-store',
     CHARTS_DISCOVER: '/chart-store/discover',
@@ -32,6 +34,8 @@ export const URLS = {
     CREATE_JOB: 'create-job',
     APPLICATION_GROUP: '/application-group',
     RESOURCE_BROWSER: COMMON_URLS.RESOURCE_BROWSER,
+    RESOURCE_BROWSER_INSTALLATION_CLUSTER: `${COMMON_URLS.RESOURCE_BROWSER}/installation-cluster/:installationId`,
+    RESOURCE_BROWSER_CREATE_CLUSTER: `${COMMON_URLS.RESOURCE_BROWSER}/${CREATE_CLUSTER_PATH}`,
     EXTERNAL_APPS: 'ea',
     DEVTRON_CHARTS: 'dc',
     EXTERNAL_ARGO_APP: 'eaa',
@@ -83,7 +87,7 @@ export const URLS = {
     GLOBAL_CONFIG_GITOPS: '/global-config/gitops',
     GLOBAL_CONFIG_DOCKER: '/global-config/docker',
     GLOBAL_CONFIG_CLUSTER: '/global-config/cluster-env',
-    GLOBAL_CONFIG_CREATE_CLUSTER: '/global-config/cluster-env/create/cluster',
+    GLOBAL_CONFIG_CREATE_CLUSTER: `/global-config/cluster-env/${CREATE_CLUSTER_PATH}`,
     GLOBAL_CONFIG_CHART: '/global-config/chart-repo',
     GLOBAL_CONFIG_AUTH: '/global-config/auth',
     GLOBAL_CONFIG_AUTH_USER_PERMISSION: '/global-config/auth/users',
diff --git a/src/css/base.scss b/src/css/base.scss
index 4d5ddbcd4a..42299caeaa 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -2802,6 +2802,10 @@ button.anchor {
     min-width: 152px;
 }
 
+.mw-232 {
+    min-width: 232px;
+}
+
 .mw-264 {
     min-width: 264px;
 }
diff --git a/src/services/service.ts b/src/services/service.ts
index 60c1028e69..50fc0d9ef4 100644
--- a/src/services/service.ts
+++ b/src/services/service.ts
@@ -174,7 +174,7 @@ export function getAvailableCharts(
     pageSize?: number,
     options?: APIOptions,
 ): Promise<{ code: number; result: Chart[] }> {
-    let url = `${Routes.CHART_AVAILABLE}/discover/`
+    let url = `${Routes.CHART_STORE}/discover/`
 
     if (pageOffset >= 0 && pageSize) {
         queryString = `${queryString || '?'}&offset=${pageOffset}&size=${pageSize}`