diff --git a/navigation/assets/home-active.png b/navigation/assets/home-active.png
new file mode 100644
index 0000000..912191c
Binary files /dev/null and b/navigation/assets/home-active.png differ
diff --git a/navigation/assets/home-deactive.png b/navigation/assets/home-deactive.png
new file mode 100644
index 0000000..7c5dd08
Binary files /dev/null and b/navigation/assets/home-deactive.png differ
diff --git a/navigation/assets/video-active.png b/navigation/assets/video-active.png
new file mode 100644
index 0000000..80fe4ad
Binary files /dev/null and b/navigation/assets/video-active.png differ
diff --git a/navigation/assets/video-deactive.png b/navigation/assets/video-deactive.png
new file mode 100644
index 0000000..309bfe8
Binary files /dev/null and b/navigation/assets/video-deactive.png differ
diff --git a/navigation/index.js b/navigation/index.js
index bb471b9..fc2d372 100644
--- a/navigation/index.js
+++ b/navigation/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import { Image } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
@@ -28,8 +29,15 @@ import Exams from "../src/screens/Exams";
 import ShoppingCart from "../src/screens/ShoppingCart";
 import Video from "../src/screens/Video";
 import VideoDisplay from "../src/screens/VideoDisplay";
+import Contact from "../src/screens/Contact";
 import { user } from "../src/redux/actions";
 
+//assets
+import homeDeactiveIcon from "./assets/home-deactive.png";
+import homeActiveIcon from "./assets/home-active.png";
+import videoActiveIcon from "./assets/video-active.png";
+import videoDeactiveIcon from "./assets/video-deactive.png";
+
 const width = Dimensions.get("window").width;
 
 const Tab = createBottomTabNavigator();
@@ -44,12 +52,15 @@ const BottomTabNavigator = () => {
         tabBarStyle: {
           backgroundColor: "#CCE6FF",
           zIndex: 10,
+          paddingVertical: 10,
+          height: 60,
         },
         tabBarLabelStyle: {
-          fontSize: width / 39,
-          fontFamily: "light",
+          fontSize: width / 36,
+          fontFamily: "regular",
+          marginTop: 5,
         },
-        tabBarShowLabel: false,
+        tabBarShowLabel: true,
         // tabBarLabel : 'reza'
       }}
     >
@@ -70,13 +81,18 @@ const BottomTabNavigator = () => {
         name="VODTab"
         component={VODStackScreen}
         options={{
-          tabBarIcon: ({ focused, color }) => (
-            <MaterialIcons
-              name="ondemand-video"
-              size={focused ? 27 : 23}
-              color={color}
-            />
-          ),
+          tabBarIcon: ({ focused, color }) =>
+            focused ? (
+              <Image
+                source={videoActiveIcon}
+                style={{ width: 32, height: 28 }}
+              />
+            ) : (
+              <Image
+                source={videoDeactiveIcon}
+                style={{ width: 32, height: 28 }}
+              />
+            ),
         }}
       />
       <Tab.Screen
@@ -92,13 +108,18 @@ const BottomTabNavigator = () => {
         name="HomeTab"
         component={HomeStackScreen}
         options={{
-          tabBarIcon: ({ focused, color }) => (
-            <Ionicons
-              name="home-outline"
-              size={focused ? 27 : 23}
-              color={color}
-            />
-          ),
+          tabBarIcon: ({ focused, color }) =>
+            focused ? (
+              <Image
+                source={homeActiveIcon}
+                style={{ width: 33, height: 33 }}
+              />
+            ) : (
+              <Image
+                source={homeDeactiveIcon}
+                style={{ width: 33, height: 33 }}
+              />
+            ),
         }}
       />
     </Tab.Navigator>
@@ -156,7 +177,6 @@ const AuthStackScreen = () => {
   );
 };
 
-
 const Stack = createNativeStackNavigator();
 const Navigation = ({ getStatus, isLogin }) => {
   useEffect(() => {
@@ -178,6 +198,7 @@ const Navigation = ({ getStatus, isLogin }) => {
         <Stack.Screen name="Faq" component={Faq} />
         <Stack.Screen name="Activation" component={Activation} />
         <Stack.Screen name="QRContent" component={QRContent} />
+        <Stack.Screen name="Contact" component={Contact} />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/src/components/Drawer.js b/src/components/Drawer.js
index 3e086e4..45f8c56 100644
--- a/src/components/Drawer.js
+++ b/src/components/Drawer.js
@@ -65,6 +65,13 @@ const Drawer = ({ position, setBoxPosition }) => {
       icon: <Ionicons name="reorder-four" size={23} color={"#555555"} />,
       toast: "",
       message: "",
+    },
+    {
+      name: "تماس با ما",
+      route: "Contact",
+      icon: <Ionicons name="call" size={23} color={"#555555"} />,
+      toast: "",
+      message: "",
     }
   ]);
   const navigation = useNavigation();
diff --git a/src/components/Header.js b/src/components/Header.js
index 33ff75d..a978f8a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,33 +1,44 @@
-import React from 'react';
-import {View, Text, Dimensions, Image} from 'react-native';
-import tw from 'tailwind-react-native-classnames';
+import React, { useState, useEffect } from "react";
+import { View, Text, Dimensions, Image, ImageBackground } from "react-native";
+import tw from "tailwind-rn";
 
-const width = Dimensions.get('window').width;
-const height = Dimensions.get('window').height;
+const width = Dimensions.get("window").width;
+const height = Dimensions.get("window").height;
 
-export default function Header({icon, title, description, background}) {
+export default function Header({ title, description, background }) {
   return (
     <View
       style={[
-        tw.style('w-full flex flex-col items-center justify-end pb-3 relative mb-0'),
-        {height: height / 4.5, backgroundColor: '#E9F0F7'},
-      ]}>
-      <Image source={background} style={[tw.style('absolute left-0 top-0'), {}]} />
-      <Image source={icon} style={[{width : width / 5, height : height / 10, marginBottom : 10}]} />
-      <Text
+        tw("w-full flex flex-col items-center pb-7"),
+        { height: height / 4.5, backgroundColor: "#E9F0F7" },
+      ]}
+    >
+      <ImageBackground
+        source={background}
+        resizeMode="contain"
         style={[
-          {fontSize: width / 25, color: '#196EC0', fontFamily: 'bold'},
-          tw.style(' mb-1'),
-        ]}>
-        {title}
-      </Text>
+          tw(
+            "w-full"
+          ),
+          { height: "80%" },
+        ]}
+      >
+      </ImageBackground>
       <Text
-        style={[
-          {color: '#86A0B9', fontSize: width / 36, fontFamily: 'light'},
-          tw.style(' mb-2'),
-        ]}>
-        {description}
-      </Text>
+          style={[
+            { fontSize: width / 25, color: "#196EC0", fontFamily: "bold" },
+            tw(" mb-1"),
+          ]}
+        >
+          {title}
+        </Text>
+        <Text
+          style={[
+            { color: "#86A0B9", fontSize: width / 36, fontFamily: "light" },
+          ]}
+        >
+          {description}
+        </Text>
     </View>
   );
 }
diff --git a/src/screens/Activation/index.js b/src/screens/Activation/index.js
index 16f786a..bb947cb 100644
--- a/src/screens/Activation/index.js
+++ b/src/screens/Activation/index.js
@@ -16,7 +16,6 @@ import { connect } from "react-redux";
 import tw from "tailwind-rn";
 import Header from "../../components/Header";
 import Navbar from "../../components/Navbar";
-import Drawer from "../../components/Drawer";
 import CustomPressable from "../../components/Pressable";
 import Or from "../../components/Or";
 
@@ -35,12 +34,6 @@ function Activation({}) {
     message: null,
     file: null,
   });
-  const [position, setPosition] = useState("100%");
-
-  const setBoxPosition = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setPosition(position === "100%" ? "0%" : "100%");
-  };
 
   const onChange = (name, value) => {
     setFormData({ ...formData, [name]: value });
@@ -55,19 +48,17 @@ function Activation({}) {
     >
       <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={-142}>
         <Navbar
-          setBoxPosition={setBoxPosition}
           headerOptions={{
-            logo: true,
+            logo: false,
             menu: false,
-            hamburgerMenu: true,
+            hamburgerMenu: false,
             title: "",
             bookmark: false,
             qr: true,
-            back: false,
+            back: true,
             backgroundColor: "#E9F0F7",
           }}
         />
-        <Drawer setBoxPosition={setBoxPosition} position={position} />
         <ScrollView
           style={[
             tw("bg-white"),
diff --git a/src/screens/Contact/Box.js b/src/screens/Contact/Box.js
new file mode 100644
index 0000000..be3753d
--- /dev/null
+++ b/src/screens/Contact/Box.js
@@ -0,0 +1,58 @@
+import { View, Text, Image, TouchableOpacity } from "react-native";
+import React from "react";
+import tw from "tailwind-rn";
+import fontSize from "../../constants/fontSize";
+
+const Box = ({ info }) => {
+  return (
+    <TouchableOpacity
+      style={[
+        tw("flex flex-row-reverse py-4 px-3 rounded-md mt-4"),
+        {
+          backgroundColor: info.bg,
+          borderColor: info.borderColor,
+          borderWidth: 1,
+        },
+      ]}
+    >
+      <Image source={info.icon} style={{ width: 40, height: 40 }} />
+      <View style={tw("flex flex-col flex-1 mr-3")}>
+        <Text
+          style={{
+            fontFamily: "regular",
+            fontSize: fontSize.sm,
+            color: info.title.color,
+          }}
+        >
+          {info.title.text}
+        </Text>
+        <Text
+          style={[
+            tw("mt-1"),
+            {
+              fontFamily: "light",
+              fontSize: fontSize.xs,
+              color: info.description.color,
+            },
+          ]}
+        >
+          {info.description.text}
+        </Text>
+        <Text
+          style={[
+            tw("self-start mt-2"),
+            {
+              fontFamily: "light",
+              fontSize: fontSize.xs,
+              color: info?.link?.color,
+            },
+          ]}
+        >
+          {info?.link?.title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default Box;
diff --git a/src/screens/Contact/assets/address.png b/src/screens/Contact/assets/address.png
new file mode 100644
index 0000000..a132e33
Binary files /dev/null and b/src/screens/Contact/assets/address.png differ
diff --git a/src/screens/Contact/assets/call.png b/src/screens/Contact/assets/call.png
new file mode 100644
index 0000000..f9a31df
Binary files /dev/null and b/src/screens/Contact/assets/call.png differ
diff --git a/src/screens/Contact/assets/contact-bg.png b/src/screens/Contact/assets/contact-bg.png
new file mode 100644
index 0000000..cbf872e
Binary files /dev/null and b/src/screens/Contact/assets/contact-bg.png differ
diff --git a/src/screens/Contact/assets/online-support.png b/src/screens/Contact/assets/online-support.png
new file mode 100644
index 0000000..04195e3
Binary files /dev/null and b/src/screens/Contact/assets/online-support.png differ
diff --git a/src/screens/Contact/index.js b/src/screens/Contact/index.js
index b441d2e..2057f5d 100644
--- a/src/screens/Contact/index.js
+++ b/src/screens/Contact/index.js
@@ -1,13 +1,116 @@
-import React from 'react'
-import { View, Text } from 'react-native';
-import {connect} from 'react-redux';
+import React, { useState, useEffect } from "react";
+import {
+  View,
+  Dimensions,
+  ScrollView,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+} from "react-native";
+import { connect } from "react-redux";
+import { faq } from "../../redux/actions";
+import tw from "tailwind-rn";
 
-function Contact({}) {
+import Header from "../../components/Header";
+import Navbar from "../../components/Navbar";
+import Box from './Box';
+
+//assets
+import onlineSupportIcon from "./assets/online-support.png";
+import callIcon from "./assets/call.png";
+import addressIcon from "./assets/address.png";
+import bgContact from "./assets/contact-bg.png";
+
+const { width, height } = Dimensions.get("window");
+
+function Contact({ info }) {
   return (
-    <View>
-      <Text></Text>
-    </View>
-  )
+    <SafeAreaView
+      style={{
+        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
+        position: "relative",
+        backgroundColor: "white",
+      }}
+    >
+      <Navbar
+        headerOptions={{
+          logo: false,
+          menu: false,
+          hamburgerMenu: false,
+          title: "",
+          bookmark: false,
+          qr: true,
+          back: true,
+          backgroundColor: "#E9F0F7",
+        }}
+      />
+      <Header
+        background={bgContact}
+        title={"ارتباط با ما"}
+        description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
+      />
+      <ScrollView
+        style={[
+          tw("bg-white flex flex-col pb-20 px-4 mb-4"),
+          { width: width, height: height - height / 4.5 },
+        ]}
+      >
+        {Object.keys(info).map((item, index) => (
+          <Box info={info[item]} key={index} />
+        ))}
+      </ScrollView>
+    </SafeAreaView>
+  );
 }
 
-export default Contact;
+const mapStateToProps = (state) => ({});
+
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Contact);
+
+Contact.defaultProps = {
+  info: {
+    onlineSupport: {
+      icon: onlineSupportIcon,
+      title: { text: "پشتیبانی آنلاین", color: "#D3B702" },
+      description: {
+        text: "همکاران ما در قسمت فروش و پشتیبانی، پاسخگوی شما هستند هر سوالی در مورد کتاب‌های ما داشتید بپرسید",
+        color: "#766600",
+      },
+      link: {
+        title: "ارتباط با بخش پشتیبانی",
+        link: "/support",
+        color: "#766600",
+      },
+      bg: "#D3B70222",
+      borderColor: "#D3B70255",
+    },
+    call: {
+      icon: callIcon,
+      title: { text: "شماره تماس", color: "#06A02A" },
+      description: {
+        text: "در صورت هرگونه سوال شما می‌توانید در ساعات اداری 9 الی 17 با شماره 021۸۸۸۱۴۶۳۷ تماس حاصل فرمایید",
+        color: "#025816",
+      },
+      link: null,
+      bg: "#69FF5F22",
+      borderColor: "#69FF5F55",
+    },
+    address: {
+      icon: addressIcon,
+      title: { text: "نشانی", color: "#0EAD98" },
+      description: {
+        text: "نشانی دفتر مرکزی: تهران میدان فردوسی خیابان عباس موسوی پلاک 30",
+        color: "#066A5C",
+      },
+      link: {
+        title: "لیست نمایندگی‌های فروش",
+        link: "/sell",
+        color: "#0A7769",
+      },
+      bg: "#0A776922",
+      borderColor: "#0A776955",
+    },
+  },
+};
diff --git a/src/screens/Faq/index.js b/src/screens/Faq/index.js
index 018ffb1..d6ca68d 100644
--- a/src/screens/Faq/index.js
+++ b/src/screens/Faq/index.js
@@ -14,7 +14,6 @@ import { faq } from "../../redux/actions";
 import tw from "tailwind-rn";
 import Header from "../../components/Header";
 import Navbar from "../../components/Navbar";
-import Drawer from "../../components/Drawer";
 import Search from "../../components/Search";
 import Instance from "./components/Instance";
 import bgFaq from "./assets/bgFaq.png";
@@ -22,17 +21,10 @@ import bgFaq from "./assets/bgFaq.png";
 const width = Dimensions.get("window").width;
 
 function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
-  const [position, setPosition] = useState("100%");
-
   useEffect(() => {
     getFaq();
   }, []);
 
-  const setBoxPosition = () => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setPosition(position === "100%" ? "0%" : "100%");
-  };
-
   const onChange = (name, value) => {};
 
   return (
@@ -44,9 +36,8 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
       }}
     >
       <Navbar
-        setBoxPosition={setBoxPosition}
         headerOptions={{
-          logo: true,
+          logo: false,
           menu: false,
           hamburgerMenu: false,
           title: "",
@@ -56,7 +47,6 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
           backgroundColor: "#E9F0F7",
         }}
       />
-      <Drawer setBoxPosition={setBoxPosition} position={position} />
       <Header
         background={bgFaq}
         title={"پرسش‌های متداول"}
diff --git a/src/screens/Products/index.js b/src/screens/Products/index.js
index 9d1d79b..3cdcd8d 100644
--- a/src/screens/Products/index.js
+++ b/src/screens/Products/index.js
@@ -59,7 +59,7 @@ function Products({ grades, productTypes, books }) {
             defaultValue={"همه پایه"}
             value={grade}
             onChange={setGrade}
-            options={grades}
+            options={Object.values(grades)}
             width={"48%"}
           />
         </View>