diff --git a/Presentation 1 1.pptx b/Presentation 1 1.pptx
new file mode 100644
index 0000000..5a8729d
Binary files /dev/null and b/Presentation 1 1.pptx differ
diff --git a/navigation/index.js b/navigation/index.js
index 50e424c..cae5c7c 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -64,22 +64,21 @@ const BottomTabNavigator = ({ theme }) => {
       screenOptions={{
         tabBarHideOnKeyboard: true,
         headerShown,
-        contentStyle: {
-          backgroundColor: "white",
-        },
         tabBarIconStyle: {
           transform: [{ scaleX: -1 }],
         },
         tabBarLabelPosition: "below-icon",
-        tabBarActiveTintColor: Colors.theme1.green79,
-        tabBarInactiveTintColor: "grey",
+        tabBarActiveTintColor:
+          theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
+        tabBarInactiveTintColor:
+          theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
         tabBarStyle: {
           backgroundColor:
             theme === "light" ? Colors.theme1.white : Colors.theme1.dark,
           transform: [{ scaleX: -1 }],
           height: 65 + insets.bottom,
+          borderWidth : 0
         },
-
         tabBarLabelStyle: {
           transform: [{ scaleX: -1 }, { translateY: -5 }],
           fontSize: fontSize.xs,
@@ -102,7 +101,11 @@ const BottomTabNavigator = ({ theme }) => {
               >
                 <Path
                   d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z"
-                  fill={Colors.theme1.green79}
+                  fill={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.greenCF
+                  }
                 />
                 <Path
                   data-name="Vector"
@@ -119,11 +122,18 @@ const BottomTabNavigator = ({ theme }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 width={33.58}
                 height={33.579}
+                style={{
+                  transform: [{scale : 0.7}]
+                }}
               >
                 <Path
                   d="M12.62 3.974 5.079 9.85a6.658 6.658 0 0 0-2.281 4.645v10.368a5.912 5.912 0 0 0 5.89 5.9h16.2a5.909 5.909 0 0 0 5.89-5.89V14.691a6.609 6.609 0 0 0-2.518-4.827l-8.644-6.058a6.278 6.278 0 0 0-6.996.168Z"
                   fill="none"
-                  stroke={Colors.theme1.green79}
+                  stroke={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white
+                  }
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -132,7 +142,11 @@ const BottomTabNavigator = ({ theme }) => {
                   data-name="Vector"
                   d="M16.79 25.471v-6.693"
                   fill="none"
-                  stroke={Colors.theme1.green79}
+                  stroke={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white
+                  }
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -155,7 +169,11 @@ const BottomTabNavigator = ({ theme }) => {
               >
                 <Path
                   d="M32.207 24.227V6.798a2.869 2.869 0 0 0-3.179-2.875h-.088a27.857 27.857 0 0 0-10.35 3.422l-.249.159a1.641 1.641 0 0 1-1.552 0l-.361-.216A27.72 27.72 0 0 0 6.09 3.909a2.864 2.864 0 0 0-3.162 2.874v17.444a2.981 2.981 0 0 0 2.547 2.859l.425.058a37.976 37.976 0 0 1 10.892 3.524l.059.029a1.6 1.6 0 0 0 1.405 0 37.631 37.631 0 0 1 10.921-3.552l.483-.058a2.981 2.981 0 0 0 2.547-2.86Z"
-                  fill={Colors.theme1.green79}
+                  fill={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.greenCF
+                  }
                 />
                 <Path
                   data-name="Vector"
@@ -172,10 +190,17 @@ const BottomTabNavigator = ({ theme }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 width={35.135}
                 height={34.763}
+                style={{
+                  transform: [{scale : 0.7}]
+                }}
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1.green79}
+                  stroke={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white
+                  }
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -204,8 +229,16 @@ const BottomTabNavigator = ({ theme }) => {
                 <G data-name="Group 2000">
                   <Path
                     d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z"
-                    fill={Colors.theme1.green79}
-                    stroke={Colors.theme1.green79}
+                    fill={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.greenCF
+                    }
+                    stroke={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.greenCF
+                    }
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -223,12 +256,23 @@ const BottomTabNavigator = ({ theme }) => {
                 </G>
               </Svg>
             ) : (
-              <Svg xmlns="http://www.w3.org/2000/svg" width={35} height={32}>
+              <Svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={35}
+                height={32}
+                style={{
+                  transform: [{ scale: 0.7 }],
+                }}
+              >
                 <G data-name="Group 1999">
                   <Path
                     d="M25.421 29.241H8.974C4.04 29.241.75 26.392.75 19.744V10.25c0-6.651 3.29-9.5 8.224-9.5h16.447c4.935 0 8.229 2.849 8.229 9.5v9.5c0 6.642-3.294 9.491-8.229 9.491Z"
                     fill="none"
-                    stroke={Colors.theme1.green79}
+                    stroke={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white
+                    }
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -238,7 +282,11 @@ const BottomTabNavigator = ({ theme }) => {
                     data-name="Vector"
                     d="M12.427 14.995v-2.083c0-2.673 1.892-3.766 4.2-2.43l1.805 1.042 1.806 1.041c2.308 1.336 2.308 3.523 0 4.86l-1.806 1.041-1.805 1.046c-2.308 1.332-4.2.239-4.2-2.434v-2.083Z"
                     fill="none"
-                    stroke={Colors.theme1.green79}
+                    stroke={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white
+                    }
                     strokeLinecap="round"
                     strokeLinejoin="round"
                     strokeWidth={1.5}
@@ -267,7 +315,11 @@ const BottomTabNavigator = ({ theme }) => {
                 height={31.017}
               >
                 <G
-                  fill={Colors.theme1.green79}
+                  fill={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.greenCF
+                  }
                   stroke={"white"}
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -286,10 +338,17 @@ const BottomTabNavigator = ({ theme }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 width={31.017}
                 height={31.017}
+                style={{
+                  transform: [{ scale: 0.8 }],
+                }}
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1.green79}
+                  stroke={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white
+                  }
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
@@ -318,7 +377,13 @@ const BottomTabNavigator = ({ theme }) => {
                 width={31.192}
                 height={31.192}
               >
-                <G fill={Colors.theme1.green79}>
+                <G
+                  fill={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.greenCF
+                  }
+                >
                   <Path d="M15.803 14.127a2.363 2.363 0 0 0-.429 0 5.777 5.777 0 1 1 .429 0Z" />
                   <Path
                     data-name="Vector"
@@ -331,10 +396,17 @@ const BottomTabNavigator = ({ theme }) => {
                 xmlns="http://www.w3.org/2000/svg"
                 width={31.192}
                 height={31.192}
+                style={{
+                  transform: [{ scale: 0.8 }],
+                }}
               >
                 <G
                   fill="none"
-                  stroke={Colors.theme1.green79}
+                  stroke={
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white
+                  }
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={1.5}
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index 07452e5..8abf3a3 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -1,20 +1,24 @@
 import React from "react";
 import { Image, View } from "react-native";
 import Svg, { G, Path } from "react-native-svg";
+import { connect } from "react-redux";
 
 //style
 import tw from "tailwind-rn";
+import Colors from "../constants/Colors";
 
-function Avatar({ source, size }) {
+function Avatar({ source, size, theme }) {
   return (
     <View
       style={[
-        tw(
-          "bg-gray-100 rounded-full overflow-hidden flex justify-center items-center"
-        ),
+        tw("rounded-full overflow-hidden flex justify-center items-center"),
         {
           minWidth: size,
           minHeight: size,
+          backgroundColor:
+            theme === "light"
+              ? Colors.theme1.grayE3
+              : Colors.theme1.white + '55',
         },
       ]}
     >
@@ -35,13 +39,13 @@ function Avatar({ source, size }) {
             <Path d="M18.488 3.081a7.311 7.311 0 0 0-.185 14.621 1.243 1.243 0 0 1 .339 0h.108a7.313 7.313 0 0 0-.262-14.621Z" />
             <Path
               d="M18.488 5.081a5.324 5.324 0 0 0-5.318 5.318c0 1.395.528 2.705 1.486 3.689.94.965 2.215 1.535 3.6 1.61.165-.011.328-.01.484.002a5.31 5.31 0 0 0 5.066-5.304 5.324 5.324 0 0 0-5.318-5.315m0-2a7.325 7.325 0 0 1 7.318 7.318 7.3 7.3 0 0 1-7.056 7.303h-.108a1.243 1.243 0 0 0-.339 0c-4.036-.14-7.133-3.344-7.133-7.303a7.325 7.325 0 0 1 7.318-7.318Z"
-              fill="#818181"
+              fill={theme === 'light' ? "#818181" : Colors.theme1.white}
             />
             <G data-name="Vector">
               <Path d="M26.314 21.8a15.3 15.3 0 0 0-15.637 0 6.081 6.081 0 0 0-3.035 4.976 6.03 6.03 0 0 0 3.02 4.945 14.234 14.234 0 0 0 7.826 2.172 14.234 14.234 0 0 0 7.826-2.172 6.078 6.078 0 0 0 3.02-4.976 6.066 6.066 0 0 0-3.02-4.945Z" />
               <Path
                 d="M18.507 21.651c-2.528 0-4.977.661-6.721 1.814-1.383.926-2.144 2.102-2.144 3.311 0 1.201.756 2.366 2.129 3.282l.006.003c1.734 1.165 4.18 1.833 6.711 1.833 2.53 0 4.977-.668 6.708-1.83 1.762-1.189 2.136-2.455 2.138-3.31-.01-.862-.388-2.129-2.129-3.29-1.729-1.152-4.17-1.813-6.698-1.813m0-2c2.831 0 5.658.716 7.807 2.15 1.942 1.293 3.005 3.05 3.02 4.945 0 1.91-1.078 3.666-3.02 4.976-4.313 2.896-11.339 2.896-15.652 0-1.942-1.294-3.02-3.05-3.02-4.946 0-1.895 1.078-3.666 3.035-4.976 2.165-1.433 5-2.149 7.83-2.149Z"
-                fill="#818181"
+                fill={theme === 'light' ? "#818181" : Colors.theme1.white}
               />
             </G>
           </G>
@@ -51,4 +55,8 @@ function Avatar({ source, size }) {
   );
 }
 
-export default Avatar;
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(Avatar);
diff --git a/src/components/Blur.js b/src/components/Blur.js
index c5ce7bd..20093a6 100644
--- a/src/components/Blur.js
+++ b/src/components/Blur.js
@@ -1,16 +1,26 @@
 import React from "react";
 import { BlurView } from "expo-blur";
 import { ActivityIndicator } from "react-native";
-import tw from 'tailwind-rn';
+import { connect } from "react-redux";
+import tw from "tailwind-rn";
 
-export default function Blur() {
+function Blur({ theme }) {
   return (
     <BlurView
       intensity={280}
       // tint="dark"
-      style={[{ width: "100%", height: "100%" }, tw('flex-1 flex justify-center items-center')]}
+      style={[
+        { width: "100%", height: "100%" },
+        tw("flex-1 flex justify-center items-center"),
+      ]}
     >
       <ActivityIndicator size="large" color="#12CF7F" />
     </BlurView>
   );
 }
+
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(Blur);
diff --git a/src/components/CustomTextInput.js b/src/components/CustomTextInput.js
index 902dff8..e612e7d 100644
--- a/src/components/CustomTextInput.js
+++ b/src/components/CustomTextInput.js
@@ -41,15 +41,16 @@ const FloatingLabelInput = ({
             : -Math.floor(fontSize.sm),
         },
       ],
-      color: !isFocused ? Colors.theme1.gray2077 : Colors.theme1.green79,
+      backgroundColor : theme === 'light' ? Colors.theme1.white : Colors.theme1.dark,
+      color: !isFocused ? theme === 'light' ? Colors.theme1.gray2077 : Colors.theme1.white + 'aa' : Colors.theme1.green79,
     },
     inputStyle: {
       fontSize: fontSize.lg,
-      color: Colors.theme1.black,
+      color: theme === 'light' ? Colors.theme1.black : Colors.theme1.white,
       borderWidth: 1,
       borderColor: isFocused
         ? Colors.theme1.greenC8
-        : Colors.theme1.gray2077 + "66",
+        : theme === "light" ? Colors.theme1.gray2077 + "66" : Colors.theme1.white + 'aa',
       textAlign: textAlign,
       fontFamily: "regular",
       direction: direction ? direction : "rtl",
@@ -63,12 +64,14 @@ const FloatingLabelInput = ({
       setIsFocused(false);
     }
   }, [value]);
+
+  console.log(theme);
   return (
-    <View style={tw("mt-4")}>
+    <View style={tw("mt-4 pb-1")}>
       <Text
         style={[
           styles.labelStyle,
-          tw("px-1 z-10 bg-white absolute right-3 text-center"),
+          tw("px-1 z-10 absolute right-3 text-center"),
         ]}
         onPress={() => setIsFocused(true)}
       >
@@ -89,6 +92,7 @@ const FloatingLabelInput = ({
         onBlur={() => (value ? {} : setIsFocused(() => false))}
         keyboardType={keyboardType}
         multiline={multiline}
+        placeholderTextColor={theme === 'light' ? Colors.theme1.gray20 + 'aa' : Colors.theme1.white + '55'}
       />
     </View>
   );
diff --git a/src/components/Divider.js b/src/components/Divider.js
index 95bb0e5..7663cdd 100644
--- a/src/components/Divider.js
+++ b/src/components/Divider.js
@@ -1,19 +1,24 @@
 import React from "react";
 import { View, Text } from "react-native";
+import { connect } from "react-redux";
 import tw from "tailwind-rn";
 
-const Divider = ({ type }) => {
+const Divider = ({ type, theme }) => {
   return (
     <View
       style={[
-        tw(`bg-gray-100 my-4`),
+        tw(`bg-gray-100 ${theme === "light" ? "" : "bg-opacity-40"} my-4`),
         {
           height: type === "horizontal" ? "100%" : 1,
-          width: type === 'horizontal' ? 1 : "100%",
+          width: type === "horizontal" ? 1 : "100%",
         },
       ]}
     ></View>
   );
 };
 
-export default Divider;
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
+
+export default connect(mapStateToProps)(Divider);
diff --git a/src/components/Empty.js b/src/components/Empty.js
index 25f1e63..880ae7c 100644
--- a/src/components/Empty.js
+++ b/src/components/Empty.js
@@ -16,7 +16,8 @@ const Empty = ({ text, buttonText, buttonAction, theme }) => {
             fontFamily: "regular",
             fontSize: fontSize.tiny,
             transform: [{ translateY: -50 }],
-            color: Colors.theme1.gray20,
+            color:
+              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
           },
         ]}
       >
@@ -26,7 +27,11 @@ const Empty = ({ text, buttonText, buttonAction, theme }) => {
         <Pressable
           style={[
             tw("py-2 px-5 rounded-sm"),
-            { backgroundColor: Colors.theme1.greenCF },
+            {
+              backgroundColor: theme === "light" ? Colors.theme1.greenCF : null,
+              borderWidth: theme === "light" ? 0 : 1,
+              borderColor: Colors.theme1.greenCF,
+            },
           ]}
           onPress={() => buttonAction()}
         >
@@ -36,6 +41,10 @@ const Empty = ({ text, buttonText, buttonAction, theme }) => {
               {
                 fontFamily: "regular",
                 fontSize: fontSize.tiny,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.white
+                    : Colors.theme1.greenCF,
               },
             ]}
           >
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 61ec7a5..ae8f670 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -49,24 +49,28 @@ const Navbar = ({
     ).length;
   }, [headerOptions, userFavoriteList]);
 
-  const Button = useCallback(({ icon, route, state }) => {
-    return (
-      <TouchableOpacity
-        style={[
-          tw("rounded-md p-1"),
-          {
-            backgrounds: Colors.theme1.greenCF + "05",
-            borderColor: Colors.theme1.green79,
-            borderWidth: 1,
-            marginLeft: route === "AR" ? 10 : 0,
-          },
-        ]}
-        onPress={() => navigation.navigate(route, { page: state })}
-      >
-        {icon}
-      </TouchableOpacity>
-    );
-  }, []);
+  const Button = useCallback(
+    ({ icon, route, state }) => {
+      return (
+        <TouchableOpacity
+          style={[
+            tw("rounded-md p-1"),
+            {
+              backgrounds: Colors.theme1.greenCF + "05",
+              borderColor:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
+              borderWidth: 1,
+              marginLeft: route === "AR" ? 10 : 0,
+            },
+          ]}
+          onPress={() => navigation.navigate(route, { page: state })}
+        >
+          {icon}
+        </TouchableOpacity>
+      );
+    },
+    [theme]
+  );
   return (
     <View
       style={[
@@ -87,7 +91,9 @@ const Navbar = ({
             name="arrow-forward"
             style={tw("mr-2")}
             size={24}
-            color={"#52796F"}
+            color={
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+            }
             onPress={() => navigation.goBack()}
           />
         ) : null
@@ -97,7 +103,8 @@ const Navbar = ({
           style={{
             fontFamily: "demi",
             fontSize: fontSize.xl,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
             paddingRight: 16,
           }}
         >
@@ -113,7 +120,9 @@ const Navbar = ({
           >
             <G
               fill="none"
-              stroke="#52796F"
+              stroke={
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+              }
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={2}
@@ -172,7 +181,9 @@ const Navbar = ({
               name="arrow-back"
               style={tw("mr-2")}
               size={24}
-              color={"#52796F"}
+              color={
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+              }
               onPress={() => navigation.goBack()}
             />
           ) : null
@@ -182,7 +193,13 @@ const Navbar = ({
             <Button
               icon={
                 <Svg xmlns="http://www.w3.org/2000/svg" width={30} height={30}>
-                  <G fill="#52796f">
+                  <G
+                    fill={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white
+                    }
+                  >
                     <Path
                       data-name="Path 11446"
                       d="M2.131.275A3.177 3.177 0 0 0 .114 2.841 24.849 24.849 0 0 0 .045 5.98l.069 2.177h8.02V.137L5.499.091a18.649 18.649 0 0 0-3.368.184Zm4.973 3.873v2.979H1.146V4.973c0-2.452.229-3.277.962-3.575a13.17 13.17 0 0 1 2.773-.206l2.223-.023Z"
@@ -364,7 +381,14 @@ const Navbar = ({
                   width={29.9}
                   height={30.908}
                 >
-                  <G data-name="Group 419" fill="#52796F">
+                  <G
+                    data-name="Group 419"
+                    fill={
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white
+                    }
+                  >
                     <Path
                       data-name="Path 1864"
                       d="M1.694 1.694h5.081V0H0v6.775h1.694Zm0 0"
@@ -400,13 +424,20 @@ const Navbar = ({
         ) : null}
         {headerOptions?.bookmark ? (
           bookmarkLoading ? (
-            <ActivityIndicator size={20} color={Colors.theme1.green79} />
+            <ActivityIndicator
+              size={20}
+              color={
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+              }
+            />
           ) : isActiveBookmark ? (
             <Ionicons
               name="bookmark"
               style={tw("mr-2")}
               size={24}
-              color={"#52796F"}
+              color={
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+              }
               onPress={() =>
                 headerOptions?.bookmarkItem?.contentId
                   ? deleteBookmark({
@@ -430,7 +461,9 @@ const Navbar = ({
               name="bookmark-outline"
               style={tw("mr-2")}
               size={24}
-              color={"#52796F"}
+              color={
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white
+              }
               onPress={() =>
                 headerOptions?.bookmarkItem?.contentId
                   ? addToBookmark({
diff --git a/src/components/Search.js b/src/components/Search.js
index 1ed4fb0..4609464 100644
--- a/src/components/Search.js
+++ b/src/components/Search.js
@@ -19,14 +19,15 @@ const Search = ({
   const styles = StyleSheet.create({
     inputStyle: {
       fontSize: fontSize.tiny,
-      color: Colors.theme1.gray2077,
+      color: theme === "light" ? Colors.theme1.gray2077 : Colors.theme1.white,
       borderWidth: 0.5,
       borderColor: Colors.theme1.gray20 + "88",
       paddingVertical: 10,
       paddingHorizontal: 10,
       direction: direction,
       textAlign: textAlign,
-      backgroundColor: Colors.theme1.white,
+      backgroundColor:
+        theme === "light" ? Colors.theme1.white : Colors.theme1.gray2077,
       fontFamily: "regular",
     },
   });
@@ -36,7 +37,11 @@ const Search = ({
         style={[styles.inputStyle, tw("rounded-sm")]}
         onChangeText={(text) => onChange(text)}
         placeholder={placeholder}
-        placeholderTextColor={Colors.theme1.gray20 + '88'}
+        placeholderTextColor={
+          theme === "light"
+            ? Colors.theme1.gray20 + "88"
+            : Colors.theme1.white + "aa"
+        }
         value={value}
       />
       <Pressable style={tw("absolute left-3 top-3")}>
diff --git a/src/components/Select.js b/src/components/Select.js
index 5be4783..f2ea245 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -24,7 +24,8 @@ function Select({
         borderColor: Colors.theme1.gray2077 + "66",
         borderRadius: 2,
         height: 48,
-        backgroundColor: "white",
+        backgroundColor:
+          theme === "light" ? Colors.theme1.white : Colors.theme1.gray2077,
         fontFamily: "regular",
       }}
       rowTextStyle={{
@@ -38,7 +39,7 @@ function Select({
         justifyContent: "flex-end",
         flex: 0,
         fontSize: fontSize.tiny,
-        color: Colors.theme1.gray2077,
+        color: theme === "light" ? Colors.theme1.gray2077 : Colors.theme1.white,
         fontFamily: "regular",
         // display: 'inline'
       }}
@@ -56,7 +57,11 @@ function Select({
           <Path
             d="m13.347 5.997-4.368 4.369a1.331 1.331 0 0 1-1.876 0L2.734 5.997"
             fill="none"
-            stroke={Colors.theme1.gray2077 + "66"}
+            stroke={
+              theme === "light"
+                ? Colors.theme1.gray2077 + "66"
+                : Colors.theme1.white
+            }
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js
index badfd2d..53bc5b6 100644
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@@ -4,7 +4,7 @@ const width = Dimensions.get("window").width;
 
 const initialState = {
   ltr: false,
-  theme: 'light',
+  theme: 'dark',
   mobile : width < 720,
   homeData: [],
   newProducts: [],
diff --git a/src/screens/AR/components/Book.js b/src/screens/AR/components/Book.js
index d6c0b03..eabc780 100644
--- a/src/screens/AR/components/Book.js
+++ b/src/screens/AR/components/Book.js
@@ -2,7 +2,7 @@ import { Pressable, Text, Image, Dimensions } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
-import * as Linking from 'expo-linking';
+import * as Linking from "expo-linking";
 
 //style
 import tw from "tailwind-rn";
@@ -27,8 +27,8 @@ const Book = ({ book, mobile, theme }) => {
         style={[
           tw("rounded-sm w-full"),
           {
-            height: mobile ? (width - 32) / 2 * 3 / 3.5  : 200,
-            flex : 1,
+            height: mobile ? (((width - 32) / 2) * 3) / 3.5 : 200,
+            flex: 1,
           },
         ]}
       />
@@ -38,7 +38,8 @@ const Book = ({ book, mobile, theme }) => {
             fontFamily: "bold",
             fontSize: fontSize.tiny,
             marginTop: 10,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
           },
         ]}
       >
@@ -50,7 +51,7 @@ const Book = ({ book, mobile, theme }) => {
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 export default connect(mapStateToProps)(Book);
diff --git a/src/screens/AR/index.js b/src/screens/AR/index.js
index 771174f..f7cb370 100644
--- a/src/screens/AR/index.js
+++ b/src/screens/AR/index.js
@@ -37,7 +37,6 @@ function AR({ getArList, arList, mobile }) {
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
       }}
     >
@@ -58,7 +57,6 @@ function AR({ getArList, arList, mobile }) {
         style={{
           paddingHorizontal: 16,
           height: height,
-          backgroundColor: "white",
         }}
         contentContainerStyle={{ paddingBottom: 60 }}
       >
diff --git a/src/screens/Activation/index.js b/src/screens/Activation/index.js
index fef86e1..80b604b 100644
--- a/src/screens/Activation/index.js
+++ b/src/screens/Activation/index.js
@@ -14,6 +14,7 @@ import { connect } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
 import Svg, { Image as Imagee } from "react-native-svg";
 import { activation } from "../../redux/actions";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 //components
 import TopHeader from "../../components/Header";
@@ -36,6 +37,7 @@ const { height } = Dimensions.get("window");
 function Activation({ add, mobile, theme, route }) {
   const [value, setValue] = useState(null);
   const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
 
   return (
     <SafeAreaView
@@ -45,7 +47,10 @@ function Activation({ add, mobile, theme, route }) {
       ]}
     >
       <ScrollView style={tw("flex-1")}>
-        <KeyboardAvoidingView behavior={"padding"} style={{ height }}>
+        <KeyboardAvoidingView
+          behavior={"padding"}
+          style={{ height: height - insets.bottom * 2.5 }}
+        >
           <TouchableWithoutFeedback>
             <View
               style={[
@@ -91,15 +96,20 @@ function Activation({ add, mobile, theme, route }) {
               <View style={tw("w-full flex  px-4")}>
                 <TextInput
                   placeholder="کد فعال‌سازی"
-                  placeholderTextColor="#70707070"
+                  placeholderTextColor={"#707070"}
                   style={[
-                    tw("w-full mt-4 mb-3 rounded-md text-center py-2"),
+                    tw("w-full mt-4 mb-3 rounded-md text-center py-3"),
                     {
-                      backgroundColor: "#F9F9F9",
-                      borderColor: "#DFDFDF",
+                      backgroundColor:
+                        theme === "light" ? "#F9F9F9" : Colors.theme1.dark,
+                      borderColor: "#DFDFDF" + (theme === "light" ? "" : "aa"),
                       borderWidth: 1,
                       fontSize: fontSize.base,
                       fontFamily: "light",
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.gray20
+                          : Colors.theme1.white,
                     },
                   ]}
                   value={value || route?.params?.data}
diff --git a/src/screens/Address/index.js b/src/screens/Address/index.js
index 3cf2d22..b95a5b3 100644
--- a/src/screens/Address/index.js
+++ b/src/screens/Address/index.js
@@ -51,6 +51,7 @@ const Address = ({
   setPhase,
   cityLoading,
   mobile,
+  theme
 }) => {
   const [addressFields, setAddressFields] = useState({});
   const [mapAddress, setMapAddress] = useState(null);
@@ -226,7 +227,7 @@ const Address = ({
           style={{
             fontFamily: "bold",
             fontSize: mobile ? fontSize.lg : fontSize.xl2,
-            color: Colors.theme1.gray20,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             textAlign: ios ? "right" : "auto",
           }}
         >
@@ -236,7 +237,7 @@ const Address = ({
           style={{
             fontFamily: "regular",
             fontSize: mobile ? fontSize.sm : fontSize.base,
-            color: Colors.theme1.gray20 + "aa",
+            color: theme === 'light' ? Colors.theme1.gray20 + 'aa' : Colors.theme1.white + "aa",
             textAlign: ios ? "right" : "auto",
           }}
         >
@@ -459,7 +460,6 @@ const styles = StyleSheet.create({
     paddingBottom: 0,
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,
@@ -477,6 +477,7 @@ const mapStateToProps = (state) => ({
   user: state.user.status,
   profileFields: state.user.profileFields,
   mobile: state.publicApi.mobile,
+  theme : state.publicApi.theme
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Blog/index.js b/src/screens/Blog/index.js
index c5a3dab..c87b588 100644
--- a/src/screens/Blog/index.js
+++ b/src/screens/Blog/index.js
@@ -162,6 +162,11 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
                 fontFamily: "bold",
                 fontSize: fontSize.base,
                 textAlign: ios ? "right" : "auto",
+                marginBottom : 20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.grayF9,
               }}
             >
               {blog?.title}
@@ -176,7 +181,17 @@ export const Blog = ({ getInfo, blog, getList, blogs, route, theme }) => {
               <HTMLView
                 value={blog?.text}
                 renderNode={renderNode}
-                stylesheet={styles.font}
+                stylesheet={{
+                  p: {
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.gray20
+                        : Colors.theme1.grayF9,
+                    textAlign: "right",
+                    fontFamily : 'light',
+                    lineHeight: 25
+                  },
+                }}
               />
             </View>
           </View>
@@ -224,7 +239,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    backgroundColor: "white",
     paddingVertical: 0,
     paddingHorizontal: 0,
   },
diff --git a/src/screens/Blogs/index.js b/src/screens/Blogs/index.js
index ae14847..dc8db83 100644
--- a/src/screens/Blogs/index.js
+++ b/src/screens/Blogs/index.js
@@ -104,7 +104,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    backgroundColor: "white",
     paddingVertical: 0,
     paddingHorizontal: 0,
   },
diff --git a/src/screens/Blogs/layouts/Hashtags.js b/src/screens/Blogs/layouts/Hashtags.js
index a31dbc0..c756012 100644
--- a/src/screens/Blogs/layouts/Hashtags.js
+++ b/src/screens/Blogs/layouts/Hashtags.js
@@ -15,7 +15,7 @@ export const Hashtags = ({ hashtags, theme }) => {
         tw(
           "flex flex-row-reverse py-1 pl-3 rounded-full items-center w-full mb-7"
         ),
-        {borderWidth : 2, borderColor : Colors.theme1.greenFF1}
+        {borderWidth : 2, borderColor : Colors.theme1.greenFF1 + (theme === 'light' ? "" : "55")}
       ]}
     >
       <Svg xmlns="http://www.w3.org/2000/svg" width={31.486} height={19.692}>
diff --git a/src/screens/Blogs/layouts/Header.js b/src/screens/Blogs/layouts/Header.js
index a61115a..d758a47 100644
--- a/src/screens/Blogs/layouts/Header.js
+++ b/src/screens/Blogs/layouts/Header.js
@@ -15,15 +15,15 @@ export const Header = ({ title, theme }) => {
           tw("py-2.5 pr-2.5 pl-5"),
           {
             fontSize: fontSize.base,
-            color: Colors.theme1.white,
-            backgroundColor: Colors.theme1.black,
+            color: theme === "light" ? Colors.theme1.white : Colors.theme1.black,
+            backgroundColor: theme === 'light' ? Colors.theme1.black : Colors.theme1.white + 'dd',
             fontFamily : 'bold'
           },
         ]}
       >
         {title}
       </Text>
-      <View style={{ width : '100%', backgroundColor : Colors.theme1.grayE3, height : 2 }}></View>
+      <View style={{ width : '100%', backgroundColor : Colors.theme1.grayE3 + (theme === "light" ? "" : "55"), height : 2 }}></View>
     </View>
   );
 };
diff --git a/src/screens/Blogs/layouts/New.js b/src/screens/Blogs/layouts/New.js
index e87eac3..1572aa9 100644
--- a/src/screens/Blogs/layouts/New.js
+++ b/src/screens/Blogs/layouts/New.js
@@ -35,7 +35,7 @@ export const New = ({ blog, theme }) => {
         style={{
           fontSize: fontSize.tiny,
           fontFamily: "bold",
-          color: Colors.theme1.gray20,
+          color: theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
           marginTop: 5,
           textAlign: ios ? "right" : "auto",
         }}
@@ -46,7 +46,8 @@ export const New = ({ blog, theme }) => {
         style={{
           fontSize: fontSize.xs,
           fontFamily: "regular",
-          color: Colors.theme1.gray2077,
+          color:
+            theme === "light" ? Colors.theme1.gray2077 : Colors.theme1.grayF9,
           textAlign: ios ? "right" : "auto",
           marginTop: 5,
         }}
diff --git a/src/screens/Blogs/layouts/Single.js b/src/screens/Blogs/layouts/Single.js
index 65086f5..4c18cd5 100644
--- a/src/screens/Blogs/layouts/Single.js
+++ b/src/screens/Blogs/layouts/Single.js
@@ -109,7 +109,8 @@ export const Single = ({ blog, theme }) => {
             style={{
               fontFamily: "bold",
               fontSize: fontSize.lg,
-              color: Colors.theme1.gray20,
+              color:
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
               textAlign: ios ? "right" : "auto",
             }}
           >
@@ -119,7 +120,10 @@ export const Single = ({ blog, theme }) => {
             style={{
               fontFamily: "regular",
               fontSize: fontSize.sm,
-              color: Colors.theme1.gray2077,
+              color:
+                theme === "light"
+                  ? Colors.theme1.gray2077
+                  : Colors.theme1.grayF9,
               lineHeight: 25,
               marginTop: 10,
               textAlign: ios ? "right" : "auto",
@@ -138,7 +142,7 @@ export const Single = ({ blog, theme }) => {
 
 const mapStateToProps = (state) => ({
   blog: state.blog.list[0],
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {};
diff --git a/src/screens/Blogs/layouts/Target.js b/src/screens/Blogs/layouts/Target.js
index 1dd456f..fae1f12 100644
--- a/src/screens/Blogs/layouts/Target.js
+++ b/src/screens/Blogs/layouts/Target.js
@@ -53,6 +53,8 @@ const Target = ({ blogs, theme }) => {
               fontFamily: "bold",
               fontSize: fontSize.lg,
               textAlign: ios ? "right" : "auto",
+              color:
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
             },
           ]}
         >
@@ -73,7 +75,10 @@ const Target = ({ blogs, theme }) => {
                 style={[
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1.gray20,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.gray20
+                        : Colors.theme1.grayF9,
                     fontSize: fontSize.tiny,
                   },
                 ]}
@@ -84,7 +89,10 @@ const Target = ({ blogs, theme }) => {
                 style={[
                   {
                     fontFamily: "regular",
-                    color: Colors.theme1.gray20,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.gray20
+                        : Colors.theme1.grayF9,
                     fontSize: fontSize.xs,
                   },
                 ]}
@@ -98,7 +106,10 @@ const Target = ({ blogs, theme }) => {
               style={[
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1.gray20,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.grayF9,
                   fontSize: fontSize.sm,
                 },
               ]}
@@ -110,7 +121,10 @@ const Target = ({ blogs, theme }) => {
                 tw("mt-0"),
                 {
                   fontFamily: "bold",
-                  color: Colors.theme1.gray20,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.grayF9,
                   fontSize: fontSize.sm,
                 },
               ]}
@@ -145,6 +159,10 @@ const Target = ({ blogs, theme }) => {
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
                 textAlign: ios ? "right" : "auto",
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.grayF9,
               },
             ]}
           >
diff --git a/src/screens/Contact/index.js b/src/screens/Contact/index.js
index daa242d..47e70ea 100644
--- a/src/screens/Contact/index.js
+++ b/src/screens/Contact/index.js
@@ -33,7 +33,6 @@ function Contact({ info, theme }) {
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
       }}
     >
       <Navbar
@@ -53,7 +52,7 @@ function Contact({ info, theme }) {
         title={"ارتباط با ما"}
         description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
       />
-      <ScrollView style={[tw("bg-white flex  pb-20 px-4 mb-4")]}>
+      <ScrollView style={[tw("flex pb-20 px-4 mb-4")]}>
         {Object.keys(info).map((item, index) => (
           <Box info={info[item]} key={index} />
         ))}
diff --git a/src/screens/Contact/layouts/Ticket.js b/src/screens/Contact/layouts/Ticket.js
index 43d8636..cc410f3 100644
--- a/src/screens/Contact/layouts/Ticket.js
+++ b/src/screens/Contact/layouts/Ticket.js
@@ -77,7 +77,6 @@ export const Ticket = ({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
       }}
     >
diff --git a/src/screens/Contact/layouts/Tickets.js b/src/screens/Contact/layouts/Tickets.js
index 6870fba..42f8d00 100644
--- a/src/screens/Contact/layouts/Tickets.js
+++ b/src/screens/Contact/layouts/Tickets.js
@@ -26,7 +26,6 @@ export const Tickets = ({ tickets = [], theme }) => {
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
       }}
     >
diff --git a/src/screens/Faq/components/Instance.js b/src/screens/Faq/components/Instance.js
index 0b82275..df24726 100644
--- a/src/screens/Faq/components/Instance.js
+++ b/src/screens/Faq/components/Instance.js
@@ -14,10 +14,12 @@ function Instance({ question, selectFaq, mobile, theme }) {
         tw(`w-full flex  my-1.5 rounded-sm px-4 ${mobile ? "py-2" : "py-3"}`),
         {
           backgroundColor: !question.active
-            ? "#F9F9F9"
+            ? theme === "light"
+              ? "#F9F9F9"
+              : null
             : Colors.theme1.greenCF + "0a",
           borderColor: !question.active
-            ? "#DBDBDB"
+            ? "#DBDBDB" + (theme === "light" ? "" : "88")
             : Colors.theme1.greenCF,
           borderWidth: 1.5,
         },
@@ -29,7 +31,10 @@ function Instance({ question, selectFaq, mobile, theme }) {
             {
               width: "90%",
               textAlign: "right",
-              color: Colors.theme1.green79,
+              color:
+                theme === "light"
+                  ? Colors.theme1.green79
+                  : Colors.theme1.grayF9,
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "bold",
             },
@@ -38,9 +43,21 @@ function Instance({ question, selectFaq, mobile, theme }) {
           {question.title}
         </Text>
         {question.active ? (
-          <Entypo name="minus" size={18} color={Colors.theme1.green79} />
+          <Entypo
+            name="minus"
+            size={18}
+            color={
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.grayF9
+            }
+          />
         ) : (
-          <Entypo name="plus" size={18} color={Colors.theme1.green79} />
+          <Entypo
+            name="plus"
+            size={18}
+            color={
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.grayF9
+            }
+          />
         )}
       </View>
       {question.active ? (
@@ -48,7 +65,10 @@ function Instance({ question, selectFaq, mobile, theme }) {
           <Text
             style={[
               {
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.grayF9,
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 fontFamily: "light",
               },
diff --git a/src/screens/Faq/index.js b/src/screens/Faq/index.js
index c2d14ee..b97510b 100644
--- a/src/screens/Faq/index.js
+++ b/src/screens/Faq/index.js
@@ -39,7 +39,6 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq, theme }
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
       }}
     >
       <Navbar
@@ -71,7 +70,7 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq, theme }
         searchResult?.length ? (
           <FlatList
             contentContainerStyle={{ paddingBottom: height / 2 }}
-            style={[tw("bg-white flex px-4 mb-4")]}
+            style={[tw("flex px-4 mb-4")]}
             data={searchResult}
             keyExtractor={(item, index) => {
               return index;
@@ -94,7 +93,7 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq, theme }
       ) : (
         <FlatList
           contentContainerStyle={{ paddingBottom: height / 2 }}
-          style={[tw("bg-white flex px-4 mb-4")]}
+          style={[tw("flex px-4 mb-4")]}
           data={list}
           keyExtractor={(item, index) => {
             return index;
diff --git a/src/screens/Home/components/Blogs.js b/src/screens/Home/components/Blogs.js
index eec352c..9a7de8f 100644
--- a/src/screens/Home/components/Blogs.js
+++ b/src/screens/Home/components/Blogs.js
@@ -72,7 +72,7 @@ const Blog = ({ blog, mobile, theme }) => {
       <View
         style={[
           { transform: [{ translateY: -40 }], marginHorizontal: 10 },
-          tw("flex  justify-between bg-white rounded-md p-2"),
+          tw("flex justify-between bg-white rounded-md p-2"),
           {
             shadowColor: "#00000055",
             shadowOffset: { width: 0, height: 1 },
@@ -80,6 +80,7 @@ const Blog = ({ blog, mobile, theme }) => {
             shadowRadius: 2,
             elevation: 5,
             height: 85,
+            backgroundColor : theme === 'light' ? Colors.theme1.white : Colors.theme1.green79
           },
         ]}
       >
@@ -87,7 +88,7 @@ const Blog = ({ blog, mobile, theme }) => {
           style={[
             tw("mb-1"),
             {
-              color: Colors.theme1.gray20,
+              color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
               fontFamily: "regular",
               fontSize: mobile ? fontSize.sm : fontSize.lg,
               textAlign: ios ? "right" : "auto",
@@ -108,7 +109,7 @@ const Blog = ({ blog, mobile, theme }) => {
             <Text
               style={[
                 {
-                  color: Colors.theme1.gray20,
+                  color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },
@@ -122,7 +123,7 @@ const Blog = ({ blog, mobile, theme }) => {
               style={[
                 tw("ml-1"),
                 {
-                  color: Colors.theme1.gray20,
+                  color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },
diff --git a/src/screens/Home/components/Header.js b/src/screens/Home/components/Header.js
index 706867f..9ba8176 100644
--- a/src/screens/Home/components/Header.js
+++ b/src/screens/Home/components/Header.js
@@ -21,7 +21,7 @@ const Header = ({ title, route, mobile, theme, state = null }) => {
       <Text
         style={[
           {
-            color: Colors.theme1.green79,
+            color: theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
             fontFamily: "demi",
             fontSize: mobile ? fontSize.lg : fontSize.xl2,
           },
@@ -37,7 +37,7 @@ const Header = ({ title, route, mobile, theme, state = null }) => {
           <Entypo
             name="chevron-small-left"
             size={fontSize.xl6}
-            color={Colors.theme1.green79}
+            color={theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white}
           />
         </Pressable>
       ) : null}
diff --git a/src/screens/Home/components/MyBooks.js b/src/screens/Home/components/MyBooks.js
index 5302529..173eb20 100644
--- a/src/screens/Home/components/MyBooks.js
+++ b/src/screens/Home/components/MyBooks.js
@@ -18,8 +18,8 @@ function MyBooks({ books, grades, theme }) {
         style={[
           tw(`w-full flex  rounded-md pt-3 overflow-hidden`),
           {
-            backgroundColor: Colors.theme1.greenCF + "0F",
-            borderColor: Colors.theme1.greenD9 + "",
+            backgroundColor: theme === 'light' ? Colors.theme1.greenCF + "0F" : Colors.theme1.greenCF + '11',
+            borderColor:  Colors.theme1.greenD9 + (theme === 'light' ? "" : "77"),
             borderWidth: 1,
           },
         ]}
@@ -28,7 +28,8 @@ function MyBooks({ books, grades, theme }) {
           style={[
             tw(`pr-4 ${ios ? "text-right" : ""} w-full`),
             {
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               fontFamily: "demi",
               fontSize: fontSize.lg,
             },
@@ -77,7 +78,8 @@ const Book = ({ book, grades, theme }) => {
         style={[
           tw("mt-2 pr-1"),
           {
-            color: Colors.theme1.gray20,
+            color:
+              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "bold",
             fontSize: fontSize.sm,
           },
@@ -89,7 +91,8 @@ const Book = ({ book, grades, theme }) => {
         style={[
           tw("pr-1"),
           {
-            color: Colors.theme1.gray20,
+            color:
+              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "light",
             fontSize: fontSize.sm,
           },
diff --git a/src/screens/Home/components/Videos.js b/src/screens/Home/components/Videos.js
index 9668d1f..89725f1 100644
--- a/src/screens/Home/components/Videos.js
+++ b/src/screens/Home/components/Videos.js
@@ -60,7 +60,7 @@ const Video = ({ video, mobile, grades, theme }) => {
         style={[
           tw("mt-2 px-1"),
           {
-            color: Colors.theme1.gray20,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "bold",
             fontSize: mobile ? fontSize.sm : fontSize.xl,
             textAlign: ios ? "right" : "auto",
@@ -73,7 +73,7 @@ const Video = ({ video, mobile, grades, theme }) => {
         style={[
           tw("mt-1 pr-1"),
           {
-            color: Colors.theme1.gray20,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "regular",
             fontSize: mobile ? fontSize.xs : fontSize.base,
             textAlign: ios ? "right" : "auto",
diff --git a/src/screens/Login/index.js b/src/screens/Login/index.js
index adf1ef5..dc4bf3b 100644
--- a/src/screens/Login/index.js
+++ b/src/screens/Login/index.js
@@ -59,7 +59,7 @@ function Login(props) {
     <ScrollView style={[tw("flex-1")]}>
       <KeyboardAvoidingView
         style={[
-          tw(`flex justify-center items-center bg-white px-4 relative`),
+          tw(`flex justify-center items-center px-4 relative`),
           { minHeight: height },
         ]}
         behavior={ios ? "padding" : "padding"}
@@ -98,7 +98,10 @@ function Login(props) {
             {
               fontSize: fontSize.xl2,
               fontFamily: "bold",
-              color: Colors.theme1.black,
+              color:
+                props.theme === "light"
+                  ? Colors.theme1.black
+                  : Colors.theme1.white,
             },
           ]}
         >
@@ -114,7 +117,10 @@ function Login(props) {
             {
               fontSize: fontSize.xl2,
               fontFamily: "bold",
-              color: Colors.theme1.black,
+              color:
+                props.theme === "light"
+                  ? Colors.theme1.black
+                  : Colors.theme1.white,
             },
           ]}
         >
@@ -175,8 +181,15 @@ function Login(props) {
         </TouchableHighlight>
         <Text
           style={[
-            tw("flex absolute bottom-6 text-center w-7/12"),
-            { fontFamily: "regular", fontSize: fontSize.sm },
+            tw("flex absolute bottom-8 text-center w-7/12"),
+            {
+              fontFamily: "regular",
+              fontSize: fontSize.sm,
+              color:
+                props.theme === "light"
+                  ? Colors.theme1.black
+                  : Colors.theme1.white,
+            },
           ]}
         >
           ورود شما در سامانه به منزله قبول و{" "}
diff --git a/src/screens/OrderDetails/components/Book.js b/src/screens/OrderDetails/components/Book.js
index 66e9465..05b77e9 100644
--- a/src/screens/OrderDetails/components/Book.js
+++ b/src/screens/OrderDetails/components/Book.js
@@ -15,13 +15,13 @@ function Book({ book, mobile, grades, theme }) {
         tw("w-full flex flex-row-reverse justify-between py-3"),
         {
           borderBottomWidth: 1,
-          borderColor: Colors.theme1.grayE3,
+          borderColor:  Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
         },
       ]}
     >
       <View style={tw("flex flex-row-reverse items-center flex-1")}>
         <Image
-        resizeMode="contain"
+          resizeMode="contain"
           source={{
             uri: `https://dnvn.ir/api/v1/file/${book.product.book.fileIds}`,
           }}
@@ -38,7 +38,10 @@ function Book({ book, mobile, grades, theme }) {
             style={[
               {
                 fontSize: mobile ? fontSize.base : fontSize.xl2,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
                 fontFamily: "bold",
               },
             ]}
@@ -50,7 +53,10 @@ function Book({ book, mobile, grades, theme }) {
               tw(" mt-2"),
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1.gray20 + "aa",
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79 + "aa"
+                    : Colors.theme1.white,
                 fontFamily: "regular",
               },
             ]}
@@ -76,9 +82,11 @@ function Book({ book, mobile, grades, theme }) {
           style={[
             tw(" py-1 px-3 rounded-sm"),
             {
-              color: "#132F52",
+              color: theme === "light" ? "#132F52" : Colors.theme1.white,
               fontSize: mobile ? fontSize.xl : fontSize.xl4,
-              backgroundColor: "#F1F1F1",
+              backgroundColor: theme === "light" ? "#F1F1F1" : null,
+              borderWidth: theme === "light" ? 0 : 1,
+              borderColor: "#f1f1f1",
               fontFamily: "bold",
             },
           ]}
@@ -90,7 +98,8 @@ function Book({ book, mobile, grades, theme }) {
             style={{
               fontFamily: "bold",
               fontSize: mobile ? fontSize.sm : fontSize.xl2,
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
             }}
           >
             تومان
@@ -99,7 +108,10 @@ function Book({ book, mobile, grades, theme }) {
             style={[
               tw(" mr-3"),
               {
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
                 fontSize: fontSize.xl,
                 fontFamily: "bold",
               },
@@ -116,7 +128,7 @@ function Book({ book, mobile, grades, theme }) {
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
   grades: state.publicApi.grades,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 export default connect(mapStateToProps)(Book);
diff --git a/src/screens/OrderDetails/index.js b/src/screens/OrderDetails/index.js
index 7e75925..1927df5 100644
--- a/src/screens/OrderDetails/index.js
+++ b/src/screens/OrderDetails/index.js
@@ -43,7 +43,6 @@ const status = {
 };
 
 function OrderDetails({ mobile, route, theme }) {
-
   const { order } = route.params;
   const [position, setPosition] = useState("100%");
 
@@ -85,11 +84,18 @@ function OrderDetails({ mobile, route, theme }) {
             { backgroundColor: Colors.theme1.greenCF + "1a" },
           ]}
         >
-          <View style={tw("flex flex-row-reverse items-center")}>
+          <View
+            style={tw(
+              "w-full flex flex-row-reverse justify-between items-center"
+            )}
+          >
             <Text
               style={[
                 {
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
                   fontSize: mobile
                     ? mobile
                       ? fontSize.sm
@@ -114,7 +120,8 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse items-center py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1.grayE3,
+              borderColor:
+                Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
             },
           ]}
         >
@@ -122,7 +129,11 @@ function OrderDetails({ mobile, route, theme }) {
             style={[
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
+
                 fontFamily: "bold",
               },
             ]}
@@ -135,7 +146,11 @@ function OrderDetails({ mobile, route, theme }) {
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
                 lineHeight: mobile ? 17 : "auto",
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
+
                 fontFamily: "regular",
               },
             ]}
@@ -148,7 +163,8 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1.grayE3,
+              borderColor:
+                Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
             },
           ]}
         >
@@ -157,7 +173,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -170,7 +190,11 @@ function OrderDetails({ mobile, route, theme }) {
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   lineHeight: mobile ? 17 : "auto",
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -183,7 +207,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -196,7 +224,11 @@ function OrderDetails({ mobile, route, theme }) {
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   lineHeight: mobile ? 17 : "auto",
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -207,8 +239,13 @@ function OrderDetails({ mobile, route, theme }) {
         </View>
         <View
           style={[
-            tw("w-full rounded-md flex  p-4 items-end mt-2"),
-            { backgroundColor: Colors.theme1.greenFF1 + "aa" },
+            tw("w-full rounded-md flex p-4 items-end mt-7 mb-4"),
+            {
+              backgroundColor:
+                theme === "light" ? Colors.theme1.greenFF1 + "aa" : null,
+              borderWidth: theme === "light" ? 0 : 1,
+              borderColor : Colors.theme1.greenFF1
+            },
           ]}
         >
           <Text
@@ -219,7 +256,11 @@ function OrderDetails({ mobile, route, theme }) {
                     ? fontSize.sm
                     : fontSize.lg
                   : fontSize.lg,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
+
                 fontFamily: "bold",
               },
             ]}
@@ -235,7 +276,11 @@ function OrderDetails({ mobile, route, theme }) {
                     ? fontSize.sm
                     : fontSize.lg
                   : fontSize.lg,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
+
                 fontFamily: "regular",
               },
             ]}
@@ -254,7 +299,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -266,7 +315,11 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -280,7 +333,8 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1.grayE3,
+              borderColor:
+                Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
             },
           ]}
         >
@@ -289,7 +343,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -301,7 +359,11 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -314,7 +376,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -326,7 +392,11 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -340,17 +410,21 @@ function OrderDetails({ mobile, route, theme }) {
             tw("w-full flex flex-row-reverse justify-between py-4"),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1.grayE3,
+              borderColor:
+                Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
             },
           ]}
         >
-          
           <View style={tw("flex flex-row-reverse items-center")}>
             <Text
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -362,7 +436,11 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -377,7 +455,11 @@ function OrderDetails({ mobile, route, theme }) {
               style={[
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "bold",
                 },
               ]}
@@ -389,7 +471,11 @@ function OrderDetails({ mobile, route, theme }) {
                 tw("font-light text-right mr-1"),
                 {
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
+
                   fontFamily: "regular",
                 },
               ]}
@@ -409,7 +495,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 16,
@@ -418,7 +503,7 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 export default connect(mapStateToProps)(OrderDetails);
diff --git a/src/screens/OrdersFollowUp/components/Order.js b/src/screens/OrdersFollowUp/components/Order.js
index dbcab7e..2c30ca0 100644
--- a/src/screens/OrdersFollowUp/components/Order.js
+++ b/src/screens/OrdersFollowUp/components/Order.js
@@ -61,7 +61,8 @@ function Order({ order, mobile, theme }) {
             tw("font-medium"),
             {
               fontSize: mobile ? fontSize.base : fontSize.xl,
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               fontFamily: mobile ? "regular" : "demi",
             },
           ]}
@@ -73,7 +74,10 @@ function Order({ order, mobile, theme }) {
             style={[
               tw("font-light"),
               {
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
                 fontFamily: mobile ? "bold" : "demi",
               },
@@ -111,12 +115,14 @@ function Order({ order, mobile, theme }) {
           <View style={[tw("")]}>
             <Text
               style={[
-                tw("p-2 rounded-md text-center"),
+                tw("py-2 rounded-md"),
                 {
+                  textAlign: theme === "light" ? "center" : "right",
                   fontSize: mobile ? fontSize.sm : fontSize.lg,
                   fontFamily: "bold",
-                  backgroundColor: "#F0FFF1",
-                  color: Colors.theme1.green79,
+                  backgroundColor: theme === "light" ? "#F0FFF1" : null,
+                  color: theme === "light" ? Colors.theme1.green79 : "#F0FFF1",
+                  paddingHorizontal: theme === "light" ? 8 : 0,
                 },
               ]}
             >
@@ -130,7 +136,10 @@ function Order({ order, mobile, theme }) {
               tw("my-3"),
               {
                 fontSize: mobile ? fontSize.tiny : fontSize.xl,
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
                 fontFamily: "bold",
               },
             ]}
@@ -180,7 +189,10 @@ function Order({ order, mobile, theme }) {
               tw("my-5"),
               {
                 fontSize: mobile ? fontSize.sm : fontSize.lg,
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
                 fontFamily: "light",
               },
             ]}
@@ -197,7 +209,7 @@ function Order({ order, mobile, theme }) {
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 export default connect(mapStateToProps)(Order);
diff --git a/src/screens/OrdersFollowUp/index.js b/src/screens/OrdersFollowUp/index.js
index 99a58fc..fcb6a44 100644
--- a/src/screens/OrdersFollowUp/index.js
+++ b/src/screens/OrdersFollowUp/index.js
@@ -72,7 +72,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 16,
diff --git a/src/screens/Otp/index.js b/src/screens/Otp/index.js
index e9345ae..16afe8a 100644
--- a/src/screens/Otp/index.js
+++ b/src/screens/Otp/index.js
@@ -139,7 +139,11 @@ function Otp(props) {
         " " +
         ":" +
         " " +
-        (hour > 0 ? hour.toString().length === 1 ? "0" + hour.toString() : hour : "00")
+        (hour > 0
+          ? hour.toString().length === 1
+            ? "0" + hour.toString()
+            : hour
+          : "00")
       );
     },
     [props.route]
@@ -171,7 +175,7 @@ function Otp(props) {
     <ScrollView style={tw("flex-1")}>
       <KeyboardAvoidingView
         style={[
-          tw("px-4 flex-1 justify-center items-center bg-white"),
+          tw("px-4 flex-1 justify-center items-center"),
           { minHeight: height },
         ]}
         behavior={"padding"}
@@ -210,7 +214,10 @@ function Otp(props) {
             {
               fontSize: props.mobile ? fontSize.tiny : fontSize.base,
               fontFamily: "light",
-              color: Colors.theme1.gray20,
+              color:
+                props.theme === "light"
+                  ? Colors.theme1.gray20
+                  : Colors.theme1.white,
             },
           ]}
         >
@@ -234,12 +241,16 @@ function Otp(props) {
         >
           <TextInput
             style={[
-              tw("bg-gray-100 py-3 px-5 text-center rounded-md mx-1.5"),
+              tw("py-3 px-5 text-center rounded-md mx-1.5"),
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1.green79,
+                color: props.theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
                 width: fontSize.xl5 + 40,
+                backgroundColor:
+                  props.theme === "light" ? Colors.theme1.grayE3 : null,
+                borderWidth : props.theme === "light" ? 0 : 1,
+                borderColor : Colors.theme1.grayE3 + 'aa'
               },
             ]}
             underlineColorAndroid={"transparent"}
@@ -253,12 +264,16 @@ function Otp(props) {
           />
           <TextInput
             style={[
-              tw("bg-gray-100 py-3 px-5 text-center rounded-md mx-1.5"),
+              tw("py-3 px-5 text-center rounded-md mx-1.5"),
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1.green79,
+                color: props.theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
                 width: fontSize.xl5 + 40,
+                backgroundColor:
+                  props.theme === "light" ? Colors.theme1.grayE3 : null,
+                borderWidth : props.theme === "light" ? 0 : 1,
+                borderColor : Colors.theme1.grayE3 + 'aa'
               },
             ]}
             underlineColorAndroid={"transparent"}
@@ -272,12 +287,16 @@ function Otp(props) {
           />
           <TextInput
             style={[
-              tw("bg-gray-100 py-3 px-5 text-center rounded-md mx-1.5"),
+              tw("py-3 px-5 text-center rounded-md mx-1.5"),
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1.green79,
+                color: props.theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
                 width: fontSize.xl5 + 40,
+                backgroundColor:
+                  props.theme === "light" ? Colors.theme1.grayE3 : null,
+                borderWidth : props.theme === "light" ? 0 : 1,
+                borderColor : Colors.theme1.grayE3 + 'aa'
               },
             ]}
             underlineColorAndroid={"transparent"}
@@ -291,12 +310,16 @@ function Otp(props) {
           />
           <TextInput
             style={[
-              tw("bg-gray-100 py-3 px-5 text-center rounded-md mx-1.5"),
+              tw("py-3 px-5 text-center rounded-md mx-1.5"),
               {
                 fontSize: fontSize.xl5,
                 fontFamily: "bold",
-                color: Colors.theme1.green79,
+                color: props.theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
                 width: fontSize.xl5 + 40,
+                backgroundColor:
+                  props.theme === "light" ? Colors.theme1.grayE3 : null,
+                borderWidth : props.theme === "light" ? 0 : 1,
+                borderColor : Colors.theme1.grayE3 + 'aa'
               },
             ]}
             underlineColorAndroid={"transparent"}
@@ -345,7 +368,10 @@ function Otp(props) {
                 {
                   fontFamily: "light",
                   fontSize: fontSize.base,
-                  color: Colors.theme1.gray20,
+                  color:
+                    props.theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 },
               ]}
             >
diff --git a/src/screens/Product/components/Book.js b/src/screens/Product/components/Book.js
index 40696d1..438aa61 100644
--- a/src/screens/Product/components/Book.js
+++ b/src/screens/Product/components/Book.js
@@ -151,7 +151,10 @@ function Book({
           <View style={tw("flex  items-end")}>
             <Text
               style={{
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
                 fontSize: mobile ? fontSize.base : fontSize.xl3,
                 marginBottom: 5,
                 fontFamily: "bold",
@@ -162,7 +165,10 @@ function Book({
             </Text>
             <Text
               style={{
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
                 fontSize: mobile ? fontSize.tiny : fontSize.xl,
                 fontFamily: "regular",
               }}
@@ -186,7 +192,8 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -206,7 +213,8 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -226,7 +234,8 @@ function Book({
         <View>
           <Text
             style={{
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               textAlign: "center",
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
@@ -242,7 +251,9 @@ function Book({
           style={[
             tw("w-full text-right"),
             {
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
+
               fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "demi",
             },
@@ -260,7 +271,7 @@ function Book({
             {
               borderWidth: 1,
               borderColor: Colors.theme1.greenCF,
-              backgroundColor: Colors.theme1.greenFF + "0a",
+              backgroundColor: theme === 'light' ? Colors.theme1.greenFF + "0a" : null,
             },
           ]}
           onPress={() =>
@@ -290,7 +301,11 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.greenCF,
+
                 paddingVertical: 4,
               }}
             >
@@ -304,7 +319,11 @@ function Book({
                     tw("py-1 pr-2"),
                     {
                       fontFamily: "bold",
-                      color: Colors.theme1.green79,
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.green79
+                          : Colors.theme1.greenCF,
+
                       fontSize: fontSize.sm,
                     },
                   ]}
@@ -321,8 +340,8 @@ function Book({
             tw("flex flex-row-reverse justify-between px-2 py-3 mb-4"),
             {
               borderWidth: 1,
-              borderColor: Colors.theme1.greenCF,
-              backgroundColor: Colors.theme1.greenFF + "0a",
+              borderColor:  Colors.theme1.greenCF,
+              backgroundColor: theme === 'light' ? Colors.theme1.greenFF + "0a" : null,
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -353,7 +372,11 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.greenCF,
+
                 paddingVertical: 4,
               }}
             >
@@ -367,7 +390,11 @@ function Book({
                     borderRightWidth: 1,
                     borderColor: Colors.theme1.greenCF,
                     fontFamily: "bold",
-                    color: Colors.theme1.green79,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.greenCF,
+
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -384,7 +411,7 @@ function Book({
             {
               borderWidth: 1,
               borderColor: Colors.theme1.greenCF,
-              backgroundColor: Colors.theme1.greenFF + "0a",
+              backgroundColor: theme === 'light' ? Colors.theme1.greenFF + "0a" : null,
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -394,7 +421,9 @@ function Book({
             style={{
               fontFamily: "bold",
               fontSize: fontSize.xs,
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
+
               paddingVertical: 4,
             }}
           >
@@ -408,7 +437,7 @@ function Book({
             {
               borderWidth: 1,
               borderColor: Colors.theme1.greenCF,
-              backgroundColor: Colors.theme1.greenFF + "0a",
+              backgroundColor: theme === 'light' ? Colors.theme1.greenFF + "0a" : null,
               width: width - 32 - 8 - (fontSize.sm * 6 + 18),
             },
           ]}
@@ -439,7 +468,11 @@ function Book({
               style={{
                 fontFamily: "bold",
                 fontSize: fontSize.sm,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.greenCF,
+
                 paddingVertical: 4,
               }}
             >
@@ -452,7 +485,11 @@ function Book({
                   tw("py-1 pr-2"),
                   {
                     fontFamily: "bold",
-                    color: Colors.theme1.green79,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.greenCF,
+
                     fontSize: fontSize.sm,
                   },
                 ]}
@@ -469,7 +506,7 @@ function Book({
             {
               borderWidth: 1,
               borderColor: Colors.theme1.greenCF,
-              backgroundColor: Colors.theme1.greenFF + "0a",
+              backgroundColor: theme === 'light' ? Colors.theme1.greenFF + "0a" : null,
               width: fontSize.sm * 6 + 18,
             },
           ]}
@@ -479,7 +516,9 @@ function Book({
             style={{
               fontFamily: "bold",
               fontSize: fontSize.xs,
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
+
               paddingVertical: 4,
             }}
           >
@@ -528,7 +567,7 @@ function Book({
               style={[
                 {
                   fontSize: fontSize.tiny,
-                  color: "#275077",
+                  color: theme === 'light' ? "#275077" : Colors.theme1.white,
                   fontFamily: "regular",
                 },
                 tw(""),
diff --git a/src/screens/Product/components/Comments.js b/src/screens/Product/components/Comments.js
index 5bb1bfd..94039d3 100644
--- a/src/screens/Product/components/Comments.js
+++ b/src/screens/Product/components/Comments.js
@@ -31,6 +31,7 @@ function Commnets({
   productId,
   getFullList,
   orderFullList,
+  theme
 }) {
   React.useEffect(() => {
     if (!orderFullList.length) {
@@ -46,18 +47,19 @@ function Commnets({
         inverted={true}
         style={{ marginTop: 20, paddingBottom: 10 }}
         data={comments}
-        renderItem={({ item }) => <Comment comment={item} />}
+        renderItem={({ item }) => <Comment comment={item} theme={theme} />}
         keyExtractor={(item) => item.id}
       />
       <AddComment
         addComment={addComment}
         productId={productId}
+        theme={theme}
       />
     </View>
   );
 }
 
-const Comment = ({ comment }) => {
+const Comment = ({ comment, theme }) => {
   return (
     <View
       style={[
@@ -126,7 +128,7 @@ const Comment = ({ comment }) => {
   );
 };
 
-const AddComment = ({ addComment, productId, ...props }) => {
+const AddComment = ({ addComment, productId, theme, ...props }) => {
   const [commentForm, setCommentForm] = React.useState({
     title: "",
     text: "",
@@ -148,32 +150,32 @@ const AddComment = ({ addComment, productId, ...props }) => {
         style={[
           tw("w-full mt-4 px-2 rounded-md"),
           {
-            backgroundColor: Colors.theme1.grayF9,
-            color: Colors.theme1.gray20,
+            backgroundColor: theme === 'light' ? Colors.theme1.grayF9 : null,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontSize: fontSize.base,
             textAlign: "right",
             fontFamily: "light",
             borderWidth: 1,
-            borderColor: Colors.theme1.grayE3,
+            borderColor: theme === 'light' ? Colors.theme1.grayE3 : Colors.theme1.white + '55',
             height : fontSize.base + 30
           },
         ]}
-        
         value={comment.title}
         placeholder="عنوان نظر ..."
         onChangeText={(text) => setCommentForm({...commentForm, title : text})}
+        placeholderTextColor={theme === 'light' ? "auto" : Colors.theme1.white + 'aa'}
       />
       <TextInput
         style={[
           tw("w-full mt-4 py-4 px-2 rounded-md h-40"),
           {
-            backgroundColor: Colors.theme1.grayF9,
-            color: Colors.theme1.gray20,
+            backgroundColor: theme === 'light' ? Colors.theme1.grayF9 : null,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontSize: fontSize.tiny,
             textAlign: "right",
             fontFamily: "light",
             borderWidth: 1,
-            borderColor: Colors.theme1.grayE3,
+            borderColor: theme === 'light' ? Colors.theme1.grayE3 : Colors.theme1.white + '55',
             
           },
         ]}
@@ -182,6 +184,7 @@ const AddComment = ({ addComment, productId, ...props }) => {
         textAlignVertical="top"
         placeholder="متن نظر ..."
         onChangeText={(text) => setCommentForm({...commentForm, text})}
+        placeholderTextColor={theme === 'light' ? "auto" : Colors.theme1.white + 'aa'}
       />
       <View style={tw("w-full mt-4")}>
         <Pressable
@@ -199,6 +202,7 @@ const AddComment = ({ addComment, productId, ...props }) => {
 
 const mapStateToProps = (state) => ({
   orderFullList: state.userFactor.fullList,
+  theme1: state.publicApi.theme1,
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Product/components/Info.js b/src/screens/Product/components/Info.js
index fa4d143..c6035a8 100644
--- a/src/screens/Product/components/Info.js
+++ b/src/screens/Product/components/Info.js
@@ -84,7 +84,6 @@ const Info = ({
         paddingBottom: 100,
       },
       container: {
-        backgroundColor: "white",
         flexDirection: "column",
         paddingVertical: 5,
         paddingHorizontal: 16,
diff --git a/src/screens/Product/components/LinkBox.js b/src/screens/Product/components/LinkBox.js
index 02e605e..1673b5c 100644
--- a/src/screens/Product/components/LinkBox.js
+++ b/src/screens/Product/components/LinkBox.js
@@ -20,7 +20,10 @@ function Description({ title, onPress, mobile, theme }) {
           }`
         ),
         {
-          backgroundColor: Colors.theme1.greenCF + "15",
+          backgroundColor:
+            theme === "light"
+              ? Colors.theme1.greenCF + "15"
+              : Colors.theme1.blue90 + "33",
           // borderWidth : 1,
         },
       ]}
@@ -29,7 +32,8 @@ function Description({ title, onPress, mobile, theme }) {
         style={[
           {
             fontSize: mobile ? fontSize.sm : fontSize.lg,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
             fontFamily: "demi",
           },
           tw(""),
@@ -40,7 +44,7 @@ function Description({ title, onPress, mobile, theme }) {
       <Entypo
         name="chevron-small-left"
         size={20}
-        color={Colors.theme1.green79}
+        color={theme === "light" ? Colors.theme1.green79 : Colors.theme1.white}
       />
     </TouchableOpacity>
   );
diff --git a/src/screens/Product/components/Rates.js b/src/screens/Product/components/Rates.js
index fd5c031..ca1b37e 100644
--- a/src/screens/Product/components/Rates.js
+++ b/src/screens/Product/components/Rates.js
@@ -13,11 +13,10 @@ import Colors from "../../../constants/Colors";
 const width = Dimensions.get("window").width;
 
 function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
-
   return (
     <View style={tw("flex flex-row-reverse")}>
       <Pressable
-        style={[tw("flex  items-center justify-center"), { width: "25%" }]}
+        style={[tw("flex items-center justify-center"), { width: "25%" }]}
         onPress={() =>
           !isBuyed
             ? asyncAwesomeAlert("خطا", "شما این محصول رو خریداری نکرده اید.", {
@@ -28,7 +27,11 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
       >
         <Text
           style={[
-            { fontSize: fontSize.xl6, color: "#05335F", fontFamily: "bold" },
+            {
+              fontSize: fontSize.xl6,
+              color: theme === "light" ? "#05335F" : Colors.theme1.white,
+              fontFamily: "bold",
+            },
           ]}
         >
           {rate}
@@ -44,7 +47,7 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
         <Text
           style={{
             fontSize: fontSize.sm,
-            color: "#707070",
+            color: theme === "light" ? "#707070" : Colors.theme1.white,
             fontFamily: "light",
             marginTop: 5,
           }}
@@ -67,14 +70,13 @@ function Rates({ rate, productId, addVote, isBuyed = null, theme }) {
   );
 }
 
-const Progress = ({ data,theme, ...props }) => {
-
+const Progress = ({ data, theme, ...props }) => {
   return (
     <View style={[tw("flex flex-1 flex-row items-center py-1.5")]}>
       <Text
         style={{
           fontSize: fontSize.sm,
-          color: "#05335F",
+          color: theme === "light" ? "#05335F" : Colors.theme1.white,
           fontFamily: "regular",
         }}
       >
@@ -102,7 +104,7 @@ const Progress = ({ data,theme, ...props }) => {
           fontFamily: "light",
           width: width / 7.5,
           textAlign: "center",
-          color: "#05335F",
+          color: theme === "light" ? "#05335F" : Colors.theme1.white,
         }}
       >
         {data.value + "%"}
@@ -112,7 +114,7 @@ const Progress = ({ data,theme, ...props }) => {
 };
 
 const mapStateToProps = (state) => ({
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Product/index.js b/src/screens/Product/index.js
index 8978ca5..134d1f9 100644
--- a/src/screens/Product/index.js
+++ b/src/screens/Product/index.js
@@ -52,7 +52,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,
diff --git a/src/screens/Products/components/Header.js b/src/screens/Products/components/Header.js
index 77df7b7..aa8682c 100644
--- a/src/screens/Products/components/Header.js
+++ b/src/screens/Products/components/Header.js
@@ -12,7 +12,7 @@ import Select from "../../../components/Select";
 
 const Header = ({ setFilterOptions, filterOptions, levels, productTypes }) => {
   return (
-    <View style={tw("flex  px-4 h-32 bg-white")}>
+    <View style={tw("flex  px-4 h-32")}>
       <Search
         onChange={(val) => setFilterOptions({ ...filterOptions, search: val })}
         placeholder={"نام کتاب یا دوره را جستجو کنید"}
diff --git a/src/screens/Products/components/Main.js b/src/screens/Products/components/Main.js
index 0b0fec8..e7938df 100644
--- a/src/screens/Products/components/Main.js
+++ b/src/screens/Products/components/Main.js
@@ -75,7 +75,8 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
               {
                 width: mobile ? "auto" : width / 2.2,
                 borderWidth: 1,
-                borderColor: Colors.theme1.grayE3,
+                borderColor:
+                  Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
               },
               tw(`flex  mb-5 p-2 rounded-md ${mobile ? "w-full" : ""}`),
             ]}
@@ -100,7 +101,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                 {
                   fontFamily: "bold",
                   fontSize: fontSize.lg,
-                  color: Colors.theme1.gray20,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                   textAlign: ios ? "right" : "auto",
                 },
               ]}
@@ -123,7 +127,14 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
             <Text
               style={[
                 tw("w-full flex flex-row text-left"),
-                { fontSize: fontSize.xl, fontFamily: "bold" },
+                {
+                  fontSize: fontSize.xl,
+                  fontFamily: "bold",
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
+                },
               ]}
             >
               {separate(product?.product[2]?.price)}{" "}
@@ -145,7 +156,8 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
-                    borderColor: Colors.theme1.grayE3,
+                    borderColor:
+                      Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
                   },
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
@@ -176,10 +188,13 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={{
                       fontSize: fontSize.base,
                       marginTop: 5,
-                      color: "#05335F",
                       fontFamily: "bold",
                       width: "100%",
                       textAlign: ios ? "right" : "auto",
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.gray20
+                          : Colors.theme1.white,
                     }}
                   >
                     {"کتاب دیجیتال" + " " + product?.name}
@@ -206,7 +221,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={[
                       tw("text-center ml-1"),
                       {
-                        color: Colors.theme1.gray20,
+                        color:
+                          theme === "light"
+                            ? Colors.theme1.gray20
+                            : Colors.theme1.white,
                         fontFamily: "bold",
                         fontSize: fontSize.xl2,
                       },
@@ -217,7 +235,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1.gray2077,
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.gray20
+                          : Colors.theme1.white,
                       fontFamily: "regular",
                     }}
                   >
@@ -238,7 +259,8 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
-                    borderColor: Colors.theme1.grayE3,
+                    borderColor:
+                      Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
                   },
                   tw("flex justify-between px-2 pt-2 rounded-md"),
                 ]}
@@ -269,7 +291,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={{
                       fontSize: fontSize.base,
                       marginTop: 5,
-                      color: "#05335F",
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.gray20
+                          : Colors.theme1.white,
                       fontFamily: "bold",
                       width: "100%",
                       textAlign: ios ? "right" : "auto",
@@ -299,7 +324,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                     style={[
                       tw("text-center ml-1"),
                       {
-                        color: Colors.theme1.gray20,
+                        color:
+                          theme === "light"
+                            ? Colors.theme1.gray20
+                            : Colors.theme1.white,
                         fontFamily: "bold",
                         fontSize: fontSize.xl2,
                       },
@@ -310,7 +338,10 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
                   <Text
                     style={{
                       fontSize: fontSize.sm,
-                      color: Colors.theme1.gray2077,
+                      color:
+                        theme === "light"
+                          ? Colors.theme1.gray20
+                          : Colors.theme1.white,
                       fontFamily: "regular",
                     }}
                   >
@@ -328,7 +359,7 @@ const Main = ({ books, filterOptions, grades, mobile, theme }) => {
       onLayout={() => setWidth(Dimensions.get("window").width)}
       style={[
         tw(
-          `flex w-full px-4 flex-wrap  justify-between bg-white pb-20 ${
+          `flex w-full px-4 flex-wrap  justify-between ${
             ios ? "flex-row-reverse" : "flex-row"
           }`
         ),
diff --git a/src/screens/Products/index.js b/src/screens/Products/index.js
index aacefd2..3b34385 100644
--- a/src/screens/Products/index.js
+++ b/src/screens/Products/index.js
@@ -5,6 +5,7 @@ import {
   ScrollView,
   SafeAreaView,
   StatusBar,
+  Dimensions,
   LayoutAnimation,
 } from "react-native";
 import { connect } from "react-redux";
@@ -17,6 +18,9 @@ import Main from "./components/Main";
 
 //style
 
+//variables
+const {height} = Dimensions.get("window");
+
 function Products({
   books,
   getBooks,
@@ -51,7 +55,7 @@ function Products({
     >
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <Header />
-      <ScrollView contentContainerStyle={{ paddingBottom: 100 }}>
+      <ScrollView contentContainerStyle={{ paddingBottom: height / 2.5 }}>
         <Main books={books} grades={grades} />
       </ScrollView>
     </SafeAreaView>
diff --git a/src/screens/Profile/components/List.js b/src/screens/Profile/components/List.js
index 78e8124..53c9ec9 100644
--- a/src/screens/Profile/components/List.js
+++ b/src/screens/Profile/components/List.js
@@ -29,7 +29,7 @@ const List = ({ mobile, theme }) => {
           <Path
             d="M17 7a5 5 0 1 1-5-5 5 5 0 0 1 5 5Z"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -38,7 +38,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M20.59 22c0-3.87-3.85-7-8.59-7s-8.59 3.13-8.59 7"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -54,7 +54,7 @@ const List = ({ mobile, theme }) => {
           <Path
             d="M7.5 7.67V6.7a4.773 4.773 0 0 1 4.06-4.67 4.5 4.5 0 0 1 4.94 4.478v1.38"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -63,7 +63,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M9 22h6c4.02 0 4.74-1.61 4.95-3.57l.75-6C20.97 9.99 20.27 8 16 8H8c-4.27 0-4.97 1.99-4.7 4.43l.75 6C4.26 20.39 4.98 22 9 22Z"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -72,7 +72,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M15.496 12h.005M8.495 12H8.5"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={2}
@@ -88,7 +88,7 @@ const List = ({ mobile, theme }) => {
           <Path
             d="M22 16.548V4.642a1.959 1.959 0 0 0-2.17-1.963h-.06a19.029 19.029 0 0 0-7.07 2.338l-.17.109a1.121 1.121 0 0 1-1.06 0l-.25-.148a18.935 18.935 0 0 0-7.06-2.309A1.957 1.957 0 0 0 2 4.632v11.916a2.036 2.036 0 0 0 1.74 1.953l.29.039a25.941 25.941 0 0 1 7.44 2.407l.04.02a1.094 1.094 0 0 0 .96 0 25.705 25.705 0 0 1 7.46-2.427l.33-.039A2.036 2.036 0 0 0 22 16.548Z"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -97,7 +97,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M12 5.236v15M19.955 8.4h-2.25M19.918 11.369h-3"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -114,7 +114,7 @@ const List = ({ mobile, theme }) => {
             <Path
               d="M18.085 20.769H6.528c-3.467 0-5.778-2-5.778-6.673V7.423C.75 2.75 3.061.75 6.528.75h11.557c3.467 0 5.778 2 5.778 6.673v6.673c0 4.671-2.313 6.673-5.778 6.673Z"
               fill="none"
-              stroke="#37a865"
+              stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -124,7 +124,7 @@ const List = ({ mobile, theme }) => {
               data-name="Vector"
               d="M8.954 10.76V9.296c0-1.878 1.329-2.646 2.951-1.708l1.268.732 1.268.732c1.622.939 1.622 2.476 0 3.415l-1.267.732-1.268.732c-1.623.938-2.952.17-2.952-1.708V10.76Z"
               fill="none"
-              stroke="#37a865"
+              stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
               strokeLinecap="round"
               strokeLinejoin="round"
               strokeWidth={1.5}
@@ -141,7 +141,7 @@ const List = ({ mobile, theme }) => {
           <Path
             d="M15.407 11.316h-5.313"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -150,7 +150,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M12.75 8.723v5.313M17.872 2.125H7.628a4.111 4.111 0 0 0-4.1 4.1v14.972c0 1.912 1.371 2.72 3.049 1.8l5.185-2.879a2.251 2.251 0 0 1 1.987 0l5.185 2.879c1.679.935 3.049.128 3.049-1.8V6.225a4.127 4.127 0 0 0-4.111-4.1Z"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -165,7 +165,7 @@ const List = ({ mobile, theme }) => {
         <Svg xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
           <G
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -184,7 +184,7 @@ const List = ({ mobile, theme }) => {
             data-name="Vector"
             d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z"
             fill="none"
-            stroke="#37a865"
+            stroke={theme === 'light' ? Colors.theme1.greenCF : Colors.theme1.white}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth={1.5}
@@ -211,7 +211,7 @@ const List = ({ mobile, theme }) => {
             ),
             {
               borderBottomWidth: 1,
-              borderColor: Colors.theme1.grayE3 + "aa",
+              borderColor: Colors.theme1.grayE3 + (theme === 'light' ? "aa" : '55'),
             },
           ]}
           onPress={() => page.onPress()}
@@ -223,7 +223,7 @@ const List = ({ mobile, theme }) => {
                 fontFamily: "regular",
                 marginTop: 5,
                 marginRight: mobile ? 10 : 20,
-                color: Colors.theme1.gray20,
+                color: theme === 'light' ?  Colors.theme1.gray20 : Colors.theme1.white,
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
               }}
             >
diff --git a/src/screens/Profile/components/MyCourses/index.js b/src/screens/Profile/components/MyCourses/index.js
index e2250c2..288243b 100644
--- a/src/screens/Profile/components/MyCourses/index.js
+++ b/src/screens/Profile/components/MyCourses/index.js
@@ -32,7 +32,6 @@ const ProfileBookmark = ({ myCourses = [], mobile, theme }) => {
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
       }}
     >
diff --git a/src/screens/Profile/components/ProfileAddress/index.js b/src/screens/Profile/components/ProfileAddress/index.js
index 35bc977..0ccb167 100644
--- a/src/screens/Profile/components/ProfileAddress/index.js
+++ b/src/screens/Profile/components/ProfileAddress/index.js
@@ -199,7 +199,6 @@ const ProfileAddress = ({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
         paddingBottom: 20,
       }}
diff --git a/src/screens/Profile/components/ProfileBookmark/index.js b/src/screens/Profile/components/ProfileBookmark/index.js
index 1c12c47..4646ffa 100644
--- a/src/screens/Profile/components/ProfileBookmark/index.js
+++ b/src/screens/Profile/components/ProfileBookmark/index.js
@@ -43,7 +43,6 @@ const ProfileBookmark = ({
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        backgroundColor: "white",
         flex: 1,
       }}
     >
@@ -111,7 +110,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
         tw("flex flex-row-reverse rounded-md justify-between px-3.5 py-2 mb-4"),
         {
           borderWidth: 1.5,
-          borderColor: Colors.theme1.greenCF,
+          borderColor: Colors.theme1.greenCF + (theme === "light" ? "" : "77"),
         },
       ]}
       onPress={() =>
@@ -155,7 +154,8 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
             style={{
               fontFamily: "bold",
               fontSize: fontSize.tiny,
-              color: Colors.theme1.gray20,
+              color:
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
               width: width / 3,
               textAlign: "right",
             }}
@@ -170,7 +170,10 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
                 marginTop: 5,
                 fontFamily: "regular",
                 fontSize: fontSize.sm,
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
               }}
             >
               {"پایه" + " " + grades[bookmark?.product?.book?.gradeId]}
@@ -192,7 +195,7 @@ const Bookmark = ({ bookmark, deleteItem, mobile, grades, theme, loading }) => {
           >
             <Path
               d="M20.869 2.482H8.908a4.8 4.8 0 0 0-4.789 4.789v17.483c0 2.233 1.6 3.176 3.561 2.1l6.055-3.362a2.628 2.628 0 0 1 2.32 0l6.055 3.362c1.96 1.092 3.561.149 3.561-2.1V7.271a4.819 4.819 0 0 0-4.802-4.789Z"
-              fill="#37a865"
+              fill={"#37a865" + (theme === "light" ? "" : "aa")}
             />
             <Path
               data-name="Vector"
@@ -231,7 +234,6 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
     paddingHorizontal: 0,
diff --git a/src/screens/Profile/components/Trophy.js b/src/screens/Profile/components/Trophy.js
index 7c68862..0ecb160 100644
--- a/src/screens/Profile/components/Trophy.js
+++ b/src/screens/Profile/components/Trophy.js
@@ -10,14 +10,16 @@ import Colors from "../../../constants/Colors";
 
 const ios = Platform.OS === "ios";
 
-const Trophy = ({theme}) => {
+const Trophy = ({ theme }) => {
   return (
     <View
       style={[
-        tw(
-          `w-full flex py-3 px-3 justify-between flex-row-reverse`
-        ),
-        { backgroundColor: Colors.theme1.yellow2 },
+        tw(`w-full flex py-3 px-3 justify-between flex-row-reverse`),
+        {
+          backgroundColor: theme === "light" ? Colors.theme1.yellow2 : null,
+          borderWidth: theme === "light" ? 0 : 1,
+          borderColor: Colors.theme1.yellow2,
+        },
       ]}
     >
       <View style={[tw(`flex flex-row-reverse`)]}>
@@ -55,7 +57,8 @@ const Trophy = ({theme}) => {
             fontFamily: "regular",
             fontSize: fontSize.tiny,
             marginRight: 10,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.yellow2,
           }}
         >
           {"امتیاز شما" + " " + 14560}
@@ -66,7 +69,8 @@ const Trophy = ({theme}) => {
           style={{
             fontFamily: "light",
             fontSize: fontSize.sm,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.yellow2,
           }}
         >
           مشاهده جوایز
@@ -77,7 +81,7 @@ const Trophy = ({theme}) => {
 };
 
 const mapStateToProps = (state) => ({
-  theme: state.publicApi.theme
+  theme: state.publicApi.theme,
 });
 
 export default connect(mapStateToProps)(Trophy);
diff --git a/src/screens/Profile/components/User.js b/src/screens/Profile/components/User.js
index 4baf93c..f7edeb3 100644
--- a/src/screens/Profile/components/User.js
+++ b/src/screens/Profile/components/User.js
@@ -42,7 +42,10 @@ const User = ({ user, mobile, theme }) => {
             <Text
               style={{
                 fontSize: mobile ? fontSize.lg : fontSize.xl5,
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
                 fontFamily: "bold",
               }}
             >
@@ -51,7 +54,10 @@ const User = ({ user, mobile, theme }) => {
             <Text
               style={{
                 fontSize: mobile ? fontSize.tiny : fontSize.xl2,
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
                 fontFamily: "light",
                 marginTop: mobile ? 3 : 6,
                 textAlign: "right",
@@ -89,7 +95,8 @@ const User = ({ user, mobile, theme }) => {
                 tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse pt-2`),
                 {
                   borderTopWidth: 1,
-                  borderColor: Colors.theme1.grayE3,
+                  borderColor:
+                    Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
                 },
               ]}
             >
@@ -97,7 +104,10 @@ const User = ({ user, mobile, theme }) => {
                 style={{
                   fontSize: mobile ? fontSize.base : fontSize.xl,
                   fontFamily: "bold",
-                  color: Colors.theme1.gray20,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 }}
               >
                 افزودن حساب کاربری جدید
@@ -108,7 +118,10 @@ const User = ({ user, mobile, theme }) => {
                   marginTop: 3,
                   fontSize: fontSize.xl2,
                   fontFamily: "bold",
-                  color: Colors.theme1.gray20,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 }}
               >
                 +
diff --git a/src/screens/Rules/index.js b/src/screens/Rules/index.js
index 5c87313..2748006 100644
--- a/src/screens/Rules/index.js
+++ b/src/screens/Rules/index.js
@@ -32,7 +32,6 @@ const Rules = ({ route, mobile, theme }) => {
         paddingBottom: 100,
       },
       container: {
-        backgroundColor: "white",
         flexDirection: "column",
         paddingVertical: 5,
         paddingHorizontal: 16,
@@ -97,7 +96,9 @@ const Rules = ({ route, mobile, theme }) => {
               fontFamily: "bold",
               fontSize: fontSize.sm,
               color: Colors.theme1.redC0,
-              backgroundColor: Colors.theme1.redFF,
+              backgroundColor: theme === 'light' ? Colors.theme1.redFF : null,
+              borderWidth : theme === 'light' ? 0 : 1,
+              borderColor : Colors.theme1.redC0
             },
           ]}
         >
@@ -116,7 +117,11 @@ const Switch = ({ theme, active, setActive }) => {
     <View
       style={[
         tw("w-full flex flex-row"),
-        { borderWidth: 1, borderColor: Colors.theme1.green79 },
+        {
+          borderWidth: 1,
+          borderColor:
+            theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
+        },
       ]}
     >
       <Pressable
@@ -124,7 +129,9 @@ const Switch = ({ theme, active, setActive }) => {
           tw("flex-1 py-3 flex flex-row justify-center"),
           {
             backgroundColor: active
-              ? Colors.theme1.green79 + '11'
+              ? theme === "light"
+                ? Colors.theme1.green79 + "11"
+                : Colors.theme1.greenCF + "22"
               : "transparent",
           },
         ]}
@@ -134,7 +141,8 @@ const Switch = ({ theme, active, setActive }) => {
           style={{
             fontFamily: "regular",
             fontSize: fontSize.tiny,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
           }}
         >
           راهنمای استفاده
@@ -146,7 +154,9 @@ const Switch = ({ theme, active, setActive }) => {
           tw("flex-1 py-3 flex flex-row justify-center"),
           {
             backgroundColor: !active
-              ? Colors.theme1.green79 + '11'
+              ? theme === "light"
+                ? Colors.theme1.green79 + "11"
+                : Colors.theme1.greenCF + "22"
               : "transparent",
           },
         ]}
@@ -156,7 +166,8 @@ const Switch = ({ theme, active, setActive }) => {
           style={{
             fontFamily: "regular",
             fontSize: fontSize.tiny,
-            color: Colors.theme1.green79,
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
           }}
         >
           شرایط و قوانین
@@ -175,8 +186,13 @@ const Rule = ({ rule, theme }) => {
           {
             fontFamily: "bold",
             fontSize: fontSize.sm,
-            color: Colors.theme1.green79,
-            backgroundColor: Colors.theme1.green79 + '11',
+            color:
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenCF,
+            backgroundColor:
+              theme === "light" ? Colors.theme1.green79 + "11" : null,
+            borderWidth: theme === "light" ? 0 : 1,
+            borderColor: Colors.theme1.greenCF + "55",
+            textAlign: "right",
           },
         ]}
       >
@@ -188,7 +204,9 @@ const Rule = ({ rule, theme }) => {
           {
             fontFamily: "regular",
             fontSize: fontSize.sm,
-            color: Colors.theme1.gray20,
+            color:
+              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
+            textAlign: "right",
           },
         ]}
       >
diff --git a/src/screens/ShoppingCart/components/Code.js b/src/screens/ShoppingCart/components/Code.js
index 7b695a4..0d0bee6 100644
--- a/src/screens/ShoppingCart/components/Code.js
+++ b/src/screens/ShoppingCart/components/Code.js
@@ -48,10 +48,15 @@ function Code({ codeId, setCodeId, theme, loading }) {
           }
           style={[
             tw("border-0 flex-1 text-right pr-3"),
-            { fontSize: fontSize.tiny, fontFamily: "regular" },
+            {
+              fontSize: fontSize.tiny,
+              fontFamily: "regular",
+              color:
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
+            },
           ]}
           placeholder={"کد تخفیف دارید ؟"}
-          placeholderTextColor={Colors.theme1.gray20 + "aa"}
+          placeholderTextColor={theme === 'light' ? Colors.theme1.gray20 + "aa" : Colors.theme1.white + 'aa'}
           value={value}
         />
         <Pressable
diff --git a/src/screens/ShoppingCart/components/Product.js b/src/screens/ShoppingCart/components/Product.js
index bac06bf..defa93c 100644
--- a/src/screens/ShoppingCart/components/Product.js
+++ b/src/screens/ShoppingCart/components/Product.js
@@ -58,7 +58,7 @@ function Product({
         ),
         {
           borderBottomWidth: 1,
-          borderColor: Colors.theme1.grayE3,
+          borderColor: Colors.theme1.grayE3 + (theme === 'light' ? "" : "55"),
           direction: "rtl",
         },
       ]}
@@ -83,7 +83,8 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.lg : fontSize.xl4,
-              color: Colors.theme1.green79,
+              color:
+                theme === "light" ? Colors.theme1.green79 : Colors.theme1.white,
               marginBottom: 5,
               fontFamily: "bold",
             }}
@@ -93,7 +94,10 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1.gray2077,
+              color:
+                theme === "light"
+                  ? Colors.theme1.gray2077
+                  : Colors.theme1.white,
               marginBottom: 3,
               fontFamily: "regular",
             }}
@@ -103,7 +107,10 @@ function Product({
           <Text
             style={{
               fontSize: mobile ? fontSize.sm : fontSize.lg,
-              color: Colors.theme1.gray2077,
+              color:
+                theme === "light"
+                  ? Colors.theme1.gray2077
+                  : Colors.theme1.white,
               fontFamily: "regular",
             }}
           >
@@ -121,6 +128,10 @@ function Product({
                 {
                   fontSize: mobile ? fontSize.xs : fontSize.tiny,
                   fontFamily: "regular",
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 },
               ]}
             >
@@ -131,6 +142,10 @@ function Product({
                 {
                   fontSize: mobile ? fontSize.lg : fontSize.xl,
                   fontFamily: "regular",
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 },
               ]}
             >
@@ -257,7 +272,18 @@ function Product({
               }`
             )}
           >
-            <Text style={[{ fontSize: fontSize.sm, fontFamily: "regular" }]}>
+            <Text
+              style={[
+                {
+                  fontSize: fontSize.sm,
+                  fontFamily: "regular",
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
+                },
+              ]}
+            >
               {" " + "تومان"}
             </Text>
             <Text
@@ -265,6 +291,10 @@ function Product({
                 {
                   fontSize: mobile ? fontSize.xl : fontSize.xl4,
                   fontFamily: "regular",
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.gray20
+                      : Colors.theme1.white,
                 },
               ]}
             >
diff --git a/src/screens/ShoppingCart/index.js b/src/screens/ShoppingCart/index.js
index 925653d..a8da81f 100644
--- a/src/screens/ShoppingCart/index.js
+++ b/src/screens/ShoppingCart/index.js
@@ -41,7 +41,8 @@ const PriceStatus = ({ name, value, type, theme }) => {
           tw(""),
           {
             fontSize: fontSize.tiny,
-            color: Colors.theme1.gray20,
+            color:
+              theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "bold",
           },
         ]}
@@ -55,7 +56,9 @@ const PriceStatus = ({ name, value, type, theme }) => {
               color:
                 type === "error"
                   ? Colors.theme1.redFF1
-                  : Colors.theme1.green79,
+                  : theme === "light"
+                  ? Colors.theme1.green79
+                  : Colors.theme1.white,
               fontSize: fontSize.xl,
               fontFamily: "bold",
             },
@@ -69,7 +72,9 @@ const PriceStatus = ({ name, value, type, theme }) => {
               color:
                 type === "error"
                   ? Colors.theme1.redFF1
-                  : Colors.theme1.green79,
+                  : theme === "light"
+                  ? Colors.theme1.green79
+                  : Colors.theme1.white,
               fontSize: fontSize.sm,
               fontFamily: "regular",
               marginRight: 4,
@@ -154,7 +159,9 @@ function ShoppingCart({
           <Code />
           <View
             style={tw(
-              "flex  w-full border-t py-2 border-gray-300 border-b mt-6"
+              `flex  w-full border-t py-2 border-gray-300 border-b mt-6 ${
+                theme === "light" ? "" : "border-opacity-20"
+              }`
             )}
           >
             <PriceStatus
@@ -192,7 +199,10 @@ function ShoppingCart({
             <Text
               style={[
                 {
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
                   fontSize: fontSize.base,
                   fontFamily: "bold",
                 },
@@ -204,7 +214,10 @@ function ShoppingCart({
               <Text
                 style={[
                   {
-                    color: Colors.theme1.green79,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white,
                     fontSize: fontSize.xl,
                     fontFamily: "bold",
                   },
@@ -215,7 +228,10 @@ function ShoppingCart({
               <Text
                 style={[
                   {
-                    color: Colors.theme1.green79,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                     marginRight: 4,
@@ -232,14 +248,22 @@ function ShoppingCart({
                 tw(
                   "w-full rounded-md flex flex-row justify-center items-center py-3 px-3 my-5"
                 ),
-                { backgroundColor: Colors.theme1.greenC8 + "1a" },
+                {
+                  backgroundColor:
+                    theme === "light"
+                      ? Colors.theme1.greenC8 + "1a"
+                      : Colors.theme1.blue90 + "33",
+                },
               ]}
             >
               <Text
                 style={[
                   tw("mr-1"),
                   {
-                    color: Colors.theme1.green79,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.green79
+                        : Colors.theme1.white,
                     fontSize: fontSize.sm,
                     fontFamily: "regular",
                   },
@@ -250,7 +274,11 @@ function ShoppingCart({
               <Ionicons
                 name="alert-circle-outline"
                 size={20}
-                color={Colors.theme1.greenC8}
+                color={
+                  theme === "light"
+                    ? Colors.theme1.greenC8
+                    : Colors.theme1.white
+                }
               />
             </Pressable>
 
@@ -304,11 +332,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart);
 
 const styles = StyleSheet.create({
   contentContainerStyle: {
-    paddingBottom: 50,
+    paddingBottom: 120,
     position: "relative",
   },
   container: {
-    backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,
diff --git a/src/screens/Splash/index.js b/src/screens/Splash/index.js
index 1ae9d95..9138b14 100644
--- a/src/screens/Splash/index.js
+++ b/src/screens/Splash/index.js
@@ -85,7 +85,6 @@ function Splash({
           }}
         />
       </View>
-
       <ActivityIndicator size={"large"} style={{ marginTop: 20 }} />
     </View>
   );
diff --git a/src/screens/Video/components/Season.js b/src/screens/Video/components/Season.js
index f95f64c..3899e2b 100644
--- a/src/screens/Video/components/Season.js
+++ b/src/screens/Video/components/Season.js
@@ -40,7 +40,7 @@ const Season = ({
           tw("w-full flex  overflow-hidden mb-3"),
           {
             borderBottomWidth: 1,
-            borderColor: Colors.theme1.grayE3,
+            borderColor: Colors.theme1.grayE3 + (theme === "light" ? "" : "55"),
           },
         ]}
       >
@@ -56,7 +56,10 @@ const Season = ({
               {
                 fontFamily: "bold",
                 fontSize: mobile ? fontSize.base : fontSize.lg,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.white,
               },
             ]}
           >
@@ -68,7 +71,10 @@ const Season = ({
                 {
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.base : fontSize.lg,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
                 },
               ]}
             >
@@ -82,7 +88,9 @@ const Season = ({
                   borderColor:
                     Number(index) === 0
                       ? Colors.theme1.greenCF
-                      : Colors.theme1.gray2077,
+                      : theme === "light"
+                      ? Colors.theme1.gray2077
+                      : Colors.theme1.white + "66",
                 },
               ]}
               onPress={() =>
@@ -104,7 +112,9 @@ const Season = ({
                   color:
                     Number(index) === 0
                       ? Colors.theme1.greenCF
-                      : Colors.theme1.gray2077,
+                      : theme === "light"
+                      ? Colors.theme1.gray2077
+                      : Colors.theme1.white + "66",
                 }}
               >
                 نمایش
@@ -134,7 +144,10 @@ const Season = ({
               {
                 fontFamily: "bold",
                 fontSize: mobile ? fontSize.base : fontSize.xl,
-                color: Colors.theme1.green79,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.green79
+                    : Colors.theme1.greenC8,
               },
             ]}
           >
@@ -149,7 +162,9 @@ const Season = ({
               season[0].categoryId === activeSeason ? "arrow-up" : "arrow-down"
             }
             size={14}
-            color={Colors.theme1.green79}
+            color={
+              theme === "light" ? Colors.theme1.green79 : Colors.theme1.greenC8
+            }
           />
         </View>
         {season[0]?.categoryId === activeSeason
diff --git a/src/screens/Video/index.js b/src/screens/Video/index.js
index fb9e252..d82453b 100644
--- a/src/screens/Video/index.js
+++ b/src/screens/Video/index.js
@@ -130,7 +130,10 @@ function Product({
               <Text
                 style={{
                   marginTop: 5,
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
                   fontSize: mobile ? fontSize.base : fontSize.xl3,
                   marginBottom: 0,
                   fontFamily: "demi",
@@ -140,7 +143,10 @@ function Product({
               </Text>
               <Text
                 style={{
-                  color: Colors.theme1.green79,
+                  color:
+                    theme === "light"
+                      ? Colors.theme1.green79
+                      : Colors.theme1.white,
                   fontSize: mobile ? fontSize.tiny : fontSize.xl,
                   marginTop: 10,
                   fontFamily: "regular",
@@ -206,11 +212,8 @@ function Product({
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 100,
-    // flex : 1,
-    // backgroundColor : '#fff'
   },
   container: {
-    backgroundColor: "white",
     paddingVertical: 5,
     paddingHorizontal: 16,
   },
diff --git a/src/screens/VideoDisplay/index.js b/src/screens/VideoDisplay/index.js
index 341f8b4..29d6a0f 100644
--- a/src/screens/VideoDisplay/index.js
+++ b/src/screens/VideoDisplay/index.js
@@ -79,7 +79,7 @@ function VideoDisplay({ route, mobile, theme }) {
               fontSize: fontSize.xl,
               fontFamily: "bold",
               marginTop: mobile ? 8 : 12,
-              color: Colors.theme1.gray20,
+              color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
               textAlign: ios ? "right" : "auto",
             }}
           >
@@ -111,8 +111,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    backgroundColor: "white",
-    flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,
   },
diff --git a/src/screens/Videos/components/MostViewedVideo.js b/src/screens/Videos/components/MostViewedVideo.js
index 3147564..67ed27e 100644
--- a/src/screens/Videos/components/MostViewedVideo.js
+++ b/src/screens/Videos/components/MostViewedVideo.js
@@ -69,7 +69,8 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               fontSize: mobile ? fontSize.base : fontSize.xl,
               marginTop: 5,
               paddingRight: 4,
-              color: Colors.theme1.gray20,
+              color:
+                theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
               fontFamily: "regular",
             }}
           >
@@ -85,7 +86,10 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               <Text
                 style={[
                   {
-                    color: Colors.theme1.gray20,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.gray20
+                        : Colors.theme1.white,
                     fontFamily: "bold",
                     fontSize: mobile ? fontSize.sm : fontSize.tiny,
                     marginRight: 3,
@@ -97,7 +101,10 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
               <Text
                 style={[
                   {
-                    color: Colors.theme1.gray20,
+                    color:
+                      theme === "light"
+                        ? Colors.theme1.gray20
+                        : Colors.theme1.white,
                     fontFamily: "bold",
                     fontSize: mobile ? fontSize.xl : fontSize.xl3,
                   },
@@ -109,7 +116,10 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
 
             <Text
               style={{
-                color: Colors.theme1.gray20,
+                color:
+                  theme === "light"
+                    ? Colors.theme1.gray20
+                    : Colors.theme1.white,
                 fontFamily: "light",
                 fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 marginTop: 0,
@@ -126,13 +136,17 @@ function MostViewedVideo({ videos, grades, mobile, theme }) {
 
   return (
     <View style={tw("w-full flex  w-full mt-3")}>
-      <Header title="پربازدیدترین" route={"Products"} state={{productType : 'دوره ویدئویی'}} />
+      <Header
+        title="پربازدیدترین"
+        route={"Products"}
+        state={{ productType: "دوره ویدئویی" }}
+      />
       <FlatList
         showsHorizontalScrollIndicator={false}
         horizontal={true}
         inverted={true}
         style={tw("pb-1.5 mt-3 flex flex-row w-full")}
-        data={videos.slice(0,7)}
+        data={videos.slice(0, 7)}
         renderItem={({ item }) => <Video video={item} />}
         keyExtractor={(item) => item.id}
       />
diff --git a/src/screens/Videos/components/NewestVideo.js b/src/screens/Videos/components/NewestVideo.js
index 4a7b055..58d6761 100644
--- a/src/screens/Videos/components/NewestVideo.js
+++ b/src/screens/Videos/components/NewestVideo.js
@@ -50,7 +50,7 @@ const NewestVideo = ({ videos, grades, mobile, theme }) => {
           style={{
             fontSize: mobile ? fontSize.base : fontSize.xl,
             marginTop: 5,
-            color: Colors.theme1.gray20,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "bold",
           }}
         >
@@ -58,7 +58,7 @@ const NewestVideo = ({ videos, grades, mobile, theme }) => {
         </Text>
         <Text
           style={{
-            color: Colors.theme1.gray20,
+            color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
             fontFamily: "light",
             fontSize: mobile ? fontSize.tiny : fontSize.lg,
             marginTop: 5,