diff --git a/src/screens/allCases/ListItem.tsx b/src/screens/allCases/ListItem.tsx
index b1c7461c..9ce5802d 100644
--- a/src/screens/allCases/ListItem.tsx
+++ b/src/screens/allCases/ListItem.tsx
@@ -210,6 +210,7 @@ const ListItem: React.FC<IListItem> = (props) => {
   const isActiveEscalationCase = Number(escalationData?.activeEscalationCount) > 0;
   const activeEscalationCount = Number(escalationData?.activeEscalationCount);
   const pastEscalationCount = Number(escalationData?.pastEscalationCount);
+  const totalEscalationsCount = activeEscalationCount + pastEscalationCount;
 
   return (
     <Pressable onPress={handleCaseClick}>
@@ -229,9 +230,9 @@ const ListItem: React.FC<IListItem> = (props) => {
 
         ]}
       >
-        {escalationData ? (
+        {escalationData && totalEscalationsCount > 0 ? (
           isActiveEscalationCase ? (
-            <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100, {
+            <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100,styles.redContainer, {
               backgroundColor: COLORS.BACKGROUND.RED
             }]}>
               <FlagIcon fillColor={COLORS.TEXT.RED} />
@@ -240,7 +241,7 @@ const ListItem: React.FC<IListItem> = (props) => {
               </Text>
             </View>
           ) : (
-            <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100, {
+            <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, GenericStyles.w100,styles.yellowContainer, {
               backgroundColor: COLORS.BACKGROUND.YELLOW_LIGHT
             }]}>
               <FlagIcon fillColor={COLORS.TEXT.YELLOW_LIGHT} />
@@ -361,14 +362,19 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,
     borderWidth: 1,
+  },
+  redContainer :{
     borderColor: COLORS.BORDER.RED,
   },
+  yellowContainer :{
+    borderColor: COLORS.BORDER.YELLOW,
+  },
   activeEscalationText: {
     color: COLORS.TEXT.RED,
     marginLeft: 4,
   },
   pastEscalationText: {
-    color: COLORS.TEXT.YELLOW,
+    color: COLORS.TEXT.YELLOW_LIGHT,
     marginLeft: 4,
   },
   avatarContainer: {
diff --git a/src/screens/caseDetails/CollectionCaseDetail.tsx b/src/screens/caseDetails/CollectionCaseDetail.tsx
index d98364d6..621361cd 100644
--- a/src/screens/caseDetails/CollectionCaseDetail.tsx
+++ b/src/screens/caseDetails/CollectionCaseDetail.tsx
@@ -52,6 +52,11 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
 
   const [isDocumentsLoading, setIsDocumentsLoading] = React.useState(false);
 
+  const {escalationData} = caseDetail || {};
+  const activeEscalationCount = Number(escalationData?.activeEscalationCount);
+  const pastEscalationCount = Number(escalationData?.pastEscalationCount);
+  const totalEscalationsCount = activeEscalationCount + pastEscalationCount;
+
   useEffect(() => {
     if (caseId) dispatch(setSelectedCaseId(caseId));
 
@@ -124,8 +129,8 @@ const CollectionCaseDetails: React.FC<ICaseDetails> = (props) => {
             ]}
           >
             <ViewAddressSection caseId={caseId} />
+            {escalationData && totalEscalationsCount > 0 ? (<EscalationsSection caseId={caseId} />): null}
             <EmiDetailsSection caseId={caseId} />
-            {caseDetail?.escalationData ? (<EscalationsSection caseId={caseId} />): null}
             <CollectMoneySection caseId={caseId} />
             <FeedbackDetailsSection caseId={caseId} />
           </Animated.View>
diff --git a/src/screens/escalations/EscalationsSection.tsx b/src/screens/escalations/EscalationsSection.tsx
index c36c8ff2..57751d92 100644
--- a/src/screens/escalations/EscalationsSection.tsx
+++ b/src/screens/escalations/EscalationsSection.tsx
@@ -12,8 +12,7 @@ import { addClickstreamEvent } from '@services/clickstreamEventService';
 import { CaseDetailStackEnum } from '../caseDetails/CaseDetailStack';
 import FlagIcon from '@assets/icons/FlagIcon';
 import dayjs from 'dayjs';
-import { COSMOS_STANDARD_DATE_FORMAT, COSMOS_STANDARD_DATE_TIME_FORMAT, COSMOS_STANDARD_TIME_FORMAT } from '@rn-ui-lib/utils/dates';
-
+import { COSMOS_STANDARD_DATE_FORMAT, COSMOS_STANDARD_TIME_FORMAT } from '@rn-ui-lib/utils/dates';
 interface IEscalationsSection {
   caseId: string;
 }
@@ -40,6 +39,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
   const escalationCreatedAt = escalationData?.recentEscalationDetails?.createdAt;
   const customerVoice = escalationData?.recentEscalationDetails?.customerVoice;
 
+  const escalationRaisedDate = dayjs(escalationCreatedAt).format(COSMOS_STANDARD_DATE_FORMAT);
+  const escalationRaisedTime = dayjs(escalationCreatedAt).format(COSMOS_STANDARD_TIME_FORMAT);
 
   return (
     <View
@@ -57,9 +58,8 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
           onPress={handleOnPressClick}
         >
           <View style={GenericStyles.fill}>
-
             {isActiveEscalationCase ? (
-              <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, {
+              <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, styles.redContainer, {
                 backgroundColor: COLORS.BACKGROUND.RED
               }]}>
                 <FlagIcon fillColor={COLORS.TEXT.RED} />
@@ -68,7 +68,7 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
                 </Text>
               </View>
             ) : (
-              <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, {
+              <View style={[styles.escalationContainer, GenericStyles.row, GenericStyles.alignCenter, styles.yellowContainer, {
                 backgroundColor: COLORS.BACKGROUND.YELLOW_LIGHT
               }]}>
                 <FlagIcon fillColor={COLORS.TEXT.YELLOW_LIGHT} />
@@ -77,34 +77,31 @@ const EscalationsSection = ({ caseId }: IEscalationsSection) => {
                 </Text>
               </View>)
             }
-
             <View style={[GenericStyles.columnDirection, GenericStyles.pl16]}>
               <Text dark bold style={[GenericStyles.fontSize14, GenericStyles.mb4]}>
-                {customerVoice}
+                {customerVoice || 'Escalation Against Agent'}
               </Text>
-
               <View style={[GenericStyles.row, GenericStyles.alignCenter]}>
                 <Text style={[GenericStyles.fontSize13]}>
-                  {'Raised on:'}
-                </Text>
-                <Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4, GenericStyles.mr4]}>
-                  {dayjs(escalationCreatedAt).format(COSMOS_STANDARD_DATE_FORMAT)}
-                </Text>
-                <Text style={[GenericStyles.fontSize13, styles.textColorGrayscale3]}>
-                  {'|'}
-                </Text>
-                <Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4]}>
-                  {dayjs(escalationCreatedAt).format(COSMOS_STANDARD_TIME_FORMAT)}
+                  {'Raised on: '}
                 </Text>
+                {escalationRaisedDate ? <>
+                  <Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4, GenericStyles.mr4]}>
+                    {escalationRaisedDate}
+                  </Text>
+                  <Text style={[GenericStyles.fontSize13, styles.textColorGrayscale3]}>
+                    {'|'}
+                  </Text>
+                  <Text dark bold style={[GenericStyles.fontSize13, GenericStyles.ml4]}>
+                    {escalationRaisedTime}
+                  </Text>
+                </> : <Text>Unknown</Text>}
               </View>
             </View>
-
             <View style={[GenericStyles.row, GenericStyles.alignCenter, GenericStyles.pt12, GenericStyles.pb16, GenericStyles.pl16]}>
               <Text style={[styles.viewAllButton]}>View all {`(${totalEscalationsCount})`}</Text>
               <Chevron fillColor={COLORS.TEXT.BLUE} />
             </View>
-
-
           </View>
         </TouchableOpacity>
       </View>
@@ -121,16 +118,21 @@ export const styles = StyleSheet.create({
     borderTopLeftRadius: 16,
     alignSelf: 'flex-start',
     borderWidth: 1,
-    borderColor: COLORS.BORDER.RED,
   },
   activeEscalationText: {
     color: COLORS.TEXT.RED,
     marginLeft: 4,
   },
   pastEscalationText: {
-    color: COLORS.TEXT.YELLOW,
+    color: COLORS.TEXT.YELLOW_LIGHT,
     marginLeft: 4,
   },
+  redContainer: {
+    borderColor: COLORS.BORDER.RED,
+  },
+  yellowContainer: {
+    borderColor: COLORS.BORDER.YELLOW,
+  },
   textColorGrayscale2: {
     color: COLORS.TEXT.BLACK,
   },