diff --git a/projectSecondPart/components/userList/userList.jsx b/projectSecondPart/components/userList/userList.jsx
index 4eec82f24c7ee79f34581e23129f4ba0180e3958..ccacd646df03600f6c7923fcecd20a1082a39e25 100644
--- a/projectSecondPart/components/userList/userList.jsx
+++ b/projectSecondPart/components/userList/userList.jsx
@@ -4,10 +4,10 @@ import {
   List,
   ListItem,
   ListItemText,
-  Typography,
 }
 from '@material-ui/core';
 import './userList.css';
+import {Link} from "react-router-dom";
 
 /**
  * Define UserList, a React componment of CS142 project #5
@@ -15,33 +15,43 @@ import './userList.css';
 class UserList extends React.Component {
   constructor(props) {
     super(props);
+    console.log(window.cs142models.userListModel())
+  }
+
+  renderUsers() {
+    /*<ListItem>
+      <ListItemText primary="Item #1" />
+    </ListItem>
+    <Divider />
+    <ListItem>
+      <ListItemText primary="Item #2" />
+    </ListItem>
+    <Divider />*/
+
+    /*return window.cs142models.userListModel().map(element => (
+        <ListItem key={element._id}>
+          <ListItemText primary={element.first_name + " " + element.last_name}/>
+        </ListItem>
+    ))*/
+
+    let users = [];
+    window.cs142models.userListModel().forEach(element => {
+      users.push((
+        <ListItem key={element._id} button component={Link} to={"/users/" + element._id}>
+          <ListItemText primary={element.first_name + " " + element.last_name}/>
+        </ListItem>
+      ))
+      users.push(<Divider key={"Divider_" + element._id}/>)
+    })
+    return users
   }
 
   render() {
     return (
       <div>
-        <Typography variant="body1">
-          This is the user list, which takes up 3/12 of the window.
-          You might choose to use <a href="https://material-ui.com/demos/lists/">Lists</a> and <a href="https://material-ui.com/demos/dividers">Dividers</a> to
-          display your users like so:
-        </Typography>
         <List component="nav">
-          <ListItem>
-            <ListItemText primary="Item #1" />
-          </ListItem>
-          <Divider />
-          <ListItem>
-            <ListItemText primary="Item #2" />
-          </ListItem>
-          <Divider />
-          <ListItem>
-            <ListItemText primary="Item #3" />
-          </ListItem>
-          <Divider />
+          {this.renderUsers()}
         </List>
-        <Typography variant="body1">
-          The model comes in from window.cs142models.userListModel()
-        </Typography>
       </div>
     );
   }
diff --git a/projectSecondPart/photoShare.jsx b/projectSecondPart/photoShare.jsx
index 8c68959146e89a049ebff1b1e15d48ca8f7aac54..f0e1f87601c21996a7dfa70fb57dad3fd5b30753 100644
--- a/projectSecondPart/photoShare.jsx
+++ b/projectSecondPart/photoShare.jsx
@@ -36,17 +36,6 @@ class PhotoShare extends React.Component {
         <Grid item sm={9}>
           <Paper className="cs142-main-grid-item">
             <Switch>
-            <Route exact path="/"
-                render={() =>
-                  <Typography variant="body1">
-                  Welcome to your photosharing app! This <a href="https://material-ui.com/demos/paper/">Paper</a> component
-                  displays the main content of the application. The {"sm={9}"} prop in
-                  the <a href="https://material-ui.com/layout/grid/">Grid</a> item component makes it responsively
-                  display 9/12 of the window. The Switch component enables us to conditionally render different
-                  components to this part of the screen. You don&apos;t need to display anything here on the homepage,
-                  so you should delete this Route component once you get started.
-                  </Typography>}
-              />
               <Route path="/users/:userId"
                 render={ props => <UserDetail {...props} /> }
               />