diff --git a/cypress/e2e/Population_statistics.js b/cypress/e2e/Population_statistics.js
index 06b3079e38..14e5fdb5ed 100644
--- a/cypress/e2e/Population_statistics.js
+++ b/cypress/e2e/Population_statistics.js
@@ -109,7 +109,8 @@ describe('Population statistics tests', () => {
       cy.contains('Courses of class').click()
       cy.get('[data-cy=curriculum-picker]').contains('2020–2023')
       cy.get('[data-cy=toggle-group-module-MAT-tyo]')
-      cy.get('[data-cy=curriculum-picker]').click().contains('2023–2026').click()
+      cy.get('[data-cy=curriculum-picker]').click()
+      cy.contains('2023–2026').click()
       cy.get('[data-cy=toggle-group-module-MAT-tyo]').should('not.exist')
     })
 
@@ -117,14 +118,17 @@ describe('Population statistics tests', () => {
       cy.visit(pathToMathBSc2020)
       cy.contains('Courses of class').click()
       cy.intercept('/api/v2/populationstatistics/courses').as('courseData')
-      cy.get('[data-cy=curriculum-picker]').click().contains('2020–2023').click()
+      cy.get('[data-cy=curriculum-picker]').click()
+      cy.contains('2020–2023').click({ force: true })
+
       cy.wait('@courseData').then(({ response }) => {
         expect(response.body).to.have.property('allStudents')
         expect(response.body).to.have.property('coursestatistics')
         expect(response.body.allStudents).to.equal(27)
         expect(response.body.coursestatistics.some(stat => stat.course.code === 'DIGI-100')).to.equal(true)
       })
-      cy.get('[data-cy=curriculum-picker]').click().contains('2023–2026').click()
+      cy.get('[data-cy=curriculum-picker]').click()
+      cy.contains('2023–2026').click()
       cy.wait('@courseData').then(({ response }) => {
         expect(response.body).to.have.property('allStudents')
         expect(response.body).to.have.property('coursestatistics')
diff --git a/cypress/e2e/Students.js b/cypress/e2e/Students.js
index 307f6da2cc..509bd70fef 100644
--- a/cypress/e2e/Students.js
+++ b/cypress/e2e/Students.js
@@ -8,13 +8,21 @@ const student = {
   email: 'sisutestidata134902@testisisudata.fi',
 }
 
+const typeToSearch = text => {
+  cy.get("input[placeholder='Search with a student number or name (surname firstname)']").type(text)
+}
+
 const typeStudentNumberAndClick = studentNumber => {
-  cy.get('.prompt').type(studentNumber)
-  cy.contains('td a', studentNumber).click()
+  typeToSearch(studentNumber)
+  cy.contains('td', studentNumber).click()
+}
+
+const clearSearch = () => {
+  cy.get("input[placeholder='Search with a student number or name (surname firstname)']").clear()
 }
 
 describe('Students tests', () => {
-  describe('when using basic user', () => {
+  describe('When using basic user', () => {
     beforeEach(() => {
       cy.init()
       cy.contains('Students').click()
@@ -23,7 +31,7 @@ describe('Students tests', () => {
     })
 
     it('Students search form is usable', () => {
-      cy.get('.prompt').type(student.lastname)
+      typeToSearch(student.lastname)
       cy.contains('Student number')
       cy.contains('Started')
       cy.contains('Credits')
@@ -37,20 +45,19 @@ describe('Students tests', () => {
     })
 
     it('Search term must be at least 4 characters long', () => {
-      cy.get('.prompt').type(student.lastname.slice(0, 3))
-      cy.contains('No search results or search term is not accurate enough')
-      cy.get('.prompt').type(student.lastname.slice(3))
+      typeToSearch(student.lastname.slice(0, 3))
+      cy.contains('Search term is not accurate enough')
+      typeToSearch(student.lastname.slice(3))
       cy.get('table tbody tr').should('have.length', 1)
     })
 
-    it('can search with studentnumber too', () => {
-      cy.get('.prompt').type(student.studentnumber)
+    it('Can search with studentnumber too', () => {
+      typeToSearch(student.studentnumber)
       cy.contains(student.studentnumber)
     })
 
     it('Can get student specific page by clicking student', () => {
-      cy.get('.prompt').type(student.studentnumber)
-      cy.contains('td a', student.studentnumber).click()
+      typeStudentNumberAndClick(student.studentnumber)
       cy.contains('Matemaattisten tieteiden kandiohjelma (01.08.2020–31.07.2027)')
       cy.contains(student.lastname).should('not.exist')
       cy.contains(student.firstnames).should('not.exist')
@@ -69,7 +76,7 @@ describe('Students tests', () => {
 
     it("'Update student' button is not shown", () => {
       typeStudentNumberAndClick(student.studentnumber)
-      cy.get('div.ui.fluid.card').within(() => {
+      cy.get('[data-cy=student-info-card]').within(() => {
         cy.contains('button', 'Update student').should('not.exist')
       })
     })
@@ -88,7 +95,7 @@ describe('Students tests', () => {
         .siblings()
         .last()
         .within(() => {
-          cy.get('.level').click()
+          cy.get('a').click()
         })
       cy.url().should('include', '/coursestatistics')
       cy.contains('MAT12004 Tilastollinen päättely I')
@@ -98,7 +105,7 @@ describe('Students tests', () => {
 
     it('Has correct Sisu link', () => {
       typeStudentNumberAndClick(student.studentnumber)
-      cy.get('[data-cy=sisulink] > a')
+      cy.get('[data-cy=sisu-link]')
         .should('have.attr', 'href')
         .and('include', `https://sisu.helsinki.fi/tutor/role/staff/student/${student.sis_person_id}/basic/basic-info`)
     })
@@ -110,7 +117,7 @@ describe('Students tests', () => {
         'Matemaattisten tieteiden kandiohjelma',
         'Oikeustieteen maisterin koulutusohjelmaOikeusnotaarin koulutusohjelma',
       ]
-      cy.get('div.ui.fluid.card').within(() => {
+      cy.get('[data-cy=student-info-card]').within(() => {
         cy.contains('Enrollments').click()
         cy.get('table tbody tr')
           .should('have.length', 3)
@@ -122,18 +129,22 @@ describe('Students tests', () => {
       })
     })
 
-    it('Searching with bad inputs doesnt yield results', () => {
-      cy.get('.prompt').type('SWAG LITTINEN')
+    it("Searching with bad inputs doesn't yield results", () => {
+      typeToSearch('SWAG LITTINEN')
       cy.contains('Student number').should('not.exist')
-
-      cy.get('.prompt').clear().type('01114')
+      clearSearch()
+      typeToSearch('01114')
       cy.contains('Student number').should('not.exist')
     })
 
     it('Can jump to population page', () => {
       typeStudentNumberAndClick(student.studentnumber)
-      cy.contains('.ui.table', 'Completed').within(() => {
-        cy.get('i.level.up.alternate.icon').click()
+      cy.get('[data-cy=study-rights-section]').within(() => {
+        cy.contains('Matemaattisten tieteiden kandiohjelma')
+          .parent()
+          .within(() => {
+            cy.get('a').click()
+          })
       })
       cy.contains('Matemaattisten tieteiden kandiohjelma 2020 - 2021')
       cy.contains('class size 30 students')
@@ -141,33 +152,32 @@ describe('Students tests', () => {
 
     it('Grade graph works in all three different modes', () => {
       typeStudentNumberAndClick(student.studentnumber)
-      cy.contains('a.item', 'Grade graph').click()
-      cy.contains('text.highcharts-title', 'Grade plot')
-      cy.contains('a.item', 'Show group mean').click()
-      cy.get('.labeled.input').within(() => {
-        cy.contains('.label', 'Group size')
+      cy.contains('button', 'Grade graph').click()
+      cy.contains('button', 'Show group mean').click()
+      cy.get('[data-cy=group-size-input]').within(() => {
+        cy.contains('label', 'Group size')
         cy.get('input').should('have.value', '5')
       })
       cy.contains('.highcharts-container text', "Nov '22")
       cy.contains('.highcharts-container text', "Jul '22").should('not.exist')
-      cy.contains('text.highcharts-title', 'Grade plot')
-      cy.get('.labeled.input').within(() => {
-        cy.contains('.label', 'Group size')
-        cy.get('input').clear().type('10')
+      cy.get('[data-cy=group-size-input]').within(() => {
+        cy.contains('label', 'Group size')
+        cy.get('input').clear()
+        cy.get('input').type('10')
         cy.get('input').should('have.value', '10')
       })
       cy.contains('.highcharts-container text', "Jul '22")
       cy.contains('.highcharts-container text', "Nov '22").should('not.exist')
-      cy.contains('a.item', 'Show semester mean').click()
+      cy.contains('button', 'Show semester mean').click()
       cy.contains('.highcharts-container text', "Jan '22")
     })
 
     describe('Bachelor Honours section', () => {
       it("Shows 'Qualified for Honours' tag and main modules info when the student is qualified", () => {
         cy.visit('/students/495976')
-        cy.contains('.divider h4', 'Bachelor Honours')
-        cy.contains('.green.tag.label', 'Qualified for Honours')
-        cy.contains('Main courses and other modules').click()
+        cy.contains('h2', 'Bachelor Honours')
+        cy.contains('[data-cy=honours-chip-qualified]', 'Qualified for Honours')
+        cy.contains('Study modules').click()
         cy.get('[data-cy=main-modules] tbody tr')
           .should('have.length', 3)
           .each(($tr, index) => {
@@ -186,35 +196,35 @@ describe('Students tests', () => {
 
       it("Shows 'Did not graduate in time' when the student has graduated but not in time", () => {
         cy.visit('/students/540355')
-        cy.contains('.divider h4', 'Bachelor Honours')
-        cy.contains('.red.tag.label', 'Not qualified for Honours')
-        cy.contains('.red.tag.label', 'Did not graduate in time')
+        cy.contains('h2', 'Bachelor Honours')
+        cy.contains('[data-cy=honours-chip-not-qualified]', 'Not qualified for Honours')
+        cy.contains('[data-cy=honours-chip-error]', 'Did not graduate in time')
       })
 
       it("Shows 'Module grades too low' when the student has graduated in time but has too low grades", () => {
         cy.visit('/students/547934')
-        cy.contains('.divider h4', 'Bachelor Honours')
-        cy.contains('.red.tag.label', 'Not qualified for Honours')
-        cy.contains('.red.tag.label', 'Module grades too low')
+        cy.contains('h2', 'Bachelor Honours')
+        cy.contains('[data-cy=honours-chip-not-qualified]', 'Not qualified for Honours')
+        cy.contains('[data-cy=honours-chip-error]', 'Module grades too low')
       })
 
       it("Shows 'Might need further inspection' when the student has graduated in time but has more than four main modules", () => {
         cy.visit('/students/478837')
-        cy.contains('.divider h4', 'Bachelor Honours')
-        cy.contains('.blue.tag.label', 'Might need further inspection')
+        cy.contains('h2', 'Bachelor Honours')
+        cy.contains('[data-cy=honours-chip-inspection]', 'Might need further inspection')
       })
 
       it("Shows 'Has not graduated' when the student has not graduated", () => {
         cy.visit(`students/${student.studentnumber}`)
-        cy.contains('.divider h4', 'Bachelor Honours')
-        cy.contains('.red.tag.label', 'Not qualified for Honours')
-        cy.contains('.red.tag.label', 'Has not graduated')
+        cy.contains('h2', 'Bachelor Honours')
+        cy.contains('[data-cy=honours-chip-not-qualified]', 'Not qualified for Honours')
+        cy.contains('[data-cy=honours-chip-error]', 'Has not graduated')
       })
     })
   })
 
   // Use admin to see all students
-  describe('when using admin user', () => {
+  describe('When using admin user', () => {
     beforeEach(() => {
       cy.init('/students', 'admin')
     })
@@ -226,14 +236,14 @@ describe('Students tests', () => {
 
     it("'Update student' button is shown", () => {
       typeStudentNumberAndClick(student.studentnumber)
-      cy.get('div.ui.fluid.card').within(() => {
+      cy.get('[data-cy=student-info-card]').within(() => {
         cy.contains('button', 'Update student')
       })
     })
 
     it('Bachelor Honours section is not shown for students outside of Faculty of Science', () => {
       cy.visit('/students/453146')
-      cy.contains('.divider h4', 'Bachelor Honours').should('not.exist')
+      cy.contains('h2', 'Bachelor Honours').should('not.exist')
     })
 
     it('When a study plan is selected, courses included in the study plan are highlighted with a blue background', () => {
@@ -241,9 +251,11 @@ describe('Students tests', () => {
       cy.contains('table tbody tr', 'Kulttuurien tutkimuksen kandiohjelma (01.08.2020–30.06.2023)').within(() => {
         cy.get('td').eq(0).click()
       })
-      cy.contains('table tbody tr', 'Kandidaatintutkielma (KUKA-LIS222)')
-        .should('have.attr', 'style')
-        .and('equal', 'background-color: rgb(232, 244, 255);')
+      cy.contains('table tbody tr', 'Kandidaatintutkielma (KUKA-LIS222)').should(
+        'have.css',
+        'background-color',
+        'rgb(232, 244, 255)'
+      )
     })
 
     it('When a study plan is selected, the time frame of the credit graph is updated', () => {
diff --git a/cypress/e2e/Studyprogramme_overview.js b/cypress/e2e/Studyprogramme_overview.js
index 9da151a307..b66aa07d60 100644
--- a/cypress/e2e/Studyprogramme_overview.js
+++ b/cypress/e2e/Studyprogramme_overview.js
@@ -742,16 +742,23 @@ describe('Study programme overview', () => {
           cy.contains(studentNumber)
         }
 
-        cy.go('back')
+        for (const studentNumber of studentNumbers) {
+          cy.visit(`/students/${studentNumber}`)
+          cy.contains('Tags')
+          cy.contains(name)
+        }
+
+        cy.get('a').contains('Matemaattisten tieteiden kandiohjelma').invoke('removeAttr', 'target').click()
+        cy.url().should('include', '/study-programme/KH50_001?p_tab=4')
+
         deleteTag(name)
       })
 
       it('deleting a tag from tag view also removes it from students', () => {
         cy.contains(name).should('not.exist')
         for (const studentNumber of studentNumbers) {
-          cy.contains('Students').click()
-          cy.get('.prompt').type(studentNumber)
-          cy.contains('a', studentNumber).click()
+          cy.visit(`/students/${studentNumber}`)
+          cy.contains('Tags').should('not.exist')
           cy.contains(name).should('not.exist')
         }
       })
diff --git a/services/backend/src/services/students.ts b/services/backend/src/services/students.ts
index bdb1f167ef..7b9706d487 100644
--- a/services/backend/src/services/students.ts
+++ b/services/backend/src/services/students.ts
@@ -344,6 +344,7 @@ export const bySearchTermAndStudentNumbers = async (searchterm: string, studentN
             },
           }
         : { [Op.or]: [nameLike(terms), studentnumberLike(terms)] },
+      order: [['dateofuniversityenrollment', 'DESC NULLS LAST']],
     })
   ).map(formatSharedStudentData)
 }
diff --git a/services/frontend/src/components/PopulationDetails/CurriculumPicker.jsx b/services/frontend/src/components/PopulationDetails/CurriculumPicker.jsx
index b18528535c..a336417090 100644
--- a/services/frontend/src/components/PopulationDetails/CurriculumPicker.jsx
+++ b/services/frontend/src/components/PopulationDetails/CurriculumPicker.jsx
@@ -1,5 +1,6 @@
+import { FormControl, MenuItem, Select } from '@mui/material'
 import { useEffect, useState } from 'react'
-import { Dropdown, Form, Input, Radio } from 'semantic-ui-react'
+import { Form, Input, Radio } from 'semantic-ui-react'
 
 import { useGetCurriculumsQuery, useGetCurriculumOptionsQuery } from '@/redux/populationCourses'
 
@@ -45,23 +46,22 @@ export const CurriculumPicker = ({ setCurriculum, programmeCodes, disabled, year
   if (curriculums.length === 0) return null
 
   return (
-    <Dropdown
-      className="link item"
-      data-cy="curriculum-picker"
-      disabled={disabled}
-      onChange={(_, { value }) => setSelectedCurriculum(curriculums.find(curriculum => curriculum.id === value))}
-      options={curriculums.map(curriculum => ({
-        key: curriculum.curriculum_period_ids.toSorted().join(', '),
-        value: curriculum.id,
-        text: curriculum.curriculumName,
-      }))}
-      style={{
-        background: '#e3e3e3',
-        marginLeft: '10px',
-        padding: '4px 4px 4px 8px',
-      }}
-      value={chosenCurriculum.id}
-    />
+    <FormControl disabled={disabled} variant="standard">
+      <Select
+        MenuProps={{
+          disablePortal: true,
+        }}
+        data-cy="curriculum-picker"
+        onChange={event => setSelectedCurriculum(curriculums.find(({ id }) => id === event.target.value))}
+        value={chosenCurriculum.id}
+      >
+        {curriculums.map(curriculum => (
+          <MenuItem key={curriculum.id} value={curriculum.id}>
+            {curriculum.curriculumName}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
   )
 }
 
diff --git a/services/frontend/src/components/StudentStatistics/StudentInfoCard/studentInfoCard.css b/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.css
similarity index 80%
rename from services/frontend/src/components/StudentStatistics/StudentInfoCard/studentInfoCard.css
rename to services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.css
index 37ee1c2bd3..6c72e8d02f 100644
--- a/services/frontend/src/components/StudentStatistics/StudentInfoCard/studentInfoCard.css
+++ b/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.css
@@ -1,12 +1,3 @@
-.cardHeader {
-  display: flex !important;
-  justify-content: space-between !important;
-}
-
-.controlIcon {
-  cursor: pointer;
-}
-
 .enrollment-label-no-margin {
   border-radius: 0.28rem;
   box-shadow:
diff --git a/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx b/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx
index 06c5a19823..18953dd39e 100644
--- a/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx
+++ b/services/frontend/src/components/PopulationStudents/StudentTable/ProgressTab/index.jsx
@@ -6,7 +6,7 @@ import { Icon, Message, Tab } from 'semantic-ui-react'
 
 import { StudentInfoItem } from '@/components/common/StudentInfoItem'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
-import '@/components/StudentStatistics/StudentInfoCard/studentInfoCard.css'
+import './index.css'
 import { SortableTable } from '@/components/SortableTable'
 import { useStudentNameVisibility } from '@/components/StudentNameVisibilityToggle'
 import { ISO_DATE_FORMAT } from '@/constants/date'
diff --git a/services/frontend/src/components/Routes/index.jsx b/services/frontend/src/components/Routes/index.jsx
index 9d5a350e07..4d6c483602 100644
--- a/services/frontend/src/components/Routes/index.jsx
+++ b/services/frontend/src/components/Routes/index.jsx
@@ -10,7 +10,6 @@ import { CustomPopulation } from '@/components/CustomPopulation'
 import { LanguageCenterView } from '@/components/LanguageCenterView'
 import { PopulationStatistics } from '@/components/PopulationStatistics'
 import { SegmentDimmer } from '@/components/SegmentDimmer'
-import { StudentStatistics } from '@/components/StudentStatistics'
 import { StudyGuidanceGroups } from '@/components/StudyGuidanceGroups'
 import { StudyProgramme } from '@/components/StudyProgramme'
 import { Teachers } from '@/components/Teachers'
@@ -22,11 +21,14 @@ import { CloseToGraduation } from '@/pages/CloseToGraduation'
 import { Faculties } from '@/pages/Faculties'
 import { Feedback } from '@/pages/Feedback'
 import { FrontPage } from '@/pages/FrontPage'
+import { Students } from '@/pages/Students'
+import { StudentDetails } from '@/pages/Students/StudentDetails'
+import { StudentSearch } from '@/pages/Students/StudentSearch'
 import { University } from '@/pages/University'
 import { ProtectedRoute } from './ProtectedRoute'
 
 const routes = {
-  students: '/students/:studentNumber?',
+  students: '/students',
   courseStatistics: '/coursestatistics',
   teachers: '/teachers/:teacherid?',
   users: '/users/:userid?',
@@ -88,7 +90,10 @@ export const Routes = () => (
           <ProtectedRoute requireUserHasRights requiredRoles={['admin', 'fullSisuAccess', 'studyGuidanceGroups']} />
         }
       >
-        <Route element={<StudentStatistics />} path={routes.students} />
+        <Route element={<Students />} path={routes.students}>
+          <Route element={<StudentSearch />} index />
+          <Route element={<StudentDetails />} path=":studentNumber" />
+        </Route>
         <Route element={<CustomPopulation />} path={routes.custompopulation} />
       </Route>
 
diff --git a/services/frontend/src/components/StudentNameVisibilityToggle/index.jsx b/services/frontend/src/components/StudentNameVisibilityToggle/index.tsx
similarity index 54%
rename from services/frontend/src/components/StudentNameVisibilityToggle/index.jsx
rename to services/frontend/src/components/StudentNameVisibilityToggle/index.tsx
index e0a8409751..a07297be28 100644
--- a/services/frontend/src/components/StudentNameVisibilityToggle/index.jsx
+++ b/services/frontend/src/components/StudentNameVisibilityToggle/index.tsx
@@ -1,11 +1,12 @@
+import { FormControlLabel, Switch } from '@mui/material'
 import { useCallback } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Radio } from 'semantic-ui-react'
 
+import { RootState } from '@/redux'
 import { toggleStudentNameVisibility } from '@/redux/settings'
 
 export const useStudentNameVisibility = () => {
-  const visible = useSelector(state => state.settings.namesVisible)
+  const visible = useSelector((state: RootState) => state.settings.namesVisible)
   const dispatch = useDispatch()
 
   const toggle = useCallback(() => {
@@ -15,16 +16,18 @@ export const useStudentNameVisibility = () => {
   return { visible, toggle }
 }
 
-export const StudentNameVisibilityToggle = ({ style = {} }) => {
+export const StudentNameVisibilityToggle = () => {
   const { visible, toggle } = useStudentNameVisibility()
 
   const handleChange = useCallback(() => {
     toggle()
-  }, [visible, toggle])
+  }, [toggle])
 
   return (
-    <div style={{ marginTop: 15, marginBottom: 10, ...style }}>
-      <Radio checked={visible} data-cy="toggleStudentNames" label="Show student names" onChange={handleChange} toggle />
-    </div>
+    <FormControlLabel
+      control={<Switch checked={visible} data-cy="toggleStudentNames" onChange={handleChange} />}
+      label="Show student names"
+      sx={{ margin: 0 }}
+    />
   )
 }
diff --git a/services/frontend/src/components/StudentStatistics/StudentCourseTable/index.jsx b/services/frontend/src/components/StudentStatistics/StudentCourseTable/index.jsx
deleted file mode 100644
index dc3ef5671d..0000000000
--- a/services/frontend/src/components/StudentStatistics/StudentCourseTable/index.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { array, arrayOf, string } from 'prop-types'
-import { Table } from 'semantic-ui-react'
-
-const courseNameColumnIndex = 1
-const creditsColumnIndex = 3
-
-const getHeaderRow = headers => (
-  <Table.Header>
-    <Table.Row>
-      {headers.map((header, index) => (
-        <Table.HeaderCell
-          key={`header-${header}`}
-          style={{ textAlign: index === creditsColumnIndex ? 'right' : 'left' }}
-        >
-          {header}
-        </Table.HeaderCell>
-      ))}
-    </Table.Row>
-  </Table.Header>
-)
-
-const getTableBody = rows => (
-  <Table.Body>
-    {rows.map((row, index) => {
-      const [highlight, ...rest] = Object.values(row)
-      const style = highlight ? { backgroundColor: '#e8f4ff' } : null
-      return (
-        <Table.Row
-          // eslint-disable-next-line react/no-array-index-key
-          key={`row-${index}`}
-          style={style}
-        >
-          {rest.map((value, index) => (
-            <Table.Cell
-              // eslint-disable-next-line react/no-array-index-key
-              key={`cell-${index}`}
-              style={{ textAlign: index === creditsColumnIndex ? 'right' : 'left' }}
-              width={index === courseNameColumnIndex ? 8 : 1}
-            >
-              {value}
-            </Table.Cell>
-          ))}
-        </Table.Row>
-      )
-    })}
-  </Table.Body>
-)
-
-export const StudentCourseTable = ({ headers, rows }) => {
-  if (rows.length > 0) {
-    return (
-      <Table>
-        {getHeaderRow(headers)}
-        {getTableBody(rows)}
-      </Table>
-    )
-  }
-  return <div>Student has courses marked</div>
-}
-
-StudentCourseTable.propTypes = {
-  headers: arrayOf(string).isRequired,
-  rows: arrayOf(array).isRequired,
-}
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/CourseParticipationTable.jsx b/services/frontend/src/components/StudentStatistics/StudentDetails/CourseParticipationTable.jsx
deleted file mode 100644
index a25384dbd6..0000000000
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/CourseParticipationTable.jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Fragment } from 'react'
-import { Link } from 'react-router'
-import { Divider, Header, Icon, Item, Label } from 'semantic-ui-react'
-
-import { getTextInWithOpen } from '@/common'
-import { useLanguage } from '@/components/LanguagePicker/useLanguage'
-import { StudentCourseTable } from '@/components/StudentStatistics/StudentCourseTable'
-import { DISPLAY_DATE_FORMAT } from '@/constants/date'
-import { reformatDate } from '@/util/timeAndDate'
-
-// Some courses are without AY in the beginning in the studyplan even though the credits are registered with AY.
-const isInStudyPlan = (plan, code) =>
-  plan && (plan.included_courses.includes(code) || plan.included_courses.includes(code.replace('AY', '')))
-
-const getAcademicYear = date => {
-  const year = new Date(date).getFullYear()
-  const month = new Date(date).getMonth()
-  // Months are 0-indexed so 7 means August...
-  return month < 7 ? `${year - 1}-${year}` : `${year}-${year + 1}`
-}
-
-const getIcon = (credittypecode, isStudyModuleCredit, passed) => {
-  const style = { overflow: 'visible' }
-  if (isStudyModuleCredit) return <Icon color="purple" name="certificate" style={style} />
-  if (credittypecode === 9) return <Icon color="green" name="clipboard check" style={style} title="Credit transfer" />
-  return passed ? <Icon color="green" name="check" style={style} /> : <Icon color="red" name="times" style={style} />
-}
-
-export const CourseParticipationTable = ({ student, selectedStudyPlanId }) => {
-  const { getTextIn } = useLanguage()
-  if (!student) return null
-
-  const studyPlan = student?.studyplans.find(plan => plan.id === selectedStudyPlanId)
-
-  const courseRowsByAcademicYear = student.courses.reduceRight((acc, attainment) => {
-    const { course, credits, credittypecode, date, grade, isOpenCourse, isStudyModuleCredit, passed } = attainment
-    const isIncluded = isInStudyPlan(studyPlan, course.code)
-    const academicYear = getAcademicYear(date)
-
-    if (!acc[academicYear]) acc[academicYear] = []
-
-    acc[academicYear].push([
-      isIncluded,
-      reformatDate(date, DISPLAY_DATE_FORMAT),
-      <div
-        key={`${course.code}-${new Date(date).getTime()}-course-${grade}`}
-        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
-      >
-        {getTextInWithOpen(course, getTextIn, isOpenCourse, isStudyModuleCredit)}
-        {credittypecode === 7 && (
-          <Label
-            className="secondary-label"
-            content={getTextIn({ fi: 'TOISSIJAINEN', en: 'SECONDARY', sv: 'SEKUNDÄR' })}
-            size="tiny"
-          />
-        )}
-      </div>,
-      <div key={`${course.code}-${new Date(date).getTime()}-grade-${grade}`} style={{ whiteSpace: 'nowrap' }}>
-        {getIcon(credittypecode, isStudyModuleCredit, passed)}
-        {grade}
-      </div>,
-      credits,
-      <Item
-        as={Link}
-        key={`${course.code}-${new Date(date).getTime()}-link-${grade}`}
-        to={`/coursestatistics?courseCodes=["${course.code}"]&separate=false&combineSubstitutions=true`}
-      >
-        <Icon name="level up alternate" />
-      </Item>,
-    ])
-    return acc
-  }, {})
-
-  return (
-    <>
-      <Divider horizontal>
-        <Header as="h4">Courses</Header>
-      </Divider>
-      {Object.entries(courseRowsByAcademicYear).map(([academicYear, courses]) => (
-        <Fragment key={academicYear}>
-          <Header content={academicYear} />
-          <StudentCourseTable headers={['Date', 'Course', 'Grade', 'Credits', '']} rows={courses} />
-        </Fragment>
-      ))}
-    </>
-  )
-}
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/TagsTable.jsx b/services/frontend/src/components/StudentStatistics/StudentDetails/TagsTable.jsx
deleted file mode 100644
index a6ec225797..0000000000
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/TagsTable.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { sortBy } from 'lodash'
-import { shape } from 'prop-types'
-import { Header, Label } from 'semantic-ui-react'
-
-import { useLanguage } from '@/components/LanguagePicker/useLanguage'
-import { SortableTable } from '@/components/SortableTable'
-
-export const TagsTable = ({ student }) => {
-  const { getTextIn } = useLanguage()
-  if (!student) return null
-
-  const data = Object.values(
-    student.tags.reduce((acc, tag) => {
-      if (!acc[tag.programme.code]) acc[tag.programme.code] = { programme: tag.programme, tags: [] }
-      acc[tag.tag.studytrack].tags.push(tag)
-      return acc
-    }, {})
-  )
-  if (data.length === 0) return null
-  return (
-    <>
-      <Header content="Tags" />
-      <SortableTable
-        columns={[
-          {
-            key: 'PROGRAMME',
-            title: 'Programme',
-            getRowVal: tag => getTextIn(tag.programme.name),
-          },
-          {
-            key: 'CODE',
-            title: 'Code',
-            getRowVal: tag => tag.programme.code,
-          },
-          {
-            key: 'TAGS',
-            title: 'Tags',
-            getRowVal: tag => sortBy(tag.tags.map(tt => tt.tag.tagname)).join(':'),
-            getRowContent: tag =>
-              sortBy(tag.tags, tag => tag.tag.tagname).map(tag => (
-                <Label
-                  color={tag.tag.personal_user_id ? 'purple' : null}
-                  content={tag.tag.tagname}
-                  key={tag.tag.tag_id}
-                />
-              )),
-          },
-        ]}
-        data={data}
-      />
-    </>
-  )
-}
-
-TagsTable.propTypes = {
-  student: shape({}).isRequired,
-}
diff --git a/services/frontend/src/components/StudentStatistics/StudentInfoCard/index.jsx b/services/frontend/src/components/StudentStatistics/StudentInfoCard/index.jsx
deleted file mode 100644
index 24c0286019..0000000000
--- a/services/frontend/src/components/StudentStatistics/StudentInfoCard/index.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button, Card, Icon } from 'semantic-ui-react'
-
-import { callApi } from '@/apiConnection'
-import { SisuLinkItem } from '@/components/common/SisuLinkItem'
-import { useStudentNameVisibility } from '@/components/StudentNameVisibilityToggle'
-import { DISPLAY_DATE_FORMAT, DISPLAY_DATE_FORMAT_DEV } from '@/constants/date'
-import { useGetAuthorizedUserQuery } from '@/redux/auth'
-import { reformatDate } from '@/util/timeAndDate'
-import { EnrollmentAccordion } from './EnrollmentAccordion'
-import './studentInfoCard.css'
-
-export const StudentInfoCard = ({ student }) => {
-  const { visible: showName } = useStudentNameVisibility()
-  const { isAdmin } = useGetAuthorizedUserQuery()
-  const name = showName ? `${student.name}, ` : ''
-  const email = showName && student.email ? `${student.email}` : ''
-
-  const formattedTimestamp = reformatDate(student.updatedAt, isAdmin ? DISPLAY_DATE_FORMAT_DEV : DISPLAY_DATE_FORMAT)
-
-  const updateStudent = async () => {
-    await callApi('/updater/update/v2/customlist/students', 'post', [student.studentNumber])
-  }
-
-  return (
-    <Card fluid>
-      <Card.Content>
-        <Card.Header className="cardHeader">
-          <div>
-            {name}
-            {student.studentNumber}
-            <SisuLinkItem id={student.sis_person_id} />
-          </div>
-        </Card.Header>
-        <Card.Meta>
-          <div className="startDate">{email}</div>
-        </Card.Meta>
-        <Card.Description>{`Credits: ${student.credits || 0}`}</Card.Description>
-        <div style={{ paddingTop: '4px' }}>
-          <EnrollmentAccordion student={student} />
-          <p>{`Updated at ${formattedTimestamp}`}</p>
-          {isAdmin && (
-            <Button compact labelPosition="left" onClick={updateStudent} size="medium">
-              <Icon name="refresh" />
-              Update student
-            </Button>
-          )}
-        </div>
-      </Card.Content>
-    </Card>
-  )
-}
diff --git a/services/frontend/src/components/StudentStatistics/StudentSearch/index.jsx b/services/frontend/src/components/StudentStatistics/StudentSearch/index.jsx
deleted file mode 100644
index de8d8ae37b..0000000000
--- a/services/frontend/src/components/StudentStatistics/StudentSearch/index.jsx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { debounce } from 'lodash'
-import { useCallback, useState } from 'react'
-import { Link } from 'react-router'
-import { Container, Search, Segment } from 'semantic-ui-react'
-
-import { useLanguage } from '@/components/LanguagePicker/useLanguage'
-import { SegmentDimmer } from '@/components/SegmentDimmer'
-import { SortableTable } from '@/components/SortableTable'
-import { useStudentNameVisibility } from '@/components/StudentNameVisibilityToggle'
-import { DISPLAY_DATE_FORMAT } from '@/constants/date'
-import { useSearchStudentsQuery } from '@/redux/students'
-import { reformatDate } from '@/util/timeAndDate'
-
-const getProgrammes = (studyRights, getTextIn) =>
-  studyRights
-    .reduce((res, studyRight) => [...res, ...studyRight.studyRightElements.map(element => getTextIn(element.name))], [])
-    .sort()
-
-const StudentPageLink = ({ studentNumber, text }) => (
-  <Link style={{ color: 'black' }} to={`/students/${studentNumber}`}>
-    {text}
-  </Link>
-)
-
-export const StudentSearch = () => {
-  const { getTextIn } = useLanguage()
-  const [searchString, setSearchString] = useState('')
-  const [query, setQuery] = useState('')
-  const { visible: showNames } = useStudentNameVisibility()
-  const { data: students = [], isLoading } = useSearchStudentsQuery(query, {
-    skip: query.trim().length < 4 || (Number(query) && query.trim().length < 6),
-  })
-  const debouncedSetQuery = useCallback(
-    debounce(value => {
-      setQuery(value)
-    }, 1000),
-    []
-  )
-
-  const handleSearchChange = (_event, { value }) => {
-    debouncedSetQuery(value)
-    setSearchString(value)
-  }
-
-  const renderSearchResults = () => {
-    if (isLoading) return <div style={{ margin: 100 }} />
-
-    const formatStudents = students =>
-      students.map(({ studentNumber, credits, started, lastname, firstnames, studyRights }) => ({
-        studentNumber,
-        started,
-        credits,
-        lastname,
-        firstnames,
-        studyRights,
-      }))
-
-    const displayedStudents = formatStudents(students)
-
-    if (query.length === 0) return null
-
-    if (displayedStudents.length === 0) return <div>No search results or search term is not accurate enough</div>
-
-    const studentsSorted = displayedStudents
-      .sort((a, b) => {
-        if (a.started && !b.started) return -1
-        if (!a.started && b.started) return 1
-        if (a.started && b.started) return new Date(a.started) > new Date(b.started) ? -1 : 1
-        const lastnameComparison = a.lastname.localeCompare(b.lastname)
-        if (lastnameComparison !== 0) return lastnameComparison
-        return a.firstnames.localeCompare(b.firstnames)
-      })
-      .slice(0, 200)
-
-    const columns = [
-      {
-        key: 'studentnumber',
-        title: 'Student number',
-        getRowVal: student => student.studentNumber,
-        getRowContent: student => (
-          <StudentPageLink studentNumber={student.studentNumber} text={student.studentNumber} />
-        ),
-      },
-      {
-        key: 'started',
-        title: 'Started',
-        filterType: 'date',
-        getRowVal: student => (student.started ? new Date(student.started) : 'Unavailable'),
-        getRowContent: student => (
-          <StudentPageLink
-            studentNumber={student.studentNumber}
-            text={student.started ? reformatDate(new Date(student.started), DISPLAY_DATE_FORMAT) : 'Unavailable'}
-          />
-        ),
-      },
-      {
-        key: 'credits',
-        title: 'Credits',
-        getRowVal: student => student.credits,
-        getRowContent: student => <StudentPageLink studentNumber={student.studentNumber} text={student.credits} />,
-      },
-      {
-        key: 'studyrights',
-        title: 'Active studyrights',
-        sortable: false,
-        filterType: 'multi',
-        getRowVal: student => getProgrammes(student.studyRights, getTextIn),
-        formatValue: programmes => programmes.map(programme => <div key={`${programme}`}>{programme}</div>),
-      },
-    ]
-
-    if (showNames) {
-      const nameColumns = [
-        {
-          key: 'lastname',
-          title: 'Last names',
-          getRowVal: student => student.lastname,
-          getRowContent: student => <StudentPageLink studentNumber={student.studentNumber} text={student.lastname} />,
-        },
-        {
-          key: 'firstnames',
-          title: 'Given names',
-          getRowVal: student => student.firstnames,
-          getRowContent: student => <StudentPageLink studentNumber={student.studentNumber} text={student.firstnames} />,
-        },
-      ]
-      columns.splice(0, 0, ...nameColumns)
-    }
-
-    return (
-      <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-        <p>
-          {displayedStudents.length > 200 &&
-            `Your search returned ${displayedStudents.length} results. Only the first 200 are shown.`}
-        </p>
-        <SortableTable columns={columns} data={studentsSorted} hideHeaderBar />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <Container>
-        <Search
-          input={{ fluid: true }}
-          loading={isLoading}
-          onSearchChange={handleSearchChange}
-          placeholder="Search with a student number or name (surname firstname)"
-          showNoResults={false}
-          value={searchString}
-        />
-      </Container>
-      <Segment basic>
-        <SegmentDimmer isLoading={isLoading} />
-        {renderSearchResults()}
-      </Segment>
-    </>
-  )
-}
diff --git a/services/frontend/src/components/StudentStatistics/index.jsx b/services/frontend/src/components/StudentStatistics/index.jsx
deleted file mode 100644
index cd0c95fad1..0000000000
--- a/services/frontend/src/components/StudentStatistics/index.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useParams } from 'react-router'
-import { Header, Segment } from 'semantic-ui-react'
-
-import { useTitle } from '@/common/hooks'
-import { StudentNameVisibilityToggle } from '@/components/StudentNameVisibilityToggle'
-import { StudentDetails } from './StudentDetails'
-import { StudentSearch } from './StudentSearch'
-
-export const StudentStatistics = () => {
-  const { studentNumber } = useParams()
-  useTitle('Student statistics')
-
-  return (
-    <div className="segmentContainer">
-      <Header className="segmentTitle" size="large">
-        Student statistics
-      </Header>
-      <StudentNameVisibilityToggle />
-      <div style={{ width: '75%', minWidth: '800px', maxWidth: '1200px' }}>
-        <Segment className="contentSegment">
-          {studentNumber ? <StudentDetails studentNumber={studentNumber} /> : <StudentSearch />}
-        </Segment>
-      </div>
-    </div>
-  )
-}
diff --git a/services/frontend/src/components/material/Footer/ExternalLink.tsx b/services/frontend/src/components/material/Footer/ExternalLink.tsx
index 5b01101d59..9d83cd6a88 100644
--- a/services/frontend/src/components/material/Footer/ExternalLink.tsx
+++ b/services/frontend/src/components/material/Footer/ExternalLink.tsx
@@ -1,20 +1,33 @@
 import { OpenInNew } from '@mui/icons-material'
-import { Link } from '@mui/material'
+import { Link, LinkOwnProps } from '@mui/material'
 
 /**
  * Link that opens an external website in a new tab
  *
  * @param href - URL of the external website
  * @param text - Text to display in the link
+ * @param cypress - Cypress data-cy attribute
+ * @param variant - Typography variant for the link text
  */
-export const ExternalLink = ({ href, text }: { href: string; text: string }) => {
+export const ExternalLink = ({
+  href,
+  text,
+  cypress,
+  variant = 'body2',
+}: {
+  href: string
+  text: string
+  cypress?: string
+  variant?: LinkOwnProps['variant']
+}) => {
   return (
     <Link
+      data-cy={cypress}
       href={href}
       rel="noopener noreferrer"
       sx={{ alignItems: 'center', display: 'flex', gap: 0.5 }}
       target="_blank"
-      variant="body2"
+      variant={variant}
     >
       {text}
       <OpenInNew fontSize="inherit" />
diff --git a/services/frontend/src/components/material/StyledAccordion.ts b/services/frontend/src/components/material/StyledAccordion.ts
new file mode 100644
index 0000000000..475bc07cc9
--- /dev/null
+++ b/services/frontend/src/components/material/StyledAccordion.ts
@@ -0,0 +1,29 @@
+import { Accordion } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const StyledAccordion = styled(Accordion)(() => ({
+  boxShadow: 'none',
+  width: '100%',
+  '&::before': {
+    display: 'none',
+  },
+  '& .MuiAccordionSummary-root': {
+    flexDirection: 'row-reverse',
+    padding: 0,
+    marginLeft: '-8px',
+    '& .MuiAccordionSummary-expandIconWrapper': {
+      transform: 'rotate(-90deg)',
+      transition: 'transform 0.3s ease',
+    },
+    '&.Mui-expanded .MuiAccordionSummary-expandIconWrapper': {
+      transform: 'rotate(0deg)',
+    },
+  },
+  '& .MuiAccordionDetails-root': {
+    padding: 0,
+  },
+}))
+
+StyledAccordion.defaultProps = {
+  disableGutters: true,
+}
diff --git a/services/frontend/src/components/material/StyledTable.ts b/services/frontend/src/components/material/StyledTable.ts
new file mode 100644
index 0000000000..71ca7acce0
--- /dev/null
+++ b/services/frontend/src/components/material/StyledTable.ts
@@ -0,0 +1,22 @@
+import { Table } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+export const StyledTable = styled(Table, {
+  shouldForwardProp: prop => prop !== 'showCellBorders',
+})<{ showCellBorders?: boolean }>(({ theme, showCellBorders }) => {
+  return {
+    '& tr': {
+      border: `1px solid ${theme.palette.grey[300]}`,
+      '&:hover': {
+        backgroundColor: theme.palette.grey[100],
+      },
+    },
+    '& th': {
+      backgroundColor: theme.palette.grey[50],
+    },
+    '& th, & td': {
+      border: showCellBorders ? `1px solid ${theme.palette.grey[300]}` : 'none',
+      padding: theme.spacing(1.5),
+    },
+  }
+})
diff --git a/services/frontend/src/components/material/TableHeaderWithTooltip.tsx b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
index a3b0d9954c..4af8f5dc3c 100644
--- a/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
+++ b/services/frontend/src/components/material/TableHeaderWithTooltip.tsx
@@ -4,7 +4,7 @@ import { InfoBox } from './InfoBox'
 
 export const TableHeaderWithTooltip = ({ header, tooltipText }: { header: string; tooltipText: string }) => (
   <Stack direction="row" gap={1}>
-    <span style={{ whiteSpace: 'wrap', minWidth: '80px' }}>{header}</span>
+    <span style={{ whiteSpace: 'wrap' }}>{header}</span>
     <InfoBox content={tooltipText} mini />
   </Stack>
 )
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/BachelorHonours.jsx b/services/frontend/src/pages/Students/StudentDetails/BachelorHonours.jsx
similarity index 56%
rename from services/frontend/src/components/StudentStatistics/StudentDetails/BachelorHonours.jsx
rename to services/frontend/src/pages/Students/StudentDetails/BachelorHonours.jsx
index fa981ea64d..c191c92cc8 100644
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/BachelorHonours.jsx
+++ b/services/frontend/src/pages/Students/StudentDetails/BachelorHonours.jsx
@@ -1,6 +1,17 @@
+import { ArrowDropDown as ArrowDropDownIcon, Close as CloseIcon, Done as DoneIcon } from '@mui/icons-material'
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Chip,
+  Stack,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material'
 import moment from 'moment'
 import { useState } from 'react'
-import { Accordion, Divider, Header, Icon, Label, Table } from 'semantic-ui-react'
 
 import {
   bachelorHonoursProgrammes as bachelorCodes,
@@ -8,10 +19,36 @@ import {
   bachelorHonoursIntermediateModules as intermediateHonoursModules,
 } from '@/common'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { Section } from '@/components/material/Section'
+import { StyledAccordion } from '@/components/material/StyledAccordion'
+import { StyledTable } from '@/components/material/StyledTable'
 import { CurriculumPicker } from '@/components/PopulationDetails/CurriculumPicker'
 import { DISPLAY_DATE_FORMAT } from '@/constants/date'
 import { reformatDate } from '@/util/timeAndDate'
 
+const ModuleTable = ({ data, cypress, getTextIn }) => (
+  <StyledTable data-cy={cypress}>
+    <TableHead>
+      <TableRow>
+        <TableCell>Date</TableCell>
+        <TableCell>Module</TableCell>
+        <TableCell>Grade</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {data.map(module => (
+        <TableRow key={module.course.code}>
+          <TableCell>{reformatDate(module.date, DISPLAY_DATE_FORMAT)}</TableCell>
+          <TableCell>
+            {getTextIn(module.course.name)} ({module.course.code})
+          </TableCell>
+          <TableCell>{module.grade}</TableCell>
+        </TableRow>
+      ))}
+    </TableBody>
+  </StyledTable>
+)
+
 export const BachelorHonours = ({ absentYears, programmeCode, student }) => {
   const [curriculum, setCurriculum] = useState(null)
   const [showHonoursModules, setShowHonoursModules] = useState(false)
@@ -86,72 +123,57 @@ export const BachelorHonours = ({ absentYears, programmeCode, student }) => {
     reason = 'Module grades too low'
   }
 
-  const dataRows = modules =>
-    modules.map(mod => (
-      <Table.Row key={mod.course.code}>
-        <Table.Cell>{reformatDate(mod.date, DISPLAY_DATE_FORMAT)}</Table.Cell>
-        <Table.Cell>
-          {getTextIn(mod.course.name)} ({mod.course.code})
-        </Table.Cell>
-        <Table.Cell>{mod.grade}</Table.Cell>
-      </Table.Row>
-    ))
-
-  const dataTable = (data, cypress) => (
-    <Table data-cy={cypress}>
-      <Table.Header>
-        <Table.Row>
-          <Table.HeaderCell>Date</Table.HeaderCell>
-          <Table.HeaderCell>Module</Table.HeaderCell>
-          <Table.HeaderCell>Grade</Table.HeaderCell>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>{dataRows(data)}</Table.Body>
-    </Table>
-  )
-
   return (
-    <>
-      <Divider horizontal>
-        <Header as="h4">Bachelor Honours</Header>
-      </Divider>
-      <Header as="h5">Qualified</Header>
-      <Label
-        color={honours ? 'green' : 'red'}
-        content={honours ? 'Qualified for Honours' : 'Not qualified for Honours'}
-        tag
-      />
-      {!honours && reason && <Label color="red" content={reason} tag />}
-      {inspection && <Label color="blue" content="Might need further inspection" tag />}
-      <div style={{ marginTop: '15px', marginBottom: '15px' }}>
-        Select curriculum version used for checking Bachelor Honours eligibility
+    <Section title="Bachelor Honours">
+      <Typography component="h3" gutterBottom variant="h6">
+        Qualified
+      </Typography>
+      <Stack direction="row" spacing={1}>
+        <Chip
+          color={honours ? 'success' : 'error'}
+          data-cy={`honours-chip-${honours ? 'qualified' : 'not-qualified'}`}
+          icon={honours ? <DoneIcon /> : <CloseIcon />}
+          label={honours ? 'Qualified for Honours' : 'Not qualified for Honours'}
+        />
+        {!honours && reason && <Chip color="error" data-cy="honours-chip-error" label={reason} />}
+        {inspection && <Chip color="info" data-cy="honours-chip-inspection" label="Might need further inspection" />}
+      </Stack>
+      <Stack alignItems="center" direction="row" spacing={1} sx={{ marginTop: 2 }}>
+        <span>Select curriculum version used for checking Bachelor Honours eligibility</span>
         <CurriculumPicker
           curriculum={curriculum}
           programmeCodes={[programmeCode]}
           setCurriculum={setCurriculum}
           year={new Date().getFullYear()}
         />
-      </div>
-      {honours ? (
-        <Accordion>
-          <Accordion.Title
-            active={showHonoursModules}
-            index={0}
-            onClick={() => setShowHonoursModules(!showHonoursModules)}
-          >
-            <Header as="h4">
-              <Icon name="dropdown" />
-              Main courses and other modules
-            </Header>
-          </Accordion.Title>
-          <Accordion.Content active={showHonoursModules}>
-            <h4>Main Modules</h4>
-            {mainModules.length > 0 && dataTable(mainModules, 'main-modules')}
-            <h4>Other Modules</h4>
-            {otherModules.length > 0 && dataTable(otherModules, 'other-modules')}
-          </Accordion.Content>
-        </Accordion>
-      ) : null}
-    </>
+      </Stack>
+      {honours && (
+        <StyledAccordion expanded={showHonoursModules} onChange={() => setShowHonoursModules(!showHonoursModules)}>
+          <AccordionSummary expandIcon={<ArrowDropDownIcon />} sx={{ fontWeight: 'bold' }}>
+            Study modules
+          </AccordionSummary>
+          <AccordionDetails>
+            <Stack spacing={2}>
+              <div>
+                <Typography fontWeight="bold" gutterBottom>
+                  Main modules
+                </Typography>
+                {mainModules.length > 0 && (
+                  <ModuleTable cypress="main-modules" data={mainModules} getTextIn={getTextIn} />
+                )}
+              </div>
+              <div>
+                <Typography fontWeight="bold" gutterBottom>
+                  Other modules
+                </Typography>
+                {otherModules.length > 0 && (
+                  <ModuleTable cypress="other-modules" data={otherModules} getTextIn={getTextIn} />
+                )}
+              </div>
+            </Stack>
+          </AccordionDetails>
+        </StyledAccordion>
+      )}
+    </Section>
   )
 }
diff --git a/services/frontend/src/pages/Students/StudentDetails/CourseTables.tsx b/services/frontend/src/pages/Students/StudentDetails/CourseTables.tsx
new file mode 100644
index 0000000000..85d290616d
--- /dev/null
+++ b/services/frontend/src/pages/Students/StudentDetails/CourseTables.tsx
@@ -0,0 +1,136 @@
+import {
+  Close as CloseIcon,
+  Done as DoneIcon,
+  Layers as LayersIcon,
+  NorthEast as NorthEastIcon,
+  SwapHoriz as SwapHorizIcon,
+} from '@mui/icons-material'
+import { Chip, IconButton, Stack, TableBody, TableCell, TableHead, TableRow, Typography } from '@mui/material'
+import { Link } from 'react-router'
+
+import { getTextInWithOpen } from '@/common'
+import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { Section } from '@/components/material/Section'
+import { StyledTable } from '@/components/material/StyledTable'
+import { DISPLAY_DATE_FORMAT } from '@/constants/date'
+import { reformatDate } from '@/util/timeAndDate'
+
+const creditsColumnIndex = 3
+
+// Some courses are without AY in the beginning in the studyplan even though the credits are registered with AY.
+const isInStudyPlan = (plan, code: string) =>
+  plan && (plan.included_courses.includes(code) || plan.included_courses.includes(code.replace('AY', '')))
+
+const getAcademicYear = (date: string) => {
+  const year = new Date(date).getFullYear()
+  const month = new Date(date).getMonth()
+  // Months are 0-indexed so 7 means August...
+  return month < 7 ? `${year - 1}-${year}` : `${year}-${year + 1}`
+}
+
+const getIcon = (credittypecode: number, isStudyModuleCredit: boolean, passed: boolean) => {
+  if (isStudyModuleCredit) return <LayersIcon color="secondary" fontSize="small" titleAccess="Study module" />
+  if (credittypecode === 9) return <SwapHorizIcon color="success" fontSize="small" titleAccess="Credit transfer" />
+  return passed ? <DoneIcon color="success" fontSize="small" /> : <CloseIcon color="error" fontSize="small" />
+}
+
+export const CourseTables = ({ student, selectedStudyPlanId }) => {
+  const { getTextIn } = useLanguage()
+  if (!student) return null
+
+  const studyPlan = student?.studyplans.find(plan => plan.id === selectedStudyPlanId)
+
+  const groupedCourses: Record<string, React.ReactNode[][]> = {}
+
+  for (let i = student.courses.length - 1; i >= 0; i--) {
+    const attainment = student.courses[i]
+
+    const { course, credits, credittypecode, date, grade, isOpenCourse, isStudyModuleCredit, passed } = attainment
+    const isIncluded = isInStudyPlan(studyPlan, course.code)
+    const academicYear = getAcademicYear(date)
+
+    groupedCourses[academicYear] ??= []
+
+    groupedCourses[academicYear].push([
+      isIncluded,
+      reformatDate(date, DISPLAY_DATE_FORMAT),
+      <div
+        key={`${course.code}-${new Date(date).getTime()}-course-${grade}`}
+        style={{ display: 'flex', justifyContent: 'space-between' }}
+      >
+        {getTextInWithOpen(course, getTextIn, isOpenCourse, isStudyModuleCredit)}
+        {credittypecode === 7 && (
+          <div>
+            <Chip
+              label={getTextIn({ fi: 'TOISSIJAINEN', en: 'SECONDARY', sv: 'SEKUNDÄR' })}
+              sx={theme => ({
+                borderRadius: 1,
+                color: theme.palette.text.secondary,
+                fontSize: 12,
+                fontWeight: 'bold',
+                height: 17,
+                '& .MuiChip-label': {
+                  paddingX: 0.75,
+                },
+              })}
+            />
+          </div>
+        )}
+      </div>,
+      <Stack direction="row" key={`${course.code}-${new Date(date).getTime()}-grade-${grade}`} spacing={1}>
+        {getIcon(credittypecode, isStudyModuleCredit, passed)}
+        <span>{grade}</span>
+      </Stack>,
+      credits,
+      <IconButton
+        color="primary"
+        component={Link}
+        key={`${course.code}-${new Date(date).getTime()}-link-${grade}`}
+        size="small"
+        sx={{ height: 20, width: 20 }}
+        title={`View course statistics for ${getTextIn(course.name)} (${course.code})`}
+        to={`/coursestatistics?courseCodes=["${course.code}"]&separate=false&combineSubstitutions=true`}
+      >
+        <NorthEastIcon fontSize="small" />
+      </IconButton>,
+    ])
+  }
+
+  return (
+    <Section title="Courses">
+      <Stack spacing={4}>
+        {Object.entries(groupedCourses).map(([academicYear, courses]) => (
+          <Stack key={academicYear} spacing={1}>
+            <Typography variant="h6">{academicYear}</Typography>
+            <StyledTable>
+              <TableHead>
+                <TableRow>
+                  <TableCell width="150px">Date</TableCell>
+                  <TableCell>Course</TableCell>
+                  <TableCell width="100px">Grade</TableCell>
+                  <TableCell align="right" width="100px">
+                    Credits
+                  </TableCell>
+                  <TableCell width="50px"></TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {courses.map(([highlight, ...rest], index) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <TableRow key={`row-${index}`} sx={{ backgroundColor: highlight ? '#e8f4ff' : 'inherit' }}>
+                    {rest.map((value, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <TableCell align={index === creditsColumnIndex ? 'right' : 'left'} key={`cell-${index}`}>
+                        {value}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </StyledTable>
+          </Stack>
+        ))}
+      </Stack>
+    </Section>
+  )
+}
diff --git a/services/frontend/src/components/StudentStatistics/StudentInfoCard/EnrollmentAccordion.jsx b/services/frontend/src/pages/Students/StudentDetails/EnrollmentAccordion.tsx
similarity index 71%
rename from services/frontend/src/components/StudentStatistics/StudentInfoCard/EnrollmentAccordion.jsx
rename to services/frontend/src/pages/Students/StudentDetails/EnrollmentAccordion.tsx
index 24b4edc9d8..84cc041171 100644
--- a/services/frontend/src/components/StudentStatistics/StudentInfoCard/EnrollmentAccordion.jsx
+++ b/services/frontend/src/pages/Students/StudentDetails/EnrollmentAccordion.tsx
@@ -1,7 +1,11 @@
+import { ArrowDropDown as ArrowForwardIosSharpIcon } from '@mui/icons-material'
+import { AccordionDetails, AccordionSummary, Stack, TableBody, TableCell, TableHead, TableRow } from '@mui/material'
 import { useState } from 'react'
-import { Icon, Accordion, Table, Popup } from 'semantic-ui-react'
 
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { StyledAccordion } from '@/components/material/StyledAccordion'
+import { StyledTable } from '@/components/material/StyledTable'
+import { TableHeaderWithTooltip } from '@/components/material/TableHeaderWithTooltip'
 import { getSemestersPresentFunctions } from '@/components/PopulationStudents/StudentTable/GeneralTab/columnHelpers/semestersPresent'
 import { useGetSemestersQuery } from '@/redux/semesters'
 
@@ -53,6 +57,7 @@ const processStudyrights = (studyrights, student, firstDisplayedYear, getTextIn,
       year: firstDisplayedYear,
       filteredStudents: [student],
       getTextIn,
+      programmeCode: null,
     }
 
     const masterInfo = getProgrammeEndDateForStudyright(studyright, 2)
@@ -73,6 +78,7 @@ const processStudyrights = (studyrights, student, firstDisplayedYear, getTextIn,
       ...baseArguments,
       studentToStudyrightEndMap,
       studentToSecondStudyrightEndMap,
+      semestersToAddToStart: null,
     })
 
     acc[studyright.id] = getSemesterEnrollmentsContent(student, studyright)
@@ -98,42 +104,37 @@ export const EnrollmentAccordion = ({ student }) => {
   const semesterEnrollments = processStudyrights(studyRights, student, firstDisplayedYear, getTextIn, semestersAndYears)
 
   return (
-    <Accordion style={{ marginBottom: active ? '0.5em' : 0 }}>
-      <Accordion.Title active={active} onClick={() => setActive(!active)}>
-        <Icon name="dropdown" />
-        Enrollments
-      </Accordion.Title>
-      <Accordion.Content active={active}>
-        <Table celled>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Programme(s)</Table.HeaderCell>
-              <Table.HeaderCell>
-                Semesters (starting from autumn {firstDisplayedYear})
-                <Popup
-                  content="Displays enrollment data for the current and up to nine previous academic years."
-                  position="top center"
-                  trigger={<Icon name="question circle outline" style={{ opacity: 0.5, marginLeft: '0.25em' }} />}
+    <StyledAccordion expanded={active} onChange={() => setActive(!active)}>
+      <AccordionSummary expandIcon={<ArrowForwardIosSharpIcon />}>Enrollments</AccordionSummary>
+      <AccordionDetails>
+        <StyledTable showCellBorders sx={{ marginBottom: 1 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Programme(s)</TableCell>
+              <TableCell>
+                <TableHeaderWithTooltip
+                  header={`Semesters (starting from autumn ${firstDisplayedYear})`}
+                  tooltipText="Displays enrollment data for the current and up to nine previous academic years."
                 />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
             {studyRightsWithSemesterEnrollments.map(studyRightId => (
-              <Table.Row key={studyRightId}>
-                <Table.Cell>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25em' }}>
+              <TableRow key={studyRightId}>
+                <TableCell>
+                  <Stack spacing={1}>
                     {programmeNames[studyRightId].map(getTextIn).map(element => (
                       <div key={element}>{element}</div>
                     ))}
-                  </div>
-                </Table.Cell>
-                <Table.Cell>{semesterEnrollments[studyRightId]}</Table.Cell>
-              </Table.Row>
+                  </Stack>
+                </TableCell>
+                <TableCell>{semesterEnrollments[studyRightId]}</TableCell>
+              </TableRow>
             ))}
-          </Table.Body>
-        </Table>
-      </Accordion.Content>
-    </Accordion>
+          </TableBody>
+        </StyledTable>
+      </AccordionDetails>
+    </StyledAccordion>
   )
 }
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/StudentGraphs.jsx b/services/frontend/src/pages/Students/StudentDetails/StudentGraphs.tsx
similarity index 63%
rename from services/frontend/src/components/StudentStatistics/StudentDetails/StudentGraphs.jsx
rename to services/frontend/src/pages/Students/StudentDetails/StudentGraphs.tsx
index 7699dd944c..0ec9f71bb2 100644
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/StudentGraphs.jsx
+++ b/services/frontend/src/pages/Students/StudentDetails/StudentGraphs.tsx
@@ -1,3 +1,15 @@
+import {
+  Alert,
+  AlertTitle,
+  Box,
+  Paper,
+  Stack,
+  Tab,
+  Tabs,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+} from '@mui/material'
 import accessibility from 'highcharts/modules/accessibility'
 import exportData from 'highcharts/modules/export-data'
 import exporting from 'highcharts/modules/exporting'
@@ -5,20 +17,21 @@ import { chunk, flattenDeep, groupBy } from 'lodash'
 import moment from 'moment'
 import { useMemo, useState } from 'react'
 import ReactHighcharts from 'react-highcharts/ReactHighstock'
-import { Input, Menu, Message, Tab } from 'semantic-ui-react'
 
 import { getStudyRightElementTargetDates } from '@/common'
 import { CreditAccumulationGraphHighCharts } from '@/components/CreditAccumulationGraphHighCharts'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
 import { DISPLAY_DATE_FORMAT } from '@/constants/date'
+import { SemestersData, useGetSemestersQuery } from '@/redux/semesters'
 import { reformatDate } from '@/util/timeAndDate'
+import { Absence } from '.'
 
 exporting(ReactHighcharts.Highcharts)
 exportData(ReactHighcharts.Highcharts)
 accessibility(ReactHighcharts.Highcharts)
 
 const getEarliestAttainmentDate = ({ courses }) => {
-  if (!courses || !courses.length) return null
+  if (!courses?.length) return null
   // Courses are already sorted by date in the backend
   return courses[0].date
 }
@@ -33,18 +46,24 @@ const resolveGraphStartDate = (student, graphYearStart, selectedStudyPlan, study
   const filteredCourses = getCoursesIncludedInStudyPlan(student, selectedStudyPlan)
 
   return Math.min(
-    ...flattenDeep(filteredCourses.map(({ date }) => new Date(date).getTime())),
+    ...flattenDeep<number>(filteredCourses.map(({ date }) => new Date(date).getTime())),
     new Date(studyRightTargetStart).getTime()
   )
 }
 
-const resolveGraphEndDate = (dates, selectedStudyPlan, student, studyRightTargetEnd, selectedStudyRightElement) => {
-  if (!selectedStudyPlan) return Math.max(...(dates || []), new Date().getTime())
-  const filteredCourses = getCoursesIncludedInStudyPlan(student, selectedStudyPlan)
+const resolveGraphEndDate = (
+  dates: number[],
+  coursesIncludedInStudyPlan: string[],
+  student: any,
+  studyRightTargetEnd: Date,
+  selectedStudyRightElement: any
+) => {
+  if (!coursesIncludedInStudyPlan.length) return Math.max(...(dates || []), new Date().getTime())
+  const filteredCourses = student.courses.filter(({ course }) => coursesIncludedInStudyPlan.includes(course.code))
 
   const comparedValues = [
     new Date(studyRightTargetEnd).getTime(),
-    ...flattenDeep(filteredCourses.map(({ date }) => new Date(date).getTime())),
+    ...flattenDeep<number>(filteredCourses.map(({ date }) => new Date(date).getTime())),
   ]
   if (selectedStudyRightElement?.graduated) {
     const graduationDate = new Date(selectedStudyRightElement.endDate)
@@ -63,7 +82,7 @@ const CreditsGraph = ({ graphYearStart, student, absences, selectedStudyPlanId }
   const selectedStudyRightElement = selectedStudyRight?.studyRightElements.find(
     ({ code }) => code === selectedStudyPlan.programme_code
   )
-  const creditDates = student.courses.map(({ date }) => new Date(date))
+  const creditDates = student.courses.map(({ date }) => new Date(date).getTime())
   const [studyRightTargetStart, studyRightTargetEnd] = getStudyRightElementTargetDates(
     selectedStudyRightElement,
     absences
@@ -73,7 +92,7 @@ const CreditsGraph = ({ graphYearStart, student, absences, selectedStudyPlanId }
   )
   const endDate = resolveGraphEndDate(
     creditDates,
-    selectedStudyPlan,
+    selectedStudyPlan?.included_courses ?? [],
     student,
     studyRightTargetEnd,
     selectedStudyRightElement
@@ -82,16 +101,19 @@ const CreditsGraph = ({ graphYearStart, student, absences, selectedStudyPlanId }
     <CreditAccumulationGraphHighCharts
       absences={absences}
       endDate={endDate}
+      programmeCodes={null}
       selectedStudyPlan={selectedStudyPlan}
+      showFullStudyPath={null}
       singleStudent
       startDate={selectedStart}
       students={[student]}
+      studyPlanFilterIsActive={null}
       studyRightId={studyRightId}
     />
   )
 }
 
-const semesterChunkify = (courses, semesters, getTextIn) => {
+const semesterChunkify = (courses, semesters, getTextIn: ReturnType<typeof useLanguage>['getTextIn']) => {
   const semesterChunks = courses.reduce((acc, curr) => {
     const semester = semesters.find(
       semester => moment(curr.date).isSameOrAfter(semester.startdate) && moment(curr.date).isBefore(semester.enddate)
@@ -120,7 +142,12 @@ const semesterChunkify = (courses, semesters, getTextIn) => {
   return semesterMeans
 }
 
-const gradeMeanSeries = (student, chunksize, semesters, getTextIn) => {
+const gradeMeanSeries = (
+  student: any,
+  chunksize: number,
+  semesters: SemestersData | undefined,
+  getTextIn: ReturnType<typeof useLanguage>['getTextIn']
+) => {
   const filteredCourses = student.courses.filter(
     course => !Number.isNaN(Number(course.grade)) && !course.isStudyModuleCredit && course.passed
   )
@@ -133,7 +160,6 @@ const gradeMeanSeries = (student, chunksize, semesters, getTextIn) => {
         acc.grades.push({
           grade: Number(course.grade),
           date: course.date,
-          code: course.course_code,
           credits: course.credits,
         })
         // Weighted average: each grade is multiplied by the amount of credits the course is worth
@@ -143,13 +169,18 @@ const gradeMeanSeries = (student, chunksize, semesters, getTextIn) => {
       acc.mean.push({ y: acc.totalGradeSum / acc.totalCredits, x: new Date(courses[0].date).getTime() })
       return acc
     },
-    { grades: [], mean: [], totalGradeSum: 0, totalCredits: 0 }
+    {
+      grades: [] as Array<{ grade: number; date: string; credits: number }>,
+      mean: [] as Array<{ y: number; x: number }>,
+      totalGradeSum: 0,
+      totalCredits: 0,
+    }
   )
 
   const size = Number(chunksize) ? chunksize : 3
   const chunks = chunk(gradesAndMeans.grades, size)
 
-  const groupMeans = chunks.reduce((acc, curr) => {
+  const groupMeans = chunks.reduce<Array<{ name: string; y: number; x: number }>>((acc, curr) => {
     const gradeSum = curr.reduce((a, b) => a + b.grade * b.credits, 0)
     const creditSum = curr.reduce((a, b) => a + b.credits, 0)
     if (curr.length > 0)
@@ -170,13 +201,14 @@ const gradeMeanSeries = (student, chunksize, semesters, getTextIn) => {
   }
 }
 
-const GradeGraph = ({ semesters, student }) => {
+const GradeGraph = ({ student }: { student: any }) => {
   const { getTextIn } = useLanguage()
   const [groupSize, setGroupSize] = useState(5)
   const [graphMode, setGraphMode] = useState('total')
+  const { data: semesters } = useGetSemestersQuery()
   const series = useMemo(
     () => gradeMeanSeries(student, groupSize, semesters, getTextIn),
-    [student, groupSize, semesters]
+    [student, groupSize, semesters, getTextIn]
   )
   const { totalMeans, groupMeans, semesterMeans } = series
 
@@ -188,7 +220,7 @@ const GradeGraph = ({ semesters, student }) => {
       enabled: false,
     },
     title: {
-      text: 'Grade plot',
+      text: '',
     },
     tooltip: {
       pointFormat: '{point.y:.2f}',
@@ -208,66 +240,75 @@ const GradeGraph = ({ semesters, student }) => {
   const semesterMeanOptions = { ...defaultOptions, series: semesterMeans }
 
   return (
-    <>
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        <Message style={{ maxWidth: '600px' }}>
-          <Message.Header>Grade graph</Message.Header>
-          Painotettu keskiarvo lasketaan kaikista niistä opintojaksoista, joiden arviointiasteikko on 0–5.{' '}
-          <b>Total mean</b> näyttää, kuinka keskiarvo on kehittynyt opintojen aikana. <b>Group mean</b> jakaa kurssit
-          valitun kokoisiin ryhmiin ja laskee niiden keskiarvot. <b>Semester mean</b> laskee jokaisen lukukauden
-          keskiarvon.
-        </Message>
-        <Menu compact style={{ marginBottom: '15px' }}>
-          <Menu.Item active={graphMode === 'total'} onClick={() => setGraphMode('total')}>
-            Show total mean
-          </Menu.Item>
-          <Menu.Item active={graphMode === 'group'} onClick={() => setGraphMode('group')}>
-            Show group mean
-          </Menu.Item>
-          <Menu.Item active={graphMode === 'semester'} onClick={() => setGraphMode('semester')}>
-            Show semester mean
-          </Menu.Item>
-        </Menu>
-        {graphMode === 'group' && (
-          <Input
-            label="Group size"
-            onChange={(_event, { value }) => {
-              if (!Number.isNaN(Number(value))) setGroupSize(Number(value))
-            }}
-            value={groupSize}
-          />
-        )}
-      </div>
-      {graphMode === 'total' && <ReactHighcharts config={totalMeanOptions} />}
-      {graphMode === 'group' && <ReactHighcharts config={groupMeanOptions} />}
-      {graphMode === 'semester' && <ReactHighcharts config={semesterMeanOptions} />}
-    </>
+    <Stack alignItems="center" spacing={2}>
+      <Alert severity="info" sx={{ maxWidth: '75%' }}>
+        <AlertTitle>Grade graph</AlertTitle>
+        Painotettu keskiarvo lasketaan kaikista niistä opintojaksoista, joiden arviointiasteikko on 0–5.{' '}
+        <b>Total mean</b> näyttää, kuinka keskiarvo on kehittynyt opintojen aikana. <b>Group mean</b> jakaa kurssit
+        valitun kokoisiin ryhmiin ja laskee niiden keskiarvot. <b>Semester mean</b> laskee jokaisen lukukauden
+        keskiarvon.
+      </Alert>
+      <ToggleButtonGroup
+        color="primary"
+        exclusive
+        onChange={(_event, newMode) => setGraphMode(newMode)}
+        value={graphMode}
+      >
+        <ToggleButton value="total">Show total mean</ToggleButton>
+        <ToggleButton value="group">Show group mean</ToggleButton>
+        <ToggleButton value="semester">Show semester mean</ToggleButton>
+      </ToggleButtonGroup>
+      {graphMode === 'group' && (
+        <TextField
+          data-cy="group-size-input"
+          label="Group size"
+          onChange={event => {
+            if (!Number.isNaN(Number(event.target.value))) {
+              setGroupSize(Number(event.target.value))
+            }
+          }}
+          value={groupSize}
+        />
+      )}
+      <Box width="100%">
+        {graphMode === 'total' && <ReactHighcharts config={totalMeanOptions} />}
+        {graphMode === 'group' && <ReactHighcharts config={groupMeanOptions} />}
+        {graphMode === 'semester' && <ReactHighcharts config={semesterMeanOptions} />}
+      </Box>
+    </Stack>
   )
 }
 
-export const StudentGraphs = ({ absences, graphYearStart, semesters, student, selectedStudyPlanId }) => {
-  const panes = [
-    {
-      menuItem: 'Credit graph',
-      render: () => (
-        <Tab.Pane>
+export const StudentGraphs = ({
+  absences,
+  graphYearStart,
+  student,
+  selectedStudyPlanId,
+}: {
+  absences: Absence[]
+  graphYearStart: string | null
+  student: any
+  selectedStudyPlanId: string | null
+}) => {
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <Paper variant="outlined">
+      <Tabs onChange={(_event, newValue: number) => setActiveTab(newValue)} value={activeTab}>
+        <Tab label="Credit graph" />
+        <Tab label="Grade graph" />
+      </Tabs>
+      <Box sx={{ padding: 2 }}>
+        {activeTab === 0 && (
           <CreditsGraph
             absences={absences}
             graphYearStart={graphYearStart}
             selectedStudyPlanId={selectedStudyPlanId}
             student={student}
           />
-        </Tab.Pane>
-      ),
-    },
-    {
-      menuItem: 'Grade graph',
-      render: () => (
-        <Tab.Pane>
-          <GradeGraph semesters={semesters} student={student} />
-        </Tab.Pane>
-      ),
-    },
-  ]
-  return <Tab panes={panes} />
+        )}
+        {activeTab === 1 && <GradeGraph student={student} />}
+      </Box>
+    </Paper>
+  )
 }
diff --git a/services/frontend/src/pages/Students/StudentDetails/StudentInfoCard.tsx b/services/frontend/src/pages/Students/StudentDetails/StudentInfoCard.tsx
new file mode 100644
index 0000000000..c98a61a61f
--- /dev/null
+++ b/services/frontend/src/pages/Students/StudentDetails/StudentInfoCard.tsx
@@ -0,0 +1,54 @@
+import { Refresh as RefreshIcon } from '@mui/icons-material'
+import { Card, CardContent, Typography, Button, Stack } from '@mui/material'
+
+import { callApi } from '@/apiConnection'
+import { ExternalLink } from '@/components/material/Footer/ExternalLink'
+import { useStudentNameVisibility } from '@/components/StudentNameVisibilityToggle'
+import { DISPLAY_DATE_FORMAT, DISPLAY_DATE_FORMAT_DEV } from '@/constants/date'
+import { useGetAuthorizedUserQuery } from '@/redux/auth'
+import { reformatDate } from '@/util/timeAndDate'
+import { EnrollmentAccordion } from './EnrollmentAccordion'
+
+export const StudentInfoCard = ({ student }) => {
+  const { visible: showName } = useStudentNameVisibility()
+  const { isAdmin } = useGetAuthorizedUserQuery()
+  const name = showName ? `${student.name}, ` : ''
+  const email = showName && student.email ? `${student.email}` : ''
+
+  const formattedTimestamp = reformatDate(student.updatedAt, isAdmin ? DISPLAY_DATE_FORMAT_DEV : DISPLAY_DATE_FORMAT)
+
+  const updateStudent = async () => {
+    await callApi('/updater/update/v2/customlist/students', 'post', [student.studentNumber])
+  }
+
+  return (
+    <Card data-cy="student-info-card" variant="outlined">
+      <CardContent>
+        <Stack spacing={1}>
+          <Stack alignItems="flex-start">
+            <Typography variant="h6">
+              {name} {student.studentNumber}
+            </Typography>
+            <ExternalLink
+              cypress="sisu-link"
+              href={`https://sisu.helsinki.fi/tutor/role/staff/student/${student.sis_person_id}/basic/basic-info`}
+              text="Sisu"
+              variant="h6"
+            />
+            <Typography color="textSecondary">{email}</Typography>
+          </Stack>
+          <Stack alignItems="flex-start" spacing={1}>
+            Credits: {student.credits ?? 0}
+            <EnrollmentAccordion student={student} />
+            Updated at {formattedTimestamp}
+            {isAdmin && (
+              <Button onClick={updateStudent} startIcon={<RefreshIcon />} sx={{ marginTop: 1 }} variant="outlined">
+                Update student
+              </Button>
+            )}
+          </Stack>
+        </Stack>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/StudyrightsTable.jsx b/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
similarity index 51%
rename from services/frontend/src/components/StudentStatistics/StudentDetails/StudyrightsTable.jsx
rename to services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
index ef1fe9d458..ce8996124e 100644
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/StudyrightsTable.jsx
+++ b/services/frontend/src/pages/Students/StudentDetails/StudyrightsTable.tsx
@@ -1,13 +1,16 @@
+import { FilterAlt as FilterAltIcon, NorthEast as NorthEastIcon } from '@mui/icons-material'
+import { TableBody, TableCell, TableHead, TableRow, Tooltip, IconButton, Stack } from '@mui/material'
 import { orderBy } from 'lodash'
 import moment from 'moment'
 import { Link } from 'react-router'
-import { Button, Divider, Header, Icon, Item, Popup, Table } from 'semantic-ui-react'
 
 import { calculatePercentage, getTargetCreditsForProgramme } from '@/common'
 import { useCurrentSemester } from '@/common/hooks'
 import { studentToolTips } from '@/common/InfoToolTips'
-import { HoverableHelpPopup } from '@/components/common/HoverableHelpPopup'
 import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { Section } from '@/components/material/Section'
+import { StyledTable } from '@/components/material/StyledTable'
+import { TableHeaderWithTooltip } from '@/components/material/TableHeaderWithTooltip'
 import { DISPLAY_DATE_FORMAT } from '@/constants/date'
 import { useGetProgrammesQuery } from '@/redux/populations'
 import { reformatDate } from '@/util/timeAndDate'
@@ -18,10 +21,9 @@ const studyRightIsActive = (studyRight, currentSemester) =>
 
 export const StudyrightsTable = ({ handleStudyPlanChange, student, selectedStudyPlanId }) => {
   const { getTextIn } = useLanguage()
-  const { data: studyProgrammes } = useGetProgrammesQuery()
-  const { semestercode: currentSemesterCode } = useCurrentSemester()
-
-  const studyRightHeaders = ['Programme', 'Study track', 'Status', 'Completed']
+  const { data: studyProgrammes } = useGetProgrammesQuery({})
+  const currentSemester = useCurrentSemester()
+  const currentSemesterCode = currentSemester?.semestercode
 
   if (!student) return null
 
@@ -84,7 +86,7 @@ export const StudyrightsTable = ({ handleStudyPlanChange, student, selectedStudy
       studyPlan =>
         newestProgrammeCode === studyPlan.programme_code && studyPlan.sis_study_right_id === studyright.studyRightId
     )
-    if (!studyPlan) return <>-</>
+    if (!studyPlan) return null
 
     const { completed_credits: credits = 0 } = studyPlan
     if (studyright.graduated) return `${credits} cr`
@@ -93,95 +95,109 @@ export const StudyrightsTable = ({ handleStudyPlanChange, student, selectedStudy
     return `${completedPercentage} (${credits} cr)`
   }
 
-  const showPopulationStatistics = (studyprogramme, date) => {
-    const year = moment(date).isBefore(moment(`${date.slice(0, 4)}-08-01`)) ? date.slice(0, 4) - 1 : date.slice(0, 4)
-    const months = Math.ceil(moment.duration(moment().diff(`${year}-08-01`)).asMonths())
+  const showPopulationStatistics = (studyprogramme: string, date: string) => {
+    const yearFromDate = parseInt(date.slice(0, 4), 10)
+    const year = moment(date).isBefore(`${yearFromDate}-08-01`, 'day') ? yearFromDate - 1 : yearFromDate
+    const months = Math.ceil(moment().diff(`${year}-08-01`, 'months', true))
     return `/populations?months=${months}&semesters=FALL&semesters=SPRING&studyRights=%7B"programme"%3A"${studyprogramme}"%7D&year=${year}`
   }
 
   return (
-    <>
-      <Divider horizontal style={{ margin: '2em 0' }}>
-        <Header as="h4">Filter credits by study right</Header>
-      </Divider>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell />
-            {studyRightHeaders.map(header => (
-              <Table.HeaderCell key={header}>
-                {header}
-                {header === 'Status' && (
-                  <HoverableHelpPopup
-                    content={studentToolTips.studyRightStatus}
-                    size="mini"
-                    style={{ marginLeft: '0.25rem' }}
-                  />
-                )}
-              </Table.HeaderCell>
-            ))}
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
+    <Section
+      cypress="study-rights-section"
+      infoBoxContent="To filter the credits shown in the **Credit graph** by study right, click the filter icon next to the corresponding row in the table below. When a study right is selected, courses included in that study right's study plan are also highlighted with a light blue background in the **Courses** table."
+      title="Study rights"
+    >
+      <StyledTable>
+        <TableHead>
+          <TableRow>
+            <TableCell width="50px" />
+            <TableCell>Programme</TableCell>
+            <TableCell>Study track</TableCell>
+            <TableCell>
+              <TableHeaderWithTooltip header="Status" tooltipText={studentToolTips.studyRightStatus} />
+            </TableCell>
+            <TableCell>Completed</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {studyRightRows.map(studyRight => {
             const numberOfProgrammes = studyRight.programmes.length
             const rowIsFilterable = studyRight.studyPlanId != null
 
             return studyRight.programmes.map(({ name, startDate, endDate, code, studyTrack }, index) => {
               const isFirstRow = index === 0
+              const isLastRow = index === numberOfProgrammes - 1
+
+              let borderWidth = '1px'
+              if (isFirstRow && numberOfProgrammes > 1) {
+                borderWidth = '1px 1px 0 1px'
+              } else if (isLastRow && numberOfProgrammes > 1) {
+                borderWidth = '0 1px 1px 1px'
+              }
+
               return (
-                <Table.Row
+                <TableRow
                   key={`${studyRight.key}-${code}`}
                   onClick={() => (rowIsFilterable ? handleStudyPlanChange(studyRight.studyPlanId) : null)}
-                  style={{ cursor: rowIsFilterable ? 'pointer' : 'not-allowed' }}
+                  style={{
+                    cursor: rowIsFilterable ? 'pointer' : 'not-allowed',
+                    borderWidth,
+                  }}
                 >
                   {isFirstRow && (
-                    <Table.Cell rowSpan={numberOfProgrammes}>
-                      <Popup
-                        content={
+                    <TableCell rowSpan={numberOfProgrammes}>
+                      <Tooltip
+                        arrow
+                        title={
                           rowIsFilterable
                             ? 'Display credits included in the study plan of this study right'
                             : 'This study right does not have a study plan'
                         }
-                        size="mini"
-                        trigger={
-                          <div>
-                            <Button
-                              basic={studyRight.studyPlanId !== selectedStudyPlanId}
-                              disabled={!rowIsFilterable}
-                              icon
-                              onClick={() => handleStudyPlanChange(studyRight.studyPlanId)}
-                              primary={studyRight.studyPlanId === selectedStudyPlanId}
-                              size="mini"
-                            >
-                              <Icon name="filter" />
-                            </Button>
-                          </div>
-                        }
-                      />
-                    </Table.Cell>
+                      >
+                        <div>
+                          <IconButton
+                            color={studyRight.studyPlanId === selectedStudyPlanId ? 'primary' : 'default'}
+                            disabled={!rowIsFilterable}
+                            onClick={() => handleStudyPlanChange(studyRight.studyPlanId)}
+                            size="small"
+                            sx={{
+                              borderRadius: 2,
+                              border: rowIsFilterable ? '1px solid rgba(0, 0, 0, 0.23)' : 'none',
+                            }}
+                          >
+                            <FilterAltIcon fontSize="small" />
+                          </IconButton>
+                        </div>
+                      </Tooltip>
+                    </TableCell>
                   )}
-                  <Table.Cell style={{ border: !isFirstRow && 'none' }}>
-                    {`${getTextIn(name)} (${reformatDate(startDate, DISPLAY_DATE_FORMAT)}–${reformatDate(endDate, DISPLAY_DATE_FORMAT)})`}
-                    {studyProgrammes != null && code in studyProgrammes && (
-                      <Item as={Link} to={showPopulationStatistics(code, startDate)}>
-                        <Icon name="level up alternate" />
-                      </Item>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell style={{ border: !isFirstRow && 'none' }}>
-                    {studyTrack && <div>{`${getTextIn(studyTrack.name)}`}</div>}
-                  </Table.Cell>
-                  {isFirstRow && <Table.Cell rowSpan={numberOfProgrammes}>{renderStatus(studyRight)}</Table.Cell>}
+                  <TableCell>
+                    <Stack alignItems="center" direction="row">
+                      {`${getTextIn(name)} (${reformatDate(startDate, DISPLAY_DATE_FORMAT)}–${reformatDate(endDate, DISPLAY_DATE_FORMAT)})`}
+                      {studyProgrammes != null && code in studyProgrammes && (
+                        <IconButton
+                          color="primary"
+                          component={Link}
+                          size="small"
+                          to={showPopulationStatistics(code, startDate)}
+                        >
+                          <NorthEastIcon fontSize="small" />
+                        </IconButton>
+                      )}
+                    </Stack>
+                  </TableCell>
+                  <TableCell>{getTextIn(studyTrack?.name)}</TableCell>
+                  {isFirstRow && <TableCell rowSpan={numberOfProgrammes}>{renderStatus(studyRight)}</TableCell>}
                   {isFirstRow && (
-                    <Table.Cell rowSpan={numberOfProgrammes}>{renderCompletionPercent(studyRight, student)}</Table.Cell>
+                    <TableCell rowSpan={numberOfProgrammes}>{renderCompletionPercent(studyRight, student)}</TableCell>
                   )}
-                </Table.Row>
+                </TableRow>
               )
             })
           })}
-        </Table.Body>
-      </Table>
-    </>
+        </TableBody>
+      </StyledTable>
+    </Section>
   )
 }
diff --git a/services/frontend/src/pages/Students/StudentDetails/TagsTable.tsx b/services/frontend/src/pages/Students/StudentDetails/TagsTable.tsx
new file mode 100644
index 0000000000..6165ee1efa
--- /dev/null
+++ b/services/frontend/src/pages/Students/StudentDetails/TagsTable.tsx
@@ -0,0 +1,75 @@
+import { Chip, TableCell, TableHead, TableBody, TableRow, Stack } from '@mui/material'
+import { sortBy } from 'lodash'
+import { Link } from 'react-router'
+
+import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { Section } from '@/components/material/Section'
+import { StyledTable } from '@/components/material/StyledTable'
+import { Name } from '@/shared/types'
+
+type Tag = {
+  programme: {
+    code: string
+    name: Name
+  }
+  tags: Array<{
+    id: string
+    tagName: string
+    userId: string | null
+  }>
+}
+
+export const TagsTable = ({ student }: { student: any }) => {
+  const { getTextIn } = useLanguage()
+  if (!student) return null
+
+  const tagData: Tag[] = []
+
+  for (const tag of student.tags) {
+    const tagsForProgramme = tagData.find(({ programme }) => programme.code === tag.programme.code)
+    const parsedTag = { userId: tag.tag.personal_user_id, tagName: tag.tag.tagname, id: tag.tag_id }
+
+    if (tagsForProgramme) {
+      tagsForProgramme.tags.push(parsedTag)
+    } else {
+      tagData.push({ programme: tag.programme, tags: [parsedTag] })
+    }
+  }
+
+  if (tagData.length === 0) return null
+  return (
+    <Section
+      infoBoxContent="Personal tags have a purple background, while shared tags have a gray background. You can view or create tags by clicking the programme name."
+      title="Tags"
+    >
+      <StyledTable showCellBorders>
+        <TableHead>
+          <TableRow>
+            <TableCell>Programme</TableCell>
+            <TableCell>Code</TableCell>
+            <TableCell>Tags</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tagData.map(({ programme, tags }) => (
+            <TableRow key={programme.code}>
+              <TableCell>
+                <Link target="_blank" to={`/study-programme/${programme.code}?p_tab=4`}>
+                  {getTextIn(programme.name)}
+                </Link>
+              </TableCell>
+              <TableCell>{programme.code}</TableCell>
+              <TableCell>
+                <Stack direction="row" spacing={1}>
+                  {sortBy(tags, 'tagName').map(tag => (
+                    <Chip color={tag.userId ? 'secondary' : 'default'} key={tag.id} label={tag.tagName} />
+                  ))}
+                </Stack>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </StyledTable>
+    </Section>
+  )
+}
diff --git a/services/frontend/src/components/StudentStatistics/StudentDetails/index.jsx b/services/frontend/src/pages/Students/StudentDetails/index.tsx
similarity index 78%
rename from services/frontend/src/components/StudentStatistics/StudentDetails/index.jsx
rename to services/frontend/src/pages/Students/StudentDetails/index.tsx
index f5dc754341..be292497a2 100644
--- a/services/frontend/src/components/StudentStatistics/StudentDetails/index.jsx
+++ b/services/frontend/src/pages/Students/StudentDetails/index.tsx
@@ -1,19 +1,22 @@
+import { Alert, CircularProgress, Stack } from '@mui/material'
 import { isEmpty, orderBy } from 'lodash'
 import { useState } from 'react'
-import { Loader, Message } from 'semantic-ui-react'
+import { useParams } from 'react-router'
 
 import { bachelorHonoursProgrammes as bachelorCodes } from '@/common'
-import { StudentInfoCard } from '@/components/StudentStatistics/StudentInfoCard'
-import { useGetSemestersQuery } from '@/redux/semesters'
+import { SemestersData, useGetSemestersQuery } from '@/redux/semesters'
 import { useGetStudentQuery } from '@/redux/students'
 import { BachelorHonours } from './BachelorHonours'
-import { CourseParticipationTable } from './CourseParticipationTable'
+import { CourseTables } from './CourseTables'
 import { StudentGraphs } from './StudentGraphs'
+import { StudentInfoCard } from './StudentInfoCard'
 import { StudyrightsTable } from './StudyrightsTable'
 import { TagsTable } from './TagsTable'
 
-const getAbsentYears = (studyRights, semesters) => {
-  const semesterEnrollments = studyRights.reduce((acc, { semesterEnrollments }) => {
+const getAbsentYears = (studyRights: any[], semesters: SemestersData['semesters']) => {
+  const semesterEnrollments = studyRights.reduce<
+    Record<string, { semestercode: number; enrollmenttype: number; statutoryAbsence: boolean }>
+  >((acc, { semesterEnrollments }) => {
     if (semesterEnrollments == null) return acc
     for (const enrollment of semesterEnrollments) {
       const currentEnrollment = acc[enrollment.semester]
@@ -33,8 +36,8 @@ const getAbsentYears = (studyRights, semesters) => {
     return acc
   }, {})
 
-  const minimumSemesterCode = Math.min(...Object.keys(semesterEnrollments))
-  const maximumSemesterCode = Math.max(...Object.keys(semesterEnrollments))
+  const minimumSemesterCode = Math.min(...Object.keys(semesterEnrollments).map(Number))
+  const maximumSemesterCode = Math.max(...Object.keys(semesterEnrollments).map(Number))
 
   for (let i = minimumSemesterCode + 1; i < maximumSemesterCode; i++) {
     if (!semesterEnrollments[i]) {
@@ -53,19 +56,22 @@ const getAbsentYears = (studyRights, semesters) => {
   return mergedEnrollments
 }
 
-export const StudentDetails = ({ studentNumber }) => {
+export type Absence = ReturnType<typeof getAbsentYears>[number]
+
+export const StudentDetails = () => {
+  const { studentNumber } = useParams()
   const [graphYearStart, setGraphYear] = useState(null)
   const [selectedStudyPlanId, setSelectedStudyPlanId] = useState(null)
   const { data: semestersAndYears } = useGetSemestersQuery()
-  const { data: student, isLoading, isError } = useGetStudentQuery(studentNumber)
+  const { data: student, isLoading: isLoading, isError: isError } = useGetStudentQuery(studentNumber)
   let honoursCode
 
   if (isLoading) {
-    return <Loader active />
+    return <CircularProgress />
   }
 
   if (isError || student.error) {
-    return <Message header="Student not found or no sufficient permissions" icon="warning sign" negative size="big" />
+    return <Alert severity="error">Student not found or no sufficient permissions</Alert>
   }
 
   if (!student || !studentNumber || isEmpty(student) || !semestersAndYears) {
@@ -105,23 +111,22 @@ export const StudentDetails = ({ studentNumber }) => {
   const absences = getAbsentYears(student.studyRights, semestersAndYears.semesters)
 
   return (
-    <>
+    <Stack spacing={2} width="100%">
       <StudentInfoCard student={student} />
       <StudentGraphs
         absences={absences}
         graphYearStart={graphYearStart}
         selectedStudyPlanId={selectedStudyPlanId}
-        semesters={semestersAndYears}
         student={student}
       />
-      <TagsTable student={student} />
       <StudyrightsTable
         handleStudyPlanChange={handleStudyPlanChange}
         selectedStudyPlanId={selectedStudyPlanId}
         student={student}
       />
+      <TagsTable student={student} />
       {honoursCode && <BachelorHonours absentYears={absences} programmeCode={honoursCode} student={student} />}
-      <CourseParticipationTable selectedStudyPlanId={selectedStudyPlanId} student={student} />
-    </>
+      <CourseTables selectedStudyPlanId={selectedStudyPlanId} student={student} />
+    </Stack>
   )
 }
diff --git a/services/frontend/src/pages/Students/StudentSearch.tsx b/services/frontend/src/pages/Students/StudentSearch.tsx
new file mode 100644
index 0000000000..e97f673be5
--- /dev/null
+++ b/services/frontend/src/pages/Students/StudentSearch.tsx
@@ -0,0 +1,144 @@
+import { Search as SearchIcon } from '@mui/icons-material'
+import {
+  Alert,
+  Box,
+  CircularProgress,
+  InputAdornment,
+  Stack,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+} from '@mui/material'
+import { debounce } from 'lodash'
+import { useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import { useLanguage } from '@/components/LanguagePicker/useLanguage'
+import { StyledTable } from '@/components/material/StyledTable'
+import { useStudentNameVisibility } from '@/components/StudentNameVisibilityToggle'
+import { DISPLAY_DATE_FORMAT } from '@/constants/date'
+import { useSearchStudentsQuery } from '@/redux/students'
+import { reformatDate } from '@/util/timeAndDate'
+
+const getProgrammes = (studyRights, getTextIn) =>
+  [
+    ...new Set(
+      studyRights
+        .reduce(
+          (res, studyRight) => [...res, ...studyRight.studyRightElements.map(element => getTextIn(element.name))],
+          []
+        )
+        .sort()
+    ),
+  ] as string[]
+
+export const StudentSearch = () => {
+  const { getTextIn } = useLanguage()
+  const [searchString, setSearchString] = useState('')
+  const [query, setQuery] = useState('')
+  const navigate = useNavigate()
+  const { visible: showNames } = useStudentNameVisibility()
+  const {
+    data: students,
+    isUninitialized,
+    isFetching,
+  } = useSearchStudentsQuery(query, {
+    skip: query.trim().length < (Number.isNaN(Number(query)) ? 4 : 6),
+  })
+  const debouncedSetQuery = useMemo(() => debounce(setQuery, 1000), [setQuery])
+  const isLoading = isFetching || query !== searchString
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSetQuery(event.target.value)
+    setSearchString(event.target.value)
+  }
+
+  useEffect(() => {
+    return () => {
+      debouncedSetQuery.cancel()
+    }
+  }, [debouncedSetQuery])
+
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <TextField
+        autoFocus
+        fullWidth
+        onChange={handleSearchChange}
+        placeholder="Search with a student number or name (surname firstname)"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <InputAdornment position="end">
+                <SearchIcon />
+              </InputAdornment>
+            ),
+            sx: { borderRadius: 3 },
+          },
+        }}
+        value={searchString}
+      />
+      {!isLoading && students?.length > 0 && (
+        <StyledTable>
+          <TableHead>
+            <TableRow>
+              {showNames && (
+                <>
+                  <TableCell>Last name</TableCell>
+                  <TableCell>First names</TableCell>
+                </>
+              )}
+              <TableCell>Student number</TableCell>
+              <TableCell>Started</TableCell>
+              <TableCell>Credits</TableCell>
+              <TableCell>Active study rights</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {students.map(student => (
+              <TableRow
+                key={student.studentNumber}
+                onClick={() => navigate(`/students/${student.studentNumber}`)}
+                sx={{ cursor: 'pointer' }}
+              >
+                {showNames && (
+                  <>
+                    <TableCell>{student.lastname}</TableCell>
+                    <TableCell>{student.firstnames}</TableCell>
+                  </>
+                )}
+                <TableCell>{student.studentNumber}</TableCell>
+                <TableCell>
+                  {student.started ? reformatDate(student.started, DISPLAY_DATE_FORMAT) : 'Unavailable'}
+                </TableCell>
+                <TableCell>{student.credits}</TableCell>
+                <TableCell>
+                  {getProgrammes(student.studyRights, getTextIn).map(programme => (
+                    <div key={`${programme}`}>{programme}</div>
+                  ))}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </StyledTable>
+      )}
+      {isLoading && (
+        <Box sx={{ display: 'flex', justifyContent: 'center', padding: 5 }}>
+          <CircularProgress />
+        </Box>
+      )}
+      {!isLoading && students?.length === 0 && (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Alert severity="error">No students found</Alert>
+        </Box>
+      )}
+      {isUninitialized && query === searchString && (
+        <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <Alert severity="info">Search term is not accurate enough</Alert>
+        </Box>
+      )}
+    </Stack>
+  )
+}
diff --git a/services/frontend/src/pages/Students/index.tsx b/services/frontend/src/pages/Students/index.tsx
new file mode 100644
index 0000000000..f7541ccbb7
--- /dev/null
+++ b/services/frontend/src/pages/Students/index.tsx
@@ -0,0 +1,20 @@
+import { Container, Stack } from '@mui/material'
+import { Outlet } from 'react-router'
+
+import { useTitle } from '@/common/hooks'
+import { PageTitle } from '@/components/material/PageTitle'
+import { StudentNameVisibilityToggle } from '@/components/StudentNameVisibilityToggle'
+
+export const Students = () => {
+  useTitle('Student statistics')
+
+  return (
+    <Container maxWidth="lg">
+      <PageTitle title="Student statistics" />
+      <Stack alignItems="center" spacing={2}>
+        <StudentNameVisibilityToggle />
+        <Outlet />
+      </Stack>
+    </Container>
+  )
+}
diff --git a/services/frontend/src/redux/index.js b/services/frontend/src/redux/index.ts
similarity index 78%
rename from services/frontend/src/redux/index.js
rename to services/frontend/src/redux/index.ts
index 040f147096..0f4cbf6627 100644
--- a/services/frontend/src/redux/index.js
+++ b/services/frontend/src/redux/index.ts
@@ -27,10 +27,11 @@ export const store = configureStore({
   },
   // oodikone is currently too heavy for other middlewares than thunk, but
   // feel free to take use them at some point if possible
-  middleware: getDefaultMiddleware => [
-    ...getDefaultMiddleware({ immutableCheck: false, serializableCheck: false }),
-    RTKApi.middleware,
-    handleRequest,
-  ],
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({ immutableCheck: false, serializableCheck: false }).concat(RTKApi.middleware, handleRequest),
 })
 setupListeners(store.dispatch)
+
+export type RootState = ReturnType<typeof store.getState>
+// eslint-disable-next-line import/no-unused-modules
+export type AppDispatch = typeof store.dispatch
diff --git a/services/frontend/src/redux/semesters.ts b/services/frontend/src/redux/semesters.ts
index 2a3bce547e..bcf101ed49 100644
--- a/services/frontend/src/redux/semesters.ts
+++ b/services/frontend/src/redux/semesters.ts
@@ -1,7 +1,7 @@
 import { RTKApi } from '@/apiConnection'
 import { Name } from '@/shared/types'
 
-type SemestersData = {
+export type SemestersData = {
   semesters: Record<
     string,
     {
diff --git a/services/frontend/src/redux/settings.js b/services/frontend/src/redux/settings.js
deleted file mode 100644
index 1980fecefd..0000000000
--- a/services/frontend/src/redux/settings.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { DEFAULT_LANG } from '@/shared/language'
-
-const initialState = {
-  language: DEFAULT_LANG,
-  namesVisible: false,
-  chartHeight: 600,
-}
-
-export const reducer = (state = initialState, action) => {
-  switch (action.type) {
-    case 'TOGGLE_STUDENT_NAME_VISIBILITY':
-      return {
-        ...state,
-        namesVisible: !state.namesVisible,
-      }
-    default:
-      return state
-  }
-}
-
-export const toggleStudentNameVisibility = () => ({
-  type: 'TOGGLE_STUDENT_NAME_VISIBILITY',
-})
diff --git a/services/frontend/src/redux/settings.ts b/services/frontend/src/redux/settings.ts
new file mode 100644
index 0000000000..2d1642042a
--- /dev/null
+++ b/services/frontend/src/redux/settings.ts
@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { DEFAULT_LANG } from '@/shared/language'
+
+const settingsSlice = createSlice({
+  name: 'settings',
+  initialState: {
+    language: DEFAULT_LANG,
+    namesVisible: false,
+    chartHeight: 600,
+  },
+  reducers: {
+    toggleStudentNameVisibility: state => {
+      state.namesVisible = !state.namesVisible
+    },
+  },
+})
+
+export const { toggleStudentNameVisibility } = settingsSlice.actions
+
+export const { reducer } = settingsSlice