diff --git a/CustomerApp/src/Theme/Colors.js b/CustomerApp/src/Theme/Colors.js
index 5068c63..6bf942d 100644
--- a/CustomerApp/src/Theme/Colors.js
+++ b/CustomerApp/src/Theme/Colors.js
@@ -17,10 +17,12 @@ const COLORS = {
   primaryLightBlue: '#0cc8d5',
   lightBlueShadeGrey: '#f8f9fa',
   mediumBlueShadeGrey: '#f2f4f5',
+  dkmediumBlueShadeGrey: '#202020',
   black06: 'rgba(0,0,0,0.6)',
   white06: 'rgba(255,255,255,0.6)',
   redishOrange: '#FA7751',
   blueColor: '#00b9c6',
-  yellowishOrange: '#fff1d4'
+  yellowishOrange: '#fff1d4',
+  fontMainColor: '#000'
 }
 export { COLORS }
diff --git a/CustomerApp/src/Theme/Theme.js b/CustomerApp/src/Theme/Theme.js
index 95cea24..df818ee 100644
--- a/CustomerApp/src/Theme/Theme.js
+++ b/CustomerApp/src/Theme/Theme.js
@@ -62,7 +62,7 @@ const Theme = {
       fontSecondColor: COLORS.whitishGrey,
       placeHolderColor: COLORS.lightGrey,
       buttonBackground: COLORS.primary,
-      buttonBackgroundLight: COLORS.mediumBlueShadeGrey,
+      buttonBackgroundLight: COLORS.dkmediumBlueShadeGrey,
       buttonBackgroundBlue: COLORS.primaryLightBlue,
       active: COLORS.primaryLightBlue,
       buttonText: COLORS.white,
diff --git a/CustomerApp/src/components/CustomizeComponents/TitleComponent/TitleComponent.js b/CustomerApp/src/components/CustomizeComponents/TitleComponent/TitleComponent.js
index 5235b8a..057d8ef 100644
--- a/CustomerApp/src/components/CustomizeComponents/TitleComponent/TitleComponent.js
+++ b/CustomerApp/src/components/CustomizeComponents/TitleComponent/TitleComponent.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { View } from 'react-native'
 import { alignment } from '../../../utils/alignment'
-import TextDefault from '../../Text/TextDefault/TextDefault'
+import TextDefault from '../../Text'
 import styles from './styles'
 
 function TitleComponent(props) {
diff --git a/CustomerApp/src/components/Menu/StatusCard/styles.js b/CustomerApp/src/components/Menu/StatusCard/styles.js
index 296a9c9..2d046df 100644
--- a/CustomerApp/src/components/Menu/StatusCard/styles.js
+++ b/CustomerApp/src/components/Menu/StatusCard/styles.js
@@ -18,7 +18,7 @@ const useStyle = () => {
       marginTop: 20,
       width: scale(275),
       padding: moderateScale(15),
-      backgroundColor: '#f7f7fb',
+      backgroundColor: colors.cardContainer,
       borderRadius: 10,
       borderStyle: 'dashed',
       borderColor: '#a5a5a5',
@@ -32,7 +32,8 @@ const useStyle = () => {
       // ...alignment.MTxSmall,
       // ...alignment.MLmedium
     },
-    textContainer: {},
+    textContainer: {
+    },
     statusCircleContainer: {
       flexDirection: 'row',
       justifyContent: 'flex-start',
diff --git a/CustomerApp/src/screens/Cart/styles.js b/CustomerApp/src/screens/Cart/styles.js
index 78dc4ab..67ccf5e 100755
--- a/CustomerApp/src/screens/Cart/styles.js
+++ b/CustomerApp/src/screens/Cart/styles.js
@@ -43,7 +43,7 @@ const useStyle = () => {
     contactContainer: {
       width: '100%',
       alignSelf: 'center',
-      backgroundColor: colors.lightBackground,
+      backgroundColor: colors.cardContainer,
       borderRadius: 20,
       padding: scale(15)
     },
@@ -56,7 +56,7 @@ const useStyle = () => {
       alignSelf: 'center',
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      backgroundColor: colors.lightBackground,
+      backgroundColor: colors.cardContainer,
       borderBottomColor: colors.horizontalLine,
       ...alignment.PLmedium,
       ...alignment.PRmedium,
diff --git a/CustomerApp/src/screens/CreateAccount/CreateAccount.js b/CustomerApp/src/screens/CreateAccount/CreateAccount.js
index 4276ae9..22e35b2 100644
--- a/CustomerApp/src/screens/CreateAccount/CreateAccount.js
+++ b/CustomerApp/src/screens/CreateAccount/CreateAccount.js
@@ -164,7 +164,7 @@ const CreateAccount = () => {
           style={styles.marginLeft5}
           name="apple"
           size={scale(19)}
-          color="#000"
+          color={colors.iconColor}
         />
         <TextDefault style={alignment.MLsmall} bold>
           Signup with Apple
diff --git a/CustomerApp/src/screens/CreateAccount/styles.js b/CustomerApp/src/screens/CreateAccount/styles.js
index 16e91f9..c28c10b 100644
--- a/CustomerApp/src/screens/CreateAccount/styles.js
+++ b/CustomerApp/src/screens/CreateAccount/styles.js
@@ -71,7 +71,7 @@ const useStyle = () => {
       width: '100%',
       height: height * 0.07,
       borderRadius: moderateScale(20),
-      backgroundColor: colors.lightBackground,
+      backgroundColor: colors.buttonBackgroundLight,
       flexDirection: 'row',
       alignItems: 'center'
     },
diff --git a/CustomerApp/src/screens/Help/Help.js b/CustomerApp/src/screens/Help/Help.js
index 1b6730c..d60a582 100644
--- a/CustomerApp/src/screens/Help/Help.js
+++ b/CustomerApp/src/screens/Help/Help.js
@@ -6,6 +6,7 @@ import i18n from '../../../i18n'
 import { TextDefault, WrapperView } from '../../components'
 import { NAVIGATION_SCREEN } from '../../utils/constant'
 import useStyle from './styles'
+import { useTheme } from '@react-navigation/native'
 
 const links = [
   {
@@ -22,6 +23,7 @@ const links = [
 function Help() {
   const styles = useStyle()
   const navigation = useNavigation()
+  const { colors } = useTheme()
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -42,7 +44,7 @@ function Help() {
             key={index}>
             <TextDefault H4>{title}</TextDefault>
             <TouchableOpacity>
-              <AntDesign name="arrowright" size={22} color="black" />
+              <AntDesign name="arrowright" size={22} color={colors.fontMainColor} />
             </TouchableOpacity>
           </TouchableOpacity>
         ))}
diff --git a/CustomerApp/src/screens/Help/styles.js b/CustomerApp/src/screens/Help/styles.js
index 4d88b7c..67b8404 100644
--- a/CustomerApp/src/screens/Help/styles.js
+++ b/CustomerApp/src/screens/Help/styles.js
@@ -10,7 +10,7 @@ const useStyle = () => {
       flex: 1
     },
     itemContainer: {
-      backgroundColor: colors.white,
+      backgroundColor: colors.buttonBackgroundLight,
       marginHorizontal: moderateScale(20),
       borderRadius: moderateScale(10),
       elevation: 2,
diff --git a/CustomerApp/src/screens/Profile/Profile.js b/CustomerApp/src/screens/Profile/Profile.js
index 77a14b5..7e5541b 100644
--- a/CustomerApp/src/screens/Profile/Profile.js
+++ b/CustomerApp/src/screens/Profile/Profile.js
@@ -58,9 +58,17 @@ function Profile() {
     onError,
   });
 
+  const [title, setTitle] = useState('titleProfile');
+
   useLayoutEffect(() => {
     navigation.setOptions({
-      title: "Profile",
+      // headerTitle: () => (
+      //   <TextDefault center H4 bold>
+      //     {title || 'Profile'}
+      //   </TextDefault>
+      // ),
+      // title: "Profile",
+      headerTitle: i18n.t(title),
       headerRight: () => (
         <RightButton
           icon={toggleView ? ICONS_NAME.Pencil : ICONS_NAME.Cross}
@@ -71,6 +79,7 @@ function Profile() {
     });
   }, [navigation, toggleView]);
 
+
   useEffect(() => {
     if (backScreen) {
       viewHideAndShow();