diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
index 1eae74013ac0b221b289f1ce731349a6204bbf2a..2b50cccd75da44f1b301601777d6d39bc862a787 100644
--- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
+++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
@@ -4,7 +4,7 @@ import {
 } from '@material-ui/core';
 import './TopBar.css';
 import {withRouter} from 'react-router';
-import PROG2053Models from '../../../model-data/PhotoApp';
+import fetchModel from '../../../lib/fetchModelData';
 
 /**
  * Define TopBar, a React componment of PROG2053 part #2
@@ -28,13 +28,19 @@ class TopBar extends React.Component {
 	updateHeader = (pathname) => {
 		const path = pathname.split('/');
 		if (path[2] && path[3]) {
-			const user = PROG2053Models.userModel(path[3]);
-			let newContext = '';
-			if (path[2] === 'photos') {
-				newContext += 'Photos of ';
-			}
-			newContext += `${user.first_name} ${user.last_name}`;
-			this.setState({headerContext: newContext});
+			fetchModel(`http://localhost:3001/user/${path[3]}`)
+				.then((value) => {
+					const user = value.data;
+
+					// Set context
+					let newContext = '';
+					if (path[2] === 'photos') {
+						newContext += 'Photos of ';
+					}
+					newContext += `${user.first_name} ${user.last_name}`;
+					this.setState({headerContext: newContext});
+				})
+				.catch((error) => console.log(error));
 		}
 	};
 
diff --git a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
index dc96fad08d9ca04a9556be15b9ae7b3892a8a7f0..a02227b52b19eb8e80188cee78ab5f4a5ce795c3 100644
--- a/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-detail/UserDetail.jsx
@@ -13,15 +13,25 @@ import fetchModel from '../../../lib/fetchModelData';
 class UserDetail extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)};
+		this.state = {userDetails: ''};
+	}
+
+	componentDidMount() {
+		this.fetchUserDetails();
 	}
 
 	componentDidUpdate(prevProps) {
 		if (this.props.match.params.userId !== prevProps.match.params.userId) {
-			this.setState({userDetails: fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)});
+			this.fetchUserDetails();
 		}
 	}
 
+	fetchUserDetails() {
+		fetchModel(`http://localhost:3001/user/${this.props.match.params.userId}`)
+			.then((value) => this.setState({userDetails: value.data}))
+			.catch((error) => console.log(error));
+	}
+
 	generateUserPreview = () => {
 		const user = this.state.userDetails;
 		return (
@@ -42,7 +52,8 @@ class UserDetail extends React.Component {
 		return (
 			<>
 				{this.generateUserPreview()}
-				<Button variant="outlined" component={Link} to={`/photo-share/photos/${this.props.match.params.userId}`}>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-list/UserList.jsx b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
index e73759c239bba4341543a7f844c0613e519128ba..c79acbd4b2972447f928db75200d92d70447bd0a 100644
--- a/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-list/UserList.jsx
@@ -6,8 +6,8 @@ import {
 	ListItemText
 } from '@material-ui/core';
 import './UserList.css';
-import PROG2053Models from '../../../model-data/PhotoApp';
 import {Link} from 'react-router-dom';
+import fetchModel from '../../../lib/fetchModelData';
 
 /**
  * Define UserList, a React componment of PROG2053 part #2
@@ -15,7 +15,15 @@ import {Link} from 'react-router-dom';
 class UserList extends React.Component {
 	constructor(props) {
 		super(props);
-		this.state = {userModel: PROG2053Models.userListModel()};
+		this.state = {userModel: []};
+	}
+
+	componentDidMount() {
+		fetchModel('http://localhost:3001/user/list')
+			.then((value) => {
+				this.setState({userModel: value.data});
+			})
+			.catch((error) => console.log(error));
 	}
 
 	displayUsers = () => {
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
index 6e41697a78f7db106af88249f7cde15ff2082c8d..046ea31bef3edf6add8fbce0a98b0eec25e3eca9 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
@@ -4,6 +4,7 @@ import PROG2053Models from '../../../model-data/PhotoApp';
 import {withRouter} from 'react-router';
 import * as path from 'path';
 import {Link} from 'react-router-dom';
+import fetchModel from '../../../lib/fetchModelData';
 
 
 /**
@@ -15,12 +16,22 @@ class UserPhotos extends React.Component {
 		this.state = {userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)};
 	}
 
+	componentDidMount() {
+		this.fetchUserPhotos();
+	}
+
 	componentDidUpdate(prevProps) {
 		if (this.props.match.params.userId !== prevProps.match.params.userId) {
-			this.setState({userPhotos: PROG2053Models.photoOfUserModel(this.props.match.params.userId)});
+			this.fetchUserPhotos();
 		}
 	}
 
+	fetchUserPhotos() {
+		fetchModel(`http://localhost:3001/photosOfUser/${this.props.match.params.userId}`)
+			.then((value) => this.setState({userPhotos: value.data}))
+			.catch((error) => console.log(error));
+	}
+
 	getAuthor = (user) => {
 		if (user) {
 			return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;