diff --git a/app/src/apps/classroom_compliance/EntriesTable.vue b/app/src/apps/classroom_compliance/EntriesTable.vue
index 49ee342..db99efb 100644
--- a/app/src/apps/classroom_compliance/EntriesTable.vue
+++ b/app/src/apps/classroom_compliance/EntriesTable.vue
@@ -8,10 +8,10 @@ import {
 } from '@/api/classroom_compliance'
 import { useAuthStore } from '@/stores/auth'
 import { computed, onMounted, ref, watch, type Ref } from 'vue'
-import EntryTableCell from '@/apps/classroom_compliance/EntryTableCell.vue'
-import { RouterLink } from 'vue-router'
-import StudentScoreCell from '@/apps/classroom_compliance/StudentScoreCell.vue'
-import DateHeaderCell from '@/apps/classroom_compliance/DateHeaderCell.vue'
+import EntryTableCell from '@/apps/classroom_compliance/entries_table/EntryTableCell.vue'
+import StudentScoreCell from '@/apps/classroom_compliance/entries_table/StudentScoreCell.vue'
+import DateHeaderCell from '@/apps/classroom_compliance/entries_table/DateHeaderCell.vue'
+import StudentNameCell from '@/apps/classroom_compliance/entries_table/StudentNameCell.vue'
 
 const authStore = useAuthStore()
 const props = defineProps<{
@@ -232,13 +232,7 @@ function addAllEntriesForDate(dateStr: string) {
       </thead>
       <tbody>
         <tr v-for="student in students" :key="student.id">
-          <!-- Student's name: -->
-          <td :class="{ 'student-removed': student.removed }">
-            <RouterLink :to="'/classroom-compliance/classes/' + classId + '/students/' + student.id"
-              class="student-link">
-              <span v-text="student.name"></span>
-            </RouterLink>
-          </td>
+          <StudentNameCell :student="student" :class-id="classId" />
           <!-- Desk Number: -->
           <td v-if="assignedDesks" v-text="student.deskNumber"></td>
           <!-- A cell for each entry in the table's date range: -->
@@ -269,13 +263,4 @@ function addAllEntriesForDate(dateStr: string) {
   border: 1px solid black;
   border-collapse: collapse;
 }
-
-.student-link {
-  text-decoration: none;
-  color: inherit;
-}
-
-.student-removed {
-  text-decoration: line-through;
-}
 </style>
diff --git a/app/src/apps/classroom_compliance/DateHeaderCell.vue b/app/src/apps/classroom_compliance/entries_table/DateHeaderCell.vue
similarity index 100%
rename from app/src/apps/classroom_compliance/DateHeaderCell.vue
rename to app/src/apps/classroom_compliance/entries_table/DateHeaderCell.vue
diff --git a/app/src/apps/classroom_compliance/EntryTableCell.vue b/app/src/apps/classroom_compliance/entries_table/EntryTableCell.vue
similarity index 100%
rename from app/src/apps/classroom_compliance/EntryTableCell.vue
rename to app/src/apps/classroom_compliance/entries_table/EntryTableCell.vue
diff --git a/app/src/apps/classroom_compliance/entries_table/StudentNameCell.vue b/app/src/apps/classroom_compliance/entries_table/StudentNameCell.vue
new file mode 100644
index 0000000..3fda942
--- /dev/null
+++ b/app/src/apps/classroom_compliance/entries_table/StudentNameCell.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { EntriesResponseStudent } from '@/api/classroom_compliance';
+defineProps<{
+  student: EntriesResponseStudent,
+  classId: number
+}>()
+</script>
+<template>
+  <td :class="{ 'student-removed': student.removed }">
+    <RouterLink :to="'/classroom-compliance/classes/' + classId + '/students/' + student.id" class="student-link">
+      <span v-text="student.name"></span>
+    </RouterLink>
+  </td>
+</template>
+<style scoped>
+.student-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.student-removed {
+  text-decoration: line-through;
+}
+</style>
diff --git a/app/src/apps/classroom_compliance/StudentScoreCell.vue b/app/src/apps/classroom_compliance/entries_table/StudentScoreCell.vue
similarity index 100%
rename from app/src/apps/classroom_compliance/StudentScoreCell.vue
rename to app/src/apps/classroom_compliance/entries_table/StudentScoreCell.vue