diff --git a/package-lock.json b/package-lock.json
index 54230a428..77ff2bc6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-1",
+    "version": "0.5.0-beta-10",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@devtron-labs/devtron-fe-common-lib",
-            "version": "0.5.0-beta-1",
+            "version": "0.5.0-beta-10",
             "license": "ISC",
             "dependencies": {
                 "@types/react-dates": "^21.8.6",
diff --git a/package.json b/package.json
index c0cf55e16..712fddef3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.5.0-beta-1",
+    "version": "0.5.0-beta-10",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",
diff --git a/src/Assets/Icon/ic-file-code.svg b/src/Assets/Icon/ic-file-code.svg
new file mode 100644
index 000000000..d8f0955c5
--- /dev/null
+++ b/src/Assets/Icon/ic-file-code.svg
@@ -0,0 +1,20 @@
+<!--
+  - Copyright (c) 2024. Devtron Inc.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 2H3.49951C3.3669 2 3.23973 2.05268 3.14596 2.14645C3.05219 2.24021 2.99951 2.36739 2.99951 2.5V13.5C2.99951 13.6326 3.05219 13.7598 3.14596 13.8536C3.23973 13.9473 3.3669 14 3.49951 14H12.5C12.5657 14 12.6307 13.9871 12.6913 13.9619C12.752 13.9368 12.8071 13.9 12.8536 13.8536C12.9 13.8071 12.9368 13.752 12.9619 13.6913C12.9871 13.6307 13 13.5657 13 13.5V5.5M9.5 2L13 5.5M9.5 2V5.5H13" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.63944 7.80952L5.33331 9.56463L6.63944 11.3197M9.36052 7.80952L10.6666 9.56463L9.36052 11.3197" stroke="#596168" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
index 7c48506d8..addbebca1 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.component.tsx
@@ -12,6 +12,7 @@ export const DeploymentConfigDiff = ({
     navHeading,
     navHelpText,
     tabConfig,
+    errorConfig,
     ...resProps
 }: DeploymentConfigDiffProps) => (
     <div className="deployment-config-diff">
@@ -23,7 +24,13 @@ export const DeploymentConfigDiff = ({
             navHeading={navHeading}
             navHelpText={navHelpText}
             tabConfig={tabConfig}
+            errorConfig={errorConfig}
+        />
+        <DeploymentConfigDiffMain
+            isLoading={isLoading}
+            configList={configList}
+            errorConfig={errorConfig}
+            {...resProps}
         />
-        <DeploymentConfigDiffMain isLoading={isLoading} configList={configList} {...resProps} />
     </div>
 )
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
index 9e0859448..c3395c14f 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.scss
@@ -39,7 +39,7 @@
 
     &__tab-list {
         label {
-            flex-grow: 1
+            flex-grow: 1;
         }
 
         .radio__item-label {
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
index 8a3dd0424..0f8a3b202 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.types.ts
@@ -42,6 +42,7 @@ export type DeploymentConfigDiffSelectPickerProps =
       }
 
 export interface DeploymentConfigDiffNavigationItem extends Pick<CollapsibleListItem, 'href' | 'title' | 'onClick'> {
+    Icon?: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
     hasDiff?: boolean
 }
 
@@ -84,7 +85,14 @@ export interface DeploymentConfigDiffProps {
 export interface DeploymentConfigDiffNavigationProps
     extends Pick<
         DeploymentConfigDiffProps,
-        'isLoading' | 'navList' | 'collapsibleNavList' | 'goBackURL' | 'navHeading' | 'navHelpText' | 'tabConfig'
+        | 'isLoading'
+        | 'navList'
+        | 'collapsibleNavList'
+        | 'goBackURL'
+        | 'navHeading'
+        | 'navHelpText'
+        | 'tabConfig'
+        | 'errorConfig'
     > {}
 
 export interface DeploymentConfigDiffMainProps
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
index 2688bce9a..d7674e069 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiff.utils.tsx
@@ -1,6 +1,7 @@
 import { ReactComponent as ICCheck } from '@Icons/ic-check.svg'
 import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 import { ReactComponent as ICEditFile } from '@Icons/ic-edit-file.svg'
+import { ReactComponent as ICFileCode } from '@Icons/ic-file-code.svg'
 import { stringComparatorBySortOrder, yamlComparatorBySortOrder } from '@Shared/Helpers'
 import { DEPLOYMENT_HISTORY_CONFIGURATION_LIST_MAP } from '@Shared/constants'
 import { YAMLStringify } from '@Common/Helper'
@@ -507,6 +508,7 @@ export const getAppEnvDeploymentConfigList = <ManifestView extends boolean = fal
                     const element = document.querySelector(`#${deploymentTemplateData.id}`)
                     element?.scrollIntoView({ block: 'start' })
                 },
+                Icon: ICFileCode,
             },
         ]
 
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
index 7fea05604..e1199d471 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffMain.tsx
@@ -169,6 +169,18 @@ export const DeploymentConfigDiffMain = ({
             )
         })
 
+    const renderContent = () => {
+        if (isLoading) {
+            return <Progressing fullHeight pageLoader />
+        }
+
+        if (errorConfig?.error) {
+            return <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />
+        }
+
+        return <div className="flexbox-col dc__gap-12 p-12">{renderDiffs()}</div>
+    }
+
     return (
         <div className="bcn-0 deployment-config-diff__main-top">
             <div className="dc__border-bottom-n1 flexbox dc__align-items-center dc__position-sticky dc__top-0 bcn-0 w-100 dc__zi-11">
@@ -183,15 +195,7 @@ export const DeploymentConfigDiffMain = ({
                     {renderSortButton()}
                 </div>
             </div>
-            <div className="deployment-config-diff__main-content">
-                {errorConfig?.error && <ErrorScreenManager code={errorConfig.code} reload={errorConfig.reload} />}
-                {!errorConfig?.error &&
-                    (isLoading ? (
-                        <Progressing fullHeight size={48} />
-                    ) : (
-                        <div className="flexbox-col dc__gap-12 p-12">{renderDiffs()}</div>
-                    ))}
-            </div>
+            <div className="deployment-config-diff__main-content">{renderContent()}</div>
         </div>
     )
 }
diff --git a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
index b8f2d8307..50569b47a 100644
--- a/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
+++ b/src/Shared/Components/DeploymentConfigDiff/DeploymentConfigDiffNavigation.tsx
@@ -25,6 +25,7 @@ export const DeploymentConfigDiffNavigation = ({
     navHeading,
     navHelpText,
     tabConfig,
+    errorConfig,
 }: DeploymentConfigDiffNavigationProps) => {
     // STATES
     const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({})
@@ -101,17 +102,18 @@ export const DeploymentConfigDiffNavigation = ({
         )
     }
 
-    const renderContent = () => (
+    const renderNavigation = () => (
         <>
-            {navList.map(({ title, href, onClick, hasDiff }) => (
+            {navList.map(({ title, href, onClick, hasDiff, Icon }) => (
                 <NavLink
                     key={title}
                     data-testid="env-deployment-template"
-                    className="dc__nav-item cursor dc__gap-8 fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__content-space dc__no-decor"
+                    className="dc__nav-item cursor dc__gap-8 fs-13 lh-32 cn-7 w-100 br-4 px-8 flexbox dc__align-items-center dc__no-decor"
                     to={href}
                     onClick={onClick}
                 >
-                    <span className="dc__truncate">{title}</span>
+                    {Icon && <Icon className="icon-dim-16 dc__nav-item__start-icon dc__no-shrink" />}
+                    <span className="dc__truncate flex-grow-1">{title}</span>
                     {hasDiff && (
                         <Tippy className="default-tt" content="File has difference" arrow={false} placement="right">
                             <div className="flex">
@@ -125,7 +127,7 @@ export const DeploymentConfigDiffNavigation = ({
             {navHelpText && (
                 <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
                     <span className="flex p-2 dc__align-self-start">
-                        <ICInfoOutlined className="icon-dim-16 fcn-6" />
+                        <ICInfoOutlined className="icon-dim-16 fcn-7" />
                     </span>
                     <p className="m-0 fs-12 lh-1-5 cn-9">{navHelpText}</p>
                 </div>
@@ -133,13 +135,32 @@ export const DeploymentConfigDiffNavigation = ({
         </>
     )
 
-    const renderLoading = () => ['90', '70', '50'].map((item) => <ShimmerText key={item} width={item} />)
+    const renderContent = () => {
+        if (isLoading) {
+            return ['90', '70', '50'].map((item) => <ShimmerText key={item} width={item} />)
+        }
+
+        if (errorConfig?.error) {
+            return (
+                <div className="mt-8 py-6 px-8 flexbox dc__align-items-center dc__gap-8">
+                    <span className="flex p-2 dc__align-self-start">
+                        <ICInfoOutlined className="icon-dim-16 fcn-7" />
+                    </span>
+                    <p className="m-0 fs-12 lh-1-5 cn-9">
+                        Failed to load files. Please reload or select a different reference to compare with.
+                    </p>
+                </div>
+            )
+        }
+
+        return renderNavigation()
+    }
 
     return (
-        <div className="bcn-0 dc__border-right">
+        <div className="bcn-0 dc__border-right flexbox-col dc__overflow-hidden">
             {renderTopContent()}
             {!!tabConfig?.tabs.length && renderTabConfig()}
-            <div className="mw-none p-8">{isLoading ? renderLoading() : renderContent()}</div>
+            <div className="mw-none p-8 flex-grow-1 dc__overflow-auto">{renderContent()}</div>
         </div>
     )
 }