diff --git a/src/components/AlertModal.js b/src/components/AlertModal.js
index 1e48606..03eee00 100644
--- a/src/components/AlertModal.js
+++ b/src/components/AlertModal.js
@@ -1,8 +1,15 @@
-import React, { useState } from "react"
-import AwesomeAlert from 'react-native-awesome-alerts';
-const ReactNative = require('react-native');
+import React, { useState } from "react";
+import { Dimensions } from "react-native";
+import { connect } from "react-redux";
+import AwesomeAlert from "react-native-awesome-alerts";
 
-const AlertModal = props => {
+//style
+import Colors from "../constants/Colors";
+
+//variables
+const { width } = Dimensions.get("window");
+
+const AlertModal = (props) => {
   const [alert, setAlert] = useState({
     show: false,
     showProgress: false,
@@ -15,12 +22,9 @@ const AlertModal = props => {
     cancelText: "بیخیال",
     confirmText: "باشه",
     confirmButtonColor: "#2980b9",
-    onCancel: () => {
-    },
-    onConfirm: () => {
-
-    },
-  })
+    onCancel: () => {},
+    onConfirm: () => {},
+  });
   const [apiAlert, setApiAlert] = useState({
     show: false,
     showProgress: false,
@@ -33,121 +37,136 @@ const AlertModal = props => {
     cancelText: "بیخیال",
     confirmText: "باشه",
     confirmButtonColor: "#2980b9",
-    onCancel: () => {
-    },
-    onConfirm: () => {
-    },
-  })
+    onCancel: () => {},
+    onConfirm: () => {},
+  });
 
   global.globalAlert = (params) => {
     setAlert({
       ...alert,
-      ...params
-    })
-  }
+      ...params,
+    });
+  };
   global.globalApiAlert = (params) => {
-
     setApiAlert({
       ...apiAlert,
-      ...params
-    })
-  }
+      ...params,
+    });
+  };
 
   function hideAlert() {
-    setAlert({ ...alert, show: false })
+    setAlert({ ...alert, show: false });
   }
-  function onApiCancelPressed(){
-    globalApiAlert({ show: false })
+  function onApiCancelPressed() {
+    globalApiAlert({ show: false });
 
-    apiAlert.onCancel()
+    apiAlert.onCancel();
   }
-  function onApiConfirmPressed(){
-    globalApiAlert({ show: false })
-    apiAlert.onConfirm()
+  function onApiConfirmPressed() {
+    globalApiAlert({ show: false });
+    apiAlert.onConfirm();
   }
-  function onCancelPressed(){
-    hideAlert()
-    alert.onCancel()
+  function onCancelPressed() {
+    hideAlert();
+    alert.onCancel();
   }
-  function onConfirmPressed(){
-    hideAlert()
-    alert.onConfirm()
+  function onConfirmPressed() {
+    hideAlert();
+    alert.onConfirm();
   }
-  return <>
-  <AwesomeAlert
-      show={alert.show}
-      progressColor="red"
-      showProgress={alert.showProgress}
-      title={alert.title}
-      titleStyle={{ fontFamily : 'bold' }}
-      message={alert.message}
-      messageStyle={{textAlign : 'right', fontFamily : 'regular'}}
-      closeOnTouchOutside={alert.closeOnTouchOutside}
-      closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
-      showCancelButton={alert.showCancelButton}
-      showConfirmButton={alert.showConfirmButton}
-      cancelText={alert.cancelText}
-      confirmText={alert.confirmText}
-      confirmButtonColor={alert.confirmButtonColor}
-      onCancelPressed={onCancelPressed}
-      onConfirmPressed={(onConfirmPressed)}
-      cancelButtonTextStyle={{
-        color : '#777',
-        fontFamily : 'regular',
-      }}
-      confirmButtonTextStyle={{
-        fontFamily : 'regular',
-
-      }}
-      contentStyle={{
-        width: ReactNative.Dimensions.get('window').width / 1.5,
-      }}
-      cancelButtonStyle={{
-        fontFamily : 'regular',
-        borderColor : "#777",
-        borderWidth : 1,
-        backgroundColor : 'white',
-      }}
-      confirmButtonStyle={
-        {
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontFamily : 'regular',
-          borderColor : "#2980b9",
-          borderWidth : 1,
-        }
-      }
-      useNativeDriver={true}
-  />
-    <AwesomeAlert
-      show={apiAlert.show}
-      progressColor="red"
-      showProgress={apiAlert.showProgress}
-      title={apiAlert.title}
-      message={apiAlert.message}
-      closeOnTouchOutside={apiAlert.closeOnTouchOutside}
-      closeOnHardwareBackPress={apiAlert.closeOnHardwareBackPress}
-      showCancelButton={apiAlert.showCancelButton}
-      showConfirmButton={apiAlert.showConfirmButton}
-      cancelText={apiAlert.cancelText}
-      confirmText={apiAlert.confirmText}
-      confirmButtonColor={apiAlert.confirmButtonColor}
-      onCancelPressed={onApiCancelPressed}
-      onConfirmPressed={(onApiConfirmPressed)}
-      contentStyle={{
-        width: ReactNative.Dimensions.get('window').width / 1.5
-      }}
-      confirmButtonStyle={
-        {
-          width: ReactNative.Dimensions.get('window').width / 4,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      }
-      useNativeDriver={true}
-    />
-  </>
+  return (
+    <>
+      <AwesomeAlert
+        show={alert.show}
+        progressColor="red"
+        showProgress={alert.showProgress}
+        title={alert.title}
+        titleStyle={{
+          fontFamily: "bold",
+          color:
+            props.theme === "light"
+              ? Colors.theme1.gray20
+              : Colors.theme1.white,
+        }}
+        message={alert.message}
+        messageStyle={{
+          textAlign: "right",
+          fontFamily: "regular",
+          color:
+            props.theme === "light"
+              ? Colors.theme1.gray20
+              : Colors.theme1.white,
+        }}
+        closeOnTouchOutside={alert.closeOnTouchOutside}
+        closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
+        showCancelButton={alert.showCancelButton}
+        showConfirmButton={alert.showConfirmButton}
+        cancelText={alert.cancelText}
+        confirmText={alert.confirmText}
+        confirmButtonColor={alert.confirmButtonColor}
+        onCancelPressed={onCancelPressed}
+        onConfirmPressed={onConfirmPressed}
+        cancelButtonTextStyle={{
+          color: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
+          fontFamily: "regular",
+        }}
+        confirmButtonTextStyle={{
+          fontFamily: "regular",
+        }}
+        contentStyle={{
+          width: width / 1.5,
+        }}
+        cancelButtonStyle={{
+          fontFamily: "regular",
+          borderColor: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
+          borderWidth: 1,
+          backgroundColor:
+            props.theme === "light" ? Colors.theme1.white : Colors.theme1.black,
+        }}
+        confirmButtonStyle={{
+          alignItems: "center",
+          justifyContent: "center",
+          fontFamily: "regular",
+          borderColor: "#2980b9",
+          borderWidth: 1,
+        }}
+        contentContainerStyle={{
+          backgroundColor:
+            props.theme === "light" ? "white" : Colors.theme1.black,
+        }}
+        useNativeDriver={true}
+      />
+      <AwesomeAlert
+        show={apiAlert.show}
+        progressColor="red"
+        showProgress={apiAlert.showProgress}
+        title={apiAlert.title}
+        message={apiAlert.message}
+        closeOnTouchOutside={apiAlert.closeOnTouchOutside}
+        closeOnHardwareBackPress={apiAlert.closeOnHardwareBackPress}
+        showCancelButton={apiAlert.showCancelButton}
+        showConfirmButton={apiAlert.showConfirmButton}
+        cancelText={apiAlert.cancelText}
+        confirmText={apiAlert.confirmText}
+        confirmButtonColor={apiAlert.confirmButtonColor}
+        onCancelPressed={onApiCancelPressed}
+        onConfirmPressed={onApiConfirmPressed}
+        contentStyle={{
+          width: width / 1.5,
+        }}
+        confirmButtonStyle={{
+          width: width / 4,
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        useNativeDriver={true}
+      />
+    </>
+  );
+};
 
-}
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
 
-export default AlertModal;
+export default connect(mapStateToProps)(AlertModal);
diff --git a/src/screens/Home/components/Scroll.js b/src/screens/Home/components/Scroll.js
index 54289f5..fccf3ea 100644
--- a/src/screens/Home/components/Scroll.js
+++ b/src/screens/Home/components/Scroll.js
@@ -25,8 +25,8 @@ function Scroll({ books, mobile }) {
           style={[
             tw("mr-1 overflow-hidden"),
             {
-              width: position === 0 ? mobile ? 163 : 240 : mobile ? 84 : 125,
-              height: position === 0 ? mobile ? 245 : 350 : mobile ? 118 : 170,
+              width: position === 0 ? mobile ? 170 : 240 : mobile ? 84 : 125,
+              height: position === 0 ? mobile ? 240 : 350 : mobile ? 118 : 170,
               marginLeft : position === 0 ? 16 : 4,
             },
           ]}
@@ -47,7 +47,7 @@ function Scroll({ books, mobile }) {
               ios ? "flex-wrap" : "flex-wrap-reverse"
             }`
           ),
-          { height: mobile ? 245 : 350, direction: "rtl" },
+          { height: mobile ? 242 : 350, direction: "rtl" },
         ]}
       >
         {books.slice(0,14).map((book, index) => (