diff --git a/public/img/default-user-image.png b/public/img/default-user-image.png
new file mode 100644
index 0000000..37378a8
Binary files /dev/null and b/public/img/default-user-image.png differ
diff --git a/src/App.js b/src/App.js
index 3e11063..60824f5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { About, Tasks, Navbar } from './components'
+import { About, Tasks, Profile, Navbar } from './components'
 
 const defaultState = { user: {}, loading: true, tasks: [], search: '', newTask: '' }
 
@@ -65,6 +65,9 @@ class App extends React.Component {
   renderError() {
     return <div>Something went wrong. Please try again.</div>
   }
+  renderProfile() {
+    return <Profile {...this.state} />
+  }
   renderAbout() {
     return <About {...this.state} />
   }
@@ -78,9 +81,10 @@ class App extends React.Component {
     const filtered = this.state.tasks.filter(task => task.completed !== true && this.state.search === task.desc.slice(0, this.state.search.length))
 
     const renderComponent = () => this.state.loading ? this.renderLoading()
-	: this.state.component === 'tasks' ? this.renderTasks(filtered, completed)
-	: this.state.component === 'about' ? this.renderAbout()
-        : this.renderError()
+       : this.state.component === 'tasks' ? this.renderTasks(filtered, completed)
+       : this.state.component === 'about' ? this.renderAbout()
+       : this.state.component === 'profile' ? this.renderProfile()
+       : this.renderError()
 
 	return (<div>
 	<Navbar handleChange={this.handleChange} navigate={this.navigate} {...this.state} />
diff --git a/src/components/index.js b/src/components/index.js
index 2650dcc..8bb72ab 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -4,5 +4,6 @@
 export { default as Navbar } from './navbar'
 export { default as About } from './about'
 export { default as Tasks } from './tasks'
+export { default as Profile } from './profile'
 // export {default as CreateASign} from ./create-a-sign.js
 // etc
diff --git a/src/components/navbar.js b/src/components/navbar.js
index cacbfd5..4b54fb1 100644
--- a/src/components/navbar.js
+++ b/src/components/navbar.js
@@ -12,7 +12,7 @@ function Navbar(props) {
 
 	  <div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : 'disable'}`} onClick={() => props.navigate("about") }>About</div>
 
-          <div className="ml-auto">
+            <div className="ml-auto>" onClick={() => props.navigate("profile") }>
             <img className="rounded-circle mr-1" alt={props.user.name}
               width="16px" height="16px" src="/img/default-user-image.png" />
 	    {`Hello, ${props.user.name}!`}
diff --git a/src/components/profile.js b/src/components/profile.js
new file mode 100644
index 0000000..76566c0
--- /dev/null
+++ b/src/components/profile.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Profile(props) {
+    return (
+	<div>You are { props.user.name }.</div>
+    )
+}
+
+export default Profile