diff --git a/mobile/src/pages/App.js b/mobile/src/pages/App.js
index bb31260c..8865ba71 100644
--- a/mobile/src/pages/App.js
+++ b/mobile/src/pages/App.js
@@ -19,6 +19,9 @@ import Community from './Community';
 import Post from './Post';
 import CreatePost from './CreatePost';
 import StockDetails from './StockDetails';
+import Portfolio from './Portfolio';
+import PortfolioDetails from './PortfolioDetails';
+import CreatePortfolio from './CreatePortfolio';
 
 import { AuthProvider, useAuth } from './context/AuthContext';
 
@@ -89,6 +92,31 @@ const MarketsStack = () => (
   </Stack.Navigator>
 );
 
+const PortfolioStack = () => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="Markets1"
+      component={Portfolio}
+      options={{ header: ({ navigation }) => <CustomHeader navigation={navigation} /> }}
+    />
+    <Stack.Screen
+      name="StockDetails"
+      component={StockDetails}
+      options={{ headerShown: true, title: 'Stock Details' }}
+    />
+    <Stack.Screen     
+      name="PortfolioDetails"
+      component={PortfolioDetails}
+      options={{ headerShown: true, title: 'Portfolio Details' }}
+    />
+    <Stack.Screen     
+      name="CreatePortfolio"
+      component={CreatePortfolio}
+      options={{ headerShown: true, title: 'Create Portfolio' }}
+    />
+  </Stack.Navigator>
+);
+
 const DrawerNavigator = () => {
   const { username, userId } = useAuth();
 
@@ -102,7 +130,7 @@ const DrawerNavigator = () => {
         }}
           
         >
-          <Drawer.Screen
+            <Drawer.Screen
               name="Community"
               component={PostStack}
               options={{ headerShown: false }}   
@@ -135,8 +163,21 @@ const DrawerNavigator = () => {
             <Drawer.Screen
               name="News"
               component={News}
-               
             />
+            { userId  ? (
+              <Drawer.Screen 
+                name="Portfolio" 
+                component={PortfolioStack}
+                options={{ headerShown: false }}
+                
+              />
+              ) : (
+              <Drawer.Screen 
+                name="Portfolio" 
+                component={LoginStack} 
+                options={{ headerShown: false }}   
+              />
+            )}
             
           </Drawer.Navigator>
       );
@@ -158,7 +199,7 @@ const App = () => {
 const styles = StyleSheet.create({
   customHeader: {
     height: 60,
-    backgroundColor: '#0077B6',
+    backgroundColor: '#007BFF',
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',