diff --git a/App.js b/App.js
index fa84579..b0776eb 100644
--- a/App.js
+++ b/App.js
@@ -27,6 +27,7 @@ import RegisterUserScreen from './components/RegisterUserScreen';
 import LoginUserScreen from './components/LoginUserScreen.js';
 import SearchHouse from './components/SearchHouse.js';
 import HouseProfile from './components/HouseProfile.js';
+import UserProfile from './components/UserProfile.js';
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -92,6 +93,11 @@ const App = () => {
           component={HouseProfile}
           options={{headerShown: false}}
         />
+        <Stack.Screen
+          name="UserProfile"
+          component={UserProfile}
+          options={{headerShown: false}}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );
diff --git a/components/LoginUserScreen.js b/components/LoginUserScreen.js
index 271e84d..e631ab0 100644
--- a/components/LoginUserScreen.js
+++ b/components/LoginUserScreen.js
@@ -65,6 +65,7 @@ const LoginUserScreen = ({navigation}) => {
           setToken(response_data.token);
           var userobj = JSON.parse(response_data.user);
           setMessage('user ' + userobj.username + ' logged in');
+          navigation.navigate('UserProfile', {user: userobj});
         } else {
           setMessage(response_data.msg);
         }
diff --git a/components/UserProfile.js b/components/UserProfile.js
index 8bafe87..bbc93e0 100644
--- a/components/UserProfile.js
+++ b/components/UserProfile.js
@@ -55,12 +55,16 @@ const homes = [
     id: 5,
   },
 ];
-const UserProfile = ({navigation}) => {
-  const [search, setSearch] = React.useState('');;
-  const [loading, setLoading] = React.useState(false);;
-  const [searchData, setSearchData] = React.useState([]);;
-  const [tempSearchData, setTempSearchData] = React.useState([]);;
-  const [error, setError] = React.useState(null);;
+const UserProfile = props => {
+  const [search, setSearch] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [searchData, setSearchData] = React.useState([]);
+  const [tempSearchData, setTempSearchData] = React.useState([]);
+  const [userProfile, setUserProfile] = React.useState({});
+  const [error, setError] = React.useState(null);
+  useEffect(() => {
+    setUserProfile(props.route.params.user);
+  }, []);
   const renderHeader = () => {
     return (
       <SearchBar
@@ -98,13 +102,13 @@ const UserProfile = ({navigation}) => {
       <View style={styles.viewRoot}>
         <View style={styles.iconContainer}>
           <TouchableHighlight
-            onPress={() => navigation.goBack()}
+            onPress={() => props.navigation.goBack()}
             underlayColor="white"
             activeOpacity={0.5}>
             <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
           </TouchableHighlight>
           <TouchableHighlight
-            onPress={() => navigation.goBack()}
+            onPress={() => props.navigation.goBack()}
             underlayColor="white"
             activeOpacity={0.5}>
             <Icon
@@ -116,14 +120,21 @@ const UserProfile = ({navigation}) => {
           </TouchableHighlight>
         </View>
         <View style={styles.headingContainer}>
-          <Text style={styles.heading}>John Doe</Text>
+          <Text style={styles.heading}>
+            {userProfile.username ? userProfile.username : 'John Doe'}
+          </Text>
           <Text style={styles.subHeading}>Tenant</Text>
 
           <View style={{flexDirection: 'row', marginTop: 30}}>
             <Icon name="card-outline" type="ionicon" size={36} color="brown" />
             <Text style={[styles.pricingHeading]}>Basic Member</Text>
           </View>
-          <View style={{flexDirection: 'row', marginTop: 30,justifyContent: "space-evenly"}}>
+          <View
+            style={{
+              flexDirection: 'row',
+              marginTop: 30,
+              justifyContent: 'space-evenly',
+            }}>
             <View style={styles.twoColContainer}>
               <Text style={[styles.twoColHeading]}>Past Houses</Text>
               <Text style={[styles.twoColNumber]}>3</Text>
@@ -139,7 +150,7 @@ const UserProfile = ({navigation}) => {
           {/* <Card /> */}
 
           <Text style={styles.cardHeading}>Current House</Text>
-              <HouseCard info={homes[1]} />
+          <HouseCard info={homes[1]} />
         </View>
       </View>
     </>
@@ -176,8 +187,8 @@ const styles = StyleSheet.create({
     fontFamily: 'Ubuntu-Bold',
   },
   cardHeading: {
-		marginLeft:20,
-		marginTop:50,
+    marginLeft: 20,
+    marginTop: 50,
     color: '#1C254E',
     fontSize: 30,
     textAlign: 'left',
@@ -204,7 +215,7 @@ const styles = StyleSheet.create({
   twoColContainer: {
     flexDirection: 'column',
     alignItems: 'center',
-		marginLeft: -40,
+    marginLeft: -40,
   },
   twoColHeading: {
     color: '#1C254E',
@@ -226,7 +237,7 @@ const styles = StyleSheet.create({
     // justifyContent: 'center',
   },
   verticalLine: {
-		marginLeft: -40,
+    marginLeft: -40,
     height: '100%',
     width: 5,
     backgroundColor: '#206ba5',