diff --git a/atsebayt/src/components/StudentGrades.svelte b/atsebayt/src/components/StudentGrades.svelte
index 44d9e46..d9668b1 100644
--- a/atsebayt/src/components/StudentGrades.svelte
+++ b/atsebayt/src/components/StudentGrades.svelte
@@ -1,25 +1,77 @@
 <script>
+ import { getSurveys } from '../lib/surveys';
+ import { getUsers, getGrades, getPromos } from '../lib/users';
+
  export let promo = null;
 </script>
 
+{#await getPromos() then promos}
+    <div class="float-end me-2">
+        <select class="form-select" bind:value={promo}>
+            <option value={null}>tous</option>
+            {#each promos as promo, pid (pid)}
+                <option value={promo}>{promo}</option>
+            {/each}
+        </select>
+    </div>
+{/await}
 <h2>
-  Étudiants {#if promo}{promo}{/if}
+  Étudiants {#if promo !== null}{promo}{/if}
   <small class="text-muted">Notes</small>
 </h2>
 
-<table class="table table-striped table-hover">
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Login</th>
-      <th ng-repeat="(sid,survey) in surveys" ng-if="survey.corrected">{ survey.title }</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr ng-repeat="(uid,user) in users" ng-click="showUser(user)">
-      <td>{ user.id }</td>
-      <td>{ user.login }</td>
-      <td ng-repeat="(sid,survey) in surveys" ng-if="survey.corrected">{ grades[user.id][survey.id] }</td>
-    </tr>
-  </tbody>
-</table>
+{#await getSurveys()}
+    <div class="d-flex justify-content-center">
+        <div class="spinner-border me-2" role="status"></div>
+        Chargement des questionnaires corrigés&hellip;
+    </div>
+{:then surveys}
+    {#await getGrades()}
+        <div class="d-flex justify-content-center">
+            <div class="spinner-border me-2" role="status"></div>
+            Chargement des notes&hellip;
+        </div>
+    {:then grades}
+        <div class="card mb-5">
+            <table class="table table-striped table-hover mb-0">
+                <thead>
+                    <tr>
+                        <th>ID</th>
+                        <th>Login</th>
+                        {#each surveys as survey (survey.id)}
+                            {#if survey.corrected && (promo === null || survey.promo == promo)}
+                                <th><a href="surveys/{survey.id}" style="text-decoration: none">{survey.title}</a></th>
+                            {/if}
+                        {/each}
+                    </tr>
+                </thead>
+                <tbody>
+                    {#await getUsers()}
+                        <tr>
+                            <td colspan="20">
+                                <div class="d-flex justify-content-center">
+                                    <div class="spinner-border me-2" role="status"></div>
+                                    Chargement des étudiants&hellip;
+                                </div>
+                            </td>
+                        </tr>
+                    {:then users}
+                        {#each users as user (user.id)}
+                            {#if promo === null || user.promo === promo}
+                            <tr>
+                                <td><a href="users/{user.id}" style="text-decoration: none">{user.id}</a></td>
+                                <td><a href="users/{user.login}" style="text-decoration: none">{user.login}</a></td>
+                                {#each surveys as survey (survey.id)}
+                                    {#if survey.corrected && (promo === null || survey.promo == promo)}
+                                        <td>{grades[user.id][survey.id]?grades[user.id][survey.id]:"N/A"}</td>
+                                    {/if}
+                                {/each}
+                            </tr>
+                            {/if}
+                        {/each}
+                    {/await}
+                </tbody>
+            </table>
+        </div>
+    {/await}
+{/await}
diff --git a/atsebayt/src/lib/users.js b/atsebayt/src/lib/users.js
index a6e00d8..51847e2 100644
--- a/atsebayt/src/lib/users.js
+++ b/atsebayt/src/lib/users.js
@@ -25,6 +25,14 @@ export async function getUser(uid) {
   }
 }
 
+export async function getGrades(uid, survey) {
+  const res = await fetch(`api/grades`, {headers: {'Accept': 'application/json'}})
+  if (res.status == 200) {
+    return await res.json();
+  } else {
+    throw new Error((await res.json()).errmsg);
+  }
+}
 export async function getUserGrade(uid, survey) {
   const res = await fetch(`api/users/${uid}/surveys/${survey.id}/grades`, {headers: {'Accept': 'application/json'}})
   if (res.status == 200) {