diff --git a/components/DrawerItem.js b/components/DrawerItem.js
index da36d78..9a454d3 100644
--- a/components/DrawerItem.js
+++ b/components/DrawerItem.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, TouchableOpacity } from "react-native";
 import { Block, Text, theme } from "galio-framework";
 
 import Icon from "./Icon";
@@ -73,20 +73,31 @@ class DrawerItem extends React.Component {
     ];
 
     return (
-      <Block flex row style={containerStyles}>
-        <Block middle flex={0.1} style={{ marginRight: 5 }}>
-          {this.renderIcon()}
+      <TouchableOpacity
+        style={{ height: 60 }}
+        onPress={() =>
+          title == "Getting Started"
+            ? Linking.openURL(
+                "https://demos.creative-tim.com/argon-pro-react-native/docs/"
+              ).catch(err => console.error("An error occurred", err))
+            : navigation.navigate(title)
+        }
+      >
+        <Block flex row style={containerStyles}>
+          <Block middle flex={0.1} style={{ marginRight: 5 }}>
+            {this.renderIcon()}
+          </Block>
+          <Block row center flex={0.9}>
+            <Text
+              size={15}
+              bold={focused ? true : false}
+              color={focused ? "white" : "rgba(0,0,0,0.5)"}
+            >
+              {title}
+            </Text>
+          </Block>
         </Block>
-        <Block row center flex={0.9}>
-          <Text
-            size={15}
-            bold={focused ? true : false}
-            color={focused ? "white" : "rgba(0,0,0,0.5)"}
-          >
-            {title}
-          </Text>
-        </Block>
-      </Block>
+      </TouchableOpacity>
     );
   }
 }
diff --git a/navigation/Screens.js b/navigation/Screens.js
index 01306f1..c3e8088 100644
--- a/navigation/Screens.js
+++ b/navigation/Screens.js
@@ -40,6 +40,23 @@ function ElementsStack(props) {
           ),
           cardStyle: { backgroundColor: "#F8F9FE" }
         }}
+      />
+            <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true
+        }}
       />
     </Stack.Navigator>
   );
@@ -57,6 +74,23 @@ function ArticlesStack(props) {
           ),
           cardStyle: { backgroundColor: "#F8F9FE" }
         }}
+      />
+            <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true
+        }}
       />
     </Stack.Navigator>
   );
@@ -81,6 +115,23 @@ function ProfileStack(props) {
           cardStyle: { backgroundColor: "#FFFFFF" },
           headerTransparent: true
         }}
+      />
+            <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true
+        }}
       />
     </Stack.Navigator>
   );