diff --git a/package-lock.json b/package-lock.json
index fdbc38fc2..d759c8afc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.11.1",
+    "version": "1.11.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "1.11.1",
+            "version": "1.11.2",
             "hasInstallScript": true,
             "license": "ISC",
             "dependencies": {
diff --git a/package.json b/package.json
index bc9291ec9..3f8212f81 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.11.1",
+    "version": "1.11.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
index 2e2e15736..9a40e3909 100644
--- a/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
+++ b/src/Shared/Components/CICDHistory/DeploymentHistoryConfigDiff/DeploymentHistoryConfigDiff.tsx
@@ -18,16 +18,16 @@ import { useMemo, useState } from 'react'
 import { generatePath, Route, Switch, useLocation, useRouteMatch } from 'react-router-dom'
 
 import { ReactComponent as ICError } from '@Icons/ic-error.svg'
-import { getAppEnvDeploymentConfigList } from '@Shared/Components/DeploymentConfigDiff'
+import { getAppEnvDeploymentConfigList, DEPLOYMENT_CONFIG_DIFF_SORT_KEY } from '@Shared/Components/DeploymentConfigDiff'
 import { useAsync } from '@Common/Helper'
 import { EnvResourceType, getAppEnvDeploymentConfig, getCompareSecretsData } from '@Shared/Services'
 import { groupArrayByObjectKey } from '@Shared/Helpers'
 import ErrorScreenManager from '@Common/ErrorScreenManager'
 import { Progressing } from '@Common/Progressing'
 import { useUrlFilters } from '@Common/Hooks'
-import { GenericEmptyState, InfoColourBar } from '@Common/index'
-
+import { GenericEmptyState, InfoColourBar, SortingOrder } from '@Common/index'
 import { useMainContext } from '@Shared/Providers'
+
 import { DeploymentHistoryConfigDiffCompare } from './DeploymentHistoryConfigDiffCompare'
 import { DeploymentHistoryConfigDiffProps, DeploymentHistoryConfigDiffQueryParams } from './types'
 import {
@@ -125,7 +125,7 @@ export const DeploymentHistoryConfigDiff = ({
         `${generatePath(path, { ...params })}/${resourceType}${resourceName ? `/${resourceName}` : ''}${search}`
 
     // Generate the deployment history config list
-    const deploymentConfigList = useMemo(() => {
+    const { deploymentConfigList, sortedDeploymentConfigList } = useMemo(() => {
         if (!compareDeploymentConfigLoader && compareDeploymentConfig) {
             const compareList =
                 isPreviousDeploymentConfigAvailable && compareDeploymentConfig[1].status === 'fulfilled'
@@ -140,6 +140,8 @@ export const DeploymentHistoryConfigDiff = ({
             const currentList =
                 compareDeploymentConfig[0].status === 'fulfilled' ? compareDeploymentConfig[0].value.result : null
 
+            // This data is displayed on the deployment history diff view page.
+            // It requires dynamic sorting based on the current sortBy and sortOrder, which the user can modify using the Sort Button.
             const configData = getAppEnvDeploymentConfigList({
                 currentList,
                 compareList,
@@ -147,10 +149,21 @@ export const DeploymentHistoryConfigDiff = ({
                 convertVariables,
                 sortingConfig: { sortBy, sortOrder },
             })
-            return configData
+
+            // Sorting is hardcoded here because this data is displayed on the deployment history configuration tab.
+            // The diff needs to be shown on sorted data, and no additional sorting will be applied.
+            const sortedConfigData = getAppEnvDeploymentConfigList({
+                currentList,
+                compareList,
+                getNavItemHref,
+                convertVariables,
+                sortingConfig: { sortBy: DEPLOYMENT_CONFIG_DIFF_SORT_KEY, sortOrder: SortingOrder.ASC },
+            })
+
+            return { deploymentConfigList: configData, sortedDeploymentConfigList: sortedConfigData }
         }
 
-        return null
+        return { deploymentConfigList: null, sortedDeploymentConfigList: null }
     }, [
         isPreviousDeploymentConfigAvailable,
         compareDeploymentConfigLoader,
@@ -170,8 +183,11 @@ export const DeploymentHistoryConfigDiff = ({
     )
 
     const groupedDeploymentConfigList = useMemo(
-        () => (deploymentConfigList ? groupArrayByObjectKey(deploymentConfigList.configList, 'groupHeader') : []),
-        [deploymentConfigList],
+        () =>
+            sortedDeploymentConfigList
+                ? groupArrayByObjectKey(sortedDeploymentConfigList.configList, 'groupHeader')
+                : [],
+        [sortedDeploymentConfigList],
     )
 
     /** Previous deployment config has 404 error. */