diff --git a/consumerWebsite/public/css/profile.css b/consumerWebsite/public/css/profile.css
new file mode 100644
index 0000000..18eaded
--- /dev/null
+++ b/consumerWebsite/public/css/profile.css
@@ -0,0 +1,100 @@
+.btn-delete {
+    background-color: red;
+    color: white;
+}
+
+.ui-w-80 {
+    width: 80px !important;
+    height: auto;
+}
+
+.btn-default {
+    border-color: rgba(24,28,33,0.1);
+    background: rgba(0,0,0,0);
+    color: #4E5155;
+}
+
+label.btn {
+    margin-bottom: 0;
+}
+
+.btn-outline-primary {
+    border-color: #26B4FF;
+    background: transparent;
+    color: #26B4FF;
+}
+
+.btn {
+    cursor: pointer;
+}
+
+.text-light {
+    color: #babbbc !important;
+}
+
+.btn-facebook {
+    border-color: rgba(0,0,0,0);
+    background: #3B5998;
+    color: #fff;
+}
+
+.btn-instagram {
+    border-color: rgba(0,0,0,0);
+    background: #000;
+    color: #fff;
+}
+
+.card {
+    background-clip: padding-box;
+    box-shadow: 0 1px 4px rgba(24,28,33,0.012);
+}
+
+.row-bordered {
+    overflow: hidden;
+}
+
+.account-settings-fileinput {
+    position: absolute;
+    visibility: hidden;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+}
+.account-settings-links .list-group-item.active {
+    font-weight: bold !important;
+}
+html:not(.dark-style) .account-settings-links .list-group-item.active {
+    background: transparent !important;
+}
+.account-settings-multiselect ~ .select2-container {
+    width: 100% !important;
+}
+.light-style .account-settings-links .list-group-item {
+    padding: 0.85rem 1.5rem;
+    border-color: rgba(24, 28, 33, 0.03) !important;
+}
+.light-style .account-settings-links .list-group-item.active {
+    color: #4e5155 !important;
+}
+.material-style .account-settings-links .list-group-item {
+    padding: 0.85rem 1.5rem;
+    border-color: rgba(24, 28, 33, 0.03) !important;
+}
+.material-style .account-settings-links .list-group-item.active {
+    color: #4e5155 !important;
+}
+.dark-style .account-settings-links .list-group-item {
+    padding: 0.85rem 1.5rem;
+    border-color: rgba(255, 255, 255, 0.03) !important;
+}
+.dark-style .account-settings-links .list-group-item.active {
+    color: #fff !important;
+}
+.light-style .account-settings-links .list-group-item.active {
+    color: #4E5155 !important;
+}
+.light-style .account-settings-links .list-group-item {
+    padding: 0.85rem 1.5rem;
+    border-color: rgba(24,28,33,0.03) !important;
+}
+
diff --git a/consumerWebsite/routes/render.js b/consumerWebsite/routes/render.js
index 53c5cc2..109ff51 100644
--- a/consumerWebsite/routes/render.js
+++ b/consumerWebsite/routes/render.js
@@ -66,6 +66,7 @@ router.get("/profile", function (req, res, next) {
 	res.render("profile");
 });
 
+
 //forgot password page
 router.get("/forgotPassword", function (req, res, next) {
 	res.render("forgotPassword");
diff --git a/consumerWebsite/views/profile.ejs b/consumerWebsite/views/profile.ejs
index 03f9351..c779825 100644
--- a/consumerWebsite/views/profile.ejs
+++ b/consumerWebsite/views/profile.ejs
@@ -1,64 +1,115 @@
 <%- include('top') %>
-<script type="text/javascript">
-	// Require login to see this page.
-	app.auth.forceLogin()
-</script>
+    <script type="text/javascript">
+        // Require login to see this page.
+        app.auth.forceLogin()
+    </script>
+    <link href="css/profile.css" rel="stylesheet" />
 
-	<div class="full-title">
-		<div class="container">
-			<h1 class="mt-4 mb-3">Profile
-			</h1>
-		</div>
-	</div>
+    <div class="full-title">
+        <div class="container">
+            <h1 class="mt-4 mb-3">Profile
+            </h1>
+        </div>
+    </div>
 
-	<br>
-	<br>
+    <br>
+    <br>
+    <div class="container light-style flex-grow-1 container-p-y">
 
-	<div class="centered-content">
-		<div class="container">
-			<div class="row">
-				<div class="col-md-3 border-right">
-					<div class="d-flex flex-column align-items-center text-center p-3 py-5"><img
-							class="rounded-circle mt-5" width="150px"
-							src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
-					</div>
-				</div>
-				<div class="col-md-5 border-right">
-					<div class="p-3 py-5">
-						<div class="d-flex justify-content-between align-items-center mb-3">
-							<h4 class="text-right">Profile Settings</h4>
-						</div>
-						<div class="row mt-2">
-							<div class="col-md-6"><label class="labels">Name</label><input type="text"
-									class="form-control" placeholder="first name" value=""></div>
-							<div class="col-md-6"><label class="labels">Surname</label><input type="text"
-									class="form-control" value="" placeholder="surname"></div>
-						</div>
-						<div class="row mt-3">
-							<div class="col-md-12"><label class="labels">Mobile Number</label><input type="text"
-									class="form-control" placeholder="enter phone number" value=""></div>
-							<div class="col-md-12"><label class="labels">Address</label><input type="text"
-									class="form-control" placeholder="enter address" value=""></div>
-							<div class="col-md-12"><label class="labels">Email</label><input type="text"
-									class="form-control" placeholder="enter email" value=""></div>
-							<div class="col-md-12"><label class="labels">Password</label><input type="text"
-									class="form-control" placeholder="enter password" value=""></div>
-							<div class="col-md-12"><label class="labels">Password</label><input type="text"
-									class="form-control" placeholder="re enter password" value=""></div>
-						</div>
-						<div class="mt-2 text-center">
-							<button class="btn btn-sm btn-secondary change-password-button" type="button">Change
-								Password</button>
-						</div>
-						<div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save
-								Profile</button></div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
 
-	<br>
-<%- include('bot') %>
 
-	
+        <div class="card overflow-hidden">
+            <div class="row no-gutters row-bordered row-border-light">
+                <div class="col-md-3 pt-0">
+                    <div class="list-group list-group-flush account-settings-links">
+                        <a class="list-group-item list-group-item-action active" data-toggle="list"
+                            href="#account-general">General</a>
+                        <a class="list-group-item list-group-item-action" data-toggle="list"
+                            href="#account-change-password">Change password</a>
+                    </div>
+                </div>
+                <div class="col-md-9">
+                    <div class="tab-content">
+                        <div class="tab-pane fade active show" id="account-general">
+
+                            <div class="card-body media align-items-center">
+                                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""
+                                    class="d-block ui-w-80">
+                                <br>
+                                <div class="media-body ml-4">
+                                    <label class="btn btn-outline-primary">
+                                        Upload new photo
+                                        <input type="file" class="account-settings-fileinput">
+                                    </label> &nbsp;
+                                    <div class="text-light small mt-1">Allowed JPG, GIF or PNG. Max size of 800K</div>
+                                </div>
+                            </div>
+                            <hr class="border-light m-0">
+
+                            <div class="card-body">
+                                <div class="form-group">
+                                    <label class="form-label">Username</label>
+                                    <input type="text" class="form-control mb-1" value="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">First Name</label>
+                                    <input type="text" class="form-control" value="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Last Name</label>
+                                    <input type="text" class="form-control" value="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">E-mail</label>
+                                    <input type="text" class="form-control mb-1" value="">
+                                    <div class="alert alert-warning mt-3">
+                                        Your email is not confirmed. Please check your inbox.<br>
+                                        <a href="javascript:void(0)">Resend confirmation</a>
+                                    </div>
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Phone Number</label>
+                                    <input type="text" class="form-control" value="">
+                                </div>
+                                <div class="form-group">
+                                    <label class="form-label">Address</label>
+                                    <input type="text" class="form-control" value="">
+                                </div>
+                            </div>
+
+                        </div>
+                        <div class="tab-pane fade" id="account-change-password">
+                            <div class="card-body pb-2">
+
+                                <div class="form-group">
+                                    <label class="form-label">Current password</label>
+                                    <input type="password" class="form-control">
+                                </div>
+
+                                <div class="form-group">
+                                    <label class="form-label">New password</label>
+                                    <input type="password" class="form-control">
+                                </div>
+
+                                <div class="form-group">
+                                    <label class="form-label">Repeat new password</label>
+                                    <input type="password" class="form-control">
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="text-right mt-3">
+            <button type="button" class="btn btn-primary">Save changes</button>&nbsp;
+            <button type="button" class="btn btn-default">Cancel</button>
+            <button type="button" class="btn btn-delete">Delete Account</button>
+        </div>
+
+    </div>
+
+    <br>
+    <%- include('bot') %>
\ No newline at end of file