diff --git a/src/main/frontend/main.css b/src/main/frontend/main.css
index 2dbfa76..4682ae6 100644
--- a/src/main/frontend/main.css
+++ b/src/main/frontend/main.css
@@ -50,10 +50,26 @@
         @apply text-white font-medium;
         padding: 13px 28px;
         gap: 10px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
     }
-    .btn-primary img {
-        width: 20px;
-        height: 20px;
+
+    .btn-secondary {
+        @apply flex items-center justify-center rounded-lg bg-dark-1;
+        @apply hover:bg-white hover:text-primary-100;
+        @apply active:bg-dark-1;
+        @apply focus:bg-dark-1 focus:outline focus:outline-6 focus:outline-primary-80;
+        @apply text-white font-medium;
+        padding: 13px 28px;
+        gap: 10px;
+
+        img {
+            width: 20px;
+            height: 20px;
+        }
     }
 
     .classroom-card {
diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css
index ada9679..c1ba3bc 100644
--- a/src/main/resources/public/main.css
+++ b/src/main/resources/public/main.css
@@ -815,11 +815,51 @@ h6 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
   padding: 13px 28px;
   gap: 10px;
+  img {
+    width: 20px;
+    height: 20px;
+  }
 }
 
-.btn-primary img {
-  width: 20px;
-  height: 20px;
+.btn-secondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 23 28 / var(--tw-bg-opacity));
+}
+
+.btn-secondary:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(67 97 238 / var(--tw-text-opacity));
+}
+
+.btn-secondary:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 23 28 / var(--tw-bg-opacity));
+}
+
+.btn-secondary:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(20 23 28 / var(--tw-bg-opacity));
+  outline-style: solid;
+  outline-width: 6px;
+  outline-color: #364EBE;
+}
+
+.btn-secondary {
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  padding: 13px 28px;
+  gap: 10px;
+  img {
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .classroom-card {
@@ -1038,16 +1078,6 @@ h6 {
   grid-column: 1 / -1;
 }
 
-.-mx-4 {
-  margin-left: -16px;
-  margin-right: -16px;
-}
-
-.-my-2 {
-  margin-top: -8px;
-  margin-bottom: -8px;
-}
-
 .-my-3 {
   margin-top: -12px;
   margin-bottom: -12px;
@@ -1142,10 +1172,6 @@ h6 {
   display: block;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .flex {
   display: flex;
 }
@@ -1158,10 +1184,6 @@ h6 {
   display: table;
 }
 
-.flow-root {
-  display: flow-root;
-}
-
 .grid {
   display: grid;
 }
@@ -1174,6 +1196,10 @@ h6 {
   height: 48px;
 }
 
+.h-14 {
+  height: 56px;
+}
+
 .h-16 {
   height: 64px;
 }
@@ -1198,10 +1224,6 @@ h6 {
   height: 100%;
 }
 
-.h-14 {
-  height: 56px;
-}
-
 .min-h-full {
   min-height: 100%;
 }
@@ -1210,6 +1232,10 @@ h6 {
   width: 48px;
 }
 
+.w-14 {
+  width: 56px;
+}
+
 .w-20 {
   width: 80px;
 }
@@ -1243,14 +1269,6 @@ h6 {
   width: 100%;
 }
 
-.w-14 {
-  width: 56px;
-}
-
-.w-10 {
-  width: 40px;
-}
-
 .min-w-full {
   min-width: 100%;
 }
@@ -1347,6 +1365,10 @@ h6 {
   justify-content: space-between;
 }
 
+.gap-1 {
+  gap: 4px;
+}
+
 .gap-2 {
   gap: 8px;
 }
@@ -1371,10 +1393,6 @@ h6 {
   gap: 32px;
 }
 
-.gap-1 {
-  gap: 4px;
-}
-
 .gap-x-3 {
   -moz-column-gap: 12px;
        column-gap: 12px;
@@ -1431,16 +1449,6 @@ h6 {
   overflow: hidden;
 }
 
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1489,14 +1497,14 @@ h6 {
   border-bottom-width: 1px;
 }
 
-.border-l-4 {
-  border-left-width: 4px;
-}
-
 .border-b-2 {
   border-bottom-width: 2px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-b-dark-4 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(55 65 81 / var(--tw-border-opacity));
@@ -1507,11 +1515,6 @@ 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));
@@ -1676,6 +1679,10 @@ h6 {
   padding-bottom: 24px;
 }
 
+.pb-8 {
+  padding-bottom: 32px;
+}
+
 .pl-10 {
   padding-left: 40px;
 }
@@ -1716,10 +1723,6 @@ h6 {
   padding-top: 48px;
 }
 
-.pb-8 {
-  padding-bottom: 32px;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1732,11 +1735,21 @@ h6 {
   vertical-align: middle;
 }
 
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1752,16 +1765,6 @@ 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;
@@ -1803,6 +1806,11 @@ h6 {
   letter-spacing: -0.025em;
 }
 
+.text-dark-6 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-dark-7 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -1813,11 +1821,6 @@ 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;
 }
@@ -1901,11 +1904,6 @@ 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));
@@ -1998,11 +1996,6 @@ h6 {
     grid-column: span 4 / span 4;
   }
 
-  .sm\:-mx-6 {
-    margin-left: -24px;
-    margin-right: -24px;
-  }
-
   .sm\:ml-3 {
     margin-left: 12px;
   }
@@ -2035,10 +2028,6 @@ h6 {
     justify-content: space-between;
   }
 
-  .sm\:p-6 {
-    padding: 24px;
-  }
-
   .sm\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2054,10 +2043,6 @@ h6 {
     padding-bottom: 8rem;
   }
 
-  .sm\:pl-0 {
-    padding-left: 0px;
-  }
-
   .sm\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -2096,11 +2081,6 @@ h6 {
 }
 
 @media (min-width: 1024px) {
-  .lg\:-mx-8 {
-    margin-left: -32px;
-    margin-right: -32px;
-  }
-
   .lg\:ml-4 {
     margin-left: 16px;
   }
diff --git a/src/main/resources/templates/quiz/all-submissions.html b/src/main/resources/templates/quiz/all-submissions.html
index 852375e..8304c2b 100644
--- a/src/main/resources/templates/quiz/all-submissions.html
+++ b/src/main/resources/templates/quiz/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="${quiz.name}">name</span> results.</h1>
-                <p class="mt-2 text-sm text-gray-700">List of all quiz submissions.</p>
+                <h5><span th:text="${quiz.name}">name</span> results.</h5>
+                <p class="text-dark-7 text-m mt-2">List of all quiz submissions.</p>
             </div>
         </div>
 
@@ -21,62 +21,58 @@
             <h3 class="mt-2 text-sm font-semibold text-gray-900">No quiz submission found</h3>
         </div>
 
-        <div th:if="${! quizResults.empty}" class="mt-8">
+        <div th:if="${! quizResults.empty}">
             <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 Submissions</dt>
-                    <dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900" th:text="${quizResults.size}">12</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="${quizResults.size}">12</dd>
                 </div>
             </dl>
         </div>
 
-        <div class="mt-8 flow-root" th:if="${! quizResults.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>
-                        </tr>
-                        </thead>
-                        <tbody class="divide-y divide-gray-200 bg-white">
-                        <tr th:each="submission: ${quizResults}">
-                            <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="${submission.student.avatarUrl}" alt="">
-                                    </div>
-                                    <div class="ml-4">
-                                        <div class="font-medium text-gray-900" th:text="${submission.student.name}">Lindsay Walton</div>
-                                        <div class="mt-1 text-gray-500" th:text="${submission.student.email}">lindsay.walton@example.com</div>
-                                    </div>
-                                </div>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <div th:if="${submission.submissionDate}" class="text-gray-900" th:text="${submission.score} + ' / ' + ${submission.maxScore}">8/10</div>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <div th:if="${submission.submissionDate}" class="text-gray-900" th:text="${#temporals.format(submission.localizedSubmissionDate, 'dd MMMM yyyy à HH:mm', #locale.FRENCH)}">date</div>
-                            </td>
-                            <td class="whitespace-nowrap px-3 py-5 text-sm text-gray-500">
-                                <form
-                                        th:if="${submission.submissionDate}"
-                                        th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${submission.assignment.id}, studentId=${submission.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>
+        <table
+                th:if="${! quizResults.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>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="submission: ${quizResults}" 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="${submission.student.avatarUrl}" alt="">
 
-                        <!-- More people... -->
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
+                            <div class="flex flex-col gap-1">
+                                <div class="text-2xl font-medium" th:text="${submission.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="${submission.student.email}">lindsay.walton@example.com</span>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-3 py-5 text-sm">
+                        <div th:if="${submission.submissionDate}" class="text-gray-900" th:text="${submission.score} + ' / ' + ${submission.maxScore}">8/10</div>
+                    </td>
+                    <td class="px-3 py-5 text-sm">
+                        <div th:if="${submission.submissionDate}" class="text-gray-900" th:text="${#temporals.format(submission.localizedSubmissionDate, 'dd MMMM yyyy à HH:mm', #locale.FRENCH)}">date</div>
+                    </td>
+                    <td class="px-3 py-5 text-sm">
+                        <form
+                                th:if="${submission.submissionDate}"
+                                th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${submission.assignment.id}, studentId=${submission.student.name})}" method="post">
+                            <button type="submit" class="btn-secondary">
+                                Reset Grade
+                            </button>
+                        </form>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 
 </section>