diff --git a/src/components/BottomTabs/ActivityScreen.tsx b/src/components/BottomTabs/ActivityScreen.tsx
index c558f1b..19a40b2 100644
--- a/src/components/BottomTabs/ActivityScreen.tsx
+++ b/src/components/BottomTabs/ActivityScreen.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -15,9 +16,11 @@ export default class ActivityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Activity Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Activity Welcome
+        </Button>
       </View>
     );
   }
diff --git a/src/components/BottomTabs/ChatScreen.tsx b/src/components/BottomTabs/ChatScreen.tsx
index 65cec77..7174542 100644
--- a/src/components/BottomTabs/ChatScreen.tsx
+++ b/src/components/BottomTabs/ChatScreen.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
     navigation: any;
@@ -15,9 +16,11 @@ export default class ChatScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Chat Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Chats Welcome
+        </Button>
       </View>
     );
   }
diff --git a/src/components/BottomTabs/CommunityScreen.tsx b/src/components/BottomTabs/CommunityScreen.tsx
index 66569d2..1c0df1f 100644
--- a/src/components/BottomTabs/CommunityScreen.tsx
+++ b/src/components/BottomTabs/CommunityScreen.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text } from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
     navigation: any;
@@ -15,9 +16,11 @@ export default class CommunityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Back to Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Community Welcome
+        </Button>
       </View>
     );
   }
diff --git a/src/components/BottomTabs/LectureScreen.tsx b/src/components/BottomTabs/LectureScreen.tsx
index 6fb31a9..417d60d 100644
--- a/src/components/BottomTabs/LectureScreen.tsx
+++ b/src/components/BottomTabs/LectureScreen.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { StyleSheet, View, Text, Button } from "react-native";
+import { StyleSheet, View, Text} from "react-native";
 import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -15,9 +16,11 @@ export default class ActivityScreen extends React.Component<AppProps> {
     return (
       <View style={styles.container}>
         <Button
-          title="Lecture Welcome"
+          mode="contained"
           onPress={() => this.props.navigation.navigate('Welcome')}
-        />
+        >
+          Lecture Welcome
+        </Button>
       </View>
     );
   }
diff --git a/src/components/DrawerScreens/AboutScreen.tsx b/src/components/DrawerScreens/AboutScreen.tsx
new file mode 100644
index 0000000..207b052
--- /dev/null
+++ b/src/components/DrawerScreens/AboutScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class About extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Abouts",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});
\ No newline at end of file
diff --git a/src/components/DrawerScreens/ProfileScreen.tsx b/src/components/DrawerScreens/ProfileScreen.tsx
new file mode 100644
index 0000000..b0dd6b9
--- /dev/null
+++ b/src/components/DrawerScreens/ProfileScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class ProfileScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Profile",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});
\ No newline at end of file
diff --git a/src/components/DrawerScreens/ProgressScreen.tsx b/src/components/DrawerScreens/ProgressScreen.tsx
new file mode 100644
index 0000000..ab3bc2c
--- /dev/null
+++ b/src/components/DrawerScreens/ProgressScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class ProgressScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Progress",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});
\ No newline at end of file
diff --git a/src/components/DrawerScreens/SupportScreen.tsx b/src/components/DrawerScreens/SupportScreen.tsx
new file mode 100644
index 0000000..09abb4d
--- /dev/null
+++ b/src/components/DrawerScreens/SupportScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class SupportScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Support",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});
\ No newline at end of file
diff --git a/src/components/DrawerScreens/UserSettingScreen.tsx b/src/components/DrawerScreens/UserSettingScreen.tsx
new file mode 100644
index 0000000..5f8f453
--- /dev/null
+++ b/src/components/DrawerScreens/UserSettingScreen.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import NavStyles from '../../styles/NavStyles';
+import { Button } from "react-native-paper";
+
+interface AppProps {
+  navigation: any;
+}
+
+export default class UserSettingScreen extends React.Component<AppProps> {
+  static navigationOptions = {
+    title: "Settings",
+    ...NavStyles
+  };
+  render() {
+    return (
+      <View style={styles.container}>
+        <Button
+          mode="contained"
+          onPress={() => this.props.navigation.navigate('Welcome')}
+        >
+          back to Welcome
+        </Button>
+      </View>
+    );
+  }
+}
+
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    backgroundColor: "#263992",
+    justifyContent: "center",
+    paddingTop: 25,
+  },
+});
\ No newline at end of file
diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
index 6e042b7..18a8cd6 100644
--- a/src/components/Welcome.tsx
+++ b/src/components/Welcome.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { StyleSheet, View, ImageBackground, Image, Text } from "react-native";
+import { StyleSheet, View, ImageBackground, Image } from "react-native";
 import NavStyles from '../styles/NavStyles';
-import Button from "react-native-button";
+import { Button, Text } from "react-native-paper";
 
 interface AppProps {
   navigation: any;
@@ -33,15 +33,19 @@ export default class Welcome extends React.Component<AppProps> {
           <View style={styles.container}>
             <Button
               onPress={() => this.props.navigation.navigate('LoginScreen')}
-              style={[styles.button,{backgroundColor: "#ff9900", color: "white"}]}
+              style={[styles.button,{backgroundColor: "#ff9900"}]}
             >
-              Already Have Account!
+              <Text style={{color: "white"}}>
+                Already Have Account!
+              </Text>
             </Button>
             <Button
               onPress={() => this.props.navigation.navigate('RegisterScreen')}
-              style={[styles.button,{backgroundColor: "white", color:"#263992"}]}
+              style={[styles.button,{backgroundColor: "white"}]}
             >
-              Need New Account?
+              <Text style={{color:"#263992"}}>
+                Need New Account?
+              </Text>
             </Button>
             <Text
               style={{marginTop:10, color:"cyan", fontFamily:"sans-serif",}}