diff --git a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
index 2333b2a77c0309d7e0f47bedd0c8ae94a4db9084..90db280342528bf538c1a42251a0625ec967614c 100644
--- a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import {
 	Button,
-	Link,
 	Typography
 } from '@material-ui/core';
-import {Redirect, withRouter} from 'react-router-dom';
+import {Link, withRouter} from 'react-router-dom';
 import './UserDetail.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 
@@ -34,7 +33,7 @@ class UserDetail extends React.Component {
 		return (
 			<>
 				{this.generateUserPreview()}
-				<Button variant="outlined" >See Photos!</Button>
+				<Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>See Photos!</Button>
 			</>
 		);
 	}
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cdf8ba6a97c4a7b58fe65415197a625dd4bb0993 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
@@ -0,0 +1,33 @@
+#divImageList {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: flex-start;
+    justify-content: space-between;
+    row-gap: 15px;
+    /*background-color: green;*/
+}
+
+#divImageList > .divImageItem {
+    width: 49%;
+    height: auto;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    /*background-color: blue; */
+}
+
+#divImageList > .divImageItem > .divImage {
+    max-height: 300px;
+}
+
+#divImageList > .divImageItem > .divImage img {
+    display: block;
+    max-height: 100%;
+    max-width: 100%;
+    height: auto;
+    width: auto;
+}
+
+#divImageList > .divImageItem > .divPhotoInfo {
+    margin-top: 5px;
+}
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
index 1dd464d0d7c920997c80a6443ddbb8d9f89f0dcd..95f202598c50f4196344a0b42a34ff49b57dc197 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
@@ -1,28 +1,59 @@
 import React from 'react';
-import {
-	Typography
-} from '@material-ui/core';
 import './UserPhotos.css';
 import PROG2053Models from '../../../model-data/PhotoApp';
 import {withRouter} from 'react-router';
+import * as path from 'path';
+import {Link} from 'react-router-dom';
 
 
 /**
  * Define UserPhotos, a React componment of PROG2053 part #2
  */
 class UserPhotos extends React.Component {
+	getAuthor = (user) => {
+		if (user) {
+			return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
+		}
+		return '';
+	};
+
+	generateComments = (image) => {
+		//console.log(image.comments);
+		if (image.comments) {
+			return (
+				<>
+					{image.comments.map((comment) => {
+						return (
+							<div key={comment._id}>
+								{comment.comment} <br/>
+								Created on {comment.date_time} by {this.getAuthor(comment.user)}<br/><br/>
+							</div>
+						);
+					})}
+				</>
+			);
+		}
+		return <>No Comments!</>;
+	};
+
 	render() {
+		//PROG2053Models.photoOfUserModel(this.props.match.params.userId)
 		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
-				PROG2053Models.photoOfUserModel(userId):
-				<Typography variant="caption">
-					{JSON.stringify(PROG2053Models.photoOfUserModel(this.props.match.params.userId))}
-				</Typography>
-			</Typography>
+			<div id="divImageList">
+				{PROG2053Models.photoOfUserModel(this.props.match.params.userId).map((image) => (
+					// eslint-disable-next-line react/jsx-key
+					<div className="divImageItem" key={image._id}>
+						<div className="divImage">
+							<img src={path.join(__dirname, 'images', image.file_name)}/>
+						</div>
+						<div className="divPhotoInfo">
+							<span>Creation date: {image.date_time}</span> <br/>
+							<span>Comments: </span><br/>
+							{this.generateComments(image)}
+						</div>
+					</div>
+				))}
+			</div>
 		);
 	}
 }