diff --git a/projectSecondPart/components/userDetail/userDetail.jsx b/projectSecondPart/components/userDetail/userDetail.jsx
index d7c252ae427c5859d4795910a23566aeaa32be99..6002f79723e3d1c5f14550dd2c12f7385deb5d17 100644
--- a/projectSecondPart/components/userDetail/userDetail.jsx
+++ b/projectSecondPart/components/userDetail/userDetail.jsx
@@ -14,26 +14,30 @@ class UserDetail extends React.Component {
   }
 
   generateUserPreview() {
-    let user = window.cs142models.userListModel().find(e => e._id === this.props.match.params.userId)
+    let user = window.cs142models.userModel(this.props.match.params.userId)
     console.log(user)
     return (
-      <Typography variant="body1">
-        <h2>{user.first_name} {user.last_name}</h2>
-        <p>
-          Occupation: {user.occupation} <br />
-          From: {user.location} <br />
+      <div id="divUserDetail">
+        <Typography variant="h3">
+          {user.first_name} {user.last_name}
+        </Typography>
+        <Typography variant="body1">
+          Occupation: {user.occupation} <br/>
+          From: {user.location} <br/>
           Description: {user.description}
-        </p>
-      </Typography>
+        </Typography>
+      </div>
     )
   }
 
 
   render() {
     return (
-      <div id="divUserDetail">
+      <div>
         {this.generateUserPreview()}
-        <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link>
+        <Typography variant="button" display="block" gutterBottom>
+          <Link to={"/photos/" + this.props.match.params.userId}>See photos!</Link>
+        </Typography>
       </div>
     );
   }
diff --git a/projectSecondPart/components/userList/userList.jsx b/projectSecondPart/components/userList/userList.jsx
index 79c30973668fa2238c820c2ab671769653fcbfde..195d74d731404f44cdc6a0ce07d6f7ecc2ea21ac 100644
--- a/projectSecondPart/components/userList/userList.jsx
+++ b/projectSecondPart/components/userList/userList.jsx
@@ -5,7 +5,7 @@ import {
   ListItem,
   ListItemText,
 }
-from '@material-ui/core';
+  from '@material-ui/core';
 import './userList.css';
 import {Link} from "react-router-dom";
 
diff --git a/projectSecondPart/components/userPhotos/userPhotos.jsx b/projectSecondPart/components/userPhotos/userPhotos.jsx
index 181e0617c1b86e4440e9085dc43090761b2c92d2..a8cf1723953eac02e678b595b73690ca5c666af2 100644
--- a/projectSecondPart/components/userPhotos/userPhotos.jsx
+++ b/projectSecondPart/components/userPhotos/userPhotos.jsx
@@ -1,32 +1,53 @@
 import React from 'react';
 import {
-  Typography
+  Box,
+  Grid, Paper, styled
 } from '@material-ui/core';
 import './userPhotos.css';
+import path from "path";
 
 
+const Item = styled(Paper)(({theme}) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(2),
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+}));
+
 /**
  * Define UserPhotos, a React componment of CS142 project #5
  */
 class UserPhotos extends React.Component {
   constructor(props) {
     super(props);
-    console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
+    //console.log(window.cs142models.photoOfUserModel(this.props.match.params.userId))
   }
 
   render() {
-    return (
-      <Typography variant="body1">
-      This should be the UserPhotos view of the PhotoShare app. Since
-      it is invoked from React Router the params from the route will be
-      in property match. So this should show details of user:
-      {this.props.match.params.userId}. You can fetch the model for the user from
-      window.cs142models.photoOfUserModel(userId):
-        <Typography variant="caption">
-          {JSON.stringify(window.cs142models.photoOfUserModel(this.props.match.params.userId))}
-        </Typography>
-      </Typography>
+    /*How the render should look like:
+    Display all photos in a gid.
+    For each gridelement, display
+     - Photo
+     - Creation time
+     - Comments
+       - Date when comment was created
+       - name of the user who created the comment (should be a link to their user page)
+       - Text of the comment
+    */
 
+
+    return (
+      //Source: https://mui.com/components/grid/
+      // Would like to expand the grid that is already there!
+      <Box sx={{flexGrow: 1}}>
+        <Grid container spacing={2} direction="row" alignItems="flex-start">
+          {window.cs142models.photoOfUserModel(this.props.match.params.userId).map(e => (
+            <Grid item key={e._id}>
+              <Item><img src={path.join(__dirname, 'images', e.file_name)} alt={e.file_name}/></Item>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
     );
   }
 }
diff --git a/projectSecondPart/photoShare.jsx b/projectSecondPart/photoShare.jsx
index 9c010b41c0109674fe438840e6fb755f4969cced..5329960a686b6e07dfea5df6728142056f1791a4 100644
--- a/projectSecondPart/photoShare.jsx
+++ b/projectSecondPart/photoShare.jsx
@@ -22,39 +22,39 @@ class PhotoShare extends React.Component {
   render() {
     return (
       <HashRouter>
-      <div>
-      <Grid container spacing={8}>
-        <Grid item xs={12}>
-          <TopBar/>
-        </Grid>
-        <div className="cs142-main-topbar-buffer"/>
-        <Grid item sm={3}>
-          <Paper  className="cs142-main-grid-item">
-            <UserList />
-          </Paper>
-        </Grid>
-        <Grid item sm={9}>
-          <Paper className="cs142-main-grid-item">
-            <Switch>
-              <Route path="/users/:userId"
-                render={ props => <UserDetail {...props} /> }
-              />
-              <Route path="/photos/:userId"
-                render ={ props => <UserPhotos {...props} /> }
-              />
-              <Route path="/users" component={UserList}  />
-            </Switch>
-          </Paper>
-        </Grid>
-      </Grid>
-      </div>
-    </HashRouter>
+        <div>
+          <Grid container spacing={8}>
+            <Grid item xs={12}>
+              <TopBar/>
+            </Grid>
+            <div className="cs142-main-topbar-buffer"/>
+            <Grid item sm={3}>
+              <Paper className="cs142-main-grid-item">
+                <UserList/>
+              </Paper>
+            </Grid>
+            <Grid item sm={9}>
+              <Paper className="cs142-main-grid-item">
+                <Switch>
+                  <Route path="/users/:userId"
+                         render={props => <UserDetail {...props} />}
+                  />
+                  <Route path="/photos/:userId"
+                         render={props => <UserPhotos {...props} />}
+                  />
+                  <Route path="/users" component={UserList}/>
+                </Switch>
+              </Paper>
+            </Grid>
+          </Grid>
+        </div>
+      </HashRouter>
     );
   }
 }
 
 
 ReactDOM.render(
-  <PhotoShare />,
+  <PhotoShare/>,
   document.getElementById('photoshareapp'),
 );