diff --git a/front-end/src/components/App/index.jsx b/front-end/src/components/App/index.jsx
index 9f93afb..96fc5d9 100644
--- a/front-end/src/components/App/index.jsx
+++ b/front-end/src/components/App/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { BrowserRouter, withRouter, Switch, Route } from 'react-router-dom'
 
-import { Home, Register, Login, PrivateRoute, ChatRoom , Contributors } from '..'
+import { Home, Register, Login, PrivateRoute, ChatRoom , Contributors , UserProfile } from '..'
 import QuizMcq  from '../Quiz/mcq/quizMcq';
 
 import '../../styles/index.css'
@@ -13,6 +13,7 @@ const App = () => (
 			<Route exact path ="/contributors" component ={Contributors} />
             <Route exact path="/sign-in" component={Login} />
             <Route exact path="/sign-up" component={Register} />
+			<Route exact path="/userProfile" component={UserProfile} />
             <Route exact path="/quizmcq" component={QuizMcq} />
             <PrivateRoute exact path="/chat-room" component={ChatRoom} />
         </Switch>
diff --git a/front-end/src/components/UserProfile/BlogOrFavorite.jsx b/front-end/src/components/UserProfile/BlogOrFavorite.jsx
new file mode 100644
index 0000000..db7d337
--- /dev/null
+++ b/front-end/src/components/UserProfile/BlogOrFavorite.jsx
@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import './index.scss'
+import pinIcon from './assests/pin.png'
+import dummyImg from './assests/dummy_image.png'
+import heartImg from './assests/heartIcon.png'
+
+export class BlogOrFavorite extends Component {
+	render() {
+		return (
+			<React.Fragment>
+				<li className="fx-b30 dFlexRow blogItem">
+						<div className="fx-b100 dFlexRow">
+						<div className="blogPageIcon">
+							{this.props.view === "favorite" ? 
+							 <span><img src={heartImg}/></span>
+							: 
+							<span><img src={pinIcon} alt="pinBlog" />Pinned Blogs</span>
+						}
+		</div>
+							
+							<div className="dFlexColumn jContentFlexStart">
+								<div className="fx-b20 blogImage">
+									<img className="round-img" src={dummyImg} alt="dummy" />
+								</div>
+								<div className="fx-b80 dFlexRow blogContent">
+									<div className = "fx-b100">
+										<input className="blogInput" type="text" readOnly={this.props.view !== "blog"} placeholder="blog post 1" />
+									</div>
+									<div className = "fx-b100">
+										<textarea className="blogInput" rows="3" readOnly={this.props.view !== "blog"} type="text" placeholder="Brief Intro about the blog post"  />
+									</div>
+									<div className="fx-b100 blogBtns">
+										<button>Comment</button>
+										<button>Share Via</button>
+									</div>
+								</div>
+							</div>
+							</div>
+						</li>
+			</React.Fragment>
+		)
+	}
+}
+
+export default BlogOrFavorite
diff --git a/front-end/src/components/UserProfile/ProfileHeader.jsx b/front-end/src/components/UserProfile/ProfileHeader.jsx
new file mode 100644
index 0000000..dff3e2d
--- /dev/null
+++ b/front-end/src/components/UserProfile/ProfileHeader.jsx
@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import './index.scss'
+import dummyImg from './assests/dummy_image.png'
+import fbIcon from './assests/facebookIcon.png'
+import githubIcon from './assests/githubIcon.png'
+import twitterIcon from './assests/twitterIcon.png'
+import instagramIcon from './assests/InstagramIcon.png'
+export class ProfileHeader extends Component {
+	render() {
+		return (
+			<div className="dFlexRow headerContainer"> 
+				<div className="profileAvatarDiv">
+					<img className="profileAvatar round-img" src={dummyImg} alt="dummy" />
+				</div>
+				<div className="fx-b40 headerProfileDetailsContainer">
+					<h3>User Name</h3>
+					<h5>@profile</h5>
+					<p>Brief bio about the user </p>
+					</div>
+					<div className="fx-b40 socialLinksDiv">
+						<ul className="socialLinks">
+						<li>
+							<img src={githubIcon} alt="github-icon" title="github-icon" />
+							</li>
+							
+						<li>
+							<img src={twitterIcon} alt="twitter-icon" title="twitter-icon" />
+							</li>
+							
+						<li>
+							<img src={instagramIcon} alt="instagram-icon" title="instagram-icon" />
+							</li>
+							
+						<li >
+							<img src={fbIcon} alt="facebook-icon" title="facebook-icon"/>
+							</li>
+							</ul>
+							<button className="editProfileBtn">Edit Profile</button>
+						</div>
+						
+			</div>
+		)
+	}
+}
+
+export default ProfileHeader
diff --git a/front-end/src/components/UserProfile/assests/InstagramIcon.png b/front-end/src/components/UserProfile/assests/InstagramIcon.png
new file mode 100644
index 0000000..7bf095a
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/InstagramIcon.png differ
diff --git a/front-end/src/components/UserProfile/assests/dummy_image.png b/front-end/src/components/UserProfile/assests/dummy_image.png
new file mode 100644
index 0000000..cef3884
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/dummy_image.png differ
diff --git a/front-end/src/components/UserProfile/assests/facebookIcon.png b/front-end/src/components/UserProfile/assests/facebookIcon.png
new file mode 100644
index 0000000..4f68be7
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/facebookIcon.png differ
diff --git a/front-end/src/components/UserProfile/assests/githubIcon.png b/front-end/src/components/UserProfile/assests/githubIcon.png
new file mode 100644
index 0000000..93c6a54
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/githubIcon.png differ
diff --git a/front-end/src/components/UserProfile/assests/heartIcon.png b/front-end/src/components/UserProfile/assests/heartIcon.png
new file mode 100644
index 0000000..71a04bf
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/heartIcon.png differ
diff --git a/front-end/src/components/UserProfile/assests/pin.png b/front-end/src/components/UserProfile/assests/pin.png
new file mode 100644
index 0000000..47f75f8
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/pin.png differ
diff --git a/front-end/src/components/UserProfile/assests/twitterIcon.png b/front-end/src/components/UserProfile/assests/twitterIcon.png
new file mode 100644
index 0000000..53c2ed6
Binary files /dev/null and b/front-end/src/components/UserProfile/assests/twitterIcon.png differ
diff --git a/front-end/src/components/UserProfile/index.jsx b/front-end/src/components/UserProfile/index.jsx
new file mode 100644
index 0000000..13409d9
--- /dev/null
+++ b/front-end/src/components/UserProfile/index.jsx
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import ProfileHeader from './ProfileHeader'
+import BlogOrFavorite from './BlogOrFavorite'
+
+export class UserProfile extends Component {
+	state = {
+		view: "blog",
+		blogs: ["blog1", "blog2", "blog3"],
+
+	}
+	handleViewChange = (view) => {
+		this.setState({ view })
+	}
+	render() {
+		return (
+			<div>
+				<ProfileHeader />
+				<div className="mainDiv">
+					<ul className="profileNavbar">
+						<li className={this.state.view === "blog" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("blog")}>
+							Blogs
+						</li>
+						<li className={this.state.view === "favorite" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("favorite")}>
+							Favorite
+						</li>
+						<li className={this.state.view === "followers" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("followers")}>
+							Followers
+						</li>
+						<li className={this.state.view === "following" ? "nav-item active " : "nav-item"} onClick={() => this.handleViewChange("following")}>
+							Followings
+						</li>
+					</ul>
+					{this.state.view === "blog" || this.state.view === "favorite"
+						?
+						<ul className="contentContainer dFlexRow">
+							{this.state.view === "blog" ?
+								this.state.blogs.map((item, index) => (
+									<BlogOrFavorite key={index} view={this.state.view} />
+								))
+								:
+								''
+							}
+
+						</ul>
+						:
+						''
+					}
+				</div>
+			</div>
+		)
+	}
+}
+
+export default UserProfile
diff --git a/front-end/src/components/UserProfile/index.scss b/front-end/src/components/UserProfile/index.scss
new file mode 100644
index 0000000..2e29a70
--- /dev/null
+++ b/front-end/src/components/UserProfile/index.scss
@@ -0,0 +1,349 @@
+$grey-color: #545454;
+// Flex Classes
+.dFlexRow {
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	
+}
+.dFlexColumn {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	flex-direction: column;
+}
+.jContentFlexStart {
+	justify-content: flex-start;
+}
+.prelative {
+	position: relative;
+}
+.fx-b20 {
+	flex-basis: 20%;
+	max-width: 20%;
+}
+.fx-b27 {
+	flex-basis: 27%;
+	max-width: 27%;
+}
+.fx-b30 {
+	flex-basis: 30%;
+	max-width: 30%;
+}
+.fx-b35 {
+	flex-basis: 35%;
+	max-width: 35%;
+}
+.fx-b40 {
+	flex-basis: 40%;
+	max-width: 40%;
+}
+.fx-b50 {
+	align-self: flex-end;
+	flex-basis: 50%;
+	max-width: 50%;
+}
+.fx-b60 {
+	flex-basis: 60%;
+	max-width: 60%;
+}
+.fx-b65 {
+	flex-basis: 65%;
+	max-width: 65%;
+}
+.fx-b70 {
+	flex-basis: 70%;
+	max-width: 70%;
+}
+.fx-b80 {
+	flex-basis: 80%;
+	max-width: 80%;
+}
+.fx-b100 {
+	flex-basis: 100%;
+	max-width: 100%;
+}
+
+.pb-2{
+	padding-bottom: 1em !important;
+}
+.pt-2 {
+	padding-top: 1em !important;
+}
+
+.round-img{
+	border-radius: 100px;
+}
+// Flex Classes End
+
+// Header 
+.profileAvatar {
+	left:100%;
+	position: relative;
+	top:30px;
+	height: 150px;
+	width: 150px;
+	transform: translateX(-100%);
+}
+.headerContainer {
+	background-color: $grey-color;
+	padding: 2em 3em 0 3em;
+}
+textarea {
+	resize: none;
+}
+.headerProfileDetailsContainer {
+	padding-left: 1.5em;
+	position: relative;
+	top: 5em;
+	h3 {
+		color: #c7d0d8;
+	}
+	h5 {
+		color: #e7e7e7
+	}
+}
+.socialLinksDiv{
+	align-self: flex-end;
+	text-align: end;
+}
+
+ul.socialLinks {
+	list-style-type: none;
+	margin: 0;
+	display: inline-block;
+	li {
+	display: inline-block;	
+	width: 38px;
+	height: 38px;
+	margin: 2px 0.4em;
+	cursor: pointer;
+	}
+	li:hover {
+		transform: scale(1.05);
+	}
+	li:first-child {
+		margin-left: 0;
+	}
+	img {
+		height: 100%;
+		width: 100%;
+	}
+}
+.editProfileBtn {
+	background-color: #9a9a9a;
+	border: none;
+	padding: 10px;
+	color: #fff;
+	text-transform: uppercase;
+}
+
+// Main Div 
+.mainDiv {
+	margin-top: 3em;
+	padding: 20px 0;
+}
+.profileNavbar {
+	list-style-type: none;
+	color: #c7d0d8;
+	margin: 0;
+	padding: 0;
+	display: inline-block;
+	width: 100%;
+	font-size: 1.3em;
+	li.nav-item {
+		font-weight: 400;
+		padding: 10px;
+		margin: 0 2em;
+		border-bottom: 4px solid transparent;
+		display: inline-block;
+		cursor: pointer;
+	}
+	li.nav-item.active {
+		color: #000;
+		border-bottom: 4px solid black;
+	}
+}
+.contentContainer {
+	margin: 0;
+	padding: 1.5em 10px;
+	background-color: #a6a6a6;
+	list-style-type: none;
+}
+.blogItem,
+.suggestionItem {
+	padding: 10px;
+	& > div {
+		background-color: #c7d0d8;	
+		padding-left: 5px;
+		padding-right: 25px;
+	}
+}
+.blogPageIcon {
+	padding-top: 5px;
+	width: 100%;
+	text-align: right;
+	span {
+		padding-left: 32px;
+		position: relative;
+		color: $grey-color;
+		img {
+			position: absolute;
+			left: 0;
+			top: 0;
+			font-size: 1em;
+			width: 25px;
+			height: 25px;
+		}
+	}
+
+}
+.blogImage {
+	padding: 0 5px;
+	position: relative;
+	img {
+		object-fit: contain;
+		width: 100%;
+	}
+}
+.blogContent {
+	justify-content: flex-start;
+}
+.blogInput {
+	width: 100%;
+	padding: 10px;
+	background-color: #eceeef;
+	border: none;
+	margin: 5px 0;
+	&:focus {
+		outline: none;
+	}
+}
+.blogBtns {
+	justify-content: space-between;
+	display: flex;
+	button {
+		padding: 10px;
+		border: none;
+		font-weight: 300;
+		background-color: #eceeef;
+		color: #727272;
+		max-width: 50%;
+		text-transform: uppercase;
+		&:first-child {
+			margin-right: 2px;
+		}
+		&:last-child {
+			margin-left: 2px;
+		}
+	}
+}
+
+.outerFollowDiv {
+	padding-right: 2em;
+}
+.outerSuggestionDiv {
+	padding-left: 3em;
+}
+
+.followerInfo {
+	padding-left: 0.75em;
+	h4 {
+		margin-bottom: 2px;
+		color: $grey-color;
+	}
+	p {
+		font-size: 16px;
+		color: #737373;
+		margin-top: 1px;
+		margin-bottom: 5px;
+	}
+	.blogBtns {
+		button {
+			max-width: fit-content;
+		}
+	}
+}
+
+.suggestionOuter {
+	&>h4 {
+		padding: 0 20px;
+		color: $grey-color;
+	}
+	&>ul {
+		padding-top: 0;
+	}
+}
+
+@media screen and (max-width:"998px")
+{
+	.socialLinksDiv {
+		text-align: center;
+	}
+}
+@media screen and (max-width:"768px")
+{
+	.blogItem {
+		flex-basis: 50%;
+		max-width: 50%;
+	}
+	.headerProfileDetailsContainer {
+		flex-basis: 60%;
+		max-width: 60%;
+	}
+	.socialLinksDiv {
+		flex-basis: 100%;
+		max-width: 100%;
+		margin-top: 1.5em;
+	}
+	.suggestionItem {
+		&>div {
+			justify-content: center;
+		}
+		justify-content: center;
+		.blogImage,
+		.followerInfo {
+			flex-basis: 80%;
+			max-width: 80%;
+		}
+	}
+	.outerSuggestionDiv {
+		padding-left: 0;
+	}
+}
+
+@media screen and (max-width:"576px")
+{
+	.blogItem {
+		flex-basis: 100%;
+		max-width: 100%;
+	}
+	.profileAvatarDiv {
+		flex-basis: 100%;
+		max-width: 100%;
+		margin-bottom: 20px;
+	}
+	.profileAvatar {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.headerProfileDetailsContainer {
+		flex-basis: 50%;
+		max-width: 50%;
+		padding: 0;
+	}
+	.socialLinksDiv {
+		flex-basis:50%;
+		max-width: 50%;
+	}
+	.suggestionItem {
+		justify-content: center;
+		.blogImage,
+		.followerInfo {
+			flex-basis: 100%;
+			max-width: 100%;
+		}
+	}
+	
+}
\ No newline at end of file
diff --git a/front-end/src/components/index.js b/front-end/src/components/index.js
index 7d1833c..5c04d04 100644
--- a/front-end/src/components/index.js
+++ b/front-end/src/components/index.js
@@ -7,3 +7,4 @@ export { default as BlogPage } from './BlogPage'
 export { default as ChatRoom } from './ChatRoom'
 export { default as setAuthToken } from './Auth'
 export {default as Contributors } from './Contributors'
+export {default as UserProfile } from './UserProfile'