diff --git a/frontend/src/assets/common.css b/frontend/src/assets/common.css
index b769c187..917a333d 100644
--- a/frontend/src/assets/common.css
+++ b/frontend/src/assets/common.css
@@ -6,6 +6,46 @@ h1 {
     padding-left: 1%;
 }
 
+.empty-message {
+    text-align: center;
+    font-size: 20px;
+}
+
+.header {
+    font-weight: bold !important;
+    background-color: #0e6942;
+    color: white;
+    padding: 10px;
+}
+
+table thead th:first-child {
+    border-top-left-radius: 10px;
+}
+
+.table thead th:last-child {
+    border-top-right-radius: 10px;
+}
+
+.table tbody tr:nth-child(odd) {
+    background-color: white;
+}
+
+.table tbody tr:nth-child(even) {
+    background-color: #f6faf2;
+}
+
+td,
+th {
+    border-bottom: 1px solid #0e6942;
+    border-top: 1px solid #0e6942;
+}
+
+.table {
+    width: 90%;
+    padding-top: 10px;
+    border-collapse: collapse;
+}
+
 @media screen and (max-width: 850px) {
     h1 {
         text-align: center;
diff --git a/frontend/src/views/classes/SingleClass.vue b/frontend/src/views/classes/SingleClass.vue
index 53498121..48e8e765 100644
--- a/frontend/src/views/classes/SingleClass.vue
+++ b/frontend/src/views/classes/SingleClass.vue
@@ -13,7 +13,7 @@
     import { useCreateTeacherInvitationMutation } from "@/queries/teacher-invitations";
     import type { TeacherInvitationData } from "@dwengo-1/common/interfaces/teacher-invitation";
     import { useDisplay } from "vuetify";
-    import '../../assets/common.css'
+    import "../../assets/common.css";
 
     const { t } = useI18n();
 
@@ -212,16 +212,31 @@
                                             <th class="header"></th>
                                         </tr>
                                     </thead>
-                                    <tbody>
+
+                                    <tbody v-if="studentsResponse.data.students.length">
                                         <tr
                                             v-for="s in studentsResponse.data.students as StudentDTO[]"
                                             :key="s.id"
                                         >
+                                            <td>{{ s.firstName + " " + s.lastName }}</td>
                                             <td>
-                                                {{ s.firstName + " " + s.lastName }}
+                                                <v-btn @click="showPopup(s)">{{ t("remove") }}</v-btn>
                                             </td>
-                                            <td>
-                                                <v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
+                                        </tr>
+                                    </tbody>
+
+                                    <tbody v-else>
+                                        <tr>
+                                            <td
+                                                colspan="2"
+                                                class="empty-message"
+                                            >
+                                                <v-icon
+                                                    icon="mdi-information-outline"
+                                                    size="small"
+                                                >
+                                                </v-icon>
+                                                {{ t("no-students-found") }}
                                             </td>
                                         </tr>
                                     </tbody>
@@ -243,7 +258,7 @@
                                                 <th class="header">{{ t("accept") + "/" + t("reject") }}</th>
                                             </tr>
                                         </thead>
-                                        <tbody>
+                                        <tbody v-if="joinRequests.data.joinRequests.length">
                                             <tr
                                                 v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
                                                 :key="(jr.class, jr.requester, jr.status)"
@@ -288,6 +303,21 @@
                                                 </td>
                                             </tr>
                                         </tbody>
+                                        <tbody v-else>
+                                            <tr>
+                                                <td
+                                                    colspan="2"
+                                                    class="empty-message"
+                                                >
+                                                    <v-icon
+                                                        icon="mdi-information-outline"
+                                                        size="small"
+                                                    >
+                                                    </v-icon>
+                                                    {{ t("no-join-requests-found") }}
+                                                </td>
+                                            </tr>
+                                        </tbody>
                                     </v-table>
                                 </v-col>
                             </using-query-result>
@@ -357,41 +387,6 @@
     </main>
 </template>
 <style scoped>
-    .header {
-        font-weight: bold !important;
-        background-color: #0e6942;
-        color: white;
-        padding: 10px;
-    }
-
-    table thead th:first-child {
-        border-top-left-radius: 10px;
-    }
-
-    .table thead th:last-child {
-        border-top-right-radius: 10px;
-    }
-
-    .table tbody tr:nth-child(odd) {
-        background-color: white;
-    }
-
-    .table tbody tr:nth-child(even) {
-        background-color: #f6faf2;
-    }
-
-    td,
-    th {
-        border-bottom: 1px solid #0e6942;
-        border-top: 1px solid #0e6942;
-    }
-
-    .table {
-        width: 90%;
-        padding-top: 10px;
-        border-collapse: collapse;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
@@ -411,7 +406,6 @@
     }
 
     @media screen and (max-width: 800px) {
-
         .join {
             text-align: center;
             align-items: center;
diff --git a/frontend/src/views/classes/StudentClasses.vue b/frontend/src/views/classes/StudentClasses.vue
index cab086b4..3b6fbc5e 100644
--- a/frontend/src/views/classes/StudentClasses.vue
+++ b/frontend/src/views/classes/StudentClasses.vue
@@ -12,7 +12,7 @@
     import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
     import type { StudentsResponse } from "@/controllers/students";
     import type { TeachersResponse } from "@/controllers/teachers";
-    import '../../assets/common.css'
+    import "../../assets/common.css";
 
     const { t } = useI18n();
 
@@ -162,7 +162,7 @@
                                         <th class="header">{{ t("members") }}</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody v-if="classResponse.data.classes.length">
                                     <tr
                                         v-for="c in classResponse.data.classes as ClassDTO[]"
                                         :key="c.id"
@@ -182,6 +182,21 @@
                                         </td>
                                     </tr>
                                 </tbody>
+                                <tbody v-else>
+                                    <tr>
+                                        <td
+                                            colspan="3"
+                                            class="empty-message"
+                                        >
+                                            <v-icon
+                                                icon="mdi-information-outline"
+                                                size="small"
+                                            >
+                                            </v-icon>
+                                            {{ t("no-classes-found") }}
+                                        </td>
+                                    </tr>
+                                </tbody>
                             </v-table>
                         </v-col>
                     </v-row>
@@ -272,41 +287,6 @@
     </main>
 </template>
 <style scoped>
-    .header {
-        font-weight: bold !important;
-        background-color: #0e6942;
-        color: white;
-        padding: 10px;
-    }
-
-    table thead th:first-child {
-        border-top-left-radius: 10px;
-    }
-
-    .table thead th:last-child {
-        border-top-right-radius: 10px;
-    }
-
-    .table tbody tr:nth-child(odd) {
-        background-color: white;
-    }
-
-    .table tbody tr:nth-child(even) {
-        background-color: #f6faf2;
-    }
-
-    td,
-    th {
-        border-bottom: 1px solid #0e6942;
-        border-top: 1px solid #0e6942;
-    }
-
-    .table {
-        width: 90%;
-        padding-top: 10px;
-        border-collapse: collapse;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
diff --git a/frontend/src/views/classes/TeacherClasses.vue b/frontend/src/views/classes/TeacherClasses.vue
index 0f5e104f..e82aa3d5 100644
--- a/frontend/src/views/classes/TeacherClasses.vue
+++ b/frontend/src/views/classes/TeacherClasses.vue
@@ -15,7 +15,7 @@
         useTeacherInvitationsReceivedQuery,
     } from "@/queries/teacher-invitations";
     import { useDisplay } from "vuetify";
-    import '../../assets/common.css'
+    import "../../assets/common.css";
 
     const { t } = useI18n();
 
@@ -213,7 +213,7 @@
                                         <th class="header">{{ t("members") }}</th>
                                     </tr>
                                 </thead>
-                                <tbody>
+                                <tbody v-if="classesResponse.data.classes.length">
                                     <tr
                                         v-for="c in classesResponse.data.classes as ClassDTO[]"
                                         :key="c.id"
@@ -240,6 +240,21 @@
                                         <td>{{ c.students.length }}</td>
                                     </tr>
                                 </tbody>
+                                <tbody v-else>
+                                    <tr>
+                                        <td
+                                            colspan="3"
+                                            class="empty-message"
+                                        >
+                                            <v-icon
+                                                icon="mdi-information-outline"
+                                                size="small"
+                                            >
+                                            </v-icon>
+                                            {{ t("no-classes-found") }}
+                                        </td>
+                                    </tr>
+                                </tbody>
                             </v-table>
                         </v-col>
                         <v-col
@@ -343,61 +358,80 @@
                                 :query-result="allClassesQuery"
                                 v-slot="classesResponse: { data: ClassesResponse }"
                             >
-                                <tr
-                                    v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
-                                    :key="i.classId"
-                                >
-                                    <td>
-                                        {{
-                                            (classesResponse.data.classes as ClassDTO[]).filter(
-                                                (c) => c.id == i.classId,
-                                            )[0].displayName
-                                        }}
-                                    </td>
-                                    <td>
-                                        {{
-                                            (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName
-                                        }}
-                                    </td>
-                                    <td class="text-right">
-                                        <span v-if="!isSmAndDown">
-                                            <div>
-                                                <v-btn
-                                                    color="green"
-                                                    @click="handleInvitation(i, true)"
-                                                    class="mr-2"
-                                                >
-                                                    {{ t("accept") }}
-                                                </v-btn>
-                                                <v-btn
-                                                    color="red"
-                                                    @click="handleInvitation(i, false)"
-                                                >
-                                                    {{ t("deny") }}
-                                                </v-btn>
-                                            </div>
-                                        </span>
-                                        <span v-else>
-                                            <div>
-                                                <v-btn
-                                                    @click="handleInvitation(i, true)"
-                                                    class="mr-2"
-                                                    icon="mdi-check-circle"
-                                                    color="green"
-                                                    variant="text"
-                                                >
-                                                </v-btn>
-                                                <v-btn
-                                                    @click="handleInvitation(i, false)"
-                                                    class="mr-2"
-                                                    icon="mdi-close-circle"
-                                                    color="red"
-                                                    variant="text"
-                                                >
-                                                </v-btn></div
-                                        ></span>
-                                    </td>
-                                </tr>
+                                <template v-if="invitationsResponse.data.invitations.length">
+                                    <tr
+                                        v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
+                                        :key="i.classId"
+                                    >
+                                        <td>
+                                            {{
+                                                (classesResponse.data.classes as ClassDTO[]).filter(
+                                                    (c) => c.id == i.classId,
+                                                )[0].displayName
+                                            }}
+                                        </td>
+                                        <td>
+                                            {{
+                                                (i.sender as TeacherDTO).firstName +
+                                                " " +
+                                                (i.sender as TeacherDTO).lastName
+                                            }}
+                                        </td>
+                                        <td class="text-right">
+                                            <span v-if="!isSmAndDown">
+                                                <div>
+                                                    <v-btn
+                                                        color="green"
+                                                        @click="handleInvitation(i, true)"
+                                                        class="mr-2"
+                                                    >
+                                                        {{ t("accept") }}
+                                                    </v-btn>
+                                                    <v-btn
+                                                        color="red"
+                                                        @click="handleInvitation(i, false)"
+                                                    >
+                                                        {{ t("deny") }}
+                                                    </v-btn>
+                                                </div>
+                                            </span>
+                                            <span v-else>
+                                                <div>
+                                                    <v-btn
+                                                        @click="handleInvitation(i, true)"
+                                                        class="mr-2"
+                                                        icon="mdi-check-circle"
+                                                        color="green"
+                                                        variant="text"
+                                                    >
+                                                    </v-btn>
+                                                    <v-btn
+                                                        @click="handleInvitation(i, false)"
+                                                        class="mr-2"
+                                                        icon="mdi-close-circle"
+                                                        color="red"
+                                                        variant="text"
+                                                    >
+                                                    </v-btn></div
+                                            ></span>
+                                        </td>
+                                    </tr>
+                                </template>
+                                <template v-else>
+                                    <tr>
+                                        <td
+                                            colspan="3"
+                                            class="empty-message"
+                                        >
+                                            <v-icon
+                                                icon="mdi-information-outline"
+                                                size="small"
+                                            >
+                                            </v-icon>
+                                            {{ t("no-invitations-found") }}
+                                        </td>
+                                    </tr>
+                                </template>
                             </using-query-result>
                         </using-query-result>
                     </tbody>
@@ -450,41 +484,6 @@
     </main>
 </template>
 <style scoped>
-    .header {
-        font-weight: bold !important;
-        background-color: #0e6942;
-        color: white;
-        padding: 10px;
-    }
-
-    table thead th:first-child {
-        border-top-left-radius: 10px;
-    }
-
-    .table thead th:last-child {
-        border-top-right-radius: 10px;
-    }
-
-    .table tbody tr:nth-child(odd) {
-        background-color: white;
-    }
-
-    .table tbody tr:nth-child(even) {
-        background-color: #f6faf2;
-    }
-
-    td,
-    th {
-        border-bottom: 1px solid #0e6942;
-        border-top: 1px solid #0e6942;
-    }
-
-    .table {
-        width: 90%;
-        padding-top: 10px;
-        border-collapse: collapse;
-    }
-
     h2 {
         color: #0e6942;
         font-size: 30px;
@@ -503,7 +502,6 @@
     }
 
     @media screen and (max-width: 850px) {
-
         .join {
             text-align: center;
             align-items: center;
@@ -526,10 +524,6 @@
             flex-direction: column !important;
         }
 
-        .table {
-            width: 100%;
-        }
-
         .responsive-col {
             max-width: 100% !important;
             flex-basis: 100% !important;