diff --git a/RN-UI-LIB b/RN-UI-LIB
index 133b14de..51a1c7f2 160000
--- a/RN-UI-LIB
+++ b/RN-UI-LIB
@@ -1 +1 @@
-Subproject commit 133b14de0adb8c20e8300e23ee219fd1e9af1d72
+Subproject commit 51a1c7f2150a1de0aa6f4f4e74b89cfd30b1de84
diff --git a/package.json b/package.json
index d8b625ba..34fb07e5 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
         "@nozbe/watermelondb": "0.24.0",
         "@nozbe/with-observables": "1.4.1",
         "@react-native-async-storage/async-storage": "1.17.11",
+        "@react-native-community/netinfo": "9.3.7",
         "@react-native-firebase/app": "16.4.6",
         "@react-native-firebase/auth": "16.5.0",
         "@react-native-firebase/crashlytics": "16.5.0",
diff --git a/src/action/authActions.ts b/src/action/authActions.ts
index e414c918..28e02eee 100644
--- a/src/action/authActions.ts
+++ b/src/action/authActions.ts
@@ -85,6 +85,7 @@ export const verifyOTP =
                 dispatch(resetLoginForm());
             })
             .catch(err => {
+                console.log(err)
                 dispatch(setVerifyOTPError('Invalid OTP, try again'));
             });
     };
diff --git a/src/action/dataActions.ts b/src/action/dataActions.ts
index 155d7fcc..7ab7ac94 100644
--- a/src/action/dataActions.ts
+++ b/src/action/dataActions.ts
@@ -13,6 +13,7 @@ import {
     setLoading,
     setTodoListOffline,
     updateCaseDetailAfterApiCall,
+    updateCaseDetailBeforeApiCall,
     updateSingleCase,
 } from '../reducer/allCasesSlice';
 import { ICaseItem } from '../screens/allCases/interface';
@@ -97,7 +98,9 @@ export const syncCaseDetail = (data: any) => (dispatch: AppDispatch) => {
             dispatch(updateSingleCase({ data: res.data, id: data.id }));
             OfflineImageDAO.deleteImages(offlineImageIdList);
         })
-        .catch(err => console.log(err, 'error'));
+        .catch(err => {
+            dispatch(updateCaseDetailBeforeApiCall({caseId: data.id}))
+        });
 };
 
 /**
diff --git a/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx b/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx
index 66245732..42509c3f 100644
--- a/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx
+++ b/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx
@@ -23,6 +23,7 @@ import {
 import RadioGroup from '../../../../../RN-UI-LIB/src/components/radio_button/RadioGroup';
 import RadioButton from '../../../../../RN-UI-LIB/src/components/radio_button/RadioButton';
 import {Search} from '../../../../../RN-UI-LIB/src/utlis/search';
+import SearchIcon from '../../../../../RN-UI-LIB/src/Icons/SearchIcon';
 
 interface FilterContainerProps {
     closeFilterModal: () => void;
@@ -324,6 +325,7 @@ const FiltersContainer: React.FC<FilterContainerProps> = props => {
                         <>
                             <View style={[GenericStyles.pt16, styles.ph7]}>
                                 <TextInput
+                                    LeftComponent={<SearchIcon />}
                                     placeholder="Search..."
                                     defaultValue={filterSearchString}
                                     onChangeText={value =>
diff --git a/src/hooks/useIsOnline.tsx b/src/hooks/useIsOnline.tsx
new file mode 100644
index 00000000..b553ddcd
--- /dev/null
+++ b/src/hooks/useIsOnline.tsx
@@ -0,0 +1,31 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+import NetInfo from '@react-native-community/netinfo';
+
+const useIsOnline = () => {
+    const [isOnline, setIsOnline] = React.useState(true);
+    NetInfo.configure({
+      reachabilityUrl: 'https://google.com',
+      reachabilityTest: async response => response.status === 200,
+      reachabilityLongTimeout: 30 * 1000, // 60s
+      reachabilityShortTimeout: 5 * 1000, // 5s
+      reachabilityRequestTimeout: 15 * 1000, // 15s
+    });
+
+    NetInfo.configure({
+      reachabilityUrl: 'https://google.com',
+      reachabilityTest: async response => response.status === 200,
+      reachabilityLongTimeout: 30 * 1000, // 60s
+      reachabilityShortTimeout: 5 * 1000, // 5s
+      reachabilityRequestTimeout: 15 * 1000, // 15s
+    });
+    
+    NetInfo.addEventListener(state => {
+      if (isOnline !== state.isConnected) {
+        setIsOnline(!!state.isConnected && !!state.isInternetReachable);
+      }
+    });
+    return isOnline;
+}
+
+export default useIsOnline
\ No newline at end of file
diff --git a/src/reducer/allCasesSlice.ts b/src/reducer/allCasesSlice.ts
index 49f36b06..052a2e3c 100644
--- a/src/reducer/allCasesSlice.ts
+++ b/src/reducer/allCasesSlice.ts
@@ -87,13 +87,26 @@ const allCasesSlice = createSlice({
                         caseReferenceId: item.caseReferenceId,
                         pinRank: item.pinRank,
                     });
-                    prev[item.caseReferenceId] = {
-                        ...item,
-                        isSynced: true,
-                        isApiCalled: false,
-                    };
+                    console.log(initialValue?.[item.caseReferenceId], item ,state.caseDetails?.[item.caseReferenceId]?.isSynced, "is synced")
+                    if(state.caseDetails[item.caseReferenceId]?.isSynced === false){
+                        console.log("*************************->")
+                        prev[item.caseReferenceId] = {
+                            ...initialValue[item.caseReferenceId],
+                            ...item,
+                            isSynced: false,
+                            isApiCalled: false,
+                        };
+                    }else{
+                        prev[item.caseReferenceId] = {
+                            ...item,
+                            isSynced: true,
+                            isApiCalled: false,
+                        };
+                    }
+                    
                     return prev;
                 }, initialValue);
+                console.log(detailsData, "detail data")
                 state.caseDetails = detailsData;
                 state.casesList = listData;
             }
@@ -120,7 +133,6 @@ const allCasesSlice = createSlice({
                         state.caseDetails[id] = {
                             ...state.caseDetails[id],
                             ...caseDetail,
-                            isSynced: true,
                             currentTask,
                             context,
                         };
@@ -370,6 +382,7 @@ const allCasesSlice = createSlice({
                 ...action.payload,
             };
             let filterCount = 0;
+            console.log(state.selectedFilters);
             Object.keys(state.selectedFilters).forEach(filterKey => {
                 switch (typeof state.selectedFilters[filterKey]) {
                     case 'object':
@@ -399,6 +412,10 @@ const allCasesSlice = createSlice({
             const { caseId } = action.payload;
             state.caseDetails[caseId].isApiCalled = true;
         },
+        updateCaseDetailBeforeApiCall: (state, action) => {
+            const { caseId } = action.payload;
+            state.caseDetails[caseId].isApiCalled = false;
+        },
         toggleNewlyAddedCase: (state, action) => {
             state.caseDetails[action.payload].isNewlyAdded = false;
         },
@@ -434,6 +451,7 @@ export const {
     updateCaseDetailAfterApiCall,
     toggleNewlyAddedCase,
     resetCasesData,
+    updateCaseDetailBeforeApiCall
 } = allCasesSlice.actions;
 
 export default allCasesSlice.reducer;
diff --git a/src/screens/allCases/ListItem.tsx b/src/screens/allCases/ListItem.tsx
index 07898f8a..1532f6df 100644
--- a/src/screens/allCases/ListItem.tsx
+++ b/src/screens/allCases/ListItem.tsx
@@ -107,8 +107,6 @@ const ListItem: React.FC<IListItem> = props => {
         <Pressable onPress={handleCaseClick}>
             <View
                 style={[
-                    GenericStyles.ph16,
-                    styles.pv12,
                     GenericStyles.row,
                     {
                         backgroundColor: isNewlyAdded
@@ -119,21 +117,38 @@ const ListItem: React.FC<IListItem> = props => {
                     },
                 ]}>
                 <TouchableOpacity
-                    style={[styles.avatarContainer, styles.alignSelf]}
+                    style={[
+                        {
+                            padding: 8
+                        },
+                        styles.alignSelf,
+                        { height: '100%', alignItems:'center' },
+                    ]}
                     onPress={handleAvatarClick}>
                     <CaseItemAvatar
                         caseSelected={caseSelected}
                         caseData={caseData}
                     />
                 </TouchableOpacity>
-                <View style={[GenericStyles.ml8, styles.fb80]}>
+                <View
+                    style={[
+                        GenericStyles.ml8,
+                        styles.fb80,
+                        {
+                            paddingTop: 8,
+                            paddingLeft: 0,
+                            paddingBottom: 8,
+                            paddingRight: 8,
+                        },
+                    ]}>
                     <Heading numberOfLines={1} type={'h5'} bold dark>
                         {detail.customerInfo?.name ||
                             detail.customerInfo?.customerName}
                     </Heading>
                     {!compleatedList && (
-                        <Text dark ellipsizeMode="tail" numberOfLines={2}>
+                        <Text dark style={{width: '90%'}} ellipsizeMode="tail" >
                             {/* @ts-ignore */}
+
                             {taskTitle && TaskTitleUIMapping[taskTitle]}:{' '}
                             <Text>{displayAddress}</Text>
                         </Text>
@@ -163,7 +178,7 @@ const styles = StyleSheet.create({
     },
     avatarContainer: {
         height: 40,
-        width: 40,
+        width: 48,
     },
     fb80: {
         flexBasis: '80%',
diff --git a/src/screens/caseDetails/interactionsHandler.tsx b/src/screens/caseDetails/interactionsHandler.tsx
index 77f935a0..6bbcb1eb 100644
--- a/src/screens/caseDetails/interactionsHandler.tsx
+++ b/src/screens/caseDetails/interactionsHandler.tsx
@@ -1,19 +1,20 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React, { memo, useEffect } from 'react'
-import { useAppDispatch, useAppSelector } from '../../hooks'
+import { useEffect } from 'react';
 import { _map } from '../../../RN-UI-LIB/src/utlis/common';
 import { syncCaseDetail } from '../../action/dataActions';
-import OfflineImageDAO from '../../wmDB/dao/OfflineImageDAO';
 import { AnswerType } from '../../components/form/interface';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import useIsOnline from '../../hooks/useIsOnline';
+import OfflineImageDAO from '../../wmDB/dao/OfflineImageDAO';
 
 const interactionsHandler = () => {
     const dispatch = useAppDispatch();
+    const isOnline = useIsOnline();
     const allCasesDetails = useAppSelector(state => state.allCases.caseDetails);
-
-
     useEffect(() => {
+      console.log("getting called")
       let notSyncedCases: Array<any> = [];
       _map(allCasesDetails, (el)=> {
+        console.log(allCasesDetails[el]?.isSynced === false && allCasesDetails[el].isApiCalled === false)
         if(allCasesDetails[el]?.isSynced === false && allCasesDetails[el].isApiCalled === false){
           const caseId = allCasesDetails[el].id
           const allocationReferenceId = allCasesDetails[el]?.currentAllocationReferenceId
@@ -23,12 +24,14 @@ const interactionsHandler = () => {
 
       (async () => {
         for(const caseItem of notSyncedCases) {
-          const modifiedCaseItem = await getModifiedCaseItem(caseItem);
-          dispatch(syncCaseDetail(modifiedCaseItem))
+          if(isOnline){
+            const modifiedCaseItem = await getModifiedCaseItem(caseItem);
+            dispatch(syncCaseDetail(modifiedCaseItem))
+          }
         }
       })();
 
-    }, [allCasesDetails])
+    }, [allCasesDetails, isOnline])
     
 
   return null
diff --git a/yarn.lock b/yarn.lock
index 7ff0d50a..d4a414c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,6 +1522,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz#9e558170c106bbafaa1ef502bd8e6d4651012bf9"
   integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==
 
+"@react-native-community/netinfo@9.3.7":
+  version "9.3.7"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-9.3.7.tgz#92407f679f00bae005c785a9284e61d63e292b34"
+  integrity sha512-+taWmE5WpBp0uS6kf+bouCx/sn89G9EpR4s2M/ReLvctVIFL2Qh8WnWfBxqK9qwgmFha/uqjSr2Gq03OOtiDcw==
+
 "@react-native-firebase/app@16.4.6":
   version "16.4.6"
   resolved "https://registry.yarnpkg.com/@react-native-firebase/app/-/app-16.4.6.tgz#929a86894b401352259e21d4cb4dab1d37de2bc7"