diff --git a/src/main/frontend/main.css b/src/main/frontend/main.css
index 50e4875..b805331 100644
--- a/src/main/frontend/main.css
+++ b/src/main/frontend/main.css
@@ -42,6 +42,13 @@
 
 @layer components {
 
+    .text-input {
+        @apply text-white;
+        @apply bg-dark-4;
+
+        @apply border-dark-9 rounded-2xl;
+    }
+
     .btn-primary {
         @apply flex items-center justify-center rounded-lg bg-primary-100;
         @apply hover:bg-primary-80;
diff --git a/src/main/resources/public/main.css b/src/main/resources/public/main.css
index c5e441f..e194281 100644
--- a/src/main/resources/public/main.css
+++ b/src/main/resources/public/main.css
@@ -782,6 +782,16 @@ h6 {
   --tw-backdrop-sepia:  ;
 }
 
+.text-input {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+  border-radius: 1rem;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
 .btn-primary {
   display: flex;
   align-items: center;
@@ -1079,20 +1089,11 @@ h6 {
   grid-column: 1 / -1;
 }
 
-.-my-3 {
-  margin-top: -12px;
-  margin-bottom: -12px;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.-ml-0 {
-  margin-left: -0px;
-}
-
 .mb-2 {
   margin-bottom: 8px;
 }
@@ -1161,10 +1162,6 @@ h6 {
   margin-top: 32px;
 }
 
-.ml-4 {
-  margin-left: 16px;
-}
-
 .block {
   display: block;
 }
@@ -1282,10 +1279,6 @@ h6 {
   flex: 1 1 0%;
 }
 
-.flex-none {
-  flex: none;
-}
-
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -1318,6 +1311,10 @@ h6 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1326,6 +1323,10 @@ h6 {
   flex-direction: column;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1414,16 +1415,6 @@ h6 {
   margin-bottom: calc(24px * var(--tw-space-y-reverse));
 }
 
-.divide-y > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1452,18 +1443,28 @@ h6 {
   border-radius: 0.375rem;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
+.rounded-sm {
+  border-radius: 0.125rem;
 }
 
-.border {
-  border-width: 1px;
+.rounded-s {
+  border-start-start-radius: 0.25rem;
+  border-end-start-radius: 0.25rem;
+}
+
+.rounded-l {
+  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
 }
 
 .border-0 {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1634,6 +1635,11 @@ h6 {
   padding-bottom: 32px;
 }
 
+.px-2 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .pb-12 {
   padding-bottom: 48px;
 }
@@ -1792,6 +1798,11 @@ h6 {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-dark-4 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -1831,6 +1842,11 @@ h6 {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
+.ring-white {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -1875,6 +1891,11 @@ h6 {
   background-color: rgb(54 78 190 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(67 97 238 / var(--tw-bg-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1921,6 +1942,11 @@ h6 {
   --tw-ring-color: rgb(180 192 248 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-primary-100:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(67 97 238 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
diff --git a/src/main/resources/templates/assignments/new.html b/src/main/resources/templates/assignments/new.html
index 7b709f6..22c7ff6 100644
--- a/src/main/resources/templates/assignments/new.html
+++ b/src/main/resources/templates/assignments/new.html
@@ -22,9 +22,10 @@
                     <div class="col-span-full">
                         <label for="assignmentName" class="block text-sm font-medium leading-6 text-gray-900">Assignment name</label>
                         <div class="mt-2">
-                            <input x-model="assignmentName" required minlength="3" type="text" name="assignmentName" id="assignmentName"
-                                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 invalid:ring-red-300 invalid:text-red-900 invalid:focus:ring-red-500"
-                                   placeholder="Name of the assignment (eg : Exercise 101)">
+                            <input
+                                class="text-input block w-full"
+                                x-model="assignmentName" required minlength="3" type="text" name="assignmentName" id="assignmentName"
+                                placeholder="Name of the assignment (eg : Exercise 101)">
                         </div>
                         <p x-show="selected === 'EXERCISE'" class="mt-3 text-sm leading-6 text-gray-600">Classroom will create a GitLab Group with the name of this assignment in <span th:text="${classroom.gitlabUrl}"></span>.</p>
                     </div>
@@ -34,34 +35,32 @@
                             <h2 class="text-sm font-medium leading-6 text-gray-900">Assignment type</h2>
                         </div>
 
-                        <fieldset class="mt-2">
-                            <div class="grid grid-cols-3 gap-3 sm:grid-cols-6">
-                                <!--
-                                  available: "cursor-pointer", unavailable: "opacity-25 cursor-not-allowed"
-                                  Active: "ring-2 ring-indigo-600 ring-offset-2"
-                                  Checked: "bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
-                                -->
-                                <label
-                                    class="flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 pchecked:text-white hover:bg-indigo-500"
-                                    :class="selected === 'EXERCISE' ? 'bg-indigo-600 text-white hover:bg-indigo-500' : 'ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50' "
-                                >
-                                    <input type="radio" name="assignmentType" value="EXERCISE" class="peer sr-only" x-model="selected">
-                                    <span>EXERCISE</span>
-                                </label>
-                                <label
-                                        class="flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold uppercase sm:flex-1 cursor-pointer focus:outline-none checked:bg-indigo-600 checked:text-white hover:bg-indigo-500"
-                                        :class="selected === 'QUIZ' ? 'bg-indigo-600 text-white hover:bg-indigo-500' : 'ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50' "
-                                >
-                                    <input type="radio" name="assignmentType" value="QUIZ" class="peer sr-only" x-model="selected">
-                                    <span>QUIZ</span>
-                                </label>
-                            </div>
+                        <fieldset class="mt-2 border-2 border-dark-4 rounded-lg flex gap-2 py-2 px-2">
+                            <!--
+                              available: "cursor-pointer", unavailable: "opacity-25 cursor-not-allowed"
+                              Active: "ring-2 ring-indigo-600 ring-offset-2"
+                              Checked: "bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-inset ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
+                            -->
+                            <label
+                                class="flex rounded-md py-3 px-3 text-sm font-medium cursor-pointer"
+                                :class="selected === 'EXERCISE' ? 'bg-primary-100 text-white hover:bg-primary-100' : 'ring-1 ring-inset ring-gray-300 bg-white text-dark-4 hover:bg-gray-50' "
+                            >
+                                <input type="radio" name="assignmentType" value="EXERCISE" class="peer sr-only" x-model="selected">
+                                <span>EXERCISE</span>
+                            </label>
+                            <label
+                                    class="flex rounded-md py-3 px-3 text-sm font-medium cursor-pointer"
+                                    :class="selected === 'QUIZ' ? 'bg-primary-100 text-white hover:bg-primary-100' : 'ring-1 ring-inset ring-gray-300 bg-white text-dark-4 hover:bg-gray-50' "
+                            >
+                                <input type="radio" name="assignmentType" value="QUIZ" class="peer sr-only" x-model="selected">
+                                <span>QUIZ</span>
+                            </label>
                         </fieldset>
                     </div>
 
                     <div class="col-span-full" x-show="selected === 'QUIZ'">
                         <label for="quizName" class="block text-sm font-medium leading-6 text-gray-900">Quiz</label>
-                        <select id="quizName" name="quizName" class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                        <select id="quizName" name="quizName" class="w-full rounded-md border-0 bg-dark-4 py-1.5 pl-3 pr-12 text-white shadow-sm ring-1 ring-inset ring-white focus:ring-2 focus:ring-inset focus:ring-primary-100">
                             <option th:each="quiz : ${quizzes}" th:text="${quiz.name}">Quiz Name</option>
                         </select>
                     </div>
@@ -69,7 +68,7 @@
                     <div class="col-span-full" x-show="selected === 'EXERCISE'">
                         <label for="repositoryId" class="block text-sm font-medium leading-6 text-gray-900">GitLab Repository Template</label>
                         <div class="relative mt-2" x-data="{open: false, repository: ''}">
-                            <select id="repositoryId" name="repositoryId" class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" role="combobox" aria-controls="options" aria-expanded="false">
+                            <select id="repositoryId" name="repositoryId" class="w-full rounded-md border-0 bg-dark-4 py-1.5 pl-3 pr-12 text-white shadow-sm ring-1 ring-inset ring-white focus:ring-2 focus:ring-inset focus:ring-primary-100" role="combobox" aria-controls="options" aria-expanded="false">
                                 <option></option>
                                 <option th:each="repository : ${repositories}" th:value="${repository.id}" th:text="${repository.nameWithNamespace}">Repository Name</option>
                             </select>
@@ -86,9 +85,9 @@
 
         <div class="mt-6 flex items-center justify-end gap-x-6">
             <a th:href="@{/classrooms/{classroomId}(classroomId=${classroom.id})}">
-                <button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
+                <button type="button" class="btn-secondary">Cancel</button>
             </a>
-            <button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
+            <button type="submit" class="btn-primary">Create</button>
         </div>
 
         <input