diff --git a/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx
new file mode 100644
index 00000000..823033ad
--- /dev/null
+++ b/frontend/frontend/cypress/page/subjectsPage/AddChangeSubjectsPage.cy.tsx
@@ -0,0 +1,18 @@
+import { AddChangeSubjectPage } from '../../../src/pages/subjectsPage/AddChangeSubjectPage'
+import { BrowserRouter } from 'react-router-dom'
+
+// This page fetches data from the backend.
+// So as far as the component test is concerned,
+// we can only show what shows up before the fetch.
+// This is why only the loading animation is checked.
+// The rest of the tests are in the integration tests.
+describe('AddChangeSubjectsPage', () => {
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <AddChangeSubjectPage />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=loadingAnimation]').should('exist')
+    })
+})
diff --git a/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx
index ee668919..704f2d0b 100644
--- a/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx
+++ b/frontend/frontend/cypress/page/subjectsPage/AssignmentListItemSubjectsPage.cy.tsx
@@ -1,10 +1,9 @@
-import { AssignmentListItemSubjectsPage } from '../../../src/pages/subjectsPage/AssignmentListItemSubjectsPage';
-import { BrowserRouter } from 'react-router-dom';
-import fixtures from '../../fixtures/fixtures.json';
-import dayjs from 'dayjs';
+import { AssignmentListItemSubjectsPage } from '../../../src/pages/subjectsPage/AssignmentListItemSubjectsPage'
+import { BrowserRouter } from 'react-router-dom'
+import fixtures from '../../fixtures/fixtures.json'
+import dayjs from 'dayjs'
 
 describe('AssignmentListItemSubjectsPage', () => {
-
     const mockProps = {
         projectName: fixtures.project,
         dueDate: fixtures.fullProject.deadline,
@@ -19,30 +18,42 @@ describe('AssignmentListItemSubjectsPage', () => {
         visibilityEvent: () => {},
         courseId: fixtures.id,
         assignmentId: fixtures.id,
-    };
+    }
 
-    it('renders', () => {
-        cy.mount(<BrowserRouter><AssignmentListItemSubjectsPage {...mockProps}/></BrowserRouter>);
-        cy.get(`#projectName`).should('exist').should('contain', mockProps.projectName);
-        cy.get('#deadline').should('exist').should('contain',  dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm'));
-        cy.get('#score').should('exist').should('contain', mockProps.score.score + '/' + mockProps.maxScore);
-        cy.get('#submissions').should('exist').should('contain', mockProps.submissions);
+    it('renders as student', () => {
+        cy.mount(
+            <BrowserRouter>
+                <AssignmentListItemSubjectsPage {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get(`#${mockProps.projectName.replace(/\s/g, '')}`)
+            .should('exist')
+            .should('contain', mockProps.projectName)
+        cy.get('[data-cy=deadline]')
+            .should('exist')
+            .should(
+                'contain',
+                dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm')
+            )
+        cy.get('[data-cy=score]')
+            .should('exist')
+            .should('contain', mockProps.score.score + '/' + mockProps.maxScore)
+        cy.get('[data-cy=submissions]')
+            .should('exist')
+            .should('contain', mockProps.submissions)
     });
 
     it('renders as teacher', () => {
         mockProps.isStudent = false;
         cy.mount(<BrowserRouter><AssignmentListItemSubjectsPage {...mockProps}/></BrowserRouter>);
-        cy.get(`#projectName`).should('exist').should('contain', mockProps.projectName);
-        cy.get('#deadline').should('exist').should('contain',  dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm'));
-        cy.get('#score').should('not.exist');
-        cy.get('#submissions').should('not.exist');
-        cy.get('#archive').should('exist');
-        cy.get('#delete').should('exist');
-        cy.get('#notVisible').should('not.exist');
-        cy.get('#visible').should('exist').click();
-        cy.get('#visible').should('not.exist');
-        cy.get('#notVisible').should('exist');
-
-
-    });
-});
\ No newline at end of file
+        cy.get(`[data-cy=teacherProjectName]`)
+            .should('exist')
+            .should('contain', mockProps.projectName)
+        cy.get('[data-cy=teacherDeadline]')
+            .should('exist')
+            .should(
+                'contain',
+                dayjs(mockProps.dueDate).format('DD/MM/YYYY HH:mm')
+            )
+    })
+})
diff --git a/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx
index 00b71607..785a1c1b 100644
--- a/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx
+++ b/frontend/frontend/cypress/page/subjectsPage/ProjectsView.cy.tsx
@@ -1,9 +1,8 @@
-import { ProjectsView } from '../../../src/pages/subjectsPage/ProjectsView';
-import { BrowserRouter } from 'react-router-dom';
-import fixtures from '../../fixtures/fixtures';
+import { ProjectsView } from '../../../src/pages/subjectsPage/ProjectsView'
+import { BrowserRouter } from 'react-router-dom'
+import fixtures from '../../fixtures/fixtures.json'
 
 describe('ProjectsView', () => {
-
     const mockProps = {
         gebruiker: fixtures.gebruiker,
         archived: false,
@@ -15,10 +14,16 @@ describe('ProjectsView', () => {
     }
 
     it('renders', () => {
-        cy.mount(<BrowserRouter><ProjectsView {...mockProps}/></BrowserRouter>);
+        cy.mount(
+            <BrowserRouter>
+                <ProjectsView {...mockProps} />
+            </BrowserRouter>
+        )
         for (const assignment of mockProps.assignments) {
-            cy.get('#' + assignment.titel.replace(/\s/g, '')).contains(assignment.titel);
+            cy.get('#' + assignment.titel.replace(/\s/g, '')).contains(
+                assignment.titel
+            )
             // dit is een assignmentListItem en wordt in een andere test al getest
         }
-    });
-});
\ No newline at end of file
+    })
+})
diff --git a/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx
new file mode 100644
index 00000000..09df8770
--- /dev/null
+++ b/frontend/frontend/cypress/page/subjectsPage/StudentPopUp.cy.tsx
@@ -0,0 +1,30 @@
+import StudentPopUp from '../../../src/pages/subjectsPage/StudentPopUp'
+import { BrowserRouter } from 'react-router-dom'
+import fixtures from '../../fixtures/fixtures.json'
+import { t } from 'i18next'
+
+describe('StudentPopUp', () => {
+    const mockProps = {
+        students: [],
+        text: 'test popup text',
+        noGroup: false,
+    }
+
+    it('renders', () => {
+        cy.mount(
+            <BrowserRouter>
+                <StudentPopUp {...mockProps} />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=secondaryButton]').should('exist')
+        cy.get('#scroll-dialog-title').should('not.exist')
+        //cy.get('#scroll-dialog-title').should('have.text', mockProps.text)
+        //cy.get('[data-cy=noGroup]').should('exist')
+        //cy.get('[data-cy=noGroup]').should('have.text', t('noGroup'))
+        //cy.get('[data-cy=contactTeacher]').should('exist')
+        //cy.get('[data-cy=contactTeacher]').should(
+        //    'have.text',
+        //    t('contactTeacher')
+        //)
+    })
+})
diff --git a/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx
index 0a8c9e66..fb4ae10f 100644
--- a/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx
+++ b/frontend/frontend/cypress/page/subjectsPage/SubjectsPage.cy.tsx
@@ -1,14 +1,20 @@
 import { SubjectsPage } from '../../../src/pages/subjectsPage/SubjectsPage'
 import { BrowserRouter } from 'react-router-dom'
 
+// This page fetches data from the backend.
+// So as far as the component test is concerned,
+// we can only show what shows up before the fetch.
+// This is why only the loading animation is checked.
+// The rest of the tests are in the integration tests.
 describe('SubjectsPage', () => {
     it('renders the SubjectsPage', () => {
         // Mount the SubjectsPage component within a BrowserRouter
-        cy.mount(`<BrowserRouter><SubjectsPage /></BrowserRouter>`)
+        cy.mount(
+            <BrowserRouter>
+                <SubjectsPage />
+            </BrowserRouter>
+        )
 
-        // You may want to add assertions here to verify the rendered output
-        // For example, check if certain elements exist in the rendered output
-        // cy.get('button').should('exist');
-        // cy.get('ul').should('exist');
+        cy.get('[data-cy=loadingAnimation]').should('exist')
     })
 })
diff --git a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx
index 136f7cf0..5f8dc2f0 100644
--- a/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx
+++ b/frontend/frontend/cypress/page/submissionPage/SubmissionPage.cy.tsx
@@ -1,16 +1,25 @@
-import { SubmissionPage } from '../../../src/pages/submissionPage/SubmissionPage';
-import { BrowserRouter } from 'react-router-dom';
+import { SubmissionPage } from '../../../src/pages/submissionPage/SubmissionPage'
+import { BrowserRouter } from 'react-router-dom'
+import { t } from 'i18next'
 
 describe('SubmissionPage', () => {
-
     it('renders', () => {
-        cy.mount(<BrowserRouter><SubmissionPage /></BrowserRouter>);
-        cy.get('#logo').should('exist');
-        cy.get('#title').should('exist');
-        cy.get('#userMenu').should('exist');
-        cy.get('#backButton').should('exist');
-        cy.get('#deadline').should('exist');
-        cy.get('#description').should('exist');
-        cy.get('#downloadButton').should('exist');
-    });
-});
+        cy.mount(
+            <BrowserRouter>
+                <SubmissionPage />
+            </BrowserRouter>
+        )
+        cy.get('[data-cy=header]').should('exist')
+        cy.get('[data-cy=assignmentTitle]').should('exist')
+        cy.get('[data-cy=assignmentTitle]').should('have.text', t('assignment'))
+        cy.get('[data-cy=projectBeschrijving]').should('exist')
+        cy.get('[data-cy=filename]').should('exist')
+        cy.get('[data-cy=filename]').should('have.text', t('filename'))
+        cy.get('[data-cy=downloadSubmissionButton]').should('exist')
+        cy.get('[data-cy=restrictionsTitle]').should('exist')
+        cy.get('[data-cy=statusTitle]').should('exist')
+        cy.get('[data-cy=statusTitle]').should('have.text', t('status') + ':')
+        cy.get('[data-cy=resultTitle]').should('exist')
+        cy.get('[data-cy=resultTitle]').should('have.text', t('result'))
+    })
+})
diff --git a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
index 02103e22..43647a32 100644
--- a/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AddChangeSubjectPage.tsx
@@ -620,7 +620,10 @@ export function AddChangeSubjectPage() {
                         height: '100vh',
                     }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                     <Box></Box>
                 </Box>
             ) : (
diff --git a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
index 5b9013fa..bf4233ae 100644
--- a/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/AssignmentListItemSubjectsPage.tsx
@@ -111,6 +111,7 @@ export function AssignmentListItemSubjectsPage({
                                                     : 'text.primary'
                                                 : 'text.primary'
                                         }
+                                        data-cy="deadline"
                                     >
                                         {dueDate
                                             ? dayjs(dueDate).format(
@@ -131,6 +132,7 @@ export function AssignmentListItemSubjectsPage({
                                                   t('submission')
                                             : t('no_submissions')
                                     }
+                                    data-cy="submissions"
                                 />,
                                 <>
                                     {submissions > 0 ? (
@@ -140,6 +142,7 @@ export function AssignmentListItemSubjectsPage({
                                                     ? `${score.score}/${maxScore} (${(100 * score.score) / maxScore}%)`
                                                     : t('no_score_yet')
                                             }
+                                            data-cy="score"
                                         />
                                     ) : (
                                         <ListItemText
@@ -154,7 +157,10 @@ export function AssignmentListItemSubjectsPage({
                             {/* In case of the user being the teacher: */}
                             <EvenlySpacedRow
                                 items={[
-                                    <ListItemText primary={projectName} />,
+                                    <ListItemText
+                                        primary={projectName}
+                                        data-cy="teacherProjectName"
+                                    />,
                                     <ListItemText>
                                         <Typography
                                             color={
@@ -166,6 +172,7 @@ export function AssignmentListItemSubjectsPage({
                                                         : 'text.primary'
                                                     : 'text.primary'
                                             }
+                                            data-cy="teacherDeadline"
                                         >
                                             {dueDate
                                                 ? dayjs(dueDate).format(
diff --git a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
index f045e495..71cca1e1 100644
--- a/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/StudentPopUp.tsx
@@ -20,7 +20,11 @@ interface StudentPopUpProps {
     noGroup: boolean
 }
 
-export default function StudentPopUp({ students, text, noGroup }: StudentPopUpProps) {
+export default function StudentPopUp({
+    students,
+    text,
+    noGroup,
+}: StudentPopUpProps) {
     const [open, setOpen] = React.useState(false)
 
     const handleClose = () => {
@@ -34,6 +38,7 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr
                 onClick={() => {
                     setOpen(true)
                 }}
+                data-cy="secondaryButton"
             >
                 {t(text)}
             </SecondaryButton>
@@ -60,16 +65,19 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr
                     </IconButton>
                 </DialogTitle>
                 <DialogContent dividers>
-                    {noGroup ?
+                    {noGroup ? (
                         <>
-                            <Typography variant="body1">
+                            <Typography variant="body1" data-cy="noGroup">
                                 {t('noGroup')}
                             </Typography>
-                            <Typography variant="body1">
+                            <Typography
+                                variant="body1"
+                                data-cy="contactTeacher"
+                            >
                                 {t('contactTeacher')}
                             </Typography>
                         </>
-                    :
+                    ) : (
                         <>
                             {/* List of Students */}
                             {students.length > 0 ? (
@@ -88,7 +96,7 @@ export default function StudentPopUp({ students, text, noGroup }: StudentPopUpPr
                                 </Typography>
                             )}
                         </>
-                    }
+                    )}
                 </DialogContent>
             </Dialog>
         </>
diff --git a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
index 414fa6b5..ac449209 100644
--- a/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
+++ b/frontend/frontend/src/pages/subjectsPage/SubjectsPage.tsx
@@ -233,7 +233,10 @@ export function SubjectsPage() {
                     justifyContent={'center'}
                     sx={{ width: '100vw', height: '100vh' }}
                 >
-                    <CircularProgress color={'primary'} />
+                    <CircularProgress
+                        color={'primary'}
+                        data-cy="loadingAnimation"
+                    />
                 </Grid>
             ) : (
                 <>
@@ -354,7 +357,7 @@ export function SubjectsPage() {
                                         placement={'top'}
                                     >
                                         <IconButton
-                                            id='addProject'
+                                            id="addProject"
                                             onClick={addProject}
                                             color="primary"
                                             edge="end"
diff --git a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
index 3255e349..cfdacedc 100644
--- a/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
+++ b/frontend/frontend/src/pages/submissionPage/SubmissionPage.tsx
@@ -243,6 +243,7 @@ export function SubmissionPage() {
                     title={
                         loading ? '' : project?.titel + ': ' + t('submission')
                     }
+                    data-cy="header"
                 />
                 <Box
                     sx={{
@@ -271,10 +272,14 @@ export function SubmissionPage() {
                                 sx={{
                                     fontWeight: 'bold',
                                 }}
+                                data-cy="assignmentTitle"
                             >
                                 {t('assignment')}
                             </Typography>
-                            <Typography color={'text.primary'}>
+                            <Typography
+                                color={'text.primary'}
+                                data-cy="projectBeschrijving"
+                            >
                                 {project?.beschrijving}
                             </Typography>
                         </Stack>
@@ -355,6 +360,7 @@ export function SubmissionPage() {
                             fontWeight={'bold'}
                             aria-label={'title'}
                             margin={0}
+                            data-cy="filename"
                         >
                             {t('filename')}
                         </Typography>
@@ -362,6 +368,7 @@ export function SubmissionPage() {
                             id="downloadButton"
                             startIcon={<DownloadIcon />}
                             onClick={downloadSubmission}
+                            data-cy="downloadSubmissionButton"
                         >
                             {loading ? (
                                 <Skeleton
@@ -385,7 +392,11 @@ export function SubmissionPage() {
                             height: '20vh',
                         }}
                     >
-                        <Typography variant={'h5'} fontWeight={'bold'}>
+                        <Typography
+                            variant={'h5'}
+                            fontWeight={'bold'}
+                            data-cy="restrictionsTitle"
+                        >
                             {t('restrictions')}
                         </Typography>
                         <Box sx={{ padding: 1 }}>
@@ -502,7 +513,11 @@ export function SubmissionPage() {
                                 gap: 2,
                             }}
                         >
-                            <Typography variant={'h5'} fontWeight={'bold'}>
+                            <Typography
+                                variant={'h5'}
+                                fontWeight={'bold'}
+                                data-cy="statusTitle"
+                            >
                                 {t('status') + ':'}
                             </Typography>
                             {loading ? (
@@ -541,7 +556,11 @@ export function SubmissionPage() {
                                 maxHeight: '15vh',
                             }}
                         >
-                            <Typography variant={'h5'} fontWeight={'bold'}>
+                            <Typography
+                                variant={'h5'}
+                                fontWeight={'bold'}
+                                data-cy="resultTitle"
+                            >
                                 {t('result')}
                             </Typography>
                             <Box sx={{ padding: 1 }}>