diff --git a/frontend/app/[locale]/components/CourseCard.tsx b/frontend/app/[locale]/components/CourseCard.tsx
index da25c026..e8a8732e 100644
--- a/frontend/app/[locale]/components/CourseCard.tsx
+++ b/frontend/app/[locale]/components/CourseCard.tsx
@@ -42,11 +42,12 @@ const CourseCard = ({params: {course}}: { params: { course: Course } }) => {
 
         fetchProjects();
     }, [course.course_id]);
-    
+
     const headers = [
-     <React.Fragment><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
-    <React.Fragment><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
-    '']
+    <React.Fragment key="name"><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
+    <React.Fragment key="deadline"><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
+    ''
+];
     const headers_backend = ['name', 'deadline', '']
 
 
diff --git a/frontend/app/[locale]/components/GroupSubmissionList.tsx b/frontend/app/[locale]/components/GroupSubmissionList.tsx
index 73043091..04f67477 100644
--- a/frontend/app/[locale]/components/GroupSubmissionList.tsx
+++ b/frontend/app/[locale]/components/GroupSubmissionList.tsx
@@ -14,9 +14,9 @@ const GroupSubmissionList = ({project_id, page_size = 5, search}: {
 }) => {
     const {t} = useTranslation()
     const headers = [
-        <React.Fragment><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>,
-        <React.Fragment><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment>,
-        <React.Fragment><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment>,
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>,
+        <React.Fragment key="submission_date"><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment>,
+        <React.Fragment key="status"><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment>,
         ""
     ];
     const headers_backend = ["group_nr", "submission_date", "status", ""]
diff --git a/frontend/app/[locale]/components/ProjectSubmissionsList.tsx b/frontend/app/[locale]/components/ProjectSubmissionsList.tsx
index 001832b5..4d488ec4 100644
--- a/frontend/app/[locale]/components/ProjectSubmissionsList.tsx
+++ b/frontend/app/[locale]/components/ProjectSubmissionsList.tsx
@@ -15,11 +15,11 @@ const ProjectSubmissionsList = ({project_id, page_size = 5, search}: {
 }) => {
     const {t} = useTranslation()
     const headers = [
-        <React.Fragment><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_number')}</React.Fragment>
         ,
-        <React.Fragment><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment> 
+        <React.Fragment key="submission_date"><CalendarMonthIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('submission_date')}</React.Fragment> 
         ,
-        <React.Fragment><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment> 
+        <React.Fragment key="status"><CheckCircleOutlineIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('Status')}</React.Fragment> 
         , ""]
     const headers_backend = ["group_nr", "submission_date", "status", ""]
     const sortable = [true, true, false]
diff --git a/frontend/app/[locale]/course/[course_id]/page.tsx b/frontend/app/[locale]/course/[course_id]/page.tsx
index ebe63e84..112a31fe 100644
--- a/frontend/app/[locale]/course/[course_id]/page.tsx
+++ b/frontend/app/[locale]/course/[course_id]/page.tsx
@@ -19,8 +19,8 @@ export default async function Course({params: {locale, course_id}, searchParams:
     const {t, resources} = await initTranslations(locale, i18nNamespaces)
 
     const headers = [
-        <React.Fragment><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
-       <React.Fragment><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
+        <React.Fragment key="name"><Person style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('name')}</React.Fragment>, 
+       <React.Fragment key="deadline"><AccesAlarm style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " +t('deadline')}</React.Fragment>, 
        '']
     const headers_backend = ['name', 'deadline', '']
 
diff --git a/frontend/app/[locale]/course/[course_id]/students/page.tsx b/frontend/app/[locale]/course/[course_id]/students/page.tsx
index fdd17f4e..d371e064 100644
--- a/frontend/app/[locale]/course/[course_id]/students/page.tsx
+++ b/frontend/app/[locale]/course/[course_id]/students/page.tsx
@@ -14,7 +14,7 @@ export default async function StudentsPage({ params }: { params: { locale: any,
     const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
     const headers = [
-        <React.Fragment><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
+        <React.Fragment key="email"><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
     const headers_backend = ['email'];
     
     return (
diff --git a/frontend/app/[locale]/course/[course_id]/teachers/page.tsx b/frontend/app/[locale]/course/[course_id]/teachers/page.tsx
index 75d78aec..0bce25da 100644
--- a/frontend/app/[locale]/course/[course_id]/teachers/page.tsx
+++ b/frontend/app/[locale]/course/[course_id]/teachers/page.tsx
@@ -13,7 +13,7 @@ export default async function TeachersPage({params}: { params: { locale: any, co
     const {locale, course_id} = params;
     const {t, resources} = await initTranslations(locale, i18nNamespaces);
 
-    const headers = [<React.Fragment><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
+    const headers = [<React.Fragment key="email"><EmailIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('email')}</React.Fragment>];
     const headers_backend = ['email'];
 
     return (
diff --git a/frontend/app/[locale]/course/all/page.tsx b/frontend/app/[locale]/course/all/page.tsx
index a12292e1..c7a556aa 100644
--- a/frontend/app/[locale]/course/all/page.tsx
+++ b/frontend/app/[locale]/course/all/page.tsx
@@ -15,9 +15,9 @@ export default async function AllCoursesPage({params: {locale}}: { params: { loc
     const {t, resources} = await initTranslations(locale, i18nNamespaces)
 
     const headers = [t('name'), 
-    <React.Fragment><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
+    <React.Fragment key="description"><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
     , t('open'), 
-    <React.Fragment><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
+    <React.Fragment key="joinleave"><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
     const headers_backend = ['name', 'description', 'open', 'join/leave']
 
     return (
diff --git a/frontend/app/[locale]/course/archived/page.tsx b/frontend/app/[locale]/course/archived/page.tsx
index 251aee07..64db6af1 100644
--- a/frontend/app/[locale]/course/archived/page.tsx
+++ b/frontend/app/[locale]/course/archived/page.tsx
@@ -11,7 +11,7 @@ const i18nNamespaces = ['common'];
 const ArchivePage = async ({params: {locale}}) => {
     const {t, resources} = await initTranslations(locale, i18nNamespaces);
     const headers = [t('name'), 
-    <React.Fragment><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
+    <React.Fragment key="description"><NotesIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('description')}</React.Fragment>,
     , t('open')];
     const headers_backend = ['name', 'description', 'open'];
 
diff --git a/frontend/app/[locale]/project/[project_id]/groups/page.tsx b/frontend/app/[locale]/project/[project_id]/groups/page.tsx
index c282a473..f6e36ec2 100644
--- a/frontend/app/[locale]/project/[project_id]/groups/page.tsx
+++ b/frontend/app/[locale]/project/[project_id]/groups/page.tsx
@@ -15,9 +15,9 @@ export default async function GroupPage({ params }: { params: { locale: any, pro
     const { t, resources } = await initTranslations(locale, i18nNamespaces);
 
     const headers = [
-        <React.Fragment><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_nr')}</React.Fragment>
+        <React.Fragment key="group_nr"><GroupsIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('group_nr')}</React.Fragment>
         , t('members'), 
-        <React.Fragment><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
+        <React.Fragment key="joinleave"><MeetingRoomIcon style={{ fontSize: '20px', verticalAlign: 'middle', marginBottom: '3px' }}/>{" " + t('join_leave')}</React.Fragment>];
     const headers_backend = ['group_nr', 'members', 'join/leave'];
     
     return (