diff --git a/src/main/frontend/main.css b/src/main/frontend/main.css
index 4682ae6..50e4875 100644
--- a/src/main/frontend/main.css
+++ b/src/main/frontend/main.css
@@ -58,10 +58,10 @@
     }
 
     .btn-secondary {
-        @apply flex items-center justify-center rounded-lg bg-dark-1;
+        @apply flex items-center justify-center rounded-lg bg-dark-1 outline outline-2 outline-white;
         @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 focus:bg-dark-1 focus:text-white focus:outline focus:outline-6 focus:outline-primary-80;
         @apply text-white font-medium;
         padding: 13px 28px;
         gap: 10px;
diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css
index c1ba3bc..15bba8b 100644
--- a/src/main/resources/public/main.css
+++ b/src/main/resources/public/main.css
@@ -828,6 +828,9 @@ h6 {
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;
   background-color: rgb(20 23 28 / var(--tw-bg-opacity));
+  outline-style: solid;
+  outline-width: 2px;
+  outline-color: #FFFFFF;
 }
 
 .btn-secondary:hover {
@@ -845,6 +848,8 @@ h6 {
 .btn-secondary:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(20 23 28 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
   outline-style: solid;
   outline-width: 6px;
   outline-color: #364EBE;
@@ -1049,10 +1054,6 @@ h6 {
   position: relative;
 }
 
-.-inset-1 {
-  inset: -4px;
-}
-
 .inset-0 {
   inset: 0px;
 }
@@ -1092,10 +1093,6 @@ h6 {
   margin-left: -0px;
 }
 
-.-mt-32 {
-  margin-top: -8rem;
-}
-
 .mb-2 {
   margin-bottom: 8px;
 }
@@ -1124,10 +1121,6 @@ h6 {
   margin-left: 12px;
 }
 
-.ml-4 {
-  margin-left: 16px;
-}
-
 .ml-6 {
   margin-left: 24px;
 }
@@ -1200,10 +1193,6 @@ h6 {
   height: 56px;
 }
 
-.h-16 {
-  height: 64px;
-}
-
 .h-4 {
   height: 16px;
 }
@@ -1281,10 +1270,6 @@ h6 {
   max-width: 56rem;
 }
 
-.max-w-7xl {
-  max-width: 80rem;
-}
-
 .max-w-screen-2xl {
   max-width: 1536px;
 }
@@ -1293,10 +1278,6 @@ h6 {
   max-width: 36rem;
 }
 
-.max-w-xs {
-  max-width: 20rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1345,10 +1326,6 @@ h6 {
   align-items: center;
 }
 
-.items-baseline {
-  align-items: baseline;
-}
-
 .justify-start {
   justify-content: flex-start;
 }
@@ -1421,12 +1398,6 @@ h6 {
   row-gap: 32px;
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(16px * var(--tw-space-x-reverse));
-  margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .space-y-12 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(48px * calc(1 - var(--tw-space-y-reverse)));
@@ -1608,11 +1579,6 @@ h6 {
   padding-right: 16px;
 }
 
-.px-5 {
-  padding-left: 20px;
-  padding-right: 20px;
-}
-
 .px-6 {
   padding-left: 24px;
   padding-right: 24px;
@@ -1653,11 +1619,6 @@ h6 {
   padding-bottom: 20px;
 }
 
-.py-6 {
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
-
 .py-8 {
   padding-top: 32px;
   padding-bottom: 32px;
@@ -1667,10 +1628,6 @@ h6 {
   padding-bottom: 48px;
 }
 
-.pb-32 {
-  padding-bottom: 8rem;
-}
-
 .pb-5 {
   padding-bottom: 20px;
 }
@@ -1691,6 +1648,10 @@ h6 {
   padding-left: 48px;
 }
 
+.pl-2 {
+  padding-left: 8px;
+}
+
 .pl-3 {
   padding-left: 12px;
 }
@@ -1833,22 +1794,6 @@ h6 {
   opacity: 0.25;
 }
 
-.opacity-75 {
-  opacity: 0.75;
-}
-
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1876,10 +1821,6 @@ h6 {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-.ring-opacity-5 {
-  --tw-ring-opacity: 0.05;
-}
-
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -1970,15 +1911,6 @@ h6 {
   --tw-ring-color: rgb(180 192 248 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-white:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -2028,11 +1960,6 @@ h6 {
     justify-content: space-between;
   }
 
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .sm\:px-6 {
     padding-left: 24px;
     padding-right: 24px;
@@ -2063,14 +1990,6 @@ h6 {
     grid-column: span 2 / span 2;
   }
 
-  .md\:ml-6 {
-    margin-left: 24px;
-  }
-
-  .md\:block {
-    display: block;
-  }
-
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/src/main/resources/templates/classrooms/student.html b/src/main/resources/templates/classrooms/student.html
index c18b520..6591141 100644
--- a/src/main/resources/templates/classrooms/student.html
+++ b/src/main/resources/templates/classrooms/student.html
@@ -4,107 +4,17 @@
 </head>
 <body>
 <section>
-    <div class="border-b border-gray-200 mt-5 pb-5 sm:flex sm:items-center sm:justify-between">
+    <div class="flex flex-row justify-between border-b border-b-dark-4 py-8">
         <div>
-            <h3 th:text="${classroom.name}" class="text-base font-semibold leading-6 text-gray-900">Classroom
-                Name</h3>
-            <p class="max-w-4xl text-sm text-gray-500">Accepted assignments of the classroom <span
-                    th:text="${classroom.name}">Classroom Name</span>.</p>
+            <h3 th:text="${classroom.name}" class="text-base font-semibold leading-6 text-gray-900 mb-2">Classroom Name</h3>
+            <p class="text-base text-dark-7">Accepted assignments of the classroom <span th:text="${classroom.name}">Classroom Name</span>.</p>
         </div>
     </div>
 
-    <ul role="list" class="mt-6 grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-2 lg:grid-cols-3 xl:gap-x-8">
-        <li
-                th:each="studentAssignment : ${assignments}"
-                class="overflow-hidden rounded-xl border border-gray-200"
+    <ul role="list" class="grid grid-cols-3 gap-6 mt-6">
+        <li th:each="studentAssignment : ${assignments}"
+            th:insert="~{ components/student-assignment-card::div(${studentAssignment}) }"
         >
-            <div class="flex items-center gap-x-4 border-b border-gray-900/5 bg-gray-50 p-6">
-                <!-- question mark icon -->
-                <svg th:if="${studentAssignment.assignment.type.name() == 'QUIZ'}" xmlns="http://www.w3.org/2000/svg"
-                     fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
-                     class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900/10">
-                    <path stroke-linecap="round" stroke-linejoin="round"
-                          d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"/>
-                </svg>
-                <!-- shell icon -->
-                <svg th:if="${studentAssignment.assignment.type.name() == 'EXERCISE'}"
-                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor"
-                     class="h-12 w-12 flex-none rounded-lg bg-white object-cover ring-1 ring-gray-900">
-                    <path stroke-linecap="round" stroke-linejoin="round"
-                          d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/>
-                </svg>
-
-                <p th:text="${studentAssignment.assignment.name}" class="text-sm font-medium leading-6 text-gray-900">
-                    Assignment Name
-                </p>
-            </div>
-            <dl class="-my-3 divide-y divide-gray-100 px-6 py-4 text-sm leading-6">
-                <div class="flex justify-between gap-x-4 py-3">
-                    <div class="flex justify-between gap-x-4 py-3">
-                        <dt class="text-gray-800 inline-flex" th:if="${studentAssignment.submissionDate}">
-                            <span class="whitespace-pre">Submission date : </span>
-                            <span th:text="${#temporals.format(studentAssignment.localizedSubmissionDate, 'dd MMMM yyyy à HH:mm', #locale.FRENCH)}">date</span>
-                        </dt>
-                        <dt class="text-gray-800 inline-flex" th:unless="${studentAssignment.submissionDate}">
-                            <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 mr-1.5">
-                                <path stroke-linecap="round" stroke-linejoin="round"
-                                      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
-                            </svg>
-                            No submission received yet.
-                        </dt>
-                    </div>
-                </div>
-                <div th:if="${studentAssignment.submissionDate!=null}" class="flex justify-between gap-x-4 py-3">
-                    <div class="flex justify-between gap-x-4 py-3">
-                        <dt class="text-gray-800 inline-flex">
-                            <span class="whitespace-pre">Score : </span>
-                            <div class="text-gray-900"
-                                 th:text="${studentAssignment.score} + ' / ' + ${studentAssignment.maxScore}">8/10
-                            </div>
-                        </dt>
-                    </div>
-                    <form
-                            th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${studentAssignment.assignment.id}, studentId=${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>
-                </div>
-                <div th:if="${studentAssignment.assignment.type.name() == 'EXERCISE'}"
-                     class="flex justify-between gap-x-4 py-3">
-                    <dt class="text-gray-800">
-                        <a th:href="${studentAssignment.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>
-                    </dt>
-                </div>
-                <div th:if="${studentAssignment.assignment.type.name() == 'QUIZ'}"
-                     class="flex justify-between gap-x-4 py-3">
-                    <dt class="text-gray-800">
-                        <a th:href="@{/assignments/{assignmentId}/quiz(assignmentId=${studentAssignment.assignment.id})}"
-                           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 mr-1.5">
-                                <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>
-                            Answer Quiz
-                        </a>
-                    </dt>
-                </div>
-            </dl>
         </li>
     </ul>
 </section>
diff --git a/src/main/resources/templates/components/student-assignment-card.html b/src/main/resources/templates/components/student-assignment-card.html
new file mode 100644
index 0000000..9867d92
--- /dev/null
+++ b/src/main/resources/templates/components/student-assignment-card.html
@@ -0,0 +1,52 @@
+<!--/*
+
+    A Student Assignment Card component
+
+    Parameters :
+
+    * Assignment : A student assignment object
+
+    Fragment usage :
+
+    <li th:each="student: ${classroom.students}"
+        th:insert="~{ components/student-card::div(${student}) }"
+        th:with="link=@{/classrooms/{classroomId}/students/{studentName}(classroomId=${classroom.id},studentName=${student.name})}"
+        >
+    </li>
+
+*/-->
+
+<div th:fragment="student-assignment-card(studentAssignment)" class="assignment-card">
+    <a th:href="${link}" class="assignment-header">
+        <div>
+            <img th:if="${studentAssignment.assignment.type.name == 'EXERCISE'}" src="/icons/brackets.svg" />
+            <img th:if="${studentAssignment.assignment.type.name == 'QUIZ'}" src="/icons/pencil-alt.svg" />
+        </div>
+        <span th:text="${studentAssignment.assignment.name}">Exercise 1</span>
+    </a>
+    <div th:if="${studentAssignment.submissionDate!=null}" class="flex justify-between items-center">
+        <div class="pl-2" th:text="'Score : ' + ${studentAssignment.score} + ' / ' + ${studentAssignment.maxScore}">8/10</div>
+        <form
+                th:action="@{/assignments/{assignmentId}/students/{studentId}/reset(assignmentId=${studentAssignment.assignment.id}, studentId=${student.name})}" method="post">
+            <button type="submit" class="btn-secondary">
+                Reset Grade
+            </button>
+        </form>
+    </div>
+    <a
+        th:if="${studentAssignment.assignment.type.name() == 'EXERCISE'}"
+        th:href="${studentAssignment.gitlabProjectUrl}"
+        target="_blank" class="btn-primary "
+    >
+        <img src="/icons/gitlab-logo-200.svg">
+        Open in GitLab
+    </a>
+    <a
+            th:if="${studentAssignment.assignment.type.name() == 'QUIZ'}"
+            th:href="@{/assignments/{assignmentId}/quiz(assignmentId=${studentAssignment.assignment.id})}"
+            target="_blank" class="btn-primary"
+    >
+        <img src="/icons/link-alt-2.svg">
+        Answer Quiz
+    </a>
+</div>