diff --git a/App.tsx b/App.tsx
index 2a5a1c1b..bd47b789 100644
--- a/App.tsx
+++ b/App.tsx
@@ -17,6 +17,8 @@ import useNativeButtons from './src/hooks/useNativeButton';
 import { StatusBar } from 'react-native';
 import { COLORS } from './RN-UI-LIB/src/styles/colors';
 import codePush from 'react-native-code-push';
+// import { LogBox } from 'react-native';
+// LogBox.ignoreAllLogs();
 
 Sentry.init({ dsn: SENTRY_DSN });
 
@@ -28,7 +30,7 @@ const App = () => {
                 loading={<FullScreenLoader loading />}
                 persistor={persistor}>
                 <NavigationContainer ref={navigationRef}>
-                    <StatusBar backgroundColor={COLORS.BACKGROUND.HEADER_DARK} />
+                    <StatusBar backgroundColor={COLORS.BACKGROUND.INDIGO_DARK} />
                     <ErrorBoundary>
                         <ProtectedRouter />
                     </ErrorBoundary>
diff --git a/RN-UI-LIB b/RN-UI-LIB
index 84420d3b..e0252a39 160000
--- a/RN-UI-LIB
+++ b/RN-UI-LIB
@@ -1 +1 @@
-Subproject commit 84420d3b06b1cf80cd89a2b3df1014894f817fac
+Subproject commit e0252a39c09fe3569b7b7af366deb71b70b12e5b
diff --git a/src/components/banner/index.tsx b/src/components/banner/index.tsx
index 31c9a57e..4d842c8a 100644
--- a/src/components/banner/index.tsx
+++ b/src/components/banner/index.tsx
@@ -29,7 +29,7 @@ const Banner: React.FC<IBanner> = ({
             <View>{children}</View>
             {hideClose ? null : (
                 <TouchableOpacity onPress={toggleText} style={styles.closeIcon}>
-                    <CloseIconSmall fillColor={COLORS.BACKGROUND.HEADER_DARK} />
+                    <CloseIconSmall fillColor={COLORS.BACKGROUND.INDIGO_DARK} />
                 </TouchableOpacity>
             )}
         </View>
diff --git a/src/components/form/index.tsx b/src/components/form/index.tsx
index 016c66b8..6b852fe4 100644
--- a/src/components/form/index.tsx
+++ b/src/components/form/index.tsx
@@ -321,7 +321,7 @@ const styles = StyleSheet.create({
     iconContainer:{justifyContent:'center', height: 30, borderRadius: 15},
     header: {
         height: 78,
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
         paddingVertical: 22,
         paddingHorizontal: 16,
     }
diff --git a/src/hooks/useFirestoreUpdates.ts b/src/hooks/useFirestoreUpdates.ts
index a9e37883..23854cbd 100644
--- a/src/hooks/useFirestoreUpdates.ts
+++ b/src/hooks/useFirestoreUpdates.ts
@@ -8,7 +8,7 @@ import { CaseDetail } from '../screens/caseDetails/interface';
 import { FirestoreUpdateTypes } from '../common/Constants';
 import { toast } from '../../RN-UI-LIB/src/components/toast';
 import auth from '@react-native-firebase/auth';
-import { updateTemplateData } from '../reducer/caseReducre';
+import { updateTemplateData } from '../reducer/caseReducer';
 
 export interface CaseUpdates {
     updateType: string;
diff --git a/src/screens/Profile/ProfileHeader.tsx b/src/screens/Profile/ProfileHeader.tsx
index 6044f96e..14e300ca 100644
--- a/src/screens/Profile/ProfileHeader.tsx
+++ b/src/screens/Profile/ProfileHeader.tsx
@@ -31,7 +31,7 @@ export default ProfileHeader;
 
 const styles = StyleSheet.create({
     header: {
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
         height: 56,
         paddingLeft: 26,
     },
diff --git a/src/screens/allCases/AllCases.tsx b/src/screens/allCases/AllCases.tsx
index fbef5316..4dc8a080 100644
--- a/src/screens/allCases/AllCases.tsx
+++ b/src/screens/allCases/AllCases.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useMemo } from 'react';
 import {
     Animated,
     Modal,
+    NativeScrollEvent,
+    NativeSyntheticEvent,
     RefreshControl,
     StyleSheet,
     View,
@@ -29,7 +31,7 @@ import { useAppDispatch, useAppSelector } from '../../hooks';
 import NoCasesFound from './NoCasesFound';
 import useRefresh from '../../hooks/useRefresh';
 import { addClickstreamEvent } from '../../services/clickstreamEventService';
-import { CLICKSTREAM_EVENT_NAMES, HEADER_HEIGHT_MAX, HEADER_HEIGHT_MIN } from '../../common/Constants';
+import { CLICKSTREAM_EVENT_NAMES, HEADER_HEIGHT_MAX, HEADER_HEIGHT_MIN, HEADER_SCROLL_DISTANCE } from '../../common/Constants';
 import Filters from './Filters';
 
 export const getItem = (item: Array<ICaseItem>, index: number) => item[index];
@@ -192,18 +194,31 @@ const AllCases: React.FC<IAllCases> = ({ scrollAnimation, translateDistance, hea
         // scrollAnimation.setValue(0);
     // };
 
-    // const handleListScrollEnd = (
-    //     event: NativeSyntheticEvent<NativeScrollEvent>,
-    // ) => {
-    //     const offsetY = event?.nativeEvent?.contentOffset?.y;
-    //     if (offsetY <= 60) {
-    //         if (offsetY <= 30) {
-    //             scrollAnimation.setValue(0);
-    //         } else {
-    //             scrollAnimation.setValue(60);
-    //         }
-    //     }
-    // };
+    const handleListScrollEnd = (
+        event: NativeSyntheticEvent<NativeScrollEvent>,
+    ) => {
+        const offsetY = event?.nativeEvent?.contentOffset?.y;
+        if (offsetY <= HEADER_SCROLL_DISTANCE) {
+            if (offsetY <= HEADER_SCROLL_DISTANCE / 2) {
+                Animated.spring(scrollAnimation,{
+                    toValue: 0,
+                    speed: 10,
+                    useNativeDriver: false
+                }).start();
+            } else {
+                Animated.spring(scrollAnimation,{
+                    toValue: HEADER_SCROLL_DISTANCE,
+                    useNativeDriver: false
+                }).start();
+            }
+        }
+    };
+    const handleListScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const offsetY = event?.nativeEvent?.contentOffset?.y;
+        // const currentOffsetY = scrollAnimation._value;
+        if(!offsetY) return;
+        scrollAnimation.setValue(offsetY);
+    };
 
     return (
         <View style={[GenericStyles.fill, styles.container]}>
@@ -218,21 +233,11 @@ const AllCases: React.FC<IAllCases> = ({ scrollAnimation, translateDistance, hea
             ) : null}
             <VirtualizedList
                 data={compiledList}
-                onScroll={Animated.event(
-                    [
-                        {
-                            nativeEvent: {
-                                contentOffset: { y: scrollAnimation },
-                            },
-                        },
-                    ],
-                    {
-                        useNativeDriver: false,
-                    },
-                )}
+                onScroll={handleListScroll}
                 scrollEventThrottle={16}
                 // TODO: Need to handle spring animation
-                // onScrollEndDrag={handleListScrollEnd}
+                onScrollEndDrag={handleListScrollEnd}
+                onMomentumScrollEnd={handleListScrollEnd}
                 contentContainerStyle={[
                     compiledList.length ? null : GenericStyles.fill,
                     styles.list,
diff --git a/src/screens/allCases/CaseItem.tsx b/src/screens/allCases/CaseItem.tsx
index 4cf80cfc..8c92ab2e 100644
--- a/src/screens/allCases/CaseItem.tsx
+++ b/src/screens/allCases/CaseItem.tsx
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
         marginLeft: 4,
     },
     header: {
-        color: COLORS.TEXT.HEADER_DARK
+        color: COLORS.TEXT.INDIGO_DARK
     },
     pendingText: {
         marginLeft: 'auto'
diff --git a/src/screens/allCases/Filters.tsx b/src/screens/allCases/Filters.tsx
index f89fa014..be332bf1 100644
--- a/src/screens/allCases/Filters.tsx
+++ b/src/screens/allCases/Filters.tsx
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
         position: 'absolute',
         top: 0,
         zIndex: 10,
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
     },
     textInput: { 
         flexBasis: '75%' 
diff --git a/src/screens/allCases/LearnTodoBanner.tsx b/src/screens/allCases/LearnTodoBanner.tsx
index a2df6c04..a3e768b6 100644
--- a/src/screens/allCases/LearnTodoBanner.tsx
+++ b/src/screens/allCases/LearnTodoBanner.tsx
@@ -29,7 +29,7 @@ const LearnTodoBanner = () => {
 
 const styles = StyleSheet.create({
     text: {
-        color: COLORS.BACKGROUND.HEADER_DARK,
+        color: COLORS.BACKGROUND.INDIGO_DARK,
     },
     actionText: {
         color: COLORS.TEXT.BLUE,
diff --git a/src/screens/allCases/index.tsx b/src/screens/allCases/index.tsx
index fa5b46ae..eaa4ffb4 100644
--- a/src/screens/allCases/index.tsx
+++ b/src/screens/allCases/index.tsx
@@ -123,7 +123,7 @@ const AllCasesMain = () => {
             <View
                 style={[
                     GenericStyles.fill,
-                    { backgroundColor: COLORS.BACKGROUND.HEADER },
+                    { backgroundColor: COLORS.BACKGROUND.INDIGO },
                 ]}>
                 <Tabs
                     selectedTab="first"
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
     },
     headerTop: {
         height: 64,
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
     },
     selectedText: {
         marginLeft: 18,
@@ -183,7 +183,7 @@ const styles = StyleSheet.create({
     },
     tabBarStyle: {
         marginVertical: 8,
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
     },
     optionBar: {
         position: 'absolute',
@@ -200,7 +200,7 @@ const styles = StyleSheet.create({
         color: COLORS.BACKGROUND.SECONDARY,
     },
     headerMenu: {
-        backgroundColor: COLORS.BACKGROUND.HEADER
+        backgroundColor: COLORS.BACKGROUND.INDIGO
     }
 });
 
diff --git a/src/screens/caseDetails/CaseDetailsHeader.tsx b/src/screens/caseDetails/CaseDetailsHeader.tsx
index 8012959b..263e5019 100644
--- a/src/screens/caseDetails/CaseDetailsHeader.tsx
+++ b/src/screens/caseDetails/CaseDetailsHeader.tsx
@@ -31,7 +31,7 @@ export default CaseDetailsHeader;
 
 const styles = StyleSheet.create({
     header: {
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
         height: 56,
     },
     headerLabel: {
diff --git a/src/screens/caseDetails/UserDetailsSection.tsx b/src/screens/caseDetails/UserDetailsSection.tsx
index 42ff5312..c827c0de 100644
--- a/src/screens/caseDetails/UserDetailsSection.tsx
+++ b/src/screens/caseDetails/UserDetailsSection.tsx
@@ -178,7 +178,7 @@ const UserDetailsSection: React.FC<IUserDetailsSection> = props => {
                 <SafeAreaView
                     style={[
                         GenericStyles.fill,
-                        { backgroundColor: COLORS.BACKGROUND.HEADER },
+                        { backgroundColor: COLORS.BACKGROUND.INDIGO },
                     ]}>
                     <View style={GenericStyles.p16}>
                         <TouchableOpacity onPress={handleOpenClose}>
@@ -211,7 +211,7 @@ const styles = StyleSheet.create({
         height: 500,
     },
     backgroundColor: {
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
     },
     unsyncedIcon: {
         position: 'absolute',
@@ -224,7 +224,7 @@ const styles = StyleSheet.create({
         borderRadius: 6,
     },
     contentContainer: {
-        backgroundColor: COLORS.BACKGROUND.HEADER,
+        backgroundColor: COLORS.BACKGROUND.INDIGO,
         paddingBottom: 60,
     },
 });
diff --git a/src/screens/layout/Offline.tsx b/src/screens/layout/Offline.tsx
index 75d5b7c2..b18be363 100644
--- a/src/screens/layout/Offline.tsx
+++ b/src/screens/layout/Offline.tsx
@@ -19,7 +19,7 @@ const Offline = () => {
 
 const styles = StyleSheet.create({
     container:{
-        backgroundColor: COLORS.BACKGROUND.HEADER
+        backgroundColor: COLORS.BACKGROUND.INDIGO
     }
 })
 
diff --git a/src/screens/todoList/TodoList.tsx b/src/screens/todoList/TodoList.tsx
index 16ef24e2..799a8379 100644
--- a/src/screens/todoList/TodoList.tsx
+++ b/src/screens/todoList/TodoList.tsx
@@ -102,7 +102,7 @@ const TodoList = () => {
             <Banner hideClose style={GenericStyles.m12}>
                 <View style={[GenericStyles.row]}>
                     <View style={styles.infoIcon}>
-                        <InfoIcon color={COLORS.BACKGROUND.HEADER_DARK} />
+                        <InfoIcon color={COLORS.BACKGROUND.INDIGO_DARK} />
                     </View>
                     <View style={{flexBasis: '95%'}}>
                         <Heading dark type="h5" style={styles.headingText}>
@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
         borderTopWidth: 1,
     },
     headingText: {
-        color: COLORS.BACKGROUND.HEADER_DARK,
+        color: COLORS.BACKGROUND.INDIGO_DARK,
     },
     infoIcon: {
         flexBasis: '8%',