diff --git a/.env b/.env
index 440db6f552..b083c1b9c4 100644
--- a/.env
+++ b/.env
@@ -44,9 +44,7 @@ SIDEBAR_DT_LOGO=
 ENABLE_EXTERNAL_ARGO_CD=false
 API_BATCH_SIZE=20
 SERVICE_WORKER_TIMEOUT=3
-ENABLE_RESOURCE_SCAN=false
 FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE=false
-ENABLE_RESOURCE_SCAN_V2=false
 HIDE_RELEASES=true
 HIDE_RESOURCE_WATCHER=true
 ORGANIZATION_NAME=
@@ -61,8 +59,10 @@ FEATURE_CONFIG_DRIFT_ENABLE=false
 FEATURE_PROMO_EMBEDDED_BUTTON_TEXT=
 FEATURE_PROMO_EMBEDDED_MODAL_TITLE=
 FEATURE_PROMO_EMBEDDED_IFRAME_URL=
+FEATURE_SWAP_TRAFFIC_ENABLE=false
 FEATURE_RB_SYNC_CLUSTER_ENABLE=false
 FEATURE_BULK_RESTART_WORKLOADS_FROM_RB=deployment,rollout,daemonset,statefulset
 FEATURE_DEFAULT_MERGE_STRATEGY=
-FEATURE_CLUSTER_MAP_ENABLE=false
+FEATURE_CLUSTER_MAP_ENABLE=true
 FEATURE_DEFAULT_LANDING_RB_ENABLE=false
+FEATURE_ACTION_AUDIOS_ENABLE=true
diff --git a/.eslintignore b/.eslintignore
index c6bd608b42..b3aefee832 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -104,7 +104,6 @@ src/components/app/details/appDetails/AppStatusCard.tsx
 src/components/app/details/appDetails/DeploymentStatusDetailModal.tsx
 src/components/app/details/appDetails/GraphsModal.tsx
 src/components/app/details/appDetails/IssuesCard.tsx
-src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
 src/components/app/details/appDetails/SourceInfo.tsx
 src/components/app/details/appDetails/__tests__/GenericInfo.test.tsx
 src/components/app/details/appDetails/index.tsx
@@ -246,7 +245,6 @@ src/components/common/DatePickers/DayPickerRangeController.tsx
 src/components/common/DeprecatedUpdateWarn.tsx
 src/components/common/Description/GenericDescription.tsx
 src/components/common/DynamicTabs/__tests__/DynamicTabs.test.tsx
-src/components/common/ExportToCsv/ExportToCsv.tsx
 src/components/common/FloatingVariablesSuggestions/FloatingVariablesSuggestions.tsx
 src/components/common/FloatingVariablesSuggestions/SuggestionItem.tsx
 src/components/common/FloatingVariablesSuggestions/Suggestions.tsx
diff --git a/config.md b/config.md
index ed4f66c93c..074952806f 100644
--- a/config.md
+++ b/config.md
@@ -49,5 +49,6 @@
 | SERVICE_WORKER_TIMEOUT                       | "1"        | Timeout value (in minutes) to fetch update for dashboard, change it cautiously as might hamper your update cycle |
 | TRIGGER_API_TIMEOUT                          | 60000      | Default timeout for all API requests for Trigger calls (Deploy artifacts, charts) in DASHBOARD                   |
 | FEATURE_HIDE_USER_DIRECT_PERMISSIONS_FOR_NON_SUPER_ADMINS | "true" | Would hide the user direct permissions for non-super admin users in User Permissions |
+| FEATURE_ACTION_AUDIOS_ENABLE                 | true         | Would enable audios in dashboard   |
 
 # DASHBOARD CONFIG SECRET
diff --git a/package.json b/package.json
index 10c8f37a77..2717d26114 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
     "name": "dashboard",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.3.0-patch-4",
+        "@devtron-labs/devtron-fe-common-lib": "1.4.0-patch-1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
@@ -68,7 +68,8 @@
         "jest": "jest",
         "lint-staged": "lint-staged",
         "storybook": "IS_STORYBOOK=true storybook dev -p 6006",
-        "build-storybook": "IS_STORYBOOK=true storybook build"
+        "build-storybook": "IS_STORYBOOK=true storybook build",
+        "postinstall": "patch-package"
     },
     "browserslist": [
         ">0.2%",
@@ -117,6 +118,8 @@
         "jest-junit": "^13.0.0",
         "lint-staged": "12.5.0",
         "mock-socket": "^9.2.1",
+        "patch-package": "^8.0.0",
+        "postinstall-postinstall": "^2.1.0",
         "prettier": "^3.1.1",
         "react-test-render": "^1.1.2",
         "sass": "^1.69.7",
diff --git a/patches/react-select+5.8.0.patch b/patches/react-select+5.8.0.patch
new file mode 100644
index 0000000000..5faf1727a6
--- /dev/null
+++ b/patches/react-select+5.8.0.patch
@@ -0,0 +1,137 @@
+diff --git a/node_modules/react-select/.DS_Store b/node_modules/react-select/.DS_Store
+new file mode 100644
+index 0000000..5008ddf
+Binary files /dev/null and b/node_modules/react-select/.DS_Store differ
+diff --git a/node_modules/react-select/dist/declarations/src/components/Input.d.ts b/node_modules/react-select/dist/declarations/src/components/Input.d.ts
+index e5f6741..c78fd13 100644
+--- a/node_modules/react-select/dist/declarations/src/components/Input.d.ts
++++ b/node_modules/react-select/dist/declarations/src/components/Input.d.ts
+@@ -13,6 +13,8 @@ export interface InputSpecificProps<Option = unknown, IsMulti extends boolean =
+     form?: string;
+     /** Set className for the input element */
+     inputClassName?: string;
++    /** Whether the input is textarea */
++    isTextArea?: boolean;
+ }
+ export declare type InputProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = InputSpecificProps<Option, IsMulti, Group>;
+ export declare const inputCSS: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ isDisabled, value, theme: { spacing, colors }, }: InputProps<Option, IsMulti, Group>, unstyled: boolean) => CSSObjectWithLabel;
+diff --git a/node_modules/react-select/dist/index-665c4ed8.cjs.prod.js b/node_modules/react-select/dist/index-665c4ed8.cjs.prod.js
+index 96cd04f..0636ebe 100644
+--- a/node_modules/react-select/dist/index-665c4ed8.cjs.prod.js
++++ b/node_modules/react-select/dist/index-665c4ed8.cjs.prod.js
+@@ -1090,7 +1090,7 @@ var GroupHeading = function GroupHeading(props) {
+ };
+ var Group$1 = Group;
+ 
+-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
++var _excluded = ["innerRef", "isDisabled", "isHidden", "isTextArea", "inputClassName"];
+ var inputCSS = function inputCSS(_ref, unstyled) {
+   var isDisabled = _ref.isDisabled,
+     value = _ref.value,
+@@ -1145,13 +1145,25 @@ var Input = function Input(props) {
+     innerRef = _cleanCommonProps.innerRef,
+     isDisabled = _cleanCommonProps.isDisabled,
+     isHidden = _cleanCommonProps.isHidden,
++    isTextArea = _cleanCommonProps.isTextArea,
+     inputClassName = _cleanCommonProps.inputClassName,
+     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+   return react.jsx("div", _extends({}, getStyleProps(props, 'input', {
+     'input-container': true
+   }), {
+     "data-value": value || ''
+-  }), react.jsx("input", _extends({
++  }), isTextArea ? react.jsx("textarea", _extends({
++    className: cx({
++      input: true
++    }, inputClassName),
++    ref: innerRef,
++    style: _objectSpread(_objectSpread({}, inputStyle(isHidden)), {}, {
++      resize: 'none'
++    }),
++    disabled: isDisabled
++  }, innerProps, {
++    rows: 1
++  })) : react.jsx("input", _extends({
+     className: cx({
+       input: true
+     }, inputClassName),
+diff --git a/node_modules/react-select/dist/index-a301f526.esm.js b/node_modules/react-select/dist/index-a301f526.esm.js
+index 514ba81..40d005d 100644
+--- a/node_modules/react-select/dist/index-a301f526.esm.js
++++ b/node_modules/react-select/dist/index-a301f526.esm.js
+@@ -1090,7 +1090,7 @@ var GroupHeading = function GroupHeading(props) {
+ };
+ var Group$1 = Group;
+ 
+-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
++var _excluded = ["innerRef", "isDisabled", "isHidden", "isTextArea", "inputClassName"];
+ var inputCSS = function inputCSS(_ref, unstyled) {
+   var isDisabled = _ref.isDisabled,
+     value = _ref.value,
+@@ -1145,13 +1145,25 @@ var Input = function Input(props) {
+     innerRef = _cleanCommonProps.innerRef,
+     isDisabled = _cleanCommonProps.isDisabled,
+     isHidden = _cleanCommonProps.isHidden,
++    isTextArea = _cleanCommonProps.isTextArea,
+     inputClassName = _cleanCommonProps.inputClassName,
+     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+   return jsx("div", _extends({}, getStyleProps(props, 'input', {
+     'input-container': true
+   }), {
+     "data-value": value || ''
+-  }), jsx("input", _extends({
++  }), isTextArea ? jsx("textarea", _extends({
++    className: cx({
++      input: true
++    }, inputClassName),
++    ref: innerRef,
++    style: _objectSpread(_objectSpread({}, inputStyle(isHidden)), {}, {
++      resize: 'none'
++    }),
++    disabled: isDisabled
++  }, innerProps, {
++    rows: 1
++  })) : jsx("input", _extends({
+     className: cx({
+       input: true
+     }, inputClassName),
+diff --git a/node_modules/react-select/dist/index-d1cb43f3.cjs.dev.js b/node_modules/react-select/dist/index-d1cb43f3.cjs.dev.js
+index 7defcdc..c8d796b 100644
+--- a/node_modules/react-select/dist/index-d1cb43f3.cjs.dev.js
++++ b/node_modules/react-select/dist/index-d1cb43f3.cjs.dev.js
+@@ -1096,7 +1096,7 @@ var GroupHeading = function GroupHeading(props) {
+ };
+ var Group$1 = Group;
+ 
+-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
++var _excluded = ["innerRef", "isDisabled", "isHidden", "isTextArea", "inputClassName"];
+ var inputCSS = function inputCSS(_ref, unstyled) {
+   var isDisabled = _ref.isDisabled,
+     value = _ref.value,
+@@ -1151,13 +1151,25 @@ var Input = function Input(props) {
+     innerRef = _cleanCommonProps.innerRef,
+     isDisabled = _cleanCommonProps.isDisabled,
+     isHidden = _cleanCommonProps.isHidden,
++    isTextArea = _cleanCommonProps.isTextArea,
+     inputClassName = _cleanCommonProps.inputClassName,
+     innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+   return react.jsx("div", _extends({}, getStyleProps(props, 'input', {
+     'input-container': true
+   }), {
+     "data-value": value || ''
+-  }), react.jsx("input", _extends({
++  }), isTextArea ? react.jsx("textarea", _extends({
++    className: cx({
++      input: true
++    }, inputClassName),
++    ref: innerRef,
++    style: _objectSpread(_objectSpread({}, inputStyle(isHidden)), {}, {
++      resize: 'none'
++    }),
++    disabled: isDisabled
++  }, innerProps, {
++    rows: 1
++  })) : react.jsx("input", _extends({
+     className: cx({
+       input: true
+     }, inputClassName),
diff --git a/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx b/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx
index 8489338eb5..66dcc5ebf8 100644
--- a/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx
+++ b/src/Pages/App/Details/ExternalFlux/ExternalFluxAppDetails.tsx
@@ -18,11 +18,12 @@ import {
     AppType,
     ErrorScreenManager,
     IndexStore,
-    useAsync,
     useMainContext,
-    noop,
     DeploymentAppTypes,
-    Progressing,
+    showError,
+    ResponseType,
+    noop,
+    ERROR_STATUS_CODE,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
@@ -37,62 +38,90 @@ let initTimer = null
 
 const ExternalFluxAppDetails = () => {
     const { clusterId, appName, namespace, templateType } = useParams<ExternalFluxAppDetailParams>()
-    const [isPublishing, setIsPublishing] = useState<boolean>(true)
     const { isSuperAdmin } = useMainContext()
     const isKustomization = templateType === FluxCDTemplateType.KUSTOMIZATION
+    const [initialLoading, setInitialLoading] = useState(true)
+    const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(true)
+    const [appDetailsError, setAppDetailsError] = useState(null)
 
-    const [isAppDetailsLoading, appDetailsResult, appDetailsError, reloadAppDetails] = useAsync(
-        () => getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization),
-        [clusterId, appName, namespace, templateType],
-        isSuperAdmin,
-        {
-            resetOnChange: false,
-        },
-    )
+    const handleUpdateIndexStoreWithDetails = (response: ResponseType<any>) => {
+        const genericAppDetail: AppDetails = {
+            ...response.result,
+            appStatus: getAppStatus(response.result.appStatus),
+            deploymentAppType: DeploymentAppTypes.FLUX,
+            fluxTemplateType: templateType,
+        }
 
-    useEffect(
-        () => () => {
-            IndexStore.clearAppDetails()
-            clearTimeout(initTimer)
-        },
-        [],
-    )
+        IndexStore.publishAppDetails(genericAppDetail, AppType.EXTERNAL_FLUX_APP)
+        setAppDetailsError(null)
+    }
 
-    useEffect(() => {
-        if (appDetailsResult && !appDetailsError) {
-            initTimer = setTimeout(reloadAppDetails, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
-            const genericAppDetail: AppDetails = {
-                ...appDetailsResult.result,
-                appStatus: getAppStatus(appDetailsResult.result.appStatus),
-                deploymentAppType: DeploymentAppTypes.FLUX,
-                fluxTemplateType: templateType,
-            }
-            IndexStore.publishAppDetails(genericAppDetail, AppType.EXTERNAL_FLUX_APP)
-            setIsPublishing(false)
-        }
-    }, [appDetailsResult])
+    const handleFetchExternalFluxCDAppDetails = () =>
+        // NOTE: returning a promise so that we can trigger the next timeout after this api call completes
+        new Promise<void>((resolve) => {
+            setIsReloadResourceTreeInProgress(true)
+
+            getExternalFluxCDAppDetails(clusterId, namespace, appName, isKustomization)
+                .then(handleUpdateIndexStoreWithDetails)
+                .catch((error) => {
+                    if (!initialLoading) {
+                        showError(error)
+                    } else {
+                        setAppDetailsError(error)
+                    }
+                })
+                .finally(() => {
+                    setIsReloadResourceTreeInProgress(false)
+                    setInitialLoading(false)
+                    resolve()
+                })
+        })
 
-    if (!isSuperAdmin) {
-        return <ErrorScreenManager code={403} />
+    const initializePageDetails = () => {
+        handleFetchExternalFluxCDAppDetails()
+            .then(() => {
+                // NOTE: using timeouts instead of intervals since we want the next api call after the last one finishes
+                // https://stackoverflow.com/questions/729921/whats-the-difference-between-recursive-settimeout-versus-setinterval
+                initTimer = setTimeout(initializePageDetails, window._env_.EA_APP_DETAILS_POLLING_INTERVAL || 30000)
+            })
+            .catch(noop)
     }
 
-    if (appDetailsError) {
-        return <ErrorScreenManager code={appDetailsError.code} reload={reloadAppDetails} />
+    const handleReloadResourceTree = async () => {
+        await handleFetchExternalFluxCDAppDetails()
     }
 
-    // To show loader on first render only
-    const isLoadingOnMount = isAppDetailsLoading && !appDetailsResult
+    useEffect(() => {
+        if (isSuperAdmin) {
+            setInitialLoading(true)
+            initializePageDetails()
+        }
+
+        return () => {
+            IndexStore.clearAppDetails()
+            clearTimeout(initTimer)
+        }
+    }, [clusterId, appName, namespace, templateType, isSuperAdmin])
 
-    if (isLoadingOnMount || isPublishing) {
-        return <Progressing pageLoader />
+    if (appDetailsError || !isSuperAdmin) {
+        return (
+            <ErrorScreenManager
+                code={appDetailsError?.code ?? ERROR_STATUS_CODE.PERMISSION_DENIED}
+                reload={handleReloadResourceTree}
+            />
+        )
     }
 
     return (
         <AppDetailsComponent
             isExternalApp
+            // NOTE: in case of DA & Helm Apps, when we delete that app _init is called
+            // since we can't delete flux app, sending in noop
             _init={noop}
-            loadingDetails={isLoadingOnMount}
-            loadingResourceTree={isLoadingOnMount}
+            loadingDetails={initialLoading}
+            loadingResourceTree={initialLoading}
+            handleReloadResourceTree={handleReloadResourceTree}
+            isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
         />
     )
 }
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.constants.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.constants.ts
index 71103f76e3..004b3e5be4 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.constants.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.constants.ts
@@ -1,7 +1,7 @@
-import { EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
+import { BASE_CONFIGURATION_ENV_ID, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
 
 export const BASE_CONFIGURATIONS = {
-    id: -1,
+    id: BASE_CONFIGURATION_ENV_ID,
     name: 'Base Configurations',
 }
 
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx
index 303d732437..4ef57fdcae 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.tsx
@@ -26,6 +26,7 @@ import {
     ResourceKindType,
     ToastManager,
     ToastVariantType,
+    ResourceIdToResourceApprovalPolicyConfigMapType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { URLS, getAppComposeURL, APP_COMPOSE_STAGE, ViewType } from '../../../../../config'
 import { importComponentFromFELibrary } from '../../../../../components/common'
@@ -38,7 +39,6 @@ import {
     AppStageUnlockedType,
     STAGE_NAME,
     DEFAULT_LANDING_STAGE,
-    ConfigProtection,
 } from './AppConfig.types'
 import { getUserRole } from '../../../../GlobalConfigurations/Authorization/authorization.service'
 import { isCIPipelineCreated, isCDPipelineCreated, getNavItems, isUnlocked } from './AppConfig.utils'
@@ -47,13 +47,12 @@ import { UserRoleType } from '../../../../GlobalConfigurations/Authorization/con
 import { AppNavigation } from './Navigation/AppNavigation'
 import { AppConfigStatusItemType } from '../../service.types'
 import { getAppConfigStatus, getEnvConfig } from '../../service'
-import { AppOtherEnvironment } from '../../../../../services/service.types'
 import { deleteApp } from './AppConfig.service'
 import { AppConfigurationProvider } from './AppConfiguration.provider'
 import { ENV_CONFIG_PATH_REG } from './AppConfig.constants'
 
-const ConfigProtectionView = importComponentFromFELibrary('ConfigProtectionView')
-const getConfigProtections = importComponentFromFELibrary('getConfigProtections', null, 'function')
+const getApprovalPolicyConfigForApp: (appId: number) => Promise<ResourceIdToResourceApprovalPolicyConfigMapType> =
+    importComponentFromFELibrary('getApprovalPolicyConfigForApp', null, 'function')
 
 export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigProps) => {
     // HOOKS
@@ -79,8 +78,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
         canDeleteApp: false,
         workflowsRes: null,
         environmentList: [],
-        isBaseConfigProtected: false,
-        configProtectionData: [],
+        envIdToEnvApprovalConfigurationMap: {} as ResourceIdToResourceApprovalPolicyConfigMapType,
         envConfig: {
             isLoading: true,
             config: null,
@@ -98,7 +96,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
      *
      * The function performs the following steps:
      * 1. Calls `getAppOtherEnvironmentMin` or `getJobOtherEnvironmentMin` (if resource kind is `job` (isJob)) with the application ID (`appId`) to fetch the environment configurations.
-     * 2. Calls `getConfigProtections` with the application ID (`appId`) if the function is defined and resource kind is `job` (isJob), to fetch configuration protections.
+     * 2. Calls `getApprovalPolicyConfigForApp` with the application ID (`appId`) if the function is defined and resource kind is `job` (isJob), to fetch configuration protections.
      * 3. Creates a map (`envProtectMap`) to store protection states for each environment based on the configuration protections response.
      * 4. Filters the environment configurations based on `filteredEnvIds`, if provided, and marks them as protected if they are found in the protection map.
      * 5. Sorts the filtered and updated environments by their names.
@@ -106,47 +104,28 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
      *
      * The promise resolves to an object with the following properties:
      * - `updatedEnvs`: An array of updated environment configurations, each marked with a protection status.
-     * - `isBaseConfigProtectionEnabled`: A boolean flag indicating if the base configuration protection is enabled.
      * - `configProtections`: An array of configuration protection objects.
      */
     const fetchEnvironments = (): Promise<{
-        updatedEnvs: AppOtherEnvironment['result']
-        isBaseConfigProtectionEnabled: boolean
-        configProtections: ConfigProtection[]
+        updatedEnvs: AppConfigState['environmentList']
+        envIdToEnvApprovalConfigurationMap: ResourceIdToResourceApprovalPolicyConfigMapType
     }> =>
         Promise.all([
             isJob ? getJobOtherEnvironmentMin(appId) : getAppOtherEnvironmentMin(appId),
-            typeof getConfigProtections === 'function' && !isJob ? getConfigProtections(Number(appId)) : null,
-        ]).then(([envResult, configProtectionsResp]) => {
-            let envProtectMap: Record<number, boolean> = {}
-
-            if (configProtectionsResp?.result) {
-                envProtectMap = configProtectionsResp.result.reduce((acc, config) => {
-                    acc[config.envId] = config.state === 1
-                    return acc
-                }, {})
-            }
-
+            typeof getApprovalPolicyConfigForApp === 'function' && !isJob
+                ? getApprovalPolicyConfigForApp(Number(appId))
+                : null,
+        ]).then(([envResult, envIdToEnvApprovalConfigurationMap]) => {
             const filteredEnvMap = filteredEnvIds?.split(',').reduce((agg, curr) => agg.set(+curr, true), new Map())
 
-            const updatedEnvs =
+            const updatedEnvs: AppConfigState['environmentList'] =
                 envResult.result
                     ?.filter((env) => !filteredEnvMap || filteredEnvMap.get(env.environmentId))
-                    .map((env) => {
-                        const envData = { ...env, isProtected: false }
-                        if (envProtectMap[env.environmentId]) {
-                            envData.isProtected = true
-                        }
-                        return envData
-                    })
                     ?.sort((envA, envB) => envA.environmentName.localeCompare(envB.environmentName)) || []
 
-            const isBaseConfigProtectionEnabled = envProtectMap[-1] ?? false
-
             return {
                 updatedEnvs,
-                isBaseConfigProtectionEnabled,
-                configProtections: configProtectionsResp?.result ?? [],
+                envIdToEnvApprovalConfigurationMap,
             }
         })
 
@@ -271,7 +250,10 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
         }
     }
 
-    const processConfigStatusData = (configStatusRes: AppConfigStatusItemType[]) => {
+    const processConfigStatusData = (
+        configStatusRes: AppConfigStatusItemType[],
+        envIdToEnvApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap'],
+    ) => {
         const _isGitOpsConfigurationRequired = configStatusRes.find(
             ({ stageName }) => stageName === STAGE_NAME.GITOPS_CONFIG,
         )?.required
@@ -279,7 +261,13 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
             configStatusRes,
             _isGitOpsConfigurationRequired,
         )
-        const { navItems } = getNavItems(configs, appId, resourceKind, _isGitOpsConfigurationRequired)
+        const { navItems } = getNavItems({
+            _isUnlocked: configs,
+            appId,
+            resourceKind,
+            isGitOpsConfigurationRequired: _isGitOpsConfigurationRequired,
+            envIdToEnvApprovalConfigurationMap,
+        })
         // Finding index of navItem which is locked and is not of alternate nav menu (nav-item rendering on different path)
         let index = navItems.findIndex((item) => !item.altNavKey && item.isLocked)
         if (index < 0) {
@@ -294,10 +282,9 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
     useEffect(() => {
         if (appConfigData) {
             // SET APP CONFIG DATA IN STATE
-            const [configStatusRes, workflowRes, { updatedEnvs, configProtections, isBaseConfigProtectionEnabled }] =
-                appConfigData
+            const [configStatusRes, workflowRes, { updatedEnvs, envIdToEnvApprovalConfigurationMap }] = appConfigData
             const { navItems, isCDPipeline, isCiPipeline, configs, redirectUrl, lastConfiguredStage } =
-                processConfigStatusData(configStatusRes.result)
+                processConfigStatusData(configStatusRes.result, envIdToEnvApprovalConfigurationMap)
 
             setState({
                 ...state,
@@ -314,8 +301,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
                 canDeleteApp: workflowRes.result.workflows.length === 0,
                 workflowsRes: workflowRes.result,
                 environmentList: updatedEnvs,
-                isBaseConfigProtected: isBaseConfigProtectionEnabled,
-                configProtectionData: configProtections,
+                envIdToEnvApprovalConfigurationMap,
             })
             if (location.pathname === match.url) {
                 history.replace(redirectUrl)
@@ -370,6 +356,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
             .then((configStatusRes) => {
                 const { navItems, isCDPipeline, isCiPipeline, configs, redirectUrl } = processConfigStatusData(
                     configStatusRes.result,
+                    state.envIdToEnvApprovalConfigurationMap,
                 )
                 setState((prevState) => ({
                     ...prevState,
@@ -394,12 +381,11 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
 
     const reloadEnvironments = () => {
         fetchEnvironments()
-            .then(({ updatedEnvs, isBaseConfigProtectionEnabled, configProtections }) => {
+            .then(({ updatedEnvs, envIdToEnvApprovalConfigurationMap }) => {
                 setState((prevState) => ({
                     ...prevState,
                     environmentList: updatedEnvs,
-                    isBaseConfigProtected: isBaseConfigProtectionEnabled,
-                    configProtectionData: configProtections,
+                    envIdToEnvApprovalConfigurationMap,
                 }))
             })
             .catch((errors) => {
@@ -477,9 +463,7 @@ export const AppConfig = ({ appName, resourceKind, filteredEnvIds }: AppConfigPr
                 : 'app-compose-with-no-gitops-config__nav'
         } ${isJob ? 'job-compose__side-nav' : ''} ${
             !showCannotDeleteTooltip ? 'dc__position-rel' : ''
-        }  ${hideConfigHelp ? 'hide-app-config-help' : ''} ${!canShowExternalLinks ? 'hide-external-links' : ''} ${
-            state.isUnlocked.workflowEditor && ConfigProtectionView && !isJob ? 'config-protection__side-nav' : ''
-        }`
+        }  ${hideConfigHelp ? 'hide-app-config-help' : ''} ${!canShowExternalLinks ? 'hide-external-links' : ''}`
     }
 
     const toggleRepoSelectionTippy = () => {
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts
index b929f52737..a4ad43b791 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types.ts
@@ -20,6 +20,7 @@ import {
     AppEnvDeploymentConfigType,
     EnvResourceType,
     AppEnvironment,
+    ResourceIdToResourceApprovalPolicyConfigMapType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ViewType } from '@Config/constants'
@@ -43,7 +44,6 @@ export enum STAGE_NAME {
     SECRETS = 'SECRETS',
     ENV_OVERRIDE = 'ENV_OVERRIDE',
     EXTERNAL_LINKS = 'EXTERNAL_LINKS',
-    PROTECT_CONFIGURATION = 'PROTECT_CONFIGURATION',
     REDIRECT_ITEM = 'REDIRECT_ITEM',
 }
 
@@ -92,10 +92,7 @@ export interface AppConfigState {
     workflowsRes?: WorkflowResult
     /** Array containing environments data. */
     environmentList?: AppEnvironment[]
-    /** Boolean indicating if the base configuration is protected. */
-    isBaseConfigProtected?: boolean
-    /** Array of configuration protection data which denotes which env is in protected state. */
-    configProtectionData?: ConfigProtection[]
+    envIdToEnvApprovalConfigurationMap: ResourceIdToResourceApprovalPolicyConfigMapType
     /** The environment config containing the loading state, configState and title of deployment template, configmaps & secrets. */
     envConfig: EnvConfigurationState
 }
@@ -140,17 +137,6 @@ export interface NextButtonProps {
     isDisabled: boolean
 }
 
-export enum ProtectionState {
-    ENABLED = 1,
-    DISABLED = 2,
-}
-
-export type ConfigProtection = {
-    appId: number
-    envId: number
-    state: ProtectionState
-}
-
 interface CommonAppConfigurationProps {
     appId: string
     resourceKind: Extract<ResourceKindType, ResourceKindType.devtronApplication | ResourceKindType.job>
@@ -169,17 +155,18 @@ interface CommonAppConfigurationProps {
     fetchEnvConfig: (envId: number) => void
 }
 
-export interface AppConfigurationContextType extends CommonAppConfigurationProps {
+export interface AppConfigurationContextType
+    extends CommonAppConfigurationProps,
+        Pick<AppConfigState, 'envIdToEnvApprovalConfigurationMap'> {
     isUnlocked: AppStageUnlockedType
     navItems: CustomNavItemsType[]
     isCiPipeline: boolean
     isCDPipeline: boolean
-    environments: AppEnvironment[]
+    environments: AppConfigState['environmentList']
     workflowsRes: WorkflowResult
     setRepoState: React.Dispatch<React.SetStateAction<string>>
     isJobView: boolean
-    isBaseConfigProtected: boolean
-    configProtectionData: ConfigProtection[]
+    envIdToEnvApprovalConfigurationMap: ResourceIdToResourceApprovalPolicyConfigMapType
     lastUnlockedStage: string
     isWorkflowEditorUnlocked: boolean
     getRepo: string
@@ -214,13 +201,11 @@ export enum EnvConfigObjectKey {
 export interface EnvironmentOptionType {
     name: string
     id: number
-    isProtected?: boolean
 }
 
 export interface EnvConfigurationsNavProps {
     envConfig: EnvConfigurationState
     fetchEnvConfig: (envId: number) => void
-    isBaseConfigProtected?: boolean
     environments: EnvironmentOptionType[]
     paramToCheck?: 'appId' | 'envId'
     goBackURL: string
@@ -236,6 +221,7 @@ export interface EnvConfigurationsNavProps {
     showDeploymentTemplate?: boolean
     isCMSecretLocked?: boolean
     hideEnvSelector?: boolean
+    appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
 }
 
 export interface EnvConfigRouteParams {
@@ -259,9 +245,9 @@ export interface DeploymentConfigParams {
 }
 
 export type DeploymentConfigCompareProps = {
+    appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
     environments: EnvironmentOptionType[]
     goBackURL?: string
-    isBaseConfigProtected?: boolean
     getNavItemHref: (resourceType: EnvResourceType, resourceName: string) => string
     overwriteNavHeading?: string
 } & (
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts
index bff69dd1a2..753fd3f4bd 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.utils.ts
@@ -14,12 +14,17 @@
  * limitations under the License.
  */
 
-import { ResourceKindType, stringComparatorBySortOrder, ConfigResourceType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ResourceKindType,
+    stringComparatorBySortOrder,
+    ConfigResourceType,
+    BASE_CONFIGURATION_ENV_ID,
+} from '@devtron-labs/devtron-fe-common-lib'
 
-import { URLS, DOCUMENTATION } from '@Config/index'
+import { DOCUMENTATION } from '@Config/index'
 
 import { AppConfigStatusItemType, EnvConfigDTO } from '../../service.types'
-import { AppStageUnlockedType, CustomNavItemsType, EnvConfigType, STAGE_NAME } from './AppConfig.types'
+import { AppConfigState, AppStageUnlockedType, CustomNavItemsType, EnvConfigType, STAGE_NAME } from './AppConfig.types'
 
 // stage: last configured stage
 const isCommonUnlocked = (stage, isGitOpsConfigurationRequired) =>
@@ -92,12 +97,18 @@ export const getCompletedStep = (
     return 0
 }
 
-export const getNavItems = (
-    _isUnlocked: AppStageUnlockedType,
-    appId: string,
-    resourceKind: ResourceKindType,
-    isGitOpsConfigurationRequired: boolean,
-): { navItems: CustomNavItemsType[] } => {
+export const getNavItems = ({
+    _isUnlocked,
+    appId,
+    resourceKind,
+    isGitOpsConfigurationRequired,
+    envIdToEnvApprovalConfigurationMap,
+}: Pick<AppConfigState, 'envIdToEnvApprovalConfigurationMap'> & {
+    _isUnlocked: AppStageUnlockedType
+    appId: string
+    resourceKind: ResourceKindType
+    isGitOpsConfigurationRequired: boolean
+}): { navItems: CustomNavItemsType[] } => {
     const completedSteps = getCompletedStep(
         _isUnlocked,
         resourceKind === ResourceKindType.job,
@@ -203,7 +214,8 @@ export const getNavItems = (
                         href: `/app/${appId}/edit/deployment-template`,
                         stage: STAGE_NAME.REDIRECT_ITEM,
                         isLocked: !_isUnlocked.deploymentTemplate,
-                        isProtectionAllowed: true,
+                        isProtectionAllowed:
+                            envIdToEnvApprovalConfigurationMap?.[BASE_CONFIGURATION_ENV_ID]?.isApprovalApplicable,
                         required: true,
                     },
                     {
@@ -270,12 +282,6 @@ export const getNavItems = (
                         flowCompletionPercent: completedPercent,
                         currentStep: completedSteps,
                     },
-                    {
-                        title: 'Protect Configuration',
-                        href: `/app/${appId}/edit/${URLS.APP_CONFIG_PROTECTION}`,
-                        stage: STAGE_NAME.PROTECT_CONFIGURATION,
-                        isLocked: false,
-                    },
                     {
                         title: 'Environment Override',
                         href: `/app/${appId}/edit/env-override`,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfiguration.provider.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfiguration.provider.tsx
index 456f0f862f..36206cafc2 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfiguration.provider.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfiguration.provider.tsx
@@ -59,7 +59,6 @@ export const AppConfigurationProvider = (props: AppConfigurationProviderProps) =
             hideConfigHelp,
             workflowsRes: state.workflowsRes,
             getWorkflows,
-            isBaseConfigProtected: state.isBaseConfigProtected,
             reloadEnvironments,
             isGitOpsConfigurationRequired,
             isUnlocked: state.isUnlocked,
@@ -69,7 +68,7 @@ export const AppConfigurationProvider = (props: AppConfigurationProviderProps) =
             environments: state.environmentList,
             userRole,
             setRepoState: setShowRepoOnDelete,
-            configProtectionData: state.configProtectionData,
+            envIdToEnvApprovalConfigurationMap: state.envIdToEnvApprovalConfigurationMap,
             filteredEnvIds,
             reloadAppConfig,
             lastUnlockedStage: state.redirectionUrl,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx
index 5e684c046c..1125954eb9 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx
@@ -17,11 +17,17 @@
 import React, { lazy, Suspense } from 'react'
 import { useRouteMatch, useHistory, Route, Switch, Redirect, useLocation, generatePath } from 'react-router-dom'
 
-import { Progressing, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    Progressing,
+    EnvResourceType,
+    BASE_CONFIGURATION_ENV_ID,
+    ApprovalConfigDataKindType,
+    getIsApprovalPolicyConfigured,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Next } from '@Icons/ic-arrow-forward.svg'
 import { URLS } from '@Config/index'
-import { ErrorBoundary, importComponentFromFELibrary, useAppContext } from '@Components/common'
+import { ErrorBoundary, useAppContext } from '@Components/common'
 import ExternalLinks from '@Components/externalLinks/ExternalLinks'
 import { CMSecretComponentType } from '@Pages/Shared/ConfigMapSecret/types'
 import { ConfigMapSecretWrapper } from '@Pages/Shared/ConfigMapSecret/ConfigMapSecret.wrapper'
@@ -39,8 +45,6 @@ const WorkflowEdit = lazy(() => import('@Components/workflowEditor/workflowEdito
 const EnvironmentOverride = lazy(() => import('@Pages/Shared/EnvironmentOverride/EnvironmentOverride'))
 const UserGitRepoConfiguration = lazy(() => import('@Components/gitOps/UserGitRepConfiguration'))
 
-const ConfigProtectionView = importComponentFromFELibrary('ConfigProtectionView')
-
 const NextButton: React.FC<NextButtonProps> = ({ isCiPipeline, navItems, currentStageName, isDisabled }) => {
     const history = useHistory()
     const index = navItems.findIndex((item) => item.stage === currentStageName)
@@ -82,18 +86,20 @@ const AppComposeRouter = () => {
         toggleRepoSelectionTippy,
         setRepoState,
         isJobView,
-        isBaseConfigProtected,
         reloadEnvironments,
-        configProtectionData,
         filteredEnvIds,
         isGitOpsConfigurationRequired,
         reloadAppConfig,
         lastUnlockedStage,
         envConfig,
         fetchEnvConfig,
+        envIdToEnvApprovalConfigurationMap,
     } = useAppConfigurationContext()
     const { currentAppName } = useAppContext()
 
+    const approvalConfigMapForBaseConfiguration =
+        envIdToEnvApprovalConfigurationMap?.[BASE_CONFIGURATION_ENV_ID]?.approvalConfigurationMap
+
     const renderJobViewRoutes = (): JSX.Element => (
         // currently the logic for redirection to next unlocked stage is in respondOnSuccess function can be done for MaterialList also
         <Switch>
@@ -132,7 +138,7 @@ const AppComposeRouter = () => {
                 <Route key={`${path}/${URLS.APP_CM_CONFIG}`} path={`${path}/${URLS.APP_CM_CONFIG}/:name?`}>
                     <ConfigMapSecretWrapper
                         isJob
-                        isProtected={false}
+                        isApprovalPolicyConfigured={false}
                         reloadEnvironments={reloadEnvironments}
                         envConfig={envConfig}
                         fetchEnvConfig={fetchEnvConfig}
@@ -144,7 +150,7 @@ const AppComposeRouter = () => {
                 <Route key={`${path}/${URLS.APP_CS_CONFIG}`} path={`${path}/${URLS.APP_CS_CONFIG}/:name?`}>
                     <ConfigMapSecretWrapper
                         isJob
-                        isProtected={false}
+                        isApprovalPolicyConfigured={false}
                         componentType={CMSecretComponentType.Secret}
                         reloadEnvironments={reloadEnvironments}
                         envConfig={envConfig}
@@ -165,6 +171,7 @@ const AppComposeRouter = () => {
                             fetchEnvConfig={fetchEnvConfig}
                             onErrorRedirectURL={lastUnlockedStage}
                             appName={currentAppName}
+                            appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                         />
                     )}
                 </Route>,
@@ -204,7 +211,9 @@ const AppComposeRouter = () => {
                     <DeploymentTemplate
                         respondOnSuccess={respondOnSuccess}
                         isCiPipeline={isCiPipeline}
-                        isProtected={isBaseConfigProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.deploymentTemplate],
+                        )}
                         reloadEnvironments={reloadEnvironments}
                         fetchEnvConfig={fetchEnvConfig}
                     />
@@ -224,17 +233,6 @@ const AppComposeRouter = () => {
                     />
                 </Route>
             )}
-            {isUnlocked.workflowEditor && ConfigProtectionView && (
-                <Route path={`${path}/${URLS.APP_CONFIG_PROTECTION}`}>
-                    <ConfigProtectionView
-                        appId={Number(appId)}
-                        envList={environments}
-                        reloadEnvironments={reloadEnvironments}
-                        configProtectionData={configProtectionData}
-                        isBaseConfigProtected={isBaseConfigProtected}
-                    />
-                </Route>
-            )}
             {isUnlocked.workflowEditor && [
                 <Route
                     key={`${path}/${URLS.APP_WORKFLOW_CONFIG}`}
@@ -252,7 +250,9 @@ const AppComposeRouter = () => {
                 </Route>,
                 <Route key={`${path}/${URLS.APP_CM_CONFIG}`} path={`${path}/${URLS.APP_CM_CONFIG}/:name?`}>
                     <ConfigMapSecretWrapper
-                        isProtected={isBaseConfigProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configMap],
+                        )}
                         reloadEnvironments={reloadEnvironments}
                         envConfig={envConfig}
                         fetchEnvConfig={fetchEnvConfig}
@@ -263,7 +263,9 @@ const AppComposeRouter = () => {
                 </Route>,
                 <Route key={`${path}/${URLS.APP_CS_CONFIG}`} path={`${path}/${URLS.APP_CS_CONFIG}/:name?`}>
                     <ConfigMapSecretWrapper
-                        isProtected={isBaseConfigProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigMapForBaseConfiguration?.[ApprovalConfigDataKindType.configSecret],
+                        )}
                         componentType={CMSecretComponentType.Secret}
                         reloadEnvironments={reloadEnvironments}
                         envConfig={envConfig}
@@ -286,6 +288,7 @@ const AppComposeRouter = () => {
                             fetchEnvConfig={fetchEnvConfig}
                             onErrorRedirectURL={lastUnlockedStage}
                             appName={currentAppName}
+                            appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                         />
                     )}
                 </Route>,
@@ -310,16 +313,15 @@ const AppComposeRouter = () => {
                             <DeploymentConfigCompare
                                 type="app"
                                 appName={currentAppName}
-                                environments={environments.map(({ environmentId, environmentName, isProtected }) => ({
+                                environments={environments.map(({ environmentId, environmentName }) => ({
                                     id: environmentId,
-                                    isProtected,
                                     name: environmentName,
                                 }))}
-                                isBaseConfigProtected={isBaseConfigProtected}
                                 goBackURL={goBackURL}
                                 getNavItemHref={(resourceType, resourceName) =>
                                     `${generatePath(match.path, { ...match.params, resourceType, resourceName })}${location.search}`
                                 }
+                                appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                             />
                         )
                     }}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx
index 159987d9f3..3555cd8ed8 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/ConfigToolbar.tsx
@@ -95,10 +95,14 @@ const ConfigToolbar = ({
     resolveScopedVariables,
 
     configHeaderTab,
-    isProtected = false,
+    isApprovalPolicyConfigured = false,
     isApprovalPending,
     isDraftPresent,
-    approvalUsers,
+    draftId,
+    draftVersionId,
+    requestedUserId,
+    handleReload,
+    userApprovalMetadata,
     disableAllActions = false,
     parsingError = '',
     restoreLastSavedYAML,
@@ -114,7 +118,7 @@ const ConfigToolbar = ({
     }
 
     const isCompareView = !!(
-        isProtected &&
+        isApprovalPolicyConfigured &&
         configHeaderTab === ConfigHeaderTabType.VALUES &&
         selectedProtectionViewTab === ProtectConfigTabsType.COMPARE
     )
@@ -122,23 +126,28 @@ const ConfigToolbar = ({
     const isPublishedValuesView = !!(
         configHeaderTab === ConfigHeaderTabType.VALUES &&
         selectedProtectionViewTab === ProtectConfigTabsType.PUBLISHED &&
-        isProtected &&
+        isApprovalPolicyConfigured &&
         isDraftPresent
     )
 
     const isEditView = !!(
         configHeaderTab === ConfigHeaderTabType.VALUES &&
-        (isProtected && isDraftPresent ? selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT : true)
+        (isApprovalPolicyConfigured && isDraftPresent
+            ? selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT
+            : true)
     )
 
     const showProtectedTabs =
-        isProtected && isDraftPresent && configHeaderTab === ConfigHeaderTabType.VALUES && !!ProtectionViewTabGroup
+        isApprovalPolicyConfigured &&
+        isDraftPresent &&
+        configHeaderTab === ConfigHeaderTabType.VALUES &&
+        !!ProtectionViewTabGroup
 
     const getLHSActionNodes = (): JSX.Element => {
         if (configHeaderTab === ConfigHeaderTabType.INHERITED) {
             return (
                 <div className="flexbox dc__align-items-center dc__gap-6">
-                    <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink" />
+                    <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink scn-6" />
                     <span className="cn-9 fs-12 fw-4 lh-20">Inherited from</span>
                     <BaseConfigurationNavigation baseConfigurationURL={baseConfigurationURL} />
                 </div>
@@ -149,7 +158,7 @@ const ConfigToolbar = ({
             <>
                 {headerMessage && configHeaderTab === ConfigHeaderTabType.VALUES && !showProtectedTabs && (
                     <div className="flexbox dc__align-items-center dc__gap-6">
-                        <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink" />
+                        <ICInfoOutlineGrey className="p-2 icon-dim-20 dc__no-shrink scn-6" />
                         <span className="cn-9 fs-12 fw-4 lh-20">{headerMessage}</span>
                     </div>
                 )}
@@ -199,13 +208,21 @@ const ConfigToolbar = ({
         const shouldRenderCommentsView = !!isDraftPresent
         const hasNothingToRender = !shouldRenderApproverInfoTippy && !shouldRenderCommentsView
 
-        if (!isProtected || hasNothingToRender) {
+        if (!isApprovalPolicyConfigured || hasNothingToRender) {
             return null
         }
 
         return (
             <>
-                {shouldRenderApproverInfoTippy && <ConfigApproversInfoTippy approvalUsers={approvalUsers} />}
+                {shouldRenderApproverInfoTippy && (
+                    <ConfigApproversInfoTippy
+                        requestedUserId={requestedUserId}
+                        userApprovalMetadata={userApprovalMetadata}
+                        draftId={draftId}
+                        draftVersionId={draftVersionId}
+                        handleReload={handleReload}
+                    />
+                )}
                 {shouldRenderCommentsView && (
                     <ProtectConfigShowCommentsButton
                         areCommentsPresent={areCommentsPresent}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx
index 6da09360cb..bfb185e5df 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/DeploymentConfigCompare.tsx
@@ -14,6 +14,7 @@ import {
     getAppEnvDeploymentConfigList,
     getSelectPickerOptionByValue,
     EnvResourceType,
+    BASE_CONFIGURATION_ENV_ID,
     useMainContext,
     getCompareSecretsData,
     getAppEnvDeploymentConfig,
@@ -34,7 +35,6 @@ import {
     getPreviousDeploymentValue,
     parseCompareWithSearchParams,
     getEnvironmentConfigTypeOptions,
-    isEnvProtected,
     getConfigChartRefId,
     getManifestRequestValues,
     deploymentConfigDiffTabs,
@@ -55,8 +55,8 @@ export const DeploymentConfigCompare = ({
     type = 'app',
     goBackURL = '',
     overwriteNavHeading,
-    isBaseConfigProtected = false,
     getNavItemHref,
+    appOrEnvIdToResourceApprovalConfigurationMap,
 }: DeploymentConfigCompareProps) => {
     // HOOKS
     const { push } = useHistory()
@@ -114,6 +114,8 @@ export const DeploymentConfigCompare = ({
             }),
         [type, compareWith, compareTo, appId, envId, environments],
     )
+    const isBaseConfigProtected =
+        appOrEnvIdToResourceApprovalConfigurationMap?.[BASE_CONFIGURATION_ENV_ID]?.isApprovalApplicable
 
     // STATES
     const [selectedTab, setSelectedTab] = useState(
@@ -438,40 +440,60 @@ export const DeploymentConfigCompare = ({
         onChange: onCompareEnvironmentChange,
     })
 
-    const renderEnvironmentConfigTypeSelectorProps = (isCompare?: boolean) => ({
-        id: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
-        options: getEnvironmentConfigTypeOptions(
-            isCompare ? compareEnvOptions?.previousDeployments : currentEnvOptions?.previousDeployments,
-            isEnvProtected(environments, isCompare ? compareWith : compareTo, isBaseConfigProtected),
-            isManifestView,
-        ),
-        placeholder: 'Select State',
-        classNamePrefix: 'environment-config-type-selector',
-        inputId: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
-        name: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
-        variant: SelectPickerVariantType.BORDER_LESS,
-        isSearchable: false,
-        disableDescriptionEllipsis: true,
-        value: getSelectPickerOptionByValue(
-            getEnvironmentConfigTypeOptions(
+    const getIdentifierForApprovalConfig = (isCompare: boolean) => {
+        if (isCompare) {
+            if (type === 'appGroup') {
+                return compareWithAppId
+            }
+
+            return compareWithEnvId
+        }
+        if (type === 'appGroup') {
+            return compareToAppId
+        }
+        return compareToEnvId
+    }
+
+    const renderEnvironmentConfigTypeSelectorProps = (isCompare?: boolean) => {
+        const identifier = getIdentifierForApprovalConfig(isCompare)
+        const isEnvProtected =
+            appOrEnvIdToResourceApprovalConfigurationMap?.[identifier]?.isApprovalApplicable ?? isBaseConfigProtected
+
+        return {
+            id: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
+            options: getEnvironmentConfigTypeOptions(
                 isCompare ? compareEnvOptions?.previousDeployments : currentEnvOptions?.previousDeployments,
-                isEnvProtected(environments, isCompare ? compareWith : compareTo, isBaseConfigProtected),
+                isEnvProtected,
                 isManifestView,
             ),
-            !isCompare
-                ? getPreviousDeploymentOptionValue(identifierId, pipelineId, manifestChartRefId) || configType
-                : getPreviousDeploymentOptionValue(
-                      compareWithIdentifierId,
-                      compareWithPipelineId,
-                      compareWithManifestChartRefId,
-                  ) || compareWithConfigType,
-            {
-                label: BASE_CONFIGURATIONS.name,
-                value: '',
-            },
-        ),
-        onChange: onEnvironmentConfigTypeChange(isCompare),
-    })
+            placeholder: 'Select State',
+            classNamePrefix: 'environment-config-type-selector',
+            inputId: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
+            name: `environment-config-type-selector-${isCompare ? 'compare' : 'current'}`,
+            variant: SelectPickerVariantType.BORDER_LESS,
+            isSearchable: false,
+            disableDescriptionEllipsis: true,
+            value: getSelectPickerOptionByValue(
+                getEnvironmentConfigTypeOptions(
+                    isCompare ? compareEnvOptions?.previousDeployments : currentEnvOptions?.previousDeployments,
+                    isEnvProtected,
+                    isManifestView,
+                ),
+                !isCompare
+                    ? getPreviousDeploymentOptionValue(identifierId, pipelineId, manifestChartRefId) || configType
+                    : getPreviousDeploymentOptionValue(
+                          compareWithIdentifierId,
+                          compareWithPipelineId,
+                          compareWithManifestChartRefId,
+                      ) || compareWithConfigType,
+                {
+                    label: BASE_CONFIGURATIONS.name,
+                    value: '',
+                },
+            ),
+            onChange: onEnvironmentConfigTypeChange(isCompare),
+        }
+    }
 
     const deploymentConfigDiffSelectors: DeploymentConfigDiffProps['selectorsConfig'] = {
         primaryConfig: [
@@ -481,8 +503,10 @@ export const DeploymentConfigCompare = ({
                 selectPickerProps: renderCompareEnvironmentSelectorProps(),
             },
             ...(compareWithConfigType !== AppEnvDeploymentConfigType.DEFAULT_VERSION &&
-            (compareEnvOptions?.previousDeployments.length ||
-                isEnvProtected(environments, compareWith, isBaseConfigProtected))
+            ((compareEnvOptions?.previousDeployments.length ||
+                appOrEnvIdToResourceApprovalConfigurationMap?.[getIdentifierForApprovalConfig(true)]
+                    ?.isApprovalApplicable) ??
+                isBaseConfigProtected)
                 ? [
                       {
                           id: `environment-config-type-selector-compare`,
@@ -498,8 +522,10 @@ export const DeploymentConfigCompare = ({
                 type: 'string',
                 text: compareTo || BASE_CONFIGURATIONS.name,
             },
-            ...((currentEnvOptions?.previousDeployments.length ||
-            isEnvProtected(environments, compareTo, isBaseConfigProtected)
+            ...(((currentEnvOptions?.previousDeployments.length ||
+                appOrEnvIdToResourceApprovalConfigurationMap?.[getIdentifierForApprovalConfig(false)]
+                    ?.isApprovalApplicable) ??
+            isBaseConfigProtected
                 ? [
                       {
                           id: `environment-config-type-selector-current`,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/utils.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/utils.ts
index 47e8d5a2e6..37a568234f 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/utils.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentConfigCompare/utils.ts
@@ -49,12 +49,6 @@ export const getPreviousDeploymentValue = (value: string) => {
 export const getEnvironmentIdByEnvironmentName = (environments: EnvironmentOptionType[], name: string) =>
     environments.find(({ name: _name }) => name === _name)?.id ?? BASE_CONFIGURATIONS.id
 
-export const isEnvProtected = (
-    environments: EnvironmentOptionType[],
-    envName: string,
-    isBaseConfigProtected?: boolean,
-) => environments.find(({ name }) => name === envName)?.isProtected ?? isBaseConfigProtected
-
 /**
  * Returns the application and environment IDs for comparison based on the given parameters.
  *
@@ -216,7 +210,7 @@ export const getCompareEnvironmentSelectorOptions = (
  */
 export const getEnvironmentConfigTypeOptions = (
     previousDeploymentsList: TemplateListDTO[] = [],
-    isProtected = false,
+    isApprovalPolicyConfigured = false,
     isManifestView = false,
 ): OptionsOrGroups<SelectPickerOptionType, GroupBase<SelectPickerOptionType>> => [
     {
@@ -224,7 +218,7 @@ export const getEnvironmentConfigTypeOptions = (
         value: AppEnvDeploymentConfigType.PUBLISHED_ONLY,
         description: 'Configurations that will be deployed in the next deployment',
     },
-    ...(isProtected
+    ...(isApprovalPolicyConfigured
         ? [
               {
                   label: 'Drafts only',
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
index 75d5880024..19bc8c8700 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/DeploymentTemplate.tsx
@@ -1,6 +1,7 @@
 import { useEffect, SyntheticEvent, useMemo, useReducer, Reducer, useRef } from 'react'
 import ReactGA from 'react-ga4'
 import {
+    BASE_CONFIGURATION_ENV_ID,
     BaseURLParams,
     ConfigurationType,
     DeploymentChartVersionType,
@@ -41,10 +42,11 @@ import {
     abortPreviousRequests,
     getIsRequestAborted,
     DraftAction,
+    checkIfPathIsMatching,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Prompt, useLocation, useParams } from 'react-router-dom'
 import YAML from 'yaml'
-import { checkIfPathIsMatching, FloatingVariablesSuggestions, importComponentFromFELibrary } from '@Components/common'
+import { FloatingVariablesSuggestions, importComponentFromFELibrary } from '@Components/common'
 import { getModuleInfo } from '@Components/v2/devtronStackManager/DevtronStackManager.service'
 import { URLS } from '@Config/routes'
 import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
@@ -62,7 +64,7 @@ import {
     UpdateBaseDTPayloadType,
     UpdateEnvironmentDTPayloadType,
 } from './types'
-import { BASE_DEPLOYMENT_TEMPLATE_ENV_ID, NO_SCOPED_VARIABLES_MESSAGE } from './constants'
+import { NO_SCOPED_VARIABLES_MESSAGE } from './constants'
 import DeploymentTemplateOptionsHeader from './DeploymentTemplateOptionsHeader'
 import DeploymentTemplateForm from './DeploymentTemplateForm'
 import DeploymentTemplateCTA from './DeploymentTemplateCTA'
@@ -125,7 +127,7 @@ const getConfigAfterOperations = importComponentFromFELibrary('getConfigAfterOpe
 const DeploymentTemplate = ({
     respondOnSuccess = noop,
     isCiPipeline = false,
-    isProtected,
+    isApprovalPolicyConfigured,
     reloadEnvironments,
     environmentName,
     clusterId,
@@ -188,7 +190,7 @@ const DeploymentTemplate = ({
 
     const isDryRunView = configHeaderTab === ConfigHeaderTabType.DRY_RUN
     const isInheritedView = configHeaderTab === ConfigHeaderTabType.INHERITED
-    const isDraftAvailable = isProtected && !!draftTemplateData?.latestDraft
+    const isDraftAvailable = isApprovalPolicyConfigured && !!draftTemplateData?.latestDraft
 
     const isPublishedValuesView = !!(
         isDraftAvailable &&
@@ -197,7 +199,7 @@ const DeploymentTemplate = ({
             (isDryRunView && dryRunEditorMode === DryRunEditorMode.PUBLISHED_VALUES))
     )
     const isCompareView = !!(
-        isProtected &&
+        isApprovalPolicyConfigured &&
         configHeaderTab === ConfigHeaderTabType.VALUES &&
         selectedProtectionViewTab === ProtectConfigTabsType.COMPARE
     )
@@ -232,7 +234,7 @@ const DeploymentTemplate = ({
 
     const isEditMode =
         configHeaderTab === ConfigHeaderTabType.VALUES &&
-        (!isProtected || selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT)
+        (!isApprovalPolicyConfigured || selectedProtectionViewTab === ProtectConfigTabsType.EDIT_DRAFT)
 
     const isGuiSupported = isEditMode && !showDeleteOverrideDraftEmptyState
 
@@ -870,7 +872,7 @@ const DeploymentTemplate = ({
         const [draftPromiseResponse, publishedAndBaseTemplateDataResponse] = await Promise.allSettled([
             getDraftByResourceName(
                 +appId,
-                +envId || BASE_DEPLOYMENT_TEMPLATE_ENV_ID,
+                +envId || BASE_CONFIGURATION_ENV_ID,
                 3,
                 getDeploymentTemplateResourceName(environmentName),
             ),
@@ -967,7 +969,7 @@ const DeploymentTemplate = ({
             reloadEnvironments()
             const [chartRefsDataResponse, lockedKeysConfigResponse] = await Promise.allSettled([
                 getChartList({ appId, envId }),
-                getJsonPath ? getJsonPath(appId, envId || BASE_DEPLOYMENT_TEMPLATE_ENV_ID) : Promise.resolve(null),
+                getJsonPath ? getJsonPath(appId, envId || BASE_CONFIGURATION_ENV_ID) : Promise.resolve(null),
             ])
 
             if (chartRefsDataResponse.status === 'rejected') {
@@ -982,7 +984,7 @@ const DeploymentTemplate = ({
                 ? structuredClone(lockedKeysConfigResponse.value.result)
                 : structuredClone(DEFAULT_LOCKED_KEYS_CONFIG)
 
-            const shouldFetchDraftDetails = isProtected && typeof getDraftByResourceName === 'function'
+            const shouldFetchDraftDetails = isApprovalPolicyConfigured && typeof getDraftByResourceName === 'function'
 
             if (shouldFetchDraftDetails) {
                 await handleLoadProtectedDeploymentTemplate(chartRefsData, lockedKeysConfig)
@@ -1018,7 +1020,7 @@ const DeploymentTemplate = ({
             },
         })
 
-        fetchEnvConfig(+envId || BASE_DEPLOYMENT_TEMPLATE_ENV_ID)
+        fetchEnvConfig(+envId || BASE_CONFIGURATION_ENV_ID)
         reloadEnvironments()
         await handleInitialDataLoad()
     }
@@ -1156,7 +1158,7 @@ const DeploymentTemplate = ({
             }
         }
 
-        if (isProtected) {
+        if (isApprovalPolicyConfigured) {
             dispatch({
                 type: DeploymentTemplateActionType.SHOW_PROTECTED_SAVE_MODAL,
             })
@@ -1168,7 +1170,7 @@ const DeploymentTemplate = ({
     }
 
     const handleTriggerSaveFromLockedModal = async () => {
-        if (isProtected) {
+        if (isApprovalPolicyConfigured) {
             dispatch({
                 type: DeploymentTemplateActionType.SHOW_PROTECTED_SAVE_MODAL,
             })
@@ -1338,7 +1340,7 @@ const DeploymentTemplate = ({
             dispatch({
                 type: DeploymentTemplateActionType.SHOW_DELETE_OVERRIDE_DIALOG,
                 payload: {
-                    isProtected,
+                    isApprovalPolicyConfigured,
                 },
             })
             return
@@ -1477,7 +1479,7 @@ const DeploymentTemplate = ({
             handleDiscardDraft: handleOpenDiscardDraftPopup,
             handleShowEditHistory,
             showDeleteOverrideDraftEmptyState,
-            isProtected,
+            isApprovalPolicyConfigured,
             isDeleteOverrideDraftPresent: isDeleteOverrideDraft,
         }),
         popupNodeType,
@@ -1625,7 +1627,7 @@ const DeploymentTemplate = ({
 
         const isDisabled = isLoadingSideEffects || resolveScopedVariables || !!currentEditorTemplateData.parsingError
 
-        if (isProtected && ProtectedDeploymentTemplateCTA) {
+        if (isApprovalPolicyConfigured && ProtectedDeploymentTemplateCTA) {
             return (
                 <ProtectedDeploymentTemplateCTA
                     isPublishedView={isPublishedValuesView}
@@ -1677,7 +1679,7 @@ const DeploymentTemplate = ({
 
         return (
             <div className="flexbox dc__gap-6 dc__align-items-center dc__border-top-n1 bc-n50 py-6 px-10">
-                <ICInfoOutlineGrey className="flex icon-dim-16 p-2 dc__no-shrink" />
+                <ICInfoOutlineGrey className="flex icon-dim-16 dc__no-shrink scn-6" />
                 <div className="flexbox">
                     <span className="cn-8 fs-12 fw-4 lh-20 dc__truncate">
                         Application metrics is {!baseDeploymentTemplateData?.isAppMetricsEnabled ? 'not' : ''} enabled
@@ -1760,14 +1762,18 @@ const DeploymentTemplate = ({
                         disableAllActions={isLoadingSideEffects}
                         parsingError={currentEditorTemplateData?.parsingError}
                         configHeaderTab={configHeaderTab}
-                        isProtected={isProtected}
+                        isApprovalPolicyConfigured={isApprovalPolicyConfigured}
                         isApprovalPending={isApprovalPending}
                         isDraftPresent={isDraftAvailable}
-                        approvalUsers={draftTemplateData?.latestDraft?.approvers}
+                        userApprovalMetadata={draftTemplateData?.latestDraft?.userApprovalMetadata}
                         isPublishedConfigPresent={isPublishedConfigPresent}
                         restoreLastSavedYAML={restoreLastSavedTemplate}
                         showEnableReadMeButton={isEditMode}
                         showDeleteOverrideDraftEmptyState={showDeleteOverrideDraftEmptyState}
+                        draftId={draftTemplateData?.latestDraft?.draftId}
+                        draftVersionId={draftTemplateData?.latestDraft?.draftVersionId}
+                        handleReload={handleReload}
+                        requestedUserId={draftTemplateData?.latestDraft?.requestedUserId}
                     >
                         {!showNoPublishedVersionEmptyState && (
                             <DeploymentTemplateOptionsHeader
@@ -1859,14 +1865,14 @@ const DeploymentTemplate = ({
                             state,
                         })}
                         appId={appId}
-                        envId={+envId || BASE_DEPLOYMENT_TEMPLATE_ENV_ID}
+                        envId={+envId || BASE_CONFIGURATION_ENV_ID}
                     />
                 )}
 
                 {SaveChangesModal && showSaveChangesModal && (
                     <SaveChangesModal
                         appId={Number(appId)}
-                        envId={+envId || BASE_DEPLOYMENT_TEMPLATE_ENV_ID}
+                        envId={+envId || BASE_CONFIGURATION_ENV_ID}
                         resourceType={3}
                         resourceName={getDeploymentTemplateResourceName(environmentName)}
                         prepareDataToSave={prepareDataToSave}
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts
index 2fd587e73e..9410da7f72 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/constants.ts
@@ -1,6 +1,5 @@
 import { DOCUMENTATION } from '@Config/constants'
 
-export const BASE_DEPLOYMENT_TEMPLATE_ENV_ID = -1
 export const PROTECT_BASE_DEPLOYMENT_TEMPLATE_IDENTIFIER_DTO = 'BaseDeploymentTemplate' as const
 
 export const CHART_TYPE_TAB_KEYS = { DEVTRON_CHART: 'devtronChart', CUSTOM_CHARTS: 'customCharts' }
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/deploymentTemplateReducer.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/deploymentTemplateReducer.ts
index 9a786e065a..a20c16bc6d 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/deploymentTemplateReducer.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/deploymentTemplateReducer.ts
@@ -199,7 +199,7 @@ export type DeploymentTemplateActionState =
       }
     | {
           type: DeploymentTemplateActionType.SHOW_DELETE_OVERRIDE_DIALOG
-          payload: Pick<DeploymentTemplateProps, 'isProtected'>
+          payload: Pick<DeploymentTemplateProps, 'isApprovalPolicyConfigured'>
       }
     | {
           type: DeploymentTemplateActionType.SAVE_ERROR
@@ -761,8 +761,8 @@ export const deploymentTemplateReducer = (
         case DeploymentTemplateActionType.SHOW_DELETE_OVERRIDE_DIALOG:
             return {
                 ...state,
-                showDeleteDraftOverrideDialog: action.payload.isProtected,
-                showDeleteOverrideDialog: !action.payload.isProtected,
+                showDeleteDraftOverrideDialog: action.payload.isApprovalPolicyConfigured,
+                showDeleteOverrideDialog: !action.payload.isApprovalPolicyConfigured,
             }
 
         case DeploymentTemplateActionType.DELETE_LOCAL_OVERRIDE:
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/types.ts
index 4cdd0e1ef0..aa1cc67b55 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/types.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/types.ts
@@ -47,7 +47,7 @@ type EnvOverrideDeploymentTemplateProps = {
 }
 
 export type DeploymentTemplateProps = {
-    isProtected: boolean
+    isApprovalPolicyConfigured: boolean
     reloadEnvironments: () => void
     fetchEnvConfig: (environmentId: number) => void
 } & (BaseDeploymentTemplateProps | EnvOverrideDeploymentTemplateProps)
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
index b3b7e35a7a..c568d71d8d 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/types.ts
@@ -5,6 +5,7 @@ import {
     ConfigToolbarPopupNodeType,
     DeploymentHistorySingleValue,
     DeploymentTemplateConfigState,
+    DraftMetadataDTO,
     OverrideMergeStrategyType,
     ProtectConfigTabsType,
     SelectPickerOptionType,
@@ -72,7 +73,10 @@ type ConfigToolbarReadMeProps =
           handleEnableReadmeView?: never
       }
 
-export type ConfigToolbarProps = {
+export type ConfigToolbarProps = Pick<
+    DraftMetadataDTO,
+    'draftId' | 'draftVersionId' | 'userApprovalMetadata' | 'requestedUserId'
+> & {
     configHeaderTab: ConfigHeaderTabType
     handleToggleScopedVariablesView: () => void
     resolveScopedVariables: boolean
@@ -113,13 +117,12 @@ export type ConfigToolbarProps = {
     /**
      * @default false
      */
-    isProtected?: boolean
+    isApprovalPolicyConfigured?: boolean
     /**
      * @default false
      */
     isApprovalPending?: boolean
     isDraftPresent?: boolean
-    approvalUsers: string[]
     /**
      * @default - false
      * If given would disable all the actions
@@ -135,6 +138,7 @@ export type ConfigToolbarProps = {
     isPublishedConfigPresent?: boolean
     headerMessage?: string
     showDeleteOverrideDraftEmptyState: boolean
+    handleReload: () => void
 } & ConfigToolbarReadMeProps
 
 interface ConfigToolbarPopupMenuLockedConfigDataType {
@@ -166,7 +170,7 @@ export interface GetConfigToolbarPopupConfigProps {
     isLoading: boolean
     isDraftAvailable: boolean
     handleShowEditHistory: () => void
-    isProtected?: boolean
+    isApprovalPolicyConfigured?: boolean
     isDeletable?: boolean
     isDeleteOverrideDraftPresent?: boolean
     isDeleteDisabled?: boolean
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils.tsx
index 43bba114bc..525b9c80f9 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils.tsx
@@ -118,7 +118,7 @@ export const getConfigToolbarPopupConfig = ({
     isLoading,
     isDraftAvailable,
     handleShowEditHistory,
-    isProtected = false,
+    isApprovalPolicyConfigured = false,
     isDeletable = false,
     isDeleteOverrideDraftPresent = false,
     isDeleteDisabled = false,
@@ -171,7 +171,7 @@ export const getConfigToolbarPopupConfig = ({
 
     if (isDeletable && configHeaderTab === ConfigHeaderTabType.VALUES) {
         secondConfigSegment.push({
-            text: `Delete${isProtected ? '...' : ''}`,
+            text: `Delete${isApprovalPolicyConfigured ? '...' : ''}`,
             onClick: handleDelete,
             dataTestId: 'delete-config-map-secret',
             disabled: isLoading || isDeleteDisabled,
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx
index 97ca0a6609..041f7d0590 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/AppNavigation.tsx
@@ -30,7 +30,6 @@ import {
 import { DEVTRON_APPS_STEPS, STAGE_NAME } from '../AppConfig.types'
 import { URLS } from '../../../../../../config'
 import AppConfigurationCheckBox from './AppConfigurationCheckBox'
-import { importComponentFromFELibrary } from '../../../../../../components/common'
 import { DeleteComponentsName, GIT_MATERIAL_IN_USE_MESSAGE } from '../../../../../../config/constantMessaging'
 import DockerFileInUse from '../../../../../../assets/img/ic-dockerfile-in-use.png'
 
@@ -39,8 +38,6 @@ import { useAppConfigurationContext } from '../AppConfiguration.provider'
 import { renderNavItem } from './Navigation.helper'
 import { EnvConfigurationsNav } from './EnvConfigurationsNav'
 
-const ConfigProtectionView = importComponentFromFELibrary('ConfigProtectionView')
-
 export const AppNavigation = () => {
     // HOOKS
     const { path } = useRouteMatch()
@@ -52,18 +49,17 @@ export const AppNavigation = () => {
         deleteApp,
         canShowExternalLinks,
         showCannotDeleteTooltip,
-        isWorkflowEditorUnlocked,
         toggleRepoSelectionTippy,
         getRepo,
         isJobView,
         hideConfigHelp,
-        isBaseConfigProtected,
         isGitOpsConfigurationRequired,
         environments,
         envConfig,
         fetchEnvConfig,
         isUnlocked,
         lastUnlockedStage,
+        envIdToEnvApprovalConfigurationMap,
     } = useAppConfigurationContext()
 
     // CONSTANTS
@@ -137,18 +133,17 @@ export const AppNavigation = () => {
                         key={`env-configurations-nav-${match.params.envId}`}
                         envConfig={envConfig}
                         fetchEnvConfig={fetchEnvConfig}
-                        environments={environments.map(({ environmentName, environmentId, isProtected }) => ({
+                        environments={environments.map(({ environmentName, environmentId }) => ({
                             id: environmentId,
-                            isProtected,
                             name: environmentName,
                         }))}
-                        isBaseConfigProtected={isBaseConfigProtected}
                         showBaseConfigurations
                         showDeploymentTemplate={!isJobView}
                         goBackURL={getValidBackURL()}
                         compareWithURL={`${path}/:envId(\\d+)?`}
                         showComparison={!isJobView && isUnlocked.workflowEditor}
                         isCMSecretLocked={!isUnlocked.workflowEditor}
+                        appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                     />
                 )}
             </Route>
@@ -177,18 +172,6 @@ export const AppNavigation = () => {
                             )
                         }
 
-                        if (item.stage === STAGE_NAME.PROTECT_CONFIGURATION) {
-                            return (
-                                isWorkflowEditorUnlocked &&
-                                ConfigProtectionView && (
-                                    <div key={item.stage}>
-                                        {!canShowExternalLinks && <div className="dc__border-bottom-n1 mt-8 mb-8" />}
-                                        {renderNavItem(item)}
-                                    </div>
-                                )
-                            )
-                        }
-
                         if (
                             item.stage !== STAGE_NAME.ENV_OVERRIDE ||
                             (item.stage === STAGE_NAME.ENV_OVERRIDE && item.isLocked)
@@ -199,12 +182,17 @@ export const AppNavigation = () => {
                                     condition={showCannotDeleteTooltip && item.stage === STAGE_NAME.CI_CONFIG}
                                     wrap={getEnvOverrideTippy}
                                 >
-                                    {item.required && renderNavItem(item, isBaseConfigProtected)}
+                                    {item.required && renderNavItem(item, isJobView)}
                                 </ConditionalWrap>
                             )
                         }
 
-                        return <EnvironmentOverrideRouter key={item.stage} />
+                        return (
+                            <EnvironmentOverrideRouter
+                                key={item.stage}
+                                envIdToEnvApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
+                            />
+                        )
                     })}
                     {isJobView && <div className="h-100" />}
                     <div className="dc__align-self-end">
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
index 2a853c6203..f039e46483 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx
@@ -4,6 +4,7 @@ import Tippy from '@tippyjs/react'
 import { GroupBase, OptionsOrGroups } from 'react-select'
 
 import {
+    BASE_CONFIGURATION_ENV_ID,
     Button,
     ButtonComponentType,
     ButtonStyleType,
@@ -24,7 +25,6 @@ import { ReactComponent as ICAdd } from '@Icons/ic-add.svg'
 import { ReactComponent as ICLocked } from '@Icons/ic-locked.svg'
 import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
 import { URLS } from '@Config/routes'
-import { ReactComponent as ProtectedIcon } from '@Icons/ic-shield-protect-fill.svg'
 import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'
 
 import { BASE_CONFIGURATIONS } from '../AppConfig.constants'
@@ -43,20 +43,21 @@ export const EnvConfigurationsNav = ({
     showDeploymentTemplate,
     envConfig,
     fetchEnvConfig,
-    isBaseConfigProtected,
-    environments,
+    environments: resourceList,
     goBackURL,
     paramToCheck = 'envId',
     showComparison,
     isCMSecretLocked,
     hideEnvSelector,
     compareWithURL,
+    appOrEnvIdToResourceApprovalConfigurationMap,
 }: EnvConfigurationsNavProps) => {
     // HOOKS
     const history = useHistory()
     const { pathname } = useLocation()
     const { path, params } = useRouteMatch<EnvConfigRouteParams>()
     const { envId } = params
+    const parsedResourceId = +params[paramToCheck]
 
     // STATES
     const [expandedIds, setExpandedIds] =
@@ -71,13 +72,12 @@ export const EnvConfigurationsNav = ({
     // CONSTANTS
     const { isLoading, config } = envConfig
     /** Current Environment Data. */
-    const environmentData =
-        environments.find((environment) => environment.id === +params[paramToCheck]) ||
+    const resourceData =
+        resourceList.find((resource) => resource.id === parsedResourceId) ||
         (showBaseConfigurations
             ? {
                   name: BASE_CONFIGURATIONS.name,
                   id: BASE_CONFIGURATIONS.id,
-                  isProtected: isBaseConfigProtected,
               }
             : null)
     const resourceType = resourceTypeBasedOnPath(pathname)
@@ -107,12 +107,12 @@ export const EnvConfigurationsNav = ({
     }
 
     useEffect(() => {
-        if (environmentData.id === BASE_CONFIGURATIONS.id && envId) {
+        if (resourceData.id === BASE_CONFIGURATIONS.id && envId) {
             // Removing `/env-override/:envId` from pathname, resulting path will be base configuration path.
             const [basePath, resourcePath] = pathname.split(`/${URLS.APP_ENV_OVERRIDE_CONFIG}/${envId}`)
             history.push(`${basePath}${resourcePath}`)
         }
-    }, [environmentData, envId])
+    }, [resourceData, envId])
 
     useEffect(() => {
         // Fetch the env configuration
@@ -125,10 +125,17 @@ export const EnvConfigurationsNav = ({
 
     useEffect(() => {
         if (!isLoading && config) {
-            const newEnvConfig = getEnvConfiguration(config, path, params, environmentData.isProtected)
+            const newEnvConfig = getEnvConfiguration(
+                config,
+                path,
+                params,
+                // For base configurations, the resource id is undefined
+                appOrEnvIdToResourceApprovalConfigurationMap?.[parsedResourceId || BASE_CONFIGURATION_ENV_ID]
+                    ?.approvalConfigurationMap,
+            )
             setUpdatedEnvConfig(isCreate ? addUnnamedNavLink(newEnvConfig) : newEnvConfig)
         }
-    }, [isLoading, config, pathname, isCreate])
+    }, [isLoading, config, pathname, isCreate, appOrEnvIdToResourceApprovalConfigurationMap])
 
     useEffect(() => {
         if (!isLoading && config) {
@@ -244,7 +251,6 @@ export const EnvConfigurationsNav = ({
               {
                   label: BASE_CONFIGURATIONS.name,
                   value: BASE_CONFIGURATIONS.id,
-                  endIcon: isBaseConfigProtected ? <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" /> : null,
               },
           ]
         : []
@@ -253,17 +259,16 @@ export const EnvConfigurationsNav = ({
         ...baseEnvOption,
         {
             label: paramToCheck === 'envId' ? 'Environments' : 'Applications',
-            options: environments.map(({ name, id, isProtected }) => ({
+            options: resourceList.map(({ name, id }) => ({
                 label: name,
                 value: id,
-                endIcon: isProtected ? <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" /> : null,
             })),
         },
     ]
 
     const onEnvSelect = ({ value }: SelectPickerOptionType<number>) => {
         // Exit early if the selected environment is the current one
-        if (environmentData.id === value) {
+        if (resourceData.id === value) {
             return
         }
 
@@ -309,19 +314,18 @@ export const EnvConfigurationsNav = ({
                     classNamePrefix="env-config-selector"
                     variant={SelectPickerVariantType.BORDER_LESS}
                     isClearable={false}
-                    value={getSelectPickerOptionByValue(envOptions, +params[paramToCheck], baseEnvOption[0])}
+                    value={getSelectPickerOptionByValue(envOptions, parsedResourceId, baseEnvOption[0])}
                     options={envOptions}
                     onChange={onEnvSelect}
                     placeholder="Select Environment"
                     showSelectedOptionIcon={false}
                 />
             </div>
-            {environmentData?.isProtected && <ProtectedIcon className="icon-dim-20 fcv-5 dc__no-shrink" />}
         </div>
     )
 
     const renderCompareWithBtn = () => {
-        const { name: compareTo } = environmentData
+        const { name: compareTo } = resourceData
 
         // Extract the resource name from the current pathname based on resourceType
         const resourceName = pathname.split(`/${resourceType}/`)[1]
@@ -358,7 +362,7 @@ export const EnvConfigurationsNav = ({
             {!hideEnvSelector && renderEnvSelector()}
             {showComparison && renderCompareWithBtn()}
             <div className="mw-none p-8 flex-grow-1 dc__overflow-auto">
-                {isLoading || !environmentData ? (
+                {isLoading || !resourceData ? (
                     ['90', '70', '50'].map((item) => <ShimmerText key={item} width={item} />)
                 ) : (
                     <>
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx
index cd053f8b23..f83f102ff5 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx
@@ -29,6 +29,7 @@ import {
     ToastManager,
     SelectPicker,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 import { URLS, DOCUMENTATION } from '../../../../../../config'
 import { usePrevious, createClusterEnvGroup } from '../../../../../../components/common'
 import { addJobEnvironment, deleteJobEnvironment, getCIConfig } from '../../../../../../services/service'
@@ -36,9 +37,8 @@ import { ReactComponent as Help } from '../../../../../../assets/icons/ic-help.s
 import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
 import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
 import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as ProtectedIcon } from '../../../../../../assets/icons/ic-shield-protect-fill.svg'
 import warn from '../../../../../../assets/icons/ic-warning.svg'
-import { JobEnvOverrideRouteProps } from '../AppConfig.types'
+import { AppConfigState, JobEnvOverrideRouteProps } from '../AppConfig.types'
 import { RESOURCE_ACTION_MENU } from '../../../../../../components/ResourceBrowser/Constants'
 import { renderNavItem } from './Navigation.helper'
 import { useAppConfigurationContext } from '../AppConfiguration.provider'
@@ -196,7 +196,7 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
                 to={`${URLS.APP_ENV_OVERRIDE_CONFIG}/${envOverride.environmentId}/${EnvResourceType.ConfigMap}`}
             >
                 <span className="dc__truncate">{envOverride.environmentName}</span>
-                {isEnvProtected && <ProtectedIcon className="icon-dim-20 fcv-5" />}
+                {isEnvProtected && <ICStamp className="icon-dim-20 scv-5 dc__no-shrink" />}
             </NavLink>
             {deletePopUpMenu()}
             {showDelete && showDeleteDialog(deletePipeline)}
@@ -204,7 +204,9 @@ const JobEnvOverrideRoute = ({ envOverride, ciPipelines, reload, isEnvProtected
     )
 }
 
-const EnvironmentOverrideRouter = () => {
+const EnvironmentOverrideRouter = ({
+    envIdToEnvApprovalConfigurationMap,
+}: Pick<AppConfigState, 'envIdToEnvApprovalConfigurationMap'>) => {
     const { pathname } = useLocation()
     const { appId } = useParams<{ appId: string }>()
     const previousPathName = usePrevious(pathname)
@@ -311,8 +313,11 @@ const EnvironmentOverrideRouter = () => {
         if (environments.length) {
             return (
                 <div className="w-100" style={{ height: 'calc(100% - 60px)' }} data-testid="env-override-list">
-                    {environments.map(
-                        (env) =>
+                    {environments.map((env) => {
+                        const isApprovalApplicable =
+                            envIdToEnvApprovalConfigurationMap?.[env.environmentId]?.isApprovalApplicable
+
+                        return (
                             !env.deploymentAppDeleteRequest && (
                                 <Fragment key={env.environmentId}>
                                     {isJobView ? (
@@ -321,21 +326,19 @@ const EnvironmentOverrideRouter = () => {
                                             envOverride={env}
                                             ciPipelines={ciPipelines}
                                             reload={reloadEnvData}
-                                            isEnvProtected={env.isProtected}
+                                            isEnvProtected={isApprovalApplicable}
                                         />
                                     ) : (
-                                        renderNavItem(
-                                            {
-                                                title: env.environmentName,
-                                                isProtectionAllowed: env.isProtected,
-                                                href: `${URLS.APP_ENV_OVERRIDE_CONFIG}/${env.environmentId}/${EnvResourceType.DeploymentTemplate}`,
-                                            },
-                                            env.isProtected,
-                                        )
+                                        renderNavItem({
+                                            title: env.environmentName,
+                                            isProtectionAllowed: isApprovalApplicable,
+                                            href: `${URLS.APP_ENV_OVERRIDE_CONFIG}/${env.environmentId}/${EnvResourceType.DeploymentTemplate}`,
+                                        })
                                     )}
                                 </Fragment>
-                            ),
-                    )}
+                            )
+                        )
+                    })}
                 </div>
             )
         }
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/Navigation.helper.tsx b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/Navigation.helper.tsx
index 857b1b3024..7005f2e400 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/Navigation.helper.tsx
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/Navigation.helper.tsx
@@ -1,11 +1,16 @@
 import { NavLink, generatePath } from 'react-router-dom'
 
-import { CollapsibleListItem, EnvResourceType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ApprovalConfigDataKindType,
+    ApprovalConfigDataType,
+    CollapsibleListItem,
+    EnvResourceType,
+    getIsApprovalPolicyConfigured,
+    ResourceIdToResourceApprovalPolicyConfigMapType,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Lock } from '@Icons/ic-locked.svg'
-import { ReactComponent as ProtectedIcon } from '@Icons/ic-shield-protect-fill.svg'
 import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
-import { ReactComponent as ICFileEdit } from '@Icons/ic-file-edit.svg'
 import { ResourceConfigStage, ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'
 
 import {
@@ -15,18 +20,24 @@ import {
     ExtendedCollapsibleListItem,
     EnvConfigObjectKey,
 } from '../AppConfig.types'
+import { RESOURCE_CONFIG_STATE_TO_ICON_CONFIG_MAP } from './constants'
 
-const renderNavItemIcon = (isLocked: boolean, isProtected: boolean, dataTestId: string) => {
+const renderNavItemIcon = (isLocked: boolean, isApprovalPolicyConfigured: boolean, dataTestId: string) => {
     if (isLocked) {
         return <Lock className="icon-dim-20 dc__no-shrink" data-testid={`${dataTestId}-lockicon`} />
     }
-    if (!isLocked && isProtected) {
-        return <ProtectedIcon className="icon-dim-20 fcv-5" data-testid={`${dataTestId}-protectedicon`} />
+    if (isApprovalPolicyConfigured) {
+        return <ICStamp className="icon-dim-20 scv-5 dc__no-shrink" data-testid={`${dataTestId}-protectedicon`} />
     }
     return null
 }
 
-export const renderNavItem = (item: CustomNavItemsType, isBaseConfigProtected?: boolean) => {
+/**
+ *
+ * @param item
+ * @param hideApprovalPolicyIcon Used to hide the policy icon (applicable for jobs atm)
+ */
+export const renderNavItem = (item: CustomNavItemsType, hideApprovalPolicyIcon?: boolean) => {
     const linkDataTestName = item.title.toLowerCase().split(' ').join('-')
 
     return (
@@ -42,7 +53,7 @@ export const renderNavItem = (item: CustomNavItemsType, isBaseConfigProtected?:
             to={item.href}
         >
             <span className="dc__truncate nav-text">{item.title}</span>
-            {renderNavItemIcon(item.isLocked, isBaseConfigProtected && item.isProtectionAllowed, linkDataTestName)}
+            {renderNavItemIcon(item.isLocked, !hideApprovalPolicyIcon && item.isProtectionAllowed, linkDataTestName)}
         </NavLink>
     )
 }
@@ -63,17 +74,6 @@ export const getNavigationPath = (
     href?: string,
 ) => `${generatePath(basePath, { ...params, resourceType })}${href ? `/${href}` : ''}`
 
-const getIconClassFromConfigState = (configState: ResourceConfigState) => {
-    switch (configState) {
-        case ResourceConfigState.Draft:
-            return 'scn-6'
-        case ResourceConfigState.ApprovalPending:
-            return 'scv-5'
-        default:
-            return ''
-    }
-}
-
 /**
  * Returns an object containing the appropriate icon, icon properties and tooltip properties based on the resource configuration state.
  *
@@ -82,19 +82,23 @@ const getIconClassFromConfigState = (configState: ResourceConfigState) => {
  */
 const getIcon = (
     configState: ResourceConfigState,
-    isProtected: boolean,
+    approvalConfig: ApprovalConfigDataType,
 ): CollapsibleListItem<'navLink'>['iconConfig'] => {
-    if (isProtected && configState !== ResourceConfigState.Published && configState !== ResourceConfigState.Unnamed) {
+    const isApprovalPolicyConfigured = getIsApprovalPolicyConfigured(approvalConfig)
+
+    if (isApprovalPolicyConfigured && configState !== ResourceConfigState.Unnamed) {
+        const { Icon, tippyContent, iconClass } = RESOURCE_CONFIG_STATE_TO_ICON_CONFIG_MAP[configState]
+
         return {
-            Icon: configState === ResourceConfigState.ApprovalPending ? ICStamp : ICFileEdit,
+            Icon,
             tooltipProps: {
-                content: configState === ResourceConfigState.ApprovalPending ? 'Approval pending' : 'Draft',
+                content: tippyContent,
                 placement: 'right',
                 arrow: false,
                 className: 'default-tt',
             },
             props: {
-                className: `p-2 dc__no-shrink ${getIconClassFromConfigState(configState)}`,
+                className: `p-2 dc__no-shrink ${iconClass ?? ''}`,
             },
         }
     }
@@ -113,7 +117,7 @@ export const getEnvConfiguration = (
     envConfig: EnvConfigType,
     basePath: string,
     params: EnvConfigRouteParams,
-    isProtected: boolean,
+    approvalConfigurationMapForEnv: ResourceIdToResourceApprovalPolicyConfigMapType[number]['approvalConfigurationMap'],
 ): {
     deploymentTemplate: ExtendedCollapsibleListItem
     configmaps: ExtendedCollapsibleListItem[]
@@ -129,7 +133,10 @@ export const getEnvConfiguration = (
                           title: 'Deployment Template',
                           subtitle: SUBTITLE[envConfig[curr].configStage],
                           href: getNavigationPath(basePath, params, EnvResourceType.DeploymentTemplate),
-                          iconConfig: getIcon(envConfig[curr].configState, isProtected),
+                          iconConfig: getIcon(
+                              envConfig[curr].configState,
+                              approvalConfigurationMapForEnv?.[ApprovalConfigDataKindType.deploymentTemplate],
+                          ),
                       }
                     : envConfig[curr].map(({ configState, name, configStage }) => ({
                           configState,
@@ -142,7 +149,14 @@ export const getEnvConfiguration = (
                                   : EnvResourceType.Secret,
                               name,
                           ),
-                          iconConfig: getIcon(configState, isProtected),
+                          iconConfig: getIcon(
+                              configState,
+                              approvalConfigurationMapForEnv?.[
+                                  curr === EnvConfigObjectKey.ConfigMap
+                                      ? ApprovalConfigDataKindType.configMap
+                                      : ApprovalConfigDataKindType.configSecret
+                              ],
+                          ),
                           subtitle: SUBTITLE[configStage],
                           clearQueryParamsOnNavigation: true,
                       })),
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/constants.ts b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/constants.ts
new file mode 100644
index 0000000000..d3ce0201c5
--- /dev/null
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/constants.ts
@@ -0,0 +1,32 @@
+import { CollapsibleListItem } from '@devtron-labs/devtron-fe-common-lib'
+import { ResourceConfigState } from '@Pages/Applications/DevtronApps/service.types'
+import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
+import { ReactComponent as ICFileEdit } from '@Icons/ic-file-edit.svg'
+import { ReactComponent as ICCheckCircleDots } from '@Icons/ic-check-circle-dots.svg'
+
+export const RESOURCE_CONFIG_STATE_TO_ICON_CONFIG_MAP: Record<
+    ResourceConfigState,
+    Pick<CollapsibleListItem<'navLink'>['iconConfig'], 'Icon'> & {
+        tippyContent: CollapsibleListItem<'navLink'>['iconConfig']['tooltipProps']['content']
+        iconClass?: string
+    }
+> = {
+    [ResourceConfigState.ApprovalPending]: {
+        Icon: ICCheckCircleDots,
+        tippyContent: 'Approval Pending',
+    },
+    [ResourceConfigState.Draft]: {
+        Icon: ICFileEdit,
+        tippyContent: 'In-draft',
+        iconClass: 'scv-5',
+    },
+    [ResourceConfigState.Published]: {
+        Icon: ICStamp,
+        tippyContent: 'Approval(s) will be required for configuration change',
+        iconClass: 'scv-5',
+    },
+    [ResourceConfigState.Unnamed]: {
+        Icon: null,
+        tippyContent: null,
+    },
+} as const
diff --git a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss
index ace4b7516c..f2ba2a65ac 100644
--- a/src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss
+++ b/src/Pages/Applications/DevtronApps/Details/AppConfigurations/appConfig.scss
@@ -61,22 +61,6 @@
                     grid-template-rows: repeat(3, 32px) 1fr;
                 }
             }
-
-            &.config-protection__side-nav {
-                grid-template-rows: 110px repeat(4, 32px) 54px 32px 1fr auto;
-
-                &.hide-external-links {
-                    grid-template-rows: 110px repeat(4, 32px) 54px 1fr auto;
-                }
-
-                &.hide-app-config-help {
-                    grid-template-rows: repeat(4, 32px) 54px 32px 1fr auto;
-
-                    &.hide-external-links {
-                        grid-template-rows: repeat(4, 32px) 54px 1fr auto;
-                    }
-                }
-            }
         }
 
         &.app-compose-with-gitops-config__nav {
@@ -89,22 +73,6 @@
                     grid-template-rows: repeat(5, 32px) 1fr auto;
                 }
             }
-
-            &.config-protection__side-nav {
-                grid-template-rows: 110px repeat(5, 32px) 54px 32px 1fr auto;
-
-                &.hide-external-links {
-                    grid-template-rows: 110px repeat(5, 32px) 54px 1fr auto;
-                }
-
-                &.hide-app-config-help {
-                    grid-template-rows: repeat(5, 32px) 54px 32px 1fr auto;
-
-                    &.hide-external-links {
-                        grid-template-rows: repeat(5, 32px) 54px 1fr auto;
-                    }
-                }
-            }
         }
 
         .help-container {
@@ -249,7 +217,6 @@
 
     .environment-routes-container {
         width: 100%;
-        height: calc(100% - 48px);
         overflow: hidden;
 
         & > .app-compose__nav-item {
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
index 7012fb65ae..57d77ad495 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/CreateAPIToken.tsx
@@ -46,7 +46,7 @@ import {
     PermissionConfigurationFormProvider,
     usePermissionConfiguration,
 } from '../Shared/components/PermissionConfigurationForm'
-import { createUserPermissionPayload, isDirectPermissionFormComplete } from '../utils'
+import { createUserPermissionPayload, validateDirectPermissionForm } from '../utils'
 import { getDefaultUserStatusAndTimeout } from '../libUtils'
 import { importComponentFromFELibrary } from '../../../../components/common'
 
@@ -94,8 +94,15 @@ const CreateAPIToken = ({
         invalidDescription: false,
         invalidDescriptionMessage: '',
     })
-    const { permissionType, directPermission, setDirectPermission, chartPermission, k8sPermission, userRoleGroups } =
-        usePermissionConfiguration()
+    const {
+        permissionType,
+        directPermission,
+        setDirectPermission,
+        chartPermission,
+        k8sPermission,
+        userRoleGroups,
+        isSaveDisabled,
+    } = usePermissionConfiguration()
     const [customDate, setCustomDate] = useState<Moment>(null)
     const validationRules = new ValidationRules()
 
@@ -163,7 +170,7 @@ const CreateAPIToken = ({
     }
 
     const handleGenerateAPIToken = async () => {
-        if (!isDirectPermissionFormComplete(directPermission, setDirectPermission)) {
+        if (!validateDirectPermissionForm(directPermission, setDirectPermission).isValid) {
             return
         }
 
@@ -307,6 +314,7 @@ const CreateAPIToken = ({
                 }}
                 onSave={handleGenerateAPIToken}
                 buttonText="Generate token"
+                disabled={isSaveDisabled}
             />
             {showGenerateModal && (
                 <GenerateModal
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
index 6c9216a2a4..8a4e92d7a7 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx
@@ -52,7 +52,7 @@ import {
     PermissionConfigurationFormProvider,
     usePermissionConfiguration,
 } from '../Shared/components/PermissionConfigurationForm'
-import { createUserPermissionPayload, isDirectPermissionFormComplete } from '../utils'
+import { createUserPermissionPayload, validateDirectPermissionForm } from '../utils'
 import { getDefaultUserStatusAndTimeout } from '../libUtils'
 
 const showStatus = !!importComponentFromFELibrary('StatusHeaderCell', null, 'function')
@@ -70,8 +70,15 @@ const EditAPIToken = ({
     isLoading: boolean
     setEditData: (editData: EditDataType) => void
 }) => {
-    const { permissionType, directPermission, setDirectPermission, chartPermission, k8sPermission, userRoleGroups } =
-        usePermissionConfiguration()
+    const {
+        permissionType,
+        directPermission,
+        setDirectPermission,
+        chartPermission,
+        k8sPermission,
+        userRoleGroups,
+        isSaveDisabled,
+    } = usePermissionConfiguration()
 
     const history = useHistory()
     const match = useRouteMatch()
@@ -107,7 +114,7 @@ const EditAPIToken = ({
     }
 
     const handleUpdatedToken = async (tokenId) => {
-        if (!isDirectPermissionFormComplete(directPermission, setDirectPermission)) {
+        if (!validateDirectPermissionForm(directPermission, setDirectPermission).isValid) {
             return
         }
 
@@ -281,6 +288,7 @@ const EditAPIToken = ({
                 onCancel={redirectToTokenList}
                 onSave={() => handleUpdatedToken(editData.id)}
                 buttonText="Update token"
+                disabled={isSaveDisabled}
             />
             {deleteConfirmation && (
                 <DeleteAPITokenModal
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateActionButton.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateActionButton.tsx
index 7656dfb7e8..c85169addf 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateActionButton.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/GenerateActionButton.tsx
@@ -17,7 +17,14 @@
 import { ButtonWithLoader } from '@devtron-labs/devtron-fe-common-lib'
 import { GenerateActionButtonType } from './apiToken.type'
 
-const GenerateActionButton = ({ loader, onCancel, onSave, buttonText, regenerateButton }: GenerateActionButtonType) => (
+const GenerateActionButton = ({
+    loader,
+    onCancel,
+    onSave,
+    buttonText,
+    regenerateButton,
+    disabled,
+}: GenerateActionButtonType) => (
     <div
         className={`modal__buttons w-100 pl-16 pt-16 pr-16 flex ${
             regenerateButton ? 'right ml-auto' : 'left ml-0'
@@ -35,7 +42,7 @@ const GenerateActionButton = ({ loader, onCancel, onSave, buttonText, regenerate
         <ButtonWithLoader
             rootClassName={`flex cta h-36 ${regenerateButton ? 'order-second' : 'mr-12 order-first'}`}
             onClick={onSave}
-            disabled={loader}
+            disabled={loader || disabled}
             isLoading={loader}
             dataTestId={buttonText.toLowerCase().replace(' ', '-')}
         >
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx b/src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx
index 00d7360c4f..9c5ac78018 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx
@@ -148,6 +148,7 @@ const RegeneratedModal = ({
                     onSave={handleRegenrateToken}
                     buttonText="Regenerate Token"
                     regenerateButton
+                    disabled={false}
                 />
             </div>
         </VisibleModal>
diff --git a/src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts b/src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts
index ba1598b120..4730f93cd9 100644
--- a/src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/APITokens/apiToken.type.ts
@@ -68,6 +68,7 @@ export interface GenerateActionButtonType {
     onSave: () => void
     buttonText: string
     regenerateButton?: boolean
+    disabled: boolean
 }
 
 export interface GenerateTokenModalType {
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
index 9468f8a2c1..87b5469796 100644
--- a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/AddEdit/PermissionGroupForm.tsx
@@ -17,27 +17,31 @@
 import { useState, useEffect } from 'react'
 import {
     showError,
-    Progressing,
     DeleteDialog,
     ResizableTextarea,
     CustomInput,
     useMainContext,
     ToastVariantType,
     ToastManager,
+    ButtonComponentType,
+    ButtonVariantType,
+    ComponentSizeType,
+    ButtonStyleType,
+    Button,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useHistory } from 'react-router-dom'
+import { ReactComponent as ICDeleteInteractive } from '@Icons/ic-delete-interactive.svg'
+import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
 import { deepEqual } from '../../../../../components/common'
 
 import { URLS } from '../../../../../config'
-import { ReactComponent as Warning } from '../../../../../assets/icons/ic-warning.svg'
 import { PermissionGroup, PermissionGroupCreateOrUpdatePayload } from '../../types'
-import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-delete-interactive.svg'
 import { createOrUpdatePermissionGroup, deletePermissionGroup } from '../../authorization.service'
 import {
     PermissionConfigurationForm,
     usePermissionConfiguration,
 } from '../../Shared/components/PermissionConfigurationForm'
-import { getIsSuperAdminPermission, getRoleFilters, isDirectPermissionFormComplete } from '../../utils'
+import { getIsSuperAdminPermission, getRoleFilters, validateDirectPermissionForm } from '../../utils'
 import { excludeKeyAndClusterValue } from '../../Shared/components/K8sObjectPermissions/utils'
 
 const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
@@ -52,6 +56,7 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
         k8sPermission,
         currentK8sPermissionRef,
         data: permissionGroup,
+        isSaveDisabled,
     } = usePermissionConfiguration()
     const _permissionGroup = permissionGroup as PermissionGroup
 
@@ -93,7 +98,7 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
             setName((_name) => ({ ..._name, error: 'Group name is mandatory' }))
             return
         }
-        if (!isSuperAdminPermission && !isDirectPermissionFormComplete(directPermission, setDirectPermission)) {
+        if (!isSuperAdminPermission && !validateDirectPermissionForm(directPermission, setDirectPermission).isValid) {
             return
         }
         setSubmitting(true)
@@ -164,17 +169,16 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
                     </span>
                 </div>
                 {!isAddMode && (
-                    <div>
-                        <button
-                            disabled={submitting}
-                            type="button"
-                            className="cta delete override-button flex dc__gap-6 h-32"
-                            onClick={toggleDeleteConfirmationModal}
-                        >
-                            <PlusIcon className="icon-dim-14 mw-14" />
-                            Delete
-                        </button>
-                    </div>
+                    <Button
+                        disabled={submitting}
+                        variant={ButtonVariantType.secondary}
+                        style={ButtonStyleType.negative}
+                        size={ComponentSizeType.medium}
+                        dataTestId="delete-group"
+                        text="Delete"
+                        startIcon={<ICDeleteInteractive />}
+                        onClick={toggleDeleteConfirmationModal}
+                    />
                 )}
             </div>
             <div className="flexbox-col dc__content-space flex-grow-1 w-100">
@@ -209,23 +213,33 @@ const PermissionGroupForm = ({ isAddMode }: { isAddMode: boolean }) => {
                     <PermissionConfigurationForm showUserPermissionGroupSelector={false} />
                 </div>
                 <div className="flexbox pt-16 pl-20 pr-20 dc__border-top-n1 dc__align-items-center dc__align-self-stretch dc__gap-8">
-                    <button type="submit" className="cta flex h-32" disabled={submitting} onClick={handleSubmit}>
-                        {submitting ? <Progressing /> : 'Save'}
-                    </button>
-                    <Link
-                        to={URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS}
-                        role="button"
-                        aria-disabled={submitting}
-                        className={`cta cancel flex h-32 anchor ${
-                            submitting ? 'dc__disable-click disabled-opacity' : ''
-                        }`}
-                    >
-                        Cancel
-                    </Link>
+                    <Button
+                        dataTestId="submit-user-form"
+                        text="Save"
+                        onClick={handleSubmit}
+                        size={ComponentSizeType.medium}
+                        disabled={isSaveDisabled}
+                        isLoading={submitting}
+                        buttonProps={{
+                            type: 'submit',
+                        }}
+                    />
+                    <Button
+                        dataTestId="cancel-user-form"
+                        text="Cancel"
+                        component={ButtonComponentType.link}
+                        linkProps={{
+                            to: URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS,
+                        }}
+                        variant={ButtonVariantType.secondary}
+                        size={ComponentSizeType.medium}
+                        style={ButtonStyleType.neutral}
+                        disabled={submitting}
+                    />
                     {!isAddMode &&
                         !deepEqual(currentK8sPermissionRef.current, k8sPermission.map(excludeKeyAndClusterValue)) && (
                             <span className="flex cy-7 dc__gap-4">
-                                <Warning className="icon-dim-20 warning-icon-y7" />
+                                <ICWarning className="icon-dim-20 warning-icon-y7" />
                                 Unsaved changes
                             </span>
                         )}
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx
index 3fc86fc6e7..e0074b792d 100644
--- a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/NoPermissionGroups.tsx
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
-import { Link } from 'react-router-dom'
+import { Button, ButtonComponentType, ComponentSizeType, GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
 import nullStateImage from '../../../../../assets/img/empty-applist@2x.png'
 import { ReactComponent as AddIcon } from '../../../../../assets/icons/ic-add.svg'
 import { EMPTY_STATE_STATUS } from '../../../../../config/constantMessaging'
 import { URLS } from '../../../../../config'
 
 const renderAddGroupButton = () => (
-    <Link
-        type="button"
-        to={`${URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS}/add`}
-        role="button"
-        className="cta dc__gap-4 flex h-32 anchor"
-    >
-        <AddIcon />
-        Add group
-    </Link>
+    <Button
+        text="Add group"
+        startIcon={<AddIcon />}
+        component={ButtonComponentType.link}
+        linkProps={{
+            to: `${URLS.GLOBAL_CONFIG_AUTH_PERMISSION_GROUPS}/add`,
+        }}
+        size={ComponentSizeType.medium}
+        dataTestId="add-permission-group-link"
+    />
 )
 
 const NoPermissionGroups = () => (
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx
index 3661bc3f27..f3e28d9c21 100644
--- a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupListHeader.tsx
@@ -14,8 +14,15 @@
  * limitations under the License.
  */
 
-import { useMainContext, InfoIconTippy, SearchBar } from '@devtron-labs/devtron-fe-common-lib'
-import { Link, useRouteMatch } from 'react-router-dom'
+import {
+    useMainContext,
+    InfoIconTippy,
+    SearchBar,
+    ButtonComponentType,
+    ComponentSizeType,
+    Button,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { useRouteMatch } from 'react-router-dom'
 import { DOCUMENTATION } from '../../../../../config'
 import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-add.svg'
 import { ReactComponent as ArrowSquareOut } from '../../../../../assets/icons/ic-arrow-square-out.svg'
@@ -63,10 +70,16 @@ const PermissionGroupListHeader = ({
                     handleEnter={handleSearch}
                     initialSearchText={initialSearchText}
                 />
-                <Link to={`${path}/add`} type="button" className="cta anchor flex dc__gap-6 h-32">
-                    <PlusIcon className="icon-dim-14 mw-14" />
-                    Create Group
-                </Link>
+                <Button
+                    text="Create Group"
+                    startIcon={<PlusIcon />}
+                    component={ButtonComponentType.link}
+                    linkProps={{
+                        to: `${path}/add`,
+                    }}
+                    size={ComponentSizeType.medium}
+                    dataTestId="add-permission-group-link"
+                />
                 {isSuperAdmin && (
                     <>
                         <div className="dc__divider h-20" />
diff --git a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupRow.tsx b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupRow.tsx
index affd54c3f9..5386a95091 100644
--- a/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupRow.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/PermissionGroups/List/PermissionGroupRow.tsx
@@ -17,8 +17,13 @@
 import { useState } from 'react'
 import {
     BulkSelectionEvents,
+    Button,
+    ButtonComponentType,
+    ButtonStyleType,
+    ButtonVariantType,
     Checkbox,
     CHECKBOX_VALUE,
+    ComponentSizeType,
     DeleteDialog,
     getRandomColor,
     showError,
@@ -85,7 +90,7 @@ const PermissionGroupRow = ({
     return (
         <>
             <div
-                className={`user-permission__row dc__visible-hover dc__visible-hover--parent pl-20 pr-20  dc__hover-n50 ${
+                className={`user-permission__row dc__visible-hover dc__visible-hover--parent dc__opacity-hover dc__opacity-hover--parent pl-20 pr-20  dc__hover-n50 ${
                     isChecked ? 'bc-b50' : ''
                 }`}
             >
@@ -114,24 +119,31 @@ const PermissionGroupRow = ({
                 </span>
                 <span className="dc__ellipsis-right">{description || '-'}</span>
                 <div className="flex dc__gap-4">
-                    <Link
-                        type="button"
-                        className="dc__visible-hover--child dc__transparent p-4 flex"
-                        data-testid={`user-permission__edit-button-${index}`}
-                        aria-label="Edit permission group"
-                        to={`${path}/${id}`}
-                    >
-                        <Edit className="scn-6 icon-dim-16 mw-16" />
-                    </Link>
-                    <button
-                        type="button"
-                        className="dc__visible-hover--child dc__transparent icon-delete p-4 flex"
-                        data-testid={`permission-group__delete-button-${index}`}
+                    <Button
+                        component={ButtonComponentType.link}
+                        icon={<Edit />}
+                        ariaLabel="Edit permission group"
+                        showAriaLabelInTippy={false}
+                        dataTestId={`user-permission__edit-button-${index}`}
+                        linkProps={{
+                            to: `${path}/${id}`,
+                        }}
+                        isOpacityHoverChild
+                        size={ComponentSizeType.xs}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                    />
+                    <Button
+                        icon={<Trash />}
+                        ariaLabel="Delete permission group"
+                        showAriaLabelInTippy={false}
+                        dataTestId={`user-permission__delete-button-${index}`}
                         onClick={toggleDeleteModal}
-                        aria-label="Delete permission group"
-                    >
-                        <Trash className="scn-6 icon-dim-16 mw-16" />
-                    </button>
+                        isOpacityHoverChild
+                        size={ComponentSizeType.xs}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.negativeGrey}
+                    />
                 </div>
             </div>
             {isDeleteModalOpen && (
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppOrJobSelector.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppOrJobSelector.tsx
new file mode 100644
index 0000000000..f9e3c1121b
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppOrJobSelector.tsx
@@ -0,0 +1,126 @@
+/*
+ * 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 { useState, useEffect, useRef } from 'react'
+import {
+    showError,
+    getIsRequestAborted,
+    ACCESS_TYPE_MAP,
+    EntityTypes,
+    SelectPicker,
+    ComponentSizeType,
+    SelectPickerOptionType,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { getAllWorkflowsForAppNames } from '../../../../../../services/service'
+import { HELM_APP_UNASSIGNED_PROJECT, SELECT_ALL_VALUE } from '../../../../../../config'
+import { allApplicationsOption, DirectPermissionFieldName } from './constants'
+import { getWorkflowOptions } from '../../../utils'
+import { AppOrJobSelectorProps } from './types'
+import { DirectPermissionsRoleFilter } from '../../../types'
+import { getDisplayTextByName } from './utils'
+
+const AppOrJobSelector = ({
+    permission,
+    handleDirectPermissionChange,
+    getListForAccessType,
+    projectsList,
+    appsList,
+    jobsList,
+    appsListHelmApps,
+    setWorkflowList,
+}: AppOrJobSelectorProps) => {
+    const abortControllerRef = useRef<AbortController>(new AbortController())
+    const [applications, setApplications] = useState<SelectPickerOptionType[]>([])
+
+    const isAccessTypeJob = permission.accessType === ACCESS_TYPE_MAP.JOBS
+    const projectId =
+        permission.team && permission.team.value !== HELM_APP_UNASSIGNED_PROJECT
+            ? projectsList.find((project) => project.name === permission.team.value)?.id
+            : null
+    const listForAccessType = getListForAccessType(permission.accessType)
+    const appOrJobSelectorName = isAccessTypeJob ? DirectPermissionFieldName.jobs : DirectPermissionFieldName.apps
+    const appOrJobSelectorOptions = [allApplicationsOption(permission.entity), ...applications]
+
+    const setWorkflowsForJobs = async (_permission: DirectPermissionsRoleFilter) => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort()
+            abortControllerRef.current = null
+        }
+        abortControllerRef.current = new AbortController()
+        setWorkflowList({ loading: true, options: [] })
+        try {
+            setWorkflowList({ loading: true, options: [] })
+            const jobNames =
+                _permission.entityName.filter((option) => option.value !== SELECT_ALL_VALUE).map((app) => app.label) ??
+                []
+            const {
+                result: { appIdWorkflowNamesMapping },
+            } = await getAllWorkflowsForAppNames(jobNames, abortControllerRef.current.signal)
+            const workflowOptions = getWorkflowOptions(appIdWorkflowNamesMapping)
+            abortControllerRef.current = null
+            setWorkflowList({ loading: false, options: workflowOptions })
+        } catch (err) {
+            if (!getIsRequestAborted(err)) {
+                showError(err)
+            }
+            setWorkflowList({ loading: false, options: [] })
+        }
+    }
+
+    useEffect(() => {
+        const isJobs = permission.entity === EntityTypes.JOB
+        const appOptions = ((projectId && listForAccessType.get(projectId)?.result) || []).map((app) => ({
+            label: isJobs ? app.jobName : app.name,
+            value: isJobs ? app.appName : app.name,
+        }))
+        setApplications(appOptions)
+        if (permission.entity === EntityTypes.JOB && permission.entityName.length > 0) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            setWorkflowsForJobs(permission)
+        }
+    }, [appsList, appsListHelmApps, projectId, jobsList])
+
+    return (
+        <SelectPicker
+            inputId="dropdown-for-appOrJob"
+            value={permission.entityName}
+            isMulti
+            isLoading={projectId && listForAccessType.get(projectId)?.loading}
+            isDisabled={!permission.team || (projectId && listForAccessType.get(projectId)?.loading)}
+            name={appOrJobSelectorName}
+            placeholder={isAccessTypeJob ? 'Select Job' : 'Select applications'}
+            options={appOrJobSelectorOptions}
+            onChange={handleDirectPermissionChange}
+            onBlur={() => {
+                if (permission.entity === EntityTypes.JOB && !jobsList.get(projectId)?.loading) {
+                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                    setWorkflowsForJobs(permission)
+                }
+            }}
+            multiSelectProps={{
+                customDisplayText: getDisplayTextByName(
+                    appOrJobSelectorName,
+                    appOrJobSelectorOptions,
+                    permission.entityName,
+                ),
+            }}
+            error={permission.entityNameError}
+            size={ComponentSizeType.large}
+        />
+    )
+}
+
+export default AppOrJobSelector
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissionDetail.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissionDetail.tsx
index 35a3ac1182..6687661841 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissionDetail.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissionDetail.tsx
@@ -15,7 +15,7 @@
  */
 
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { ACCESS_TYPE_MAP } from '@devtron-labs/devtron-fe-common-lib'
+import { ACCESS_TYPE_MAP, Button, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as AddIcon } from '../../../../../../assets/icons/ic-add.svg'
 import { usePermissionConfiguration } from '../PermissionConfigurationForm'
 import DirectPermission from './DirectPermission'
@@ -36,6 +36,10 @@ const AppPermissionDetail = ({
     const isAccessTypeJob = accessType === ACCESS_TYPE_MAP.JOBS
     const rowClass = getPermissionDetailRowClass(accessType, showStatus)
 
+    const handleAddPermission = () => {
+        addNewPermissionRow(accessType)
+    }
+
     return (
         <>
             <div className={`w-100 pt-6 pb-6 dc__gap-8 display-grid ${rowClass} fw-6 fs-12 cn-7 dc__uppercase`}>
@@ -83,16 +87,14 @@ const AppPermissionDetail = ({
                             </div>
                         ),
                 )}
-                <div>
-                    <button
-                        type="button"
-                        className="anchor flex left dc__gap-4 fs-13 lh-20 fw-6 p-0"
-                        onClick={() => addNewPermissionRow(accessType)}
-                    >
-                        <AddIcon className="icon-dim-20 fcb-5" />
-                        Add Permission
-                    </button>
-                </div>
+                <Button
+                    text="Add Permission"
+                    startIcon={<AddIcon />}
+                    onClick={handleAddPermission}
+                    dataTestId="add-new-permission"
+                    variant={ButtonVariantType.text}
+                    size={ComponentSizeType.medium}
+                />
             </div>
         </>
     )
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx
index 4d6ffbe1fb..60809a46a0 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/AppPermissions.component.tsx
@@ -15,11 +15,10 @@
  */
 
 /* eslint-disable no-param-reassign */
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Switch, Route, Redirect, useLocation, useRouteMatch } from 'react-router-dom'
 import {
     GenericSectionErrorState,
-    OptionType,
     ReactSelectInputAction,
     showError,
     TabGroup,
@@ -28,7 +27,7 @@ import {
     ACCESS_TYPE_MAP,
     EntityTypes,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { ActionTypes } from '../../../constants'
+import { ActionTypes, DEFAULT_ACCESS_TYPE_TO_ERROR_MAP } from '../../../constants'
 import { HELM_APP_UNASSIGNED_PROJECT, SELECT_ALL_VALUE, SERVER_MODE } from '../../../../../../config'
 import { importComponentFromFELibrary, mapByKey } from '../../../../../../components/common'
 import K8sPermissions from '../K8sObjectPermissions/K8sPermissions.component'
@@ -61,11 +60,12 @@ import {
     getEnvironmentOptions,
     getNavLinksConfig,
 } from './utils'
-import { getWorkflowOptions } from '../../../utils'
-import { AppPermissionsDetailType, DirectPermissionRow } from './types'
+import { getWorkflowOptions, validateDirectPermissionForm } from '../../../utils'
+import { AppPermissionsDetailType, DirectPermissionRowProps } from './types'
 import { APIRoleFilter, ChartGroupPermissionsFilter, DirectPermissionsRoleFilter } from '../../../types'
 import { getDefaultStatusAndTimeout } from '../../../libUtils'
 import { JobList } from '../../../../../../components/Jobs/Types'
+import { AccessTypeToErrorMapType } from '../PermissionConfigurationForm/types'
 
 const handleApprovalPermissionChange = importComponentFromFELibrary('handleApprovalPermissionChange', null, 'function')
 
@@ -78,6 +78,7 @@ const AppPermissions = () => {
         setK8sPermission,
         currentK8sPermissionRef,
         data,
+        setIsSaveDisabled,
     } = usePermissionConfiguration()
     const { customRoles } = useAuthorizationContext()
     const { isSuperAdmin: superAdmin } = useMainContext()
@@ -88,6 +89,9 @@ const AppPermissions = () => {
     const [appsList, setAppsList] = useState<AppPermissionsDetailType['appsList']>(new Map())
     const [appsListHelmApps, setAppsListHelmApps] = useState<AppPermissionsDetailType['appsListHelmApps']>(new Map())
     const [jobsList, setJobsList] = useState<AppPermissionsDetailType['jobsList']>(new Map())
+    const [accessTypeToErrorMap, setAccessTypeToErrorMap] = useState<AccessTypeToErrorMapType>(
+        structuredClone(DEFAULT_ACCESS_TYPE_TO_ERROR_MAP),
+    )
 
     // To store the mapping and minimize the number of API calls
     const projectToJobListRef = useRef<
@@ -99,7 +103,7 @@ const AppPermissions = () => {
         >
     >()
 
-    const [isDataLoading, configData, error, reload] = useAsync(() =>
+    const [isDataLoading, configData, configDataError, reload] = useAsync(() =>
         Promise.all([
             getProjectList(),
             getEnvironmentListMin(),
@@ -112,11 +116,17 @@ const AppPermissions = () => {
     const projectsList = configData?.[0]?.result ?? []
     const environmentsList = configData?.[1]?.result ?? []
     const chartGroupsList = configData?.[2]?.result?.groups ?? []
-    const envClustersList = configData?.[3]?.result ?? []
 
-    const environmentClusterOptions = getEnvironmentClusterOptions(envClustersList)
+    const { environmentClusterOptions, envClustersList } = useMemo(() => {
+        const _envClustersList = configData?.[3]?.result ?? []
+
+        return {
+            envClustersList: _envClustersList,
+            environmentClusterOptions: getEnvironmentClusterOptions(_envClustersList),
+        }
+    }, [configData])
 
-    const _getEnvironmentOptions = (entity: DirectPermissionRow['permission']['entity']) =>
+    const _getEnvironmentOptions = (entity: DirectPermissionRowProps['permission']['entity']) =>
         getEnvironmentOptions(environmentsList, entity)
 
     const appPermissionDetailConfig = getAppPermissionDetailConfig(path, serverMode)
@@ -303,7 +313,7 @@ const AppPermissions = () => {
                 ...workflowOptions.reduce((acc, option) => {
                     acc.push(...option.options)
                     return acc
-                }, [] as OptionType[]),
+                }, []),
             ]
         } catch (err) {
             showError(err)
@@ -861,6 +871,29 @@ const AppPermissions = () => {
         pathname: `${url}/${tabName}`,
     })
 
+    const handleNavLinkClick = () => {
+        // Validate the direct permission form on tab switch to show the error state
+        const { accessTypeToErrorMap: _accessTypeToErrorMap } = validateDirectPermissionForm(
+            directPermission,
+            setDirectPermission,
+            false,
+        )
+        setAccessTypeToErrorMap(_accessTypeToErrorMap)
+    }
+
+    useEffect(() => {
+        setIsSaveDisabled(!!configDataError || isDataLoading || isLoading)
+    }, [isDataLoading, isLoading, configDataError])
+
+    useEffect(
+        () => () => {
+            // Set the save to false since the component has unmounted
+            // This can happen when the user was already a super admin
+            setIsSaveDisabled(false)
+        },
+        [],
+    )
+
     useEffect(() => {
         if (!isDataLoading) {
             if (!data) {
@@ -887,7 +920,7 @@ const AppPermissions = () => {
         )
     }
 
-    if (error) {
+    if (configDataError) {
         return <GenericSectionErrorState withBorder reload={reload} />
     }
 
@@ -895,7 +928,7 @@ const AppPermissions = () => {
         <div className="flexbox-col dc__gap-12">
             <div className="dc__border-bottom-n1">
                 <TabGroup
-                    tabs={navLinksConfig.flatMap(({ isHidden, label, tabName }) =>
+                    tabs={navLinksConfig.flatMap(({ isHidden, label, tabName, accessType }) =>
                         !isHidden
                             ? {
                                   id: tabName,
@@ -904,7 +937,9 @@ const AppPermissions = () => {
                                   props: {
                                       to: _getNavLinkUrl(tabName),
                                       'data-testid': tabName,
+                                      onClick: handleNavLinkClick,
                                   },
+                                  showError: accessTypeToErrorMap[accessType],
                               }
                             : [],
                     )}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/DirectPermission.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/DirectPermission.tsx
index 9b667258b4..73ad8fe26a 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/DirectPermission.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/DirectPermission.tsx
@@ -14,48 +14,30 @@
  * limitations under the License.
  */
 
-/* eslint-disable react/prop-types */
-/* eslint-disable react/destructuring-assignment */
-import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { useState } from 'react'
 import {
-    showError,
-    Option,
-    getIsRequestAborted,
-    LoadingIndicator,
-    ReactSelectInputAction,
     ACCESS_TYPE_MAP,
     EntityTypes,
+    SelectPicker,
+    ComponentSizeType,
+    SelectPickerOptionType,
+    Button,
+    ButtonVariantType,
+    ButtonStyleType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Select, { components } from 'react-select'
-import Tippy from '@tippyjs/react'
-import { sortBySelected, importComponentFromFELibrary } from '../../../../../../components/common'
-import { getAllWorkflowsForAppNames } from '../../../../../../services/service'
-import { HELM_APP_UNASSIGNED_PROJECT, SELECT_ALL_VALUE } from '../../../../../../config'
+import { importComponentFromFELibrary } from '../../../../../../components/common'
+import { HELM_APP_UNASSIGNED_PROJECT } from '../../../../../../config'
 import { ReactComponent as TrashIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { GroupHeading, Option as singleOption } from '../../../../../../components/v2/common/ReactSelect.utils'
-import { useAuthorizationContext } from '../../../AuthorizationProvider'
-import {
-    CONFIG_APPROVER_ACTION,
-    authorizationSelectStyles,
-    ARTIFACT_PROMOTER_ACTION,
-    TERMINAL_EXEC_ACTION,
-} from '../../../constants'
-import { AppOption, ClusterValueContainer, ProjectValueContainer, ValueContainer, WorkflowGroupHeading } from './common'
-import {
-    allApplicationsOption,
-    ALL_ENVIRONMENTS_OPTION,
-    ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE,
-    DirectPermissionFieldName,
-    projectSelectStyles,
-    roleSelectStyles,
-} from './constants'
-import { getPrimaryRoleIndex, getWorkflowOptions, parseData } from '../../../utils'
-import { DirectPermissionRow } from './types'
+import { DirectPermissionFieldName } from './constants'
+import { DirectPermissionRowProps, WorkflowListType } from './types'
 import { usePermissionConfiguration } from '../PermissionConfigurationForm'
 import { DirectPermissionsRoleFilter } from '../../../types'
 import { getIsStatusDropdownDisabled } from '../../../libUtils'
+import EnvironmentSelector from './EnvironmentSelector'
+import WorkflowSelector from './WorkflowSelector'
+import RoleSelector from './RoleSelector'
+import AppOrJobSelector from './AppOrJobSelector'
 
-const ApproverPermission = importComponentFromFELibrary('ApproverPermission')
 const UserStatusUpdate = importComponentFromFELibrary('UserStatusUpdate', null, 'function')
 
 const DirectPermission = ({
@@ -68,291 +50,13 @@ const DirectPermission = ({
     appsListHelmApps,
     projectsList,
     getEnvironmentOptions,
-    environmentClusterOptions: envClusters,
+    environmentClusterOptions,
     getListForAccessType,
-}: DirectPermissionRow) => {
-    const { customRoles } = useAuthorizationContext()
-    const { showStatus, userStatus } = usePermissionConfiguration()
-    const projectId =
-        permission.team && permission.team.value !== HELM_APP_UNASSIGNED_PROJECT
-            ? projectsList.find((project) => project.name === permission.team.value)?.id
-            : null
-
-    // creating a multiRole array since we receive , binded values from the backend and after one action, we reset that
-    const multiRole = permission.action.value.split(',')
-    const doesConfigApproverRoleExist = multiRole.includes(CONFIG_APPROVER_ACTION.value)
-    const doesArtifactPromoterRoleExist = multiRole.includes(ARTIFACT_PROMOTER_ACTION.value)
-    const doesTerminalAccessRoleExist = multiRole.includes(TERMINAL_EXEC_ACTION.value)
-
-    const primaryActionRoleIndex = getPrimaryRoleIndex(multiRole, [
-        CONFIG_APPROVER_ACTION.value,
-        ARTIFACT_PROMOTER_ACTION.value,
-        TERMINAL_EXEC_ACTION.value,
-    ])
-
-    const primaryActionRole = {
-        label: multiRole[primaryActionRoleIndex],
-        value: multiRole[primaryActionRoleIndex],
-        configApprover: doesConfigApproverRoleExist || permission.action.configApprover,
-        artifactPromoter: doesArtifactPromoterRoleExist || permission.action.artifactPromoter,
-        terminalExec: doesTerminalAccessRoleExist || permission.action.terminalExec,
-    }
+}: DirectPermissionRowProps) => {
+    const [workflowList, setWorkflowList] = useState<WorkflowListType>({ loading: false, options: [] })
 
-    const [openMenu, setOpenMenu] = useState<DirectPermissionFieldName | ''>('')
-    const [applications, setApplications] = useState([])
-    const [projectInput, setProjectInput] = useState('')
-    const [clusterInput, setClusterInput] = useState('')
-    const [envInput, setEnvInput] = useState('')
-    const [appInput, setAppInput] = useState('')
-    const [workflowInput, setWorkflowInput] = useState('')
-    const [workflowList, setWorkflowList] = useState({ loading: false, options: [] })
-
-    const abortControllerRef = useRef<AbortController>(new AbortController())
-
-    const environments = getEnvironmentOptions(permission.entity)
+    const { showStatus, userStatus } = usePermissionConfiguration()
     const isAccessTypeJob = permission.accessType === ACCESS_TYPE_MAP.JOBS
-    const possibleRoles = useMemo(
-        () =>
-            customRoles.customRoles.map(({ roleDisplayName, roleName, roleDescription, entity, accessType }) => ({
-                label: roleDisplayName,
-                value: roleName,
-                description: roleDescription,
-                entity,
-                accessType,
-            })),
-        [customRoles],
-    )
-
-    const _getMetaRolesForAccessType = () => {
-        switch (permission.accessType) {
-            case ACCESS_TYPE_MAP.DEVTRON_APPS:
-                return customRoles.possibleRolesMeta
-            case ACCESS_TYPE_MAP.HELM_APPS:
-                return customRoles.possibleRolesMetaForHelm
-            case ACCESS_TYPE_MAP.JOBS:
-                return customRoles.possibleRolesMetaForJob
-            default:
-                throw new Error(`Unknown access type ${permission.accessType}`)
-        }
-    }
-
-    const getSelectedRolesDisplay = (selectedPermissions: string[]) =>
-        selectedPermissions.filter((selectedVal) => !!selectedVal).join(', ')
-
-    const metaRolesForAccessType = _getMetaRolesForAccessType()
-    const listForAccessType = getListForAccessType(permission.accessType)
-
-    // eslint-disable-next-line react/no-unstable-nested-components
-    const RoleValueContainer = ({
-        children,
-        getValue,
-        clearValue,
-        cx,
-        getStyles,
-        hasValue,
-        isMulti,
-        options,
-        selectOption,
-        selectProps,
-        setValue,
-        isDisabled,
-        isRtl,
-        theme,
-        getClassNames,
-        ...props
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    }: any) => {
-        const [{ value }] = getValue()
-        return (
-            <components.ValueContainer
-                {...{
-                    getValue,
-                    clearValue,
-                    cx,
-                    getStyles,
-                    hasValue,
-                    isMulti,
-                    options,
-                    selectOption,
-                    selectProps,
-                    setValue,
-                    isDisabled,
-                    isRtl,
-                    theme,
-                    getClassNames,
-                    ...props,
-                }}
-            >
-                {getSelectedRolesDisplay([
-                    value === SELECT_ALL_VALUE ? 'Admin' : metaRolesForAccessType[value].value,
-                    ...(ApproverPermission
-                        ? [
-                              (permission.approver ||
-                                  primaryActionRole.configApprover ||
-                                  primaryActionRole.artifactPromoter) &&
-                                  'Approver',
-                              primaryActionRole.terminalExec && 'Terminal',
-                          ]
-                        : []),
-                ])}
-                {React.cloneElement(children[1])}
-            </components.ValueContainer>
-        )
-    }
-
-    const formatOptionLabel = ({ value }) => (
-        <div className="flex left column">
-            <span>{metaRolesForAccessType[value]?.value}</span>
-            <small className="light-color">{metaRolesForAccessType[value]?.description}</small>
-        </div>
-    )
-
-    // eslint-disable-next-line react/no-unstable-nested-components
-    const RoleMenuList = (props) => (
-        <components.MenuList {...props}>
-            {props.children}
-            {ApproverPermission &&
-                (permission.accessType === ACCESS_TYPE_MAP.DEVTRON_APPS ||
-                    permission.accessType === ACCESS_TYPE_MAP.HELM_APPS) && (
-                    <ApproverPermission
-                        optionProps={props}
-                        approver={permission.approver}
-                        configApprover={primaryActionRole.configApprover}
-                        artifactPromoter={primaryActionRole.artifactPromoter}
-                        terminalExec={primaryActionRole.terminalExec}
-                        handleDirectPermissionChange={(...rest) => {
-                            props.selectOption(props.selectProps.value)
-                            handleDirectPermissionChange(...rest)
-                        }}
-                        formatOptionLabel={formatOptionLabel}
-                        accessType={permission.accessType}
-                        customRoles={customRoles}
-                    />
-                )}
-        </components.MenuList>
-    )
-
-    const setWorkflowsForJobs = async (_permission: DirectPermissionsRoleFilter) => {
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-            abortControllerRef.current = null
-        }
-        abortControllerRef.current = new AbortController()
-        setWorkflowList({ loading: true, options: [] })
-        try {
-            setWorkflowList({ loading: true, options: [] })
-            const jobNames =
-                _permission.entityName.filter((option) => option.value !== SELECT_ALL_VALUE).map((app) => app.label) ??
-                []
-            const {
-                result: { appIdWorkflowNamesMapping },
-            } = await getAllWorkflowsForAppNames(jobNames, abortControllerRef.current.signal)
-            const workflowOptions = getWorkflowOptions(appIdWorkflowNamesMapping)
-            abortControllerRef.current = null
-            setWorkflowList({ loading: false, options: workflowOptions })
-        } catch (err) {
-            if (!getIsRequestAborted(err)) {
-                showError(err)
-            }
-            setWorkflowList({ loading: false, options: [] })
-        }
-    }
-
-    useEffect(() => {
-        const isJobs = permission.entity === EntityTypes.JOB
-        const appOptions = ((projectId && listForAccessType.get(projectId)?.result) || []).map((app) => ({
-            label: isJobs ? app.jobName : app.name,
-            value: isJobs ? app.appName : app.name,
-        }))
-        setApplications(appOptions)
-        if (permission.entity === EntityTypes.JOB && permission.entityName.length > 0) {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            setWorkflowsForJobs(permission)
-        }
-    }, [appsList, appsListHelmApps, projectId, jobsList])
-
-    useEffect(() => {
-        if (openMenu || !projectId || (environments && environments.length === 0) || applications.length === 0) {
-            return
-        }
-
-        setApplications((_applications) =>
-            openMenu === DirectPermissionFieldName.apps || openMenu === DirectPermissionFieldName.jobs
-                ? _applications
-                : sortBySelected(permission.entityName, _applications, 'value'),
-        )
-    }, [openMenu, permission.environment, permission.entityName, projectId])
-
-    const formatOptionLabelClusterEnv = (option, { inputValue }) => (
-        <div
-            className={`flex left column ${
-                option.value &&
-                (option.value.startsWith(ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE) ||
-                    option.value.startsWith(SELECT_ALL_VALUE)) &&
-                'fs-13 fw-6 cn-9'
-            }`}
-        >
-            {!inputValue ? (
-                <>
-                    <span>{option.label}</span>
-                    <small className={permission.accessType === ACCESS_TYPE_MAP.HELM_APPS && 'light-color'}>
-                        {option.clusterName +
-                            (option.clusterName && option.namespace ? '/' : '') +
-                            (option.namespace || '')}
-                    </small>
-                </>
-            ) : (
-                <>
-                    <span
-                        // eslint-disable-next-line react/no-danger
-                        dangerouslySetInnerHTML={{
-                            __html: option.label.replace(
-                                new RegExp(inputValue, 'gi'),
-                                (highlighted) => `<mark>${highlighted}</mark>`,
-                            ),
-                        }}
-                    />
-                    {option.clusterName && option.namespace && (
-                        <small
-                            className={permission.accessType === ACCESS_TYPE_MAP.HELM_APPS && 'light-color'}
-                            // eslint-disable-next-line react/no-danger
-                            dangerouslySetInnerHTML={{
-                                __html: `${option.clusterName}/${option.namespace}`.replace(
-                                    new RegExp(inputValue, 'gi'),
-                                    (highlighted) => `<mark>${highlighted}</mark>`,
-                                ),
-                            }}
-                        />
-                    )}
-                </>
-            )}
-        </div>
-    )
-
-    const formatOptionLabelProject = (option) => (
-        <div className="flex left column">
-            <span>{option.label}</span>
-            {permission.accessType === ACCESS_TYPE_MAP.HELM_APPS && option.value === HELM_APP_UNASSIGNED_PROJECT && (
-                <>
-                    <small>Apps without an assigned project</small>
-                    <div className="unassigned-project-border" />
-                </>
-            )}
-        </div>
-    )
-
-    const customFilter = (option, searchText: string) =>
-        option.data.label?.toLowerCase().includes(searchText?.toLowerCase()) ||
-        option.data.clusterName?.toLowerCase().includes(searchText?.toLowerCase()) ||
-        option.data.namespace?.toLowerCase().includes(searchText?.toLowerCase())
-
-    const onFocus = (name: DirectPermissionFieldName) => {
-        setOpenMenu(name)
-    }
-
-    const onMenuClose = () => {
-        setOpenMenu('')
-    }
 
     const handleStatusChange = (
         status: DirectPermissionsRoleFilter['status'],
@@ -369,223 +73,61 @@ const DirectPermission = ({
         )
     }
 
+    const projectOptions: SelectPickerOptionType[] = [
+        ...(permission.accessType === ACCESS_TYPE_MAP.HELM_APPS
+            ? [
+                  {
+                      name: HELM_APP_UNASSIGNED_PROJECT,
+                      description: 'Apps without an assigned project',
+                  },
+              ]
+            : []),
+        ...projectsList,
+    ].map((project) => ({ label: project.name, value: project.name, description: project.description }))
+
     return (
         <>
-            <Select
-                classNamePrefix="dropdown-for-project"
+            <SelectPicker
+                inputId="dropdown-for-project"
                 value={permission.team}
                 name={DirectPermissionFieldName.team}
-                isMulti={false}
                 placeholder="Select project"
-                options={(permission.accessType === ACCESS_TYPE_MAP.HELM_APPS
-                    ? [{ name: HELM_APP_UNASSIGNED_PROJECT }, ...(projectsList || [])]
-                    : projectsList
-                )?.map((project) => ({ label: project.name, value: project.name }))}
+                options={projectOptions}
                 onChange={handleDirectPermissionChange}
-                components={{
-                    ClearIndicator: null,
-                    IndicatorSeparator: null,
-                    Option: singleOption,
-                    ValueContainer: ProjectValueContainer,
-                }}
-                menuPlacement="auto"
-                styles={projectSelectStyles}
-                formatOptionLabel={formatOptionLabelProject}
-                inputValue={projectInput}
-                onBlur={() => {
-                    setProjectInput('')
-                }}
-                onInputChange={(value, action) => {
-                    if (action.action === ReactSelectInputAction.inputChange) {
-                        setProjectInput(value)
-                    }
-                }}
+                size={ComponentSizeType.large}
             />
-            {permission.accessType === ACCESS_TYPE_MAP.HELM_APPS ? (
-                <div>
-                    <Select
-                        classNamePrefix="dropdown-for-environment"
-                        value={permission.environment}
-                        isMulti
-                        closeMenuOnSelect={false}
-                        name={DirectPermissionFieldName.environment}
-                        onFocus={() => onFocus(DirectPermissionFieldName.environment)}
-                        onMenuClose={onMenuClose}
-                        placeholder="Select environments"
-                        options={envClusters}
-                        formatOptionLabel={formatOptionLabelClusterEnv}
-                        filterOption={customFilter}
-                        hideSelectedOptions={false}
-                        menuPlacement="auto"
-                        styles={authorizationSelectStyles}
-                        components={{
-                            ClearIndicator: null,
-                            ValueContainer: ClusterValueContainer,
-                            IndicatorSeparator: null,
-                            Option,
-                            GroupHeading,
-                        }}
-                        isDisabled={!permission.team}
-                        onChange={handleDirectPermissionChange}
-                        blurInputOnSelect={false}
-                        inputValue={clusterInput}
-                        onBlur={() => {
-                            setClusterInput('')
-                        }}
-                        onInputChange={(value, action) => {
-                            if (action.action === ReactSelectInputAction.inputChange) {
-                                setClusterInput(value)
-                            }
-                        }}
-                    />
-                    {permission.environmentError && <span className="form__error">{permission.environmentError}</span>}
-                </div>
-            ) : (
-                <div style={{ order: isAccessTypeJob ? 3 : 0 }}>
-                    <Select
-                        classNamePrefix="dropdown-for-environment"
-                        value={permission.environment}
-                        isMulti
-                        closeMenuOnSelect={false}
-                        name={DirectPermissionFieldName.environment}
-                        onFocus={() => onFocus(DirectPermissionFieldName.environment)}
-                        onMenuClose={onMenuClose}
-                        placeholder="Select environments"
-                        options={[{ label: '', options: [ALL_ENVIRONMENTS_OPTION] }, ...environments]}
-                        menuPlacement="auto"
-                        hideSelectedOptions={false}
-                        styles={authorizationSelectStyles}
-                        components={{
-                            ClearIndicator: null,
-                            ValueContainer,
-                            IndicatorSeparator: null,
-                            Option,
-                            GroupHeading,
-                        }}
-                        isDisabled={!permission.team}
-                        onChange={handleDirectPermissionChange}
-                        inputValue={envInput}
-                        onBlur={() => {
-                            setEnvInput('')
-                        }}
-                        onInputChange={(value, action) => {
-                            if (action.action === ReactSelectInputAction.inputChange) {
-                                setEnvInput(value)
-                            }
-                        }}
-                    />
-                    {permission.environmentError && <span className="form__error">{permission.environmentError}</span>}
-                </div>
-            )}
+
+            <div style={{ order: isAccessTypeJob ? 3 : 0 }}>
+                <EnvironmentSelector
+                    environmentClusterOptions={environmentClusterOptions}
+                    getEnvironmentOptions={getEnvironmentOptions}
+                    handleDirectPermissionChange={handleDirectPermissionChange}
+                    permission={permission}
+                />
+            </div>
             <div style={{ order: isAccessTypeJob ? 1 : 0 }}>
-                <Select
-                    classNamePrefix="dropdown-for-appOrJob"
-                    value={permission.entityName}
-                    isMulti
-                    components={{
-                        ClearIndicator: null,
-                        ValueContainer,
-                        IndicatorSeparator: null,
-                        // eslint-disable-next-line react/no-unstable-nested-components
-                        Option: (props) => <AppOption props={props} permission={permission} />,
-                        GroupHeading,
-                        LoadingIndicator,
-                    }}
-                    isLoading={projectId && listForAccessType.get(projectId)?.loading}
-                    isDisabled={!permission.team || (projectId && listForAccessType.get(projectId)?.loading)}
-                    styles={authorizationSelectStyles}
-                    closeMenuOnSelect={false}
-                    name={isAccessTypeJob ? DirectPermissionFieldName.jobs : DirectPermissionFieldName.apps}
-                    onFocus={() =>
-                        onFocus(isAccessTypeJob ? DirectPermissionFieldName.jobs : DirectPermissionFieldName.apps)
-                    }
-                    onMenuClose={onMenuClose}
-                    placeholder={isAccessTypeJob ? 'Select Job' : 'Select applications'}
-                    options={[allApplicationsOption(permission.entity), ...applications]}
-                    onChange={handleDirectPermissionChange}
-                    hideSelectedOptions={false}
-                    inputValue={appInput}
-                    menuPlacement="auto"
-                    onBlur={() => {
-                        setAppInput('') // send selected options to setWorkflowsForJobs function
-                        if (permission.entity === EntityTypes.JOB && !jobsList.get(projectId)?.loading) {
-                            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                            setWorkflowsForJobs(permission)
-                        }
-                    }}
-                    onInputChange={(value, action) => {
-                        if (action.action === ReactSelectInputAction.inputChange) {
-                            setAppInput(value)
-                        }
-                    }}
+                <AppOrJobSelector
+                    permission={permission}
+                    handleDirectPermissionChange={handleDirectPermissionChange}
+                    getListForAccessType={getListForAccessType}
+                    projectsList={projectsList}
+                    appsList={appsList}
+                    jobsList={jobsList}
+                    appsListHelmApps={appsListHelmApps}
+                    setWorkflowList={setWorkflowList}
                 />
-                {permission.entityNameError && <span className="form__error">{permission.entityNameError}</span>}
             </div>
             {permission.entity === EntityTypes.JOB && (
                 <div style={{ order: 2 }}>
-                    <Select
-                        classNamePrefix="dropdown-for-workflow-for-job"
-                        value={permission.workflow}
-                        isMulti
-                        closeMenuOnSelect={false}
-                        name={DirectPermissionFieldName.workflow}
-                        onFocus={() => onFocus(DirectPermissionFieldName.workflow)}
-                        onMenuClose={onMenuClose}
-                        placeholder="Select workflow"
-                        options={[
-                            { label: '', options: [{ label: 'All Workflows', value: SELECT_ALL_VALUE }] },
-                            ...workflowList.options,
-                        ]}
-                        className="basic-multi-select"
-                        menuPlacement="auto"
-                        hideSelectedOptions={false}
-                        styles={authorizationSelectStyles}
-                        isLoading={workflowList.loading}
-                        isDisabled={!permission.team || workflowList.loading}
-                        components={{
-                            ClearIndicator: null,
-                            ValueContainer,
-                            IndicatorSeparator: null,
-                            Option,
-                            GroupHeading: WorkflowGroupHeading,
-                            LoadingIndicator,
-                        }}
-                        onChange={(value, actionMeta) => {
-                            handleDirectPermissionChange(value, actionMeta, workflowList)
-                        }}
-                        inputValue={workflowInput}
-                        onBlur={() => {
-                            setWorkflowInput('')
-                        }}
-                        onInputChange={(value, action) => {
-                            if (action.action === ReactSelectInputAction.inputChange) {
-                                setWorkflowInput(value)
-                            }
-                        }}
+                    <WorkflowSelector
+                        permission={permission}
+                        handleDirectPermissionChange={handleDirectPermissionChange}
+                        workflowList={workflowList}
                     />
-                    {permission.workflowError && <span className="form__error">{permission.workflowError}</span>}
                 </div>
             )}
             <div style={{ order: isAccessTypeJob ? 4 : 0 }}>
-                <Select
-                    classNamePrefix="dropdown-for-role"
-                    value={primaryActionRole}
-                    name="action"
-                    placeholder="Select role"
-                    options={parseData(possibleRoles, permission.entity, permission.accessType)}
-                    formatOptionLabel={formatOptionLabel}
-                    onChange={handleDirectPermissionChange}
-                    isDisabled={!permission.team}
-                    menuPlacement="auto"
-                    blurInputOnSelect
-                    styles={roleSelectStyles}
-                    components={{
-                        ClearIndicator: null,
-                        IndicatorSeparator: null,
-                        ValueContainer: RoleValueContainer,
-                        MenuList: RoleMenuList,
-                    }}
-                />
+                <RoleSelector permission={permission} handleDirectPermissionChange={handleDirectPermissionChange} />
             </div>
             {showStatus && (
                 <div className="h-36 flexbox flex-align-center" style={{ order: 5 }}>
@@ -602,17 +144,16 @@ const DirectPermission = ({
                     />
                 </div>
             )}
-            <Tippy className="default-tt" arrow={false} placement="top" content="Delete">
-                <button
-                    type="button"
-                    className="dc__transparent flex p-4 icon-delete h-36"
+            <div style={{ order: showStatus ? 6 : 5 }}>
+                <Button
+                    icon={<TrashIcon />}
+                    ariaLabel="Delete"
+                    dataTestId={`delete-row-${index}`}
                     onClick={() => removeRow(index)}
-                    aria-label="Delete row"
-                    style={{ order: showStatus ? 6 : 5 }}
-                >
-                    <TrashIcon className="scn-6 icon-dim-16" />
-                </button>
-            </Tippy>
+                    variant={ButtonVariantType.borderLess}
+                    style={ButtonStyleType.negativeGrey}
+                />
+            </div>
         </>
     )
 }
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/EnvironmentSelector.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/EnvironmentSelector.tsx
new file mode 100644
index 0000000000..39207cba86
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/EnvironmentSelector.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 { ACCESS_TYPE_MAP, SelectPicker, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+import { useMemo } from 'react'
+import { ALL_ENVIRONMENTS_OPTION, DirectPermissionFieldName } from './constants'
+import { DirectPermissionRowProps } from './types'
+import { getDisplayTextByName, getEnvironmentDisplayText } from './utils'
+
+const EnvironmentSelector = ({
+    permission,
+    handleDirectPermissionChange,
+    environmentClusterOptions,
+    getEnvironmentOptions,
+}: Pick<
+    DirectPermissionRowProps,
+    'permission' | 'handleDirectPermissionChange' | 'environmentClusterOptions' | 'getEnvironmentOptions'
+>) => {
+    const isAccessTypeHelm = permission.accessType === ACCESS_TYPE_MAP.HELM_APPS
+
+    const options = useMemo(() => {
+        const environments = getEnvironmentOptions(permission.entity)
+
+        return isAccessTypeHelm
+            ? environmentClusterOptions.map((groupOption) => ({
+                  label: groupOption.label,
+                  options: groupOption.options.map((option) => ({
+                      label: option.label,
+                      value: option.value,
+                      description:
+                          option.clusterName +
+                          (option.clusterName && option.namespace ? '/' : '') +
+                          (option.namespace || ''),
+                      clusterName: option.clusterName,
+                  })),
+              }))
+            : [ALL_ENVIRONMENTS_OPTION, ...environments]
+    }, [isAccessTypeHelm, environmentClusterOptions])
+
+    return (
+        <SelectPicker
+            inputId="dropdown-for-environment"
+            value={permission.environment}
+            isMulti
+            name={DirectPermissionFieldName.environment}
+            placeholder="Select environments"
+            isDisabled={!permission.team}
+            onChange={handleDirectPermissionChange}
+            error={permission.environmentError}
+            size={ComponentSizeType.large}
+            options={options}
+            multiSelectProps={{
+                customDisplayText: isAccessTypeHelm
+                    ? getEnvironmentDisplayText(options, permission.environment)
+                    : getDisplayTextByName(DirectPermissionFieldName.environment, options, permission.environment),
+            }}
+        />
+    )
+}
+
+export default EnvironmentSelector
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/RoleSelector.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/RoleSelector.tsx
new file mode 100644
index 0000000000..53d6597e00
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/RoleSelector.tsx
@@ -0,0 +1,177 @@
+/*
+ * 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 React, { useMemo } from 'react'
+import { ACCESS_TYPE_MAP, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
+import Select, { components, MenuListProps, ValueContainerProps } from 'react-select'
+import { importComponentFromFELibrary } from '../../../../../../components/common'
+import { SELECT_ALL_VALUE } from '../../../../../../config'
+import { useAuthorizationContext } from '../../../AuthorizationProvider'
+import { CONFIG_APPROVER_ACTION, ARTIFACT_PROMOTER_ACTION, TERMINAL_EXEC_ACTION } from '../../../constants'
+import { roleSelectStyles } from './constants'
+import { getPrimaryRoleIndex, parseData } from '../../../utils'
+import { DirectPermissionRowProps } from './types'
+
+const ApproverPermission = importComponentFromFELibrary('ApproverPermission')
+
+const RoleSelector = ({
+    permission,
+    handleDirectPermissionChange,
+}: Pick<DirectPermissionRowProps, 'permission' | 'handleDirectPermissionChange'>) => {
+    const { customRoles } = useAuthorizationContext()
+
+    const possibleRoles = useMemo(
+        () =>
+            customRoles.customRoles.map(({ roleDisplayName, roleName, roleDescription, entity, accessType }) => ({
+                label: roleDisplayName,
+                value: roleName,
+                description: roleDescription,
+                entity,
+                accessType,
+            })),
+        [customRoles],
+    )
+
+    // creating a multiRole array since we receive , binded values from the backend and after one action, we reset that
+    const multiRole = permission.action.value.split(',')
+    const doesConfigApproverRoleExist = multiRole.includes(CONFIG_APPROVER_ACTION.value)
+    const doesArtifactPromoterRoleExist = multiRole.includes(ARTIFACT_PROMOTER_ACTION.value)
+    const doesTerminalAccessRoleExist = multiRole.includes(TERMINAL_EXEC_ACTION.value)
+
+    const primaryActionRoleIndex = getPrimaryRoleIndex(multiRole, [
+        CONFIG_APPROVER_ACTION.value,
+        ARTIFACT_PROMOTER_ACTION.value,
+        TERMINAL_EXEC_ACTION.value,
+    ])
+
+    const primaryActionRole = {
+        label: multiRole[primaryActionRoleIndex],
+        value: multiRole[primaryActionRoleIndex],
+        configApprover: doesConfigApproverRoleExist || permission.action.configApprover,
+        artifactPromoter: doesArtifactPromoterRoleExist || permission.action.artifactPromoter,
+        terminalExec: doesTerminalAccessRoleExist || permission.action.terminalExec,
+    }
+
+    const getSelectedRolesDisplay = (selectedPermissions: string[]) =>
+        selectedPermissions.filter((selectedVal) => !!selectedVal).join(', ')
+
+    const _getMetaRolesForAccessType = () => {
+        switch (permission.accessType) {
+            case ACCESS_TYPE_MAP.DEVTRON_APPS:
+                return customRoles.possibleRolesMeta
+            case ACCESS_TYPE_MAP.HELM_APPS:
+                return customRoles.possibleRolesMetaForHelm
+            case ACCESS_TYPE_MAP.JOBS:
+                return customRoles.possibleRolesMetaForJob
+            default:
+                throw new Error(`Unknown access type ${permission.accessType}`)
+        }
+    }
+
+    const metaRolesForAccessType = _getMetaRolesForAccessType()
+
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const RoleValueContainer = ({ children, getValue, ...props }: ValueContainerProps<SelectPickerOptionType>) => {
+        const [{ value }] = getValue()
+
+        return (
+            <components.ValueContainer
+                {...{
+                    getValue,
+                    ...props,
+                }}
+            >
+                {getSelectedRolesDisplay([
+                    value === SELECT_ALL_VALUE ? 'Admin' : metaRolesForAccessType[value].value,
+                    ...(ApproverPermission
+                        ? [
+                              (permission.approver ||
+                                  primaryActionRole.configApprover ||
+                                  primaryActionRole.artifactPromoter) &&
+                                  'Approver',
+                              primaryActionRole.terminalExec && 'Terminal',
+                          ]
+                        : []),
+                ])}
+                {React.cloneElement(children[1])}
+            </components.ValueContainer>
+        )
+    }
+
+    const formatOptionLabel = ({ value }) => (
+        <div className="flex left column">
+            <span>{metaRolesForAccessType[value]?.value}</span>
+            <small className="light-color">{metaRolesForAccessType[value]?.description}</small>
+        </div>
+    )
+
+    // eslint-disable-next-line react/no-unstable-nested-components
+    const RoleMenuList = (props: MenuListProps) => {
+        const {
+            children,
+            selectOption,
+            selectProps: { value },
+        } = props
+
+        return (
+            <components.MenuList {...props}>
+                {children}
+                {ApproverPermission &&
+                    (permission.accessType === ACCESS_TYPE_MAP.DEVTRON_APPS ||
+                        permission.accessType === ACCESS_TYPE_MAP.HELM_APPS) && (
+                        <ApproverPermission
+                            optionProps={props}
+                            approver={permission.approver}
+                            configApprover={primaryActionRole.configApprover}
+                            artifactPromoter={primaryActionRole.artifactPromoter}
+                            terminalExec={primaryActionRole.terminalExec}
+                            handleDirectPermissionChange={(...rest) => {
+                                selectOption(value)
+                                handleDirectPermissionChange(...rest)
+                            }}
+                            formatOptionLabel={formatOptionLabel}
+                            accessType={permission.accessType}
+                            customRoles={customRoles}
+                        />
+                    )}
+            </components.MenuList>
+        )
+    }
+
+    return (
+        <Select
+            classNamePrefix="dropdown-for-role"
+            value={primaryActionRole}
+            name="action"
+            placeholder="Select role"
+            options={parseData(possibleRoles, permission.entity, permission.accessType)}
+            formatOptionLabel={formatOptionLabel}
+            onChange={handleDirectPermissionChange}
+            isDisabled={!permission.team}
+            menuPlacement="auto"
+            blurInputOnSelect
+            styles={roleSelectStyles}
+            components={{
+                ClearIndicator: null,
+                IndicatorSeparator: null,
+                ValueContainer: RoleValueContainer,
+                MenuList: RoleMenuList,
+            }}
+        />
+    )
+}
+
+export default RoleSelector
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/WorkflowSelector.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/WorkflowSelector.tsx
new file mode 100644
index 0000000000..94ad038e77
--- /dev/null
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/WorkflowSelector.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 { SelectPicker, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+import { SELECT_ALL_VALUE } from '../../../../../../config'
+import { DirectPermissionFieldName } from './constants'
+import { WorkflowSelectorProps } from './types'
+import { getDisplayTextByName } from './utils'
+
+const WorkflowSelector = ({ permission, handleDirectPermissionChange, workflowList }: WorkflowSelectorProps) => {
+    const options = [{ label: 'All Workflows', value: SELECT_ALL_VALUE }, ...workflowList.options]
+
+    return (
+        <SelectPicker
+            inputId="dropdown-for-workflow-for-job"
+            value={permission.workflow}
+            isMulti
+            closeMenuOnSelect={false}
+            name={DirectPermissionFieldName.workflow}
+            placeholder="Select workflow"
+            options={options}
+            isLoading={workflowList.loading}
+            isDisabled={!permission.team || workflowList.loading}
+            onChange={(value, actionMeta) => {
+                handleDirectPermissionChange(value, actionMeta, workflowList)
+            }}
+            error={permission.workflowError}
+            multiSelectProps={{
+                customDisplayText: getDisplayTextByName(
+                    DirectPermissionFieldName.workflow,
+                    options,
+                    permission.workflow,
+                ),
+            }}
+            size={ComponentSizeType.large}
+        />
+    )
+}
+
+export default WorkflowSelector
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/common.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/common.tsx
deleted file mode 100644
index 67035196d8..0000000000
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/common.tsx
+++ /dev/null
@@ -1,138 +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.
- */
-
-/* eslint-disable react/destructuring-assignment */
-/* eslint-disable react/prop-types */
-import { Checkbox, CHECKBOX_VALUE, noop, EntityTypes } from '@devtron-labs/devtron-fe-common-lib'
-import React from 'react'
-import { components } from 'react-select'
-import { GroupHeading } from '../../../../../../components/v2/common/ReactSelect.utils'
-import { SELECT_ALL_VALUE } from '../../../../../../config'
-import { ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE, DirectPermissionFieldName } from './constants'
-
-export const WorkflowGroupHeading = (props) => <GroupHeading {...props} hideClusterName />
-
-export const AppOption = ({ props, permission }) => {
-    const { selectOption, data } = props
-
-    const _selectOption = () => {
-        selectOption(data)
-    }
-
-    return (
-        <div
-            onClick={_selectOption}
-            className="flex left pt-6 pb-6 pl-8 pr-8 dc__gap-8"
-            style={{ background: props.isFocused ? 'var(--N100)' : 'transparent' }}
-        >
-            <Checkbox
-                isChecked={props.isSelected}
-                rootClassName="mb-0"
-                value={CHECKBOX_VALUE.CHECKED}
-                // No on change as the state is being controlled on the button itself
-                onChange={noop}
-            />
-            <div className="flex left column w-100">
-                <components.Option className="w-100 p-0-imp" {...props} />
-                {data.value === SELECT_ALL_VALUE && (
-                    <span className="fs-12 cn-6">
-                        {`Allow access to existing and new ${
-                            permission.entity === EntityTypes.JOB ? 'jobs' : 'apps'
-                        } for this project`}
-                    </span>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export const ValueContainer = (props) => {
-    const { length } = props.getValue()
-    let optionLength = props.options.length
-    if (
-        props.selectProps.name === DirectPermissionFieldName.environment ||
-        props.selectProps.name === DirectPermissionFieldName.workflow
-    ) {
-        optionLength = props.options.reduce((acc, option) => acc + (option.options?.length ?? 0), 0)
-    }
-
-    const count = length === optionLength ? 'All' : length
-
-    let Item
-    if (props.selectProps.name === DirectPermissionFieldName.apps) {
-        Item = 'application'
-    } else if (props.selectProps.name === DirectPermissionFieldName.jobs) {
-        Item = 'job'
-    } else {
-        Item = props.selectProps.name
-    }
-
-    return (
-        <components.ValueContainer {...props}>
-            {length > 0 ? (
-                <>
-                    {/* Count of selected options */}
-                    {!props.selectProps.menuIsOpen && `${count} ${Item}${length !== 1 ? 's' : ''}`}
-                    {React.cloneElement(props.children[1])}
-                </>
-            ) : (
-                props.children
-            )}
-        </components.ValueContainer>
-    )
-}
-
-export const ClusterValueContainer = (props) => {
-    const { length } = props
-        .getValue()
-        .filter(
-            (opt) =>
-                opt.value &&
-                !opt.value.startsWith(ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE) &&
-                !opt.value.startsWith(SELECT_ALL_VALUE),
-        )
-    let count = ''
-    // 2 represents all existing cluster option and all existing + future cluster option
-    const totalEnv = props.options.reduce((len, cluster) => len + (cluster.options.length - 2), 0)
-    if (length === totalEnv) {
-        count = 'All environments'
-    } else {
-        count = `${length} environment${length !== 1 ? 's' : ''}`
-    }
-
-    return (
-        <components.ValueContainer {...props}>
-            {!props.selectProps.menuIsOpen && (length > 0 ? count : props.selectProps.placeholder)}
-            {React.cloneElement(props.children[1])}
-        </components.ValueContainer>
-    )
-}
-
-export const ProjectValueContainer = (props) => {
-    const value = props.getValue()
-    return (
-        <components.ValueContainer {...props}>
-            {value[0] ? (
-                <>
-                    {!props.selectProps.menuIsOpen && value[0].value}
-                    {React.cloneElement(props.children[1])}
-                </>
-            ) : (
-                props.children
-            )}
-        </components.ValueContainer>
-    )
-}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts
index 08c7a5ba7a..2d6743a3df 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { ACCESS_TYPE_MAP, EntityTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { ACCESS_TYPE_MAP, EntityTypes, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { SELECT_ALL_VALUE } from '../../../../../../config'
 import { ActionTypes, authorizationSelectStyles } from '../../../constants'
 import { getDefaultStatusAndTimeout } from '../../../libUtils'
@@ -22,9 +22,10 @@ import { DirectPermissionsRoleFilter } from '../../../types'
 
 export const ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE = '#'
 
-export const allApplicationsOption = (entity) => ({
+export const allApplicationsOption = (entity): SelectPickerOptionType => ({
     label: entity === EntityTypes.JOB ? 'All Jobs' : 'All applications',
     value: SELECT_ALL_VALUE,
+    description: `Allow access to existing and new ${entity === EntityTypes.JOB ? 'jobs' : 'apps'} for this project`,
 })
 
 export const SELECT_ALL_OPTION = {
@@ -71,14 +72,6 @@ export enum DirectPermissionFieldName {
     status = 'status',
 }
 
-export const projectSelectStyles = {
-    ...authorizationSelectStyles,
-    valueContainer: (base) => ({
-        ...authorizationSelectStyles.valueContainer(base),
-        display: 'flex',
-    }),
-}
-
 export const roleSelectStyles = {
     ...authorizationSelectStyles,
     valueContainer: (base) => ({
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/types.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/types.ts
index 359a394a47..e1e5135caf 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/types.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/types.ts
@@ -14,7 +14,9 @@
  * limitations under the License.
  */
 
-import { ServerError, ACCESS_TYPE_MAP } from '@devtron-labs/devtron-fe-common-lib'
+import { Dispatch, SetStateAction } from 'react'
+import { GroupBase } from 'react-select'
+import { ServerError, ACCESS_TYPE_MAP, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 import { JobList } from '../../../../../../components/Jobs/Types'
 import { DirectPermissionsRoleFilter } from '../../../types'
 
@@ -40,7 +42,7 @@ export interface AppPermissionsDetailType {
     getListForAccessType: (accessType: ACCESS_TYPE_MAP) => AppsList | JobsList
 }
 
-export interface DirectPermissionRow
+export interface DirectPermissionRowProps
     extends Pick<
         AppPermissionsDetailType,
         | 'appsList'
@@ -56,3 +58,27 @@ export interface DirectPermissionRow
     index: number
     removeRow: (index: number) => void
 }
+
+export interface WorkflowListType {
+    options: GroupBase<SelectPickerOptionType>[]
+    loading: boolean
+}
+
+export interface WorkflowSelectorProps
+    extends Pick<DirectPermissionRowProps, 'permission' | 'handleDirectPermissionChange'> {
+    workflowList: WorkflowListType
+}
+
+export interface AppOrJobSelectorProps
+    extends Pick<
+        DirectPermissionRowProps,
+        | 'permission'
+        | 'getListForAccessType'
+        | 'handleDirectPermissionChange'
+        | 'projectsList'
+        | 'appsList'
+        | 'jobsList'
+        | 'appsListHelmApps'
+    > {
+    setWorkflowList: Dispatch<SetStateAction<WorkflowListType>>
+}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/utils.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/utils.ts
index d4fd627edb..0b463286c2 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/utils.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/utils.ts
@@ -14,36 +14,43 @@
  * limitations under the License.
  */
 
-import { OptionType, ACCESS_TYPE_MAP, EntityTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { OptionType, ACCESS_TYPE_MAP, EntityTypes, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
+import { OptionsOrGroups, GroupBase } from 'react-select'
 import { DEFAULT_ENV } from '../../../../../../components/app/details/triggerView/Constants'
 import { createClusterEnvGroup } from '../../../../../../components/common'
 import { SELECT_ALL_VALUE, SERVER_MODE } from '../../../../../../config'
-import { ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE } from './constants'
-import { DirectPermissionRow } from './types'
+import { ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE, DirectPermissionFieldName } from './constants'
+import { DirectPermissionRowProps } from './types'
 
 export const getNavLinksConfig = (serverMode: SERVER_MODE, superAdmin: boolean) =>
     [
         {
+            // Access type is applicable for direct permissions only
+            accessType: ACCESS_TYPE_MAP.DEVTRON_APPS,
             tabName: 'devtron-apps',
             label: 'Devtron Apps',
             isHidden: serverMode === SERVER_MODE.EA_ONLY,
         },
         {
+            accessType: ACCESS_TYPE_MAP.HELM_APPS,
             tabName: 'helm-apps',
             label: 'Helm Apps',
             isHidden: false,
         },
         {
+            accessType: ACCESS_TYPE_MAP.JOBS,
             tabName: 'jobs',
             label: 'Jobs',
             isHidden: serverMode === SERVER_MODE.EA_ONLY,
         },
         {
+            accessType: null,
             tabName: 'kubernetes-objects',
             label: 'Kubernetes Resources',
             isHidden: !superAdmin,
         },
         {
+            accessType: null,
             tabName: 'chart-groups',
             label: 'Chart Groups',
             isHidden: serverMode === SERVER_MODE.EA_ONLY,
@@ -113,7 +120,7 @@ export const getEnvironmentClusterOptions = (envClustersList) =>
         isVirtualEnvironment: cluster?.isVirtualCluster,
     }))
 
-export const getEnvironmentOptions = (environmentsList, entity: DirectPermissionRow['permission']['entity']) => {
+export const getEnvironmentOptions = (environmentsList, entity: DirectPermissionRowProps['permission']['entity']) => {
     const envOptions = createClusterEnvGroup<OptionType & { isClusterCdActive: boolean }>(
         environmentsList,
         'cluster_name',
@@ -143,3 +150,56 @@ export const getEnvironmentOptions = (environmentsList, entity: DirectPermission
     }
     return envOptions
 }
+
+export const getDisplayTextByName = (
+    name: DirectPermissionFieldName,
+    options: OptionsOrGroups<SelectPickerOptionType, GroupBase<SelectPickerOptionType>>,
+    selectedOptions: SelectPickerOptionType[],
+) => {
+    const selectedOptionsLength = selectedOptions?.length
+    const optionsLength =
+        options?.reduce(
+            (acc, option) =>
+                acc + (('options' in option && Array.isArray(option.options) ? option.options?.length : 1) ?? 0),
+            0,
+        ) ?? 0
+
+    const count = selectedOptionsLength === optionsLength ? 'All' : selectedOptionsLength
+
+    let Item
+    if (name === DirectPermissionFieldName.apps) {
+        Item = 'application'
+    } else if (name === DirectPermissionFieldName.jobs) {
+        Item = 'job'
+    } else {
+        Item = name
+    }
+
+    return `${count} ${Item}${selectedOptionsLength !== 1 ? 's' : ''}`
+}
+
+export const getEnvironmentDisplayText = (
+    options: OptionsOrGroups<SelectPickerOptionType, GroupBase<SelectPickerOptionType>>,
+    selectedOptions: SelectPickerOptionType[],
+) => {
+    const selectedOptionsLength = selectedOptions.filter(
+        (opt) =>
+            opt.value &&
+            !(opt.value as string).startsWith(ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE) &&
+            !(opt.value as string).startsWith(SELECT_ALL_VALUE),
+    ).length
+    let count = ''
+    // 2 represents all existing cluster option and all existing + future cluster option
+    const totalEnvironments = options.reduce(
+        (len, cluster) =>
+            len + ('options' in cluster && Array.isArray(cluster.options) ? cluster.options.length - 2 : 1),
+        0,
+    )
+    if (selectedOptionsLength === totalEnvironments) {
+        count = 'All environments'
+    } else {
+        count = `${selectedOptionsLength} environment${selectedOptionsLength !== 1 ? 's' : ''}`
+    }
+
+    return count
+}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkSelectionActionWidget.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkSelectionActionWidget.tsx
index e948f41176..8e2630fb22 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkSelectionActionWidget.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/BulkSelection/BulkSelectionActionWidget.tsx
@@ -16,11 +16,14 @@
 
 import {
     BulkSelectionEvents,
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
     DraggableButton,
     DraggablePositionVariant,
     DraggableWrapper,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Tippy from '@tippyjs/react'
 import { importComponentFromFELibrary } from '../../../../../../components/common'
 import { ReactComponent as Trash } from '../../../../../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as Close } from '../../../../../../assets/icons/ic-close.svg'
@@ -84,34 +87,27 @@ const BulkSelectionActionWidget = ({
                     />
                 )}
                 <div className="flex dc__gap-8">
-                    <Tippy
-                        className="default-tt"
-                        arrow={false}
-                        placement="top"
-                        content={entityType === BulkSelectionEntityTypes.users ? 'Delete user(s)' : 'Delete group(s)'}
-                    >
-                        <button
-                            type="button"
-                            className="dc__transparent flex p-0 icon-delete"
-                            onClick={openBulkDeleteModal}
-                            aria-label="Delete selected user"
-                            disabled={areActionsDisabled}
-                        >
-                            <Trash className="scn-6 icon-dim-28 p-6" />
-                        </button>
-                    </Tippy>
+                    <Button
+                        icon={<Trash />}
+                        ariaLabel={entityType === BulkSelectionEntityTypes.users ? 'Delete user(s)' : 'Delete group(s)'}
+                        onClick={openBulkDeleteModal}
+                        disabled={areActionsDisabled}
+                        dataTestId="bulk-delete-button"
+                        size={ComponentSizeType.small}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.negativeGrey}
+                    />
                     <div className="dc__divider h-16" />
-                    <Tippy className="default-tt" arrow={false} placement="top" content="Clear Selection(s)">
-                        <button
-                            type="button"
-                            className="dc__transparent flex p-0"
-                            onClick={clearBulkSelection}
-                            aria-label="Clear bulk selection"
-                            disabled={areActionsDisabled}
-                        >
-                            <Close className="fcn-6 icon-dim-28 p-6" />
-                        </button>
-                    </Tippy>
+                    <Button
+                        icon={<Close />}
+                        ariaLabel="Clear Selection(s)"
+                        onClick={clearBulkSelection}
+                        disabled={areActionsDisabled}
+                        dataTestId="clear-bulk-selection"
+                        size={ComponentSizeType.small}
+                        variant={ButtonVariantType.borderLess}
+                        style={ButtonStyleType.neutral}
+                    />
                 </div>
             </div>
         </DraggableWrapper>
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/ChartPermission/ChartPermission.component.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/ChartPermission/ChartPermission.component.tsx
index 9decddeebf..5132cd7516 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/ChartPermission/ChartPermission.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/ChartPermission/ChartPermission.component.tsx
@@ -16,17 +16,15 @@
 
 import React, { useMemo } from 'react'
 import {
-    Option,
-    MultiValueContainer,
-    MultiValueRemove,
     OptionType,
     Checkbox,
     noop,
     CHECKBOX_VALUE,
+    SelectPicker,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Select from 'react-select'
 import { usePermissionConfiguration } from '../PermissionConfigurationForm'
-import { authorizationSelectStyles, ActionTypes } from '../../../constants'
+import { ActionTypes } from '../../../constants'
 import { ChartPermissionRow } from './types'
 import { ChartPermissionValues, CHART_PERMISSION_OPTIONS } from './constants'
 
@@ -114,39 +112,24 @@ const ChartPermission = React.memo(({ chartGroupsList }: ChartPermissionRow) =>
                     rootClassName="mb-0"
                     value={CHECKBOX_VALUE.CHECKED}
                 />
-                <Select
+                <SelectPicker
+                    inputId="chart-group-edit-select"
                     value={getSelectedValueForChartGroupEditSelect()}
                     isDisabled={chartPermission.action === ActionTypes.ADMIN}
                     options={chartGroupEditOptions}
                     onChange={handleChartEditChange}
-                    menuPlacement="auto"
-                    components={{
-                        ClearIndicator: null,
-                        IndicatorSeparator: null,
-                        Option,
-                    }}
-                    styles={authorizationSelectStyles}
+                    size={ComponentSizeType.large}
                 />
             </div>
             {chartPermission.action === ActionTypes.UPDATE && (
-                <Select
+                <SelectPicker
+                    inputId="chart-group-select-update"
                     value={chartPermission.entityName}
                     placeholder="Select Chart Group"
                     isMulti
-                    styles={authorizationSelectStyles}
-                    closeMenuOnSelect={false}
                     name="entityName"
                     options={chartGroupOptions}
                     onChange={handleChartGroupChange}
-                    hideSelectedOptions={false}
-                    menuPlacement="auto"
-                    components={{
-                        ClearIndicator: null,
-                        IndicatorSeparator: null,
-                        MultiValueRemove,
-                        MultiValueContainer,
-                        Option,
-                    }}
                 />
             )}
         </div>
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
index 9f68bd3ee8..4d6e4cd4e3 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx
@@ -17,23 +17,21 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 import { useEffect, useState } from 'react'
-import ReactSelect from 'react-select'
 import {
     showError,
     InfoColourBar,
-    ClearIndicator,
-    Option,
-    MultiValueRemove,
-    MultiValueChipContainer,
     OptionType,
-    LoadingIndicator,
     GVKType,
     getK8sResourceList,
     EntityTypes,
     ApiResourceGroupType,
+    Button,
+    ComponentSizeType,
+    SelectPicker,
+    ButtonVariantType,
+    ButtonStyleType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import CreatableSelect from 'react-select/creatable'
-import Tippy from '@tippyjs/react'
+import { K8S_EMPTY_GROUP } from '@Components/ResourceBrowser/Constants'
 import {
     processK8SObjects,
     convertToOptionsList,
@@ -47,19 +45,15 @@ import {
     namespaceListByClusterId,
 } from '../../../../../../components/ResourceBrowser/ResourceBrowser.service'
 import { K8SObjectType, ResourceListPayloadType } from '../../../../../../components/ResourceBrowser/Types'
-import {
-    CustomValueContainer,
-    formatOptionLabel,
-    menuComponent,
-} from '../../../../../../components/v2/common/ReactSelect.utils'
+import { formatOptionLabel } from '../../../../../../components/v2/common/ReactSelect.utils'
 import { ReactComponent as Clone } from '../../../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as Delete } from '../../../../../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as InfoIcon } from '../../../../../../assets/icons/info-filled.svg'
-import { formatResourceKindOptionLabel, k8sRoleSelectionStyle, multiSelectAllState } from './utils'
+import { multiSelectAllState } from './utils'
 import { useAuthorizationContext } from '../../../AuthorizationProvider'
 import { parseData } from '../../../utils'
-import { authorizationSelectStyles, ALL_NAMESPACE } from '../../../constants'
-import { K8sPermissionActionType, K8S_PERMISSION_INFO_MESSAGE, resourceSelectStyles } from './constants'
+import { ALL_NAMESPACE } from '../../../constants'
+import { K8sPermissionActionType, K8S_PERMISSION_INFO_MESSAGE } from './constants'
 import { SELECT_ALL_VALUE } from '../../../../../../config'
 import { K8sItemCardLoadingState, K8sListItemCardType } from './types'
 import { usePermissionConfiguration } from '../PermissionConfigurationForm'
@@ -112,9 +106,6 @@ const K8sListItemCard = ({
             const { result } = await namespaceListByClusterId(clusterId)
             const options = [ALL_NAMESPACE, ...(result ? convertToOptionsList(result.sort()) : [])]
             setNamespaceMapping((prevMapping) => ({ ...prevMapping, [clusterId]: options }))
-            if (k8sPermission.namespace?.some((el) => el.value === SELECT_ALL_VALUE)) {
-                handleK8sPermission(K8sPermissionActionType.setNamespace, index, options)
-            }
         } catch (err) {
             showError(err)
         } finally {
@@ -373,13 +364,10 @@ const K8sListItemCard = ({
         handleK8sPermission(action, index)
     }
 
-    const getIsK8sMultiValueContainer = (type: string) =>
-        k8sPermission[type].some((item) => item.value === SELECT_ALL_VALUE)
-
     const k8sOptions = parseData(customRoles.customRoles, EntityTypes.CLUSTER).map((role) => ({
         label: role.roleDisplayName,
         value: role.roleName,
-        infoText: role.roleDescription,
+        description: role.roleDescription,
     }))
 
     const handleUserStatusUpdate = (
@@ -401,168 +389,107 @@ const K8sListItemCard = ({
     }
 
     return (
-        <div className="mt-16 mb-16 dc__border br-4 p-16 bcn-0">
-            <div className="cn-7 fs-13 fw-4 lh-20 mb-6 flex dc__content-space">
+        <div className="mt-16 mb-16 flexbox-col dc__gap-12 dc__border br-4 p-16 bcn-0">
+            <div className="cn-7 fs-13 fw-4 lh-20 flex dc__content-space">
                 <span>Cluster</span>
                 {!selectedPermissionAction && (
-                    <span className="flex">
-                        <Tippy className="default-tt" arrow={false} placement="top" content="Duplicate">
-                            <div className="flex">
-                                <Clone className="icon-dim-16 mr-8 fcn-6 cursor" onClick={clonePermission} />
-                            </div>
-                        </Tippy>
-                        <Tippy className="default-tt" arrow={false} placement="top" content="Delete">
-                            <div className="flex">
-                                <Delete className="icon-dim-16 scn-6 cursor" onClick={deletePermission} />
-                            </div>
-                        </Tippy>
+                    <span className="flex dc__gap-4">
+                        <Button
+                            icon={<Clone />}
+                            ariaLabel="Duplicate"
+                            onClick={clonePermission}
+                            size={ComponentSizeType.xs}
+                            dataTestId={`clone-permission-${index}`}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.neutral}
+                        />
+                        <Button
+                            icon={<Delete />}
+                            ariaLabel="Delete"
+                            onClick={deletePermission}
+                            size={ComponentSizeType.xs}
+                            dataTestId={`delete-permission-${index}`}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.negativeGrey}
+                        />
                     </span>
                 )}
             </div>
-            <div className="mb-16">
-                <ReactSelect
-                    placeholder="Select cluster"
-                    classNamePrefix="k8s-permission-select-cluster-dropdown"
-                    options={clusterOptions}
-                    value={k8sPermission?.cluster}
-                    onChange={onClusterChange}
-                    name="cluster"
-                    components={{
-                        IndicatorSeparator: null,
-                        LoadingIndicator,
-                    }}
-                    styles={authorizationSelectStyles}
-                    isLoading={isClusterListLoading}
-                    isDisabled={isClusterListLoading}
-                    menuPlacement="auto"
-                    menuPosition="fixed"
-                />
-            </div>
+            <SelectPicker
+                placeholder="Select cluster"
+                inputId="k8s-permission-select-cluster-dropdown"
+                options={clusterOptions}
+                value={k8sPermission?.cluster}
+                onChange={onClusterChange}
+                name="cluster"
+                isLoading={isClusterListLoading}
+                isDisabled={isClusterListLoading}
+                size={ComponentSizeType.large}
+            />
             {k8sPermission?.cluster && (
                 <>
-                    <div className="cn-7 fs-13 fw-4 lh-20 mb-6">Namespace</div>
-                    <div className="mb-16">
-                        <CreatableSelect
-                            placeholder="Select namespace"
-                            classNamePrefix="k8s-permission-select-namespace-dropdown"
-                            options={namespaceMapping?.[k8sPermission?.cluster?.value]}
-                            value={k8sPermission.namespace}
-                            name="namespace"
-                            isDisabled={!k8sPermission.cluster || isNamespaceListLoading}
-                            onChange={onNameSpaceSelection}
-                            components={{
-                                IndicatorSeparator: null,
-                                // eslint-disable-next-line react/no-unstable-nested-components
-                                MultiValueContainer: ({ ...props }) => (
-                                    <MultiValueChipContainer
-                                        {...props}
-                                        validator={null}
-                                        isAllSelected={getIsK8sMultiValueContainer('namespace')}
-                                    />
-                                ),
-                                ClearIndicator,
-                                MultiValueRemove,
-                                Option,
-                                MenuList: menuComponent,
-                                LoadingIndicator,
-                            }}
-                            isLoading={isNamespaceListLoading}
-                            menuPlacement="auto"
-                            menuPosition="fixed"
-                            closeMenuOnSelect={false}
-                            isMulti
-                            hideSelectedOptions={false}
-                            styles={resourceSelectStyles}
-                            // @ts-expect-error fix this with custom typing or custom select
-                            text="namespace"
+                    <SelectPicker
+                        label="Namespace"
+                        placeholder="Select namespace"
+                        inputId="k8s-permission-select-namespace-dropdown"
+                        options={namespaceMapping?.[k8sPermission?.cluster?.value]}
+                        value={k8sPermission.namespace}
+                        name="namespace"
+                        isDisabled={!k8sPermission.cluster || isNamespaceListLoading}
+                        onChange={onNameSpaceSelection}
+                        isLoading={isNamespaceListLoading}
+                        closeMenuOnSelect={false}
+                        isMulti
+                        hideSelectedOptions={false}
+                        size={ComponentSizeType.large}
+                    />
+                    <div className="dc__grid-row-one-half dc__gap-12 w-100">
+                        <SelectPicker
+                            inputId="k8s-permission-select-api-group-dropdown"
+                            placeholder="Select API group"
+                            options={apiGroupMapping?.[k8sPermission.key]}
+                            name="Api group"
+                            isDisabled={!k8sPermission.namespace?.length || isApiGroupListLoading}
+                            value={k8sPermission.group}
+                            onChange={onApiGroupSelect}
+                            isLoading={isApiGroupListLoading}
+                            label="API Group"
+                            size={ComponentSizeType.large}
                         />
-                    </div>
-                    <div className="flexbox w-100">
-                        <div className="w-100 mr-6">
-                            <div className="cn-7 fs-13 fw-4 lh-20 mb-6">API Group</div>
-                            <div className="mb-16">
-                                <ReactSelect
-                                    placeholder="Select API group"
-                                    classNamePrefix="k8s-permission-select-api-group-dropdown"
-                                    options={apiGroupMapping?.[k8sPermission.key]}
-                                    name="Api group"
-                                    isDisabled={!k8sPermission.namespace?.length || isApiGroupListLoading}
-                                    value={k8sPermission.group}
-                                    onChange={onApiGroupSelect}
-                                    components={{
-                                        IndicatorSeparator: null,
-                                        LoadingIndicator,
-                                    }}
-                                    styles={authorizationSelectStyles}
-                                    isLoading={isApiGroupListLoading}
-                                    menuPlacement="auto"
-                                    menuPosition="fixed"
-                                />
-                            </div>
-                        </div>
-                        <div className="w-100 ml-6">
-                            <div className="cn-7 fs-13 fw-4 lh-20 mb-6">Kind</div>
-                            <div className="mb-16">
-                                <ReactSelect
-                                    placeholder="Select kind"
-                                    classNamePrefix="k8s-permission-select-kind-dropdown"
-                                    options={kindMapping?.[k8sPermission.key]}
-                                    isDisabled={!k8sPermission.group}
-                                    value={k8sPermission.kind}
-                                    onChange={onKindSelect}
-                                    formatOptionLabel={formatResourceKindOptionLabel}
-                                    name="kind"
-                                    components={{
-                                        IndicatorSeparator: null,
-                                        ValueContainer: CustomValueContainer,
-                                        LoadingIndicator,
-                                    }}
-                                    styles={k8sRoleSelectionStyle}
-                                    menuPlacement="auto"
-                                    menuPosition="fixed"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="cn-7 fs-13 fw-4 lh-20 mb-6">Resource name</div>
-                    <div className="mb-16">
-                        <CreatableSelect
-                            placeholder="Select resource"
-                            classNamePrefix="k8s-permission-select-resource-dropdown"
-                            options={objectMapping?.[k8sPermission.key]}
-                            isDisabled={!k8sPermission.kind || isResourceListLoading}
-                            value={k8sPermission.resource}
-                            name="Resource name"
-                            onChange={onResourceObjectChange}
-                            components={{
-                                IndicatorSeparator: null,
-                                // FIXME: creating new chips when All Resource, fails (UI doesn't show chip)
-                                // but the update went through
-                                // eslint-disable-next-line react/no-unstable-nested-components
-                                MultiValueContainer: ({ ...props }) => (
-                                    <MultiValueChipContainer
-                                        {...props}
-                                        validator={null}
-                                        isAllSelected={getIsK8sMultiValueContainer('resource')}
-                                    />
-                                ),
-                                ClearIndicator,
-                                MultiValueRemove,
-                                Option,
-                                MenuList: menuComponent,
-                                LoadingIndicator,
-                            }}
-                            closeMenuOnSelect={false}
-                            isMulti
-                            hideSelectedOptions={false}
-                            styles={resourceSelectStyles}
-                            isLoading={isResourceListLoading}
-                            menuPlacement="auto"
-                            menuPosition="fixed"
-                            // @ts-expect-error fix this with custom typing or custom select
-                            text="resource name"
+                        <SelectPicker
+                            placeholder="Select kind"
+                            inputId="k8s-permission-select-kind-dropdown"
+                            options={kindMapping?.[k8sPermission.key]?.map((option) => ({
+                                ...option,
+                                description:
+                                    option.value !== SELECT_ALL_VALUE
+                                        ? ('gvk' in option && (option.gvk as GVKType)?.Group) || K8S_EMPTY_GROUP
+                                        : null,
+                            }))}
+                            isDisabled={!k8sPermission.group}
+                            value={k8sPermission.kind}
+                            onChange={onKindSelect}
+                            name="kind"
+                            label="Kind"
+                            size={ComponentSizeType.large}
                         />
                     </div>
+                    <SelectPicker
+                        label="Resource name"
+                        placeholder="Select resource"
+                        inputId="k8s-permission-select-resource-dropdown"
+                        options={objectMapping?.[k8sPermission.key]}
+                        isDisabled={!k8sPermission.kind || isResourceListLoading}
+                        value={k8sPermission.resource}
+                        name="Resource name"
+                        onChange={onResourceObjectChange}
+                        closeMenuOnSelect={false}
+                        isMulti
+                        hideSelectedOptions={false}
+                        isLoading={isResourceListLoading}
+                        isCreatable
+                        size={ComponentSizeType.large}
+                    />
                     {K8S_PERMISSION_INFO_MESSAGE[k8sPermission?.kind?.label] && (
                         <InfoColourBar
                             message={K8S_PERMISSION_INFO_MESSAGE[k8sPermission.kind.label]}
@@ -571,41 +498,32 @@ const K8sListItemCard = ({
                             iconClass="icon-dim-20"
                         />
                     )}
-                    <div className="cn-7 fs-13 fw-4 lh-20 mb-6">Role</div>
-                    <div className="mb-16 w-300">
-                        <ReactSelect
+                    <div className="w-300">
+                        <SelectPicker
+                            label="Role"
                             placeholder="Select role"
-                            classNamePrefix="k8s-permission-select-role-dropdown"
+                            inputId="k8s-permission-select-role-dropdown"
                             options={k8sOptions}
-                            value={k8sPermission.action}
-                            defaultValue={k8sOptions[0]}
+                            value={k8sPermission.action ?? k8sOptions[0]}
                             onChange={setRoleSelection}
                             isSearchable={false}
                             formatOptionLabel={formatOptionLabel}
-                            components={{
-                                ClearIndicator: null,
-                                IndicatorSeparator: null,
-                                ValueContainer: CustomValueContainer,
-                            }}
-                            styles={k8sRoleSelectionStyle}
-                            menuPlacement="auto"
-                            menuPosition="fixed"
+                            size={ComponentSizeType.large}
                         />
                     </div>
                     {showStatus && (
-                        <>
-                            <div className="cn-7 fs-13 fw-4 lh-20 mb-6">Status</div>
-                            <div className="mb-16 w-300">
-                                <UserStatusUpdate
-                                    userStatus={k8sPermission.status}
-                                    timeToLive={k8sPermission.timeToLive}
-                                    userEmail=""
-                                    handleChange={handleUserStatusUpdate}
-                                    disabled={getIsStatusDropdownDisabled(userStatus)}
-                                    showTooltipWhenDisabled
-                                />
-                            </div>
-                        </>
+                        <div className="w-300">
+                            <UserStatusUpdate
+                                userStatus={k8sPermission.status}
+                                timeToLive={k8sPermission.timeToLive}
+                                userEmail=""
+                                handleChange={handleUserStatusUpdate}
+                                disabled={getIsStatusDropdownDisabled(userStatus)}
+                                showTooltipWhenDisabled
+                                label="Status"
+                                size={ComponentSizeType.large}
+                            />
+                        </div>
                     )}
                 </>
             )}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx
index abed2a641e..6831638008 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionModal.tsx
@@ -16,6 +16,9 @@
 
 import { useState } from 'react'
 import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
     Drawer,
     OptionType,
     stopPropagation,
@@ -97,9 +100,6 @@ const K8sPermissionModal = ({
             case K8sPermissionActionType.onRoleChange:
                 _k8sPermissionList[key].action = data
                 break
-            case K8sPermissionActionType.setNamespace:
-                _k8sPermissionList[key].namespace = data
-                break
             case K8sPermissionActionType.onStatusChange: {
                 const { status, timeToLive } = data
                 _k8sPermissionList[key] = {
@@ -187,23 +187,15 @@ const K8sPermissionModal = ({
                         />
                     ))}
                 </div>
-                <div className="w-100 pt-16 pb-16 pl-20 pr-20 flex right bcn-0 dc__border-top">
-                    <button
-                        type="button"
-                        data-testid="k8s-permission-cancel"
-                        className="cta cancel h-36 flex mr-16"
+                <div className="w-100 pt-16 pb-16 pl-20 pr-20 flex right dc__gap-16 bcn-0 dc__border-top">
+                    <Button
+                        text="Cancel"
                         onClick={close}
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        type="button"
-                        data-testid="k8s-permission-save"
-                        className="cta h-36 flex"
-                        onClick={savePermission}
-                    >
-                        Done
-                    </button>
+                        variant={ButtonVariantType.secondary}
+                        style={ButtonStyleType.neutral}
+                        dataTestId="k8s-permission-cancel"
+                    />
+                    <Button text="Done" onClick={savePermission} dataTestId="k8s-permission-save" />
                 </div>
             </div>
         </Drawer>
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionRow.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionRow.tsx
index 1f7ff92eb6..e10942d0c4 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionRow.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sPermissionRow.tsx
@@ -14,8 +14,13 @@
  * limitations under the License.
  */
 
-import Tippy from '@tippyjs/react'
-import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    OptionType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Clone } from '../../../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as TrashIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
 import { ReactComponent as Edit } from '../../../../../../assets/icons/ic-pencil.svg'
@@ -98,40 +103,38 @@ const K8sPermissionRow = ({
                         showTooltipWhenDisabled
                         showDropdownBorder={false}
                         breakLinesForTemporaryAccess
+                        size={ComponentSizeType.medium}
                     />
                 </span>
             )}
             <span className="flex right">
-                <Tippy className="default-tt" arrow={false} placement="top" content="Duplicate">
-                    <button
-                        type="button"
-                        className="dc__transparent flex p-4"
-                        onClick={clonePermission}
-                        aria-label="Clone permission"
-                    >
-                        <Clone className="icon-dim-16 fcn-6" />
-                    </button>
-                </Tippy>
-                <Tippy className="default-tt" arrow={false} placement="top" content="Edit">
-                    <button
-                        type="button"
-                        className="dc__transparent flex p-4"
-                        onClick={_editPermission}
-                        aria-label="Edit permission"
-                    >
-                        <Edit className="icon-dim-16 scn-6" />
-                    </button>
-                </Tippy>
-                <Tippy className="default-tt" arrow={false} placement="top" content="Delete">
-                    <button
-                        type="button"
-                        className="dc__transparent flex icon-delete p-4"
-                        onClick={_deletePermission}
-                        aria-label="Delete permission"
-                    >
-                        <TrashIcon className="scn-6 icon-dim-16" />
-                    </button>
-                </Tippy>
+                <Button
+                    icon={<Clone />}
+                    ariaLabel="Clone permission"
+                    onClick={clonePermission}
+                    dataTestId={`clone-permission-${index}`}
+                    variant={ButtonVariantType.borderLess}
+                    size={ComponentSizeType.xs}
+                    style={ButtonStyleType.neutral}
+                />
+                <Button
+                    icon={<Edit />}
+                    ariaLabel="Edit permission"
+                    onClick={_editPermission}
+                    dataTestId={`edit-permission-${index}`}
+                    variant={ButtonVariantType.borderLess}
+                    size={ComponentSizeType.xs}
+                    style={ButtonStyleType.neutral}
+                />
+                <Button
+                    icon={<TrashIcon />}
+                    ariaLabel="Delete permission"
+                    onClick={_deletePermission}
+                    dataTestId={`delete-permission-${index}`}
+                    variant={ButtonVariantType.borderLess}
+                    size={ComponentSizeType.xs}
+                    style={ButtonStyleType.negativeGrey}
+                />
             </span>
         </div>
     )
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/constants.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/constants.ts
index da9a2da047..b264e75f8c 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/constants.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/constants.ts
@@ -15,7 +15,6 @@
  */
 
 import { Nodes } from '../../../../../../components/app/types'
-import { authorizationSelectStyles } from '../../../constants'
 
 export enum K8sPermissionActionType {
     add = 'add',
@@ -29,7 +28,6 @@ export enum K8sPermissionActionType {
     onObjectChange = 'onObjectChange',
     onRoleChange = 'onRoleChange',
     onStatusChange = 'onStatusChange',
-    setNamespace = 'setNamespace',
 }
 
 export const K8S_PERMISSION_INFO_MESSAGE = {
@@ -41,36 +39,3 @@ export const K8S_PERMISSION_INFO_MESSAGE = {
     [Nodes.StatefulSet]: 'Specified role will be provided for child Pod(s) of selected StatefulSet(s).',
     [Nodes.DaemonSet]: 'Specified role will be provided for child Pod(s) of selected DaemonSet(s).',
 }
-
-export const resourceSelectStyles = {
-    ...authorizationSelectStyles,
-    control: (base, state) => ({
-        ...authorizationSelectStyles.control(base, state),
-        height: 'auto',
-        minHeight: '36px',
-        maxHeight: '300px',
-    }),
-    valueContainer: (base) => ({
-        ...authorizationSelectStyles.valueContainer(base),
-        display: 'flex',
-        columnGap: '8px',
-        rowGap: '4px',
-        overflow: 'scroll',
-        maxHeight: '290px',
-        padding: '0 8px',
-    }),
-    multiValue: (base) => ({
-        ...base,
-        border: '1px solid var(--N200)',
-        borderRadius: '4px',
-        background: 'white',
-        height: '24px',
-        padding: '2px 6px',
-        fontSize: '12px',
-        lineHeight: '20px',
-    }),
-    clearIndicator: (base) => ({
-        ...base,
-        padding: 0,
-    }),
-}
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/utils.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/utils.tsx
index 68018e95c0..69b2690085 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/utils.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/utils.tsx
@@ -16,10 +16,9 @@
 
 import { ReactSelectInputAction, EntityTypes } from '@devtron-labs/devtron-fe-common-lib'
 import { SELECT_ALL_VALUE } from '../../../../../../config'
-import { ActionTypes, ACTION_LABEL, authorizationSelectStyles } from '../../../constants'
+import { ActionTypes, ACTION_LABEL } from '../../../constants'
 import { K8sPermissionFilter } from '../../../types'
 import { getDefaultStatusAndTimeout } from '../../../libUtils'
-import { K8S_EMPTY_GROUP } from '../../../../../../components/ResourceBrowser/Constants'
 
 export const apiGroupAll = (permission, isLabel = false) => {
     if (permission === '') {
@@ -36,7 +35,7 @@ export const HEADER_OPTIONS = ['CLUSTER', 'API GROUP', 'KIND', 'NAMESPACE', 'RES
 
 export const multiSelectAllState = (selected, actionMeta, setState, options) => {
     if (actionMeta.action === ReactSelectInputAction.selectOption && actionMeta.option.value === SELECT_ALL_VALUE) {
-        setState(options)
+        setState(options.filter((option) => option.value === SELECT_ALL_VALUE))
     } else if (
         (actionMeta.action === ReactSelectInputAction.deselectOption && actionMeta.option.value === SELECT_ALL_VALUE) ||
         (actionMeta.action === ReactSelectInputAction.removeValue && actionMeta.removedValue.value === SELECT_ALL_VALUE)
@@ -50,7 +49,7 @@ export const multiSelectAllState = (selected, actionMeta, setState, options) =>
     } else if (selected.length >= options.length - 1 && actionMeta.action !== 'create-option') {
         setState(options)
     } else {
-        setState(selected)
+        setState(selected.filter((option) => option.value !== SELECT_ALL_VALUE))
     }
 }
 
@@ -83,27 +82,7 @@ export const getPermissionObject = (idx = 0, k8sPermission?: K8sPermissionFilter
     }
 }
 
-export const k8sRoleSelectionStyle = {
-    ...authorizationSelectStyles,
-    option: (base, state) => ({
-        ...authorizationSelectStyles.option(base, state),
-        marginRight: '8px',
-    }),
-    valueContainer: (base, state) => ({
-        ...authorizationSelectStyles.valueContainer(base),
-        display: 'flex',
-        color: state.selectProps.menuIsOpen ? 'var(--N500)' : base.color,
-    }),
-}
-
 export const excludeKeyAndClusterValue = ({ cluster, ...rest }: K8sPermissionFilter): K8sPermissionFilter => ({
     cluster: { label: cluster.label, value: cluster.label },
     ...rest,
 })
-
-export const formatResourceKindOptionLabel = (option): JSX.Element => (
-    <div className="flex left column">
-        <span className="w-100 dc__ellipsis-right">{option.label}</span>
-        {option.value !== SELECT_ALL_VALUE && <small className="cn-6">{option.gvk?.Group || K8S_EMPTY_GROUP}</small>}
-    </div>
-)
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/PermissionConfigurationFormProvider.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/PermissionConfigurationFormProvider.tsx
index fc1254eaef..f6c08b2824 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/PermissionConfigurationFormProvider.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/PermissionConfigurationFormProvider.tsx
@@ -45,6 +45,7 @@ export const PermissionConfigurationFormProvider = ({
     data: User | PermissionGroup
     showStatus: boolean
 }) => {
+    const [isSaveDisabled, setIsSaveDisabled] = useState(false)
     const [permissionType, setPermissionType] = useState<PermissionType>(PermissionType.SPECIFIC)
 
     const [directPermission, setDirectPermission] = useState<DirectPermissionsRoleFilter[]>([])
@@ -127,6 +128,8 @@ export const PermissionConfigurationFormProvider = ({
             handleUserStatusUpdate,
             data,
             showStatus,
+            isSaveDisabled,
+            setIsSaveDisabled,
         }),
         [
             permissionType,
@@ -145,6 +148,7 @@ export const PermissionConfigurationFormProvider = ({
             handleUserStatusUpdate,
             data,
             showStatus,
+            isSaveDisabled,
         ],
     )
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/types.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/types.ts
index 53bd0800d5..44c5543590 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/types.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/PermissionConfigurationForm/types.ts
@@ -56,4 +56,16 @@ export interface PermissionConfigurationFormContext {
      * @default false
      */
     showStatus: boolean
+    /**
+     * State to control the saving of the permissions
+     *
+     * This is required since the any of the api call for parsing the permissions could fail
+     */
+    isSaveDisabled: boolean
+    setIsSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>
 }
+
+export type AccessTypeToErrorMapType = Record<
+    PermissionConfigurationFormContext['directPermission'][number]['accessType'],
+    boolean
+>
diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/UserPermissionGroupsSelector/UserPermissionGroupsSelector.component.tsx b/src/Pages/GlobalConfigurations/Authorization/Shared/components/UserPermissionGroupsSelector/UserPermissionGroupsSelector.component.tsx
index 4427a6e9a5..de408a1337 100644
--- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/UserPermissionGroupsSelector/UserPermissionGroupsSelector.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/UserPermissionGroupsSelector/UserPermissionGroupsSelector.component.tsx
@@ -16,29 +16,23 @@
 
 import { useEffect } from 'react'
 import {
-    MultiValueChipContainer,
-    Option,
     useAsync,
     UserRoleGroupsTable,
-    GenericSectionErrorState,
-    LoadingIndicator,
-    OptionType,
     UserStatus,
     UserRoleGroup,
+    SelectPicker,
+    SelectPickerOptionType,
+    ComponentSizeType,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Select from 'react-select'
 import { PermissionGroup, User } from '../../../types'
 import { importComponentFromFELibrary, mapByKey } from '../../../../../../components/common'
 import { getPermissionGroupList } from '../../../authorization.service'
 import { usePermissionConfiguration } from '../PermissionConfigurationForm'
-import { authorizationSelectStyles } from '../../../constants'
 import { getDefaultStatusAndTimeout } from '../../../libUtils'
 
 const StatusHeaderCell = importComponentFromFELibrary('StatusHeaderCell', null, 'function')
 const UserStatusUpdate = importComponentFromFELibrary('UserStatusUpdate', null, 'function')
 
-const MultiValueContainer = (props) => <MultiValueChipContainer {...props} validator={null} />
-
 const UserPermissionGroupsSelector = () => {
     const { userRoleGroups, setUserRoleGroups, data: userData, userStatus, showStatus } = usePermissionConfiguration()
     const [isLoading, result, error, reloadGroupList] = useAsync(() =>
@@ -63,24 +57,21 @@ const UserPermissionGroupsSelector = () => {
 
     const userGroupsMap = mapByKey<Map<PermissionGroup['name'], PermissionGroup>>(userGroupsList, 'name')
 
-    const groupOptions = userGroupsList?.map((group) => ({ value: group.name, label: group.name }))
+    const groupOptions: SelectPickerOptionType[] = userGroupsList?.map((group) => ({
+        value: group.name,
+        label: group.name,
+        description: group.description,
+    }))
     const selectedValue = userRoleGroups.map((userGroup) => ({ value: userGroup.name, label: userGroup.name }))
 
-    const formatChartGroupOptionLabel = ({ value, label }) => (
-        <div className="flex left column">
-            <span>{label}</span>
-            <small>{userGroupsMap.has(value) ? userGroupsMap.get(value).description : ''}</small>
-        </div>
-    )
-
-    const handleChange = (selectedOptions: OptionType[]) => {
+    const handleChange = (selectedOptions: SelectPickerOptionType[]) => {
         const alreadyAddedGroupsMap = mapByKey(userRoleGroups, 'name')
         const selectedOptionsMap = mapByKey(selectedOptions, 'value')
 
         const filteredOptions: User['userRoleGroups'] = selectedOptions
             .filter((selectedOption) => !alreadyAddedGroupsMap.has(selectedOption.value))
             .map((selectedOption) => {
-                const { id, name, description } = userGroupsMap.get(selectedOption.value)
+                const { id, name, description } = userGroupsMap.get(selectedOption.value as string)
 
                 return {
                     id,
@@ -121,41 +112,23 @@ const UserPermissionGroupsSelector = () => {
 
     return (
         <div className="flexbox-col dc__gap-8">
-            <div className="flexbox-col dc__gap-8">
-                <h3 className="cn-9 fs-13 lh-20 fw-6 m-0">Permission Groups</h3>
-                <Select
-                    placeholder="Select permission groups"
-                    value={selectedValue}
-                    components={{
-                        IndicatorSeparator: null,
-                        MultiValueContainer,
-                        ClearIndicator: null,
-                        Option,
-                        LoadingIndicator,
-                        ...(error
-                            ? {
-                                  // eslint-disable-next-line react/no-unstable-nested-components
-                                  NoOptionsMessage: () => (
-                                      <GenericSectionErrorState withBorder reload={reloadGroupList} />
-                                  ),
-                              }
-                            : {}),
-                    }}
-                    styles={authorizationSelectStyles}
-                    formatOptionLabel={formatChartGroupOptionLabel}
-                    closeMenuOnSelect={false}
-                    isMulti
-                    name="groups"
-                    options={groupOptions}
-                    hideSelectedOptions={false}
-                    onChange={handleChange}
-                    id="permission-groups-dropdown"
-                    controlShouldRenderValue={false}
-                    isLoading={isLoading}
-                    isDisabled={isLoading}
-                    menuPlacement="auto"
-                />
-            </div>
+            <SelectPicker
+                inputId="permission-groups-dropdown"
+                label="Permission Groups"
+                placeholder="Select permission groups"
+                value={selectedValue}
+                optionListError={error}
+                reloadOptionList={reloadGroupList}
+                isMulti
+                name="groups"
+                options={groupOptions}
+                onChange={handleChange}
+                controlShouldRenderValue={false}
+                isLoading={isLoading}
+                isDisabled={isLoading}
+                showSelectedOptionsCount
+                size={ComponentSizeType.large}
+            />
             {userRoleGroups.length > 0 && (
                 <UserRoleGroupsTable
                     roleGroups={userRoleGroups}
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx
index 8a2347ddf7..17e9998fa9 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/AddEdit/UserForm.tsx
@@ -14,14 +14,10 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import {
     showError,
-    Progressing,
     DeleteDialog,
-    ClearIndicator,
-    MultiValueRemove,
-    MultiValueChipContainer,
     ServerErrors,
     OptionType,
     UserStatus,
@@ -29,8 +25,14 @@ import {
     UserGroupType,
     ToastVariantType,
     ToastManager,
+    ComponentSizeType,
+    Button,
+    ButtonComponentType,
+    ButtonVariantType,
+    ButtonStyleType,
+    SelectPicker,
+    SelectPickerProps,
 } from '@devtron-labs/devtron-fe-common-lib'
-import Creatable from 'react-select/creatable'
 import { Link, useHistory } from 'react-router-dom'
 import { validateEmail, deepEqual, importComponentFromFELibrary } from '../../../../../components/common'
 import { API_STATUS_CODES, REQUIRED_FIELDS_MISSING, URLS } from '../../../../../config'
@@ -43,9 +45,8 @@ import {
     PermissionConfigurationForm,
     usePermissionConfiguration,
 } from '../../Shared/components/PermissionConfigurationForm'
-import { createUserPermissionPayload, isDirectPermissionFormComplete } from '../../utils'
+import { createUserPermissionPayload, validateDirectPermissionForm } from '../../utils'
 import { excludeKeyAndClusterValue } from '../../Shared/components/K8sObjectPermissions/utils'
-import { getCreatableChipStyle } from '../utils'
 import { getDefaultUserStatusAndTimeout } from '../../libUtils'
 
 const UserAutoAssignedRoleGroupsTable = importComponentFromFELibrary('UserAutoAssignedRoleGroupsTable')
@@ -53,8 +54,6 @@ const UserPermissionsInfoBar = importComponentFromFELibrary('UserPermissionsInfo
 const UserStatusUpdate = importComponentFromFELibrary('UserStatusUpdate', null, 'function')
 const UserGroupSelector = importComponentFromFELibrary('UserGroupSelector', null, 'function')
 
-const creatableChipStyle = getCreatableChipStyle()
-
 const createOption = (label: string) => ({
     label,
     value: label,
@@ -78,6 +77,7 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
         timeToLive,
         handleUserStatusUpdate,
         showStatus,
+        isSaveDisabled,
     } = usePermissionConfiguration()
     const _userData = userData as User
 
@@ -90,18 +90,8 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
     const [submitting, setSubmitting] = useState(false)
     const [deleteConfirmationModal, setDeleteConfirmationModal] = useState(false)
 
-    const creatableRef = useRef(null)
-    const groupPermissionsRef = useRef(null)
     const { push } = useHistory()
 
-    useEffect(() => {
-        if (creatableRef.current) {
-            creatableRef.current.focus()
-        } else if (groupPermissionsRef.current) {
-            groupPermissionsRef.current.focus()
-        }
-    }, [])
-
     const _redirectToUserPermissionList = () => {
         push(URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION)
     }
@@ -124,13 +114,15 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
             emailState.emails.length !==
             emailState.emails.map((email) => email.value).filter((email) => validateEmail(email)).length
         ) {
+            const errorMessage = 'One or more emails could not be verified to be correct.'
+
             setEmailState((prevEmailState) => ({
                 ...prevEmailState,
-                emailError: 'One or more emails could not be verified to be correct.',
+                emailError: errorMessage,
             }))
             ToastManager.showToast({
                 variant: ToastVariantType.error,
-                description: 'One or more emails could not be verified to be correct.',
+                description: errorMessage,
             })
             return false
         }
@@ -138,9 +130,10 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
     }
 
     const handleSubmit = async () => {
-        if (!validateForm() || !isDirectPermissionFormComplete(directPermission, setDirectPermission)) {
+        if (!validateForm() || !validateDirectPermissionForm(directPermission, setDirectPermission).isValid) {
             return
         }
+
         setSubmitting(true)
 
         const payload = createUserPermissionPayload({
@@ -275,18 +268,8 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
         })
     }
 
-    const CreatableComponents = useMemo(
-        () => ({
-            DropdownIndicator: null,
-            ClearIndicator,
-            MultiValueRemove,
-            // eslint-disable-next-line react/no-unstable-nested-components
-            MultiValueContainer: (props) => <MultiValueChipContainer {...props} validator={validateEmail} />,
-            IndicatorSeparator: null,
-            Menu: () => null,
-        }),
-        [],
-    )
+    const getIsEmailInputValid: SelectPickerProps<string, true>['multiSelectProps']['getIsOptionValid'] = ({ value }) =>
+        validateEmail(value)
 
     return (
         <div className="flexbox-col dc__align-start dc__align-self-stretch flex-grow-1 dc__gap-24 pb-16">
@@ -307,18 +290,20 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
                                 userEmail={_userData?.emailId ?? ''}
                                 handleChange={handleUserStatusUpdate}
                                 disabled={submitting}
+                                size={ComponentSizeType.medium}
                             />
                         )}
                         {!isAddMode && (
-                            <button
+                            <Button
                                 disabled={submitting}
-                                type="button"
-                                className="cta delete override-button flex dc__gap-6 h-32"
+                                variant={ButtonVariantType.secondary}
+                                style={ButtonStyleType.negative}
+                                size={ComponentSizeType.medium}
+                                dataTestId="delete-user"
+                                text="Delete"
+                                startIcon={<PlusIcon />}
                                 onClick={toggleDeleteConfirmationModal}
-                            >
-                                <PlusIcon className="icon-dim-14 mw-14" />
-                                Delete
-                            </button>
+                            />
                         )}
                     </div>
                 )}
@@ -328,38 +313,28 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
                     {isAddMode && (
                         <>
                             {isAutoAssignFlowEnabled && <UserPermissionsInfoBar />}
-                            <div>
-                                {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                                <label htmlFor="email-addresses" className="fs-13 fw-4 lh-20 cn-7 mb-8">
-                                    Email addresses
-                                    <span className="cr-5">&nbsp;*</span>
-                                </label>
-                                <Creatable
-                                    ref={creatableRef}
-                                    options={[]}
-                                    components={CreatableComponents}
-                                    styles={creatableChipStyle}
-                                    autoFocus
-                                    isMulti
-                                    isClearable
-                                    inputValue={emailState.inputEmailValue}
-                                    placeholder="Type email and press enter"
-                                    isValidNewOption={() => false}
-                                    backspaceRemovesValue
-                                    value={emailState.emails}
-                                    onBlur={handleCreatableBlur}
-                                    onInputChange={handleInputChange}
-                                    onKeyDown={handleKeyDown}
-                                    onChange={handleEmailChange}
-                                    id="email-addresses"
-                                />
-                                {emailState.emailError && (
-                                    <span className="form__error">
-                                        <Error className="form__icon form__icon--error" />
-                                        {emailState.emailError}
-                                    </span>
-                                )}
-                            </div>
+                            <SelectPicker
+                                required
+                                label="Email addresses"
+                                isMulti
+                                options={[]}
+                                autoFocus
+                                isClearable
+                                placeholder="Type email and press enter"
+                                inputValue={emailState.inputEmailValue}
+                                value={emailState.emails}
+                                onBlur={handleCreatableBlur}
+                                onInputChange={handleInputChange}
+                                onKeyDown={handleKeyDown}
+                                onChange={handleEmailChange}
+                                inputId="email-addresses"
+                                error={emailState.emailError}
+                                multiSelectProps={{
+                                    getIsOptionValid: getIsEmailInputValid,
+                                }}
+                                shouldHideMenu
+                                size={ComponentSizeType.large}
+                            />
                             <div className="dc__border-top" />
                         </>
                     )}
@@ -383,20 +358,29 @@ const UserForm = ({ isAddMode }: { isAddMode: boolean }) => {
                     )}
                 </div>
                 <div className="flexbox pt-16 pl-20 pr-20 dc__border-top-n1 dc__align-items-center dc__align-self-stretch dc__gap-8">
-                    <button type="submit" className="cta flex h-32" disabled={submitting} onClick={handleSubmit}>
-                        {submitting ? <Progressing /> : 'Save'}
-                    </button>
-                    <Link
-                        to={URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION}
-                        role="button"
-                        aria-disabled={submitting}
-                        className={`cta cancel flex h-32 anchor ${
-                            submitting ? 'dc__disable-click disabled-opacity' : ''
-                        }`}
-                        type="button"
-                    >
-                        Cancel
-                    </Link>
+                    <Button
+                        dataTestId="submit-group-form"
+                        text="Save"
+                        onClick={handleSubmit}
+                        size={ComponentSizeType.medium}
+                        disabled={isSaveDisabled}
+                        isLoading={submitting}
+                        buttonProps={{
+                            type: 'submit',
+                        }}
+                    />
+                    <Button
+                        dataTestId="cancel-user-form"
+                        text="Cancel"
+                        component={ButtonComponentType.link}
+                        linkProps={{
+                            to: URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION,
+                        }}
+                        variant={ButtonVariantType.secondary}
+                        size={ComponentSizeType.medium}
+                        style={ButtonStyleType.neutral}
+                        disabled={submitting}
+                    />
                     {!isAddMode &&
                         !deepEqual(currentK8sPermissionRef.current, k8sPermission.map(excludeKeyAndClusterValue)) && (
                             <span className="flex dc__gap-4 cy-7">
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/ExportUserPermissionsToCsv.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/ExportUserPermissionsToCsv.tsx
index eb8e6d24b3..d494e2e48e 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/ExportUserPermissionsToCsv.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/ExportUserPermissionsToCsv.tsx
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import moment from 'moment'
-import { Moment12HourExportFormat } from '../../../../../config'
+import { getFormattedUTCTimeForExport, UserTypeToFetchType } from '@devtron-labs/devtron-fe-common-lib'
+import { ExportToCsvProps } from '@Components/common/ExportToCsv/types'
 
 import { UserPermissionListHeaderProps } from './types'
 import ExportToCsv from '../../../../../components/common/ExportToCsv/ExportToCsv'
@@ -26,6 +26,11 @@ import { LAST_LOGIN_TIME_NULL_STATE } from '../constants'
 import { importComponentFromFELibrary } from '../../../../../components/common'
 
 const getStatusExportText = importComponentFromFELibrary('getStatusExportText', null, 'function')
+const getUserExportToCsvConfiguration = importComponentFromFELibrary(
+    'getUserExportToCsvConfiguration',
+    null,
+    'function',
+)
 const showStatus = !!getStatusExportText
 
 const ExportUserPermissionsToCsv = ({
@@ -37,8 +42,8 @@ const ExportUserPermissionsToCsv = ({
     /**
      * Returns the list of users which have permission to devtron applications
      */
-    const getUsersDataToExport = async () => {
-        const { users } = await getDataToExport()
+    const getUsersDataToExport: ExportToCsvProps<UserTypeToFetchType>['apiPromise'] = async (selectedConfig) => {
+        const { users } = await getDataToExport(selectedConfig)
         const userList = users.reduce((_usersList, _user) => {
             let isRowAdded = false
 
@@ -51,6 +56,8 @@ const ExportUserPermissionsToCsv = ({
                 isRowAdded = true
             }
 
+            const updatedOn = getFormattedUTCTimeForExport(_user.updatedOn)
+
             const _userData = {
                 emailId: _user.emailId,
                 userId: _user.id,
@@ -58,12 +65,16 @@ const ExportUserPermissionsToCsv = ({
                     ? {
                           status: getStatusExportText(_user.userStatus, _user.timeToLive),
                           permissionStatus: '-',
+                          createdOn: getFormattedUTCTimeForExport(_user.createdOn),
+                          updatedOn,
+                          deletedOn: _user.isDeleted ? updatedOn : '-',
+                          isDeleted: _user.isDeleted,
                       }
                     : {}),
                 lastLoginTime:
                     _user.lastLoginTime === LAST_LOGIN_TIME_NULL_STATE
                         ? _user.lastLoginTime
-                        : `${moment.utc(_user.lastLoginTime).format(Moment12HourExportFormat)} (UTC)`,
+                        : getFormattedUTCTimeForExport(_user.lastLoginTime),
                 superAdmin: _user.superAdmin,
                 group: '-',
                 project: '-',
@@ -106,6 +117,10 @@ const ExportUserPermissionsToCsv = ({
                         },
                     )
                 }
+
+                if (!isRowAdded) {
+                    _pushToUserList(_userData)
+                }
             }
 
             return _usersList
@@ -115,7 +130,15 @@ const ExportUserPermissionsToCsv = ({
     }
 
     return (
-        <ExportToCsv disabled={disabled} apiPromise={getUsersDataToExport} fileName={FILE_NAMES.Users} showOnlyIcon />
+        <ExportToCsv
+            disabled={disabled}
+            apiPromise={getUsersDataToExport}
+            fileName={FILE_NAMES.Users}
+            showOnlyIcon
+            {...(getUserExportToCsvConfiguration && {
+                configuration: getUserExportToCsvConfiguration(),
+            })}
+        />
     )
 }
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx
index 7ba6f2e1de..3473dcc18b 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/NoUsers.tsx
@@ -14,23 +14,23 @@
  * limitations under the License.
  */
 
-import { GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
-import { Link } from 'react-router-dom'
+import { Button, ButtonComponentType, ComponentSizeType, GenericEmptyState } from '@devtron-labs/devtron-fe-common-lib'
 import nullStateImage from '../../../../../assets/img/empty-applist@2x.png'
 import { ReactComponent as AddIcon } from '../../../../../assets/icons/ic-add.svg'
 import { EMPTY_STATE_STATUS } from '../../../../../config/constantMessaging'
 import { URLS } from '../../../../../config'
 
 const renderAddUserButton = () => (
-    <Link
-        type="button"
-        to={`${URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION}/add`}
-        role="button"
-        className="cta dc__gap-4 flex h-32 anchor"
-    >
-        <AddIcon />
-        Add user
-    </Link>
+    <Button
+        text="Add user"
+        startIcon={<AddIcon />}
+        component={ButtonComponentType.link}
+        linkProps={{
+            to: `${URLS.GLOBAL_CONFIG_AUTH_USER_PERMISSION}/add`,
+        }}
+        size={ComponentSizeType.medium}
+        dataTestId="add-permission-group-link"
+    />
 )
 
 const NoUsers = () => (
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx
index 0e9c8fac74..8301c85e1b 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionList.component.tsx
@@ -34,9 +34,14 @@ import { User } from '../../types'
 import { getIsAdminOrSystemUser, parseSearchParams } from '../utils'
 import UserPermissionContainer from './UserPermissionContainer'
 import { BulkSelectionModalConfig, BulkSelectionModalTypes } from '../../Shared/components/BulkSelection'
-import { UserListFilter } from './types'
+import { UserListFilter, UserPermissionContainerProps } from './types'
 
 const StatusHeaderCell = importComponentFromFELibrary('StatusHeaderCell', null, 'function')
+const getUserTypeToFetchFromSelectedConfigOptions = importComponentFromFELibrary(
+    'getUserTypeToFetchFromSelectedConfigOptions',
+    null,
+    'function',
+)
 
 const showStatus = !!StatusHeaderCell
 
@@ -102,7 +107,7 @@ const UserPermissionList = () => {
 
     const showLoadingState = isLoading || getIsRequestAborted(error)
 
-    const getUserDataForExport = () =>
+    const getUserDataForExport: UserPermissionContainerProps['getUserDataForExport'] = (selectedConfig) =>
         getUserList({
             ...filterConfig,
             showAll: true,
@@ -110,6 +115,9 @@ const UserPermissionList = () => {
             size: null,
             sortBy: UserListSortableKeys.email,
             sortOrder: SortingOrder.ASC,
+            ...(getUserTypeToFetchFromSelectedConfigOptions && {
+                typeToFetch: getUserTypeToFetchFromSelectedConfigOptions(selectedConfig),
+            }),
         })
 
     const getSelectAllDialogStatus = () => {
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx
index d126231468..58d19d18b7 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionListHeader.tsx
@@ -14,8 +14,15 @@
  * limitations under the License.
  */
 
-import { SearchBar, InfoIconTippy, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
-import { Link, useRouteMatch } from 'react-router-dom'
+import {
+    SearchBar,
+    InfoIconTippy,
+    useMainContext,
+    Button,
+    ButtonComponentType,
+    ComponentSizeType,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { useRouteMatch } from 'react-router-dom'
 import { DOCUMENTATION } from '../../../../../config'
 import { ReactComponent as PlusIcon } from '../../../../../assets/icons/ic-add.svg'
 import { ReactComponent as ArrowSquareOut } from '../../../../../assets/icons/ic-arrow-square-out.svg'
@@ -39,7 +46,7 @@ const UserPermissionListHeader = ({
     const { isSuperAdmin } = useMainContext()
 
     return (
-        <div className="flex dc__content-space pl-20 pr-20">
+        <div className="flex dc__content-space px-20 dc__zi-2">
             <div className="flex dc__gap-8">
                 <h2 className="fs-16 lh-32 cn-9 fw-6 m-0">User Permissions</h2>
                 <InfoIconTippy
@@ -71,10 +78,16 @@ const UserPermissionListHeader = ({
                 />
                 {showStatus && <StatusFilterDropdown value={status} onChange={handleStatusFilterChange} />}
                 <div className="dc__divider h-20" />
-                <Link to={`${path}/add`} type="button" className="cta anchor flex dc__gap-6 h-32">
-                    <PlusIcon className="icon-dim-14 mw-14" />
-                    Add Users
-                </Link>
+                <Button
+                    text="Add Users"
+                    startIcon={<PlusIcon />}
+                    component={ButtonComponentType.link}
+                    linkProps={{
+                        to: `${path}/add`,
+                    }}
+                    size={ComponentSizeType.medium}
+                    dataTestId="add-users-link"
+                />
                 {isSuperAdmin && (
                     <>
                         <div className="dc__divider h-20" />
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionRow.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionRow.tsx
index 125ba5c691..08f4eab4a7 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionRow.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/UserPermissionRow.tsx
@@ -26,6 +26,11 @@ import {
     BulkSelectionEvents,
     ToastVariantType,
     ToastManager,
+    Button,
+    ButtonComponentType,
+    ComponentSizeType,
+    ButtonVariantType,
+    ButtonStyleType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Link, useRouteMatch } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
@@ -102,10 +107,11 @@ const UserPermissionRow = ({
 
     return (
         <>
+            {/* dc__visible-hover is required for status cell and checkbox */}
             <div
                 className={`user-permission__row ${
                     showStatus ? 'user-permission__row--with-status' : ''
-                } dc__visible-hover dc__visible-hover--parent pl-20 pr-20 ${
+                } dc__visible-hover dc__visible-hover--parent dc__opacity-hover dc__opacity-hover--parent pl-20 pr-20 ${
                     isChecked && !isAdminOrSystemUser ? 'bc-b50' : ''
                 } dc__hover-n50`}
             >
@@ -189,24 +195,31 @@ const UserPermissionRow = ({
                     <span />
                 ) : (
                     <div className="flex dc__gap-4">
-                        <Link
-                            type="button"
-                            className="dc__visible-hover--child dc__transparent p-4 flex"
-                            data-testid={`user-permission__edit-button-${index}`}
-                            aria-label="Edit user"
-                            to={`${path}/${id}`}
-                        >
-                            <Edit className="scn-6 icon-dim-16 mw-16" />
-                        </Link>
-                        <button
-                            type="button"
-                            className="dc__visible-hover--child dc__transparent icon-delete p-4 flex"
-                            data-testid={`user-permission__delete-button-${index}`}
+                        <Button
+                            component={ButtonComponentType.link}
+                            icon={<Edit />}
+                            ariaLabel="Edit user"
+                            showAriaLabelInTippy={false}
+                            dataTestId={`user-permission__edit-button-${index}`}
+                            linkProps={{
+                                to: `${path}/${id}`,
+                            }}
+                            isOpacityHoverChild
+                            size={ComponentSizeType.xs}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.neutral}
+                        />
+                        <Button
+                            icon={<Trash />}
+                            ariaLabel="Delete user"
+                            showAriaLabelInTippy={false}
+                            dataTestId={`user-permission__delete-button-${index}`}
                             onClick={toggleDeleteModal}
-                            aria-label="Delete user"
-                        >
-                            <Trash className="scn-6 icon-dim-16 mw-16" />
-                        </button>
+                            isOpacityHoverChild
+                            size={ComponentSizeType.xs}
+                            variant={ButtonVariantType.borderLess}
+                            style={ButtonStyleType.negativeGrey}
+                        />
                     </div>
                 )}
             </div>
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/constants.ts b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/constants.ts
index e798ae28bf..e0fd457389 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/constants.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/constants.ts
@@ -26,6 +26,9 @@ export const userListLoading: User[] = Array.from(Array(DEFAULT_SHIMMER_LOADING_
     userRoleGroups: [],
     userGroups: [],
     superAdmin: false,
+    createdOn: '',
+    updatedOn: '',
+    isDeleted: false,
     ...getDefaultUserStatusAndTimeout(),
 }))
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/types.tsx b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/types.tsx
index e8ecb7f6b5..376d2efe2b 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/types.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/List/types.tsx
@@ -21,7 +21,9 @@ import {
     UserListSortableKeys,
     UserStatus,
     UseUrlFiltersReturnType,
+    UserTypeToFetchType,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { ExportToCsvProps } from '@Components/common/ExportToCsv/types'
 import { getUserList } from '../../authorization.service'
 import { BulkSelectionActionWidgetProps, BulkSelectionModalConfig } from '../../Shared/components/BulkSelection'
 import { User } from '../../types'
@@ -42,7 +44,9 @@ export interface UserPermissionListHeaderProps {
     showStatus: boolean
     handleSearch: SearchBarProps['handleEnter']
     initialSearchText: SearchBarProps['initialSearchText']
-    getDataToExport: () => ReturnType<typeof getUserList>
+    getDataToExport: (
+        ...params: Parameters<ExportToCsvProps<UserTypeToFetchType>['apiPromise']>
+    ) => ReturnType<typeof getUserList>
     status: UserStatus[]
     handleStatusFilterChange: (status: UserStatus[]) => void
 }
diff --git a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/utils.ts b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/utils.ts
index ffaeb23cb6..6b3445810a 100644
--- a/src/Pages/GlobalConfigurations/Authorization/UserPermissions/utils.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/UserPermissions/utils.ts
@@ -15,8 +15,7 @@
  */
 
 import { DefaultUserKey } from '@devtron-labs/devtron-fe-common-lib'
-import { importComponentFromFELibrary, validateEmail } from '../../../../components/common'
-import { authorizationSelectStyles } from '../constants'
+import { importComponentFromFELibrary } from '../../../../components/common'
 import { User } from '../types'
 import { UserListFilter } from './List/types'
 
@@ -28,31 +27,3 @@ export const getIsAdminOrSystemUser = (userEmail: User['emailId']): boolean =>
 export const parseSearchParams = (searchParams: URLSearchParams): UserListFilter => ({
     status: getStatusFromSearchParams ? getStatusFromSearchParams(searchParams) : [],
 })
-
-export const getCreatableChipStyle = () => ({
-    ...authorizationSelectStyles,
-    multiValue: (base, state) => ({
-        ...base,
-        border: validateEmail(state.data.value) ? `1px solid var(--N200)` : `1px solid var(--R500)`,
-        borderRadius: `4px`,
-        background: validateEmail(state.data.value) ? 'white' : 'var(--R100)',
-        height: '28px',
-        margin: 0,
-        paddingLeft: '2px 4px',
-        fontSize: '12px',
-    }),
-    control: (base, state) => ({
-        ...authorizationSelectStyles.control(base, state),
-        minHeight: '36px',
-        height: 'auto',
-    }),
-    indicatorsContainer: (base) => ({
-        ...base,
-        height: '34px',
-    }),
-    valueContainer: (base) => ({
-        ...authorizationSelectStyles.valueContainer(base),
-        gap: '4px',
-        paddingBlock: '4px',
-    }),
-})
diff --git a/src/Pages/GlobalConfigurations/Authorization/constants.ts b/src/Pages/GlobalConfigurations/Authorization/constants.ts
index 2b524eb07a..8824f6c6a9 100644
--- a/src/Pages/GlobalConfigurations/Authorization/constants.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/constants.ts
@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import { getCommonSelectStyle, EntityTypes } from '@devtron-labs/devtron-fe-common-lib'
+import { getCommonSelectStyle, EntityTypes, ACCESS_TYPE_MAP } from '@devtron-labs/devtron-fe-common-lib'
 import { SELECT_ALL_VALUE } from '../../../config'
 import { APIRoleFilter } from './types'
 import { getDefaultStatusAndTimeout } from './libUtils'
 import { importComponentFromFELibrary } from '../../../components/common'
 import { groupHeaderStyle } from '../../../components/v2/common/ReactSelect.utils'
+import { AccessTypeToErrorMapType } from './Shared/components/PermissionConfigurationForm/types'
 
 /**
  * Permission types for users and permission groups
@@ -91,3 +92,9 @@ export const IMAGE_APPROVER_ACTION = importComponentFromFELibrary('IMAGE_APPROVE
 export const CONFIG_APPROVER_ACTION = importComponentFromFELibrary('CONFIG_APPROVER_ACTION', {}, 'function')
 export const ARTIFACT_PROMOTER_ACTION = importComponentFromFELibrary('ARTIFACT_PROMOTER_ACTION', {}, 'function')
 export const TERMINAL_EXEC_ACTION = importComponentFromFELibrary('TERMINAL_EXEC_ACTION', {}, 'function')
+
+export const DEFAULT_ACCESS_TYPE_TO_ERROR_MAP: AccessTypeToErrorMapType = {
+    [ACCESS_TYPE_MAP.DEVTRON_APPS]: false,
+    [ACCESS_TYPE_MAP.HELM_APPS]: false,
+    [ACCESS_TYPE_MAP.JOBS]: false,
+} as const
diff --git a/src/Pages/GlobalConfigurations/Authorization/types.ts b/src/Pages/GlobalConfigurations/Authorization/types.ts
index 0b2e153f55..0f2e303435 100644
--- a/src/Pages/GlobalConfigurations/Authorization/types.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/types.ts
@@ -132,6 +132,24 @@ export interface UserDto {
         timeoutWindowExpression?: string
     }[]
     userGroups: UserGroupDTO[]
+    /**
+     * Denotes the time when the user was created
+     *
+     * Note: Enterprise only
+     */
+    createdOn: string
+    /**
+     * Denotes the time when the user was last updated
+     *
+     * Note: Enterprise only
+     */
+    updatedOn: string
+    /**
+     * Denotes is the user is deleted
+     *
+     * Note: Enterprise only
+     */
+    isDeleted: boolean
 }
 
 export interface User
@@ -160,7 +178,8 @@ export type UserCreateOrUpdateParamsType = Pick<
     userGroups: Pick<UserGroupType, 'name' | 'userGroupId'>[]
 }
 
-export interface UserCreateOrUpdatePayloadType extends Omit<UserDto, 'userGroups'> {
+export interface UserCreateOrUpdatePayloadType
+    extends Omit<UserDto, 'userGroups' | 'createdOn' | 'updatedOn' | 'isDeleted'> {
     userGroups: Pick<UserGroupDTO, 'identifier'>[]
 }
 
diff --git a/src/Pages/GlobalConfigurations/Authorization/utils.ts b/src/Pages/GlobalConfigurations/Authorization/utils.ts
index d711557adc..13a4f694ce 100644
--- a/src/Pages/GlobalConfigurations/Authorization/utils.ts
+++ b/src/Pages/GlobalConfigurations/Authorization/utils.ts
@@ -29,7 +29,10 @@ import {
     CustomRoleAndMeta,
     CustomRoles,
     MetaPossibleRoles,
+    SelectPickerOptionType,
+    stringComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
+import { GroupBase } from 'react-select'
 import { Moment12HourFormat, REQUIRED_FIELDS_MISSING, SELECT_ALL_VALUE, SERVER_MODE } from '../../../config'
 import {
     APIRoleFilter,
@@ -51,11 +54,16 @@ import {
     PermissionType,
     ViewChartGroupPermission,
     TERMINAL_EXEC_ACTION,
+    DEFAULT_ACCESS_TYPE_TO_ERROR_MAP,
 } from './constants'
 import { AppIdWorkflowNamesMapping } from '../../../services/service.types'
 import { ALL_EXISTING_AND_FUTURE_ENVIRONMENTS_VALUE } from './Shared/components/AppPermissions/constants'
 import { importComponentFromFELibrary } from '../../../components/common'
 import { getFormattedTimeToLive, getParsedUserGroupList } from './libUtils'
+import {
+    AccessTypeToErrorMapType,
+    PermissionConfigurationFormContext,
+} from './Shared/components/PermissionConfigurationForm/types'
 
 const getUserStatus: (status: UserStatusDto, timeToLive: string) => UserStatus = importComponentFromFELibrary(
     'getUserStatus',
@@ -90,6 +98,9 @@ export const transformUserResponse = (_user: UserDto): User => {
         userRoleGroups,
         roleFilters,
         userGroups,
+        isDeleted,
+        createdOn,
+        updatedOn,
         ...user
     } = _user
     const timeToLive = getFormattedTimeToLive(timeoutWindowExpression)
@@ -123,6 +134,9 @@ export const transformUserResponse = (_user: UserDto): User => {
             ) ?? [],
         roleFilters: transformRoleFilters(roleFilters),
         userGroups: getParsedUserGroupList(userGroups),
+        createdOn: createdOn && createdOn !== ZERO_TIME_STRING ? moment(createdOn).format(Moment12HourFormat) : '',
+        updatedOn: updatedOn && updatedOn !== ZERO_TIME_STRING ? moment(updatedOn).format(Moment12HourFormat) : '',
+        isDeleted: isDeleted ?? false,
     }
 }
 
@@ -368,31 +382,51 @@ export const createUserPermissionPayload = ({
     userGroups,
 })
 
-export const isDirectPermissionFormComplete = (directPermission, setDirectPermission): boolean => {
-    let isComplete = true
-    const tempPermissions = directPermission.reduce((agg, curr) => {
-        if (curr.team) {
-            if (curr.entityName.length === 0) {
-                isComplete = false
-                // eslint-disable-next-line no-param-reassign
-                curr.entityNameError = `${curr.entity === EntityTypes.JOB ? 'Jobs' : 'Applications'} are mandatory`
-            }
-            if (curr.environment.length === 0) {
-                isComplete = false
-                // eslint-disable-next-line no-param-reassign
-                curr.environmentError = 'Environments are mandatory'
+export const validateDirectPermissionForm = (
+    directPermission: PermissionConfigurationFormContext['directPermission'],
+    setDirectPermission: PermissionConfigurationFormContext['setDirectPermission'],
+    showErrorToast: boolean = true,
+): {
+    isValid: boolean
+    accessTypeToErrorMap: AccessTypeToErrorMapType
+} => {
+    const accessTypeToErrorMap: Record<
+        PermissionConfigurationFormContext['directPermission'][number]['accessType'],
+        boolean
+    > = structuredClone(DEFAULT_ACCESS_TYPE_TO_ERROR_MAP)
+
+    const tempPermissions = directPermission.map<PermissionConfigurationFormContext['directPermission'][number]>(
+        (permission) => {
+            let isErrorInCurrentItem = false
+            const updatedPermission = structuredClone(permission)
+
+            if (updatedPermission.team) {
+                if (updatedPermission.entityName.length === 0) {
+                    isErrorInCurrentItem = true
+                    updatedPermission.entityNameError = `${updatedPermission.entity === EntityTypes.JOB ? 'Jobs' : 'Applications'} are mandatory`
+                }
+                if (updatedPermission.environment.length === 0) {
+                    isErrorInCurrentItem = true
+                    updatedPermission.environmentError = 'Environments are mandatory'
+                }
+                if (updatedPermission.entity === EntityTypes.JOB && updatedPermission.workflow?.length === 0) {
+                    isErrorInCurrentItem = true
+                    updatedPermission.workflowError = 'Workflows are mandatory'
+                }
             }
-            if (curr.entity === EntityTypes.JOB && curr.workflow?.length === 0) {
-                isComplete = false
-                // eslint-disable-next-line no-param-reassign
-                curr.workflowError = 'Workflows are mandatory'
+
+            if (isErrorInCurrentItem) {
+                accessTypeToErrorMap[updatedPermission.accessType] = isErrorInCurrentItem
             }
-        }
-        agg.push(curr)
-        return agg
-    }, [])
 
-    if (!isComplete) {
+            return updatedPermission
+        },
+        [],
+    )
+
+    const isFormValid = Object.values(accessTypeToErrorMap).every((val) => !val)
+
+    if (!isFormValid && showErrorToast) {
         ToastManager.showToast({
             variant: ToastVariantType.error,
             description: REQUIRED_FIELDS_MISSING,
@@ -400,7 +434,7 @@ export const isDirectPermissionFormComplete = (directPermission, setDirectPermis
         setDirectPermission(tempPermissions)
     }
 
-    return isComplete
+    return { isValid: isFormValid, accessTypeToErrorMap }
 }
 
 const isRoleCustom = (roleValue: string) =>
@@ -421,14 +455,20 @@ export function parseData(dataList: any[], entity: string, accessType?: string)
     }
 }
 
-export const getWorkflowOptions = (appIdWorkflowNamesMapping: AppIdWorkflowNamesMapping['appIdWorkflowNamesMapping']) =>
-    Object.entries(appIdWorkflowNamesMapping ?? {}).map(([jobName, jobWorkflows]) => ({
-        label: jobName,
-        options: jobWorkflows.map((workflow) => ({
-            label: workflow,
-            value: workflow,
-        })),
-    }))
+export const getWorkflowOptions = (
+    appIdWorkflowNamesMapping: AppIdWorkflowNamesMapping['appIdWorkflowNamesMapping'],
+): GroupBase<SelectPickerOptionType<string>>[] =>
+    Object.entries(appIdWorkflowNamesMapping ?? {})
+        .map(([jobName, jobWorkflows]) => ({
+            label: jobName,
+            options: jobWorkflows
+                .map((workflow) => ({
+                    label: workflow,
+                    value: workflow,
+                }))
+                .sort((a, b) => stringComparatorBySortOrder(a.label, b.label)),
+        }))
+        .sort((a, b) => stringComparatorBySortOrder(a.label, b.label))
 
 export const getPrimaryRoleIndex = (multiRole: string[], excludedRoles: string[]): number => {
     const primaryRoleIndex = multiRole.findIndex((role) => !excludedRoles.includes(role))
diff --git a/src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx b/src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx
index e9963c9205..ca363d41a0 100644
--- a/src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx
+++ b/src/Pages/GlobalConfigurations/BuildInfra/ProfileForm.tsx
@@ -86,7 +86,7 @@ const ProfileForm: FunctionComponent = () => {
                         profileInput={profileInput}
                         profileInputErrors={profileInputErrors}
                         handleProfileInputChange={handleProfileInputChange}
-                        isDefaultProfile
+                        isGlobalProfile
                         unitsMap={profileResponse?.configurationUnits}
                     />
                 </APIResponseHandler>
diff --git a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
index fc1fb3a6bf..2088b7f5ac 100644
--- a/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
+++ b/src/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx
@@ -238,10 +238,10 @@ export const ClusterEnvironmentDrawer = ({
                     </button>
                 </div>
                 <form
-                    className="flex-grow-1 flexbox-col"
+                    className="flex-grow-1 flexbox-col mh-0"
                     onSubmit={handleSubmit(namespaceLabels.labels ? withLabelEditValidation : onValidation())}
                 >
-                    <div className="dc__overflow-scroll p-20 flex-grow-1">
+                    <div className="dc__overflow-auto p-20 flex-grow-1">
                         <div className="mb-16">
                             <CustomInput
                                 dataTestid="environment-name"
@@ -319,7 +319,7 @@ export const ClusterEnvironmentDrawer = ({
                             </div>
                         )}
                     </div>
-                    <div className="dc__border-top flexbox dc__align-items-center dc__content-space py-16 px-20 dc__position-sticky dc__bottom-0 bcn-0">
+                    <div className="dc__border-top flexbox dc__align-items-center dc__content-space py-16 px-20 dc__bottom-0 bcn-0">
                         {id && (
                             <Button
                                 variant={ButtonVariantType.secondary}
@@ -350,6 +350,7 @@ export const ClusterEnvironmentDrawer = ({
                         </div>
                     </div>
                 </form>
+
                 {showDeleteConfirmation && (
                     <DeleteComponent
                         deleteComponent={deleteEnvironment}
diff --git a/src/Pages/Releases/Detail/Configurations/Configurations.tsx b/src/Pages/Releases/Detail/Configurations/Configurations.tsx
index bc365c6745..04355ca087 100644
--- a/src/Pages/Releases/Detail/Configurations/Configurations.tsx
+++ b/src/Pages/Releases/Detail/Configurations/Configurations.tsx
@@ -2,9 +2,11 @@ import { useMemo } from 'react'
 import { generatePath, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import {
+    ApprovalConfigDataKindType,
     DeploymentHistoryBaseParamsType,
     EnvResourceType,
     GenericEmptyState,
+    getIsApprovalPolicyConfigured,
     Progressing,
     useAsync,
 } from '@devtron-labs/devtron-fe-common-lib'
@@ -44,6 +46,7 @@ export const Configurations = () => {
         reloadEnvironments,
         isAppListLoading,
         isEnvListLoading,
+        envIdToEnvApprovalConfigurationMap,
     }: ReleaseConfigurationContextType = useReleaseConfigurationContext()
 
     // ASYNC CALLS
@@ -66,6 +69,7 @@ export const Configurations = () => {
         () => (environments ? environments.find(({ id }) => +envId === id) : null),
         [environments, envId, isEnvListLoading],
     )
+    const approvalConfigForEnv = envIdToEnvApprovalConfigurationMap?.[selectedEnv?.id]?.approvalConfigurationMap
     const showConfig = !!selectedApp && !!selectedEnv
 
     // RENDERERS
@@ -81,6 +85,7 @@ export const Configurations = () => {
                     showDeploymentTemplate
                     showComparison
                     hideEnvSelector
+                    appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                 />
             </Route>
         </Switch>
@@ -92,7 +97,9 @@ export const Configurations = () => {
                 <div key={`${appId}-${envId}-${URLS.APP_DEPLOYMENT_CONFIG}`} className="dc__overflow-auto">
                     <DeploymentTemplate
                         fetchEnvConfig={fetchEnvConfig}
-                        isProtected={selectedEnv.isProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigForEnv?.[ApprovalConfigDataKindType.deploymentTemplate],
+                        )}
                         reloadEnvironments={reloadEnvironments}
                         environmentName={selectedEnv.name}
                         clusterId={null}
@@ -108,7 +115,9 @@ export const Configurations = () => {
                         fetchEnvConfig={fetchEnvConfig}
                         onErrorRedirectURL=""
                         reloadEnvironments={reloadEnvironments}
-                        isProtected={selectedEnv.isProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigForEnv?.[ApprovalConfigDataKindType.configMap],
+                        )}
                         clusterId={null}
                     />
                 </div>
@@ -123,7 +132,9 @@ export const Configurations = () => {
                         fetchEnvConfig={fetchEnvConfig}
                         onErrorRedirectURL=""
                         reloadEnvironments={reloadEnvironments}
-                        isProtected={selectedEnv.isProtected}
+                        isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                            approvalConfigForEnv?.[ApprovalConfigDataKindType.configSecret],
+                        )}
                         clusterId={null}
                     />
                 </div>
@@ -158,6 +169,7 @@ export const Configurations = () => {
                             getNavItemHref={(resourceType, resourceName) =>
                                 `${generatePath(match.path, { ...match.params, resourceType, resourceName })}${location.search}`
                             }
+                            appOrEnvIdToResourceApprovalConfigurationMap={envIdToEnvApprovalConfigurationMap}
                         />
                     ) : (
                         <Progressing fullHeight pageLoader />
diff --git a/src/Pages/Releases/Detail/Configurations/types.ts b/src/Pages/Releases/Detail/Configurations/types.ts
index a3a4ef5183..fdc656c3b3 100644
--- a/src/Pages/Releases/Detail/Configurations/types.ts
+++ b/src/Pages/Releases/Detail/Configurations/types.ts
@@ -1,12 +1,15 @@
 import { SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib'
 
-import { EnvironmentOptionType } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
+import {
+    AppConfigState,
+    EnvironmentOptionType,
+} from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
 
 interface AppOptionType extends Omit<SelectPickerOptionType<number>, 'label'> {
     label: string
 }
 
-export interface ReleaseConfigurationContextType {
+export interface ReleaseConfigurationContextType extends Pick<AppConfigState, 'envIdToEnvApprovalConfigurationMap'> {
     environments: EnvironmentOptionType[]
     applications: AppOptionType[]
     reloadEnvironments: () => void
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecret.service.ts b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecret.service.ts
index ebd2c7db22..23422eb475 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecret.service.ts
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecret.service.ts
@@ -185,7 +185,7 @@ export const getConfigMapSecretConfigDraftData = async ({
 >) => {
     try {
         const res = await (getDraftByResourceName
-            ? getDraftByResourceName(appId, envId ?? -1, componentType, name, abortControllerRef.current.signal)
+            ? getDraftByResourceName(appId, envId ?? -1, componentType, name, abortControllerRef)
             : null)
 
         return res ? (res.result as DraftMetadataDTO) : null
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx
index f726e22657..725afc7298 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretContainer.tsx
@@ -24,13 +24,14 @@ import {
     useAsync,
     useForm,
     usePrompt,
+    checkIfPathIsMatching,
     useUrlFilters,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { URLS } from '@Config/routes'
 import { ConfigHeader, ConfigToolbar, ConfigToolbarProps, NoOverrideEmptyState } from '@Pages/Applications'
 import { getConfigToolbarPopupConfig } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/utils'
-import { checkIfPathIsMatching, FloatingVariablesSuggestions, importComponentFromFELibrary } from '@Components/common'
+import { FloatingVariablesSuggestions, importComponentFromFELibrary } from '@Components/common'
 import { EnvConfigObjectKey } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
 
 import {
@@ -86,7 +87,7 @@ export const ConfigMapSecretContainer = ({
     isJob = false,
     clusterId,
     envConfig,
-    isProtected,
+    isApprovalPolicyConfigured,
     fetchEnvConfig,
     onErrorRedirectURL,
     envName,
@@ -224,7 +225,7 @@ export const ConfigMapSecretContainer = ({
                               })
                             : null,
                         // Fetch Draft Configuration
-                        isProtected
+                        isApprovalPolicyConfigured
                             ? getConfigMapSecretConfigDraftData({
                                   appId: +appId,
                                   envId: envId ? +envId : -1,
@@ -539,7 +540,7 @@ export const ConfigMapSecretContainer = ({
 
     const toggleDraftComments = () => setShowComments(!showComments)
 
-    const handleDelete = () => setOpenDeleteModal(isProtected ? 'protectedDeleteModal' : 'deleteModal')
+    const handleDelete = () => setOpenDeleteModal(isApprovalPolicyConfigured ? 'protectedDeleteModal' : 'deleteModal')
 
     const handleDeleteOverride = () => {
         handleDelete()
@@ -684,7 +685,7 @@ export const ConfigMapSecretContainer = ({
     const onSubmit: ConfigMapSecretFormProps['onSubmit'] = async (data) => {
         const payloadData = getConfigMapSecretPayload(data)
 
-        if (isProtected) {
+        if (isApprovalPolicyConfigured) {
             setDraftPayload({
                 id: id ?? 0,
                 appId: +appId,
@@ -759,7 +760,7 @@ export const ConfigMapSecretContainer = ({
         menuConfig: getConfigToolbarPopupConfig({
             configHeaderTab,
             isOverridden: cmSecretStateLabel === CM_SECRET_STATE.OVERRIDDEN,
-            isProtected,
+            isApprovalPolicyConfigured,
             isPublishedValuesView: selectedProtectionViewTab === ProtectConfigTabsType.PUBLISHED,
             isPublishedConfigPresent: !!configMapSecretData,
             unableToParseData: !!parsingError,
@@ -793,7 +794,7 @@ export const ConfigMapSecretContainer = ({
 
     // RENDERERS
     const renderForm = ({ onCancel }: Pick<ConfigMapSecretFormProps, 'onCancel'>) =>
-        isProtected && draftData ? (
+        isApprovalPolicyConfigured && draftData ? (
             <ConfigMapSecretProtected
                 cmSecretStateLabel={cmSecretStateLabel}
                 componentName={componentName}
@@ -822,7 +823,7 @@ export const ConfigMapSecretContainer = ({
                 configMapSecretData={configMapSecretData}
                 inheritedConfigMapSecretData={inheritedConfigMapSecretData}
                 isJob={isJob}
-                isProtected={isProtected}
+                isApprovalPolicyConfigured={isApprovalPolicyConfigured}
                 isSubmitting={isSubmitting}
                 disableDataTypeChange={isDeleteDisabled}
                 onSubmit={onSubmit}
@@ -872,7 +873,7 @@ export const ConfigMapSecretContainer = ({
                         componentType={componentType}
                         componentName={componentName}
                         cmSecretStateLabel={cmSecretStateLabel}
-                        isProtected={isProtected}
+                        isApprovalPolicyConfigured={isApprovalPolicyConfigured}
                         publishedConfigMapSecretData={resolvedConfigMapSecretData ?? configMapSecretData}
                         draftData={resolvedDraftData ?? draftData}
                         inheritedConfigMapSecretData={
@@ -957,12 +958,12 @@ export const ConfigMapSecretContainer = ({
                                 : formData.mergeStrategy
                         }
                         handleMergeStrategyChange={handleMergeStrategyChange}
+                        userApprovalMetadata={draftData?.userApprovalMetadata}
+                        isApprovalPolicyConfigured={isApprovalPolicyConfigured}
                         hidePatchOption={isJob || formData.external}
                         isMergeStrategySelectorDisabled={resolveScopedVariables}
-                        approvalUsers={draftData?.approvers}
                         areCommentsPresent={areCommentsPresent}
                         disableAllActions={isLoading || isSubmitting || !!parsingError}
-                        isProtected={isProtected}
                         isDraftPresent={!!draftData}
                         isPublishedConfigPresent={cmSecretStateLabel !== CM_SECRET_STATE.UNPUBLISHED}
                         isApprovalPending={draftData?.draftState === DraftState.AwaitApproval}
@@ -989,6 +990,10 @@ export const ConfigMapSecretContainer = ({
                         shouldMergeTemplateWithPatches={shouldMergeTemplateWithPatches}
                         parsingError={parsingError}
                         restoreLastSavedYAML={restoreLastSavedYAML}
+                        draftId={draftData?.draftId}
+                        draftVersionId={draftData?.draftVersionId}
+                        handleReload={updateCMSecret}
+                        requestedUserId={draftData?.requestedUserId}
                     />
                 )}
                 {renderConfigHeaderTabContent()}
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
index b8ae609026..29962a96ce 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretDryRun.tsx
@@ -15,12 +15,13 @@ import {
     hasHashiOrAWS,
     MODES,
     useAsync,
+    checkIfPathIsMatching,
     usePrompt,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICFilePlay } from '@Icons/ic-file-play.svg'
 import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
-import { checkIfPathIsMatching, importComponentFromFELibrary } from '@Components/common'
+import { importComponentFromFELibrary } from '@Components/common'
 import { NoPublishedVersionEmptyState, SelectMergeStrategy, ToggleResolveScopedVariables } from '@Pages/Applications'
 
 import { getConfigMapSecretManifest } from './ConfigMapSecret.service'
@@ -43,7 +44,7 @@ export const ConfigMapSecretDryRun = ({
     resolveScopedVariables,
     areScopeVariablesResolving,
     handleToggleScopedVariablesView,
-    isProtected,
+    isApprovalPolicyConfigured,
     draftData,
     inheritedConfigMapSecretData,
     publishedConfigMapSecretData,
@@ -80,7 +81,7 @@ export const ConfigMapSecretDryRun = ({
                 publishedConfigMapSecretData,
             }),
         [
-            isProtected,
+            isApprovalPolicyConfigured,
             dryRunEditorMode,
             formData,
             draftData,
@@ -235,13 +236,7 @@ export const ConfigMapSecretDryRun = ({
                 }}
             >
                 <div className="flex-grow-1 dc__overflow-scroll">
-                    <CodeEditor
-                        value={configMapSecretManifest?.manifest}
-                        height="100%"
-                        mode={MODES.YAML}
-                        readOnly
-                        noParsing
-                    />
+                    <CodeEditor value={configMapSecretManifest?.manifest} height="100%" mode={MODES.YAML} readOnly />
                 </div>
             </APIResponseHandler>
         </div>
@@ -264,10 +259,10 @@ export const ConfigMapSecretDryRun = ({
                 parentName={parentName}
             />
         ) : (
-            <footer className="py-12 px-16 dc__border-top-n1">
+            <footer className="flex right py-12 px-16 dc__border-top-n1">
                 <Button
                     dataTestId="cm-secret-form-submit-btn"
-                    text={`Save${!isCreateView ? ' Changes' : ''}${isProtected ? '...' : ''}`}
+                    text={`Save${!isCreateView ? ' Changes' : ''}${isApprovalPolicyConfigured ? '...' : ''}`}
                     size={ComponentSizeType.medium}
                     onClick={handleSubmit}
                     isLoading={isSubmitting}
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
index a8fec39c64..b455fc2c8d 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretForm.tsx
@@ -18,11 +18,11 @@ import {
     SelectPicker,
     stopPropagation,
     usePrompt,
+    checkIfPathIsMatching,
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ROLLOUT_DEPLOYMENT } from '@Config/constants'
 import {
-    checkIfPathIsMatching,
     importComponentFromFELibrary,
     isChartRef3090OrBelow,
     isVersionLessThanOrEqualToTarget,
@@ -61,7 +61,7 @@ export const ConfigMapSecretForm = ({
     disableDataTypeChange,
     componentType,
     isSubmitting,
-    isProtected,
+    isApprovalPolicyConfigured,
     areScopeVariablesResolving,
     useFormProps,
     onSubmit,
@@ -324,10 +324,10 @@ export const ConfigMapSecretForm = ({
         )
 
     const renderFormButtons = () => (
-        <footer className="py-12 px-16 flex left dc__gap-12 dc__border-top-n1">
+        <footer className="py-12 px-16 flex right dc__gap-12 dc__border-top-n1">
             <Button
                 dataTestId="cm-secret-form-submit-btn"
-                text={`Save${!isCreateView ? ' Changes' : ''}${isProtected ? '...' : ''}`}
+                text={`Save${!isCreateView ? ' Changes' : ''}${isApprovalPolicyConfigured ? '...' : ''}`}
                 size={ComponentSizeType.medium}
                 onClick={handleSubmit(onSubmit, onError)}
                 isLoading={isSubmitting}
diff --git a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretProtected.tsx b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretProtected.tsx
index 5a5d7df691..2ccf114113 100644
--- a/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretProtected.tsx
+++ b/src/Pages/Shared/ConfigMapSecret/ConfigMapSecretProtected.tsx
@@ -44,6 +44,7 @@ export const ConfigMapSecretProtected = ({
     shouldMergeTemplateWithPatches,
     useFormProps,
 }: ConfigMapSecretProtectedProps) => {
+    // HOOKS
     const { data: formData } = useFormProps
 
     // STATES
@@ -216,7 +217,7 @@ export const ConfigMapSecretProtected = ({
             }
             isJob={isJob}
             appChartRef={appChartRef}
-            isProtected
+            isApprovalPolicyConfigured
             isDraft
             disableDataTypeChange={disableDataTypeChange}
             isSubmitting={false}
diff --git a/src/Pages/Shared/ConfigMapSecret/types.ts b/src/Pages/Shared/ConfigMapSecret/types.ts
index c7cdfc20ea..5658791c75 100644
--- a/src/Pages/Shared/ConfigMapSecret/types.ts
+++ b/src/Pages/Shared/ConfigMapSecret/types.ts
@@ -131,7 +131,7 @@ export interface CMSecretWrapperProps
     parentState?: ComponentStates
     setParentState?: Dispatch<SetStateAction<ComponentStates>>
     clusterId?: string
-    isProtected?: boolean
+    isApprovalPolicyConfigured?: boolean
     envName: string
     appName: string
 }
@@ -145,7 +145,9 @@ export interface CMSecretConfigData extends ConfigDatum {
 }
 
 export interface ConfigMapSecretFormProps
-    extends Required<Pick<ConfigMapSecretContainerProps, 'isJob' | 'isProtected' | 'componentType' | 'appChartRef'>> {
+    extends Required<
+        Pick<ConfigMapSecretContainerProps, 'isJob' | 'isApprovalPolicyConfigured' | 'componentType' | 'appChartRef'>
+    > {
     id: number
     configMapSecretData: CMSecretConfigData
     inheritedConfigMapSecretData: CMSecretConfigData
@@ -235,7 +237,7 @@ export type ConfigMapSecretDryRunProps = Pick<
     ConfigMapSecretFormProps,
     | 'cmSecretStateLabel'
     | 'componentType'
-    | 'isProtected'
+    | 'isApprovalPolicyConfigured'
     | 'isSubmitting'
     | 'onSubmit'
     | 'isJob'
diff --git a/src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx b/src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx
index 91de7926f7..cde17139e8 100644
--- a/src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx
+++ b/src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx
@@ -16,7 +16,7 @@
 
 import { useState, useEffect } from 'react'
 
-import { Reload } from '@devtron-labs/devtron-fe-common-lib'
+import { ApprovalConfigDataKindType, getIsApprovalPolicyConfigured, Reload } from '@devtron-labs/devtron-fe-common-lib'
 import {
     useParams,
     useRouteMatch,
@@ -47,7 +47,9 @@ const EnvironmentOverride = ({
     onErrorRedirectURL,
     envConfig,
     fetchEnvConfig,
+    appOrEnvIdToResourceApprovalConfigurationMap,
 }: EnvironmentOverrideComponentProps) => {
+    const isAppGroupView = !!envName
     const params = useParams<{ appId: string; envId: string }>()
     const [viewState, setViewState] = useState<ComponentStates>(null)
     const { path, url } = useRouteMatch()
@@ -56,8 +58,9 @@ const EnvironmentOverride = ({
     const { environmentId, setEnvironmentId } = useAppContext()
     const environmentsMap = mapByKey(environments || [], 'environmentId')
     const appMap = mapByKey(appList || [], 'id')
-    const isProtected =
-        environmentsMap.get(+params.envId)?.isProtected ?? appMap.get(+params.appId)?.isProtected ?? false
+    const approvalConfigMap =
+        appOrEnvIdToResourceApprovalConfigurationMap?.[+(isAppGroupView ? params.appId : params.envId)]
+            ?.approvalConfigurationMap
     const isDeploymentOverride = !!location.pathname.includes(URLS.APP_DEPLOYMENT_CONFIG)
 
     useEffect(() => {
@@ -146,7 +149,9 @@ const EnvironmentOverride = ({
                         <DeploymentTemplate
                             key={`deployment-${params.appId}-${params.envId}`}
                             environmentName={getEnvName()}
-                            isProtected={isProtected}
+                            isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                                approvalConfigMap?.[ApprovalConfigDataKindType.deploymentTemplate],
+                            )}
                             reloadEnvironments={reloadEnvironments}
                             clusterId={clusterId}
                             fetchEnvConfig={fetchEnvConfig}
@@ -155,7 +160,9 @@ const EnvironmentOverride = ({
                     <Route path={`${path}/${URLS.APP_CM_CONFIG}/:name?`}>
                         <ConfigMapSecretWrapper
                             key={`configmap-${params.appId}-${params.envId}`}
-                            isProtected={isProtected}
+                            isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                                approvalConfigMap?.[ApprovalConfigDataKindType.configMap],
+                            )}
                             parentState={viewState}
                             parentName={getParentName()}
                             setParentState={setViewState}
@@ -172,7 +179,9 @@ const EnvironmentOverride = ({
                     <Route path={`${path}/${URLS.APP_CS_CONFIG}/:name?`}>
                         <ConfigMapSecretWrapper
                             key={`secret-${params.appId}-${params.envId}`}
-                            isProtected={isProtected}
+                            isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
+                                approvalConfigMap?.[ApprovalConfigDataKindType.configSecret],
+                            )}
                             parentState={viewState}
                             parentName={getParentName()}
                             setParentState={setViewState}
diff --git a/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts b/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts
index 83d1d18d42..3a36f910e5 100644
--- a/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts
+++ b/src/Pages/Shared/EnvironmentOverride/EnvironmentOverrides.types.ts
@@ -15,8 +15,10 @@
  */
 
 import React from 'react'
-import { AppEnvironment } from '@devtron-labs/devtron-fe-common-lib'
-import { EnvConfigurationState } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
+import {
+    AppConfigState,
+    EnvConfigurationState,
+} from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
 import { DOCUMENTATION, URLS } from '../../../config'
 import { ConfigAppList } from '../../../components/ApplicationGroup/AppGroup.types'
 
@@ -50,7 +52,7 @@ export const SECTION_HEADING_INFO: Record<string, SectionHeadingType> = {
 
 export interface EnvironmentOverrideComponentProps {
     appList?: ConfigAppList[]
-    environments: AppEnvironment[]
+    environments: AppConfigState['environmentList']
     reloadEnvironments: () => void
     envName?: string
     appName?: string
@@ -58,6 +60,7 @@ export interface EnvironmentOverrideComponentProps {
     onErrorRedirectURL: string
     envConfig: EnvConfigurationState
     fetchEnvConfig: (envId: number) => void
+    appOrEnvIdToResourceApprovalConfigurationMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
 }
 
 export interface CommonEnvironmentOverridesProps {
diff --git a/src/assets/icons/ic-check-circle-dots.svg b/src/assets/icons/ic-check-circle-dots.svg
new file mode 100644
index 0000000000..bfd7d75143
--- /dev/null
+++ b/src/assets/icons/ic-check-circle-dots.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <circle cx="7.99998" cy="7.99967" r="6.66667" stroke="#664BEE" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="2 4"/>
+  <path d="M10.6667 6L7.11115 9.5554L5.33337 7.77778" stroke="#664BEE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/icons/ic-info-outline-grey.svg b/src/assets/icons/ic-info-outline-grey.svg
index c0f30b3207..439f2ef64a 100644
--- a/src/assets/icons/ic-info-outline-grey.svg
+++ b/src/assets/icons/ic-info-outline-grey.svg
@@ -14,7 +14,8 @@
   - limitations under the License.
   -->
 
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="7.9987" cy="7.99992" r="6.66667" stroke="#596168" stroke-width="1.5"/>
-<path d="M7.99496 5.38035C7.80688 5.38035 7.64568 5.31318 7.51133 5.17884C7.37699 5.0445 7.30982 4.87993 7.30982 4.68514C7.30982 4.49034 7.37699 4.32914 7.51133 4.20151C7.64568 4.06717 7.80688 4 7.99496 4C8.18976 4 8.35432 4.06717 8.48867 4.20151C8.62301 4.32914 8.69018 4.49034 8.69018 4.68514C8.69018 4.87993 8.62301 5.0445 8.48867 5.17884C8.35432 5.31318 8.18976 5.38035 7.99496 5.38035ZM8.57934 10.2267H10V11.2443H6V10.2267H7.42066V7.11335H6V6.09572H8.57934V10.2267Z" fill="#596168"/>
-</svg>
+<!-- NOTE: This is the ultimate version of this icon; don't change please! -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 16v-6H9.5m2.5 6H9.5m2.5 0h2.5M12 6.5V7m0 15C6.48 22 2 17.52 2 12S6.48 2 12 2s10 4.48 10 10-4.48 10-10 10Z" vector-effect="non-scaling-stroke"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ic-play-media.svg b/src/assets/icons/ic-play-media.svg
deleted file mode 100644
index 1bb7649b9c..0000000000
--- a/src/assets/icons/ic-play-media.svg
+++ /dev/null
@@ -1,19 +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 width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.8241 9.46679L6.57591 2.59268C6.48117 2.53478 6.37272 2.50317 6.2617 2.50109C6.15069 2.49901 6.04112 2.52654 5.94428 2.58085C5.84744 2.63516 5.76681 2.71429 5.7107 2.8101C5.65458 2.90591 5.625 3.01494 5.625 3.12598V16.8742C5.625 16.9852 5.65458 17.0943 5.7107 17.1901C5.76681 17.2859 5.84744 17.365 5.94428 17.4193C6.04112 17.4736 6.15069 17.5012 6.2617 17.4991C6.37272 17.497 6.48117 17.4654 6.57591 17.4075L17.8241 10.5334C17.9154 10.4776 17.9909 10.3992 18.0433 10.3058C18.0957 10.2124 18.1232 10.1072 18.1232 10.0001C18.1232 9.89302 18.0957 9.78775 18.0433 9.69437C17.9909 9.60099 17.9154 9.52262 17.8241 9.46679Z" stroke="#0066CC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
diff --git a/src/assets/icons/ic-play-outline.svg b/src/assets/icons/ic-play-outline.svg
new file mode 100644
index 0000000000..fc92127602
--- /dev/null
+++ b/src/assets/icons/ic-play-outline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#3B444C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.639 11.36 7.14 3.111a.75.75 0 0 0-1.14.64v16.498a.75.75 0 0 0 1.141.64l13.498-8.25a.751.751 0 0 0 0-1.279Z" vector-effect="non-scaling-stroke"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ic-shield-protect-fill.svg b/src/assets/icons/ic-shield-protect-fill.svg
deleted file mode 100644
index 134a8e90b4..0000000000
--- a/src/assets/icons/ic-shield-protect-fill.svg
+++ /dev/null
@@ -1,19 +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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 10.1636V6.42941C4 6.00411 4.26708 5.62652 4.66305 5.49203L12 3L19.3369 5.49203C19.7329 5.62652 20 6.00411 20 6.42941V10.1636C20 17.9462 13.5176 20.5247 12.2233 20.9619C12.0786 21.0127 11.9214 21.0127 11.7767 20.9619C10.4824 20.5247 4 17.9462 4 10.1636ZM10.1251 11C10.1251 9.96448 10.9645 9.12502 12.0001 9.12502C13.0356 9.12502 13.8751 9.96448 13.8751 11C13.8751 12.0355 13.0356 12.875 12.0001 12.875C10.9645 12.875 10.1251 12.0355 10.1251 11ZM12.0001 6.87502C9.72189 6.87502 7.87506 8.72184 7.87506 11C7.87506 12.8882 9.14368 14.48 10.8751 14.9697V16C10.8751 16.6213 11.3787 17.125 12.0001 17.125C12.6214 17.125 13.1251 16.6213 13.1251 16V14.9697C14.8564 14.48 16.1251 12.8882 16.1251 11C16.1251 8.72184 14.2782 6.87502 12.0001 6.87502Z" fill="#596168"/>
-</svg>
diff --git a/src/assets/icons/misc/arrow-solid-right.svg b/src/assets/icons/misc/arrow-solid-right.svg
deleted file mode 100644
index 597f94f7bd..0000000000
--- a/src/assets/icons/misc/arrow-solid-right.svg
+++ /dev/null
@@ -1,21 +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 fill="#FFF" d="M6.2 5.69v12.62a1.2 1.2 0 0 0 1.805 1.037l10.818-6.31a1.2 1.2 0 0 0 0-2.074L8.005 4.653A1.2 1.2 0 0 0 6.2 5.689z"/>
-    </g>
-</svg>
diff --git a/src/components/ApplicationGroup/AppGroup.types.ts b/src/components/ApplicationGroup/AppGroup.types.ts
index 49cc2d94d1..994b549623 100644
--- a/src/components/ApplicationGroup/AppGroup.types.ts
+++ b/src/components/ApplicationGroup/AppGroup.types.ts
@@ -21,13 +21,13 @@ import {
     FilterConditionsListType,
     MODAL_TYPE,
     ResponseType,
-    UserApprovalConfigType,
     WorkflowNodeType,
     WorkflowType,
     AppInfoListType,
     GVKType,
     UseUrlFiltersReturnType,
     CommonNodeAttr,
+    ApprovalConfigDataType,
     RuntimePluginVariables,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CDMaterialProps, RuntimeParamsErrorState } from '../app/details/triggerView/types'
@@ -35,7 +35,7 @@ import { EditDescRequest, NodeType, Nodes, OptionType } from '../app/types'
 import { MultiValue } from 'react-select'
 import { AppFilterTabs, BulkResponseStatus } from './Constants'
 import { WorkloadCheckType } from '../v2/appDetails/sourceInfo/scaleWorkloads/scaleWorkloadsModal.type'
-import { EnvConfigurationState } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
+import { AppConfigState, EnvConfigurationState } from '@Pages/Applications/DevtronApps/Details/AppConfigurations/AppConfig.types'
 import { WebhookPayloadType } from '@Components/app/details/triggerView/types'
 import { TIME_STAMP_ORDER } from '@Components/app/details/triggerView/Constants'
 
@@ -82,8 +82,7 @@ export interface BulkCDDetailType
     parentPipelineId?: string
     parentPipelineType?: WorkflowNodeType
     parentEnvironmentName?: string
-    approvalUsers?: string[]
-    userApprovalConfig?: UserApprovalConfigType
+    approvalConfigData?: ApprovalConfigDataType
     requestedUserId?: number
     appReleaseTags?: string[]
     tagsEditable?: boolean
@@ -206,7 +205,6 @@ export interface WorkflowAppSelectionType {
 export interface ConfigAppList {
     id: number
     name: string
-    isProtected?: boolean
 }
 
 export interface EnvApp {
@@ -256,6 +254,7 @@ export interface ApplicationRouteType {
     envAppList: ConfigAppList[]
     envConfig: EnvConfigurationState
     fetchEnvConfig: () => void
+    appIdToAppApprovalConfigMap: AppConfigState['envIdToEnvApprovalConfigurationMap']
 }
 
 export interface AppGroupFilterConfig
diff --git a/src/components/ApplicationGroup/AppGroup.utils.ts b/src/components/ApplicationGroup/AppGroup.utils.ts
index c77c888344..96d8c6b841 100644
--- a/src/components/ApplicationGroup/AppGroup.utils.ts
+++ b/src/components/ApplicationGroup/AppGroup.utils.ts
@@ -24,8 +24,10 @@ import {
     getIsRequestAborted,
     CIMaterialType,
     SourceTypeMap,
+    DEPLOYMENT_STATUS,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { DEFAULT_GIT_BRANCH_VALUE, DOCKER_FILE_ERROR_TITLE, SOURCE_NOT_CONFIGURED } from '../../config'
+import { getParsedBranchValuesForPlugin } from '@Components/common'
+import { DEFAULT_GIT_BRANCH_VALUE, DOCKER_FILE_ERROR_TITLE, SOURCE_NOT_CONFIGURED, URLS } from '../../config'
 import { getEnvAppList } from './AppGroup.service'
 import {
     AppGroupUrlFilters,
@@ -33,7 +35,6 @@ import {
     CIWorkflowStatusType,
     ProcessWorkFlowStatusType,
 } from './AppGroup.types'
-import { getParsedBranchValuesForPlugin } from '@Components/common'
 
 let timeoutId
 
@@ -295,3 +296,23 @@ export const processConsequenceData = (data: BlockedStateData): ConsequenceType
 export const parseSearchParams = (searchParams: URLSearchParams) => ({
     [AppGroupUrlFilters.cluster]: searchParams.getAll(AppGroupUrlFilters.cluster),
 })
+
+export const getAppGroupDeploymentHistoryLink = (
+    appId: number,
+    envId: string,
+    pipelineId: string,
+    redirectToAppGroup: boolean = true,
+    status: string = '',
+    type?: string | null,
+) => {
+    if (status?.toLowerCase() === DEPLOYMENT_STATUS.PROGRESSING) {
+        //If deployment is in progress then it will redirect to app details page
+        return `${URLS.APP}/${appId}/${URLS.APP_DETAILS}/${envId}`
+    }
+    if (redirectToAppGroup) {
+        // It will redirect to application group deployment history in case of same environment
+        return `${URLS.APPLICATION_GROUP}/${envId}/${URLS.APP_CD_DETAILS}/${appId}/${pipelineId}${type ?`?type=${type}` : ''}`
+        // It will redirect to application deployment history in case of other environments
+    }
+    return `${URLS.APP}/${appId}/${URLS.APP_CD_DETAILS}/${envId}/${pipelineId}${type ?`?type=${type}` : ''}`
+}
diff --git a/src/components/ApplicationGroup/Constants.ts b/src/components/ApplicationGroup/Constants.ts
index 2e83c10b16..fd3e96ce62 100644
--- a/src/components/ApplicationGroup/Constants.ts
+++ b/src/components/ApplicationGroup/Constants.ts
@@ -232,4 +232,4 @@ export const BULK_CI_BUILD_STATUS = (noOfApps) => ({
 })
 
 export const ENV_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'envGroup__filter'
-export const APP_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'appGroup__filter'
\ No newline at end of file
+export const APP_GROUP_LOCAL_STORAGE_KEY: AppEnvLocalStorageKeyType = 'appGroup__filter'
diff --git a/src/components/ApplicationGroup/CreateAppGroup.tsx b/src/components/ApplicationGroup/CreateAppGroup.tsx
index f2a7dc4fe8..5dd2275019 100644
--- a/src/components/ApplicationGroup/CreateAppGroup.tsx
+++ b/src/components/ApplicationGroup/CreateAppGroup.tsx
@@ -189,7 +189,7 @@ export default function CreateAppGroup({
             <GenericEmptyState
                 title={title}
                 image={Info}
-                imageClassName="h-20"
+                imageClassName="h-20 scn-6"
                 styles={{ height: 'calc(100vh - 420px)' }}
             />
         )
diff --git a/src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx b/src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx
index f7a055a55a..f12c09372d 100644
--- a/src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx
+++ b/src/components/ApplicationGroup/Details/EnvCDDetails/EnvCDDetails.tsx
@@ -33,6 +33,8 @@ import {
     getTriggerHistory,
     useScrollable,
     TRIGGER_STATUS_PROGRESSING,
+    STAGE_TYPE,
+    DeploymentStageType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useRouteMatch, useParams, generatePath, Route } from 'react-router-dom'
 import { useAppContext } from '../../../common'
@@ -40,7 +42,6 @@ import { ModuleNameMap } from '../../../../config'
 import { getModuleConfigured } from '../../../app/details/appDetails/appDetails.service'
 import { getAppsCDConfigMin } from '../../AppGroup.service'
 import { EmptyView } from '../../../app/details/cicdHistory/History.components'
-import { DeploymentTemplateList } from '../../../app/details/cdDetails/cd.type'
 import { AppNotConfigured } from '../../../app/details/appDetails/AppDetails'
 import { AppGroupDetailDefaultType } from '../../AppGroup.types'
 import { APP_GROUP_CD_DETAILS } from '../../../../config/constantMessaging'
@@ -115,23 +116,44 @@ export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultTy
     }, [result?.[0]?.['value']?.result])
 
     useEffect(() => {
-        // check for more
-        if (loading || !deploymentHistoryResult) {
+        if (
+            loading ||
+            !deploymentHistoryResult ||
+            !deploymentHistoryResult.result?.cdWorkflows?.length ||
+            fetchTriggerIdData === FetchIdDataStatus.FETCHING ||
+            fetchTriggerIdData === FetchIdDataStatus.SUCCESS
+        ) {
             return
         }
-        if (!deploymentHistoryResult?.result?.cdWorkflows?.length) {
-            return
-        }
-        if (fetchTriggerIdData === FetchIdDataStatus.FETCHING || fetchTriggerIdData === FetchIdDataStatus.SUCCESS) {
-            return
+
+        const cdWorkflows = deploymentHistoryResult.result.cdWorkflows
+
+        setHasMore(cdWorkflows.length === pagination.size)
+        setHasMoreLoading(cdWorkflows.length === pagination.size)
+
+        let triggerIdToSet = cdWorkflows[0].id
+        const queryString = new URLSearchParams(location.search)
+        const deploymentStageType =
+            queryString.get('type') === STAGE_TYPE.PRECD ? DeploymentStageType.PRE : DeploymentStageType.POST
+
+        const triggeredHistoryResult = cdWorkflows.find((obj) => obj.stage === deploymentStageType)
+
+        if (triggeredHistoryResult) {
+            triggerIdToSet = triggeredHistoryResult.id
         }
-        if (deploymentHistoryResult.result?.cdWorkflows?.length !== pagination.size) {
-            setHasMore(false)
-        } else {
-            setHasMore(true)
-            setHasMoreLoading(true)
+
+        if (!triggerId && appId && pipelineId) {
+            replace(
+                generatePath(path, {
+                    appId,
+                    envId,
+                    pipelineId,
+                    triggerId: triggerIdToSet,
+                }),
+            )
         }
-        const newTriggerHistory = (deploymentHistoryResult.result?.cdWorkflows || []).reduce((agg, curr) => {
+
+        const newTriggerHistory = cdWorkflows.reduce((agg, curr) => {
             agg.set(curr.id, curr)
             return agg
         }, triggerHistory)
@@ -209,17 +231,6 @@ export default function EnvCDDetails({ filteredAppIds }: AppGroupDetailDefaultTy
         return null
     }
 
-    if (!triggerId && appId && pipelineId && deploymentHistoryResult?.result?.cdWorkflows?.length) {
-        replace(
-            generatePath(path, {
-                appId,
-                envId,
-                pipelineId,
-                triggerId: deploymentHistoryResult.result.cdWorkflows?.[0].id,
-            }),
-        )
-    }
-
     const envOptions: CICDSidebarFilterOptionType[] = pipelineList.map((item) => {
         return {
             value: `${item.appId}`,
diff --git a/src/components/ApplicationGroup/Details/EnvironmentConfig/ApplicationRoutes.tsx b/src/components/ApplicationGroup/Details/EnvironmentConfig/ApplicationRoutes.tsx
index d74d119ef3..407d7fee3b 100644
--- a/src/components/ApplicationGroup/Details/EnvironmentConfig/ApplicationRoutes.tsx
+++ b/src/components/ApplicationGroup/Details/EnvironmentConfig/ApplicationRoutes.tsx
@@ -24,7 +24,12 @@ import { renderNavItem } from '@Pages/Applications/DevtronApps/Details/AppConfig
 
 import { ApplicationRouteType } from '../../AppGroup.types'
 
-const ApplicationRoute = ({ envAppList, envConfig, fetchEnvConfig }: ApplicationRouteType) => {
+const ApplicationRoute = ({
+    envAppList,
+    envConfig,
+    fetchEnvConfig,
+    appIdToAppApprovalConfigMap,
+}: ApplicationRouteType) => {
     const {
         url,
         params: { envId },
@@ -37,12 +42,13 @@ const ApplicationRoute = ({ envAppList, envConfig, fetchEnvConfig }: Application
                 <EnvConfigurationsNav
                     envConfig={envConfig}
                     fetchEnvConfig={fetchEnvConfig}
-                    environments={envAppList.map((env) => ({ ...env, isProtected: env.isProtected || false }))}
+                    environments={envAppList}
                     goBackURL={generatePath(path, { envId })}
                     showDeploymentTemplate
                     paramToCheck="appId"
                     compareWithURL={path}
                     showComparison
+                    appOrEnvIdToResourceApprovalConfigurationMap={appIdToAppApprovalConfigMap}
                 />
             </Route>
             <Route key="default-navigation">
@@ -55,16 +61,13 @@ const ApplicationRoute = ({ envAppList, envConfig, fetchEnvConfig }: Application
                     </h4>
                 </div>
                 <div className="px-8 dc__overflow-auto">
-                    {envAppList.map(({ name, isProtected, id }) => (
+                    {envAppList.map(({ name, id }) => (
                         <Fragment key={id}>
-                            {renderNavItem(
-                                {
-                                    title: name,
-                                    isProtectionAllowed: isProtected,
-                                    href: `${url}/${id}/${EnvResourceType.DeploymentTemplate}`,
-                                },
-                                isProtected,
-                            )}
+                            {renderNavItem({
+                                title: name,
+                                isProtectionAllowed: appIdToAppApprovalConfigMap?.[id]?.isApprovalApplicable,
+                                href: `${url}/${id}/${EnvResourceType.DeploymentTemplate}`,
+                            })}
                         </Fragment>
                     ))}
                 </div>
diff --git a/src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx b/src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx
index 659016333d..ce25277878 100644
--- a/src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx
+++ b/src/components/ApplicationGroup/Details/EnvironmentConfig/EnvConfig.tsx
@@ -17,7 +17,15 @@
 import { useEffect, useMemo } from 'react'
 import { generatePath, Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 
-import { EnvResourceType, GenericEmptyState, Progressing, noop, useAsync } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    BASE_CONFIGURATION_ENV_ID,
+    EnvResourceType,
+    GenericEmptyState,
+    Progressing,
+    ResourceIdToResourceApprovalPolicyConfigMapType,
+    noop,
+    useAsync,
+} from '@devtron-labs/devtron-fe-common-lib'
 
 import { URLS } from '@Config/routes'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -30,7 +38,8 @@ import { getConfigAppList } from '../../AppGroup.service'
 import { AppGroupDetailDefaultType, ConfigAppList } from '../../AppGroup.types'
 import ApplicationRoute from './ApplicationRoutes'
 
-const getEnvConfigProtections = importComponentFromFELibrary('getEnvConfigProtections', null, 'function')
+const getApprovalPolicyConfigForEnv: (envId: number) => Promise<ResourceIdToResourceApprovalPolicyConfigMapType> =
+    importComponentFromFELibrary('getApprovalPolicyConfigForEnv', null, 'function')
 
 const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
     // HOOKS
@@ -44,9 +53,9 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
         () =>
             Promise.allSettled([
                 getConfigAppList(+envId, filteredAppIds),
-                typeof getEnvConfigProtections === 'function'
-                    ? getEnvConfigProtections(Number(envId))
-                    : { result: null },
+                typeof getApprovalPolicyConfigForEnv === 'function'
+                    ? getApprovalPolicyConfigForEnv(Number(envId))
+                    : null,
             ]),
         [filteredAppIds],
     )
@@ -61,23 +70,32 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
     }
 
     // CONSTANTS
-    const envAppList = useMemo<ConfigAppList[]>(() => {
+    const { envAppList, appIdToAppApprovalConfigMap } = useMemo<{
+        envAppList: ConfigAppList[]
+        appIdToAppApprovalConfigMap: ResourceIdToResourceApprovalPolicyConfigMapType
+    }>(() => {
         if (
             initDataResults?.[0].status === 'fulfilled' &&
             initDataResults?.[1].status === 'fulfilled' &&
             initDataResults[0].value?.result?.length
         ) {
-            const configProtectionMap = initDataResults[1].value?.result ?? {}
-            const _appList = initDataResults[0].value.result.map((appData) => ({
-                ...appData,
-                isProtected: configProtectionMap[appData.id] ?? false,
-            }))
+            const _appIdToAppApprovalConfigMap = initDataResults[1].value
+            const _appList = initDataResults[0].value.result
 
             _appList.sort((a, b) => a.name.localeCompare(b.name))
-            return _appList
+
+            return {
+                envAppList: _appList,
+                appIdToAppApprovalConfigMap: _appIdToAppApprovalConfigMap,
+            }
         }
 
-        return []
+        return {
+            envAppList: [],
+            appIdToAppApprovalConfigMap: {
+                [BASE_CONFIGURATION_ENV_ID]: null,
+            },
+        }
     }, [initDataResults])
 
     const isAppNotPresentInEnv = useMemo(
@@ -124,6 +142,7 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
                             getNavItemHref={(resourceType, resourceName) =>
                                 `${generatePath(match.path, { ...match.params, resourceType, resourceName })}${location.search}`
                             }
+                            appOrEnvIdToResourceApprovalConfigurationMap={appIdToAppApprovalConfigMap}
                         />
                     )
                 }}
@@ -138,6 +157,7 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
                             envAppList={envAppList}
                             envConfig={envConfig}
                             fetchEnvConfig={refetch}
+                            appIdToAppApprovalConfigMap={appIdToAppApprovalConfigMap}
                         />
                     </div>
                     {appId ? (
@@ -150,6 +170,7 @@ const EnvConfig = ({ filteredAppIds, envName }: AppGroupDetailDefaultType) => {
                                 envConfig={envConfig}
                                 fetchEnvConfig={refetch}
                                 onErrorRedirectURL={generatePath(path, { envId })}
+                                appOrEnvIdToResourceApprovalConfigurationMap={appIdToAppApprovalConfigMap}
                             />
                         </div>
                     ) : (
diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
index e0982b50ba..c07593e473 100644
--- a/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
+++ b/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
@@ -45,11 +45,14 @@ import {
     RuntimePluginVariables,
     uploadCDPipelineFile,
     UploadFileProps,
+    Button,
+    ComponentSizeType,
+    AnimatedDeployButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useHistory, useLocation } from 'react-router-dom'
 import { ReactComponent as Close } from '@Icons/ic-cross.svg'
 import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as PlayIcon } from '@Icons/ic-play-medium.svg'
+import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Error } from '@Icons/ic-warning.svg'
 import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
 import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
@@ -572,10 +575,8 @@ export default function BulkCDTrigger({
             updatedMaterials?: CDMaterialType,
         ) => ({
             materials: updatedMaterials ?? appListData.material,
-            approvalUsers: appListData.approvalUsers,
             requestedUserId: appListData.requestedUserId,
-            // FIXME: Not using anywhere
-            userApprovalConfig: appListData.userApprovalConfig,
+            approvalConfigData: appListData.approvalConfigData,
             appReleaseTagNames: appListData.appReleaseTags,
             tagsEditable: appListData.tagsEditable,
         })
@@ -846,29 +847,23 @@ export default function BulkCDTrigger({
     }
 
     const renderFooterSection = (): JSX.Element => {
+        const isDeployButtonDisabled: boolean = isDeployDisabled()
         return (
             <div className="dc__border-top flex right bcn-0 pt-16 pr-20 pb-16 pl-20 dc__position-fixed dc__bottom-0 env-modal-width">
                 <div className="dc__position-rel tippy-over">
-                    <button
-                        className="cta flex h-36"
-                        data-testid="deploy-button"
-                        onClick={onClickStartDeploy}
-                        disabled={isDeployDisabled()}
-                        type="button"
-                    >
-                        {isLoading ? (
-                            <Progressing />
-                        ) : (
-                            <>
-                                {stage === DeploymentNodeType.CD ? (
-                                    <DeployIcon className="icon-dim-16 dc__no-svg-fill mr-8" />
-                                ) : (
-                                    <PlayIcon className="icon-dim-16 dc__no-svg-fill scn-0 mr-8" />
-                                )}
-                                {BUTTON_TITLE[stage]}
-                            </>
-                        )}
-                    </button>
+                    {!isDeployButtonDisabled && stage === DeploymentNodeType.CD && !isLoading ? (
+                        <AnimatedDeployButton onButtonClick={onClickStartDeploy} isVirtualEnvironment={false} />
+                    ) : (
+                        <Button
+                            dataTestId="deploy-button"
+                            text={BUTTON_TITLE[stage]}
+                            startIcon={stage === DeploymentNodeType.CD ? <DeployIcon /> : <PlayIcon />}
+                            isLoading={isLoading}
+                            size={ComponentSizeType.large}
+                            onClick={onClickStartDeploy}
+                            disabled={isDeployButtonDisabled}
+                        />
+                    )}
                 </div>
             </div>
         )
diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx
index e7af60b953..a8af6ffc06 100644
--- a/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx
+++ b/src/components/ApplicationGroup/Details/TriggerView/BulkCITrigger.tsx
@@ -47,7 +47,7 @@ import {
 import Tippy from '@tippyjs/react'
 import { getCIPipelineURL, getParsedBranchValuesForPlugin, importComponentFromFELibrary } from '../../../common'
 import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
-import { ReactComponent as PlayIcon } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Warning } from '../../../../assets/icons/ic-warning.svg'
 import { ReactComponent as ICError } from '../../../../assets/icons/ic-alert-triangle.svg'
 import { ReactComponent as Storage } from '../../../../assets/icons/ic-storage.svg'
@@ -176,9 +176,7 @@ const BulkCITrigger = ({
     const getRuntimeParamsData = async (_materialListMap: Record<string, any[]>): Promise<void> => {
         const runtimeParamsServiceList = appList.map((appDetails) => {
             if (getIsAppUnorthodox(appDetails) || !_materialListMap[appDetails.appId]) {
-                return () => ({
-                    [appDetails.ciPipelineId]: [],
-                })
+                return () => ([])
             }
             return () => getRuntimeParams(appDetails.ciPipelineId)
         })
diff --git a/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx b/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx
index 42943d06a7..67da6c0f3d 100644
--- a/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx
+++ b/src/components/ApplicationGroup/Details/TriggerView/EnvTriggerView.tsx
@@ -933,7 +933,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
             const nodes = workflow.nodes.map((node) => {
                 if (cdNodeId == node.id && node.type === nodeType) {
                     // TODO: Ig not using this, can remove it
-                    node.userApprovalConfig = workflow.approvalConfiguredIdsMap[cdNodeId]
+                    node.approvalConfigData = workflow.approvalConfiguredIdsMap[cdNodeId]
                     _selectedNode = node
                     _workflowId = workflow.id
                     _appID = workflow.appId
@@ -990,7 +990,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
         const _workflows = [...filteredWorkflows].map((workflow) => {
             const nodes = workflow.nodes.map((node) => {
                 if (node.type === 'CD' && +node.id == cdNodeId) {
-                    node.userApprovalConfig = workflow.approvalConfiguredIdsMap[cdNodeId]
+                    node.approvalConfigData = workflow.approvalConfiguredIdsMap[cdNodeId]
                     _selectedNode = node
                 }
                 return node
@@ -1404,9 +1404,8 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                     _selectedNode = _cdNode.preNode
                 } else if (bulkTriggerType === DeploymentNodeType.CD) {
                     _selectedNode = _cdNode
-                    _selectedNode.approvalUsers = _materialData.approvalUsers
                     _selectedNode.requestedUserId = _materialData.requestedUserId
-                    _selectedNode.userApprovalConfig = _materialData.userApprovalConfig
+                    _selectedNode.approvalConfigData = _materialData.deploymentApprovalInfo?.approvalConfigData
                 } else if (bulkTriggerType === DeploymentNodeType.POSTCD) {
                     _selectedNode = _cdNode.postNode
                 }
@@ -1784,8 +1783,7 @@ export default function EnvTriggerView({ filteredAppIds, isVirtualEnv }: AppGrou
                         parentPipelineType: WorkflowNodeType[_selectedNode.parentPipelineType],
                         parentEnvironmentName: _selectedNode.parentEnvironmentName,
                         material: _selectedNode.inputMaterialList,
-                        approvalUsers: _selectedNode.approvalUsers,
-                        userApprovalConfig: _selectedNode.userApprovalConfig,
+                        approvalConfigData: _selectedNode.approvalConfigData,
                         requestedUserId: _selectedNode.requestedUserId,
                         appReleaseTags: wf.appReleaseTags,
                         tagsEditable: wf.tagsEditable,
diff --git a/src/components/CIPipelineN/CIPipeline.tsx b/src/components/CIPipelineN/CIPipeline.tsx
index 7a3fa84066..2ed4cef515 100644
--- a/src/components/CIPipelineN/CIPipeline.tsx
+++ b/src/components/CIPipelineN/CIPipeline.tsx
@@ -129,6 +129,8 @@ export default function CIPipeline({
     const [isSecurityModuleInstalled, setSecurityModuleInstalled] = useState<boolean>(false)
     const [selectedEnv, setSelectedEnv] = useState<EnvironmentWithSelectPickerType>()
     const [environments, setEnvironments] = useState<EnvironmentWithSelectPickerType[]>([])
+    // NOTE: don't want to show the warning until fetch; therefore true by default
+    const [isBlobStorageConfigured, setIsBlobStorageConfigured] = useState(true)
     const [formData, setFormData] = useState<PipelineFormType>({
         name: '',
         args: [],
@@ -475,13 +477,14 @@ export default function CIPipeline({
                     validateStage(BuildStageVariable.Build, ciPipelineResponse.form)
                     validateStage(BuildStageVariable.PostBuild, ciPipelineResponse.form)
                     setFormData(ciPipelineResponse.form)
+                    setIsBlobStorageConfigured(ciPipelineResponse.isBlobStorageConfigured)
                     setCIPipeline(ciPipelineResponse.ciPipeline)
                     await getInitialPlugins(ciPipelineResponse.form)
                     await getEnvironments(ciPipelineResponse.ciPipeline.environmentId)
                     setIsAdvanced(true)
                 }
             } else {
-                const ciPipelineResponse = await getInitData(appId, true, !isJobCard)
+                const ciPipelineResponse = await getInitData(appId, true, isJobCard)
                 if (ciPipelineResponse) {
                     setFormData(ciPipelineResponse.result.form)
                     await getInitialPlugins(ciPipelineResponse.result.form)
@@ -810,6 +813,7 @@ export default function CIPipeline({
             handleDisableParentModalCloseUpdate,
             handleValidateMandatoryPlugins,
             mandatoryPluginData,
+            isBlobStorageConfigured,
             uploadFile,
         }),
         [
@@ -824,6 +828,7 @@ export default function CIPipeline({
             pluginDataStore,
             availableTags,
             mandatoryPluginData,
+            isBlobStorageConfigured,
         ],
     )
 
diff --git a/src/components/CIPipelineN/Sidebar.tsx b/src/components/CIPipelineN/Sidebar.tsx
index ff537a5533..296d6bbaff 100644
--- a/src/components/CIPipelineN/Sidebar.tsx
+++ b/src/components/CIPipelineN/Sidebar.tsx
@@ -22,6 +22,7 @@ import {
     PipelineFormType,
     SelectPicker,
     ResourceKindType,
+    WORKFLOW_CACHE_CONFIG_ENUM,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { BuildStageVariable, DOCUMENTATION, TriggerType } from '../../config'
@@ -37,6 +38,7 @@ import { GeneratedHelmPush } from '../cdPipeline/cdPipeline.types'
 import { EnvironmentList } from './EnvironmentList'
 
 const MandatoryPluginWarning = importComponentFromFELibrary('MandatoryPluginWarning')
+const CacheConfiguration = importComponentFromFELibrary('CacheConfiguration', null, 'function')
 
 export const Sidebar = ({
     isJobView,
@@ -60,6 +62,7 @@ export const Sidebar = ({
         isVirtualEnvironment,
         getPrePostStageInEnv,
         mandatoryPluginData,
+        isBlobStorageConfigured,
     } = useContext(pipelineContext)
 
     const [addConfigSecret, setAddConfigSecret] = useState<boolean>(false)
@@ -279,8 +282,8 @@ export const Sidebar = ({
         const triggerValue = isPreBuildTab ? formData.preBuildStage.triggerType : formData.postBuildStage.triggerType
 
         return (
-            <div className="sidebar-action-container sidebar-action-container-border">
-                <div className="dc__uppercase fw-6 fs-12 cn-6 mb-12">
+            <div className="sidebar-action-container sidebar-action-container-border flexbox-col dc__gap-4">
+                <div className="dc__uppercase fw-6 fs-12 cn-6">
                     Trigger {isPreBuildTab ? 'PRE' : 'POST'}-DEPLOYMENT STAGE
                 </div>
                 <div>
@@ -310,6 +313,35 @@ export const Sidebar = ({
         )
     }
 
+    const handleSetIsInheriting = () => {
+        // NOTE: don't do anything if in oss
+        if (!formData.workflowCacheConfig) {
+            return
+        }
+        
+        const newWorkflowCacheConfigType =
+            formData.workflowCacheConfig.type === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT
+                ? WORKFLOW_CACHE_CONFIG_ENUM.OVERRIDE
+                : WORKFLOW_CACHE_CONFIG_ENUM.INHERIT
+
+        setFormData({ ...formData, workflowCacheConfig: {
+            ...formData.workflowCacheConfig,
+            type: newWorkflowCacheConfigType,
+            ...(newWorkflowCacheConfigType === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT ? {
+                value: formData.workflowCacheConfig.globalValue
+            } : {}),
+        }})
+    }
+
+    const handleSetUseRemoteCache = () => {
+        // NOTE: don't do anything if in oss
+        if (!formData.workflowCacheConfig) {
+            return
+        }
+        
+        setFormData({ ...formData, workflowCacheConfig: { ...formData.workflowCacheConfig, value: !formData.workflowCacheConfig.value } })
+    }
+
     return (
         <div>
             {activeStageName !== BuildStageVariable.Build ? (
@@ -348,8 +380,8 @@ export const Sidebar = ({
                     )}
                 </div>
             ) : (
-                <div className="sidebar-action-container pr-20">
-                    <div className="dc__uppercase fw-6 fs-12 cn-6 mb-12">
+                <div className="sidebar-action-container pr-20 flexbox-col dc__gap-4">
+                    <div className="dc__uppercase fw-6 fs-12 cn-6">
                         Trigger {isJobCard ? 'JOB' : 'BUILD'} PIPELINE
                     </div>
                     <div>
@@ -379,6 +411,18 @@ export const Sidebar = ({
             )}
             {isCdPipeline && activeStageName !== BuildStageVariable.Build && renderConfigSecret()}
 
+            {!isCdPipeline && CacheConfiguration && activeStageName === BuildStageVariable.Build && formData.workflowCacheConfig && (
+                <div className='sidebar-action-container sidebar-action-container-border dc__border-top-n1'>
+                    <CacheConfiguration
+                        isInheriting={formData.workflowCacheConfig.type === WORKFLOW_CACHE_CONFIG_ENUM.INHERIT}
+                        handleSetIsInheriting={handleSetIsInheriting}
+                        useRemoteCache={formData.workflowCacheConfig.value}
+                        handleSetUseRemoteCache={handleSetUseRemoteCache}
+                        isBlobStorageConfigured={isBlobStorageConfigured}
+                    />
+                </div>
+            )}
+
             {!isCdPipeline && (
                 <div className="sidebar-action-container pr-20">
                     <div className="fw-6 fs-13 cn-9 mb-8">📙 Need help?</div>
diff --git a/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx b/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
index f0cd3f41ec..909189b3ce 100644
--- a/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/ValueConfigOverlay.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from 'react'
+import { ChangeEvent, useEffect, useState } from 'react'
 
 import {
     Button,
@@ -14,6 +14,7 @@ import {
     SelectPicker,
     SelectPickerOptionType,
     Tooltip,
+    validateRequiredPositiveNumber,
     VariableTypeFormat,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -34,7 +35,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
     const { choices: initialChoices, askValueAtRuntime, blockCustomValue, fileInfo } = customState
 
     // STATES
-    const [choices, setChoices] = useState(initialChoices.map((choice, id) => ({ id, value: choice, error: '' })))
+    const [choices, setChoices] = useState([])
     const [fileSize, setFileSize] = useState({ value: fileInfo.maxUploadSize, error: '' })
 
     // CONSTANTS
@@ -46,6 +47,10 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
     const hasFileMountError = !fileInfo.fileMountDir
     const showIconDot = !!choices.length || askValueAtRuntime || blockCustomValue || isFormatFile
 
+    useEffect(() => {
+        setChoices(initialChoices.map((choice, id) => ({ id, value: choice, error: '' })))
+    }, [data.format.value])
+
     // METHODS
     const handleAddChoices = () => {
         setChoices([{ value: '', id: choices.length + 1, error: '' }, ...choices])
@@ -60,7 +65,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
                           id: choiceId,
                           value: choiceValue,
                           error:
-                              isFormatNumber && !PATTERNS.NATURAL_NUMBERS.test(choiceValue)
+                              isFormatNumber && !PATTERNS.DECIMAL_NUMBERS.test(choiceValue)
                                   ? 'Choice is not a number'
                                   : '',
                       }
@@ -112,7 +117,7 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
     }: Partial<Pick<typeof fileInfo, 'maxUploadSize' | 'sizeUnit'>>) => {
         setFileSize({
             value: maxUploadSize,
-            error: maxUploadSize && !PATTERNS.DECIMAL_NUMBERS.test(maxUploadSize) ? 'File size must be a number' : '',
+            error: maxUploadSize ? validateRequiredPositiveNumber(maxUploadSize).message : '',
         })
         handleRowUpdateAction({
             actionType: VariableDataTableActionType.UPDATE_FILE_MAX_SIZE,
@@ -179,30 +184,32 @@ export const ValueConfigOverlay = ({ row, handleRowUpdateAction }: ConfigOverlay
                             onChange={handleFileAllowedExtensionsChange}
                         />
                     </div>
-                    <div className="flexbox dc__align-items-center">
-                        <div className="flex-grow-1">
-                            <CustomInput
-                                name="fileMaxSize"
-                                onChange={handleFileMaxSizeChange}
-                                value={fileSize.value}
-                                label="Restrict file size"
-                                placeholder="Enter size"
-                                error={fileSize.error}
-                            />
-                        </div>
-                        <div className={`${fileSize.error ? 'mt-2 dc__align-self-center' : 'dc__align-self-end'}`}>
-                            <SelectPicker
-                                inputId="file-max-size-unit-selector"
-                                classNamePrefix="file-max-size-unit-selector"
-                                value={fileInfo.sizeUnit}
-                                onChange={handleFileSizeUnitChange}
-                                options={FILE_UPLOAD_SIZE_UNIT_OPTIONS}
-                                size={ComponentSizeType.large}
-                                menuSize={ComponentSizeType.xs}
-                                isDisabled={!!fileSize.error}
-                                menuPortalTarget={document.getElementById('visible-modal')}
-                            />
+                    <div>
+                        <div className="flexbox dc__align-items-center">
+                            <div className="flex-grow-1">
+                                <CustomInput
+                                    name="fileMaxSize"
+                                    onChange={handleFileMaxSizeChange}
+                                    value={fileSize.value}
+                                    label="Restrict file size"
+                                    placeholder="Enter size"
+                                />
+                            </div>
+                            <div className="dc__align-self-end">
+                                <SelectPicker
+                                    inputId="file-max-size-unit-selector"
+                                    classNamePrefix="file-max-size-unit-selector"
+                                    value={fileInfo.sizeUnit}
+                                    onChange={handleFileSizeUnitChange}
+                                    options={FILE_UPLOAD_SIZE_UNIT_OPTIONS}
+                                    size={ComponentSizeType.large}
+                                    menuSize={ComponentSizeType.xs}
+                                    isDisabled={!!fileSize.error}
+                                    menuPortalTarget={document.getElementById('visible-modal')}
+                                />
+                            </div>
                         </div>
+                        {!!fileSize.error && <div className="form__error">{fileSize.error}</div>}
                     </div>
                 </div>
             )
diff --git a/src/components/CIPipelineN/VariableDataTable/VariableDataTable.component.tsx b/src/components/CIPipelineN/VariableDataTable/VariableDataTable.component.tsx
index 31eaabe5bb..3abbf5c1a9 100644
--- a/src/components/CIPipelineN/VariableDataTable/VariableDataTable.component.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/VariableDataTable.component.tsx
@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react'
+import { useContext, useMemo, useRef } from 'react'
 
 import {
     Button,
@@ -106,6 +106,9 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
             isInputPluginVariable ? 'inputVariables' : 'outputVariables'
         ]
 
+    // FILE UPLOADING STATUS REF (Record of rowIds and status)
+    const idToIsFileUploadingMap = useRef<Record<string | number, boolean>>({})
+
     // TABLE ROWS
     const rows = useMemo<VariableDataRowType[]>(
         () =>
@@ -119,6 +122,7 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
                 selectedTaskIndex,
                 inputVariablesListFromPrevStep,
                 isCdPipeline,
+                idToIsFileUploadingMap: idToIsFileUploadingMap.current,
             }),
         [ioVariables],
     )
@@ -256,7 +260,7 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
             case VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO:
                 if (selectedRow && selectedRow.data.val.type === DynamicDataTableRowDataType.FILE_UPLOAD) {
                     selectedRow.data.val.value = rowAction.actionValue.fileName
-                    selectedRow.data.val.props.isLoading = rowAction.actionValue.isLoading
+                    selectedRow.data.val.props.isLoading = idToIsFileUploadingMap.current[selectedRow.id]
                     selectedRow.customState.fileInfo.fileReferenceId = rowAction.actionValue.fileReferenceId
                 }
                 break
@@ -347,6 +351,7 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
                     selectedRow.data.val = getValColumnRowProps({
                         ...defaultRowValColumnParams,
                         format: rowAction.actionValue,
+                        valueConstraint: null,
                     })
                     selectedRow.customState = {
                         ...customState,
@@ -418,15 +423,16 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
         ) {
             handleRowUpdateAction({
                 actionType: VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO,
-                actionValue: { fileReferenceId: null, isLoading: false, fileName: value },
+                actionValue: { fileReferenceId: null, fileName: value },
                 rowId: updatedRow.id,
             })
 
             if (extraData.files.length) {
                 try {
+                    idToIsFileUploadingMap.current[updatedRow.id] = true
                     handleRowUpdateAction({
                         actionType: VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO,
-                        actionValue: { fileReferenceId: null, isLoading: true, fileName: value },
+                        actionValue: { fileReferenceId: null, fileName: value },
                         rowId: updatedRow.id,
                     })
 
@@ -439,15 +445,17 @@ export const VariableDataTable = ({ type, isCustomTask = false }: VariableDataTa
                         }),
                     })
 
+                    idToIsFileUploadingMap.current[updatedRow.id] = false
                     handleRowUpdateAction({
                         actionType: VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO,
-                        actionValue: { fileReferenceId: id, isLoading: false, fileName: name },
+                        actionValue: { fileReferenceId: id, fileName: name },
                         rowId: updatedRow.id,
                     })
                 } catch {
+                    idToIsFileUploadingMap.current[updatedRow.id] = false
                     handleRowUpdateAction({
                         actionType: VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO,
-                        actionValue: { fileReferenceId: null, isLoading: false, fileName: '' },
+                        actionValue: { fileReferenceId: null, fileName: '' },
                         rowId: updatedRow.id,
                     })
                 }
diff --git a/src/components/CIPipelineN/VariableDataTable/VariableDataTablePopupMenu.tsx b/src/components/CIPipelineN/VariableDataTable/VariableDataTablePopupMenu.tsx
index c48524ba0d..b02706466a 100644
--- a/src/components/CIPipelineN/VariableDataTable/VariableDataTablePopupMenu.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/VariableDataTablePopupMenu.tsx
@@ -6,9 +6,10 @@ import {
     ButtonVariantType,
     ComponentSizeType,
     stopPropagation,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
+import { ReactComponent as ICClose } from '@Icons/ic-close.svg'
 import { ReactComponent as ICSlidersVertical } from '@Icons/ic-sliders-vertical.svg'
 import { ReactComponent as ICDot } from '@Icons/ic-dot.svg'
 
@@ -87,13 +88,15 @@ export const VariableDataTablePopupMenu = ({
                             <div className="px-12 py-8 flexbox dc__align-items-center dc__content-space dc__gap-8 dc__border-bottom-n1">
                                 <div className="flexbox dc__align-items-center dc__gap-8">
                                     {showHeaderIcon && <ICSlidersVertical className="icon-dim-16" />}
-                                    <p className="m-0 fw-6 fs-13 lh-20">{heading}</p>
+                                    <Tooltip content={heading}>
+                                        <p className="m-0 fw-6 fs-13 lh-20 dc__truncate">{heading}</p>
+                                    </Tooltip>
                                 </div>
                                 <Button
                                     size={ComponentSizeType.small}
                                     style={ButtonStyleType.negativeGrey}
                                     variant={ButtonVariantType.borderLess}
-                                    icon={<ICCross />}
+                                    icon={<ICClose />}
                                     dataTestId="popup-close-button"
                                     ariaLabel="Close Popup"
                                     showAriaLabelInTippy={false}
diff --git a/src/components/CIPipelineN/VariableDataTable/types.ts b/src/components/CIPipelineN/VariableDataTable/types.ts
index 9c027b4b35..a9fa643674 100644
--- a/src/components/CIPipelineN/VariableDataTable/types.ts
+++ b/src/components/CIPipelineN/VariableDataTable/types.ts
@@ -83,7 +83,6 @@ type VariableDataTableActionPropsMap = {
     [VariableDataTableActionType.UPDATE_FILE_UPLOAD_INFO]: {
         actionValue: Pick<VariableType, 'fileReferenceId'> & {
             fileName: string
-            isLoading: boolean
         }
     }
 
@@ -148,16 +147,24 @@ export type GetValColumnRowPropsType = Pick<
     Pick<
         VariableType,
         'format' | 'value' | 'refVariableName' | 'refVariableStage' | 'valueConstraint' | 'description' | 'variableType'
-    > & { type: PluginVariableType }
+    > & { type: PluginVariableType; isFileUploading?: boolean }
 
 export interface GetVariableDataTableInitialRowsProps
     extends Omit<
         GetValColumnRowPropsType,
-        'description' | 'format' | 'variableType' | 'value' | 'refVariableName' | 'refVariableStage' | 'valueConstraint'
+        | 'description'
+        | 'format'
+        | 'variableType'
+        | 'value'
+        | 'refVariableName'
+        | 'refVariableStage'
+        | 'valueConstraint'
+        | 'isFileUploading'
     > {
     ioVariables: VariableType[]
     type: PluginVariableType
     isCustomTask: boolean
+    idToIsFileUploadingMap: Record<string | number, boolean>
 }
 
 export type GetValidateCellProps = {
diff --git a/src/components/CIPipelineN/VariableDataTable/utils.tsx b/src/components/CIPipelineN/VariableDataTable/utils.tsx
index a385953138..3ff7f16364 100644
--- a/src/components/CIPipelineN/VariableDataTable/utils.tsx
+++ b/src/components/CIPipelineN/VariableDataTable/utils.tsx
@@ -242,6 +242,7 @@ export const getValColumnRowProps = ({
     isCdPipeline,
     selectedTaskIndex,
     inputVariablesListFromPrevStep,
+    isFileUploading,
 }: GetValColumnRowPropsType): VariableDataRowType['data']['format'] => {
     if (type === PluginVariableType.INPUT) {
         if (format === VariableTypeFormat.FILE) {
@@ -249,6 +250,7 @@ export const getValColumnRowProps = ({
                 type: DynamicDataTableRowDataType.FILE_UPLOAD,
                 value,
                 props: {
+                    isLoading: isFileUploading,
                     fileTypes: valueConstraint?.constraint?.fileProperty?.allowedExtensions || [],
                 },
             }
@@ -281,13 +283,10 @@ export const getValColumnRowProps = ({
             props: {
                 placeholder: 'Enter value or variable',
                 options: optionsForValColumn,
-                selectPickerProps: {
-                    isCreatable:
-                        format !== VariableTypeFormat.BOOL &&
-                        (!valueConstraint?.choices?.length || !valueConstraint.blockCustomValue),
-                    formatCreateLabel: (inputValue) => `Use ${inputValue}`,
-                },
-                Icon:
+                isCreatable:
+                    format !== VariableTypeFormat.BOOL &&
+                    (!valueConstraint?.choices?.length || !valueConstraint.blockCustomValue),
+                icon:
                     refVariableStage || (variableType && variableType !== RefVariableType.NEW) ? (
                         <SystemVariableIcon />
                     ) : null,
@@ -374,6 +373,7 @@ export const getVariableDataTableRows = ({
     ioVariables,
     type,
     isCustomTask,
+    idToIsFileUploadingMap,
     ...restProps
 }: GetVariableDataTableInitialRowsProps): VariableDataRowType[] =>
     (ioVariables || []).map(
@@ -404,6 +404,7 @@ export const getVariableDataTableRows = ({
                 refVariableName,
                 refVariableStage,
                 valueConstraint,
+                isFileUploading: idToIsFileUploadingMap[id],
             })
 
             return {
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
index 193ba8af0f..67fd6b352c 100644
--- a/src/components/ClusterNodes/ClusterOverview.tsx
+++ b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -25,6 +25,7 @@ import {
     ResourceKindType,
     getUrlWithSearchParams,
     showError,
+    ClusterCapacityType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import {
     ClusterErrorType,
@@ -32,7 +33,6 @@ import {
     DescriptionDataType,
     ERROR_TYPE,
     ClusterDetailsType,
-    ClusterCapacityType,
     ClusterDescriptionResponse,
     ClusterCapacityResponse,
 } from './types'
diff --git a/src/components/ClusterNodes/ClusterSelectionList.tsx b/src/components/ClusterNodes/ClusterSelectionList.tsx
index 82b0024c3e..53fb923744 100644
--- a/src/components/ClusterNodes/ClusterSelectionList.tsx
+++ b/src/components/ClusterNodes/ClusterSelectionList.tsx
@@ -22,9 +22,9 @@ import {
     useUrlFilters,
     Tooltip,
     ClusterFiltersType,
-    ClusterStatusType,
     ALL_NAMESPACE_OPTION,
     SortableTableHeaderCell,
+    ClusterDetail,
 } from '@devtron-labs/devtron-fe-common-lib'
 import dayjs, { Dayjs } from 'dayjs'
 import { importComponentFromFELibrary } from '@Components/common'
@@ -33,7 +33,6 @@ import NoClusterEmptyState from '@Images/no-cluster-empty-state.png'
 import { AddClusterButton } from '@Components/ResourceBrowser/PageHeader.buttons'
 import { ReactComponent as Error } from '@Icons/ic-error-exclamation.svg'
 import { ReactComponent as TerminalIcon } from '@Icons/ic-terminal-fill.svg'
-import { ClusterDetail } from './types'
 import ClusterNodeEmptyState from './ClusterNodeEmptyStates'
 import { ClusterSelectionType } from '../ResourceBrowser/Types'
 import { AppDetailsTabs } from '../v2/appDetails/appDetails.store'
@@ -55,14 +54,6 @@ const ClusterFilters = importComponentFromFELibrary('ClusterFilters', null, 'fun
 const CompareClusterButton = importComponentFromFELibrary('CompareClusterButton', null, 'function')
 const ClusterMap = importComponentFromFELibrary('ClusterMap', null, 'function')
 
-const getClusterMapData = (data: ClusterDetail[]) =>
-    data.map(({ name, id, nodeCount, status }) => ({
-        name,
-        status,
-        href: `${URLS.RESOURCE_BROWSER}/${id}/${ALL_NAMESPACE_OPTION.value}/${SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()}/${K8S_EMPTY_GROUP}`,
-        value: nodeCount ?? 0,
-    }))
-
 const parseSearchParams = (searchParams: URLSearchParams) => ({
     clusterFilter: (searchParams.get('clusterFilter') as ClusterFiltersType) || ClusterFiltersType.ALL_CLUSTERS,
 })
@@ -108,47 +99,6 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
         })
     }, [searchKey, clusterOptions, `${clusterFilter}`, sortBy, sortOrder])
 
-    const treeMapData = useMemo(() => {
-        const { prodClusters, nonProdClusters } = filteredList.reduce(
-            (acc, curr) => {
-                if (curr.status && curr.status !== ClusterStatusType.CONNECTION_FAILED) {
-                    if (curr.isProd) {
-                        acc.prodClusters.push(curr)
-                    } else {
-                        acc.nonProdClusters.push(curr)
-                    }
-                }
-
-                return acc
-            },
-            { prodClusters: [], nonProdClusters: [] },
-        )
-
-        const productionClustersData = getClusterMapData(prodClusters)
-        const nonProductionClustersData = getClusterMapData(nonProdClusters)
-
-        return [
-            ...(productionClustersData.length
-                ? [
-                      {
-                          id: 0,
-                          label: 'Production Clusters',
-                          data: productionClustersData,
-                      },
-                  ]
-                : []),
-            ...(nonProductionClustersData.length
-                ? [
-                      {
-                          id: 1,
-                          label: 'Non-Production Clusters',
-                          data: nonProductionClustersData,
-                      },
-                  ]
-                : []),
-        ]
-    }, [filteredList])
-
     const handleFilterKeyPress = (value: string) => {
         handleSearch(value)
     }
@@ -305,7 +255,12 @@ const ClusterSelectionList: React.FC<ClusterSelectionType> = ({
                 </div>
             </div>
             {ClusterMap && window._env_.FEATURE_CLUSTER_MAP_ENABLE && (
-                <ClusterMap isLoading={clusterListLoader} treeMapData={treeMapData} />
+                <ClusterMap
+                    isLoading={clusterListLoader}
+                    filteredList={filteredList}
+                    clusterListLoader={clusterListLoader}
+                    isProportional
+                />
             )}
             {!filteredList.length ? (
                 <div className="flex-grow-1">
diff --git a/src/components/ClusterNodes/ClusterTerminal.tsx b/src/components/ClusterNodes/ClusterTerminal.tsx
index 0237512bfe..9cf170a0a1 100644
--- a/src/components/ClusterNodes/ClusterTerminal.tsx
+++ b/src/components/ClusterNodes/ClusterTerminal.tsx
@@ -27,6 +27,7 @@ import {
     TabGroup,
     ComponentSizeType,
     TabProps,
+    NodeTaintType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useLocation, useParams, useHistory } from 'react-router-dom'
 import { BUSYBOX_LINK, DEFAULT_CONTAINER_NAME, NETSHOOT_LINK, shellTypes } from '../../config/constants'
@@ -43,7 +44,7 @@ import { menuComponentForImage, Option } from '../v2/common/ReactSelect.utils'
 import { clusterImageDescription, convertToOptionsList } from '../common'
 import ClusterManifest, { ManifestPopupMenu } from './ClusterManifest'
 import ClusterEvents from './ClusterEvents'
-import { ClusterTerminalType, NodeTaintType } from './types'
+import { ClusterTerminalType } from './types'
 import {
     AUTO_SELECT,
     clusterImageSelect,
diff --git a/src/components/ClusterNodes/NodeDetails.tsx b/src/components/ClusterNodes/NodeDetails.tsx
index 1087bea836..034bc34320 100644
--- a/src/components/ClusterNodes/NodeDetails.tsx
+++ b/src/components/ClusterNodes/NodeDetails.tsx
@@ -34,6 +34,7 @@ import {
     ToastManager,
     ToastVariantType,
     TOAST_ACCESS_DENIED,
+    ResourceDetail,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { useParams, useLocation, useHistory } from 'react-router-dom'
 import YAML from 'yaml'
@@ -61,7 +62,6 @@ import {
     NodeDetail,
     NodeDetailResponse,
     PodType,
-    ResourceDetail,
     TEXT_COLOR_CLASS,
     UpdateNodeRequestBody,
 } from './types'
diff --git a/src/components/ClusterNodes/types.ts b/src/components/ClusterNodes/types.ts
index a803ef9852..36d6e6b02f 100644
--- a/src/components/ClusterNodes/types.ts
+++ b/src/components/ClusterNodes/types.ts
@@ -14,7 +14,14 @@
  * limitations under the License.
  */
 
-import { ResponseType, ClusterStatusType, K8sResourceDetailDataType } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ResponseType,
+    K8sResourceDetailDataType,
+    ResourceDetail,
+    ClusterCapacityType,
+    ClusterDetail,
+    NodeTaintType,
+} from '@devtron-labs/devtron-fe-common-lib'
 import { UpdateTabUrlParamsType } from '@Components/common/DynamicTabs/Types'
 import { LabelTag, OptionType } from '../app/types'
 import { CLUSTER_PAGE_TAB } from './constants'
@@ -33,44 +40,6 @@ export enum EFFECT_TYPE {
     NoExecute = 'NoExecute',
 }
 
-export interface ResourceDetail {
-    name: string
-    capacity: string
-    allocatable: string
-    usage: string
-    request: string
-    limit: string
-    usagePercentage: string
-    requestPercentage: string
-    limitPercentage: string
-}
-
-export interface NodeDetailsType {
-    nodeName: string
-    nodeGroup: string
-    taints?: NodeTaintType[]
-}
-
-export interface ClusterCapacityType {
-    name: string
-    nodeCount: number
-    nodeK8sVersions: string[]
-    cpu: ResourceDetail
-    memory: ResourceDetail
-    serverVersion: string
-    nodeDetails?: NodeDetailsType[]
-    nodeErrors: Record<string, string>[]
-    status?: ClusterStatusType
-    isProd: boolean
-}
-
-export interface ClusterDetail extends ClusterCapacityType {
-    id: number
-    errorInNodeListing: string
-    nodeNames?: string[]
-    isVirtualCluster?: boolean
-}
-
 export interface ClusterDescriptionType {
     clusterId: number
     clusterName: string
@@ -170,12 +139,6 @@ export interface ClusterAboutPropType {
     isSuperAdmin: boolean
 }
 
-export interface NodeTaintType {
-    effect: string
-    key: string
-    value: string
-}
-
 export interface SelectGroupType {
     label: string
     options: OptionType[]
diff --git a/src/components/ClusterNodes/utils.tsx b/src/components/ClusterNodes/utils.tsx
index fea9ba4c81..2b6f390ecd 100644
--- a/src/components/ClusterNodes/utils.tsx
+++ b/src/components/ClusterNodes/utils.tsx
@@ -1,11 +1,11 @@
 import {
+    ClusterDetail,
     numberComparatorBySortOrder,
     SortingOrder,
     stringComparatorBySortOrder,
     versionComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CLUSTER_PROD_TYPE, ClusterMapListSortableKeys } from './constants'
-import { ClusterDetail } from './types'
 
 export const getSortedClusterList = (
     updatedClusterOptions: ClusterDetail[],
diff --git a/src/components/Jobs/Service.ts b/src/components/Jobs/Service.ts
index 81724a6159..919a7a612e 100644
--- a/src/components/Jobs/Service.ts
+++ b/src/components/Jobs/Service.ts
@@ -15,15 +15,25 @@
  */
 
 import moment from 'moment'
-import { get, post, APIOptions, ZERO_TIME_STRING, Teams, getEnvironmentListMinPublic } from '@devtron-labs/devtron-fe-common-lib'
+import { get, post, APIOptions, ZERO_TIME_STRING, Teams, getEnvironmentListMinPublic, stringComparatorBySortOrder } from '@devtron-labs/devtron-fe-common-lib'
 import { Moment12HourFormat, Routes } from '../../config'
 import { sortOptionsByLabel } from '../common'
 import { getProjectList } from '../project/service'
 import { JobCIPipeline, JobList, JobsMasterFilters } from './Types'
 import { JOB_STATUS_OPTIONS } from './Constants'
 
-export const getJobs = (request, options?: APIOptions) => {
-    return post(Routes.JOB_LIST, request, options) as Promise<JobList>
+export const getJobs = async (request, options?: APIOptions) => {
+    const response = (await post(Routes.JOB_LIST, request, options)) as JobList
+
+    return {
+        ...response,
+        result: {
+            ...response?.result,
+            jobContainers: (response?.result?.jobContainers ?? []).sort((a, b) =>
+                stringComparatorBySortOrder(a.jobName, b.jobName),
+            ),
+        },
+    }
 }
 
 export const createJob = (request) => {
diff --git a/src/components/ResourceBrowser/ResourceBrowser.service.tsx b/src/components/ResourceBrowser/ResourceBrowser.service.tsx
index c5937ad1ee..37ee0ec092 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.service.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowser.service.tsx
@@ -25,6 +25,7 @@ import {
     showError,
     getUrlWithSearchParams,
     getK8sResourceListPayload,
+    stringComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
 import {
     getManifestResource,
@@ -40,10 +41,23 @@ import { ResourceListPayloadType, ResourceType, GetResourceDataType, NodeRowDeta
 import { SIDEBAR_KEYS } from './Constants'
 import { parseNodeList } from './Utils'
 
-export const getClusterList = (): Promise<ClusterListResponse> => get(Routes.CLUSTER_LIST_PERMISSION)
+export const getClusterList = async (): Promise<ClusterListResponse> => {
+    const response = await get<ClusterListResponse['result']>(Routes.CLUSTER_LIST_PERMISSION)
 
-export const namespaceListByClusterId = (clusterId: string): Promise<ResponseType> =>
-    get(`${Routes.CLUSTER_NAMESPACE}/${clusterId}`)
+    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}`)
+
+    return {
+        ...response,
+        result: (response?.result ?? []).sort((a, b) => stringComparatorBySortOrder(a, b)),
+    }
+}
 
 export const getResourceGroupList = (clusterId: string, signal?: AbortSignal): Promise<ResponseType<ApiResourceType>> =>
     get(`${Routes.API_RESOURCE}/${clusterId}`, {
diff --git a/src/components/ResourceBrowser/ResourceBrowser.tsx b/src/components/ResourceBrowser/ResourceBrowser.tsx
index 50a14bfd9e..3bb32bb842 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowser.tsx
@@ -22,12 +22,12 @@ import {
     PageHeader,
     ErrorScreenManager,
     getIsRequestAborted,
+    ClusterDetail,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { DEFAULT_CLUSTER_ID } from '@Components/cluster/cluster.type'
 import { sortObjectArrayAlphabetically } from '../common'
 import ClusterSelectionList from '../ClusterNodes/ClusterSelectionList'
 import { getClusterList, getClusterListMin } from '../ClusterNodes/clusterNodes.service'
-import { ClusterDetail } from '../ClusterNodes/types'
 import { AddClusterButton } from './PageHeader.buttons'
 
 const ResourceBrowser: React.FC = () => {
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx b/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
index c91c5cf823..4e40f39fee 100644
--- a/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ResourceBrowserActionMenu.tsx
@@ -22,9 +22,9 @@ import {
     ModuleNameMap,
     SecurityModal,
     ResponseType,
-    ApiResponseResultType,
     GetResourceScanDetailsPayloadType,
     useAsync,
+    ScanResultDTO,
 } from '@devtron-labs/devtron-fe-common-lib'
 import DeleteResourcePopup from './DeleteResourcePopup'
 import { importComponentFromFELibrary, getShowResourceScanModal } from '../../common'
@@ -39,8 +39,6 @@ import { ReactComponent as MenuDots } from '../../../assets/icons/appstatus/ic-m
 import { NodeType } from '../../v2/appDetails/appDetails.type'
 
 const OpenSecurityModalButton = importComponentFromFELibrary('OpenSecurityModalButton', null, 'function')
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', false, 'function')
-const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const getResourceScanDetails: ({
     name,
     namespace,
@@ -52,7 +50,7 @@ const getResourceScanDetails: ({
     appType,
     deploymentType,
     isAppDetailView,
-}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
+}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ScanResultDTO>> = importComponentFromFELibrary(
     'getResourceScanDetails',
     null,
     'function',
@@ -69,8 +67,6 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
 }) => {
     const { installedModuleMap } = useMainContext()
 
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && isFELibAvailable
-
     const [showDeleteDialog, setShowDeleteDialog] = useState(false)
     const [showVulnerabilityModal, setShowVulnerabilityModal] = useState(false)
 
@@ -85,7 +81,7 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
                 clusterId: +clusterId,
             }),
         [],
-        showVulnerabilityModal && getResourceScanDetails && isSecurityScanV2Enabled,
+        showVulnerabilityModal && !!getResourceScanDetails,
     )
 
     const toggleDeleteDialog = () => {
@@ -100,11 +96,10 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
         setShowVulnerabilityModal(false)
     }
 
-    const showResourceScanModal =
-        getShowResourceScanModal(
-            selectedResource?.gvk?.Kind as NodeType,
-            installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
-        ) && window._env_.ENABLE_RESOURCE_SCAN_V2
+    const showResourceScanModal = getShowResourceScanModal(
+        selectedResource?.gvk?.Kind as NodeType,
+        installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
+    )
 
     return (
         <>
@@ -193,12 +188,9 @@ const ResourceBrowserActionMenu: React.FC<ResourceBrowserActionMenuType> = ({
                 />
             )}
 
-            {showVulnerabilityModal && !!isFELibAvailable && (
+            {showVulnerabilityModal && !!getResourceScanDetails && (
                 <SecurityModal
-                    isResourceScan
                     handleModalClose={handleCloseVulnerabilityModal}
-                    Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
                     isLoading={resourceScanLoading}
                     error={resourceScanError}
                     responseData={resourceScanResponse?.result}
diff --git a/src/components/ResourceBrowser/Types.ts b/src/components/ResourceBrowser/Types.ts
index 04e6c15e08..99fa23fb0d 100644
--- a/src/components/ResourceBrowser/Types.ts
+++ b/src/components/ResourceBrowser/Types.ts
@@ -25,9 +25,11 @@ import {
     K8sResourceDetailType,
     K8sResourceDetailDataType,
     ALL_NAMESPACE_OPTION,
+    ClusterDetail,
+    ResourceDetail,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { LogSearchTermType, SelectedResourceType } from '../v2/appDetails/appDetails.type'
-import { ClusterDetail, ResourceDetail, ClusterListType } from '../ClusterNodes/types'
+import { ClusterListType } from '../ClusterNodes/types'
 import { useTabs } from '../common/DynamicTabs'
 import { BaseResourceListProps } from './ResourceList/types'
 
diff --git a/src/components/app/details/appDetails/AppDetails.tsx b/src/components/app/details/appDetails/AppDetails.tsx
index a650387d7a..14ed5f947a 100644
--- a/src/components/app/details/appDetails/AppDetails.tsx
+++ b/src/components/app/details/appDetails/AppDetails.tsx
@@ -289,6 +289,11 @@ export const Details: React.FC<DetailsType> = ({
         externalLinks: [],
         monitoringTools: [],
     })
+
+    // NOTE: this might seem like a duplicate of loadingResourceTree
+    // but its not since loadingResourceTree runs a loader on the whole page
+    const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(false)
+
     const [loadingDetails, setLoadingDetails] = useState(true)
     const [loadingResourceTree, setLoadingResourceTree] = useState(true)
     // State to track the loading state for the timeline data when the detailed status modal opens
@@ -463,7 +468,14 @@ export const Details: React.FC<DetailsType> = ({
             })
     }
 
-    const fetchResourceTree = () =>
+    const fetchResourceTree = () => {
+        if (appDetailsAbortRef.current) {
+            appDetailsAbortRef.current.abort()
+        }
+
+        appDetailsAbortRef.current = new AbortController()
+
+        setIsReloadResourceTreeInProgress(true)
         fetchResourceTreeInTime(params.appId, params.envId, interval - 5000, appDetailsAbortRef)
             .then((response) => {
                 if (
@@ -489,7 +501,9 @@ export const Details: React.FC<DetailsType> = ({
             .catch(handleAppDetailsCallError)
             .finally(() => {
                 setLoadingResourceTree(false)
+                setIsReloadResourceTreeInProgress(false)
             })
+    }
 
     function _getDeploymentStatusDetail(
         deploymentAppType: DeploymentAppTypes,
@@ -662,6 +676,8 @@ export const Details: React.FC<DetailsType> = ({
                 isDevtronApp
                 isDeploymentBlocked={isDeploymentBlocked}
                 isVirtualEnvironment={isVirtualEnvRef.current}
+                handleReloadResourceTree={fetchResourceTree}
+                isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
             />
         )
     }
diff --git a/src/components/app/details/appDetails/AppSecurity.tsx b/src/components/app/details/appDetails/AppSecurity.tsx
index 6ea84f0c63..74decef8aa 100644
--- a/src/components/app/details/appDetails/AppSecurity.tsx
+++ b/src/components/app/details/appDetails/AppSecurity.tsx
@@ -1,61 +1,22 @@
-import {
-    ApiResponseResultType,
-    AppDetailsPayload,
-    getExecutionDetails,
-    getSeverityCountFromSummary,
-    getTotalSeverityCount,
-    ResponseType,
-    SeverityCount,
-    useAsync,
-} from '@devtron-labs/devtron-fe-common-lib'
-import { importComponentFromFELibrary } from '@Components/common'
+import { useAsync, getSecurityScan } from '@devtron-labs/devtron-fe-common-lib'
 import { UseGetAppSecurityDetailsProps, UseGetAppSecurityDetailsReturnType } from './appDetails.type'
 
-const getSecurityScan: ({
-    appId,
-    envId,
-    installedAppId,
-}: AppDetailsPayload) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
-    'getSecurityScan',
-    null,
-    'function',
-)
-
 export const useGetAppSecurityDetails = ({
     appId,
     envId,
-    installedAppId,
     artifactId,
-    imageScanDeployInfoId,
-    isSecurityScanV2Enabled,
+    installedAppId,
 }: UseGetAppSecurityDetailsProps): UseGetAppSecurityDetailsReturnType => {
     const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ appId, envId, installedAppId }),
+        () => getSecurityScan({ appId, envId, artifactId, installedAppId }),
         [appId, envId, installedAppId],
-        getSecurityScan && isSecurityScanV2Enabled && (!!appId || !!installedAppId),
+        !!appId || !!installedAppId,
     )
 
-    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getExecutionDetails(artifactId ? { appId, envId, artifactId } : { appId, envId, imageScanDeployInfoId }),
-        [appId, envId, imageScanDeployInfoId, artifactId],
-        !isSecurityScanV2Enabled && !!appId,
-    )
-
-    const scanDetailsResponse = isSecurityScanV2Enabled ? scanResultResponse : executionDetailsResponse
-
-    const severities = isSecurityScanV2Enabled
-        ? scanResultResponse?.result.imageScan.vulnerability?.summary.severities
-        : executionDetailsResponse?.result.imageScan.vulnerability?.summary.severities
-    const severityCount: SeverityCount = getSeverityCountFromSummary(severities)
-
-    const totalCount = getTotalSeverityCount(severityCount)
-
     return {
-        scanDetailsLoading: scanResultLoading || executionDetailsLoading,
-        scanDetailsResponse,
-        scanDetailsError: scanResultError || executionDetailsError,
-        reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
-        severityCount,
-        totalCount,
+        scanResultLoading,
+        scanResultResponse,
+        scanResultError,
+        reloadScanResult,
     }
 }
diff --git a/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx b/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
index 1cfbb7b262..14a2774778 100644
--- a/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
+++ b/src/components/app/details/appDetails/SecurityVulnerabilityCard.tsx
@@ -16,10 +16,7 @@
 
 import React, { useState } from 'react'
 import Tippy from '@tippyjs/react'
-import {
-    getTotalSeverityCount,
-    SecurityModal,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { getScanToolAndSeverityCount, SecurityModal } from '@devtron-labs/devtron-fe-common-lib'
 import { ReactComponent as Question } from '../../../../assets/icons/ic-help-outline.svg'
 import { ReactComponent as Bug } from '../../../../assets/icons/ic-nav-bug.svg'
 import { ReactComponent as Secure } from '../../../../assets/icons/ic-secure.svg'
@@ -28,7 +25,6 @@ import LoadingCard from './LoadingCard'
 import { importComponentFromFELibrary } from '../../../common'
 import { useGetAppSecurityDetails } from './AppSecurity'
 
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 
 export const SecurityVulnerabilityCard = ({
@@ -36,40 +32,56 @@ export const SecurityVulnerabilityCard = ({
     appId,
     envId,
     installedAppId,
-    artifactId,
-    isExternalCI,
 }: SecurityVulnerabilityCardType) => {
     const [showScanDetailsModal, setShowScanDetailsModal] = useState<boolean>(false)
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && !!isFELibAvailable
 
     const handleModalClose = () => setShowScanDetailsModal(false)
 
-    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError, reloadScanDetails, severityCount } =
-        useGetAppSecurityDetails({ appId: +appId, envId: +envId, installedAppId, artifactId, isSecurityScanV2Enabled })
+    const { scanResultLoading, scanResultResponse, scanResultError, reloadScanResult } = useGetAppSecurityDetails({
+        appId: +appId,
+        envId: +envId,
+        installedAppId,
+    })
 
-    // Since we get status in v2 Api only
-    const imageScanFailed: boolean = isSecurityScanV2Enabled && scanDetailsResponse?.result.codeScan.status === 'Failed'
-    const imageScanProgressing: boolean =
-        isSecurityScanV2Enabled && scanDetailsResponse?.result.codeScan.status === 'Progressing'
+    if (cardLoading || scanResultLoading) {
+        return <LoadingCard />
+    }
+
+    // Here for devtron app scanned, isImageScanEnabled both should be true and imageScan shouldn't be null
+    // where as for helm app we only check scanned true since helm app can be scanned without imageScan
+    if (
+        scanResultResponse &&
+        (!scanResultResponse.result.scanned ||
+            (appId ? !scanResultResponse.result.isImageScanEnabled || !scanResultResponse.result.imageScan : false))
+    ) {
+        return null
+    }
+
+    const { severityCount, totalCount } = getScanToolAndSeverityCount(scanResultResponse?.result)
+
+    const imageScanVulnerabilities = scanResultResponse?.result.imageScan?.vulnerability
+    const imageScanList = imageScanVulnerabilities?.list ?? []
+    const imageScanProgressing: boolean = imageScanList.some(
+        (image) => image.status === 'Running' || image.status === 'Progressing',
+    )
+    const imageScanFailed: boolean = imageScanList[0]?.status === 'Failed'
 
     const handleOnCardClick = () => {
-        if (!cardLoading && !scanDetailsError && !showScanDetailsModal) {
+        if (!cardLoading && !scanResultLoading && !scanResultError && !showScanDetailsModal) {
             // hack: added timeout to prevent click outside
             setTimeout(() => setShowScanDetailsModal(true), 100)
         }
     }
 
-    const totalCount = getTotalSeverityCount(severityCount)
-
     const getIcon = () => {
-        if (scanDetailsError || imageScanFailed || imageScanProgressing || totalCount) {
+        if (scanResultError || imageScanFailed || imageScanProgressing || totalCount) {
             return <Bug className="scy-7" />
         }
         return <Secure />
     }
 
     const getTitle = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return '--'
         }
         if (imageScanFailed) {
@@ -79,7 +91,7 @@ export const SecurityVulnerabilityCard = ({
             return <div className="f-progressing dc__loading-dots">Scanning</div>
         }
         if (!totalCount) {
-            return <div className="dc__info-title lh-20 ">You're secure!</div>
+            return <div className="dc__info-title lh-20 ">You&apos;re secure!</div>
         }
         return (
             <div className="fs-13 fw-6 lh-20 f-waiting" data-testid="security-card-total-count">
@@ -89,15 +101,15 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getSubtitle = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return 'Failed to fetch'
         }
-        if (imageScanFailed) {
-            return 'Security scan failed'
-        }
         if (imageScanProgressing) {
             return 'Security scan in progress'
         }
+        if (imageScanFailed) {
+            return 'Security scan failed'
+        }
         if (!totalCount) {
             return 'No Vulnerabilities found'
         }
@@ -117,12 +129,13 @@ export const SecurityVulnerabilityCard = ({
     }
 
     const getActionButton = () => {
-        if (scanDetailsError) {
+        if (scanResultError) {
             return (
                 <button
                     className="app-details-info-card__bottom-container__details fs-12 fw-6 dc__unset-button-styles"
-                    onClick={reloadScanDetails}
+                    onClick={reloadScanResult}
                     data-testid="security-card-handle-refetch-button"
+                    type="button"
                 >
                     Refetch
                 </button>
@@ -138,19 +151,11 @@ export const SecurityVulnerabilityCard = ({
         )
     }
 
-    if (cardLoading || scanDetailsLoading) {
-        return <LoadingCard />
-    }
-
-    if (scanDetailsResponse && !scanDetailsResponse.result.scanned) {
-        return null
-    }
-
     return (
         <button type="button" className="dc__unset-button-styles" onClick={handleOnCardClick}>
             <div
                 data-testid="security-vulnerability-card"
-                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || scanDetailsError ? '' : 'pointer'}`}
+                className={`app-details-info-card flex left bcn-0 br-8 mr-12 lh-20 w-200 ${cardLoading || scanResultError ? '' : 'pointer'}`}
             >
                 <div className="app-details-info-card__top-container flex">
                     <div className="app-details-info-card__top-container__content">
@@ -188,13 +193,10 @@ export const SecurityVulnerabilityCard = ({
             {showScanDetailsModal && (
                 <SecurityModal
                     handleModalClose={handleModalClose}
-                    isExternalCI={isExternalCI}
                     Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
-                    isHelmApp={!!installedAppId}
-                    isLoading={scanDetailsLoading}
-                    error={scanDetailsError}
-                    responseData={scanDetailsResponse?.result}
+                    isLoading={scanResultLoading || cardLoading}
+                    error={scanResultError}
+                    responseData={scanResultResponse?.result}
                     hidePolicy
                 />
             )}
diff --git a/src/components/app/details/appDetails/SourceInfo.tsx b/src/components/app/details/appDetails/SourceInfo.tsx
index bc09641539..e1af62cbeb 100644
--- a/src/components/app/details/appDetails/SourceInfo.tsx
+++ b/src/components/app/details/appDetails/SourceInfo.tsx
@@ -25,7 +25,6 @@ import {
     ComponentSizeType,
     DATE_TIME_FORMATS,
     DeploymentAppTypes,
-    getIsManualApprovalConfigured,
     handleUTCTime,
     ReleaseMode,
     Tooltip,
@@ -53,6 +52,7 @@ import HelmAppConfigApplyStatusCard from '@Components/v2/appDetails/sourceInfo/e
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
 const DeploymentWindowStatusCard = importComponentFromFELibrary('DeploymentWindowStatusCard')
 const ConfigSyncStatusButton = importComponentFromFELibrary('ConfigSyncStatusButton', null, 'function')
+const SwapTraffic = importComponentFromFELibrary('SwapTraffic', null, 'function')
 
 export const SourceInfo = ({
     appDetails,
@@ -121,19 +121,9 @@ export const SourceInfo = ({
         return <div className="flex left mb-16">{loadingCards}</div>
     }
 
-    const getIsApprovalConfigured = (): boolean => {
-        try {
-            const userApprovalConfig = appDetails?.userApprovalConfig || '{}'
-            const parsedUserApprovalConfig = JSON.parse(userApprovalConfig)
-            return getIsManualApprovalConfigured(parsedUserApprovalConfig)
-        } catch (error) {
-            return false
-        }
-    }
-
     const renderDevtronAppsEnvironmentSelector = (environment) => {
         // If moving to a component then move getIsApprovalConfigured with it as well with memoization.
-        const isApprovalConfigured = getIsApprovalConfigured()
+        const isApprovalConfigured = appDetails?.isApprovalPolicyApplicable ?? false
         const relativeSnapshotTime = appDetails?.resourceTree?.lastSnapshotTime
             ? handleUTCTime(appDetails.resourceTree.lastSnapshotTime, true)
             : ''
@@ -158,15 +148,18 @@ export const SourceInfo = ({
                         </div>
                     </Tooltip>
                 )}
-                {appDetails?.resourceTree && !isIsolatedEnv && window._env_.FEATURE_CONFIG_DRIFT_ENABLE && ConfigSyncStatusButton && (
-                    <div className="pl-8">
-                        <ConfigSyncStatusButton
-                            areConfigurationsDrifted={appDetails.resourceTree.hasDrift}
-                            appId={appDetails.appId}
-                            envId={envId}
-                        />
-                    </div>
-                )}
+                {appDetails?.resourceTree &&
+                    !isIsolatedEnv &&
+                    window._env_.FEATURE_CONFIG_DRIFT_ENABLE &&
+                    ConfigSyncStatusButton && (
+                        <div className="pl-8">
+                            <ConfigSyncStatusButton
+                                areConfigurationsDrifted={appDetails.resourceTree.hasDrift}
+                                appId={appDetails.appId}
+                                envId={envId}
+                            />
+                        </div>
+                    )}
                 {isdeploymentAppDeleting && (
                     <div data-testid="deleteing-argocd-pipeline" className="flex left">
                         <Trash className="icon-dim-16 mr-8 ml-12" />
@@ -214,6 +207,18 @@ export const SourceInfo = ({
                                         style={ButtonStyleType.neutral}
                                     />
                                 )}
+                                {window._env_.FEATURE_SWAP_TRAFFIC_ENABLE &&
+                                    SwapTraffic &&
+                                    !!appDetails.pcoId &&
+                                    !appDetails.trafficSwitched && (
+                                        <SwapTraffic
+                                            appName={appDetails.appName}
+                                            envName={appDetails.environmentName}
+                                            appId={appDetails.appId}
+                                            envId={appDetails.environmentId}
+                                            pcoId={appDetails.pcoId}
+                                        />
+                                    )}
                                 {!isVirtualEnvironment && showHibernateModal && (
                                     <Button
                                         dataTestId="app-details-hibernate-modal-button"
@@ -364,8 +369,6 @@ export const SourceInfo = ({
                                   cardLoading={cardLoading}
                                   appId={params.appId}
                                   envId={params.envId}
-                                  artifactId={ciArtifactId}
-                                  isExternalCI={isExternalCI}
                               />
                           )}
                           <div className="flex right ml-auto">
diff --git a/src/components/app/details/appDetails/appDetails.type.ts b/src/components/app/details/appDetails/appDetails.type.ts
index 49c8479c48..55f9e4fc83 100644
--- a/src/components/app/details/appDetails/appDetails.type.ts
+++ b/src/components/app/details/appDetails/appDetails.type.ts
@@ -14,13 +14,7 @@
  * limitations under the License.
  */
 
-import {
-    ACTION_STATE,
-    ApiResponseResultType,
-    ResponseType,
-    ServerErrors,
-    SeverityCount,
-} from '@devtron-labs/devtron-fe-common-lib'
+import { ACTION_STATE, ResponseType, ScanResultDTO, ServerErrors } from '@devtron-labs/devtron-fe-common-lib'
 import { fetchAppDetailsInTime } from '@Components/app/service'
 import { AggregatedNodes, OptionType } from '../../types'
 import { SyncErrorType, AppDetails } from '../../../v2/appDetails/appDetails.type'
@@ -231,12 +225,10 @@ export interface IssuesCardType {
 }
 
 export interface SecurityVulnerabilityCardType {
-    cardLoading?: boolean
+    cardLoading: boolean
     appId?: string
     envId?: string
     installedAppId?: number
-    artifactId?: number
-    isExternalCI?: boolean
 }
 
 export interface DeployedCommitCardType {
@@ -268,17 +260,13 @@ export interface LastUpdatedCardType {
 
 export interface UseGetAppSecurityDetailsProps {
     appId: number
-    envId: number
+    envId?: number
     installedAppId?: number
     artifactId?: number
-    imageScanDeployInfoId?: number
-    isSecurityScanV2Enabled: boolean
 }
 export interface UseGetAppSecurityDetailsReturnType {
-    scanDetailsLoading: boolean
-    scanDetailsResponse: ResponseType<ApiResponseResultType>
-    scanDetailsError: ServerErrors
-    reloadScanDetails: () => void
-    severityCount: SeverityCount
-    totalCount: number
+    scanResultLoading: boolean
+    scanResultResponse: ResponseType<ScanResultDTO>
+    scanResultError: ServerErrors
+    reloadScanResult: () => void
 }
diff --git a/src/components/app/details/cIDetails/CIDetails.tsx b/src/components/app/details/cIDetails/CIDetails.tsx
index 27262a1bda..7d9968086d 100644
--- a/src/components/app/details/cIDetails/CIDetails.tsx
+++ b/src/components/app/details/cIDetails/CIDetails.tsx
@@ -43,9 +43,8 @@ import {
     SecuritySummaryCard,
     TabGroup,
     TRIGGER_STATUS_PROGRESSING,
-    SCAN_TOOL_ID_TRIVY,
     ErrorScreenManager,
-    parseExecutionDetailResponse,
+    getScanToolAndSeverityCount,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Switch, Route, Redirect, useRouteMatch, useParams, useHistory, generatePath } from 'react-router-dom'
 import {
@@ -57,7 +56,7 @@ import {
 } from '../../service'
 import { URLS, Routes } from '../../../../config'
 import { BuildDetails, CIPipeline, HistoryLogsType, SecurityTabType } from './types'
-import { ScanDisabledView, ImageNotScannedView, CIRunningView } from './cIDetails.util'
+import { ImageNotScannedView, CIRunningView } from './cIDetails.util'
 import './ciDetails.scss'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
@@ -66,9 +65,8 @@ import { ReactComponent as NoVulnerability } from '../../../../assets/img/ic-vul
 import { CIPipelineBuildType } from '../../../ciPipeline/types'
 import { renderCIListHeader, renderDeploymentHistoryTriggerMetaText } from '../cdDetails/utils'
 import { importComponentFromFELibrary } from '@Components/common'
-import { useGetCISecurityDetails } from './CISecurity.utils'
+import { useGetAppSecurityDetails } from '../appDetails/AppSecurity'
 
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const terminalStatus = new Set(['succeeded', 'failed', 'error', 'cancelled', 'nottriggered', 'notbuilt'])
 const statusSet = new Set(['starting', 'running', 'pending'])
@@ -669,16 +667,13 @@ export const NoVulnerabilityViewWithTool = ({ scanToolId }: { scanToolId: number
 const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: SecurityTabType) => {
     const { appId } = useParams<{ appId: string }>()
     const { push } = useHistory()
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && !!isFELibAvailable
 
     const computedAppId = appId ?? appIdFromParent
 
-    const { scanDetailsLoading, scanResultResponse, executionDetailsResponse, scanDetailsError, reloadScanDetails, severityCount, totalCount } =
-        useGetCISecurityDetails({
-            appId: +computedAppId,
-            artifactId,
-            isSecurityScanV2Enabled,
-        })
+    const { scanResultLoading, scanResultResponse, scanResultError, reloadScanResult } = useGetAppSecurityDetails({
+        appId: +computedAppId,
+        artifactId,
+    })
 
     const redirectToCreate = () => {
         if (!ciPipelineId) {
@@ -704,39 +699,35 @@ const SecurityTab = ({ ciPipelineId, artifactId, status, appIdFromParent }: Secu
         )
     }
 
-    if (scanDetailsLoading) {
+    if (scanResultLoading) {
         return <Progressing pageLoader />
     }
-    if (scanDetailsError) {
-        return <ErrorScreenManager code={scanDetailsError.code} reload={reloadScanDetails} />
+    if (scanResultError) {
+        return <ErrorScreenManager code={scanResultError.code} reload={reloadScanResult} />
     }
     if (
-        (executionDetailsResponse && !executionDetailsResponse.result.scanned) ||
-        (scanResultResponse && !scanResultResponse.result.scanned)
+        scanResultResponse &&
+        (!scanResultResponse.result.scanned ||
+            !scanResultResponse.result.isImageScanEnabled ||
+            !scanResultResponse.result.imageScan)
     ) {
-        if (!executionDetailsResponse?.result.scanEnabled) {
-            return <ScanDisabledView redirectToCreate={redirectToCreate} />
-        }
         return <ImageNotScannedView />
     }
 
+    const { scanToolId, severityCount, totalCount } = getScanToolAndSeverityCount(scanResultResponse?.result)
+
     if (artifactId && !totalCount) {
-        return (
-            <NoVulnerabilityViewWithTool
-                scanToolId={isSecurityScanV2Enabled ? SCAN_TOOL_ID_TRIVY : executionDetailsResponse.result?.scanToolId} // Since v2 scan is via trivy only
-            />
-        )
+        return <NoVulnerabilityViewWithTool scanToolId={scanToolId} />
     }
 
     return (
         <div className="p-16">
             <SecuritySummaryCard
                 severityCount={severityCount}
-                scanToolId={executionDetailsResponse?.result.scanToolId ?? SCAN_TOOL_ID_TRIVY}
+                scanToolId={scanToolId}
                 rootClassName="w-500"
                 SecurityModalSidebar={SecurityModalSidebar}
-                isSecurityScanV2Enabled={isSecurityScanV2Enabled}
-                responseData={isSecurityScanV2Enabled ? scanResultResponse?.result : parseExecutionDetailResponse(executionDetailsResponse?.result)}
+                responseData={scanResultResponse?.result}
                 hidePolicy
             />
         </div>
diff --git a/src/components/app/details/cIDetails/CISecurity.utils.tsx b/src/components/app/details/cIDetails/CISecurity.utils.tsx
index 11fe31b935..e69de29bb2 100644
--- a/src/components/app/details/cIDetails/CISecurity.utils.tsx
+++ b/src/components/app/details/cIDetails/CISecurity.utils.tsx
@@ -1,56 +0,0 @@
-import {
-    ApiResponseResultType,
-    AppDetailsPayload,
-    getSeverityCountFromSummary,
-    getTotalSeverityCount,
-    ResponseType,
-    SeverityCount,
-    useAsync,
-} from '@devtron-labs/devtron-fe-common-lib'
-import { getLastExecutionByAppArtifactId } from '@Services/service'
-import { importComponentFromFELibrary } from '@Components/common'
-import { UseGetCISecurityDetailsProps, UseGetCISecurityDetailsReturnType } from './types'
-
-const getSecurityScan: ({
-    appId,
-    envId,
-    installedAppId,
-}: AppDetailsPayload) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
-    'getSecurityScan',
-    null,
-    'function',
-)
-
-export const useGetCISecurityDetails = ({
-    appId,
-    artifactId,
-    isSecurityScanV2Enabled,
-}: UseGetCISecurityDetailsProps): UseGetCISecurityDetailsReturnType => {
-    const [scanResultLoading, scanResultResponse, scanResultError, reloadScanResult] = useAsync(
-        () => getSecurityScan({ artifactId, appId }),
-        [artifactId, appId],
-        isSecurityScanV2Enabled,
-    )
-
-    const [executionDetailsLoading, executionDetailsResponse, executionDetailsError, reloadExecutionDetails] = useAsync(
-        () => getLastExecutionByAppArtifactId(artifactId, appId),
-        [artifactId, appId],
-        !isSecurityScanV2Enabled,
-    )
-
-    const severityCount: SeverityCount = isSecurityScanV2Enabled
-        ? getSeverityCountFromSummary(scanResultResponse?.result.imageScan.vulnerability?.summary.severities)
-        : executionDetailsResponse?.result.severityCount ?? { critical: 0, high: 0, medium: 0, low: 0, unknown: 0 }
-
-    const totalCount = getTotalSeverityCount(severityCount)
-
-    return {
-        scanDetailsLoading: scanResultLoading || executionDetailsLoading,
-        scanResultResponse,
-        executionDetailsResponse,
-        scanDetailsError: scanResultError || executionDetailsError,
-        reloadScanDetails: isSecurityScanV2Enabled ? reloadScanResult : reloadExecutionDetails,
-        severityCount,
-        totalCount,
-    }
-}
diff --git a/src/components/app/details/cIDetails/types.tsx b/src/components/app/details/cIDetails/types.tsx
index 05c5af4216..331df51611 100644
--- a/src/components/app/details/cIDetails/types.tsx
+++ b/src/components/app/details/cIDetails/types.tsx
@@ -13,15 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-    ApiResponseResultType,
-    FetchIdDataStatus,
-    History,
-    ResponseType,
-    useScrollable,
-} from '@devtron-labs/devtron-fe-common-lib'
-import { getLastExecutionByAppArtifactId } from '@Services/service'
-import { UseGetAppSecurityDetailsProps, UseGetAppSecurityDetailsReturnType } from '../appDetails/appDetails.type'
+import { FetchIdDataStatus, History, useScrollable } from '@devtron-labs/devtron-fe-common-lib'
 
 export interface CIPipeline {
     name: string
@@ -70,17 +62,3 @@ export interface SecurityTabType {
     status: string
     appIdFromParent?: string
 }
-
-export interface UseGetCISecurityDetailsProps
-    extends Pick<UseGetAppSecurityDetailsProps, 'appId' | 'isSecurityScanV2Enabled'> {
-    artifactId: number
-}
-
-export interface UseGetCISecurityDetailsReturnType
-    extends Pick<
-        UseGetAppSecurityDetailsReturnType,
-        'scanDetailsLoading' | 'scanDetailsError' | 'reloadScanDetails' | 'severityCount' | 'totalCount'
-    > {
-    scanResultResponse: ResponseType<ApiResponseResultType>
-    executionDetailsResponse: Awaited<ReturnType<typeof getLastExecutionByAppArtifactId>>
-}
diff --git a/src/components/app/details/triggerView/Constants.ts b/src/components/app/details/triggerView/Constants.ts
index 23323d8cf2..5bd2c16a21 100644
--- a/src/components/app/details/triggerView/Constants.ts
+++ b/src/components/app/details/triggerView/Constants.ts
@@ -47,6 +47,8 @@ export const IGNORE_CACHE_INFO = {
     IgnoreCache: {
         title: 'Ignore Cache',
         infoText: 'Ignoring cache will lead to longer build time.',
+        infoTooltipContent:
+            'Ignores existing Docker layer caches. A new cache will be generated and stored for future pipeline runs.',
     },
 }
 export const BRANCH_REGEX_MODAL_MESSAGING = {
diff --git a/src/components/app/details/triggerView/TriggerView.tsx b/src/components/app/details/triggerView/TriggerView.tsx
index 1929fafd54..59aa1a1a8d 100644
--- a/src/components/app/details/triggerView/TriggerView.tsx
+++ b/src/components/app/details/triggerView/TriggerView.tsx
@@ -765,7 +765,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
                 if (cdNodeId == node.id && node.type === nodeType) {
                     if (node.type === 'CD') {
                         // TODO: Potential bug since removed, data was from api which is now in cdmaterials data.userApprovalConfig ?? workflow.approvalConfiguredIdsMap[cdNodeId]
-                        node.userApprovalConfig = workflow.approvalConfiguredIdsMap[cdNodeId]
+                        node.approvalConfigData = workflow.approvalConfiguredIdsMap[cdNodeId]
                     }
                 }
                 return node
@@ -814,7 +814,7 @@ class TriggerView extends Component<TriggerViewProps, TriggerViewState> {
         const workflows = [...this.state.workflows].map((workflow) => {
             const nodes = workflow.nodes.map((node) => {
                 if (node.type === 'CD' && +node.id == cdNodeId) {
-                    node.userApprovalConfig = workflow.approvalConfiguredIdsMap[cdNodeId]
+                    node.approvalConfigData = workflow.approvalConfiguredIdsMap[cdNodeId]
                 }
                 return node
             })
diff --git a/src/components/app/details/triggerView/__mocks__/workflow.mock.ts b/src/components/app/details/triggerView/__mocks__/workflow.mock.ts
index db2bffb3de..00037b9e3e 100644
--- a/src/components/app/details/triggerView/__mocks__/workflow.mock.ts
+++ b/src/components/app/details/triggerView/__mocks__/workflow.mock.ts
@@ -591,7 +591,6 @@ export const workflowsTrigger = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
                 status: DEFAULT_STATUS,
                 description: 'test',
                 triggerType: 'Auto',
@@ -685,7 +684,7 @@ export const workflowsTrigger = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -717,7 +716,7 @@ export const workflowsTrigger = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -814,7 +813,7 @@ export const workflowsCreate = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -908,7 +907,7 @@ export const workflowsCreate = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -940,7 +939,7 @@ export const workflowsCreate = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1062,7 +1061,7 @@ export const workflowsTriggerPrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: ['POSTCD-79'],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -1229,7 +1228,7 @@ export const workflowsTriggerPrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1261,7 +1260,7 @@ export const workflowsTriggerPrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1358,7 +1357,7 @@ export const workflowsCreatePrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -1452,7 +1451,7 @@ export const workflowsCreatePrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1484,7 +1483,7 @@ export const workflowsCreatePrePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1840,7 +1839,7 @@ export const workflowsTriggerPreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1958,7 +1957,7 @@ export const workflowsTriggerPreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1990,7 +1989,7 @@ export const workflowsTriggerPreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2087,7 +2086,7 @@ export const workflowsCreatePreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2181,7 +2180,7 @@ export const workflowsCreatePreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2213,7 +2212,7 @@ export const workflowsCreatePreCDResp = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2310,7 +2309,7 @@ export const workflowsCreatePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2404,7 +2403,7 @@ export const workflowsCreatePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2436,7 +2435,7 @@ export const workflowsCreatePostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2533,7 +2532,7 @@ export const workflowsTriggerPostCD = [
                 parentPipelineType: undefined,
                 downstreams: ['POSTCD-79'],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2676,7 +2675,7 @@ export const workflowsTriggerPostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2708,7 +2707,7 @@ export const workflowsTriggerPostCD = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
diff --git a/src/components/app/details/triggerView/__mocks__/workflow.sequential.mock.ts b/src/components/app/details/triggerView/__mocks__/workflow.sequential.mock.ts
index d055692efa..52b4e33524 100644
--- a/src/components/app/details/triggerView/__mocks__/workflow.sequential.mock.ts
+++ b/src/components/app/details/triggerView/__mocks__/workflow.sequential.mock.ts
@@ -162,7 +162,6 @@ export const workflowsTriggerWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -205,7 +204,7 @@ export const workflowsTriggerWithSequential = [
                 title: 'amit-16-jan-replica-amit-16-jan-erferf2',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -288,7 +287,7 @@ export const workflowsTriggerWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -320,7 +319,7 @@ export const workflowsTriggerWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -363,7 +362,7 @@ export const workflowsTriggerWithSequential = [
                 title: 'amit-16-jan-replica-dep2',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -449,7 +448,7 @@ export const workflowsCreateWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -492,7 +491,7 @@ export const workflowsCreateWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -575,7 +574,7 @@ export const workflowsCreateWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -607,7 +606,7 @@ export const workflowsCreateWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -650,7 +649,7 @@ export const workflowsCreateWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -761,7 +760,7 @@ export const workflowsTriggerPrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: ['POSTCD-79'],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -877,7 +876,7 @@ export const workflowsTriggerPrePostCDWithSequential = [
                 title: 'amit-16-jan-replica-amit-16-jan-erferf2',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -960,7 +959,7 @@ export const workflowsTriggerPrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -992,7 +991,7 @@ export const workflowsTriggerPrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1035,7 +1034,7 @@ export const workflowsTriggerPrePostCDWithSequential = [
                 title: 'amit-16-jan-replica-dep2',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -1146,7 +1145,7 @@ export const workflowsTriggerPrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: ['POSTCD-79'],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -1335,7 +1334,7 @@ export const workflowsTriggerPrePostCDWithPrePostSequential = [
                 title: 'amit-16-jan-replica-amit-16-jan-erferf2',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -1443,7 +1442,7 @@ export const workflowsTriggerPrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1475,7 +1474,7 @@ export const workflowsTriggerPrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1591,7 +1590,7 @@ export const workflowsTriggerPrePostCDWithPrePostSequential = [
                 title: 'amit-16-jan-replica-dep2',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -1702,7 +1701,7 @@ export const workflowsCreatePrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -1744,7 +1743,7 @@ export const workflowsCreatePrePostCDWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 width: 240,
                 x: 0,
@@ -1828,7 +1827,7 @@ export const workflowsCreatePrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1860,7 +1859,7 @@ export const workflowsCreatePrePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -1903,7 +1902,7 @@ export const workflowsCreatePrePostCDWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -1989,7 +1988,7 @@ export const workflowsCreatePrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Auto',
@@ -2032,7 +2031,7 @@ export const workflowsCreatePrePostCDWithPrePostSequential = [
                 title: 'Pre-deploy, Deploy, Post-deploy',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -2115,7 +2114,7 @@ export const workflowsCreatePrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2147,7 +2146,7 @@ export const workflowsCreatePrePostCDWithPrePostSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2190,7 +2189,7 @@ export const workflowsCreatePrePostCDWithPrePostSequential = [
                 title: 'Pre-deploy, Deploy, Post-deploy',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -2449,7 +2448,7 @@ export const workflowsTriggerPreCDRespWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2516,7 +2515,7 @@ export const workflowsTriggerPreCDRespWithSequential = [
                 title: 'amit-16-jan-replica-amit-16-jan-erferf2',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -2599,7 +2598,7 @@ export const workflowsTriggerPreCDRespWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2631,7 +2630,7 @@ export const workflowsTriggerPreCDRespWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2674,7 +2673,7 @@ export const workflowsTriggerPreCDRespWithSequential = [
                 title: 'amit-16-jan-replica-dep2',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -2760,7 +2759,7 @@ export const workflowsCreatePreCDRespWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2803,7 +2802,7 @@ export const workflowsCreatePreCDRespWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -2887,7 +2886,7 @@ export const workflowsCreatePreCDRespWithSequential = [
                 downstreams: [],
                 description: 'test',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
                 environmentName: 'dev2',
@@ -2918,7 +2917,7 @@ export const workflowsCreatePreCDRespWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -2961,7 +2960,7 @@ export const workflowsCreatePreCDRespWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -3047,7 +3046,7 @@ export const workflowsCreatePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -3090,7 +3089,7 @@ export const workflowsCreatePostCDWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -3173,7 +3172,7 @@ export const workflowsCreatePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -3205,7 +3204,7 @@ export const workflowsCreatePostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -3248,7 +3247,7 @@ export const workflowsCreatePostCDWithSequential = [
                 title: 'Deploy',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 240,
                 x: 0,
                 y: 0,
@@ -3332,7 +3331,7 @@ export const workflowsTriggerPostCDWithSequential = [
                 deploymentAppDeleteRequest: undefined,
                 downstreams: ['POSTCD-79'],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -3426,7 +3425,7 @@ export const workflowsTriggerPostCDWithSequential = [
                 title: 'amit-16-jan-replica-amit-16-jan-erferf2',
                 triggerType: 'Auto',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
@@ -3509,7 +3508,7 @@ export const workflowsTriggerPostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 description: 'test',
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
@@ -3542,7 +3541,7 @@ export const workflowsTriggerPostCDWithSequential = [
                 parentPipelineType: undefined,
                 downstreams: [],
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 status: DEFAULT_STATUS,
                 triggerType: 'Manual',
                 environmentName: 'dev4',
@@ -3584,7 +3583,7 @@ export const workflowsTriggerPostCDWithSequential = [
                 title: 'amit-16-jan-replica-dep2',
                 triggerType: 'Manual',
                 type: 'CD',
-                userApprovalConfig: undefined,
+
                 width: 200,
                 x: 0,
                 y: 0,
diff --git a/src/components/app/details/triggerView/cdMaterial.tsx b/src/components/app/details/triggerView/cdMaterial.tsx
index a4ede9c1a6..6e417d6374 100644
--- a/src/components/app/details/triggerView/cdMaterial.tsx
+++ b/src/components/app/details/triggerView/cdMaterial.tsx
@@ -67,21 +67,22 @@ import {
     CDMaterialSidebarType,
     CDMaterialResponseType,
     CD_MATERIAL_SIDEBAR_TABS,
-    getIsManualApprovalConfigured,
-    useUserEmail,
     ToastManager,
     ToastVariantType,
     EnvResourceType,
     abortPreviousRequests,
-    AppDetailsPayload,
-    ResponseType,
-    ApiResponseResultType,
     CommonNodeAttr,
+    getIsApprovalPolicyConfigured,
+    ApprovalRuntimeStateType,
     GetPolicyConsequencesProps,
     PolicyConsequencesDTO,
     PipelineStageBlockInfo,
     RuntimePluginVariables,
     uploadCDPipelineFile,
+    Button,
+    ComponentSizeType,
+    ButtonStyleType,
+    AnimatedDeployButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import {
@@ -102,10 +103,10 @@ import { ReactComponent as InfoIcon } from '../../../../assets/icons/info-filled
 import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
 import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
 import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
-import { ReactComponent as PlayIC } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as PlayIC } from '@Icons/ic-play-outline.svg'
 
 import noArtifact from '../../../../assets/img/no-artifact@2x.png'
-import { getCTAClass, importComponentFromFELibrary, useAppContext } from '../../../common'
+import { importComponentFromFELibrary, useAppContext } from '../../../common'
 import { CDButtonLabelMap, TriggerViewContext } from './config'
 import { triggerCDNode } from '../../service'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
@@ -140,12 +141,6 @@ const MaintenanceWindowInfoBar = importComponentFromFELibrary('MaintenanceWindow
 const DeploymentWindowConfirmationDialog = importComponentFromFELibrary('DeploymentWindowConfirmationDialog')
 const RuntimeParamTabs = importComponentFromFELibrary('RuntimeParamTabs', null, 'function')
 const RuntimeParameters = importComponentFromFELibrary('RuntimeParameters', null, 'function')
-const getIsImageApproverFromUserApprovalMetaData: (
-    email: string,
-    userApprovalMetadata: UserApprovalMetadataType,
-) => boolean = importComponentFromFELibrary('getIsImageApproverFromUserApprovalMetaData', () => false, 'function')
-const getSecurityScan: ({ appId, installedAppId }: AppDetailsPayload) => Promise<ResponseType<ApiResponseResultType>> =
-    importComponentFromFELibrary('getSecurityScan', null, 'function')
 const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const AllowedWithWarningTippy = importComponentFromFELibrary('AllowedWithWarningTippy')
 const MissingPluginBlockState = importComponentFromFELibrary('MissingPluginBlockState', null, 'function')
@@ -207,7 +202,6 @@ const CDMaterial = ({
     const { currentAppName } = useAppContext()
 
     const appName = selectedAppName || currentAppName
-    const { email } = useUserEmail()
 
     const searchImageTag = searchParams.search
 
@@ -270,7 +264,7 @@ const CDMaterial = ({
             getPolicyConsequences ? getPolicyConsequences({ appId, envId }) : null,
         ])
 
-        if (getIsTriggerBlocked(response[2].cd)) {
+        if (getPolicyConsequences && getIsTriggerBlocked(response[2].cd)) {
             return [null, null, response[2]]
         }
         return response
@@ -307,8 +301,9 @@ const CDMaterial = ({
     const resourceFilters = materialsResult?.resourceFilters ?? []
     const hideImageTaggingHardDelete = materialsResult?.hideImageTaggingHardDelete ?? false
     const requestedUserId = materialsResult?.requestedUserId ?? ''
-    const userApprovalConfig = materialsResult?.userApprovalConfig
-    const isApprovalConfigured = getIsManualApprovalConfigured(userApprovalConfig)
+    const isApprovalConfigured = getIsApprovalPolicyConfigured(
+        materialsResult?.deploymentApprovalInfo?.approvalConfigData,
+    )
     const canApproverDeploy = materialsResult?.canApproverDeploy ?? false
     const showConfigDiffView = searchParams.mode === 'review-config' && searchParams.deploy
 
@@ -630,8 +625,7 @@ const CDMaterial = ({
     const getIsApprovalRequester = (userApprovalMetadata?: UserApprovalMetadataType) =>
         userApprovalMetadata?.requestedUserData && userApprovalMetadata.requestedUserData.userId === requestedUserId
 
-    const getIsImageApprover = (userApprovalMetadata?: UserApprovalMetadataType): boolean =>
-        getIsImageApproverFromUserApprovalMetaData(email, userApprovalMetadata)
+    const getIsImageApprover = (userApprovalMetadata?: UserApprovalMetadataType): boolean => userApprovalMetadata?.hasCurrentUserApproved
 
     // NOTE: Pure
     const getApprovedImageClass = (disableSelection: boolean, isApprovalConfigured: boolean) => {
@@ -654,7 +648,10 @@ const CDMaterial = ({
         const consumedImage = []
         const approvedImages = []
         material.forEach((mat) => {
-            if (!mat.userApprovalMetadata || mat.userApprovalMetadata.approvalRuntimeState !== 2) {
+            if (
+                !mat.userApprovalMetadata ||
+                mat.userApprovalMetadata.approvalRuntimeState !== ApprovalRuntimeStateType.approved
+            ) {
                 mat.isSelected = false
                 consumedImage.push(mat)
             } else {
@@ -1464,7 +1461,6 @@ const CDMaterial = ({
                                 isScanned={mat.scanned}
                                 isScanEnabled={mat.scanEnabled}
                                 SecurityModalSidebar={SecurityModalSidebar}
-                                getSecurityScan={getSecurityScan}
                             />
                         )}
                 </ImageCard>
@@ -1652,17 +1648,19 @@ const CDMaterial = ({
         if (deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED) {
             return null
         } else if (stageType !== STAGE_TYPE.CD) {
-            return (
-                <PlayIC
-                    className={`icon-dim-16 mr-8 dc__no-svg-fill dc__stroke-width-2 ${deploymentWindowMetadata.userActionState === ACTION_STATE.PARTIAL ? 'scn-9' : 'scn-0'}`}
-                />
-            )
+            return <PlayIC />
         }
-        return (
-            <DeployIcon
-                className={`icon-dim-16 dc__no-svg-fill mr-8 ${deploymentWindowMetadata.userActionState === ACTION_STATE.PARTIAL ? 'scn-9' : ''}`}
-            />
-        )
+        return <DeployIcon />
+    }
+
+    const getDeployButtonStyle = (userActionState: string): ButtonStyleType => {
+        if (userActionState === ACTION_STATE.BLOCKED) {
+            return ButtonStyleType.negative
+        }
+        if (userActionState === ACTION_STATE.PARTIAL) {
+            return ButtonStyleType.warning
+        }
+        return ButtonStyleType.default
     }
 
     const onClickDeploy = (e, disableDeployButton: boolean) => {
@@ -1685,30 +1683,32 @@ const CDMaterial = ({
         }
     }
 
-    const renderTriggerDeployButton = (disableDeployButton: boolean) => (
-        <button
-            data-testid="cd-trigger-deploy-button"
-            disabled={deploymentLoading || isSaveLoading}
-            className={`${getCTAClass(deploymentWindowMetadata.userActionState, disableDeployButton)} h-36`}
-            onClick={(e) => onClickDeploy(e, disableDeployButton)}
-            type="button"
-        >
-            {deploymentLoading || isSaveLoading ? (
-                <Progressing />
-            ) : (
-                <>
-                    {getDeployButtonIcon()}
-                    {deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED
-                        ? 'Deployment is blocked'
-                        : CDButtonLabelMap[stageType]}
-                    {isVirtualEnvironment && ' to isolated env'}
-                    {deploymentWindowMetadata.userActionState === ACTION_STATE.BLOCKED && (
-                        <InfoOutline className="icon-dim-16 ml-5" />
-                    )}
-                </>
-            )}
-        </button>
-    )
+    const renderTriggerDeployButton = (disableDeployButton: boolean) => {
+        const userActionState: ACTION_STATE = deploymentWindowMetadata.userActionState
+        if (
+            stageType === DeploymentNodeType.CD &&
+            !disableDeployButton &&
+            (userActionState ? userActionState === ACTION_STATE.ALLOWED : true) &&
+            !(deploymentLoading || isSaveLoading)
+        ) {
+            return <AnimatedDeployButton onButtonClick={onClickDeploy} isVirtualEnvironment={isVirtualEnvironment} />
+        }
+        return (
+            <Button
+                dataTestId="cd-trigger-deploy-button"
+                startIcon={getDeployButtonIcon()}
+                isLoading={deploymentLoading || isSaveLoading}
+                text={`${
+                    userActionState === ACTION_STATE.BLOCKED ? 'Deployment is blocked' : CDButtonLabelMap[stageType]
+                }${isVirtualEnvironment ? ' to isolated env' : ''}`}
+                endIcon={userActionState === ACTION_STATE.BLOCKED ? <InfoOutline /> : null}
+                onClick={(e) => onClickDeploy(e, disableDeployButton)}
+                size={ComponentSizeType.large}
+                style={getDeployButtonStyle(userActionState)}
+                disabled={disableDeployButton}
+            />
+        )
+    }
 
     const renderTriggerModalCTA = (isApprovalConfigured: boolean) => {
         const disableDeployButton =
diff --git a/src/components/app/details/triggerView/ciMaterial.tsx b/src/components/app/details/triggerView/ciMaterial.tsx
index bf2fccc0b7..965c8f7b47 100644
--- a/src/components/app/details/triggerView/ciMaterial.tsx
+++ b/src/components/app/details/triggerView/ciMaterial.tsx
@@ -29,13 +29,14 @@ import {
     SourceTypeMap,
     CommonNodeAttr,
     noop,
+    Tooltip,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { CIMaterialProps, CIMaterialState, RegexValueType } from './types'
-import { ReactComponent as Play } from '../../../../assets/icons/misc/arrow-solid-right.svg'
+import { ReactComponent as ICInfoOutline } from '@Icons/ic-info-outline-grey.svg'
+import { ReactComponent as Play } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Info } from '../../../../assets/icons/info-filled.svg'
 import { ReactComponent as Storage } from '../../../../assets/icons/ic-storage.svg'
 import { ReactComponent as OpenInNew } from '../../../../assets/icons/ic-open-in-new.svg'
-import { ReactComponent as RunIcon } from '../../../../assets/icons/ic-play-media.svg'
 import { getCIPipelineURL, importComponentFromFELibrary } from '../../../common'
 import { DOCUMENTATION, SOURCE_NOT_CONFIGURED, DEFAULT_ROUTE_PROMPT_MESSAGE } from '../../../../config'
 import { getModuleConfigured } from '../appDetails/appDetails.service'
@@ -168,8 +169,18 @@ class CIMaterial extends Component<CIMaterialProps, CIMaterialState> {
                 data-testid="set-clone-directory"
             >
                 <div className="mr-5">
-                    <div className="fs-13 fw-6">{IGNORE_CACHE_INFO.IgnoreCache.title}</div>
-                    <div className="fs-12 fw-4">{IGNORE_CACHE_INFO.IgnoreCache.infoText}</div>
+                    <div className="fs-13 fw-6 lh-20">{IGNORE_CACHE_INFO.IgnoreCache.title}</div>
+
+                    <div className='flex dc__gap-4'>
+                        <span className="fs-12 fw-4 lh-16">{IGNORE_CACHE_INFO.IgnoreCache.infoText}</span>
+
+                        <Tooltip content={IGNORE_CACHE_INFO.IgnoreCache.infoTooltipContent} alwaysShowTippyOnHover>
+                            {/* NOTE: need to wrap react elements with html elements when passing as children to tooltip */}
+                            <div>
+                                <ICInfoOutline className='dc__no-shrink icon-dim-16 flex scn-6' />
+                            </div>
+                        </Tooltip>
+                    </div>
                 </div>
             </Checkbox>
         )
@@ -224,7 +235,7 @@ class CIMaterial extends Component<CIMaterialProps, CIMaterialState> {
             isLoading={this.props.isLoading}
             onClick={isCTAActionable ? this.handleStartBuildAction : noop}
             size={ComponentSizeType.large}
-            startIcon={this.props.isJobView || this.props.isJobCI ? <RunIcon /> : <Play />}
+            startIcon={<Play />}
         />
     )
 
diff --git a/src/components/app/details/triggerView/types.ts b/src/components/app/details/triggerView/types.ts
index cb0b322125..bc61101f78 100644
--- a/src/components/app/details/triggerView/types.ts
+++ b/src/components/app/details/triggerView/types.ts
@@ -20,7 +20,6 @@ import {
     CDModalTabType,
     CommonNodeAttr,
     DeploymentNodeType,
-    UserApprovalConfigType,
     CIBuildConfigType,
     ReleaseTag,
     ImageComment,
@@ -131,7 +130,6 @@ export type CDMaterialProps = {
     appId?: number
     pipelineId?: number
     isFromBulkCD?: boolean
-    userApprovalConfig?: UserApprovalConfigType
     requestedUserId?: number
     triggerType?: string
     isVirtualEnvironment?: boolean
@@ -246,7 +244,7 @@ interface InputMaterials {
 }
 
 export interface TriggerCDNodeProps
-    extends RouteComponentProps<{ appId: string }>,
+    extends RouteComponentProps<{ appId: string; envId: string }>,
         Partial<Pick<CommonNodeAttr, 'isTriggerBlocked'>> {
     x: number
     y: number
@@ -286,7 +284,7 @@ export interface TriggerCDNodeState {
 }
 
 export interface TriggerPrePostCDNodeProps
-    extends RouteComponentProps<{ appId: string }>,
+    extends RouteComponentProps<{ appId: string; envId: string }>,
         Partial<Pick<CommonNodeAttr, 'isTriggerBlocked'>> {
     x: number
     y: number
@@ -310,6 +308,7 @@ export interface TriggerPrePostCDNodeProps
     isGitOpsRepoNotConfigured?: boolean
     deploymentAppType: DeploymentAppTypes
     isDeploymentBlocked?: boolean
+    appId: number
 }
 export interface TriggerPrePostCDNodeState {
     showGitOpsRepoConfiguredWarning: boolean
@@ -321,7 +320,7 @@ export interface TriggerEdgeType {
 }
 
 export interface WorkflowProps
-    extends RouteComponentProps<{ appId: string }>,
+    extends RouteComponentProps<{ appId: string; envId: string }>,
         Pick<WorkflowType, 'artifactPromotionMetadata'> {
     id: string
     name: string
diff --git a/src/components/app/details/triggerView/workflow.service.ts b/src/components/app/details/triggerView/workflow.service.ts
index 6018d2757a..1a7ec97f12 100644
--- a/src/components/app/details/triggerView/workflow.service.ts
+++ b/src/components/app/details/triggerView/workflow.service.ts
@@ -21,9 +21,10 @@ import {
     PipelineType,
     DownstreamNodesEnvironmentsType,
     WorkflowType,
-    getIsManualApprovalConfigured,
     CiPipeline,
     CdPipeline,
+    getIsApprovalPolicyConfigured,
+    sanitizeApprovalConfigData,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { getCDConfig, getCIConfig, getWorkflowList, getWorkflowViewList } from '../../../../services/service'
 import {
@@ -285,14 +286,15 @@ export function processWorkflow(
                             cdPipeline.parentPipelineId = branch.parentId
                             cdPipeline.parentPipelineType = branch.parentType
                         }
+                        cdPipeline.approvalConfigData = sanitizeApprovalConfigData(cdPipeline.approvalConfigData)
 
                         const cdNode = cdPipelineToNode(cdPipeline, dimensions, branch.parentId, branch.isLast)
                         wf.nodes.push(cdNode)
 
-                        if (getIsManualApprovalConfigured(cdPipeline.userApprovalConfig)) {
+                        if (getIsApprovalPolicyConfigured(cdPipeline.approvalConfigData)) {
                             wf.approvalConfiguredIdsMap = {
                                 ...wf.approvalConfiguredIdsMap,
-                                [cdPipeline.id]: cdPipeline.userApprovalConfig,
+                                [cdPipeline.id]: cdPipeline.approvalConfigData,
                             }
                         }
                     }
@@ -578,6 +580,7 @@ function ciPipelineToNode(
             showPluginWarning: false,
             isTriggerBlocked: false,
             pluginBlockState: getParsedPluginPolicyConsequenceData(),
+            approvalConfigData: null,
         }
     })
     const trigger = ciPipeline.isManual ? TriggerType.Manual.toLocaleLowerCase() : TriggerType.Auto.toLocaleLowerCase()
@@ -618,6 +621,7 @@ function ciPipelineToNode(
         showPluginWarning: ciPipeline.isOffendingMandatoryPlugin,
         isTriggerBlocked: ciPipeline.isCITriggerBlocked,
         pluginBlockState: getParsedPluginPolicyConsequenceData(ciPipeline.ciBlockState),
+        approvalConfigData: null,
     }
 
     return ciNode
@@ -695,6 +699,7 @@ function cdPipelineToNode(
             isTriggerBlocked: preDeployStageFallback?.isTriggerBlocked,
             triggerBlockedInfo: preDeployStageFallback?.triggerBlockedInfo,
             pluginBlockState: getParsedPluginPolicyConsequenceData(cdPipeline.preDeployStage?.pluginBlockState),
+            approvalConfigData: null,
         }
         stageIndex++
     }
@@ -736,7 +741,7 @@ function cdPipelineToNode(
         parentPipelineId: String(cdPipeline.parentPipelineId),
         parentPipelineType: cdPipeline.parentPipelineType,
         deploymentAppDeleteRequest: cdPipeline.deploymentAppDeleteRequest,
-        userApprovalConfig: cdPipeline.userApprovalConfig,
+        approvalConfigData: sanitizeApprovalConfigData(cdPipeline.approvalConfigData),
         isVirtualEnvironment: cdPipeline.isVirtualEnvironment,
         deploymentAppType: cdPipeline.deploymentAppType,
         helmPackageName: cdPipeline?.helmPackageName || '',
@@ -792,6 +797,7 @@ function cdPipelineToNode(
             triggerBlockedInfo:
                 cdPipeline.postDeployStage?.triggerBlockedInfo || cdPipeline.postStage?.triggerBlockedInfo,
             pluginBlockState: getParsedPluginPolicyConsequenceData(cdPipeline.postDeployStage?.pluginBlockState),
+            approvalConfigData: null,
         }
     }
 
diff --git a/src/components/app/details/triggerView/workflow/Workflow.tsx b/src/components/app/details/triggerView/workflow/Workflow.tsx
index 0e9f4b8892..e71a5203c4 100644
--- a/src/components/app/details/triggerView/workflow/Workflow.tsx
+++ b/src/components/app/details/triggerView/workflow/Workflow.tsx
@@ -296,6 +296,7 @@ export class Workflow extends Component<WorkflowProps> {
                 index={this.props.index}
                 isGitOpsRepoNotConfigured={node.isGitOpsRepoNotConfigured}
                 deploymentAppType={node.deploymentAppType}
+                appId={this.props.appId}
                 isDeploymentBlocked={node.isDeploymentBlocked}
                 isTriggerBlocked={node.isTriggerBlocked}
             />
diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx
index 441561b7b0..54c0718ad1 100644
--- a/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx
+++ b/src/components/app/details/triggerView/workflow/nodes/triggerCDNode.tsx
@@ -23,21 +23,22 @@ import {
     triggerStatus,
     statusColor,
     statusIcon,
+    URLS,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { TriggerCDNodeProps, TriggerCDNodeState } from '../../types'
 import { ReactComponent as Rollback } from '../../../../../../assets/icons/ic-rollback.svg'
-import { URLS, DEFAULT_STATUS } from '../../../../../../config'
+import { DEFAULT_STATUS } from '../../../../../../config'
 import { TriggerViewContext } from '../../config'
 import { envDescriptionTippy, getNodeSideHeadingAndClass } from './workflow.utils'
 import NoGitOpsRepoConfiguredWarning, {
     ReloadNoGitOpsRepoConfiguredModal,
 } from '../../../../../workflowEditor/NoGitOpsRepoConfiguredWarning'
 import { gitOpsRepoNotConfiguredWithEnforcedEnv } from '../../../../../gitOps/constants'
+import { getAppGroupDeploymentHistoryLink } from '@Components/ApplicationGroup/AppGroup.utils'
 
 export class TriggerCDNode extends Component<TriggerCDNodeProps, TriggerCDNodeState> {
     constructor(props) {
         super(props)
-        this.redirectToCDDetails = this.redirectToCDDetails.bind(this)
         this.state = {
             showGitOpsRepoConfiguredWarning: false,
             gitopsConflictLoading: false,
@@ -47,17 +48,19 @@ export class TriggerCDNode extends Component<TriggerCDNodeProps, TriggerCDNodeSt
         }
     }
 
-    getCDNodeDetailsURL(): string {
-        return `${this.props.match.url.split('/').slice(0, -1).join('/')}/${URLS.APP_DETAILS}/${
-            this.props.environmentId
-        }`
-    }
-
-    redirectToCDDetails() {
-        if (this.props.fromAppGrouping) {
-            return
-        }
-        this.props.history.push(this.getCDNodeDetailsURL())
+    getCDNodeDetailsURL = (): string => {
+         if (this.props.fromAppGrouping) {
+             return getAppGroupDeploymentHistoryLink(
+                 this.props.appId,
+                 this.props.environmentId,
+                 this.props.id,
+                 this.props.match.params.envId === this.props.environmentId.toString(),
+                 this.props.status,
+             )
+         }
+         return `${this.props.match.url.split('/').slice(0, -1).join('/')}/${URLS.APP_DETAILS}/${
+             this.props.environmentId
+         }`
     }
 
     componentDidUpdate(prevProps: Readonly<TriggerCDNodeProps>, prevState: Readonly<TriggerCDNodeState>): void {
@@ -94,18 +97,16 @@ export class TriggerCDNode extends Component<TriggerCDNodeProps, TriggerCDNodeSt
             >
                 <span className={`dc__cd-trigger-status__icon ${statusIcon[status]}`} />
                 <span>{statusText}</span>
-                {!this.props.fromAppGrouping && (
-                    <>
-                        {statusText && <span className="mr-5 ml-5">/</span>}
-                        <Link
-                            data-testid={`cd-trigger-details-${this.props.environmentName}-link`}
-                            to={url}
-                            className="workflow-node__details-link"
-                        >
-                            Details
-                        </Link>
-                    </>
-                )}
+                <>
+                    {statusText && <span className="mr-5 ml-5">/</span>}
+                    <Link
+                        data-testid={`cd-trigger-details-${this.props.environmentName}-link`}
+                        to={url}
+                        className="workflow-node__details-link"
+                    >
+                        Details
+                    </Link>
+                </>
             </div>
         )
     }
diff --git a/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx b/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx
index d7d82da487..d0293d81ab 100644
--- a/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx
+++ b/src/components/app/details/triggerView/workflow/nodes/triggerPrePostCDNode.tsx
@@ -24,6 +24,7 @@ import { TriggerViewContext } from '../../config'
 import NoGitOpsRepoConfiguredWarning from '../../../../../workflowEditor/NoGitOpsRepoConfiguredWarning'
 import { gitOpsRepoNotConfiguredWithEnforcedEnv } from '../../../../../gitOps/constants'
 import { getNodeSideHeadingAndClass } from './workflow.utils'
+import { getAppGroupDeploymentHistoryLink } from '../../../../../ApplicationGroup/AppGroup.utils'
 
 export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, TriggerPrePostCDNodeState> {
     gitOpsRepoWarningCondition =
@@ -31,22 +32,28 @@ export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, T
 
     constructor(props) {
         super(props)
-        this.redirectToCDDetails = this.redirectToCDDetails.bind(this)
         this.state = {
             showGitOpsRepoConfiguredWarning: false,
         }
     }
 
     getCDDetailsURL(): string {
+        if (this.props.fromAppGrouping) {
+            return getAppGroupDeploymentHistoryLink(
+                this.props.appId,
+                this.props.environmentId,
+                this.props.id,
+                this.props.match.params.envId === this.props.environmentId.toString(),
+                '',
+                this.props.type
+            )
+        }
         return `${this.props.match.url.replace(URLS.APP_TRIGGER, URLS.APP_CD_DETAILS)}/${this.props.environmentId}/${
             this.props.id
         }?type=${this.props.type}`
     }
 
-    redirectToCDDetails(e) {
-        if (this.props.fromAppGrouping) {
-            return
-        }
+    redirectToCDDetails = () => {
         this.props.history.push(this.getCDDetailsURL())
     }
 
@@ -58,14 +65,12 @@ export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, T
                     <span data-testid={`${this.props.title}-trigger-status-${this.props.index}`}>
                         {this.props.status}
                     </span>
-                    {!this.props.fromAppGrouping && (
-                        <>
-                            {this.props.status && <span className="mr-5 ml-5">/</span>}
-                            <Link onClick={stopPropagation} to={url} className="workflow-node__details-link">
-                                Details
-                            </Link>
-                        </>
-                    )}
+                    <>
+                        {this.props.status && <span className="mr-5 ml-5">/</span>}
+                        <Link onClick={stopPropagation} to={url} className="workflow-node__details-link">
+                            Details
+                        </Link>
+                    </>
                 </div>
             )
         }
@@ -111,7 +116,7 @@ export class TriggerPrePostCDNode extends Component<TriggerPrePostCDNodeProps, T
                                 className={isClickable ? 'workflow-node cursor' : 'workflow-node'}
                                 onClick={(e) => {
                                     if (isClickable) {
-                                        this.redirectToCDDetails(e)
+                                        this.redirectToCDDetails()
                                     }
                                 }}
                             >
diff --git a/src/components/app/list/DevtronAppListContainer.tsx b/src/components/app/list/DevtronAppListContainer.tsx
index 69b9e58153..24864f4cee 100644
--- a/src/components/app/list/DevtronAppListContainer.tsx
+++ b/src/components/app/list/DevtronAppListContainer.tsx
@@ -35,6 +35,7 @@ import {
 import ContentCard from '@Components/common/ContentCard/ContentCard'
 import { HELM_GUIDED_CONTENT_CARDS_TEXTS } from '@Components/onboardingGuide/OnboardingGuide.constants'
 import { CardLinkIconPlacement } from '@Components/common/ContentCard/ContentCard.types'
+import { ReactComponent as PlayMedia } from '@Icons/ic-play-outline.svg'
 import { appListModal, getDevtronAppListPayload } from './appList.modal'
 import { App, DevtronAppExpandedState, DevtronAppListProps } from './types'
 import { DEVTRON_NODE_DEPLOY_VIDEO, Routes, URLS } from '../../../config'
@@ -42,7 +43,6 @@ import { getAppList } from '../service'
 import './list.scss'
 import { AppListSortableKeys } from '../list-new/AppListType'
 import NodeAppThumbnail from '../../../assets/img/node-app-thumbnail.png'
-import { ReactComponent as PlayMedia } from '../../../assets/icons/ic-play-media.svg'
 import DeployCICD from '../../../assets/img/guide-onboard.png'
 import { appListLoadingArray, APP_LIST_HEADERS } from '../list-new/Constants'
 import { ReactComponent as ArrowRight } from '../../../assets/icons/ic-arrow-right.svg'
diff --git a/src/components/app/types.ts b/src/components/app/types.ts
index a192e077c3..03379a10ff 100644
--- a/src/components/app/types.ts
+++ b/src/components/app/types.ts
@@ -106,7 +106,7 @@ export interface AppDetails extends CDModalProps {
     appId: number
     deploymentAppType?: DeploymentAppTypes
     externalCi?: boolean
-    userApprovalConfig?: string
+    isApprovalPolicyApplicable?: boolean
     ciArtifactId?: number
     parentArtifactId?: number
     deprecated?: boolean
@@ -137,6 +137,8 @@ export interface AppDetails extends CDModalProps {
     imageTag?: string
     isPipelineTriggered?: boolean
     releaseMode: ReleaseMode
+    trafficSwitched?: boolean
+    pcoId?: number
 }
 
 export interface LabelTag {
diff --git a/src/components/cdPipeline/BuildCD.tsx b/src/components/cdPipeline/BuildCD.tsx
index 8075e7cb06..157bc89f25 100644
--- a/src/components/cdPipeline/BuildCD.tsx
+++ b/src/components/cdPipeline/BuildCD.tsx
@@ -25,11 +25,9 @@ import {
     TippyTheme,
     YAMLStringify,
     CodeEditor,
-    UserApprovalConfigType,
     Environment,
     ReleaseMode,
     SelectPicker,
-    CDFormType,
     ToastVariantType,
     ToastManager,
     ComponentSizeType,
@@ -60,22 +58,11 @@ import { getGitOpsRepoConfig } from '../../services/service'
 import { ReactComponent as ICInfo } from '../../assets/icons/ic-info-filled.svg'
 
 import PullImageDigestToggle from './PullImageDigestToggle'
-import { PipelineFormDataErrorType } from '@Components/workflowEditor/types'
 import { EnvironmentWithSelectPickerType } from '@Components/CIPipelineN/types'
 import { BuildCDProps } from './types'
 
 const VirtualEnvSelectionInfoText = importComponentFromFELibrary('VirtualEnvSelectionInfoText')
 const HelmManifestPush = importComponentFromFELibrary('HelmManifestPush')
-const getBuildCDManualApproval = importComponentFromFELibrary('getBuildCDManualApproval', null, 'function')
-const validateUserApprovalConfig: (
-    userApprovalConfig: UserApprovalConfigType,
-) => PipelineFormDataErrorType['userApprovalConfig'] = importComponentFromFELibrary(
-    'validateUserApprovalConfig',
-    () => ({
-        isValid: true,
-    }),
-    'function',
-)
 const MigrateHelmReleaseBody = importComponentFromFELibrary('MigrateHelmReleaseBody', null, 'function')
 
 export default function BuildCD({
@@ -600,17 +587,6 @@ export default function BuildCD({
         setFormData(_form)
     }
 
-    const handleUpdateUserApprovalConfig = (updatedUserApprovalConfig: CDFormType['userApprovalConfig']) => {
-        const _form = structuredClone(formData)
-        const _formDataErrorObj = structuredClone(formDataErrorObj)
-
-        _form.userApprovalConfig = updatedUserApprovalConfig
-        _formDataErrorObj.userApprovalConfig = validateUserApprovalConfig(updatedUserApprovalConfig)
-
-        setFormData(_form)
-        setFormDataErrorObj(_formDataErrorObj)
-    }
-
     const renderDeploymentAppType = () => {
         return (
             <div className="cd-pipeline__deployment-type mt-16">
@@ -799,13 +775,6 @@ export default function BuildCD({
                     !noGitOpsModuleInstalledAndConfigured &&
                     renderDeploymentAppType()}
                 {isAdvanced ? renderAdvancedDeploymentStrategy() : renderBasicDeploymentStrategy()}
-                {isAdvanced &&
-                    getBuildCDManualApproval &&
-                    getBuildCDManualApproval(
-                        formData.userApprovalConfig,
-                        formDataErrorObj.userApprovalConfig,
-                        handleUpdateUserApprovalConfig,
-                    )}
                 {isAdvanced && (
                     <>
                         <CustomImageTags
diff --git a/src/components/cdPipeline/CDPipeline.tsx b/src/components/cdPipeline/CDPipeline.tsx
index 5178b21cac..e421084672 100644
--- a/src/components/cdPipeline/CDPipeline.tsx
+++ b/src/components/cdPipeline/CDPipeline.tsx
@@ -34,9 +34,6 @@ import {
     DEFAULT_PLUGIN_DATA_STORE,
     getPluginsDetail,
     getUpdatedPluginStore,
-    sanitizeUserApprovalConfig,
-    UserApprovalConfigType,
-    UserApprovalConfigPayloadType,
     Environment,
     PipelineFormType,
     ReleaseMode,
@@ -116,8 +113,6 @@ const getDeploymentWindowProfileMetaData = importComponentFromFELibrary(
     null,
     'function',
 )
-const getUserApprovalConfigPayload: (userApprovalConfig: UserApprovalConfigType) => UserApprovalConfigPayloadType =
-    importComponentFromFELibrary('getUserApprovalConfigPayload', null, 'function')
 const ReleaseModeTabs = importComponentFromFELibrary('ReleaseModeTabs', null, 'function')
 
 export default function CDPipeline({
@@ -190,8 +185,6 @@ export default function CDPipeline({
             triggerType: TriggerType.Auto,
             steps: [],
         },
-        // Utilizing the null checks to get default value
-        userApprovalConfig: sanitizeUserApprovalConfig(null),
         isClusterCdActive: false,
         deploymentAppCreated: false,
         clusterName: '',
@@ -249,9 +242,6 @@ export default function CDPipeline({
             steps: [],
             isValid: true,
         },
-        userApprovalConfig: {
-            isValid: true,
-        },
     })
     const [inputVariablesListFromPrevStep, setInputVariablesListFromPrevStep] = useState<{
         preBuildStage: Map<string, VariableType>[]
@@ -585,7 +575,6 @@ export default function CDPipeline({
         form.deploymentAppType = pipelineConfigFromRes.deploymentAppType || ''
         form.deploymentAppCreated = pipelineConfigFromRes.deploymentAppCreated || false
         form.triggerType = pipelineConfigFromRes.triggerType || TriggerType.Auto
-        form.userApprovalConfig = sanitizeUserApprovalConfig(pipelineConfigFromRes.userApprovalConfig)
         form.allowedDeploymentTypes = env.allowedDeploymentTypes || []
         form.customTag = pipelineConfigFromRes.customTag
         form.enableCustomTag = pipelineConfigFromRes.enableCustomTag
@@ -701,11 +690,6 @@ export default function CDPipeline({
             deploymentAppName: formData.deploymentAppName,
             releaseMode: formData.releaseMode,
             deploymentAppCreated: formData.deploymentAppCreated,
-            ...(getUserApprovalConfigPayload
-                ? {
-                      userApprovalConfig: getUserApprovalConfigPayload(formData.userApprovalConfig),
-                  }
-                : {}),
             triggerType: formData.triggerType,
             environmentName: formData.environmentName,
             preStageConfigMapSecretNames: _preStageConfigMapSecretNames,
@@ -868,7 +852,6 @@ export default function CDPipeline({
             _formDataErrorObj[BuildStageVariable.Build].isValid =
                 _formDataErrorObj.name.isValid &&
                 _formDataErrorObj.envNameError.isValid &&
-                _formDataErrorObj.userApprovalConfig?.isValid &&
                 isReposAndContainerRegistoryValid
         } else {
             const stepsLength = _formData[stageName].steps.length
@@ -964,18 +947,6 @@ export default function CDPipeline({
             return
         }
 
-        const { isValid: isUserApprovalConfigValid = true, message: userApprovalConfigErrorMessage } =
-            formDataErrorObj.userApprovalConfig ?? {}
-
-        if (!isUserApprovalConfigValid) {
-            setLoadingData(false)
-            ToastManager.showToast({
-                variant: ToastVariantType.error,
-                description: userApprovalConfigErrorMessage,
-            })
-            return
-        }
-
         const request = responseCode()
 
         const _form = { ...formData }
diff --git a/src/components/cdPipeline/cdPipeline.types.ts b/src/components/cdPipeline/cdPipeline.types.ts
index 9de1acf25f..8163ae8941 100644
--- a/src/components/cdPipeline/cdPipeline.types.ts
+++ b/src/components/cdPipeline/cdPipeline.types.ts
@@ -18,7 +18,6 @@ import {
     DeploymentStrategy,
     Environment,
     SavedDeploymentStrategy,
-    UserApprovalConfigType,
     VariableType,
 } from '@devtron-labs/devtron-fe-common-lib'
 
@@ -70,7 +69,6 @@ export interface PipelineConfig {
     isClusterCdActive: boolean
     parentPipelineId: number
     parentPipelineType: string
-    userApprovalConfig?: UserApprovalConfigType
     isDigestEnforcedForEnv?: boolean
 }
 
diff --git a/src/components/ciPipeline/ciPipeline.service.ts b/src/components/ciPipeline/ciPipeline.service.ts
index 07949e02de..d78d60809a 100644
--- a/src/components/ciPipeline/ciPipeline.service.ts
+++ b/src/components/ciPipeline/ciPipeline.service.ts
@@ -23,12 +23,14 @@ import {
     PluginType,
     RefVariableType,
     PipelineBuildStageType,
+    getModuleConfigured,
+    ModuleNameMap,
     VariableTypeFormat,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes, SourceTypeMap, TriggerType, ViewType } from '../../config'
 import { getSourceConfig, getWebhookDataMetaConfig } from '../../services/service'
 import { CiPipelineSourceTypeBaseOptions } from '../CIPipelineN/ciPipeline.utils'
-import { PatchAction } from './types'
+import { CIPipelineBuildType, PatchAction } from './types'
 import { safeTrim } from '../../util/Util'
 import { ChangeCIPayloadType } from '../workflowEditor/types'
 
@@ -54,18 +56,19 @@ export function getCIPipelineNameSuggestion(appId: string | number): Promise<any
 export function getInitData(
     appId: string | number,
     includeWebhookData: boolean = false,
-    preFillName: boolean = true,
+    isJobCard: boolean
 ): Promise<any> {
     return Promise.all([
         getCIPipelineNameSuggestion(appId),
-        getPipelineMetaConfiguration(appId.toString(), includeWebhookData, true),
-    ]).then(([pipelineNameRes, pipelineMetaConfig]) => {
+        getPipelineMetaConfiguration(appId.toString(), includeWebhookData, true, isJobCard),
+        getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
+    ]).then(([pipelineNameRes, pipelineMetaConfig, { result: { enabled: isBlobStorageConfigured } }]) => {
         const scanEnabled =
             window._env_ && (window._env_.RECOMMEND_SECURITY_SCANNING || window._env_.FORCE_SECURITY_SCANNING)
         return {
             result: {
                 form: {
-                    name: preFillName ? pipelineNameRes.result : '',
+                    name: !isJobCard ? pipelineNameRes.result : '',
                     args: [{ key: '', value: '' }],
                     materials: pipelineMetaConfig.result.materials,
                     gitHost: pipelineMetaConfig.result.gitHost,
@@ -79,9 +82,11 @@ export function getInitData(
                     postBuildStage: emptyStepsData(),
                     scanEnabled,
                     ciPipelineEditable: true,
+                    workflowCacheConfig: pipelineMetaConfig.result.workflowCacheConfig ?? null
                 },
                 loadingData: false,
                 isAdvanced: false,
+                isBlobStorageConfigured,
             },
         }
     })
@@ -92,8 +97,11 @@ export function getCIPipeline(appId: string, ciPipelineId: string): Promise<any>
     return get(URL)
 }
 
-function getPipelineBaseMetaConfiguration(appId: string): Promise<any> {
-    return getSourceConfig(appId).then((response) => {
+function getPipelineBaseMetaConfiguration(
+    appId: string,
+    queryParams: Record<'pipelineType', CIPipelineBuildType.CI_BUILD | CIPipelineBuildType.CI_JOB>
+): Promise<any> {
+    return getSourceConfig(appId, queryParams).then((response) => {
         const materials = response?.result?.material?.map((mat) => {
             return {
                 id: 0,
@@ -116,6 +124,7 @@ function getPipelineBaseMetaConfiguration(appId: string): Promise<any> {
                 webhookEvents: undefined,
                 webhookConditionList: undefined,
                 ciPipelineSourceTypeOptions: _baseCiPipelineSourceTypeOptions,
+                workflowCacheConfig: response?.result?.workflowCacheConfig ?? null
             },
         }
     })
@@ -125,8 +134,13 @@ export function getPipelineMetaConfiguration(
     appId: string,
     includeWebhookData: boolean = false,
     isNewPipeline: boolean = true,
+    isJobCard = false,
 ): Promise<any> {
-    return getPipelineBaseMetaConfiguration(appId).then((baseResponse) => {
+    return getPipelineBaseMetaConfiguration(appId, {
+        // NOTE: need to send pipelineType to get corresponding workflowCacheConfig;
+        // this queryParam will be ignored in oss
+        pipelineType: isJobCard ? CIPipelineBuildType.CI_JOB : CIPipelineBuildType.CI_BUILD
+    }).then((baseResponse) => {
         // if webhook data is not to be included, or materials not found, or multigit new pipeline, then return
         const _materials = baseResponse.result.materials || []
         if (!includeWebhookData || _materials.length == 0 || (isNewPipeline && _materials.length > 1)) {
@@ -170,8 +184,12 @@ export function getInitDataWithCIPipeline(
 ): Promise<any> {
     return Promise.all([
         getCIPipeline(appId, ciPipelineId),
-        getPipelineMetaConfiguration(appId, includeWebhookData, false),
-    ]).then(([ciPipelineRes, pipelineMetaConfig]) => {
+        // NOTE: isJobCard parameter does not matter in this case
+        // isJobCard is only relevant to fetch workflowCacheConfig in meta config
+        // by default BE will send global cache config for that pipelineType (JOB or CI_BUILD)
+        getPipelineMetaConfiguration(appId, includeWebhookData, false, false),
+        getModuleConfigured(ModuleNameMap.BLOB_STORAGE),
+    ]).then(([ciPipelineRes, pipelineMetaConfig, { result: { enabled: isBlobStorageConfigured } }]) => {
         const ciPipeline = ciPipelineRes?.result
         const pipelineMetaConfigResult = pipelineMetaConfig?.result
         return parseCIResponse(
@@ -181,6 +199,7 @@ export function getInitDataWithCIPipeline(
             pipelineMetaConfigResult.gitHost,
             pipelineMetaConfigResult.webhookEvents,
             pipelineMetaConfigResult.ciPipelineSourceTypeOptions,
+            isBlobStorageConfigured,
         )
     })
 }
@@ -305,6 +324,9 @@ function createCIPatchRequest(ciPipeline, formData, isExternalCI: boolean, webho
         linkedCount: ciPipeline.linkedCount,
         isExternal: isExternalCI,
         isManual: formData.triggerType == TriggerType.Manual,
+        ...(formData.workflowCacheConfig ? {
+            workflowCacheConfig: formData.workflowCacheConfig,
+        } : {}),
         ciMaterial: formData.materials
             .filter((mat) => mat.isSelected)
             .map((mat) => {
@@ -480,6 +502,7 @@ function parseCIResponse(
     gitHost,
     webhookEvents,
     ciPipelineSourceTypeOptions,
+    isBlobStorageConfigured?: boolean,
 ) {
     if (ciPipeline) {
         if (ciPipeline.beforeDockerBuildScripts) {
@@ -544,10 +567,12 @@ function parseCIResponse(
                     counterX: +ciPipeline.customTag?.counterX || 0,
                 },
                 enableCustomTag: ciPipeline.enableCustomTag,
+                workflowCacheConfig: ciPipeline.workflowCacheConfig ?? null,
             },
             loadingData: false,
             showPreBuild: ciPipeline.beforeDockerBuildScripts?.length > 0,
             showPostBuild: ciPipeline.afterDockerBuildScripts?.length > 0,
+            isBlobStorageConfigured: isBlobStorageConfigured ?? false,
         }
     }
 }
diff --git a/src/components/cluster/cluster.util.ts b/src/components/cluster/cluster.util.ts
index 83592decac..1580d912cf 100644
--- a/src/components/cluster/cluster.util.ts
+++ b/src/components/cluster/cluster.util.ts
@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
+import { NodeTaintType } from '@devtron-labs/devtron-fe-common-lib'
 import { OptionType } from '../app/types'
-import { NodeTaintType } from '../ClusterNodes/types'
 import {
     ClusterComponentType,
     ClusterComponentStatusType,
diff --git a/src/components/common/ExportToCsv/ExportConfiguration.tsx b/src/components/common/ExportToCsv/ExportConfiguration.tsx
new file mode 100644
index 0000000000..ba4eec0d80
--- /dev/null
+++ b/src/components/common/ExportToCsv/ExportConfiguration.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 { ChangeEvent, useEffect } from 'react'
+import { Checkbox, CHECKBOX_VALUE, Tooltip } from '@devtron-labs/devtron-fe-common-lib'
+import { ExportConfigurationProps } from './types'
+import { getDefaultValueFromConfiguration } from './utils'
+
+export const ExportConfiguration = <ConfigValueType extends string>({
+    selectedConfig,
+    setSelectedConfig,
+    configuration,
+}: ExportConfigurationProps<ConfigValueType>) => {
+    const { title, options } = configuration
+
+    const handleConfigSelectionChange = (e: ChangeEvent<HTMLInputElement>) => {
+        setSelectedConfig((prev) => ({
+            ...prev,
+            [e.target.name]: e.target.checked,
+        }))
+    }
+
+    useEffect(
+        () => () => {
+            setSelectedConfig(getDefaultValueFromConfiguration(configuration))
+        },
+        [],
+    )
+
+    return (
+        <div className="fs-13 lh-20 flexbox-col dc__gap-8 flex-grow-1">
+            <h3 className="fw-6 cn-9 m-0 fs-13 lh-20 dc__truncate px-8">{title}</h3>
+            <div>
+                {options.map(({ label, value, description }) => (
+                    <label
+                        className={`m-0 py-6 px-8 flex left dc__gap-8 ${description ? 'top' : ''} dc__hover-n50 br-4 cursor`}
+                        key={value}
+                        htmlFor={value}
+                    >
+                        <Checkbox
+                            value={CHECKBOX_VALUE.CHECKED}
+                            name={value}
+                            dataTestId={`check-${label}`}
+                            id={value}
+                            isChecked={selectedConfig[value] ?? false}
+                            onChange={handleConfigSelectionChange}
+                            rootClassName="m-0 w-20 h-20"
+                        />
+                        <p className="m-0 flexbox-col">
+                            <Tooltip content={label}>
+                                <span className="fs-13 fw-4 lh-20 cn-9 dc__truncate">{label}</span>
+                            </Tooltip>
+                            {description && (
+                                <Tooltip content={description}>
+                                    <span className="fs-12 fw-4 lh-18 cn-7 dc__ellipsis-right__2nd-line">
+                                        {description}
+                                    </span>
+                                </Tooltip>
+                            )}
+                        </p>
+                    </label>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/src/components/common/ExportToCsv/ExportToCsv.tsx b/src/components/common/ExportToCsv/ExportToCsv.tsx
index 2d2a8b617e..a3c76456bc 100644
--- a/src/components/common/ExportToCsv/ExportToCsv.tsx
+++ b/src/components/common/ExportToCsv/ExportToCsv.tsx
@@ -17,26 +17,36 @@
 import { useEffect, useRef, useState } from 'react'
 import { CSVLink } from 'react-csv'
 import {
-    ConditionalWrap,
     VisibleModal,
     DetailsProgressing,
+    Button,
+    ButtonVariantType,
+    ComponentSizeType,
+    ButtonStyleType,
+    logExceptionToSentry,
+    GenericSectionErrorState,
 } from '@devtron-labs/devtron-fe-common-lib'
 import moment from 'moment'
-import Tippy from '@tippyjs/react'
-import { CSV_HEADERS, ExportToCsvProps, FILE_NAMES } from './constants'
-import { ReactComponent as ExportIcon } from '../../../assets/icons/ic-arrow-line-down.svg'
-import { ReactComponent as Success } from '../../../assets/icons/ic-success.svg'
-import { ReactComponent as Error } from '../../../assets/icons/ic-error-exclamation.svg'
+import { ReactComponent as ExportIcon } from '@Icons/ic-arrow-line-down.svg'
+import { ReactComponent as Success } from '@Icons/ic-success.svg'
+import { ReactComponent as ICDownload } from '@Icons/ic-download.svg'
+import { CSV_HEADERS, FILE_NAMES } from './constants'
 import { Moment12HourExportFormat } from '../../../config'
-import './exportToCsv.scss'
+import { ExportToCsvProps } from './types'
+import { ExportConfiguration } from './ExportConfiguration'
+import { getDefaultValueFromConfiguration } from './utils'
 
-export default function ExportToCsv({
+const ExportToCsv = <ConfigValueType extends string = string>({
     apiPromise,
     fileName,
-    className = '',
     disabled = false,
     showOnlyIcon = false,
-}: ExportToCsvProps) {
+    configuration,
+}: ExportToCsvProps<ConfigValueType>) => {
+    const [selectedConfig, setSelectedConfig] = useState<Record<ConfigValueType, boolean>>(
+        getDefaultValueFromConfiguration(configuration),
+    )
+    const [showConfiguration, setShowConfiguration] = useState(false)
     const [exportingData, setExportingData] = useState(false)
     const [showExportingModal, setShowExportingModal] = useState(false)
     const [errorExportingData, setErrorExportingData] = useState(false)
@@ -44,6 +54,12 @@ export default function ExportToCsv({
     const [requestCancelled, setRequestCancelled] = useState(false)
     const csvRef = useRef(null)
 
+    const isConfigurationAvailable = !!configuration && showConfiguration
+
+    const initiateDownload = () => {
+        csvRef.current.link.click()
+    }
+
     useEffect(() => {
         if (Array.isArray(dataToExport) && csvRef?.current && !requestCancelled) {
             initiateDownload()
@@ -51,8 +67,8 @@ export default function ExportToCsv({
     }, [dataToExport])
 
     const generateDataToExport = async () => {
-        if (disabled) {
-            return
+        if (showConfiguration) {
+            setShowConfiguration(false)
         }
 
         if (requestCancelled || errorExportingData) {
@@ -62,14 +78,16 @@ export default function ExportToCsv({
 
         if (!exportingData) {
             const fileNameKey = Object.keys(FILE_NAMES).find((key) => FILE_NAMES[key] === fileName)
+            // eslint-disable-next-line no-console
             console.info(`Started exporting data at ${moment().format('HH:mm:ss')}.`)
             setExportingData(true)
             setShowExportingModal(true)
 
             try {
-                const response = await apiPromise()
+                const response = await apiPromise(selectedConfig)
                 setDataToExport(response)
 
+                // eslint-disable-next-line no-console
                 console.info(
                     `Completed data export of ${response.length} ${fileNameKey || ''} at ${moment().format(
                         'HH:mm:ss',
@@ -78,119 +96,168 @@ export default function ExportToCsv({
             } catch (err) {
                 setErrorExportingData(true)
 
+                // eslint-disable-next-line no-console
                 console.error(
-                    `Data export failed at ${moment().format('HH:mm:ss')}. Reason - ${err['message'] || err['name']}`,
+                    `Data export failed at ${moment().format('HH:mm:ss')}. Reason - ${err.message || err.name}`,
                 )
+                logExceptionToSentry(err)
             } finally {
                 setExportingData(false)
             }
         }
     }
 
+    const handleExportToCsvClick = async () => {
+        if (configuration) {
+            setShowConfiguration(true)
+        } else {
+            await generateDataToExport()
+        }
+    }
+
     const handleCancelAction = () => {
+        setShowConfiguration(false)
         setRequestCancelled(true)
         setShowExportingModal(false)
     }
 
     const renderModalCTA = () => {
+        if (isConfigurationAvailable) {
+            return (
+                <>
+                    <Button
+                        variant={ButtonVariantType.secondary}
+                        size={ComponentSizeType.medium}
+                        style={ButtonStyleType.neutral}
+                        onClick={handleCancelAction}
+                        text="Cancel"
+                        dataTestId="cancel-export-csv-button"
+                    />
+                    <Button
+                        size={ComponentSizeType.medium}
+                        onClick={generateDataToExport}
+                        text="Download"
+                        dataTestId="retry-export-csv-button"
+                        endIcon={<ICDownload />}
+                        disabled={!Object.values(selectedConfig).some((value) => value)}
+                    />
+                </>
+            )
+        }
+
         return (
-            <div className="modal__CTA flex right dc__border-top">
-                <button
-                    type="button"
-                    className="flex cta cancel h-32"
+            <>
+                <Button
+                    variant={ButtonVariantType.secondary}
+                    size={ComponentSizeType.medium}
+                    style={ButtonStyleType.neutral}
                     onClick={handleCancelAction}
-                    data-testid="close-export-csv-button"
-                >
-                    {exportingData ? 'Cancel' : 'Close'}
-                </button>
+                    text={exportingData ? 'Cancel' : 'Close'}
+                    dataTestId="close-export-csv-button"
+                />
                 {!exportingData && errorExportingData && (
-                    <button
-                        type="button"
-                        className="flex cta ml-12 h-32"
+                    <Button
+                        size={ComponentSizeType.medium}
                         onClick={generateDataToExport}
-                        data-testid="retry-export-csv-button"
-                    >
-                        Retry
-                    </button>
+                        text="Retry"
+                        dataTestId="retry-export-csv-button"
+                    />
                 )}
-            </div>
+            </>
         )
     }
 
-    const initiateDownload = () => {
-        csvRef.current.link.click()
-    }
-
     const renderExportStatus = () => {
+        if (isConfigurationAvailable && showConfiguration) {
+            return (
+                <ExportConfiguration
+                    selectedConfig={selectedConfig}
+                    setSelectedConfig={setSelectedConfig}
+                    configuration={configuration}
+                />
+            )
+        }
+
+        if (errorExportingData) {
+            return (
+                <GenericSectionErrorState
+                    title="Unable to export data"
+                    description="Encountered an error while trying to export. Please try again. If error persists then try after
+                        some time."
+                    buttonText=""
+                    subTitle=""
+                />
+            )
+        }
+
+        if (exportingData) {
+            return (
+                <DetailsProgressing size={32} loadingText="Preparing export..." fullHeight>
+                    <span className="fs-13 fw-4">Please do not reload or press the browser back button.</span>
+                </DetailsProgressing>
+            )
+        }
+
         return (
-            <div className="export-status flex">
-                {exportingData && !errorExportingData && (
-                    <DetailsProgressing size={32} loadingText="Preparing export..." fullHeight>
-                        <span className="fs-13 fw-4">Please do not reload or press the browser back button.</span>
-                    </DetailsProgressing>
-                )}
-                {errorExportingData && (
-                    <div className="export-error bcn-0 flex column cn-9 h-100">
-                        <Error className="icon-dim-32" />
-                        <span className="fs-14 fw-6 mt-8">Unable to export data</span>
-                        <span className="fs-13 fw-4 dc__align-center">
-                            Encountered an error while trying to export. Please try again. If error persists then try
-                            after some time.
-                        </span>
-                    </div>
-                )}
-                {!exportingData && !errorExportingData && (
-                    <div className="export-success bcn-0 flex column cn-9 h-100">
-                        <Success className="icon-dim-32" />
-                        <span className="fs-14 fw-6 mt-8">Your export is ready</span>
-                        <span className="fs-13 fw-4"> If download does not start automatically,</span>
-                        <span className="fs-13 fw-4 cb-5 pointer" onClick={initiateDownload}>
-                            click here to download manually.
-                        </span>
-                    </div>
-                )}
+            <div className="export-success bcn-0 flex column cn-9 h-100 lh-20">
+                <Success className="icon-dim-32" />
+                <span className="fs-14 fw-6 mt-8">Your export is ready</span>
+                <span className="fs-13 fw-4"> If download does not start automatically,</span>
+                <Button
+                    text="click here to download manually."
+                    onClick={initiateDownload}
+                    dataTestId="manual-download"
+                    variant={ButtonVariantType.text}
+                    size={ComponentSizeType.medium}
+                />
             </div>
         )
     }
 
     return (
-        <div
-            className={`export-to-csv-button ${showOnlyIcon ? 'w-32' : ''} h-32 ${className}`}
-        >
-            <ConditionalWrap
-                condition={disabled}
-                wrap={(children) => (
-                    <Tippy className="default-tt" arrow={false} placement="top" content="Nothing to export">
-                        {children}
-                    </Tippy>
-                )}
-            >
-                <button
-                    className={`flex cta ghosted flex dc__gap-8 ${showOnlyIcon ? 'w-32 mw-none' : 'w-100'} h-32 ${
-                        disabled ? 'nothing-to-export' : ''
-                    }`}
-                    onClick={generateDataToExport}
-                    data-testid="export-csv-button"
-                >
-                    <ExportIcon className="icon-dim-16" />
-                    {!showOnlyIcon && <span>Export CSV</span>}
-                </button>
-            </ConditionalWrap>
+        <div>
+            <Button
+                {...(showOnlyIcon
+                    ? {
+                          icon: <ExportIcon />,
+                          ariaLabel: 'Export CSV',
+                          showAriaLabelInTippy: false,
+                      }
+                    : {
+                          text: 'Export CSV',
+                          startIcon: <ExportIcon />,
+                      })}
+                onClick={handleExportToCsvClick}
+                size={ComponentSizeType.medium}
+                variant={ButtonVariantType.secondary}
+                dataTestId="export-csv-button"
+                disabled={disabled}
+                showTooltip={disabled}
+                tooltipProps={{
+                    content: 'Nothing to export',
+                }}
+            />
             <CSVLink
                 ref={csvRef}
                 filename={`${fileName}_${moment().format(Moment12HourExportFormat)}.csv`}
                 headers={CSV_HEADERS[fileName] || []}
                 data={dataToExport || []}
             />
-            {showExportingModal && (
+            {(showExportingModal || isConfigurationAvailable) && (
                 <VisibleModal className="export-to-csv-modal" data-testid="export-to-csv-modal">
-                    <div className="modal__body">
-                        <h2 className="cn-9 fw-6 fs-16 m-0 dc__border-bottom">Export to CSV</h2>
-                        {renderExportStatus()}
-                        {renderModalCTA()}
+                    <div className="modal__body mt-40 p-0">
+                        <h2 className="cn-9 fw-6 fs-16 m-0 dc__border-bottom px-20 py-12">Export to CSV</h2>
+                        <div
+                            className={`py-16 flex ${isConfigurationAvailable ? 'top left dc__overflow-auto mxh-350 px-12' : 'px-20'}`}
+                        >
+                            {renderExportStatus()}
+                        </div>
+                        <div className="flex right dc__gap-12 dc__border-top py-16 px-20">{renderModalCTA()}</div>
                     </div>
                 </VisibleModal>
             )}
         </div>
     )
 }
+
+export default ExportToCsv
diff --git a/src/components/common/ExportToCsv/constants.ts b/src/components/common/ExportToCsv/constants.ts
index d8a15ce02e..599862de79 100644
--- a/src/components/common/ExportToCsv/constants.ts
+++ b/src/components/common/ExportToCsv/constants.ts
@@ -25,14 +25,6 @@ export enum FILE_NAMES {
     Jobs = 'Devtron Jobs Data',
 }
 
-export interface ExportToCsvProps {
-    apiPromise: any
-    fileName: FILE_NAMES
-    className?: string
-    disabled?: boolean
-    showOnlyIcon?: boolean
-}
-
 export const APPLIST_EXPORT_HEADERS = [
     { label: 'App Name', key: 'appName' },
     { label: 'App ID', key: 'appId' },
@@ -51,7 +43,12 @@ export const APPLIST_EXPORT_HEADERS = [
 export const USER_EXPORT_HEADERS = [
     { label: 'Email address', key: 'emailId' },
     { label: 'User ID', key: 'userId' },
-    ...(showStatus ? [{ label: 'User status', key: 'status' }] : []),
+    ...(showStatus
+        ? [
+              { label: 'User status', key: 'status' },
+              { label: 'Deleted', key: 'isDeleted' },
+          ]
+        : []),
     { label: 'Last login time', key: 'lastLoginTime' },
     { label: 'Super admin', key: 'superAdmin' },
     { label: 'Group permissions', key: 'group' },
@@ -59,7 +56,14 @@ export const USER_EXPORT_HEADERS = [
     { label: 'Environment', key: 'environment' },
     { label: 'Application', key: 'application' },
     { label: 'Role', key: 'role' },
-    ...(showStatus ? [{ label: 'Permission Status', key: 'permissionStatus' }] : []),
+    ...(showStatus
+        ? [
+              { label: 'Permission Status', key: 'permissionStatus' },
+              { label: 'Added on', key: 'createdOn' },
+              { label: 'Updated on', key: 'updatedOn' },
+              { label: 'Deleted on', key: 'deletedOn' },
+          ]
+        : []),
 ]
 
 export const USER_EXPORT_HEADER_ROW = {
@@ -68,6 +72,7 @@ export const USER_EXPORT_HEADER_ROW = {
     ...(showStatus
         ? {
               status: 'User status',
+              isDeleted: 'Deleted',
           }
         : {}),
     lastLoginTime: 'Last login time',
@@ -80,6 +85,9 @@ export const USER_EXPORT_HEADER_ROW = {
     ...(showStatus
         ? {
               permissionStatus: 'Permission Status',
+              createdOn: 'Added on',
+              updatedOn: 'Updated on',
+              deletedOn: 'Deleted on',
           }
         : {}),
 }
diff --git a/src/components/common/ExportToCsv/exportToCsv.scss b/src/components/common/ExportToCsv/exportToCsv.scss
deleted file mode 100644
index 62ff82d665..0000000000
--- a/src/components/common/ExportToCsv/exportToCsv.scss
+++ /dev/null
@@ -1,61 +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.
- */
-
-.export-to-csv-button {
-    width: 120px;
-
-    .cta.ghosted {
-        padding: 0;
-        border: 1px solid var(--N200);
-
-        &:hover,
-        &:active,
-        &:focus {
-            color: var(--B500);
-            background: white;
-            border: 1px solid var(--B500);
-        }
-
-        &.nothing-to-export {
-            opacity: 0.5;
-            user-select: none;
-            cursor: not-allowed;
-
-            &:hover,
-            &:active,
-            &:focus {
-                border: 1px solid var(--N200);
-            }
-        }
-    }
-}
-
-.export-to-csv-modal {
-    .modal__body {
-        margin-top: 0;
-        padding: 0;
-        border-radius: 0 0 4px 4px;
-
-        h2,
-        .modal__CTA {
-            padding: 16px 20px;
-        }
-
-        .export-status {
-            padding: 24px 20px;
-        }
-    }
-}
diff --git a/src/components/common/ExportToCsv/types.ts b/src/components/common/ExportToCsv/types.ts
new file mode 100644
index 0000000000..13f74b0dd3
--- /dev/null
+++ b/src/components/common/ExportToCsv/types.ts
@@ -0,0 +1,26 @@
+import { FILE_NAMES } from './constants'
+
+export interface ExportToCsvProps<ConfigValueType extends string = string> {
+    apiPromise: (selectedConfig: Record<ConfigValueType, boolean>) => Promise<unknown[]>
+    fileName: FILE_NAMES
+    className?: string
+    disabled?: boolean
+    showOnlyIcon?: boolean
+    /**
+     * Configuration for the export csv
+     */
+    configuration?: {
+        title: string
+        options: {
+            label: string
+            value: ConfigValueType
+            description?: string
+        }[]
+    }
+}
+
+export interface ExportConfigurationProps<ConfigValueType extends string>
+    extends Pick<ExportToCsvProps<ConfigValueType>, 'configuration'> {
+    selectedConfig: Record<ConfigValueType, boolean>
+    setSelectedConfig: React.Dispatch<React.SetStateAction<Record<ConfigValueType, boolean>>>
+}
diff --git a/src/components/common/ExportToCsv/utils.ts b/src/components/common/ExportToCsv/utils.ts
new file mode 100644
index 0000000000..36e26572ed
--- /dev/null
+++ b/src/components/common/ExportToCsv/utils.ts
@@ -0,0 +1,13 @@
+import { ExportConfigurationProps } from './types'
+
+export const getDefaultValueFromConfiguration = <ConfigValueType extends string>(
+    configuration: ExportConfigurationProps<ConfigValueType>['configuration'],
+): ExportConfigurationProps<ConfigValueType>['selectedConfig'] =>
+    configuration?.options.reduce<ExportConfigurationProps<ConfigValueType>['selectedConfig']>(
+        (acc, { value }) => {
+            acc[value] = true
+
+            return acc
+        },
+        {} as ExportConfigurationProps<ConfigValueType>['selectedConfig'],
+    ) ?? ({} as ExportConfigurationProps<ConfigValueType>['selectedConfig'])
diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx
index 037de1e7e9..3e2d38f8be 100644
--- a/src/components/common/helpers/Helpers.tsx
+++ b/src/components/common/helpers/Helpers.tsx
@@ -23,12 +23,12 @@ import {
     useWindowSize,
     APPROVAL_MODAL_TYPE,
     YAMLStringify,
-    ACTION_STATE,
     DEFAULT_SECRET_PLACEHOLDER,
     ApiResourceGroupType,
     PluginDetailServiceParamsType,
     PipelineBuildStageType,
     SeverityCount,
+    useMainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import { Link, PromptProps } from 'react-router-dom'
@@ -44,7 +44,7 @@ import {
 import { getAggregator } from '../../app/details/appDetails/utils'
 import { JUMP_TO_KIND_SHORT_NAMES, SIDEBAR_KEYS } from '../../ResourceBrowser/Constants'
 import { AUTO_SELECT } from '../../ClusterNodes/constants'
-import { PATTERNS, UNSAVED_CHANGES_PROMPT_MESSAGE } from '../../../config/constants'
+import { PATTERNS } from '../../../config/constants'
 import { ReactComponent as GitLab } from '../../../assets/icons/git/gitlab.svg'
 import { ReactComponent as Git } from '../../../assets/icons/git/git.svg'
 import { ReactComponent as GitHub } from '../../../assets/icons/git/github.svg'
@@ -635,19 +635,6 @@ export function getRandomString() {
     return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
 }
 
-export function sortBySelected(selectedArray: any[], availableArray: any[], matchKey: string) {
-    const selectedArrayMap = mapByKey(selectedArray, matchKey)
-
-    const actualSelectedArray = availableArray.filter((item) => selectedArrayMap.has(item[matchKey]))
-
-    const unselectedAvailableArray = availableArray.filter((item) => !selectedArrayMap.has(item[matchKey]))
-
-    return [
-        ...sortObjectArrayAlphabetically(actualSelectedArray, matchKey),
-        ...sortObjectArrayAlphabetically(unselectedAvailableArray, matchKey),
-    ]
-}
-
 export const sortObjectArrayAlphabetically = <T extends unknown>(arr: T[], compareKey: string) => {
     return arr.sort((a, b) => a[compareKey].localeCompare(b[compareKey]))
 }
@@ -1105,8 +1092,6 @@ export const getDeploymentAppType = (
     return allowedDeploymentTypes[0]
 }
 
-
-
 export const getNonEditableChartRepoText = (name: string): string => {
     return `Cannot edit chart repo "${name}". Some charts from this repository are being used by helm apps.`
 }
@@ -1121,10 +1106,11 @@ export const getAPIOptionsWithTriggerTimeout = (options?: APIOptions): APIOption
 }
 
 export const getShowResourceScanModal = (selectedResourceKind: NodeType, isTrivyInstalled: boolean): boolean => {
+    const { isManifestScanningEnabled } = useMainContext()
     const fromWorkloadOrRollout =
         getAppDetailsAggregator(selectedResourceKind) === AggregationKeys.Workloads ||
         selectedResourceKind === NodeType.Rollout
-    return window._env_.ENABLE_RESOURCE_SCAN && isTrivyInstalled && fromWorkloadOrRollout
+    return isManifestScanningEnabled && isTrivyInstalled && fromWorkloadOrRollout
 }
 
 export const getApprovalModalTypeFromURL = (url: string): APPROVAL_MODAL_TYPE => {
@@ -1139,18 +1125,6 @@ export const getApprovalModalTypeFromURL = (url: string): APPROVAL_MODAL_TYPE =>
     return APPROVAL_MODAL_TYPE.CONFIG
 }
 
-export const getCTAClass = (userActionState: string, disableDeployButton?: boolean): string => {
-    let className = 'cta small flex ml-auto'
-    if (disableDeployButton) {
-        className += ' disabled-opacity'
-    } else if (userActionState === ACTION_STATE.BLOCKED) {
-        className += ' danger'
-    } else if (userActionState === ACTION_STATE.PARTIAL) {
-        className += ' warning'
-    }
-    return className
-}
-
 export const getPluginIdsFromBuildStage = (
     stage: PipelineBuildStageType,
 ): PluginDetailServiceParamsType['pluginIds'] => {
@@ -1234,19 +1208,6 @@ export const getParsedBranchValuesForPlugin = (branchName: string): string => {
     return branchName
 }
 
-/**
- * Checks if the provided pathname matches the current path.
- * If the paths do not match, returns a custom message or a default unsaved changes prompt.
- *
- * @param currentPathName - The current path to compare against.
- * @param customMessage - Optional custom message to display when the path does not match.
- * @returns A function that takes an object with a `pathname` property and performs the path match check.
- */
-export const checkIfPathIsMatching =
-    (currentPathName: string, customMessage = ''): PromptProps['message'] =>
-    ({ pathname }: { pathname: string })  =>
-        currentPathName === pathname || customMessage || UNSAVED_CHANGES_PROMPT_MESSAGE
-
 export const getAppFilterLocalStorageKey = (filterParentType: FilterParentType): AppEnvLocalStorageKeyType =>
     filterParentType === FilterParentType.app ? ENV_GROUP_LOCAL_STORAGE_KEY : APP_GROUP_LOCAL_STORAGE_KEY
 
diff --git a/src/components/common/navigation/Navigation.tsx b/src/components/common/navigation/Navigation.tsx
index 2f9d62cf8e..ac6b285b0b 100644
--- a/src/components/common/navigation/Navigation.tsx
+++ b/src/components/common/navigation/Navigation.tsx
@@ -17,7 +17,7 @@
 import React, { Component } from 'react'
 import { NavLink, RouteComponentProps } from 'react-router-dom'
 import ReactGA from 'react-ga4'
-import { URLS as CommonURLS } from '@devtron-labs/devtron-fe-common-lib'
+import { URLS as CommonURLS, MainContext } from '@devtron-labs/devtron-fe-common-lib'
 import {
     ModuleNameMap,
     MODULE_STATUS_POLLING_INTERVAL,
@@ -46,7 +46,6 @@ import { getModuleInfo } from '../../v2/devtronStackManager/DevtronStackManager.
 import { ReactComponent as ResourceWatcherIcon } from '../../../assets/icons/ic-monitoring.svg'
 import { importComponentFromFELibrary } from '../helpers/Helpers'
 import { OrganizationFrame, OrganizationTextLogo } from '../../../Pages/Shared'
-import { MainContext } from './types'
 
 const hideResourceWatcher = !importComponentFromFELibrary('ResourceWatcherRouter')
 const hideSoftwareDistributionHub = !importComponentFromFELibrary('SoftwareDistributionHub', null, 'function')
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index 2e685d4871..fbafb61e16 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -29,6 +29,7 @@ import {
     AppListConstants,
     MODES,
     DEVTRON_BASE_MAIN_ID,
+    MainContext,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Route, Switch, useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import * as Sentry from '@sentry/browser'
@@ -58,7 +59,6 @@ import { AppRouterType } from '../../../services/service.types'
 import { getUserRole } from '../../../Pages/GlobalConfigurations/Authorization/authorization.service'
 import { LOGIN_COUNT, MAX_LOGIN_COUNT } from '../../onboardingGuide/onboarding.utils'
 import { HelmAppListResponse } from '../../app/list-new/AppListType'
-import { MainContext } from './types'
 import { ExternalFluxAppDetailsRoute } from '../../../Pages/App/Details/ExternalFlux'
 
 // Monaco Editor worker dependency
@@ -128,6 +128,7 @@ export default function NavigationRoutes() {
     const [environmentId, setEnvironmentId] = useState(null)
     const contextValue = useMemo(() => ({ environmentId, setEnvironmentId }), [environmentId])
     const [isAirgapped, setIsAirGapped] = useState(false)
+    const [isManifestScanningEnabled, setIsManifestScanningEnabled] = useState<boolean>(false)
 
     const getInit = async (_serverMode: string) => {
         setLoginLoader(true)
@@ -267,20 +268,17 @@ export default function NavigationRoutes() {
         }
     }
 
-    async function getAirGapEnvironmentValue() {
-        if (typeof Storage === 'undefined' || !localStorage.getItem('isAirGapped')) {
-            try {
-                const { result } = await getEnvironmentData()
-                setIsAirGapped(result.isAirGapEnvironment)
-                if (typeof Storage !== 'undefined') {
-                    localStorage.setItem('isAirGapped', result.isAirGapEnvironment)
-                }
-            } catch (err) {
-                setIsAirGapped(false)
+    async function getEnvironmentDataValues() {
+        try {
+            const { result } = await getEnvironmentData()
+            setIsAirGapped(result.isAirGapEnvironment)
+            setIsManifestScanningEnabled(result.isManifestScanningEnabled)
+            if (typeof Storage !== 'undefined') {
+                localStorage.setItem('isAirGapped', result.isAirGapEnvironment)
             }
-        } else {
-            const isAirGap = JSON.parse(localStorage.getItem('isAirGapped'))
-            setIsAirGapped(isAirGap)
+        } catch {
+            setIsAirGapped(false)
+            setIsManifestScanningEnabled(false)
         }
     }
 
@@ -292,7 +290,7 @@ export default function NavigationRoutes() {
         } else {
             getServerMode()
             if (getEnvironmentData) {
-                getAirGapEnvironmentValue()
+                getEnvironmentDataValues()
             }
             getCurrentServerInfo()
         }
@@ -379,6 +377,7 @@ export default function NavigationRoutes() {
                 currentServerInfo,
                 isAirgapped,
                 isSuperAdmin,
+                isManifestScanningEnabled,
             }}
         >
             <main className={_isOnboardingPage ? 'no-nav' : ''} id={DEVTRON_BASE_MAIN_ID}>
@@ -463,7 +462,7 @@ export default function NavigationRoutes() {
                                                       >
                                                           <SoftwareDistributionHubRenderProvider
                                                               renderers={{
-                                                                ReleaseConfigurations: Configurations,
+                                                                  ReleaseConfigurations: Configurations,
                                                               }}
                                                           >
                                                               <SoftwareDistributionHub />
@@ -484,13 +483,13 @@ export default function NavigationRoutes() {
                                             : []),
                                         ...(currentServerInfo.serverInfo?.installationType !== 'enterprise'
                                             ? [
-                                                <Route key={URLS.STACK_MANAGER} path={URLS.STACK_MANAGER}>
-                                                    <DevtronStackManager
-                                                        serverInfo={currentServerInfo.serverInfo}
-                                                        getCurrentServerInfo={getCurrentServerInfo}
-                                                        isSuperAdmin={isSuperAdmin}
-                                                    />
-                                                </Route>
+                                                  <Route key={URLS.STACK_MANAGER} path={URLS.STACK_MANAGER}>
+                                                      <DevtronStackManager
+                                                          serverInfo={currentServerInfo.serverInfo}
+                                                          getCurrentServerInfo={getCurrentServerInfo}
+                                                          isSuperAdmin={isSuperAdmin}
+                                                      />
+                                                  </Route>,
                                               ]
                                             : []),
                                         <Route key={URLS.GETTING_STARTED} exact path={`/${URLS.GETTING_STARTED}`}>
diff --git a/src/components/common/navigation/types.ts b/src/components/common/navigation/types.ts
deleted file mode 100644
index c19f2ec6b4..0000000000
--- a/src/components/common/navigation/types.ts
+++ /dev/null
@@ -1,42 +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.
- */
-
-import { MutableRefObject } from 'react'
-import { SERVER_MODE } from '../../../config'
-import { ServerInfo } from '../../v2/devtronStackManager/DevtronStackManager.type'
-
-export interface MainContext {
-    serverMode: SERVER_MODE
-    setServerMode: (serverMode: SERVER_MODE) => void
-    isHelpGettingStartedClicked: boolean
-    setPageOverflowEnabled: (isPageOverflowEnabled: boolean) => void
-    showCloseButtonAfterGettingStartedClicked: () => void
-    loginCount: number
-    setLoginCount: (loginCount: number) => void
-    showGettingStartedCard: boolean
-    setShowGettingStartedCard: (showGettingStartedCard: boolean) => void
-    isGettingStartedClicked: boolean
-    setGettingStartedClicked: (isGettingStartedClicked: boolean) => void
-    moduleInInstallingState: string
-    setModuleInInstallingState: (moduleInInstallingState: string) => void
-    installedModuleMap: MutableRefObject<Record<string, boolean>>
-    currentServerInfo: {
-        serverInfo: ServerInfo
-        fetchingServerInfo: boolean
-    }
-    isAirgapped: boolean
-    isSuperAdmin: boolean
-}
diff --git a/src/components/externalArgoApps/ExternalArgoAppDetail.tsx b/src/components/externalArgoApps/ExternalArgoAppDetail.tsx
index 0ddedda407..069e033cd9 100644
--- a/src/components/externalArgoApps/ExternalArgoAppDetail.tsx
+++ b/src/components/externalArgoApps/ExternalArgoAppDetail.tsx
@@ -34,6 +34,7 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
     const location = useLocation()
     const history = useHistory()
     const [isLoading, setIsLoading] = useState(true)
+    const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(false)
     const [errorResponseCode, setErrorResponseCode] = useState(undefined)
 
     let initTimer = null
@@ -70,6 +71,7 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
 
     const _getAndSetAppDetail = async () => {
         isAPICallInProgress = true
+        setIsReloadResourceTreeInProgress(true)
         getArgoAppDetail(appName, clusterId, namespace)
             .then((appDetailResponse) => {
                 const genericAppDetail: AppDetails = {
@@ -78,13 +80,15 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
                 }
                 IndexStore.publishAppDetails(genericAppDetail, AppType.EXTERNAL_ARGO_APP)
                 setErrorResponseCode(undefined)
-                setIsLoading(false)
             })
             .catch((errors: ServerErrors) => {
                 showError(errors)
                 setErrorResponseCode(errors.code)
+            })
+            .finally(() => {
                 setIsLoading(false)
                 isAPICallInProgress = false
+                setIsReloadResourceTreeInProgress(false)
             })
     }
 
@@ -109,6 +113,8 @@ const ExternalArgoAppDetail = ({ appName, clusterId, isExternalApp, namespace }:
             loadingDetails={false}
             _init={_init}
             loadingResourceTree={false}
+            handleReloadResourceTree={_getAndSetAppDetail}
+            isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
         />
     )
 }
diff --git a/src/components/globalConfigurations/GlobalConfiguration.tsx b/src/components/globalConfigurations/GlobalConfiguration.tsx
index 956c9cc267..92ac48b621 100644
--- a/src/components/globalConfigurations/GlobalConfiguration.tsx
+++ b/src/components/globalConfigurations/GlobalConfiguration.tsx
@@ -66,6 +66,7 @@ const PluginsPolicyV1 = importComponentFromFELibrary('PluginsPolicyV1')
 const PluginsPolicy = importComponentFromFELibrary('PluginsPolicy', null, 'function')
 const FilterConditions = importComponentFromFELibrary('FilterConditions')
 const LockDeploymentConfiguration = importComponentFromFELibrary('LockDeploymentConfiguration', null, 'function')
+const ApprovalPolicy = importComponentFromFELibrary('ApprovalPolicy', null, 'function')
 const CatalogFramework = importComponentFromFELibrary('CatalogFramework')
 const PullImageDigest = importComponentFromFELibrary('PullImageDigest')
 const DeploymentWindow = importComponentFromFELibrary('DeploymentWindowComponent')
@@ -460,6 +461,15 @@ const NavItem = ({ serverMode }) => {
                                     <div className="flexbox flex-justify">Deployment Window</div>
                                 </NavLink>
                             )}
+                            {ApprovalPolicy && (
+                                <NavLink
+                                    to={URLS.GLOBAL_CONFIG_APPROVAL_POLICY}
+                                    key={URLS.GLOBAL_CONFIG_APPROVAL_POLICY}
+                                    activeClassName="active-route"
+                                >
+                                    <div className="flexbox flex-justify">Approval Policy</div>
+                                </NavLink>
+                            )}
                             {window._env_.FEATURE_IMAGE_PROMOTION_ENABLE && ImagePromotion && (
                                 <NavLink
                                     to={URLS.GLOBAL_CONFIG_IMAGE_PROMOTION}
@@ -708,6 +718,11 @@ const Body = ({ getHostURLConfig, checkList, serverMode, handleChecklistUpdate,
                         <DeploymentWindow isSuperAdmin={isSuperAdmin} />
                     </Route>
                 ),
+                ApprovalPolicy && (
+                    <Route key={URLS.GLOBAL_CONFIG_APPROVAL_POLICY} path={URLS.GLOBAL_CONFIG_APPROVAL_POLICY}>
+                        <ApprovalPolicy />
+                    </Route>
+                ),
                 ImagePromotion && (
                     <Route key={URLS.GLOBAL_CONFIG_IMAGE_PROMOTION} path={URLS.GLOBAL_CONFIG_IMAGE_PROMOTION}>
                         <ImagePromotion isSuperAdmin={isSuperAdmin} />
diff --git a/src/components/material/MaterialList.tsx b/src/components/material/MaterialList.tsx
index 1f95b59038..320d149877 100644
--- a/src/components/material/MaterialList.tsx
+++ b/src/components/material/MaterialList.tsx
@@ -28,9 +28,9 @@ import { AppConfigStatus, ViewType, DOCUMENTATION, DEVTRON_NODE_DEPLOY_VIDEO } f
 import { CreateMaterial } from './CreateMaterial'
 import { UpdateMaterial } from './UpdateMaterial'
 import { MaterialListProps, MaterialListState } from './material.types'
-import { ReactComponent as GitHub } from '../../assets/icons/ic-sample-app.svg'
-import { ReactComponent as PlayMedia } from '../../assets/icons/ic-play-media.svg'
-import { ReactComponent as Folder } from '../../assets/icons/ic-folder-filled.svg'
+import { ReactComponent as GitHub } from '@Icons/ic-sample-app.svg'
+import { ReactComponent as PlayMedia } from '@Icons/ic-play-outline.svg'
+import { ReactComponent as Folder } from '@Icons/ic-folder-filled.svg'
 import './material.scss'
 
 class MaterialList extends Component<MaterialListProps, MaterialListState> {
@@ -181,7 +181,7 @@ class MaterialList extends Component<MaterialListProps, MaterialListState> {
                             className="flex left dc__link"
                             href={DEVTRON_NODE_DEPLOY_VIDEO}
                         >
-                            <PlayMedia className="icon-dim-16 mr-4" />
+                            <PlayMedia className="icon-dim-16 scb-5 mr-4" />
                             Watch how to configure sample application
                         </a>
                     </div>
diff --git a/src/components/project/service.ts b/src/components/project/service.ts
index 13cb70d4d5..46d303e6ca 100644
--- a/src/components/project/service.ts
+++ b/src/components/project/service.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { get, post, trash } from '@devtron-labs/devtron-fe-common-lib'
+import { get, post, stringComparatorBySortOrder, trash } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../config'
 
 export function createProject(project) {
@@ -31,10 +31,12 @@ export function getProjectList() {
     return get(URL).then((response) => ({
         code: response.code,
         result: response.result
-            ? response.result.map((project) => ({
-                  ...project,
-                  isCollapsed: true,
-              }))
+            ? response.result
+                  .map((project) => ({
+                      ...project,
+                      isCollapsed: true,
+                  }))
+                  .sort((a, b) => stringComparatorBySortOrder(a.name, b.name))
             : [],
     }))
 }
diff --git a/src/components/security/SecurityScansTab/SecurityScansTab.tsx b/src/components/security/SecurityScansTab/SecurityScansTab.tsx
index ee10dc150b..76892a3f0c 100644
--- a/src/components/security/SecurityScansTab/SecurityScansTab.tsx
+++ b/src/components/security/SecurityScansTab/SecurityScansTab.tsx
@@ -67,13 +67,9 @@ export const SecurityScansTab = () => {
         updateSearchParams,
     } = urlFilters
 
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && SecurityModalSidebar
-
-    const { scanDetailsLoading, scanDetailsResponse, scanDetailsError } = useGetAppSecurityDetails({
-        appId: scanDetails.uniqueId.appId,
-        envId: scanDetails.uniqueId.envId,
-        imageScanDeployInfoId: scanDetails.uniqueId.imageScanDeployInfoId,
-        isSecurityScanV2Enabled,
+    const { scanResultLoading, scanResultResponse, scanResultError } = useGetAppSecurityDetails({
+        appId: scanDetails.appId,
+        envId: scanDetails.envId,
     })
 
     const payload: ScanListPayloadType = {
@@ -133,6 +129,8 @@ export const SecurityScansTab = () => {
         [filterConfig],
     )
 
+    const isLoading = scanListLoading || getIsRequestAborted(scanListError)
+
     const updateSeverityFilters = (selectedOptions: SelectPickerOptionType[]) => {
         updateSearchParams({ severity: selectedOptions.map((severityOption) => String(severityOption.value)) })
     }
@@ -175,16 +173,12 @@ export const SecurityScansTab = () => {
     const handleOpenScanDetailsModal = (event: React.MouseEvent, scan: SecurityScanType) => {
         event.stopPropagation()
         setScanDetails({
-            name: scan.name,
-            uniqueId: {
-                imageScanDeployInfoId: scan.imageScanDeployInfoId,
-                appId: scan.appId,
-                envId: scan.envId,
-            },
+            appId: scan.appId,
+            envId: scan.envId,
         })
     }
 
-    if (!scanListLoading && scanListError && !getIsRequestAborted(scanListError)) {
+    if (!isLoading && scanListError) {
         return (
             <div className="flexbox-col flex-grow-1 dc__content-center">
                 <ErrorScreenManager code={scanListError.code} reload={reloadScansList} />
@@ -192,7 +186,7 @@ export const SecurityScansTab = () => {
         )
     }
 
-    const isScanListEmpty = !scanListLoading && !securityScansResult?.result.securityScans.length
+    const isScanListEmpty = !isLoading && !securityScansResult?.result.securityScans.length
 
     if (isScanListEmpty && !areFiltersActive) {
         return (
@@ -253,7 +247,7 @@ export const SecurityScansTab = () => {
                         name="search-type__select-picker"
                         size={ComponentSizeType.large}
                         onChange={updateSearchType}
-                        isDisabled={scanListLoading}
+                        isDisabled={isLoading}
                     />
                 </div>
                 <SearchBar
@@ -261,7 +255,7 @@ export const SecurityScansTab = () => {
                     initialSearchText={searchKey}
                     inputProps={{
                         placeholder: `Search ${getSearchLabelFromValue(searchType)}`,
-                        disabled: scanListLoading,
+                        disabled: isLoading,
                     }}
                     handleEnter={handleSearch}
                     size={ComponentSizeType.large}
@@ -316,7 +310,7 @@ export const SecurityScansTab = () => {
     )
 
     const renderScanList = () => {
-        if (scanListLoading || getIsRequestAborted(scanListError)) {
+        if (isLoading) {
             const arrayLoading = Array.from(Array(3)).map((index) => index)
             return (
                 <div>
@@ -374,16 +368,14 @@ export const SecurityScansTab = () => {
     }
 
     const renderScanDetailsModal = () => {
-        if (scanDetails.uniqueId.appId) {
+        if (scanDetails.appId && scanDetails.envId) {
             return (
                 <SecurityModal
                     handleModalClose={handleCloseScanDetailsModal}
                     Sidebar={SecurityModalSidebar}
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
-                    isHelmApp={false}
-                    isLoading={scanDetailsLoading}
-                    error={scanDetailsError}
-                    responseData={scanDetailsResponse?.result}
+                    isLoading={scanResultLoading}
+                    error={scanResultError}
+                    responseData={scanResultResponse?.result}
                 />
             )
         }
diff --git a/src/components/security/SecurityScansTab/constants.tsx b/src/components/security/SecurityScansTab/constants.tsx
index 4a0ce27082..aa0cae292a 100644
--- a/src/components/security/SecurityScansTab/constants.tsx
+++ b/src/components/security/SecurityScansTab/constants.tsx
@@ -1,12 +1,8 @@
 import { ScanDetailsType, SearchType, SearchTypeOptionType } from './types'
 
 export const INITIAL_SCAN_DETAILS: ScanDetailsType = {
-    name: '',
-    uniqueId: {
-        imageScanDeployInfoId: 0,
-        appId: 0,
-        envId: 0,
-    },
+    appId: 0,
+    envId: 0,
 }
 
 export const SEARCH_TYPE_OPTIONS: SearchTypeOptionType[] = [
diff --git a/src/components/security/SecurityScansTab/types.tsx b/src/components/security/SecurityScansTab/types.tsx
index be1143eca6..eee002e0de 100644
--- a/src/components/security/SecurityScansTab/types.tsx
+++ b/src/components/security/SecurityScansTab/types.tsx
@@ -19,14 +19,9 @@ export enum SearchType {
     VULNERABILITY = 'cveName',
 }
 
-interface ScanDetailsUniqueId {
+export interface ScanDetailsType {
     appId: number
     envId: number
-    imageScanDeployInfoId: number
-}
-export interface ScanDetailsType {
-    name: string
-    uniqueId: ScanDetailsUniqueId
 }
 
 export enum SecurityListSortableKeys {
diff --git a/src/components/security/security.service.ts b/src/components/security/security.service.ts
index abfcbc675e..dee03cfeb0 100644
--- a/src/components/security/security.service.ts
+++ b/src/components/security/security.service.ts
@@ -18,7 +18,6 @@ import {
     get,
     getClusterListMin,
     getEnvironmentListMinPublic,
-    handleUTCTime,
     post,
     ResponseType,
     sortCallback,
diff --git a/src/components/v2/appDetails/AppDetails.component.tsx b/src/components/v2/appDetails/AppDetails.component.tsx
index 54d785aced..90936c61ea 100644
--- a/src/components/v2/appDetails/AppDetails.component.tsx
+++ b/src/components/v2/appDetails/AppDetails.component.tsx
@@ -56,6 +56,10 @@ const AppDetailsComponent = ({
     _init,
     loadingDetails,
     loadingResourceTree,
+    handleReloadResourceTree,
+    // NOTE: this might seem like a duplicate of loadingResourceTree
+    // but its not since loadingResourceTree runs a loader on the whole page
+    isReloadResourceTreeInProgress,
 }: AppDetailsComponentType) => {
     const params = useParams<{ appId: string; envId: string; nodeType: string }>()
     const [appDetails] = useSharedState(IndexStore.getAppDetails(), IndexStore.getAppDetailsObservable())
@@ -176,6 +180,8 @@ const AppDetailsComponent = ({
                 monitoringTools={monitoringTools}
                 isExternalApp={isExternalApp}
                 isVirtualEnvironment={isVirtualEnv.current}
+                handleReloadResourceTree={handleReloadResourceTree}
+                isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
             />
         )
     }
diff --git a/src/components/v2/appDetails/NodeTreeDetailTab.tsx b/src/components/v2/appDetails/NodeTreeDetailTab.tsx
index 18dd82b186..5a5d842256 100644
--- a/src/components/v2/appDetails/NodeTreeDetailTab.tsx
+++ b/src/components/v2/appDetails/NodeTreeDetailTab.tsx
@@ -35,6 +35,8 @@ const NodeTreeDetailTab = ({
     isExternalApp,
     isDeploymentBlocked,
     isVirtualEnvironment,
+    handleReloadResourceTree,
+    isReloadResourceTreeInProgress,
 }: NodeTreeDetailTabProps) => {
     const params = useParams<{ appId: string; envId: string; nodeType: string }>()
     const { path, url } = useRouteMatch()
@@ -69,6 +71,8 @@ const NodeTreeDetailTab = ({
                         tabRef={tabRef}
                         appType={appDetails.appType}
                         isExternalApp={isExternalApp}
+                        handleReloadResourceTree={handleReloadResourceTree}
+                        isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
                     />
                     <Switch>
                         <Route
diff --git a/src/components/v2/appDetails/appDetails.type.ts b/src/components/v2/appDetails/appDetails.type.ts
index 251c6c2aca..2ec87f08be 100644
--- a/src/components/v2/appDetails/appDetails.type.ts
+++ b/src/components/v2/appDetails/appDetails.type.ts
@@ -401,6 +401,8 @@ export interface TerminalComponentProps {
 }
 
 export interface NodeTreeTabListProps extends LogSearchTermType {
+    isReloadResourceTreeInProgress: boolean
+    handleReloadResourceTree: () => void
     tabRef?: MutableRefObject<HTMLDivElement>
     appType?: string
     isExternalApp?: boolean
@@ -505,7 +507,8 @@ export interface ManifestActionPropsType extends ResourceInfoActionPropsType, Pi
     manifestGUIFormRef: FormProps['ref']
 }
 
-export interface NodeTreeDetailTabProps {
+export interface NodeTreeDetailTabProps extends
+    Pick<NodeTreeTabListProps, 'handleReloadResourceTree' | 'isReloadResourceTreeInProgress'> {
     appDetails: AppDetails
     externalLinks: ExternalLink[]
     monitoringTools: OptionTypeWithIcon[]
@@ -536,7 +539,8 @@ export interface NodeComponentProps {
     isDeploymentBlocked?: boolean
     isExternalApp: boolean
 }
-export interface AppDetailsComponentType {
+export interface AppDetailsComponentType extends
+    Pick<NodeTreeTabListProps, 'handleReloadResourceTree' | 'isReloadResourceTreeInProgress'> {
     externalLinks?: ExternalLink[]
     monitoringTools?: OptionTypeWithIcon[]
     isExternalApp: boolean
diff --git a/src/components/v2/appDetails/ea/EAAppDetail.component.tsx b/src/components/v2/appDetails/ea/EAAppDetail.component.tsx
index 0a2df735ba..811806dd83 100644
--- a/src/components/v2/appDetails/ea/EAAppDetail.component.tsx
+++ b/src/components/v2/appDetails/ea/EAAppDetail.component.tsx
@@ -47,6 +47,7 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
         externalLinks: [],
         monitoringTools: [],
     })
+    const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(false)
 
     let initTimer = null
     let isAPICallInProgress = false
@@ -116,8 +117,9 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
         return genericAppDetail
     }
 
-    const _getAndSetAppDetail = async () => {
+    const _getAndSetAppDetail = () => {
         isAPICallInProgress = true
+        setIsReloadResourceTreeInProgress(true)
         getAppDetail(appId)
             .then((appDetailResponse: HelmAppDetailResponse) => {
                 IndexStore.publishAppDetails(
@@ -162,6 +164,9 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
                 setIsLoading(false)
                 isAPICallInProgress = false
             })
+            .finally(() => {
+                setIsReloadResourceTreeInProgress(false)
+            })
     }
 
     return (
@@ -185,6 +190,8 @@ const ExternalAppDetail = ({ appId, appName, isExternalApp }) => {
                     isExternalApp={isExternalApp}
                     loadingDetails={false}
                     loadingResourceTree={false}
+                    isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
+                    handleReloadResourceTree={_getAndSetAppDetail}
                 />
             )}
         </>
diff --git a/src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx b/src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx
index 6620d1232d..b8fe89cb1b 100644
--- a/src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx
+++ b/src/components/v2/appDetails/k8Resource/NodeTreeTabList.tsx
@@ -23,11 +23,27 @@ import { ApplicationObject, NodeTreeTabListProps, NodeType } from '../appDetails
 import { ReactComponent as K8ResourceIcon } from '../../../../assets/icons/ic-object.svg'
 import { ReactComponent as LogAnalyzerIcon } from '../../../../assets/icons/ic-logs.svg'
 import { ReactComponent as Cross } from '../../../../assets/icons/ic-close.svg'
+import { ReactComponent as ICArrowClockwise } from '@Icons/ic-arrow-clockwise.svg'
 import Tippy from '@tippyjs/react'
-import { ConditionalWrap, useSearchString, ALL_RESOURCE_KIND_FILTER } from '@devtron-labs/devtron-fe-common-lib'
+import {
+    ConditionalWrap,
+    useSearchString,
+    ALL_RESOURCE_KIND_FILTER,
+    Button,
+    ButtonVariantType,
+    ComponentSizeType,
+    ButtonStyleType,
+    ButtonComponentType
+} from '@devtron-labs/devtron-fe-common-lib'
 import './NodeTreeTabList.scss'
 
-export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tabRef }: NodeTreeTabListProps) {
+export default function NodeTreeTabList({
+    logSearchTerms,
+    setLogSearchTerms,
+    tabRef,
+    handleReloadResourceTree,
+    isReloadResourceTreeInProgress,
+}: NodeTreeTabListProps) {
     const { nodeType } = useParams<{ nodeType: string }>()
     const { push } = useHistory()
     const filterType = useSearchString().searchParams.filterType || ALL_RESOURCE_KIND_FILTER
@@ -36,6 +52,8 @@ export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tab
         AppDetailsStore.getAppDetailsTabsObservable(),
     )
 
+    const isK8sResourceTabSelected = applicationObjectTabs.some((tab) => tab.name === AppDetailsTabs.k8s_Resources && tab.isSelected)
+
     const clearLogSearchTerm = (tabIdentifier: string): void => {
         if (logSearchTerms) {
             const identifier = tabIdentifier.toLowerCase()
@@ -117,7 +135,7 @@ export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tab
     return (
         <div
             data-testid="resource-tree-wrapper"
-            className="resource-tree-wrapper flexbox px-12 dc__position-sticky dc__zi-10"
+            className="resource-tree-wrapper flexbox dc__content-space px-12 dc__position-sticky dc__zi-10"
             style={{ outline: 'none', top: '77px' }}
             tabIndex={0}
             ref={tabRef}
@@ -178,6 +196,20 @@ export default function NodeTreeTabList({ logSearchTerms, setLogSearchTerms, tab
                     )
                 })}
             </ul>
+
+            {isK8sResourceTabSelected && (
+                <Button
+                    dataTestId="reload-resource-tree-button"
+                    icon={<ICArrowClockwise className="scn-6" />}
+                    onClick={handleReloadResourceTree}
+                    variant={ButtonVariantType.borderLess}
+                    size={ComponentSizeType.small}
+                    style={ButtonStyleType.neutral}
+                    component={ButtonComponentType.button}
+                    ariaLabel="Refetch resources"
+                    isLoading={isReloadResourceTreeInProgress}
+                />
+            )}
         </div>
     )
 }
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
index 0e32f2a3a7..01d331ca98 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx
@@ -270,7 +270,7 @@ export const InputForSelectedOption = ({
                             </div>
                         </div>
                         <div className="flex mt-4 flex-justify-start">
-                            <Info className="icon-dim-16" />
+                            <Info className="icon-dim-16 scn-6" />
                             <div className="ml-4 fs-11 fw-4 cn-7">Browser time zone: {timeZone} </div>
                         </div>
                     </div>
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/__mocks__/terminalWrapper.mock.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/__mocks__/terminalWrapper.mock.tsx
index 6f3d1d899b..8bd578a5be 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/__mocks__/terminalWrapper.mock.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/__mocks__/terminalWrapper.mock.tsx
@@ -15,10 +15,9 @@
  */
 
 import { useRef } from 'react'
-import { MainContextProvider } from '@devtron-labs/devtron-fe-common-lib'
+import { MainContextProvider, MainContext } from '@devtron-labs/devtron-fe-common-lib'
 import { SERVER_MODE } from '../../../../../../../../config'
 import { nodeSelect, SocketConnectionType } from '../../../../../../../ClusterNodes/constants'
-import { MainContext } from '../../../../../../../common/navigation/types'
 import { TerminalWrapperType, TERMINAL_TEXT } from '../constants'
 import { TerminalSelectionListDataType } from '../terminal.type'
 
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx b/src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
index 39c0f677b2..d58bfd3be1 100644
--- a/src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeType/NodeDelete.component.tsx
@@ -29,8 +29,8 @@ import {
     ToastManager,
     GetResourceScanDetailsPayloadType,
     ResponseType,
-    ApiResponseResultType,
     useAsync,
+    ScanResultDTO,
 } from '@devtron-labs/devtron-fe-common-lib'
 import PodPopup from './PodPopup'
 import AppDetailsStore from '../../appDetails.store'
@@ -43,9 +43,7 @@ import { URLS } from '../../../../../config'
 import { importComponentFromFELibrary } from '../../../../common'
 import { getAppDetailsForManifest } from '../nodeDetail/nodeDetail.api'
 
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 const DeploymentWindowConfirmationDialog = importComponentFromFELibrary('DeploymentWindowConfirmationDialog')
-const SecurityModalSidebar = importComponentFromFELibrary('SecurityModalSidebar', null, 'function')
 const getResourceScanDetails: ({
     name,
     namespace,
@@ -57,7 +55,7 @@ const getResourceScanDetails: ({
     appType,
     deploymentType,
     isAppDetailView,
-}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ApiResponseResultType>> = importComponentFromFELibrary(
+}: GetResourceScanDetailsPayloadType) => Promise<ResponseType<ScanResultDTO>> = importComponentFromFELibrary(
     'getResourceScanDetails',
     null,
     'function',
@@ -73,8 +71,6 @@ const NodeDeleteComponent = ({ nodeDetails, appDetails, isDeploymentBlocked }: N
     const [forceDelete, setForceDelete] = useState(false)
     const [manifestPayload, setManifestPayload] = useState<ReturnType<typeof getAppDetailsForManifest> | null>(null)
 
-    const isSecurityScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && isFELibAvailable
-
     const [resourceScanLoading, resourceScanResponse, resourceScanError] = useAsync(
         () =>
             getResourceScanDetails(
@@ -85,7 +81,7 @@ const NodeDeleteComponent = ({ nodeDetails, appDetails, isDeploymentBlocked }: N
                 }
             ),
         [manifestPayload],
-        manifestPayload && getResourceScanDetails && isSecurityScanV2Enabled,
+        manifestPayload && !!getResourceScanDetails,
     )
 
     const handleShowVulnerabilityModal = () => {
@@ -212,12 +208,9 @@ const NodeDeleteComponent = ({ nodeDetails, appDetails, isDeploymentBlocked }: N
                 </PopupMenu.Body>
             </PopupMenu>
 
-            {!!manifestPayload && !!isFELibAvailable && (
+            {!!manifestPayload && !!getResourceScanDetails && (
                 <SecurityModal
                     handleModalClose={handleCloseVulnerabilityModal}
-                    Sidebar={SecurityModalSidebar}
-                    isResourceScan
-                    isSecurityScanV2Enabled={isSecurityScanV2Enabled}
                     isLoading={resourceScanLoading}
                     error={resourceScanError}
                     responseData={resourceScanResponse?.result}
diff --git a/src/components/v2/appDetails/k8Resource/nodeType/PodPopup.tsx b/src/components/v2/appDetails/k8Resource/nodeType/PodPopup.tsx
index 2ab6f8ead6..d6cd7b66eb 100644
--- a/src/components/v2/appDetails/k8Resource/nodeType/PodPopup.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeType/PodPopup.tsx
@@ -31,9 +31,10 @@ const PodPopup = ({
     handleShowVulnerabilityModal,
 }: PodPopupProps) => {
     const { installedModuleMap } = useMainContext()
-    const showResourceScanModal =
-        window._env_.ENABLE_RESOURCE_SCAN_V2 &&
-        getShowResourceScanModal(kind as NodeType, installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY])
+    const showResourceScanModal = getShowResourceScanModal(
+        kind as NodeType,
+        installedModuleMap.current?.[ModuleNameMap.SECURITY_TRIVY],
+    )
 
     const handleDescribeEvents = () => {
         describeNode(NodeDetailTabs.EVENTS)
diff --git a/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx b/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx
index e1dc323126..7e0ee6eea4 100644
--- a/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx
+++ b/src/components/v2/appDetails/sourceInfo/environmentStatus/EnvironmentStatus.component.tsx
@@ -17,7 +17,6 @@
 import { useMemo, useState } from 'react'
 import AppStatusDetailModal from './AppStatusDetailModal'
 import './environmentStatus.scss'
-import { ReactComponent as Alert } from '../../../assets/icons/ic-alert-triangle.svg'
 import IndexStore from '../../index.store'
 import { URLS } from '../../../../../config'
 import { AppType } from '../../appDetails.type'
@@ -40,7 +39,7 @@ import IssuesListingModal from '../../../../app/details/appDetails/IssuesListing
 import SecurityVulnerabilityCard from '../../../../app/details/appDetails/SecurityVulnerabilityCard'
 
 const AppDetailsDownloadCard = importComponentFromFELibrary('AppDetailsDownloadCard')
-const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
+const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', false, 'function')
 
 const EnvironmentStatusComponent = ({
     loadingDetails,
@@ -61,7 +60,6 @@ const EnvironmentStatusComponent = ({
     const [, notesResult] = useAsync(() => getInstalledChartNotesDetail(+params.appId, +params.envId), [])
     const [errorsList, setErrorsList] = useState<ErrorItem[]>([])
     const [showIssuesModal, toggleIssuesModal] = useState<boolean>(false)
-    const isScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2 && isFELibAvailable
 
     const onClickUpgrade = () => {
         const _url = `${url.split('/').slice(0, -1).join('/')}/${URLS.APP_VALUES}`
@@ -185,7 +183,12 @@ const EnvironmentStatusComponent = ({
                     {renderHelmConfigApplyStatusBlock()}
                     {renderLastUpdatedBlock()}
                     {renderChartUsedBlock()}
-                    {isScanV2Enabled && appDetails?.appType === AppType.DEVTRON_HELM_CHART && <SecurityVulnerabilityCard cardLoading={cardLoading} installedAppId={appDetails?.installedAppId} />}
+                    {isFELibAvailable && appDetails?.appType === AppType.DEVTRON_HELM_CHART && (
+                        <SecurityVulnerabilityCard
+                            cardLoading={cardLoading}
+                            installedAppId={appDetails?.installedAppId}
+                        />
+                    )}
                 </div>
             )}
             {showAppStatusDetail && (
diff --git a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
index 7dcf1325d9..1baff5e64c 100644
--- a/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
+++ b/src/components/v2/chartDeploymentHistory/ChartDeploymentHistory.component.tsx
@@ -109,14 +109,12 @@ const ChartDeploymentHistory = ({
     let initTimer = null
     // Checking if deployment app type is argocd only then show steps tab
 
-    const isScanV2Enabled = window._env_.ENABLE_RESOURCE_SCAN_V2
-
     const deploymentTabs = () => {
         const tabs = [
             DEPLOYMENT_HISTORY_TAB.SOURCE,
             DEPLOYMENT_HISTORY_TAB.VALUES_YAML,
             DEPLOYMENT_HISTORY_TAB.HELM_GENERATED_MANIFEST,
-            (ChartSecurityTab && isScanV2Enabled && !isExternal && DEPLOYMENT_HISTORY_TAB.SECURITY),
+            (ChartSecurityTab && !isExternal && DEPLOYMENT_HISTORY_TAB.SECURITY),
         ]
         if (installedAppInfo?.deploymentType === DeploymentAppTypes.GITOPS) {
             tabs.unshift(DEPLOYMENT_HISTORY_TAB.STEPS)
@@ -595,7 +593,7 @@ const ChartDeploymentHistory = ({
                         status={deployment.status}
                     />
                 )}
-                {selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.SECURITY && !isExternal && isScanV2Enabled && ChartSecurityTab && (
+                {selectedDeploymentTabName === DEPLOYMENT_HISTORY_TAB.SECURITY && !isExternal && ChartSecurityTab && (
                     <ChartSecurityTab installedAppVersionHistoryId={deploymentHistoryArr[selectedDeploymentHistoryIndex].version} />
                 )}
             </div>
diff --git a/src/components/v2/common/ReactSelect.utils.tsx b/src/components/v2/common/ReactSelect.utils.tsx
index 02de4013eb..b0c49678cc 100644
--- a/src/components/v2/common/ReactSelect.utils.tsx
+++ b/src/components/v2/common/ReactSelect.utils.tsx
@@ -196,22 +196,6 @@ export const formatOptionLabel = (option): JSX.Element => {
     )
 }
 
-export const CustomValueContainer = (props): JSX.Element => {
-    return (
-        <components.ValueContainer {...props}>
-            {(!props.selectProps.menuIsOpen || !props.selectProps.inputValue) &&
-                (props.selectProps.value?.label ? (
-                    <span className={`dc__position-abs cn-9 ml-4 ${props.valClassName ?? ''}`}>
-                        {props.selectProps.value.label}
-                    </span>
-                ) : (
-                    <span className="dc__position-abs cn-5 ml-4">{props.selectProps.placeholder}</span>
-                ))}
-            {React.cloneElement(props.children[1])}
-        </components.ValueContainer>
-    )
-}
-
 export const menuComponentForImage = (props) => {
     return (
         <components.MenuList {...props}>
@@ -223,19 +207,6 @@ export const menuComponentForImage = (props) => {
     )
 }
 
-export const menuComponent = (props) => {
-    /* FIXME: not good practice but can be solved once & for all by unifying react-select */
-    const { text } = props.selectProps
-    return (
-        <components.MenuList {...props}>
-            <div className="fw-4 lh-20 pl-8 pr-8 pt-6 pb-6 cn-7 fs-13 dc__italic-font-style">
-                {`Type to enter custom ${text}`}
-            </div>
-            {props.children}
-        </components.MenuList>
-    )
-}
-
 export const GroupHeading = (props) => {
     const { data, hideClusterName } = props
     if (!data.label) {
diff --git a/src/components/v2/index.tsx b/src/components/v2/index.tsx
index fa2a70bb05..d44bbf9e62 100644
--- a/src/components/v2/index.tsx
+++ b/src/components/v2/index.tsx
@@ -16,7 +16,7 @@
 
 import React, { Suspense, useEffect, useRef, useState } from 'react'
 import { useRouteMatch, useParams, Redirect, useLocation, useHistory, Switch, Route } from 'react-router-dom'
-import { ErrorScreenManager, DetailsProgressing } from '@devtron-labs/devtron-fe-common-lib'
+import { ErrorScreenManager, DetailsProgressing, showError } from '@devtron-labs/devtron-fe-common-lib'
 import { URLS } from '../../config'
 import { sortOptionsByValue } from '../common'
 import ValuesComponent from './values/ChartValues.component'
@@ -53,6 +53,11 @@ const RouterComponent = ({ envType }) => {
     const [loadingDetails, setLoadingDetails] = useState(false)
     const [loadingResourceTree, setLoadingResourceTree] = useState(false)
     const [helmAppPackageName, setHelmAppPackageName] = useState('')
+    // NOTE: this might seem like a duplicate of loadingResourceTree
+    // but its not since loadingResourceTree runs a loader on the whole page
+    // maybe we can rename loadingResourceTree
+    // this variable actually tells us if resource tree call is in progress
+    const [isReloadResourceTreeInProgress, setIsReloadResourceTreeInProgress] = useState(false)
     const appDetailsRef = useRef({} as AppDetails)
     const isVirtualRef = useRef(false)
 
@@ -154,6 +159,21 @@ const RouterComponent = ({ envType }) => {
         }
     }
 
+    const handleReloadResourceTree = () => {
+        if (envType === EnvType.CHART) {
+            setIsReloadResourceTreeInProgress(true)
+            getInstalledChartResourceTree(+params.appId, +params.envId)
+                .then(handlePublishAppDetails)
+                .catch((err) => {
+                    showError(err)
+                })
+                .finally(() => {
+                    setLoadingResourceTree(false)
+                    setIsReloadResourceTreeInProgress(false)
+                })
+        }
+    }
+
     const getExternalLinksAndTools = (clusterId) => {
         if (clusterId) {
             getExternalLinks(clusterId, params.appId, ExternalLinkIdentifierType.DevtronInstalledApp)
@@ -220,6 +240,8 @@ const RouterComponent = ({ envType }) => {
                                     _init={_init}
                                     loadingDetails={loadingDetails}
                                     loadingResourceTree={loadingResourceTree}
+                                    handleReloadResourceTree={handleReloadResourceTree}
+                                    isReloadResourceTreeInProgress={isReloadResourceTreeInProgress}
                                 />
                             </Route>
                             <Route path={`${path}/${URLS.APP_VALUES}`}>
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts b/src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
index 2a441b05fe..30f735beae 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.reducer.ts
@@ -87,9 +87,7 @@ export const initState = (
             chartVersionId: selectedVersionFromParent,
             chartValuesId: chartValuesFromParent?.id,
         },
-        isManifestScanEnabled: window._env_.ENABLE_RESOURCE_SCAN_V2
-            ? installedConfigFromParent?.isManifestScanEnabled ?? false
-            : false,
+        isManifestScanEnabled: installedConfigFromParent?.isManifestScanEnabled ?? false,
     }
 }
 
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
index 4897e70e09..04506fad63 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
@@ -38,6 +38,7 @@ import {
     ConfigurationType,
     ToastManager,
     ToastVariantType,
+    UNSAVED_CHANGES_PROMPT_MESSAGE,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import Tippy from '@tippyjs/react'
@@ -67,7 +68,6 @@ import {
     DEFAULT_ROUTE_PROMPT_MESSAGE,
     DELETE_ACTION,
     SERVER_MODE,
-    UNSAVED_CHANGES_PROMPT_MESSAGE,
     URLS,
     checkIfDevtronOperatorHelmRelease,
 } from '../../../../config'
@@ -138,7 +138,6 @@ import {
 import ClusterNotReachableDailog from '../../../common/ClusterNotReachableDailog/ClusterNotReachableDialog'
 import { VIEW_MODE } from '@Pages/Shared/ConfigMapSecret/constants'
 import IndexStore from '../../appDetails/index.store'
-import { AppDetails } from '../../appDetails/appDetails.type'
 import { AUTO_GENERATE_GITOPS_REPO, CHART_VALUE_ID } from './constant'
 
 const GeneratedHelmDownload = importComponentFromFELibrary('GeneratedHelmDownload')
@@ -1787,32 +1786,29 @@ const ChartValuesView = ({
                                 />
                             )}
                         </div>
-                            {window._env_.ENABLE_RESOURCE_SCAN_V2 &&
-                                !isExternalApp &&
-                                (isDeployChartView || isUpdateAppView) &&
-                                ToggleSecurityScan && (
-                                    <ToggleSecurityScan
-                                        isManifestScanEnabled={commonState.isManifestScanEnabled}
-                                        handleToggleSecurityScan={handleToggleSecurityScan}
-                                    />
-                                )}
-                            {!isDeployChartView &&
-                                chartValueId !== '0' &&
-                                !(
-                                    deployedAppDetail &&
-                                    checkIfDevtronOperatorHelmRelease(
-                                        deployedAppDetail[2],
-                                        deployedAppDetail[1],
-                                        deployedAppDetail[0],
-                                    )
-                                ) && (
-                                    <DeleteApplicationButton
-                                        type={isCreateValueView ? 'preset value' : 'Application'}
-                                        isUpdateInProgress={commonState.isUpdateInProgress}
-                                        isDeleteInProgress={commonState.isDeleteInProgress}
-                                        dispatch={dispatch}
-                                    />
-                                )}
+                        {!isExternalApp && (isDeployChartView || isUpdateAppView) && ToggleSecurityScan && (
+                            <ToggleSecurityScan
+                                isManifestScanEnabled={commonState.isManifestScanEnabled}
+                                handleToggleSecurityScan={handleToggleSecurityScan}
+                            />
+                        )}
+                        {!isDeployChartView &&
+                            chartValueId !== '0' &&
+                            !(
+                                deployedAppDetail &&
+                                checkIfDevtronOperatorHelmRelease(
+                                    deployedAppDetail[2],
+                                    deployedAppDetail[1],
+                                    deployedAppDetail[0],
+                                )
+                            ) && (
+                                <DeleteApplicationButton
+                                    type={isCreateValueView ? 'preset value' : 'Application'}
+                                    isUpdateInProgress={commonState.isUpdateInProgress}
+                                    isDeleteInProgress={commonState.isDeleteInProgress}
+                                    dispatch={dispatch}
+                                />
+                            )}
                     </div>
                     {commonState.openReadMe && (
                         <ActiveReadmeColumn
diff --git a/src/components/workflowEditor/Workflow.tsx b/src/components/workflowEditor/Workflow.tsx
index cc5fa9c213..7a2e62f9be 100644
--- a/src/components/workflowEditor/Workflow.tsx
+++ b/src/components/workflowEditor/Workflow.tsx
@@ -144,6 +144,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
                 showPluginWarning: false,
                 isTriggerBlocked: false,
                 pluginBlockState: getParsedPluginPolicyConsequenceData() || null,
+                approvalConfigData: null,
             })
         }
 
@@ -574,6 +575,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
                         ciPipelineId={workflowCIPipelineId}
                         workflowId={this.props.id}
                         isWebhookCD={isWebhookCD}
+                        showApprovalConfigInfoTippy
                     />
                 )
             }
@@ -633,6 +635,7 @@ export class Workflow extends Component<WorkflowProps, WorkflowState> {
                         isParallelEdge
                         isWebhookCD={isWebhookCD}
                         leftTooltipContent={leftTooltipContent}
+                        showApprovalConfigInfoTippy
                     />,
                 )
             } else {
diff --git a/src/components/workflowEditor/types.ts b/src/components/workflowEditor/types.ts
index 3a2598dfa1..d6eb4f4a66 100644
--- a/src/components/workflowEditor/types.ts
+++ b/src/components/workflowEditor/types.ts
@@ -24,7 +24,6 @@ import {
     SelectedNode,
     WorkflowType,
     PluginDataStoreType,
-    ValidationResponseType,
     PipelineFormType,
     MandatoryPluginDataType,
     CiPipeline,
@@ -253,7 +252,6 @@ export interface PipelineFormDataErrorType {
         message: string
         isValid: boolean
     }
-    userApprovalConfig?: ValidationResponseType
 }
 
 interface HandleValidateMandatoryPluginsParamsType {
@@ -338,6 +336,7 @@ export interface PipelineContext {
     handleDisableParentModalCloseUpdate?: (disableParentModalClose: boolean) => void
     handleValidateMandatoryPlugins: (params: HandleValidateMandatoryPluginsParamsType) => void
     mandatoryPluginData: MandatoryPluginDataType
+    isBlobStorageConfigured?: boolean
     uploadFile: (file: UploadFileProps) => Promise<UploadFileDTO>
 }
 
diff --git a/src/components/workflowEditor/workflowEditor.tsx b/src/components/workflowEditor/workflowEditor.tsx
index 2fce2e2e35..de615b5f69 100644
--- a/src/components/workflowEditor/workflowEditor.tsx
+++ b/src/components/workflowEditor/workflowEditor.tsx
@@ -30,6 +30,7 @@ import {
     InfoIconTippy,
     ToastVariantType,
     ToastManager,
+    TARGET_IDS,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { ChangeCIPayloadType, PipelineContext, WorkflowEditProps, WorkflowEditState } from './types'
@@ -903,7 +904,12 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
         }
 
         return (
-            <div className="workflow-editor bcn-0" data-testid="workflow-editor-page">
+            <div
+                className="workflow-editor bcn-0"
+                data-testid="workflow-editor-page"
+                // Added for showing the tippy on ApprovalNode
+                id={TARGET_IDS.WORKFLOW_EDITOR_CONTAINER}
+            >
                 <div className="flex dc__content-space pb-16">
                     <div className="flex dc__gap-8 dc__content-start">
                         <h1 className="m-0 cn-9 fs-16 fw-6">Workflow Editor</h1>
diff --git a/src/config/constants.ts b/src/config/constants.ts
index a498089bfa..cca4d6ef4e 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -917,7 +917,6 @@ export const REQUIRED_FIELDS_MISSING = 'Some required fields are missing'
  * Value for select all identifier
  */
 export const SELECT_ALL_VALUE = '*'
-export const UNSAVED_CHANGES_PROMPT_MESSAGE = 'You have unsaved changes. Are you sure you want to leave?'
 export const DEFAULT_ROUTE_PROMPT_MESSAGE =
     "Please don't wander off! Reloading or going back might disrupt the ongoing operation."
 
diff --git a/src/config/routes.ts b/src/config/routes.ts
index 466e8afb2f..f721df778e 100644
--- a/src/config/routes.ts
+++ b/src/config/routes.ts
@@ -66,7 +66,6 @@ export const URLS = {
     APP_ENV_OVERRIDE_CONFIG: 'env-override',
     APP_ENV_CONFIG_COMPARE: 'config-compare',
     APP_EXTERNAL_LINKS: 'external-links',
-    APP_CONFIG_PROTECTION: 'config-protection',
     APP_CI_CONFIG: 'ci-pipeline',
     APP_CD_CONFIG: 'cd-pipeline',
     APP_EXTERNAL_CI_CONFIG: 'external-ci',
@@ -99,6 +98,7 @@ export const URLS = {
     GLOBAL_CONFIG_PLUGIN_POLICY: '/global-config/plugin-policy',
     GLOBAL_CONFIG_FILTER_CONDITION: '/global-config/filter-condition',
     GLOBAL_CONFIG_LOCK_DEPLOYMENT_CONFIGURATION: '/global-config/lock-deployment-configuration',
+    GLOBAL_CONFIG_APPROVAL_POLICY: '/global-config/approval-policy',
     GLOBAL_CONFIG_BUILD_INFRA: '/global-config/build-infra',
     GLOBAL_CONFIG_DEPLOYMENT_WINDOW: '/global-config/deployment-window',
     GLOBAL_CONFIG_IMAGE_PROMOTION: '/global-config/image-promotion',
diff --git a/src/css/application.scss b/src/css/application.scss
index 8e44f990b0..bba70dadb9 100644
--- a/src/css/application.scss
+++ b/src/css/application.scss
@@ -1,5 +1,6 @@
 // @TODO: Patternfly styles files need to be removed in future
 @import './patternfly.scss';
+@import './normalize.scss';
 @import './base.scss';
 @import './formulae.scss';
 @import './forms.scss';
diff --git a/src/css/base.scss b/src/css/base.scss
index d2c18108bf..a1919100d4 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -820,6 +820,7 @@ button.anchor {
 }
 
 .app-summary__status-name {
+
     &.f-healthy,
     &.f-synced,
     &.f-sync.ok,
@@ -1021,6 +1022,7 @@ button.anchor {
 }
 
 .override-button.cta {
+
     &.ghosted,
     &.delete {
         height: 32px;
@@ -1321,12 +1323,12 @@ button.anchor {
         overflow: hidden;
         border-radius: 4px;
 
-        input + .radio__item-label {
+        input+.radio__item-label {
             border-radius: 0;
             border: 1px solid var(--N200);
         }
 
-        input[type='checkbox']:checked + .radio__item-label {
+        input[type='checkbox']:checked+.radio__item-label {
             border-radius: 0;
             background-color: var(--N100);
             color: var(--N900);
@@ -1355,19 +1357,19 @@ button.anchor {
                 border-right: unset;
             }
 
-            &:first-child input + .radio__item-label {
+            &:first-child input+.radio__item-label {
                 border-top-left-radius: 4px !important;
                 border-bottom-left-radius: 4px !important;
             }
 
-            &:last-child input + .radio__item-label {
+            &:last-child input+.radio__item-label {
                 border-top-right-radius: 4px !important;
                 border-bottom-right-radius: 4px !important;
                 border: 1px solid var(--N200);
             }
         }
 
-        input[type='checkbox']:checked + .radio__item-label {
+        input[type='checkbox']:checked+.radio__item-label {
             border-radius: 0;
             background-color: var(--N100);
             color: var(--N900);
@@ -1386,12 +1388,12 @@ button.anchor {
         overflow: hidden;
         border-radius: 4px;
 
-        input + .radio__item-label {
+        input+.radio__item-label {
             border-radius: 0;
             border: 1px solid var(--N200);
         }
 
-        input[type='checkbox']:checked + .radio__item-label {
+        input[type='checkbox']:checked+.radio__item-label {
             border-radius: 0;
             color: var(--N900);
             background-color: var(--N0);
@@ -1421,12 +1423,12 @@ button.anchor {
                 border-right: unset;
             }
 
-            &:first-child input + .radio__item-label {
+            &:first-child input+.radio__item-label {
                 border-top-left-radius: 4px !important;
                 border-bottom-left-radius: 4px !important;
             }
 
-            &:last-child input + .radio__item-label {
+            &:last-child input+.radio__item-label {
                 border-top-right-radius: 4px !important;
                 border-bottom-right-radius: 4px !important;
                 border: 1px solid var(--N200);
@@ -1437,7 +1439,7 @@ button.anchor {
 
 .gui-yaml-switch {
     &.radio-group {
-        input[type='checkbox']:checked + .radio__item-label {
+        input[type='checkbox']:checked+.radio__item-label {
             color: var(--N900);
 
             svg path {
@@ -1466,7 +1468,7 @@ button.anchor {
         &.radio-group {
             height: 30px;
 
-            input + .radio__item-label {
+            input+.radio__item-label {
                 padding-inline: 8px;
             }
         }
@@ -1475,7 +1477,7 @@ button.anchor {
 
 .manual-approvals-switch {
     &.radio-group {
-        input[type='checkbox']:checked + .radio__item-label {
+        input[type='checkbox']:checked+.radio__item-label {
             color: var(--N900);
 
             svg path {
@@ -1483,7 +1485,7 @@ button.anchor {
             }
         }
 
-        input + .radio__item-label {
+        input+.radio__item-label {
             padding: 4px 8px;
         }
 
@@ -1494,12 +1496,12 @@ button.anchor {
                 fill: var(--N500);
             }
 
-            &:first-child input + .radio__item-label {
+            &:first-child input+.radio__item-label {
                 border-top-left-radius: 4px !important;
                 border-bottom-left-radius: 4px !important;
             }
 
-            &:last-child input + .radio__item-label {
+            &:last-child input+.radio__item-label {
                 border-top-right-radius: 4px !important;
                 border-bottom-right-radius: 4px !important;
             }
@@ -1740,6 +1742,7 @@ button.anchor {
 
     &.dc__visible-hover--parent:hover {
         .dc__visible-hover {
+
             // If we give this class then the element will be visible on hover
             &--child {
                 display: inherit;
@@ -1753,6 +1756,31 @@ button.anchor {
     }
 }
 
+.dc__opacity-hover {
+    .dc__opacity-hover--child {
+        opacity: 0;
+
+        &:focus {
+            opacity: 1;
+        }
+    }
+
+    &.dc__opacity-hover--parent:hover {
+        .dc__opacity-hover {
+
+            // If we give this class then the element will be visible on hover
+            &--child {
+                opacity: 1;
+            }
+
+            // For hiding a child on hover on parent
+            &--hide-child {
+                opacity: 0;
+            }
+        }
+    }
+}
+
 .dc__hover-icon {
     .dc__show-first--icon {
         display: inherit;
@@ -1835,7 +1863,7 @@ button.anchor {
     vertical-align: bottom;
 }
 
-.dc__tertiary-tab__radio input:checked ~ .dc__tertiary-tab {
+.dc__tertiary-tab__radio input:checked~.dc__tertiary-tab {
     border: solid 1px var(--B500);
     background-color: var(--B100);
 }
@@ -2661,14 +2689,18 @@ button.anchor {
     border-radius: 50% !important;
 }
 
-.dc__border-radius-8-imp {
-    border-radius: 8px !important;
+.dc__border-radius-2 {
+    border-radius: 2px;
 }
 
 .dc__border-radius-4-imp {
     border-radius: 4px !important;
 }
 
+.dc__border-radius-8-imp {
+    border-radius: 8px !important;
+}
+
 .dc__border-radius-40 {
     border-radius: 40px;
 }
@@ -2742,7 +2774,7 @@ textarea,
     }
 }
 
-.basic-multi-select > .select__control--is-disabled {
+.basic-multi-select>.select__control--is-disabled {
     background-color: var(--N100) !important;
 }
 
@@ -2891,6 +2923,7 @@ textarea,
 }
 
 .icon-stroke-b5 {
+
     path,
     rect {
         stroke: var(--B500);
@@ -2898,6 +2931,7 @@ textarea,
 }
 
 .icon-stroke-n7 {
+
     path,
     rect {
         stroke: var(--N700);
@@ -3074,6 +3108,10 @@ textarea,
     width: auto !important;
 }
 
+.w-4 {
+    width: 4px;
+}
+
 .w-8 {
     width: 8px;
 }
@@ -3439,6 +3477,10 @@ textarea,
     height: fit-content !important;
 }
 
+.dc__h-min-content {
+    height: min-content;
+}
+
 .h-0 {
     height: 0px;
 }
@@ -3612,6 +3654,11 @@ textarea,
 }
 
 // Minimum Height
+
+.mh-0 {
+    min-height: 0px;
+}
+
 .mh-28 {
     min-height: 28px;
 }
@@ -4294,7 +4341,7 @@ textarea::placeholder {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
-    word-break: break-all;
+    word-break: break-word;
 }
 
 // opacity
@@ -5030,7 +5077,7 @@ textarea::placeholder {
 }
 
 .dc__fill-available-space {
-    > * {
+    >* {
         width: 100%;
         height: 100%;
     }
@@ -5050,6 +5097,7 @@ textarea::placeholder {
     font-style: normal;
     font-weight: 600;
     line-height: 20px;
+    text-transform: capitalize;
 
     &--passed {
         color: var(--G500);
@@ -5107,6 +5155,7 @@ textarea::placeholder {
 }
 
 .cd-material {
+
     // Replace bulk ci/cd sidebar css with this one when moving a common component
     &__container-with-sidebar {
         grid-template-columns: 234px auto;
@@ -5282,6 +5331,14 @@ textarea::placeholder {
     background: var(--R100);
 }
 
+details[open] {
+    .dc__accordion-summary {
+        &--icon-flip-neg-90 {
+            transform: rotate(-90deg);
+        }
+    }
+}
+
 .backdrop {
     background: rgba(0, 0, 0, 0.75);
     z-index: var(--modal-index);
@@ -5292,4 +5349,9 @@ textarea::placeholder {
     background: inherit;
     border: none;
     padding: inherit;
+    white-space: pre-wrap;       /* Since CSS 2.1 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
diff --git a/src/css/normalize.scss b/src/css/normalize.scss
new file mode 100644
index 0000000000..b213c9db99
--- /dev/null
+++ b/src/css/normalize.scss
@@ -0,0 +1,7 @@
+summary {
+    list-style: none;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
diff --git a/src/css/triggerView.scss b/src/css/triggerView.scss
index 6c1eef73bd..817faf3156 100644
--- a/src/css/triggerView.scss
+++ b/src/css/triggerView.scss
@@ -141,7 +141,7 @@
 .material-history__top {
     display: grid;
     grid-template-columns: repeat(3, auto) 1fr;
-    grid-column-gap: 24px;
+    grid-column-gap: 10px;
     justify-content: space-between;
     align-items: center;
     background-color: var(--white);
diff --git a/src/index.tsx b/src/index.tsx
index b6407b7fa9..f4efedbb77 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -146,9 +146,7 @@ if (!window || !window._env_) {
         ENABLE_EXTERNAL_ARGO_CD: false,
         API_BATCH_SIZE: 20,
         SERVICE_WORKER_TIMEOUT: '3',
-        ENABLE_RESOURCE_SCAN: false,
         FEATURE_USER_DEFINED_GITOPS_REPO_ENABLE: false,
-        ENABLE_RESOURCE_SCAN_V2: false,
         HIDE_RELEASES: false,
         HIDE_RESOURCE_WATCHER: true,
         ORGANIZATION_NAME: '',
@@ -162,12 +160,14 @@ if (!window || !window._env_) {
         FEATURE_CONFIG_DRIFT_ENABLE: false,
         FEATURE_PROMO_EMBEDDED_BUTTON_TEXT: '',
         FEATURE_PROMO_EMBEDDED_MODAL_TITLE: '',
+        FEATURE_SWAP_TRAFFIC_ENABLE: false,
         FEATURE_BULK_RESTART_WORKLOADS_FROM_RB: 'deployment,rollout,daemonset,statefulset',
         FEATURE_RB_SYNC_CLUSTER_ENABLE: true,
         FEATURE_PROMO_EMBEDDED_IFRAME_URL: '',
         FEATURE_DEFAULT_MERGE_STRATEGY: OverrideMergeStrategyType.PATCH,
         FEATURE_DEFAULT_LANDING_RB_ENABLE: false,
-        FEATURE_CLUSTER_MAP_ENABLE: false,
+        FEATURE_CLUSTER_MAP_ENABLE: true,
+        FEATURE_ACTION_AUDIOS_ENABLE: true,
     }
 }
 
diff --git a/src/services/service.ts b/src/services/service.ts
index b3cb9e7246..dc5a623f4a 100644
--- a/src/services/service.ts
+++ b/src/services/service.ts
@@ -22,15 +22,13 @@ import {
     sortCallback,
     TeamList,
     trash,
-    LastExecutionResponseType,
     EnvironmentListHelmResponse,
-    getSortedVulnerabilities,
     TemplateListDTO,
     getUrlWithSearchParams,
-    ROUTES,
     SERVER_MODE,
     ACCESS_TYPE_MAP,
     ModuleNameMap,
+    stringComparatorBySortOrder,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../config'
 import {
@@ -57,8 +55,9 @@ export function getAppConfigStatus(appId: number, isJobView?: boolean): Promise<
     return get(`${Routes.APP_CONFIG_STATUS}?app-id=${appId}${isJobView ? '&appType=2' : ''}`)
 }
 
-export const getSourceConfig = (id: string) => {
-    const URL = `${Routes.SOURCE_CONFIG_GET}/${id}`
+// NOTE: sending pipelineType to fetch workflowCacheConfig based on that
+export const getSourceConfig = (id: string, queryParams?: Record<'pipelineType', string>) => {
+    const URL = getUrlWithSearchParams<'pipelineType'>(`${Routes.SOURCE_CONFIG_GET}/${id}`, queryParams ?? {})
     return get(URL)
 }
 
@@ -139,12 +138,22 @@ export function getAppListMin(
     })
 }
 
-export function getProjectFilteredApps(
+export async function getProjectFilteredApps(
     projectIds: number[] | string[],
     accessType?: string,
 ): Promise<ProjectFilteredApps> {
     const chartOnlyQueryParam = accessType === ACCESS_TYPE_MAP.HELM_APPS ? '&appType=DevtronChart' : ''
-    return get(`app/min?teamIds=${projectIds.join(',')}${chartOnlyQueryParam}`)
+    const response = await get(`app/min?teamIds=${projectIds.join(',')}${chartOnlyQueryParam}`)
+    
+    return {
+        ...response,
+        result: (response.result || [])
+            .map((project) => ({
+                ...project,
+                appList: (project.appList ?? []).sort((a, b) => stringComparatorBySortOrder(a.name, b.name)),
+            }))
+            .sort((a, b) => stringComparatorBySortOrder(a.projectName, b.projectName)),
+    }
 }
 
 export function getAvailableCharts(
@@ -170,9 +179,16 @@ export function getAvailableCharts(
     })
 }
 
-export function getEnvironmentListMin(includeAllowedDeploymentTypes?: boolean): Promise<any> {
+export async function getEnvironmentListMin(includeAllowedDeploymentTypes?: boolean): Promise<any> {
     const url = `${Routes.ENVIRONMENT_LIST_MIN}${includeAllowedDeploymentTypes ? '?showDeploymentOptions=true' : ''}`
-    return get(url)
+    const response = await get(url)
+
+    return {
+        ...response,
+        result: (response?.result ?? []).sort((a, b) =>
+            stringComparatorBySortOrder(a.environment_name, b.environment_name),
+        ),
+    }
 }
 
 export const getCommonAppFilters = async (
@@ -303,48 +319,6 @@ export const validateToken = (): Promise<ResponseType<Record<'emailId' | 'isVeri
     return get(`devtron/auth/verify/v2`, { preventAutoLogout: true })
 }
 
-function parseLastExecutionResponse(response): LastExecutionResponseType {
-    const vulnerabilities = response.result.vulnerabilities || []
-    const groupedVulnerabilities = getSortedVulnerabilities(vulnerabilities)
-    return {
-        ...response,
-        result: {
-            ...response.result,
-            scanExecutionId: response.result.ScanExecutionId,
-            lastExecution: response.result.executionTime,
-            objectType: response.result.objectType,
-            severityCount: {
-                critical: response.result?.severityCount?.critical ?? 0,
-                high: response.result?.severityCount?.high ?? 0,
-                medium: response.result?.severityCount?.medium ?? 0,
-                low: response.result?.severityCount?.low ?? 0,
-                unknown: response.result?.severityCount?.unknown ?? 0,
-            },
-            vulnerabilities: groupedVulnerabilities.map((cve) => {
-                return {
-                    name: cve.cveName,
-                    severity: cve.severity,
-                    package: cve.package,
-                    version: cve.currentVersion,
-                    fixedVersion: cve.fixedVersion,
-                    policy: cve.permission,
-                }
-            }),
-            scanToolId: response.result.scanToolId,
-        },
-    }
-}
-
-export function getLastExecutionByAppArtifactId(
-    artifactId: string | number,
-    appId?: string | number,
-): Promise<LastExecutionResponseType> {
-    const url = getUrlWithSearchParams(ROUTES.SECURITY_SCAN_EXECUTION_DETAILS, { appId, artifactId })
-    return get(url).then((response) => {
-        return parseLastExecutionResponse(response)
-    })
-}
-
 export function getChartRepoList(): Promise<ResponseType> {
     const URL = `${Routes.CHART_REPO}/${Routes.CHART_LIST_SUBPATH}`
     return get(URL)
@@ -453,8 +427,20 @@ export function getWebhookDataMetaConfig(gitProviderId: string | number) {
     return get(URL)
 }
 
-export function getEnvironmentListHelmApps(): Promise<EnvironmentListHelmResponse> {
-    return get(Routes.ENVIRONMENT_LIST_MIN_HELM_PROJECTS)
+export async function getEnvironmentListHelmApps(): Promise<EnvironmentListHelmResponse> {
+    const response = await get(Routes.ENVIRONMENT_LIST_MIN_HELM_PROJECTS)
+
+    return {
+        ...response,
+        result: (response?.result ?? [])
+            .map((cluster) => ({
+                ...cluster,
+                environments: (cluster.environments ?? []).sort((a, b) =>
+                    stringComparatorBySortOrder(a.environmentName, b.environmentName),
+                ),
+            }))
+            .sort((a, b) => stringComparatorBySortOrder(a.clusterName, b.clusterName)),
+    }
 }
 
 export function getClusterNamespaceMapping(): Promise<ClusterEnvironmentDetailList> {
diff --git a/yarn.lock b/yarn.lock
index 5b4b6aec22..a3bf3b4df2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -974,10 +974,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@devtron-labs/devtron-fe-common-lib@1.3.0-patch-4":
-  version "1.3.0-patch-4"
-  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.3.0-patch-4.tgz#4ef2929242914d1a1217becb44990247476476ce"
-  integrity sha512-soVpUM4gHhPgvDIGfDtnk+wibmvdeKDIcUb6BGDtg51dqJt6PGubX0/btjmtLLrtxTVvtDG0wW1dtN0BK/ok8Q==
+"@devtron-labs/devtron-fe-common-lib@1.4.0-patch-1":
+  version "1.4.0-patch-1"
+  resolved "https://registry.yarnpkg.com/@devtron-labs/devtron-fe-common-lib/-/devtron-fe-common-lib-1.4.0-patch-1.tgz#cb9d8b3ded840bd5d9854a63c9f73270546c6eab"
+  integrity sha512-Y9etcYaTwSsLEPMVAxIhY6u7GqJ34yYZUu+U3hpMqIlsnC7EJ49LxqOFmC/2zHD/TgIWZb+k0kt8iwvkFvZc/w==
   dependencies:
     "@types/react-dates" "^21.8.6"
     ansi_up "^5.2.1"
@@ -986,6 +986,7 @@
     framer-motion "^6.5.1"
     jsonpath-plus "^10.0.0"
     marked "^13.0.3"
+    nanoid "^3.3.8"
     react-dates "^21.8.0"
     react-diff-viewer-continued "^3.4.0"
     react-monaco-editor "^0.54.0"
@@ -2996,6 +2997,11 @@
     loupe "^3.1.2"
     tinyrainbow "^1.2.0"
 
+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -3438,6 +3444,14 @@ cac@^6.7.14:
   resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz"
   integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
 call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz"
@@ -3449,6 +3463,24 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
+call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
@@ -3492,7 +3524,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3520,7 +3552,7 @@ check-error@^2.1.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
-ci-info@^3.2.0:
+ci-info@^3.2.0, ci-info@^3.7.0:
   version "3.9.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
@@ -4110,6 +4142,15 @@ domutils@^3.0.1:
     domelementtype "^2.3.0"
     domhandler "^5.0.3"
 
+dunder-proto@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
@@ -4232,6 +4273,11 @@ es-define-property@^1.0.0:
   dependencies:
     get-intrinsic "^1.2.4"
 
+es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
 es-errors@^1.2.1, es-errors@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
@@ -4769,6 +4815,13 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
 flat-cache@^3.0.4:
   version "3.2.0"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz"
@@ -4821,7 +4874,7 @@ framesync@6.0.1:
   dependencies:
     tslib "^2.1.0"
 
-fs-extra@^9.0.1:
+fs-extra@^9.0.0, fs-extra@^9.0.1:
   version "9.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
   integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
@@ -4882,6 +4935,22 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-intrinsic@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.6.tgz#43dd3dd0e7b49b82b2dfcad10dc824bf7fc265d5"
+  integrity sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    dunder-proto "^1.0.0"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    function-bind "^1.1.2"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.0.0"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz"
@@ -4998,7 +5067,12 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
+gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.1.11, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -5040,6 +5114,11 @@ has-symbols@^1.0.2, has-symbols@^1.0.3:
   resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz"
@@ -5423,7 +5502,7 @@ is-weakset@^2.0.3:
     call-bind "^1.0.7"
     get-intrinsic "^1.2.4"
 
-is-wsl@^2.2.0:
+is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
@@ -5614,6 +5693,17 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stable-stringify@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.2.1.tgz#addb683c2b78014d0b78d704c2fcbdf0695a60e2"
+  integrity sha512-Lp6HbbBgosLmJbjx0pBLbgvx68FaFU1sdkmBuckmhhJ88kL13OA51CDtR2yJB50eCNMH9wRqtQNNiAqQH4YXnA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    isarray "^2.0.5"
+    jsonify "^0.0.1"
+    object-keys "^1.1.1"
+
 json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
@@ -5640,6 +5730,11 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonify@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
+  integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
+
 jsonpath-plus@^10.0.0:
   version "10.1.0"
   resolved "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.1.0.tgz"
@@ -5671,6 +5766,13 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
 language-subtag-registry@^0.3.20:
   version "0.3.23"
   resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz"
@@ -5866,6 +5968,11 @@ marked@^13.0.3:
   resolved "https://registry.yarnpkg.com/marked/-/marked-13.0.3.tgz#5c5b4a5d0198060c7c9bc6ef9420a7fed30f822d"
   integrity sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==
 
+math-intrinsics@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 mdn-data@2.0.28:
   version "2.0.28"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz"
@@ -5898,7 +6005,7 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^4.0.4, micromatch@^4.0.5:
+micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.8"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
@@ -6164,6 +6271,14 @@ onetime@^6.0.0:
   dependencies:
     mimic-fn "^4.0.0"
 
+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 open@^8.0.4:
   version "8.4.2"
   resolved "https://registry.npmjs.org/open/-/open-8.4.2.tgz"
@@ -6185,6 +6300,11 @@ optionator@^0.9.3:
     type-check "^0.4.0"
     word-wrap "^1.2.5"
 
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
+
 p-limit@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
@@ -6223,6 +6343,27 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+patch-package@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
+  integrity sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^4.1.2"
+    ci-info "^3.7.0"
+    cross-spawn "^7.0.3"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^9.0.0"
+    json-stable-stringify "^1.0.2"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.6"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^7.5.3"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+    yaml "^2.2.2"
+
 path-browserify@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz"
@@ -6345,6 +6486,11 @@ postcss@^8.4.43:
     picocolors "^1.1.0"
     source-map-js "^1.2.1"
 
+postinstall-postinstall@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
+  integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -6943,6 +7089,13 @@ rfdc@^1.3.0:
   resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
+rimraf@^2.6.3:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
+  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
+  dependencies:
+    glob "^7.1.3"
+
 rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
@@ -7061,7 +7214,7 @@ semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.3.7, semver@^7.6.0, semver@^7.6.2, semver@^7.6.3:
+semver@^7.3.7, semver@^7.5.3, semver@^7.6.0, semver@^7.6.2, semver@^7.6.3:
   version "7.6.3"
   resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
@@ -7073,7 +7226,7 @@ serialize-javascript@^6.0.1:
   dependencies:
     randombytes "^2.1.0"
 
-set-function-length@^1.2.1:
+set-function-length@^1.2.1, set-function-length@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz"
   integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
@@ -7168,6 +7321,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -7571,6 +7729,13 @@ tippy.js@^6.3.1, tippy.js@^6.3.7:
   dependencies:
     "@popperjs/core" "^2.9.0"
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz"
@@ -8405,6 +8570,11 @@ yaml@^2.0.0, yaml@^2.4.1:
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz"
   integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
 
+yaml@^2.2.2:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
+
 yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"