diff --git a/.eslintignore b/.eslintignore
index ff31ac9586..e4206e1c33 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -238,7 +238,6 @@ src/components/common/hooks/__tests__/FileReader.test.tsx
 src/components/common/icons/Icons.tsx
 src/components/common/lineChart/lineChart.tsx
 src/components/common/navigation/Navigation.tsx
-src/components/common/navigation/NavigationRoutes.tsx
 src/components/dockerRegistry/Docker.tsx
 src/components/dockerRegistry/ManageRegistry.tsx
 src/components/dockerRegistry/service.tsx
diff --git a/index.html b/index.html
index a15533c575..eca39fda88 100755
--- a/index.html
+++ b/index.html
@@ -38,6 +38,8 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
+                    /* cannot use --bg-primary here, so using rgb */
+                    background: rgb(30, 31, 40);
                 "
             >
                 <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/package.json b/package.json
index 119aadb6e1..27de087443 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-2",
+        "@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-3",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",
diff --git a/src/App.tsx b/src/App.tsx
index b88151661c..0ea469d193 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -178,9 +178,7 @@ const App = () => {
         <div className={customThemeClassName}>
             <Suspense fallback={null}>
                 {validating ? (
-                    <div className="full-height-width">
-                        <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
-                    </div>
+                    <DevtronProgressing parentClasses="full-height-width flex bg__primary" classes="icon-dim-80" />
                 ) : (
                     renderRoutesWithErrorBoundary()
                 )}
diff --git a/src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx b/src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx
index 2a44994e05..c3b93712a9 100644
--- a/src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx
+++ b/src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx
@@ -94,7 +94,6 @@ const ApplicationInfoForm = ({
                         !isJobView && 'Apps are NOT env specific and can be used to deploy to multiple environments.'
                     }
                     fullWidth
-                    autoFocus
                 />
             </div>
             <Textarea
diff --git a/src/Pages/App/CreateAppModal/ProjectSelector.tsx b/src/Pages/App/CreateAppModal/ProjectSelector.tsx
index 88942b12c6..705c534ac5 100644
--- a/src/Pages/App/CreateAppModal/ProjectSelector.tsx
+++ b/src/Pages/App/CreateAppModal/ProjectSelector.tsx
@@ -60,6 +60,8 @@ const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: Pr
                 value={selectedProject}
                 onChange={handleChange}
                 error={error}
+                autoFocus
+                defaultMenuIsOpen
             />
         </div>
     )
diff --git a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
index ff6d0641ac..1e7c0a4455 100644
--- a/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
+++ b/src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx
@@ -793,7 +793,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                 <InfoBlock variant="help" description={renderInfoText()} />
                 <div className="flex-grow-1 w-100">
                     <CustomInput
-                        value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}
+                        value={this.state.ssoConfig.url}
                         onChange={this.handleURLChange}
                         name="sso-url"
                         label="URL"
diff --git a/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx b/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
index b418b619ef..bc17537dd6 100644
--- a/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
+++ b/src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx
@@ -57,8 +57,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
-import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
 import { ReactComponent as Error } from '@Icons/ic-warning.svg'
 import { getIsMaterialApproved } from '@Components/app/details/triggerView/cdMaterials.utils'
@@ -968,27 +966,25 @@ const BulkCDTrigger = ({
                         />
                     )}
                     <div className="dc__position-rel tippy-over">
-                        {!isDeployButtonDisabled && isCDStage && !isLoading ? (
-                            <AnimatedDeployButton
-                                onButtonClick={onClickStartDeploy}
-                                isVirtualEnvironment={false}
-                                exceptionUserConfig={{
-                                    canDeploy: canDeployWithoutApproval,
-                                    isImageApprover: canImageApproverDeploy,
-                                }}
-                                isBulkCDTrigger
-                            />
-                        ) : (
-                            <Button
-                                dataTestId="deploy-button"
-                                text={BUTTON_TITLE[stage]}
-                                startIcon={isCDStage ? <DeployIcon /> : <PlayIcon />}
-                                isLoading={isLoading}
-                                size={ComponentSizeType.large}
-                                onClick={onClickStartDeploy}
-                                disabled={isDeployButtonDisabled}
-                            />
-                        )}
+                        <AnimatedDeployButton
+                            dataTestId="cd-trigger-deploy-button"
+                            text={BUTTON_TITLE[stage]}
+                            startIcon={<Icon name={isCDStage ? 'ic-rocket-launch' : 'ic-play-outline'} color={null} />}
+                            onButtonClick={onClickStartDeploy}
+                            disabled={isDeployButtonDisabled}
+                            isLoading={isLoading}
+                            animateStartIcon={isCDStage}
+                            style={
+                                canDeployWithoutApproval || canImageApproverDeploy
+                                    ? ButtonStyleType.warning
+                                    : ButtonStyleType.default
+                            }
+                            tooltipContent={
+                                canDeployWithoutApproval || canImageApproverDeploy
+                                    ? 'You are authorized to deploy as an exception user for some applications'
+                                    : ''
+                            }
+                        />
                     </div>
                 </div>
             </div>
diff --git a/src/components/app/details/triggerView/cdMaterial.tsx b/src/components/app/details/triggerView/cdMaterial.tsx
index 36b4f25670..02026a54b8 100644
--- a/src/components/app/details/triggerView/cdMaterial.tsx
+++ b/src/components/app/details/triggerView/cdMaterial.tsx
@@ -96,14 +96,10 @@ import {
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as PlayIC } from '@Icons/ic-play-outline.svg'
-
-import { ReactComponent as BackIcon } from '../../../../assets/icons/ic-arrow-backward.svg'
-import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
-import close from '../../../../assets/icons/ic-close.svg'
-import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
-import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
-import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
+import { ReactComponent as BackIcon } from '@Icons/ic-arrow-backward.svg'
+import { ReactComponent as RefreshIcon } from '@Icons/ic-arrows_clockwise.svg'
+import close from '@Icons/ic-close.svg'
+import { ReactComponent as SearchIcon } from '@Icons/ic-search.svg'
 import noArtifact from '../../../../assets/img/no-artifact.webp'
 import { URLS } from '../../../../config'
 import { EMPTY_STATE_STATUS, TOAST_BUTTON_TEXT_VIEW_DETAILS } from '../../../../config/constantMessaging'
@@ -1693,16 +1689,20 @@ const CDMaterial = ({
             return null
         }
         if (stageType !== STAGE_TYPE.CD) {
-            return <PlayIC />
+            return <Icon name="ic-play-outline" color={null} />
         }
-        return <DeployIcon />
+        return <Icon name="ic-rocket-launch" color={null} />
     }
 
-    const getDeployButtonStyle = (userActionState: string): ButtonStyleType => {
+    const getDeployButtonStyle = (
+        userActionState: string,
+        canDeployWithoutApproval: boolean,
+        canImageApproverDeploy: boolean,
+    ): ButtonStyleType => {
         if (userActionState === ACTION_STATE.BLOCKED) {
             return ButtonStyleType.negative
         }
-        if (userActionState === ACTION_STATE.PARTIAL) {
+        if (userActionState === ACTION_STATE.PARTIAL || canDeployWithoutApproval || canImageApproverDeploy) {
             return ButtonStyleType.warning
         }
         return ButtonStyleType.default
@@ -1733,35 +1733,32 @@ const CDMaterial = ({
         const canDeployWithoutApproval = getCanDeployWithoutApproval(state, isExceptionUser)
         const canImageApproverDeploy = getCanImageApproverDeploy(state, canApproverDeploy, isExceptionUser)
 
-        const showAnimatedDeployButton =
-            isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
-
-        if (showAnimatedDeployButton) {
-            return (
-                <AnimatedDeployButton
-                    isLoading={deploymentLoading || isSaveLoading}
-                    onButtonClick={onClickDeploy}
-                    isVirtualEnvironment={isVirtualEnvironment}
-                    exceptionUserConfig={{
-                        canDeploy: canDeployWithoutApproval,
-                        isImageApprover: canImageApproverDeploy,
-                    }}
-                />
-            )
-        }
         return (
-            <Button
+            <AnimatedDeployButton
                 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)}
+                onButtonClick={(e) => onClickDeploy(e, disableDeployButton)}
+                startIcon={getDeployButtonIcon()}
+                text={
+                    canDeployWithoutApproval
+                        ? 'Deploy without approval'
+                        : `${
+                              userActionState === ACTION_STATE.BLOCKED
+                                  ? 'Deployment is blocked'
+                                  : CDButtonLabelMap[stageType]
+                          }${isVirtualEnvironment ? ' to isolated env' : ''}`
+                }
+                endIcon={userActionState === ACTION_STATE.BLOCKED ? <Icon name="ic-info-outline" color={null} /> : null}
+                style={getDeployButtonStyle(userActionState, canDeployWithoutApproval, canImageApproverDeploy)}
                 disabled={disableDeployButton}
+                tooltipContent={
+                    canDeployWithoutApproval || canImageApproverDeploy
+                        ? 'You are authorized to deploy as an exception user'
+                        : ''
+                }
+                animateStartIcon={
+                    isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
+                }
             />
         )
     }
diff --git a/src/components/charts/ChartHeaderFilters.tsx b/src/components/charts/ChartHeaderFilters.tsx
index acf2ab6eec..184e5f735b 100644
--- a/src/components/charts/ChartHeaderFilters.tsx
+++ b/src/components/charts/ChartHeaderFilters.tsx
@@ -250,13 +250,10 @@ const ChartHeaderFilter = ({
                     <div> Show deprecated charts</div>
                 </Checkbox>
                 {ChartCategoryFilters && (
-                    <>
-                        <hr className="mt-8 mb-8" />
-                        <ChartCategoryFilters
-                            selectedCategories={chartCategoryIds}
-                            handleUpdateCategoryFilter={handleUpdateCategoryFilter}
-                        />
-                    </>
+                    <ChartCategoryFilters
+                        selectedCategories={chartCategoryIds}
+                        handleUpdateCategoryFilter={handleUpdateCategoryFilter}
+                    />
                 )}
                 <hr className="mt-8 mb-8" />
                 <Accordian
diff --git a/src/components/common/navigation/NavRoutes.components.tsx b/src/components/common/navigation/NavRoutes.components.tsx
new file mode 100644
index 0000000000..46678234aa
--- /dev/null
+++ b/src/components/common/navigation/NavRoutes.components.tsx
@@ -0,0 +1,148 @@
+import { lazy, useEffect, useMemo, useState } from 'react'
+import { Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+import * as Sentry from '@sentry/browser'
+
+import {
+    AppListConstants,
+    ModuleNameMap,
+    ModuleStatus,
+    SERVER_MODE,
+    URLS as CommonURLS,
+    useAsync,
+    useMainContext,
+} from '@devtron-labs/devtron-fe-common-lib'
+
+import { getModuleInfo } from '@Components/v2/devtronStackManager/DevtronStackManager.service'
+import { URLS } from '@Config/routes'
+import { AppRouterType } from '@Services/service.types'
+
+import { ExternalFluxAppDetailsRoute } from '../../../Pages/App/Details/ExternalFlux'
+import { AppContext } from '../Contexts'
+import ErrorBoundary from '../errorBoundary'
+import { importComponentFromFELibrary } from '../helpers/Helpers'
+
+const ExternalApps = lazy(() => import('../../external-apps/ExternalApps'))
+const ExternalArgoApps = lazy(() => import('../../externalArgoApps/ExternalArgoApp'))
+const AppDetailsPage = lazy(() => import('../../app/details/main'))
+const NewAppList = lazy(() => import('../../app/list-new/AppList'))
+const DevtronChartRouter = lazy(() => import('../../v2/index'))
+
+const NetworkStatusInterface = importComponentFromFELibrary('NetworkStatusInterface', null, 'function')
+
+export const RedirectUserWithSentry = ({ isFirstLoginUser }: { isFirstLoginUser: boolean }) => {
+    const { push } = useHistory()
+    const { pathname } = useLocation()
+    const { serverMode } = useMainContext()
+    useEffect(() => {
+        if (pathname && pathname !== '/') {
+            Sentry.captureMessage(
+                `redirecting to ${window._env_.HIDE_NETWORK_STATUS_INTERFACE ? 'app-list' : 'network status interface'} from ${pathname}`,
+                'warning',
+            )
+        }
+
+        if (!window._env_.HIDE_NETWORK_STATUS_INTERFACE && !!NetworkStatusInterface) {
+            push(CommonURLS.NETWORK_STATUS_INTERFACE)
+            return
+        }
+
+        if (window._env_.K8S_CLIENT) {
+            push(URLS.RESOURCE_BROWSER)
+        } else if (isFirstLoginUser) {
+            push(URLS.GETTING_STARTED)
+        } else if (serverMode === SERVER_MODE.EA_ONLY && window._env_.FEATURE_DEFAULT_LANDING_RB_ENABLE) {
+            push(URLS.RESOURCE_BROWSER)
+        } else {
+            push(`${URLS.APP}/${URLS.APP_LIST}`)
+        }
+    }, [])
+    return null
+}
+
+const RedirectToAppList = () => {
+    const { replace } = useHistory()
+    const { serverMode } = useMainContext()
+    useEffect(() => {
+        const baseUrl = `${URLS.APP}/${URLS.APP_LIST}`
+        if (serverMode === SERVER_MODE.FULL) {
+            replace(`${baseUrl}/${AppListConstants.AppType.DEVTRON_APPS}`)
+        } else {
+            replace(`${baseUrl}/${AppListConstants.AppType.HELM_APPS}`)
+        }
+    }, [])
+    return null
+}
+
+const AppListRouter = ({ isSuperAdmin, appListCount, loginCount }: AppRouterType) => {
+    const { path } = useRouteMatch()
+    const [, argoInfoData] = useAsync(() => getModuleInfo(ModuleNameMap.ARGO_CD))
+    const isArgoInstalled: boolean = argoInfoData?.result?.status === ModuleStatus.INSTALLED
+
+    return (
+        <ErrorBoundary>
+            <Switch>
+                <Route path={`${path}/:appType`} render={() => <NewAppList isArgoInstalled={isArgoInstalled} />} />
+                <Route exact path="">
+                    <RedirectToAppList />
+                </Route>
+                <Route>
+                    <RedirectUserWithSentry isFirstLoginUser={isSuperAdmin && loginCount === 0 && appListCount === 0} />
+                </Route>
+            </Switch>
+        </ErrorBoundary>
+    )
+}
+
+export const AppRouter = ({ isSuperAdmin, appListCount, loginCount }: AppRouterType) => {
+    const { path } = useRouteMatch()
+    const [environmentId, setEnvironmentId] = useState(null)
+    const [currentAppName, setCurrentAppName] = useState<string>('')
+
+    const appContextValue = useMemo(
+        () => ({ environmentId, setEnvironmentId, currentAppName, setCurrentAppName }),
+        [environmentId, currentAppName],
+    )
+
+    return (
+        <ErrorBoundary>
+            <AppContext.Provider value={appContextValue}>
+                <Switch>
+                    <Route
+                        path={`${path}/${URLS.APP_LIST}`}
+                        render={() => (
+                            <AppListRouter
+                                isSuperAdmin={isSuperAdmin}
+                                appListCount={appListCount}
+                                loginCount={loginCount}
+                            />
+                        )}
+                    />
+                    <Route path={`${path}/${URLS.EXTERNAL_APPS}/:appId/:appName`} render={() => <ExternalApps />} />
+                    <Route
+                        path={`${path}/${URLS.EXTERNAL_ARGO_APP}/:clusterId(\\d+)/:appName/:namespace`}
+                        render={() => <ExternalArgoApps />}
+                    />
+                    {window._env_.FEATURE_EXTERNAL_FLUX_CD_ENABLE && (
+                        <Route path={`${path}/${URLS.EXTERNAL_FLUX_APP}/:clusterId/:appName/:namespace/:templateType`}>
+                            <ExternalFluxAppDetailsRoute />
+                        </Route>
+                    )}
+                    <Route
+                        path={`${path}/${URLS.DEVTRON_CHARTS}/deployments/:appId(\\d+)/env/:envId(\\d+)`}
+                        render={() => <DevtronChartRouter />}
+                    />
+                    <Route path={`${path}/:appId(\\d+)`} render={() => <AppDetailsPage />} />
+
+                    <Route exact path="">
+                        <RedirectToAppList />
+                    </Route>
+                    <Route>
+                        <RedirectUserWithSentry
+                            isFirstLoginUser={isSuperAdmin && loginCount === 0 && appListCount === 0}
+                        />
+                    </Route>
+                </Switch>
+            </AppContext.Provider>
+        </ErrorBoundary>
+    )
+}
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index 44ad53b9bb..27d05d92db 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -14,52 +14,58 @@
  * limitations under the License.
  */
 
-import { lazy, Suspense, useEffect, useState, useRef, useMemo, FunctionComponent } from 'react'
+import { FunctionComponent, lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react'
+import ReactGA from 'react-ga4'
+import TagManager from 'react-gtm-module'
+import { Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
+import * as Sentry from '@sentry/browser'
+
 import {
-    useUserEmail,
-    showError,
-    Host,
-    Reload,
-    useAsync,
+    AboutDevtronDialog,
+    animate,
+    AppThemeType,
+    BaseConfirmationModal,
+    ConfirmationModalProvider,
+    DEVTRON_BASE_MAIN_ID,
+    DevtronLicenseInfo,
     DevtronProgressing,
-    useMainContext,
-    MainContextProvider,
-    ImageSelectionUtilityProvider,
-    URLS as CommonURLS,
-    AppListConstants,
+    EnvironmentDataValuesDTO,
+    ErrorScreenManager,
     getEnvironmentData,
-    DEVTRON_BASE_MAIN_ID,
-    MainContext,
     getHashedValue,
-    ServerErrors,
-    ViewIsPipelineRBACConfiguredRadioTabs,
-    EnvironmentDataValuesDTO,
-    UserPreferencesType,
-    useTheme,
-    AppThemeType,
-    LicenseInfoDialogType,
-    DevtronLicenseInfo,
-    useUserPreferences,
-    AboutDevtronDialog,
+    Host,
+    ImageSelectionUtilityProvider,
+    InstallationType,
     IntelligenceConfig,
+    LicenseInfoDialogType,
+    logExceptionToSentry,
+    MainContext,
+    MainContextProvider,
+    ModuleNameMap,
+    ModuleStatus,
     motion,
+    noop,
+    ServerErrors,
+    showError,
     SidePanelConfig,
-    InstallationType,
-    useMotionValue,
-    useMotionTemplate,
-    SwitchThemeDialogProps,
     SwitchThemeDialog,
-    ConfirmationModalProvider,
-    BaseConfirmationModal,
+    SwitchThemeDialogProps,
+    ToastManager,
+    ToastVariantType,
+    URLS as CommonURLS,
+    useMotionTemplate,
+    useMotionValue,
+    UserPreferencesType,
+    useTheme,
+    useUserEmail,
+    useUserPreferences,
+    ViewIsPipelineRBACConfiguredRadioTabs,
 } from '@devtron-labs/devtron-fe-common-lib'
-import { Route, Switch, useRouteMatch, useHistory, useLocation } from 'react-router-dom'
-import * as Sentry from '@sentry/browser'
-import ReactGA from 'react-ga4'
-import TagManager from 'react-gtm-module'
-import Navigation from './Navigation'
-import { ErrorBoundary, AppContext } from '..'
-import { URLS, ViewType, SERVER_MODE, ModuleNameMap } from '../../../config'
-import { Security } from '../../security/Security'
+
+import { getUserRole } from '@Pages/GlobalConfigurations/Authorization/authorization.service'
+import { Configurations } from '@Pages/Releases/Detail'
+
+import { SERVER_MODE, URLS, ViewType } from '../../../config'
 import {
     dashboardLoggedIn,
     getAppListMin,
@@ -67,33 +73,28 @@ import {
     getLoginData,
     updateLoginCount,
 } from '../../../services/service'
-import { Configurations } from '@Pages/Releases/Detail'
-import { ModuleStatus } from '../../v2/devtronStackManager/DevtronStackManager.type'
+import { LoginCountType } from '../../../services/service.types'
+import { HelmAppListResponse } from '../../app/list-new/AppListType'
+import { LOGIN_COUNT, MAX_LOGIN_COUNT } from '../../onboardingGuide/onboarding.utils'
+import { Security } from '../../security/Security'
 import {
     getAllModulesInfo,
     getModuleInfo,
     getServerInfo,
 } from '../../v2/devtronStackManager/DevtronStackManager.service'
-import { importComponentFromFELibrary, setActionWithExpiry } from '../helpers/Helpers'
-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 { ExternalFluxAppDetailsRoute } from '../../../Pages/App/Details/ExternalFlux'
-
+import { Banner } from '../Banner/Banner'
 import { TAB_DATA_LOCAL_STORAGE_KEY } from '../DynamicTabs/constants'
-import { ENVIRONMENT_DATA_FALLBACK, INITIAL_ENV_DATA_STATE } from './constants'
 import { ParsedTabsData } from '../DynamicTabs/types'
-import { EnvironmentDataStateType, NavigationRoutesTypes } from './types'
-import { Banner } from '../Banner/Banner'
+import { importComponentFromFELibrary, setActionWithExpiry } from '../helpers/Helpers'
 import { SidePanel } from '../SidePanel'
+import { AppContext, ErrorBoundary } from '..'
+import { ENVIRONMENT_DATA_FALLBACK, INITIAL_ENV_DATA_STATE, NAVBAR_WIDTH } from './constants'
+import Navigation from './Navigation'
+import { AppRouter, RedirectUserWithSentry } from './NavRoutes.components'
+import { EnvironmentDataStateType, NavigationRoutesTypes } from './types'
 
 const Charts = lazy(() => import('../../charts/Charts'))
-const ExternalApps = lazy(() => import('../../external-apps/ExternalApps'))
-const ExternalArgoApps = lazy(() => import('../../externalArgoApps/ExternalArgoApp'))
-const AppDetailsPage = lazy(() => import('../../app/details/main'))
-const NewAppList = lazy(() => import('../../app/list-new/AppList'))
-const DevtronChartRouter = lazy(() => import('../../v2/index'))
+
 const GlobalConfig = lazy(() => import('../../globalConfigurations/GlobalConfiguration'))
 const BulkEdit = lazy(() => import('../../bulkEdits/BulkEdits'))
 const ResourceBrowser = lazy(() => import('../../ResourceBrowser/ResourceBrowserRouter'))
@@ -112,7 +113,6 @@ const SoftwareDistributionHubRenderProvider = importComponentFromFELibrary(
 )
 const migrateUserPreferences: (userPreferences: UserPreferencesType) => Promise<UserPreferencesType> =
     importComponentFromFELibrary('migrateUserPreferences', null, 'function')
-const AIChat = importComponentFromFELibrary('AIChat', null, 'function')
 const isFELibAvailable = importComponentFromFELibrary('isFELibAvailable', null, 'function')
 
 const ViewIsPipelineRBACConfigured: FunctionComponent<{
@@ -123,7 +123,7 @@ const ViewIsPipelineRBACConfigured: FunctionComponent<{
 const LicenseInfoDialog = importComponentFromFELibrary('LicenseInfoDialog', null, 'function')
 const AIResponseWidget = importComponentFromFELibrary('AIResponseWidget', null, 'function')
 
-export default function NavigationRoutes({ reloadVersionConfig }: Readonly<NavigationRoutesTypes>) {
+const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesTypes>) => {
     const history = useHistory()
     const location = useLocation()
     const match = useRouteMatch()
@@ -164,6 +164,18 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
         reinitialize: false,
     })
     const asideWidth = useMotionValue(0)
+    const navBarWidth = useMotionValue(0)
+
+    useEffect(() => {
+        if (pageState === ViewType.FORM) {
+            const controls = animate(navBarWidth, NAVBAR_WIDTH, {
+                duration: 0.3,
+                ease: 'easeOut',
+            })
+            return controls.stop
+        }
+        return noop
+    }, [pageState])
 
     const {
         userPreferences,
@@ -180,20 +192,8 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
         setLicenseInfoDialogType(null)
     }
 
-    const getInit = async (_serverMode: string) => {
-        const [userRole, appList, loginData] = await Promise.all([
-            getUserRole(),
-            _serverMode === SERVER_MODE.FULL ? getAppListMin() : null,
-            getLoginData(),
-        ])
-        const superAdmin = userRole?.result?.roles?.includes('role:super-admin___')
-        setSuperAdmin(superAdmin)
-        const appCount = appList?.result?.length || 0
-        setAppListCount(appCount)
-        await processLoginData(loginData, superAdmin, appCount)
-    }
-
-    const processLoginData = async (response, superAdmin, appListCount) => {
+    const processLoginData = async (response: LoginCountType, superAdmin: boolean, appCount: number) => {
+        // eslint-disable-next-line radix
         const count = response.result?.value ? parseInt(response.result.value) : 0
         setLoginCount(count)
         if (
@@ -207,12 +207,12 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                     key: LOGIN_COUNT,
                     value: `${count + 1}`,
                 }
-                updateLoginCount(updatedPayload)
+                await updateLoginCount(updatedPayload)
             }
         }
 
         // Check for external app count also before redirecting user on GETTING STARTED page
-        if (!count && superAdmin && appListCount === 0) {
+        if (!count && superAdmin && appCount === 0) {
             try {
                 const { result } = await getClusterListMinWithoutAuth()
                 if (Array.isArray(result) && result.length === 1) {
@@ -226,17 +226,30 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                         }
                         _sseConnection.close()
                     }
-                    _sseConnection.onerror = (err) => {
+                    _sseConnection.onerror = () => {
                         _sseConnection.close()
                         history.push(`/${URLS.GETTING_STARTED}`)
                     }
                 }
-            } catch (e) {
+            } catch {
                 history.push(`/${URLS.GETTING_STARTED}`)
             }
         }
     }
 
+    const getInit = async (_serverMode: string) => {
+        const [userRole, appList, loginData] = await Promise.all([
+            getUserRole(),
+            _serverMode === SERVER_MODE.FULL ? getAppListMin() : null,
+            getLoginData(),
+        ])
+        const superAdmin = userRole?.result?.roles?.includes('role:super-admin___')
+        setSuperAdmin(superAdmin)
+        const appCount = appList?.result?.length || 0
+        setAppListCount(appCount)
+        await processLoginData(loginData, superAdmin, appCount)
+    }
+
     const handleCloseSwitchThemeDialog: SwitchThemeDialogProps['handleClose'] = () => {
         handleThemeSwitcherDialogVisibilityChange(false)
     }
@@ -248,13 +261,14 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
 
         if (import.meta.env.VITE_NODE_ENV === 'production' && window._env_) {
             if (window._env_.SENTRY_ERROR_ENABLED) {
-                Sentry.configureScope(function (scope) {
+                Sentry.configureScope((scope) => {
                     scope.setUser({ email })
                 })
             }
             if (window._env_.GA_ENABLED) {
                 const path = location.pathname
                 // Using .then to use in useEffect
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
                 getHashedValue(email).then((hashedEmail) => {
                     ReactGA.initialize(window._env_.GA_TRACKING_ID, {
                         gaOptions: {
@@ -266,13 +280,13 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                         category: `Page ${path}`,
                         action: 'First Land',
                     })
-                    history.listen((location) => {
-                        let path = location.pathname
-                        path = path.replace(new RegExp('[0-9]', 'g'), '')
-                        path = path.replace(new RegExp('//', 'g'), '/')
-                        ReactGA.send({ hitType: 'pageview', page: path })
+                    history.listen((locationObj) => {
+                        let { pathname } = locationObj
+                        pathname = pathname.replace(/\d/g, '')
+                        pathname = pathname.replace(/\/\//g, '/')
+                        ReactGA.send({ hitType: 'pageview', page: pathname })
                         ReactGA.event({
-                            category: `Page ${path}`,
+                            category: `Page ${pathname}`,
                             action: 'First Land',
                         })
                     })
@@ -298,7 +312,7 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                         localStorage.isDashboardLoggedIn = true
                     }
                 })
-                .catch((errors) => {})
+                .catch(() => {})
         }
     }, [email])
 
@@ -333,7 +347,11 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                 serverInfo: currentServerInfo.serverInfo,
                 fetchingServerInfo: false,
             })
-            console.error('Error in fetching server info')
+            ToastManager.showToast({
+                variant: ToastVariantType.error,
+                description: 'Error in fetching server info',
+            })
+            logExceptionToSentry(err, { data: 'Error in fetching server info' })
         }
     }
 
@@ -351,18 +369,15 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                     result.featureGitOpsFlags?.isFeatureUserDefinedGitOpsEnabled || false,
             }
             return {
-                isAirGapEnvironment: result.isAirGapEnvironment ?? ENVIRONMENT_DATA_FALLBACK['isAirGapEnvironment'],
+                isAirGapEnvironment: result.isAirGapEnvironment ?? ENVIRONMENT_DATA_FALLBACK.isAirGapEnvironment,
                 isManifestScanningEnabled:
-                    result.isManifestScanningEnabled ?? ENVIRONMENT_DATA_FALLBACK['isManifestScanningEnabled'],
+                    result.isManifestScanningEnabled ?? ENVIRONMENT_DATA_FALLBACK.isManifestScanningEnabled,
                 canOnlyViewPermittedEnvOrgLevel:
-                    result.canOnlyViewPermittedEnvOrgLevel ??
-                    ENVIRONMENT_DATA_FALLBACK['canOnlyViewPermittedEnvOrgLevel'],
+                    result.canOnlyViewPermittedEnvOrgLevel ?? ENVIRONMENT_DATA_FALLBACK.canOnlyViewPermittedEnvOrgLevel,
                 featureGitOpsFlags: parsedFeatureGitOpsFlags,
-                canFetchHelmAppStatus:
-                    result.canFetchHelmAppStatus ?? ENVIRONMENT_DATA_FALLBACK['canFetchHelmAppStatus'],
+                canFetchHelmAppStatus: result.canFetchHelmAppStatus ?? ENVIRONMENT_DATA_FALLBACK.canFetchHelmAppStatus,
                 devtronManagedLicensingEnabled:
-                    result.devtronManagedLicensingEnabled ??
-                    ENVIRONMENT_DATA_FALLBACK['devtronManagedLicensingEnabled'],
+                    result.devtronManagedLicensingEnabled ?? ENVIRONMENT_DATA_FALLBACK.devtronManagedLicensingEnabled,
             }
         } catch {
             return ENVIRONMENT_DATA_FALLBACK
@@ -402,6 +417,7 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
             setPageState(ViewType.FORM)
             setServerMode(SERVER_MODE.EA_ONLY)
         } else {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
             handleFetchInitialData()
         }
     }, [])
@@ -429,22 +445,9 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
     const isOnboardingPage = getIsOnboardingPage()
 
     const gridTemplateColumns = !isOnboardingPage
-        ? useMotionTemplate`56px 1fr ${asideWidth}px`
+        ? useMotionTemplate`${navBarWidth}px 1fr ${asideWidth}px`
         : useMotionTemplate`1fr ${asideWidth}px`
 
-    if (pageState === ViewType.LOADING) {
-        return (
-            <div className="full-height-width">
-                <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
-            </div>
-        )
-    }
-
-    if (pageState === ViewType.ERROR) {
-        // 100vh is required for covering the full height of the page as this is the top level component
-        return <Reload className="h-100vh bg__tertiary" />
-    }
-
     const handleOpenLicenseInfoDialog = (
         initialDialogTab?: LicenseInfoDialogType.ABOUT | LicenseInfoDialogType.LICENSE,
     ) => {
@@ -463,10 +466,150 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                 initialDialogType={licenseInfoDialogType}
             />
         ) : (
-            <AboutDevtronDialog
-                handleCloseLicenseInfoDialog={handleCloseLicenseInfoDialog}
-                isFELibAvailable={!!LicenseInfoDialog}
-            />
+            <AboutDevtronDialog handleCloseLicenseInfoDialog={handleCloseLicenseInfoDialog} />
+        )
+    }
+
+    const renderMainContent = () => {
+        if (pageState === ViewType.LOADING) {
+            return <DevtronProgressing parentClasses="flex flex-grow-1 bg__primary" classes="icon-dim-80" />
+        }
+
+        if (pageState === ViewType.ERROR) {
+            return <ErrorScreenManager />
+        }
+
+        return (
+            serverMode && (
+                <>
+                    <Banner />
+                    <div className="flexbox-col flex-grow-1 dc__overflow-auto">
+                        <Suspense
+                            fallback={
+                                <DevtronProgressing
+                                    parentClasses="flex flex-grow-1 bg__primary"
+                                    classes="icon-dim-80"
+                                />
+                            }
+                        >
+                            <ErrorBoundary>
+                                <Switch>
+                                    <Route key={URLS.RESOURCE_BROWSER} path={URLS.RESOURCE_BROWSER}>
+                                        <ResourceBrowser />
+                                    </Route>
+                                    <Route
+                                        path={CommonURLS.GLOBAL_CONFIG}
+                                        render={(props) => <GlobalConfig {...props} isSuperAdmin={isSuperAdmin} />}
+                                    />
+                                    {!window._env_.K8S_CLIENT && [
+                                        <Route
+                                            key={URLS.APP}
+                                            path={URLS.APP}
+                                            render={() => (
+                                                <AppRouter
+                                                    isSuperAdmin={isSuperAdmin}
+                                                    appListCount={appListCount}
+                                                    loginCount={loginCount}
+                                                />
+                                            )}
+                                        />,
+                                        <Route key={URLS.APPLICATION_GROUP} path={URLS.APPLICATION_GROUP}>
+                                            <AppGroupRoute isSuperAdmin={isSuperAdmin} />
+                                        </Route>,
+                                        <Route
+                                            key={URLS.CHARTS}
+                                            path={URLS.CHARTS}
+                                            render={() => <Charts isSuperAdmin={isSuperAdmin} />}
+                                        />,
+                                        <Route
+                                            key={URLS.BULK_EDITS}
+                                            path={URLS.BULK_EDITS}
+                                            render={(props) => <BulkEdit {...props} serverMode={serverMode} />}
+                                        />,
+                                        <Route
+                                            key={URLS.SECURITY}
+                                            path={URLS.SECURITY}
+                                            render={(props) => <Security {...props} serverMode={serverMode} />}
+                                        />,
+                                        ...(!window._env_.HIDE_RESOURCE_WATCHER && ResourceWatcherRouter
+                                            ? [
+                                                  <Route key={URLS.RESOURCE_WATCHER} path={URLS.RESOURCE_WATCHER}>
+                                                      <ResourceWatcherRouter />
+                                                  </Route>,
+                                              ]
+                                            : []),
+                                        ...(!window._env_.HIDE_RELEASES && SoftwareDistributionHub
+                                            ? [
+                                                  <Route
+                                                      key={URLS.SOFTWARE_DISTRIBUTION_HUB}
+                                                      path={URLS.SOFTWARE_DISTRIBUTION_HUB}
+                                                  >
+                                                      <ImageSelectionUtilityProvider
+                                                          value={{
+                                                              getModuleInfo,
+                                                          }}
+                                                      >
+                                                          <SoftwareDistributionHubRenderProvider
+                                                              renderers={{
+                                                                  ReleaseConfigurations: Configurations,
+                                                              }}
+                                                          >
+                                                              <SoftwareDistributionHub />
+                                                          </SoftwareDistributionHubRenderProvider>
+                                                      </ImageSelectionUtilityProvider>
+                                                  </Route>,
+                                              ]
+                                            : []),
+                                        ...(!window._env_.HIDE_NETWORK_STATUS_INTERFACE && NetworkStatusInterface
+                                            ? [
+                                                  <Route
+                                                      key={CommonURLS.NETWORK_STATUS_INTERFACE}
+                                                      path={CommonURLS.NETWORK_STATUS_INTERFACE}
+                                                  >
+                                                      <NetworkStatusInterface />
+                                                  </Route>,
+                                              ]
+                                            : []),
+                                        ...(showStackManager
+                                            ? [
+                                                  <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}`}>
+                                            <OnboardingGuide
+                                                loginCount={loginCount}
+                                                isSuperAdmin={isSuperAdmin}
+                                                serverMode={serverMode}
+                                                isGettingStartedClicked={isGettingStartedClicked}
+                                            />
+                                        </Route>,
+                                    ]}
+                                    {/* TODO: Check why its coming as empty in case route is in other library */}
+                                    {!window._env_.K8S_CLIENT && (
+                                        <Route path={URLS.JOB} key={URLS.JOB}>
+                                            <AppContext.Provider value={contextValue}>
+                                                <Jobs />
+                                            </AppContext.Provider>
+                                        </Route>
+                                    )}
+                                    <Route>
+                                        <RedirectUserWithSentry
+                                            isFirstLoginUser={isSuperAdmin && loginCount === 0 && appListCount === 0}
+                                        />
+                                    </Route>
+                                </Switch>
+                                {AIResponseWidget && intelligenceConfig && <AIResponseWidget parentRef={navRouteRef} />}
+                            </ErrorBoundary>
+                        </Suspense>
+                    </div>
+                </>
+            )
         )
     }
 
@@ -521,14 +664,6 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
             <ConfirmationModalProvider>
                 <BaseConfirmationModal />
                 <motion.main id={DEVTRON_BASE_MAIN_ID} style={{ gridTemplateColumns }}>
-                    {showThemeSwitcherDialog && (
-                        <SwitchThemeDialog
-                            initialThemePreference={userPreferences?.themePreference}
-                            handleClose={handleCloseSwitchThemeDialog}
-                            handleUpdateUserThemePreference={handleUpdateUserThemePreference}
-                        />
-                    )}
-                    {renderAboutDevtronDialog()}
                     {!isOnboardingPage && (
                         <Navigation
                             currentServerInfo={currentServerInfo}
@@ -543,275 +678,27 @@ export default function NavigationRoutes({ reloadVersionConfig }: Readonly<Navig
                             showStackManager={showStackManager}
                         />
                     )}
-                    {serverMode && (
-                        <>
-                            <div
-                                className={`main flexbox-col bg__primary ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} br-6 dc__overflow-hidden mt-8 mb-8 ml-8 ${sidePanelConfig.state === 'closed' ? 'mr-8' : ''}`}
-                                ref={navRouteRef}
-                            >
-                                <Banner />
-                                <div className="flexbox-col flex-grow-1 dc__overflow-auto">
-                                    <Suspense
-                                        fallback={
-                                            <DevtronProgressing
-                                                parentClasses="h-100 flex bg__primary"
-                                                classes="icon-dim-80"
-                                            />
-                                        }
-                                    >
-                                        <ErrorBoundary>
-                                            <Switch>
-                                                <Route key={URLS.RESOURCE_BROWSER} path={URLS.RESOURCE_BROWSER}>
-                                                    <ResourceBrowser />
-                                                </Route>
-                                                <Route
-                                                    path={CommonURLS.GLOBAL_CONFIG}
-                                                    render={(props) => (
-                                                        <GlobalConfig {...props} isSuperAdmin={isSuperAdmin} />
-                                                    )}
-                                                />
-                                                {!window._env_.K8S_CLIENT && [
-                                                    <Route
-                                                        key={URLS.APP}
-                                                        path={URLS.APP}
-                                                        render={() => (
-                                                            <AppRouter
-                                                                isSuperAdmin={isSuperAdmin}
-                                                                appListCount={appListCount}
-                                                                loginCount={loginCount}
-                                                            />
-                                                        )}
-                                                    />,
-                                                    <Route key={URLS.APPLICATION_GROUP} path={URLS.APPLICATION_GROUP}>
-                                                        <AppGroupRoute isSuperAdmin={isSuperAdmin} />
-                                                    </Route>,
-                                                    <Route
-                                                        key={URLS.CHARTS}
-                                                        path={URLS.CHARTS}
-                                                        render={() => <Charts isSuperAdmin={isSuperAdmin} />}
-                                                    />,
-                                                    <Route
-                                                        key={URLS.BULK_EDITS}
-                                                        path={URLS.BULK_EDITS}
-                                                        render={(props) => (
-                                                            <BulkEdit {...props} serverMode={serverMode} />
-                                                        )}
-                                                    />,
-                                                    <Route
-                                                        key={URLS.SECURITY}
-                                                        path={URLS.SECURITY}
-                                                        render={(props) => (
-                                                            <Security {...props} serverMode={serverMode} />
-                                                        )}
-                                                    />,
-                                                    ...(!window._env_.HIDE_RESOURCE_WATCHER && ResourceWatcherRouter
-                                                        ? [
-                                                              <Route
-                                                                  key={URLS.RESOURCE_WATCHER}
-                                                                  path={URLS.RESOURCE_WATCHER}
-                                                              >
-                                                                  <ResourceWatcherRouter />
-                                                              </Route>,
-                                                          ]
-                                                        : []),
-                                                    ...(!window._env_.HIDE_RELEASES && SoftwareDistributionHub
-                                                        ? [
-                                                              <Route
-                                                                  key={URLS.SOFTWARE_DISTRIBUTION_HUB}
-                                                                  path={URLS.SOFTWARE_DISTRIBUTION_HUB}
-                                                              >
-                                                                  <ImageSelectionUtilityProvider
-                                                                      value={{
-                                                                          getModuleInfo,
-                                                                      }}
-                                                                  >
-                                                                      <SoftwareDistributionHubRenderProvider
-                                                                          renderers={{
-                                                                              ReleaseConfigurations: Configurations,
-                                                                          }}
-                                                                      >
-                                                                          <SoftwareDistributionHub />
-                                                                      </SoftwareDistributionHubRenderProvider>
-                                                                  </ImageSelectionUtilityProvider>
-                                                              </Route>,
-                                                          ]
-                                                        : []),
-                                                    ...(!window._env_.HIDE_NETWORK_STATUS_INTERFACE &&
-                                                    NetworkStatusInterface
-                                                        ? [
-                                                              <Route
-                                                                  key={CommonURLS.NETWORK_STATUS_INTERFACE}
-                                                                  path={CommonURLS.NETWORK_STATUS_INTERFACE}
-                                                              >
-                                                                  <NetworkStatusInterface />
-                                                              </Route>,
-                                                          ]
-                                                        : []),
-                                                    ...(showStackManager
-                                                        ? [
-                                                              <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}`}
-                                                    >
-                                                        <OnboardingGuide
-                                                            loginCount={loginCount}
-                                                            isSuperAdmin={isSuperAdmin}
-                                                            serverMode={serverMode}
-                                                            isGettingStartedClicked={isGettingStartedClicked}
-                                                        />
-                                                    </Route>,
-                                                ]}
-                                                {/* TODO: Check why its coming as empty in case route is in other library */}
-                                                {!window._env_.K8S_CLIENT && (
-                                                    <Route path={URLS.JOB} key={URLS.JOB}>
-                                                        <AppContext.Provider value={contextValue}>
-                                                            <Jobs />
-                                                        </AppContext.Provider>
-                                                    </Route>
-                                                )}
-                                                <Route>
-                                                    <RedirectUserWithSentry
-                                                        isFirstLoginUser={
-                                                            isSuperAdmin && loginCount === 0 && appListCount === 0
-                                                        }
-                                                    />
-                                                </Route>
-                                            </Switch>
-                                            {AIResponseWidget && intelligenceConfig && (
-                                                <AIResponseWidget parentRef={navRouteRef} />
-                                            )}
-                                        </ErrorBoundary>
-                                    </Suspense>
-                                </div>
-                            </div>
-                            <SidePanel asideWidth={asideWidth} />
-                        </>
+                    <>
+                        <div
+                            className={`main flexbox-col bg__primary ${appTheme === AppThemeType.light ? 'dc__no-border' : 'border__primary-translucent'} br-6 dc__overflow-hidden mt-8 mb-8 ml-8 ${sidePanelConfig.state === 'closed' ? 'mr-8' : ''}`}
+                            ref={navRouteRef}
+                        >
+                            {renderMainContent()}
+                        </div>
+                        <SidePanel asideWidth={asideWidth} />
+                    </>
+                    {showThemeSwitcherDialog && (
+                        <SwitchThemeDialog
+                            initialThemePreference={userPreferences?.themePreference}
+                            handleClose={handleCloseSwitchThemeDialog}
+                            handleUpdateUserThemePreference={handleUpdateUserThemePreference}
+                        />
                     )}
+                    {renderAboutDevtronDialog()}
                 </motion.main>
             </ConfirmationModalProvider>
         </MainContextProvider>
     )
 }
 
-export const AppRouter = ({ isSuperAdmin, appListCount, loginCount }: AppRouterType) => {
-    const { path } = useRouteMatch()
-    const [environmentId, setEnvironmentId] = useState(null)
-    const [currentAppName, setCurrentAppName] = useState<string>('')
-
-    return (
-        <ErrorBoundary>
-            <AppContext.Provider value={{ environmentId, setEnvironmentId, currentAppName, setCurrentAppName }}>
-                <Switch>
-                    <Route
-                        path={`${path}/${URLS.APP_LIST}`}
-                        render={() => (
-                            <AppListRouter
-                                isSuperAdmin={isSuperAdmin}
-                                appListCount={appListCount}
-                                loginCount={loginCount}
-                            />
-                        )}
-                    />
-                    <Route path={`${path}/${URLS.EXTERNAL_APPS}/:appId/:appName`} render={() => <ExternalApps />} />
-                    <Route
-                        path={`${path}/${URLS.EXTERNAL_ARGO_APP}/:clusterId(\\d+)/:appName/:namespace`}
-                        render={() => <ExternalArgoApps />}
-                    />
-                    {window._env_.FEATURE_EXTERNAL_FLUX_CD_ENABLE && (
-                        <Route path={`${path}/${URLS.EXTERNAL_FLUX_APP}/:clusterId/:appName/:namespace/:templateType`}>
-                            <ExternalFluxAppDetailsRoute />
-                        </Route>
-                    )}
-                    <Route
-                        path={`${path}/${URLS.DEVTRON_CHARTS}/deployments/:appId(\\d+)/env/:envId(\\d+)`}
-                        render={(props) => <DevtronChartRouter />}
-                    />
-                    <Route path={`${path}/:appId(\\d+)`} render={() => <AppDetailsPage />} />
-
-                    <Route exact path="">
-                        <RedirectToAppList />
-                    </Route>
-                    <Route>
-                        <RedirectUserWithSentry
-                            isFirstLoginUser={isSuperAdmin && loginCount === 0 && appListCount === 0}
-                        />
-                    </Route>
-                </Switch>
-            </AppContext.Provider>
-        </ErrorBoundary>
-    )
-}
-
-export const AppListRouter = ({ isSuperAdmin, appListCount, loginCount }: AppRouterType) => {
-    const { path } = useRouteMatch()
-    const [, argoInfoData] = useAsync(() => getModuleInfo(ModuleNameMap.ARGO_CD))
-    const isArgoInstalled: boolean = argoInfoData?.result?.status === ModuleStatus.INSTALLED
-
-    return (
-        <ErrorBoundary>
-            <Switch>
-                <Route path={`${path}/:appType`} render={() => <NewAppList isArgoInstalled={isArgoInstalled} />} />
-                <Route exact path="">
-                    <RedirectToAppList />
-                </Route>
-                <Route>
-                    <RedirectUserWithSentry isFirstLoginUser={isSuperAdmin && loginCount === 0 && appListCount === 0} />
-                </Route>
-            </Switch>
-        </ErrorBoundary>
-    )
-}
-
-export const RedirectUserWithSentry = ({ isFirstLoginUser }) => {
-    const { push } = useHistory()
-    const { pathname } = useLocation()
-    const { serverMode } = useMainContext()
-    useEffect(() => {
-        if (pathname && pathname !== '/') {
-            Sentry.captureMessage(
-                `redirecting to ${window._env_.HIDE_NETWORK_STATUS_INTERFACE ? 'app-list' : 'network status interface'} from ${pathname}`,
-                'warning',
-            )
-        }
-
-        if (!window._env_.HIDE_NETWORK_STATUS_INTERFACE && !!NetworkStatusInterface) {
-            push(CommonURLS.NETWORK_STATUS_INTERFACE)
-            return
-        }
-
-        if (window._env_.K8S_CLIENT) {
-            push(URLS.RESOURCE_BROWSER)
-        } else if (isFirstLoginUser) {
-            push(URLS.GETTING_STARTED)
-        } else if (serverMode === SERVER_MODE.EA_ONLY && window._env_.FEATURE_DEFAULT_LANDING_RB_ENABLE) {
-            push(URLS.RESOURCE_BROWSER)
-        } else {
-            push(`${URLS.APP}/${URLS.APP_LIST}`)
-        }
-    }, [])
-    return null
-}
-
-export const RedirectToAppList = () => {
-    const { replace } = useHistory()
-    const { serverMode } = useMainContext()
-    useEffect(() => {
-        const baseUrl = `${URLS.APP}/${URLS.APP_LIST}`
-        if (serverMode == SERVER_MODE.FULL) {
-            replace(`${baseUrl}/${AppListConstants.AppType.DEVTRON_APPS}`)
-        } else {
-            replace(`${baseUrl}/${AppListConstants.AppType.HELM_APPS}`)
-        }
-    }, [])
-    return null
-}
+export default NavigationRoutes
diff --git a/src/components/common/navigation/constants.ts b/src/components/common/navigation/constants.ts
index 0676a55fa9..ac7e9642a5 100644
--- a/src/components/common/navigation/constants.ts
+++ b/src/components/common/navigation/constants.ts
@@ -41,3 +41,5 @@ export const INITIAL_ENV_DATA_STATE: EnvironmentDataStateType = {
     ...COMMON_ENV_FALLBACK,
     isAirgapped: structuredClone(ENVIRONMENT_DATA_FALLBACK).isAirGapEnvironment,
 }
+
+export const NAVBAR_WIDTH = 56
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
index 3851479c1a..1322e0e6bf 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.component.tsx
@@ -34,6 +34,9 @@ import {
     ComponentSizeType,
     ButtonVariantType,
     handleAnalyticsEvent,
+    Button,
+    ButtonStyleType,
+    Icon,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { ReactComponent as Error } from '../../../../assets/icons/ic-warning.svg'
@@ -56,11 +59,9 @@ import {
     DeleteApplicationButtonProps,
     DeploymentAppRadioGroupType,
     DeploymentAppSelectorType,
-    UpdateApplicationButtonProps,
     ValueNameInputType,
     gitOpsDrawerType,
 } from './ChartValuesView.type'
-import { UPDATE_APP_BUTTON_TEXTS } from './ChartValuesView.constants'
 import { DeploymentAppTypeNameMapping, REQUIRED_FIELD_MSG } from '../../../../config/constantMessaging'
 import { ReactComponent as ArgoCD } from '../../../../assets/icons/argo-cd-app.svg'
 import { ReactComponent as Helm } from '../../../../assets/icons/helm-app.svg'
@@ -717,74 +718,23 @@ export const DeleteApplicationButton = ({
     isDeleteInProgress,
     dispatch,
 }: DeleteApplicationButtonProps) => {
-    return (
-        <button
-            className="chart-values-view__delete-cta cta delete"
-            disabled={isUpdateInProgress || isDeleteInProgress}
-            onClick={(e) =>
-                dispatch({
-                    type: ChartValuesViewActionTypes.showDeleteAppConfirmationDialog,
-                    payload: true,
-                })
-            }
-            data-testid="delete-preset-value"
-        >
-            {isDeleteInProgress ? (
-                <div className="flex">
-                    <span>Deleting</span>
-                    <span className="ml-10">
-                        <Progressing />
-                    </span>
-                </div>
-            ) : (
-                `Delete ${type}`
-            )}
-        </button>
-    )
-}
-
-export const UpdateApplicationButton = ({
-    isUpdateInProgress,
-    isDeleteInProgress,
-    isDeployChartView,
-    isCreateValueView,
-    deployOrUpdateApplication,
-}: UpdateApplicationButtonProps) => {
-    const { chartValueId } = useParams<{ chartValueId: string }>()
+    const handleClick = () =>
+        dispatch({
+            type: ChartValuesViewActionTypes.showDeleteAppConfirmationDialog,
+            payload: true,
+        })
 
     return (
-        <button
-            type="button"
-            tabIndex={6}
-            disabled={isUpdateInProgress || isDeleteInProgress}
-            className={`cta ${isUpdateInProgress || isDeleteInProgress ? 'disabled' : ''}`}
-            onClick={deployOrUpdateApplication}
-            data-testid="preset-save-values-button"
-        >
-            {isUpdateInProgress ? (
-                <div className="flex">
-                    <span>
-                        {isCreateValueView
-                            ? `${UPDATE_APP_BUTTON_TEXTS.Saving} ${
-                                  chartValueId !== '0' ? UPDATE_APP_BUTTON_TEXTS.Changes : UPDATE_APP_BUTTON_TEXTS.Value
-                              }`
-                            : isDeployChartView
-                              ? UPDATE_APP_BUTTON_TEXTS.Deploying
-                              : UPDATE_APP_BUTTON_TEXTS.Updating}
-                    </span>
-                    <span className="ml-10">
-                        <Progressing />
-                    </span>
-                </div>
-            ) : isCreateValueView ? (
-                `${UPDATE_APP_BUTTON_TEXTS.Save} ${
-                    chartValueId !== '0' ? UPDATE_APP_BUTTON_TEXTS.Changes : UPDATE_APP_BUTTON_TEXTS.Value
-                }`
-            ) : isDeployChartView ? (
-                UPDATE_APP_BUTTON_TEXTS.Deploy
-            ) : (
-                UPDATE_APP_BUTTON_TEXTS.Update
-            )}
-        </button>
+        <Button
+            onClick={handleClick}
+            dataTestId="delete-preset-value"
+            startIcon={<Icon name='ic-delete' color={null} />}
+            isLoading={isDeleteInProgress}
+            disabled={isUpdateInProgress}
+            text={`Delete ${type}`}
+            variant={ButtonVariantType.secondary}
+            style={ButtonStyleType.negative}
+            fullWidth
+        />
     )
 }
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.constants.ts b/src/components/v2/values/chartValuesDiff/ChartValuesView.constants.ts
index 237cd49979..2bbcf9cb71 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.constants.ts
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.constants.ts
@@ -61,17 +61,6 @@ export const COMPARISON_OPTION_TIPPY_CONTENT = {
     EnabledManifest: 'Compare manifest output with previous deployments of this application',
 }
 
-export const UPDATE_APP_BUTTON_TEXTS = {
-    Deploy: 'Deploy chart',
-    Update: 'Update and deploy',
-    Deploying: 'Deploying chart',
-    Updating: 'Updating and deploying',
-    Save: 'Save',
-    Saving: 'Saving',
-    Changes: 'changes',
-    Value: 'value',
-}
-
 export const CONNECT_TO_HELM_CHART_TEXTS = {
     InfoTextHeading: 'Connect app to helm chart and deploy',
     InfoText: 'Manifest output is available only for applications deployed using a connected helm chart.',
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.scss b/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
index 754812fdae..261f79a2bf 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.scss
@@ -120,12 +120,6 @@
         }
       }
 
-      .chart-values-view__delete-cta {
-        position: absolute;
-        bottom: 12px;
-        width: 268px;
-      }
-
       .chart-deprecated-wrapper {
         padding: 10px 12px;
         line-height: 18px;
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
index 49c5a22194..cd89db19c3 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.tsx
@@ -43,6 +43,8 @@ import {
     InfoBlock,
     ButtonVariantType,
     handleAnalyticsEvent,
+    Icon,
+    AnimatedDeployButton,
 } from '@devtron-labs/devtron-fe-common-lib'
 import YAML from 'yaml'
 import Tippy from '@tippyjs/react'
@@ -75,7 +77,6 @@ import {
     ChartProjectSelector,
     ChartVersionValuesSelector,
     DeleteApplicationButton,
-    UpdateApplicationButton,
     AppNameInput,
     ValueNameInput,
     DeploymentAppSelector,
@@ -988,7 +989,7 @@ const ChartValuesView = ({
                     res = await updateAppReleaseWithoutLinking(payload)
                 }
             } else if (isDeployChartView) {
-                handleAnalyticsEvent({category: 'Chart Store', action: 'CS_CHART_CONFIGURE_&_DEPLOY_DEPLOY'})
+                handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_CONFIGURE_&_DEPLOY_DEPLOY' })
                 const payload = {
                     teamId: commonState.selectedProject.value,
                     referenceValueId: commonState.chartValues.id,
@@ -1122,7 +1123,7 @@ const ChartValuesView = ({
         if (_chartId) {
             history.push(getChartValuesURL(_chartId))
         }
-        handleAnalyticsEvent({category: 'Chart Store', action: 'CS_CHART_CONFIGURE_&_DEPLOY_NEW_PRESET_VALUE'})
+        handleAnalyticsEvent({ category: 'Chart Store', action: 'CS_CHART_CONFIGURE_&_DEPLOY_NEW_PRESET_VALUE' })
     }
 
     const handleTabSwitch = (e) => {
@@ -1538,6 +1539,17 @@ const ChartValuesView = ({
                         selectedChartValues={commonState.chartValues}
                     />
                 )}
+                <footer className="flexbox dc__content-end dc__border-top px-16 py-12">
+                    <AnimatedDeployButton
+                        dataTestId="preset-save-values-button"
+                        disabled={commonState.isUpdateInProgress || commonState.isDeleteInProgress}
+                        onButtonClick={deployOrUpdateApplication}
+                        isLoading={commonState.isUpdateInProgress}
+                        text={isCreateValueView ? `Save ${chartValueId !== '0' ? 'Changes' : 'Value'}` : 'Deploy'}
+                        {...(isCreateValueView ? {} : { startIcon: <Icon name="ic-rocket-launch" color={null} /> })}
+                        animateStartIcon={!isCreateValueView}
+                    />
+                </footer>
             </div>
         )
     }
@@ -1655,169 +1667,173 @@ const ChartValuesView = ({
             >
                 {renderValuesTabsContainer()}
                 <div className="chart-values-view__wrapper flexbox flex-grow-1 dc__overflow-hidden">
-                    <div className="flexbox-col dc__gap-16 chart-values-view__details dc__border-right dc__overflow-auto p-16">
-                        <div className="flexbox-col dc__gap-12">
-                            {isCreateValueView && (
-                                <ValueNameInput
-                                    valueName={valueName}
-                                    handleValueNameChange={handleValueNameChange}
-                                    handleValueNameOnBlur={handleNameOnBlur}
-                                    invalidValueName={commonState.invalidValueName}
-                                    invalidValueNameMessage={commonState.invalidValueNameMessage}
-                                    valueNameDisabled={chartValueId !== '0'}
-                                />
-                            )}
-                            {isDeployChartView && (
-                                <AppNameInput
-                                    appName={appName}
-                                    handleAppNameChange={handleAppNameChange}
-                                    handleAppNameOnBlur={handleNameOnBlur}
-                                    invalidAppName={commonState.invalidAppName}
-                                    invalidAppNameMessage={commonState.invalidAppNameMessage}
-                                />
-                            )}
-                            {!isDeployChartView && !isCreateValueView && (
-                                <div className="w-100">
-                                    <div className="fs-12 fw-4 lh-20 cn-7" data-testid="project-heading">
-                                        Project
+                    <div className="flexbox-col dc__content-space chart-values-view__details dc__border-right dc__overflow-auto p-16">
+                        <div className="flexbox-col dc__gap-16">
+                            <div className="flexbox-col dc__gap-12">
+                                {isCreateValueView && (
+                                    <ValueNameInput
+                                        valueName={valueName}
+                                        handleValueNameChange={handleValueNameChange}
+                                        handleValueNameOnBlur={handleNameOnBlur}
+                                        invalidValueName={commonState.invalidValueName}
+                                        invalidValueNameMessage={commonState.invalidValueNameMessage}
+                                        valueNameDisabled={chartValueId !== '0'}
+                                    />
+                                )}
+                                {isDeployChartView && (
+                                    <AppNameInput
+                                        appName={appName}
+                                        handleAppNameChange={handleAppNameChange}
+                                        handleAppNameOnBlur={handleNameOnBlur}
+                                        invalidAppName={commonState.invalidAppName}
+                                        invalidAppNameMessage={commonState.invalidAppNameMessage}
+                                    />
+                                )}
+                                {!isDeployChartView && !isCreateValueView && (
+                                    <div className="w-100">
+                                        <div className="fs-12 fw-4 lh-20 cn-7" data-testid="project-heading">
+                                            Project
+                                        </div>
+                                        <div
+                                            className="flex left dc__content-space fs-13 fw-6 lh-20 cn-9"
+                                            data-testid="project-value"
+                                        >
+                                            {appMetaInfo?.projectName ? appMetaInfo.projectName : 'unassigned'}
+                                            <Edit
+                                                className="icon-dim-20 cursor"
+                                                onClick={toggleChangeProjectModal}
+                                                data-testid="edit-project-icon"
+                                            />
+                                        </div>
                                     </div>
-                                    <div
-                                        className="flex left dc__content-space fs-13 fw-6 lh-20 cn-9"
-                                        data-testid="project-value"
-                                    >
-                                        {appMetaInfo?.projectName ? appMetaInfo.projectName : 'unassigned'}
-                                        <Edit
-                                            className="icon-dim-20 cursor"
-                                            onClick={toggleChangeProjectModal}
-                                            data-testid="edit-project-icon"
+                                )}
+                                {!isDeployChartView && showUpdateAppModal && !isCreateValueView && (
+                                    <div className="app-overview-container display-grid bg__primary dc__overflow-hidden">
+                                        <ProjectUpdateModal
+                                            appId={appId}
+                                            appMetaInfo={appMetaInfo}
+                                            installedAppId={commonState.installedConfig?.installedAppId}
+                                            onClose={toggleChangeProjectModal}
+                                            projectList={commonState.projects}
+                                            getAppMetaInfoRes={getHelmAppMetaInfoRes}
                                         />
                                     </div>
-                                </div>
-                            )}
-                            {!isDeployChartView && showUpdateAppModal && !isCreateValueView && (
-                                <div className="app-overview-container display-grid bg__primary dc__overflow-hidden">
-                                    <ProjectUpdateModal
-                                        appId={appId}
-                                        appMetaInfo={appMetaInfo}
-                                        installedAppId={commonState.installedConfig?.installedAppId}
-                                        onClose={toggleChangeProjectModal}
-                                        projectList={commonState.projects}
-                                        getAppMetaInfoRes={getHelmAppMetaInfoRes}
+                                )}
+                                {isDeployChartView && (
+                                    <ChartProjectSelector
+                                        selectedProject={commonState.selectedProject}
+                                        handleProjectSelection={handleProjectSelection}
+                                        projects={commonState.projects}
+                                        invalidProject={commonState.invalidProject}
                                     />
-                                </div>
-                            )}
-                            {isDeployChartView && (
-                                <ChartProjectSelector
-                                    selectedProject={commonState.selectedProject}
-                                    handleProjectSelection={handleProjectSelection}
-                                    projects={commonState.projects}
-                                    invalidProject={commonState.invalidProject}
-                                />
-                            )}
-                            {(isDeployChartView ||
-                                (!isDeployChartView && (isExternalApp || commonState.selectedEnvironment))) && (
-                                <ChartEnvironmentSelector
-                                    isExternal={isExternalApp}
-                                    isDeployChartView={isDeployChartView}
-                                    installedAppInfo={commonState.installedAppInfo}
-                                    releaseInfo={commonState.releaseInfo}
-                                    isUpdate={!!isUpdate}
-                                    selectedEnvironment={commonState.selectedEnvironment}
-                                    handleEnvironmentSelection={handleEnvironmentSelection}
-                                    environments={commonState.environments}
-                                    invalidEnvironment={commonState.invalidaEnvironment}
-                                    isVirtualEnvironmentOnSelector={isVirtualEnvironmentOnSelector}
-                                    isVirtualEnvironment={appDetails?.isVirtualEnvironment}
-                                />
-                            )}
-                            {!window._env_.HIDE_GITOPS_OR_HELM_OPTION && showDeploymentTools && (
-                                <DeploymentAppSelector
-                                    commonState={commonState}
-                                    isUpdate={isUpdate}
-                                    handleDeploymentAppTypeSelection={handleDeploymentAppTypeSelection}
-                                    isDeployChartView={isDeployChartView}
-                                    allowedDeploymentTypes={allowedDeploymentTypes}
-                                    gitRepoURL={installedConfigFromParent['gitRepoURL']}
-                                    allowedCustomBool={allowedCustomBool}
-                                />
-                            )}
-
-                            {allowedCustomBool && showDeploymentTools && (
-                                <GitOpsDrawer
-                                    commonState={commonState}
-                                    deploymentAppType={commonState.deploymentAppType}
-                                    allowedDeploymentTypes={allowedDeploymentTypes}
-                                    staleData={staleData}
-                                    setStaleData={setStaleData}
-                                    dispatch={dispatch}
-                                    isDrawerOpen={isDrawerOpen}
-                                    handleDrawerState={handleDrawerState}
-                                    showRepoSelector={showRepoSelector}
-                                    allowedCustomBool={allowedCustomBool}
-                                />
-                            )}
-                        </div>
-                        <div className="dc__border-bottom-n1" />
-                        <div className="flexbox-col dc__gap-12">
-                            {/**
-                             * ChartRepoSelector will be displayed only when,
-                             * - It's not a deploy chart view
-                             * - It's not an external app values view
-                             * - It's an external app which is,
-                             *   i. Already linked to a chart repo
-                             *  ii. Not already linked but connect to repo action is performed (showRepoSelector is set to true)
-                             */}
-                            {!isDeployChartView &&
-                                (!isExternalApp || commonState.installedAppInfo || commonState.showRepoSelector) && (
-                                    <ChartRepoSelector
+                                )}
+                                {(isDeployChartView ||
+                                    (!isDeployChartView && (isExternalApp || commonState.selectedEnvironment))) && (
+                                    <ChartEnvironmentSelector
                                         isExternal={isExternalApp}
-                                        isUpdate={!!isUpdate}
+                                        isDeployChartView={isDeployChartView}
                                         installedAppInfo={commonState.installedAppInfo}
-                                        handleRepoChartValueChange={handleRepoChartValueChange}
-                                        repoChartValue={commonState.repoChartValue}
-                                        chartDetails={commonState.repoChartValue}
+                                        releaseInfo={commonState.releaseInfo}
+                                        isUpdate={!!isUpdate}
+                                        selectedEnvironment={commonState.selectedEnvironment}
+                                        handleEnvironmentSelection={handleEnvironmentSelection}
+                                        environments={commonState.environments}
+                                        invalidEnvironment={commonState.invalidaEnvironment}
+                                        isVirtualEnvironmentOnSelector={isVirtualEnvironmentOnSelector}
+                                        isVirtualEnvironment={appDetails?.isVirtualEnvironment}
+                                    />
+                                )}
+                                {!window._env_.HIDE_GITOPS_OR_HELM_OPTION && showDeploymentTools && (
+                                    <DeploymentAppSelector
+                                        commonState={commonState}
+                                        isUpdate={isUpdate}
+                                        handleDeploymentAppTypeSelection={handleDeploymentAppTypeSelection}
+                                        isDeployChartView={isDeployChartView}
+                                        allowedDeploymentTypes={allowedDeploymentTypes}
+                                        gitRepoURL={installedConfigFromParent['gitRepoURL']}
+                                        allowedCustomBool={allowedCustomBool}
+                                    />
+                                )}
+
+                                {allowedCustomBool && showDeploymentTools && (
+                                    <GitOpsDrawer
+                                        commonState={commonState}
+                                        deploymentAppType={commonState.deploymentAppType}
+                                        allowedDeploymentTypes={allowedDeploymentTypes}
+                                        staleData={staleData}
+                                        setStaleData={setStaleData}
+                                        dispatch={dispatch}
+                                        isDrawerOpen={isDrawerOpen}
+                                        handleDrawerState={handleDrawerState}
+                                        showRepoSelector={showRepoSelector}
+                                        allowedCustomBool={allowedCustomBool}
                                     />
                                 )}
-                            {!isDeployChartView &&
-                                isExternalApp &&
-                                !commonState.installedAppInfo &&
-                                !commonState.showRepoSelector &&
-                                renderConnectToHelmChartInfoBlock()}
-                            {renderGeneratedDownloadManifest()}
-                            {(!isExternalApp ||
-                                commonState.installedAppInfo ||
-                                commonState.repoChartValue?.chartRepoName) && (
-                                <ChartVersionValuesSelector
-                                    isUpdate={isUpdate}
-                                    selectedVersion={commonState.selectedVersion}
-                                    selectedVersionUpdatePage={commonState.selectedVersionUpdatePage}
-                                    handleVersionSelection={handleVersionSelection}
-                                    chartVersionsData={commonState.chartVersionsData}
-                                    chartVersionObj={commonState.chartVersionsData.find(
-                                        (_chartVersion) => _chartVersion.id === commonState.selectedVersion,
+                            </div>
+                            <div className="dc__border-bottom-n1" />
+                            <div className="flexbox-col dc__gap-12">
+                                {/**
+                                 * ChartRepoSelector will be displayed only when,
+                                 * - It's not a deploy chart view
+                                 * - It's not an external app values view
+                                 * - It's an external app which is,
+                                 *   i. Already linked to a chart repo
+                                 *  ii. Not already linked but connect to repo action is performed (showRepoSelector is set to true)
+                                 */}
+                                {!isDeployChartView &&
+                                    (!isExternalApp ||
+                                        commonState.installedAppInfo ||
+                                        commonState.showRepoSelector) && (
+                                        <ChartRepoSelector
+                                            isExternal={isExternalApp}
+                                            isUpdate={!!isUpdate}
+                                            installedAppInfo={commonState.installedAppInfo}
+                                            handleRepoChartValueChange={handleRepoChartValueChange}
+                                            repoChartValue={commonState.repoChartValue}
+                                            chartDetails={commonState.repoChartValue}
+                                        />
                                     )}
-                                    chartValuesList={chartValuesList}
-                                    chartValues={commonState.chartValues}
-                                    redirectToChartValues={redirectToChartValues}
-                                    handleChartValuesSelection={handleChartValuesSelection}
-                                    hideVersionFromLabel={
-                                        isExternalApp &&
-                                        !commonState.installedAppInfo &&
-                                        commonState.chartValues.kind === ChartKind.EXISTING
-                                    }
-                                    hideCreateNewOption={isCreateValueView}
-                                />
-                            )}
+                                {!isDeployChartView &&
+                                    isExternalApp &&
+                                    !commonState.installedAppInfo &&
+                                    !commonState.showRepoSelector &&
+                                    renderConnectToHelmChartInfoBlock()}
+                                {renderGeneratedDownloadManifest()}
+                                {(!isExternalApp ||
+                                    commonState.installedAppInfo ||
+                                    commonState.repoChartValue?.chartRepoName) && (
+                                    <ChartVersionValuesSelector
+                                        isUpdate={isUpdate}
+                                        selectedVersion={commonState.selectedVersion}
+                                        selectedVersionUpdatePage={commonState.selectedVersionUpdatePage}
+                                        handleVersionSelection={handleVersionSelection}
+                                        chartVersionsData={commonState.chartVersionsData}
+                                        chartVersionObj={commonState.chartVersionsData.find(
+                                            (_chartVersion) => _chartVersion.id === commonState.selectedVersion,
+                                        )}
+                                        chartValuesList={chartValuesList}
+                                        chartValues={commonState.chartValues}
+                                        redirectToChartValues={redirectToChartValues}
+                                        handleChartValuesSelection={handleChartValuesSelection}
+                                        hideVersionFromLabel={
+                                            isExternalApp &&
+                                            !commonState.installedAppInfo &&
+                                            commonState.chartValues.kind === ChartKind.EXISTING
+                                        }
+                                        hideCreateNewOption={isCreateValueView}
+                                    />
+                                )}
+                            </div>
+                            {!isExternalApp &&
+                                serverMode === SERVER_MODE.FULL &&
+                                (isDeployChartView || isUpdateAppView) &&
+                                ToggleSecurityScan && (
+                                    <ToggleSecurityScan
+                                        isManifestScanEnabled={commonState.isManifestScanEnabled}
+                                        handleToggleSecurityScan={handleToggleSecurityScan}
+                                    />
+                                )}
                         </div>
-                        {!isExternalApp &&
-                            serverMode === SERVER_MODE.FULL &&
-                            (isDeployChartView || isUpdateAppView) &&
-                            ToggleSecurityScan && (
-                                <ToggleSecurityScan
-                                    isManifestScanEnabled={commonState.isManifestScanEnabled}
-                                    handleToggleSecurityScan={handleToggleSecurityScan}
-                                />
-                            )}
                         {!isDeployChartView &&
                             chartValueId !== '0' &&
                             !(
@@ -1857,15 +1873,6 @@ const ChartValuesView = ({
                         renderChartValuesEditor()
                     )}
                 </div>
-                <footer className="flexbox dc__content-end dc__border-top px-16 py-10">
-                    <UpdateApplicationButton
-                        isUpdateInProgress={commonState.isUpdateInProgress}
-                        isDeleteInProgress={commonState.isDeleteInProgress}
-                        isDeployChartView={isDeployChartView}
-                        isCreateValueView={isCreateValueView}
-                        deployOrUpdateApplication={deployOrUpdateApplication}
-                    />
-                </footer>
 
                 {commonState.showDeleteAppConfirmationDialog && (
                     <DeleteChartDialog
diff --git a/src/components/v2/values/chartValuesDiff/ChartValuesView.type.ts b/src/components/v2/values/chartValuesDiff/ChartValuesView.type.ts
index 993e45a543..d17c1fc9d7 100644
--- a/src/components/v2/values/chartValuesDiff/ChartValuesView.type.ts
+++ b/src/components/v2/values/chartValuesDiff/ChartValuesView.type.ts
@@ -459,14 +459,6 @@ export interface DeleteApplicationButtonProps {
     clickHandler?: () => void
 }
 
-export interface UpdateApplicationButtonProps {
-    isUpdateInProgress: boolean
-    isDeleteInProgress: boolean
-    isDeployChartView: boolean
-    isCreateValueView: boolean
-    deployOrUpdateApplication: () => Promise<void>
-}
-
 export interface ErrorScreenWithInfoProps {
     info: string
 }
diff --git a/src/css/base.scss b/src/css/base.scss
index 2dc09ead24..6888b321a0 100644
--- a/src/css/base.scss
+++ b/src/css/base.scss
@@ -983,44 +983,6 @@ button.anchor {
     height: 100%;
 }
 
-.dc__configuration-list {
-    display: grid;
-    grid-template-columns: 24px 1fr 200px;
-    grid-column-gap: 10px;
-
-    .tag {
-        border: 1px solid var(--N200);
-        height: 20px;
-        line-height: 20px;
-        font-size: 12px;
-        font-weight: 600;
-        color: var(--N900);
-        padding: 0 6px;
-        border-radius: 4px;
-        text-transform: uppercase;
-    }
-}
-
-.animate-background {
-    animation: colorchange 0.5s ease-in 2;
-    background: linear-gradient(-45deg, rgba(102, 163, 225, 100), white);
-    background-size: 400% 400%;
-}
-
-@keyframes colorchange {
-    0% {
-        background-position: 0% 50%;
-    }
-
-    50% {
-        background-position: 100% 50%;
-    }
-
-    100% {
-        background-position: 0% 50%;
-    }
-}
-
 .dc__element-scroller {
     background: var(--bg-overlay-secondary);
     border: 1px solid var(--border-primary);
@@ -1082,27 +1044,6 @@ button.anchor {
     }
 }
 
-.dc__app-update-toast {
-    font-size: 14px;
-
-    .info {
-        line-height: 1.43;
-        color: var(--N0);
-        font-size: 13px;
-        text-transform: none;
-    }
-
-    button {
-        outline: unset;
-        border: unset;
-        margin-left: auto;
-        background: transparent;
-        font-weight: 600;
-        text-transform: uppercase;
-        margin: 14px 0 0 auto;
-    }
-}
-
 .gui-yaml-switch,
 .manual-approvals-switch {
     &.radio-group {
diff --git a/src/css/formulae.scss b/src/css/formulae.scss
index d3046b520d..51869d8830 100644
--- a/src/css/formulae.scss
+++ b/src/css/formulae.scss
@@ -497,17 +497,6 @@ $color-suffix: 00;
     }
 }
 
-.sqr-44 {
-    width: 44px;
-    height: 44px;
-    background-color: var(--N100);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 16px;
-    border-radius: 4px;
-}
-
 .lh-1-54 {
     line-height: 1.54;
 }
diff --git a/yarn.lock b/yarn.lock
index ab1623bedd..b9b4826948 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1722,9 +1722,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-2":
-  version: 1.16.0-pre-2
-  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-2"
+"@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-3":
+  version: 1.16.0-pre-3
+  resolution: "@devtron-labs/devtron-fe-common-lib@npm:1.16.0-pre-3"
   dependencies:
     "@codemirror/autocomplete": "npm:6.18.6"
     "@codemirror/lang-json": "npm:6.0.1"
@@ -1773,7 +1773,7 @@ __metadata:
     react-select: 5.8.0
     rxjs: ^7.8.1
     yaml: ^2.4.1
-  checksum: 10c0/1f8ef5c8ef1fce6cf4fc44ea272d791f5a3f2b0878c76b450993fd9a0363f3a506bab6869e29332da68e326c78be05f1e4ff09827f53a0b6f93b4408557b5269
+  checksum: 10c0/ae28afdc051d536dbaa5248ad05c460008c1244253f30128bc47ba52ccf1128e6e68e76a9720316c5e0891872db4290c2ccbcb601e6121579df7f87409f1b533
   languageName: node
   linkType: hard
 
@@ -5685,7 +5685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dashboard@workspace:."
   dependencies:
-    "@devtron-labs/devtron-fe-common-lib": "npm:1.16.0-pre-2"
+    "@devtron-labs/devtron-fe-common-lib": "npm:1.16.0-pre-3"
     "@esbuild-plugins/node-globals-polyfill": "npm:0.2.3"
     "@playwright/test": "npm:^1.32.1"
     "@rjsf/core": "npm:^5.13.3"