diff --git a/templates/profile.html b/templates/profile.html
index 9cee6741..07e2eff9 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -2,67 +2,82 @@
 {% load auth_extras %}
 
 {% block content %}
-    <div class="anatomy">
-        <h1>Profile</h1>
-        <div>
-            Username: <span id="username">{{ user.username }}</span>
-        </div>
-        <div>
-            Email: <span id="email">{{ user.email }}</span>
-        </div>
-        <div>
-            Name: <span id="first-name">{{ user.first_name }}<span>
-            <span id="last-name">{{ user.last_name }}</span>
-        </div>
-        <div>
-            Grade: {{ user.userprofile.grade }}
-        </div>
-        <div>
-            Supervisor: {{ user.userprofile.supervisor }}
-            {% if request.user.is_superuser and user.userprofile.supervisor %}
-            <a href='{% url "generic:supervisor_detail" user.userprofile.supervisor.pk %}'><i class="bi bi-link"></i></a>
-            {% endif %} 
-            <br/>
-        </div>
-        <div>
-            Registration number: {{ user.userprofile.registration_number }}
-        </div>
-
-
-        <h3>Groups</h3>
-
-        <ul>
-            {% for group in user.user_groups.all %}
-                <li><a href="{% url 'generic:user_group_detail' group.pk %}">{{group}}</a></li>
-            {% empty %}
-                <li>No groups.</li>
-            {% endfor %}
-        </ul>
-
-        <h3>Exams</h3>
-        <p>
-            {% with user.userprofile.get_exams as exam_map %}
-                {% for exam_type, exams in exam_map.items %}
-                    <h4>{{exam_type}}</h4>
-                    <ul>
-                        {% for exam in exams %}
-                            <li>
-                                <a href="{{exam.get_absolute_url}}">{{exam}}</a>
-                            </li>
-                        {% endfor %}
+    <div class="container py-4">
+        <div class="row">
+            <div class="col-md-4 mb-3">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <div class="profile-avatar mb-3">
+                            <div class="rounded-circle bg-secondary text-white d-inline-flex align-items-center justify-content-center" style="width:96px;height:96px;font-size:32px;">{{ user.first_name|default:user.username|slice:":1"|upper }}</div>
+                        </div>
+                        <h4 class="card-title mb-1">{{ user.get_full_name|default:user.username }}</h4>
+                        <p class="text-muted mb-1">@{{ user.username }}</p>
+                        <p class="mb-0"><a href="mailto:{{ user.email }}">{{ user.email }}</a></p>
+                    </div>
+                    <ul class="list-group list-group-flush">
+                        <li class="list-group-item">Grade: <strong>{{ user.userprofile.grade|default:"N/A" }}</strong></li>
+                        <li class="list-group-item">Registration: <strong>{{ user.userprofile.registration_number|default:"N/A" }}</strong></li>
+                        <li class="list-group-item">Supervisor:
+                            {% if user.userprofile.supervisor %}
+                                {{ user.userprofile.supervisor }}
+                                {% if request.user.is_superuser %}
+                                    <a href="{% url 'generic:supervisor_detail' user.userprofile.supervisor.pk %}" class="ms-2"><i class="bi bi-box-arrow-up-right"></i></a>
+                                {% endif %}
+                            {% else %}
+                                <span class="text-muted">None</span>
+                            {% endif %}
+                        </li>
                     </ul>
-                {% empty %}
-                    No exams.
-                {% endfor %}
-            {% endwith %}
-        </p>
+                    <div class="card-body">
+                        <a class="btn btn-outline-primary d-block mb-2" href="{% url 'password_change' %}">Change password</a>
+                        {% if request.user|has_group:"cid_user_manager" %}
+                            <a class="btn btn-outline-secondary d-block mb-2" href="{% url 'account_update' user.username %}">Update user details</a>
+                        {% endif %}
+                        <a class="btn btn-primary d-block" href="{% url 'account_profile_update' user.username %}">Edit profile</a>
+                    </div>
+                </div>
+            </div>
 
+            <div class="col-md-8">
+                <div class="card mb-3">
+                    <div class="card-header">Groups</div>
+                    <div class="card-body">
+                        {% if user.user_groups.all %}
+                            <div class="d-flex flex-wrap gap-2">
+                                {% for group in user.user_groups.all %}
+                                    <a class="btn btn-sm btn-outline-secondary" href="{% url 'generic:user_group_detail' group.pk %}">{{ group }}</a>
+                                {% empty %}
+                                    <div class="text-muted">No groups.</div>
+                                {% endfor %}
+                            </div>
+                        {% else %}
+                            <div class="text-muted">No groups.</div>
+                        {% endif %}
+                    </div>
+                </div>
 
-        <a id="password-change" href="{% url 'password_change'%}">Change password</a>
-
-        {% if request.user|has_group:"cid_user_manager" %}
-            <a href="{% url 'account_update' user.username %}">Update user details</a>
-        {% endif %}
-        <a id="update-profile-link" href="{% url 'account_profile_update' user.username %}">Update user profile</a>
+                <div class="card">
+                    <div class="card-header">Exams</div>
+                    <div class="card-body">
+                        {% with user.userprofile.get_exams as exam_map %}
+                            {% if exam_map %}
+                                {% for exam_type, exams in exam_map.items %}
+                                    <h5 class="mt-2">{{ exam_type }}</h5>
+                                    <ul class="list-group mb-2">
+                                        {% for exam in exams %}
+                                            <li class="list-group-item py-2">
+                                                <a href="{{ exam.get_absolute_url }}">{{ exam }}</a>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endfor %}
+                            {% else %}
+                                <div class="text-muted">No exams.</div>
+                            {% endif %}
+                        {% endwith %}
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 {% endblock %}
\ No newline at end of file