diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css
index 8b95c8e..ada9679 100644
--- a/src/main/resources/public/main.css
+++ b/src/main/resources/public/main.css
@@ -1198,6 +1198,10 @@ h6 {
   height: 100%;
 }
 
+.h-14 {
+  height: 56px;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -1239,6 +1243,14 @@ h6 {
   width: 100%;
 }
 
+.w-14 {
+  width: 56px;
+}
+
+.w-10 {
+  width: 40px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1279,6 +1291,10 @@ h6 {
   flex-shrink: 0;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
 .origin-top-right {
   transform-origin: top right;
 }
@@ -1355,6 +1371,10 @@ h6 {
   gap: 32px;
 }
 
+.gap-1 {
+  gap: 4px;
+}
+
 .gap-x-3 {
   -moz-column-gap: 12px;
        column-gap: 12px;
@@ -1473,6 +1493,10 @@ h6 {
   border-left-width: 4px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-b-dark-4 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1483,6 +1507,11 @@ h6 {
   border-left-color: rgb(242 48 48 / var(--tw-border-opacity));
 }
 
+.border-b-dark-1 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(20 23 28 / var(--tw-border-opacity));
+}
+
 .bg-dark-1 {
   --tw-bg-opacity: 1;
   background-color: rgb(20 23 28 / var(--tw-bg-opacity));
@@ -1687,6 +1716,10 @@ h6 {
   padding-top: 48px;
 }
 
+.pb-8 {
+  padding-bottom: 32px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1719,6 +1752,21 @@ h6 {
   line-height: 1.25rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1765,6 +1813,11 @@ h6 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-dark-6 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1848,6 +1901,16 @@ h6 {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.odd\:bg-dark-3:nth-child(odd) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 42 55 / var(--tw-bg-opacity));
+}
+
+.even\:bg-dark-3:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 42 55 / var(--tw-bg-opacity));
+}
+
 .checked\:text-white:checked {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/src/main/resources/templates/exercise/all-submissions.html b/src/main/resources/templates/exercise/all-submissions.html
index ae56d3d..bb179e4 100644
--- a/src/main/resources/templates/exercise/all-submissions.html
+++ b/src/main/resources/templates/exercise/all-submissions.html
@@ -8,8 +8,8 @@
     <div class="px-4 sm:px-6 lg:px-8">
         <div class="sm:flex sm:items-center">
             <div class="sm:flex-auto">
-                <h1 class="text-base font-semibold leading-6 text-gray-900"><span th:text="${exercise.name}">name</span> results.</h1>
-                <p class="mt-2 text-sm text-gray-700">List of all exercise submissions.</p>
+                <h5><span th:text="${exercise.name}">name</span> results.</h5>
+                <p class="text-dark-7 text-m mt-2">List of all exercise submissions.</p>
             </div>
         </div>
 
@@ -24,19 +24,19 @@
         <div
                 th:if="${ ! exerciseResults.empty }"
                 th:with="submissionCount=${exerciseResults.?[submissionDate!=null].size}"
-                class="mt-8">
-            <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-                <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-                    <dt class="truncate text-sm font-medium text-gray-500">Total Accepted</dt>
-                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900" th:text="${ exercise.students.size }">12</dd>
+                >
+            <dl class="mt-5 grid grid-cols-1 sm:grid-cols-3 gap-3">
+                <div class="bg-dark-3 rounded-3xl p-6">
+                    <dt class="text-dark-6">Total accepted</dt>
+                    <dd class="mt-1 text-6xl font-bold text-white" th:text="${ exercise.students.size }">12</dd>
                 </div>
-                <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
-                    <dt class="truncate text-sm font-medium text-gray-500">Total Submissions</dt>
-                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900" th:text="${ submissionCount }">10</dd>
+                <div class="bg-dark-3 rounded-3xl p-6">
+                    <dt class="text-dark-6">Total submissions</dt>
+                    <dd class="mt-1 text-6xl font-bold text-white" th:text="${ submissionCount }">10</dd>
                 </div>
-                <div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6" th:if="${ submissionCount > 0}">
-                    <dt class="truncate text-sm font-medium text-gray-500">Average</dt>
-                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+                <div class="bg-dark-3 rounded-3xl p-6" th:if="${ submissionCount > 0}">
+                    <dt class="text-dark-6">Average</dt>
+                    <dd class="mt-1 text-6xl font-bold text-white">
                         <span th:text="${#aggregates.avg(exerciseResults.?[submissionDate != null].![score])}">10</span> /
                         <span th:text="${exerciseResults.?[submissionDate != null][0].maxScore}">10<∕span>
                     </dd>
@@ -44,65 +44,60 @@
             </dl>
         </div>
 
-        <div class="mt-8 flow-root" th:if="${ ! exerciseResults.empty }">
-            <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-                    <table class="min-w-full divide-y divide-gray-300">
-                        <thead>
-                        <tr>
-                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">Name</th>
-                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Result</th>
-                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Date</th>
-                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">View Repository</th>
-                        </tr>
-                        </thead>
-                        <tbody class="divide-y divide-gray-200 bg-white">
-                        <tr th:each="result: ${exerciseResults}">
-                            <td class="whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
-                                <div class="flex items-center">
-                                    <div class="h-11 w-11 flex-shrink-0">
-                                        <img class="h-11 w-11 rounded-full" th:src="${result.student.avatarUrl}" alt="">
-                                    </div>
-                                    <div class="ml-4">
-                                        <div class="font-medium text-gray-900" th:text="${result.student.name}">Lindsay Walton</div>
-                                        <div class="mt-1 text-gray-500" th:text="${result.student.email}">lindsay.walton@example.com</div>
-                                    </div>
+        <table
+                th:if="${ ! exerciseResults.empty }"
+                class="mt-8 min-w-full table-auto">
+            <thead class="border-b-2 border-b-dark-4 text-left">
+                <tr>
+                    <th class="pb-8">Name</th>
+                    <th class="pb-8">Result</th>
+                    <th class="pb-8">Date</th>
+                    <th class="pb-8">View Repository</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="result: ${exerciseResults}" class="even:bg-dark-3">
+                    <td class="py-5 pl-4 pr-3 text-sm">
+                        <div class="flex items-center gap-6">
+                            <img class="h-14 w-14 rounded-full" th:src="${result.student.avatarUrl}" alt="">
+
+                            <div class="flex flex-col gap-1">
+                                <div class="text-2xl font-medium" th:text="${result.student.name}">Lindsay Walton</div>
+                                <div class="text-xs text-dark-7 flex items-center">
+                                    <img src="/icons/send.svg" class="h-4 w-4" alt="send email icon">
+                                    <span class="ml-2" th:text="${result.student.email}">lindsay.walton@example.com</span>
                                 </div>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <div th:if="${result.submissionDate}" class="text-gray-900" th:text="${result.score} + ' / ' + ${result.maxScore}">8/10</div>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <div th:if="${result.submissionDate}" class="text-gray-900" th:text="${#temporals.format(result.localizedSubmissionDate, 'dd MMMM yyyy à HH:mm', #locale.FRENCH)}">date</div>
-                            </td>
-                            <td>
-                                <a th:href="${result.gitlabProjectUrl}" target="_blank" class="inline-flex items-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                                    </svg>
-                                    <svg fill="currentColor" stroke="currentColor" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-1.5">
-                                        <path d="M234.415,153.53322,207.08594,51.04787a7.99994,7.99994,0,0,0-15.22022-.74756L170.228,108H85.772L64.13477,50.3008a8.00014,8.00014,0,0,0-15.22071.74707L21.585,153.53322a12.02834,12.02834,0,0,0,4.76416,12.958l94.82031,65.645a11.94608,11.94608,0,0,0,5.45264,2.03467,3.97163,3.97163,0,0,0,.71924.07275c.02734,0,.05517-.00683.08252-.00732.19214.00879.384.02148.57617.02148s.384-.01269.57617-.02148c.02735.00049.05518.00732.08252.00732a3.95865,3.95865,0,0,0,.71826-.07275,11.9487,11.9487,0,0,0,5.45362-2.03467l94.82031-65.645A12.02834,12.02834,0,0,0,234.415,153.53322ZM199.35645,53.1094,213.9939,108H178.772ZM128,220.60891,88.77173,116h78.45654ZM56.644,53.1094,77.228,108H42.00635ZM29.31445,155.59426,39.87305,116H80.228l39.53784,105.43457-88.863-61.52051A4.01148,4.01148,0,0,1,29.31445,155.59426Zm195.78272,4.31982-88.863,61.52051L175.772,116H216.1272l10.55835,39.59424A4.01148,4.01148,0,0,1,225.09717,159.91408Z"></path>
-                                    </svg>
-                                    Open in GitLab
-                                </a>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <form
-                                        th:if="${result.submissionDate}"
-                                        th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${exercise.id}, studentId=${result.student.name})}" method="post">
-                                    <button type="submit" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
-                                        Reset Grade
-                                    </button>
-                                </form>
-                            </td>
-                        </tr>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-3 py-5 text-sm">
+                        <div th:if="${result.score}" th:text="${result.score} + ' / ' + ${result.maxScore}">8/10</div>
+                    </td>
+                    <td class="px-3 py-5 text-sm">
+                        <div th:if="${result.submissionDate}" th:text="${#temporals.format(result.localizedSubmissionDate, 'dd MMMM yyyy à HH:mm', #locale.FRENCH)}">date</div>
+                    </td>
+                    <td>
+                        <a type="button"
+                           th:href="${result.gitlabProjectUrl}"
+                           target="_blank"
+                           class="btn-primary">
+                            <img src="/icons/gitlab-logo-200.svg" class="h-6 w-6 mr-1.5" alt="gitlab icon"/>
+                            Open in GitLab
+                        </a>
+                    </td>
+                    <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
+                        <form
+                                th:if="${result.submissionDate}"
+                                th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${exercise.id}, studentId=${result.student.name})}" method="post">
+                            <button type="submit" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
+                                Reset Grade
+                            </button>
+                        </form>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
 
-                        <!-- More people... -->
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
     </div>
 
 </section>