diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.css b/projectSecondPart/src/photo-share/components/top-bar/TopBar.css
index 7a9a179d34cbd7688dcd5f4a54c66b4c1d0d37b7..5f803005301972b99f85aba6ca00686eb7b0ed26 100644
--- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.css
+++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.css
@@ -1,4 +1,11 @@
-.prog2053-topbar-appBar {
-	height: 60;
-	justify-content: 'center';
+.prog2053-topbar-toolbar {
+	justify-content: space-between;
+}
+
+.prog2053-topbar-toolbar #left{
+	background-color: red;
+}
+
+.prog2053-topbar-toolbar #right{
+	background-color: orange;
 }
diff --git a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
index 76efac144e66bd6d3116041853a1228ce81c2bc3..28bc38e07c115e9c941a5ea4771983454a77f2e6 100644
--- a/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
+++ b/projectSecondPart/src/photo-share/components/top-bar/TopBar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-	AppBar, Toolbar, Typography
+	AppBar, Box, Toolbar, Typography
 } from '@material-ui/core';
 import './TopBar.css';
 
@@ -8,15 +8,24 @@ import './TopBar.css';
  * Define TopBar, a React componment of PROG2053 part #2
  */
 class TopBar extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {right: 'right', left: 'name'};
+	}
 	render() {
 		return (
-			<AppBar className="prog2053-topbar-appBar" position="absolute">
-				<Toolbar>
-					<Typography variant="h5" color="inherit">
-						This is the TopBar component
-					</Typography>
-				</Toolbar>
-			</AppBar>
+			<Box sx={{flexGrow: 1}}>
+				<AppBar position="fixed">
+					<Toolbar className="prog2053-topbar-toolbar">
+						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="left">
+							{this.state.left}
+						</Typography>
+						<Typography variant="h5" color="inherit" component="div" sx={{flexGrow: 1}} id="right">
+							{this.state.right}
+						</Typography>
+					</Toolbar>
+				</AppBar>
+			</Box>
 		);
 	}
 }