diff --git a/frontend/application/templates/forum/user.html b/frontend/application/templates/forum/user.html
index fabb149c58fc7d782225090898c61e2e46deb4ef..f4e6fe25a82e6d7a8d5678f89d6428e83f493437 100644
--- a/frontend/application/templates/forum/user.html
+++ b/frontend/application/templates/forum/user.html
@@ -1,6 +1,56 @@
+<!DOCTYPE html>
+<html>
 <head>
-<style>
-  .home-btn {
+	<title>USER PROFILE</title>
+	<style>
+		.user-info-card {
+			background-color: #d1e3f5;
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0px 2px 8px rgb(255, 255, 255);
+    margin: auto;
+    display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+
+		}
+
+		.user-info-card img {
+			width: 150px;
+			height: 150px;
+			object-fit: cover;
+			border-radius: 50%;
+			margin-bottom: 20px;
+		}
+
+		.user-info-card h5 {
+			font-weight: bold;
+			margin-bottom: 10px;
+		}
+
+		.user-info-card div {
+			color: #555555;
+			margin-bottom: 10px;
+		}
+
+		.post-card {
+			background-color: white;
+			border-radius: 10px;
+			padding: 30px;
+			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
+		}
+
+		.post-card h4 {
+			font-weight: bold;
+			margin-bottom: 10px;
+		}
+
+		.post-card p {
+			color: #555555;
+			margin-bottom: 0px;
+		}
+    .home-btn {
         background-color: #2196F3;
         color: white;
         padding: 10px;
@@ -9,47 +59,37 @@
         font-size: 16px;
         cursor: pointer;
         margin-bottom: 20px;
-  }
-  .profile-image {
-  width: 100px;
-  height: 100px;
-  object-fit: ;
-  border-radius: 50%;
-  }
-</style>
+}
+	</style>
 </head>
-<title>USER PROFILE</title>
-{% extends "base.html" %}
-
-{% block content %}
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-4 position-fixed w-100 h-100 left-0 top-0">
-        <div class="user-info" style="margin-top: 50px;">
-          <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a>
-          <br><br>
-          <img class="profile-image" src="images/users/{{ image }}">
-          <br><br>
-          <div class="h5">{{ name }}</div>
-          <div>{{ email }}</div>
-          <div>{{ role }}</div>
-        </div>
-      </div>
-      <div class="col-md-8 offset-md-4" style="margin-top: 50px;">
-        <h2>POSTS OF THE USER</h2>
-        <div style="height: 1500px; overflow-y: scroll;">
-          {% for post in posts %}
-            <div class="card">
-              <div class="card-body">
-                <h4 class="card-title"><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h4>
-                <p class="card-text">{{ post.content | safe }}</p>
-              </div>
-            </div>
-            <br>
-          {% endfor %}
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}
 
+<body>
+  <a class="home-btn" href="{{ url_for('frontend.get_posts') }}">Home</a> 
+{% from 'macros.html' import displayField %}
+  </nav>
+	<div class="container-fluid">
+		<div class="row">
+			<div class="col-md-4 position-fixed w-100 h-100 left-0 top-0">
+				<div class="user-info-card">
+					<img src="images/users/{{ image }}" alt="User profile picture">
+					<h5>{{ name }}</h5>
+					<div>{{ email }}</div>
+					<div>{{ role }}</div>
+				</div>
+			</div>
+			<div class="col-md-8 offset-md-4" style="margin-top: 50px;">
+				<h2>POSTS OF THE USER</h2>
+				<div style="height: 1500px; overflow-y: scroll;">
+					{% for post in posts %}
+						<div class="post-card">
+							<h4><a href="{{ url_for('frontend.display_post', post_id=post.id) }}">{{ post['title'] }}</a></h4>
+							<p>{{ post.content | safe }}</p>
+						</div>
+						<br>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+</html>