diff --git a/frontend/src/components/debug/index.tsx b/frontend/src/components/debug/index.tsx
index e2bc7339b61b9f995cc5534f927a35990c956853..cd11665587e53c6fb61094b668a27c19db502679 100644
--- a/frontend/src/components/debug/index.tsx
+++ b/frontend/src/components/debug/index.tsx
@@ -4,7 +4,14 @@ import { useTranslation } from 'react-i18next'
 import CheckIcon from '@mui/icons-material/Check'
 import ClearIcon from '@mui/icons-material/Clear'
 
-import { Box, Table, TableBody, TableRow, TableCell } from '@mui/material'
+import {
+  Box,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  Typography,
+} from '@mui/material'
 
 import { appInst, appTimezone, appVersion } from 'appConfig'
 import { Link } from 'react-router-dom'
@@ -48,7 +55,7 @@ export const Debug = () => {
   ]
   return (
     <Box>
-      <p>
+      <Typography variant="body1">
         <strong>Routes</strong>
         <ul>
           <li key="root">
@@ -67,8 +74,8 @@ export const Debug = () => {
             <Link to="/guestregister">Guest Registration</Link>
           </li>
         </ul>
-      </p>
-      <h3>Debug</h3>
+      </Typography>
+      <Typography variant="h2">Debug</Typography>
       <Box sx={{ maxWidth: '30rem' }}>
         <Table>
           <TableBody>
diff --git a/frontend/src/components/identityLine/index.tsx b/frontend/src/components/identityLine/index.tsx
index 2ccba820d14ad0e50710286952a572c88c86e68e..afa3160f5e840b50eff0b61db44495a425bfe2d4 100644
--- a/frontend/src/components/identityLine/index.tsx
+++ b/frontend/src/components/identityLine/index.tsx
@@ -1,4 +1,4 @@
-import { Button, TableRow } from '@mui/material'
+import { Button, TableRow, Typography } from '@mui/material'
 import ConfirmDialog from 'components/confirmDialog'
 import { Identity } from 'interfaces'
 import { useState } from 'react'
@@ -38,7 +38,7 @@ const IdentityLine = ({
       <TableCell align="left">{identity ? identity.value : ''}</TableCell>
       <TableCell>
         {!identity.verified_at ? (
-          <div>
+          <Typography>
             <Button
               aria-label={t('button.verify')}
               onClick={() => setConfirmOpen(true)}
@@ -54,7 +54,7 @@ const IdentityLine = ({
             >
               {t('confirmationDialog.confirmIdentityText')}
             </ConfirmDialog>
-          </div>
+          </Typography>
         ) : (
           <CheckIcon sx={{ fill: (theme) => theme.palette.success.main }} />
         )}
diff --git a/frontend/src/components/page/page.tsx b/frontend/src/components/page/page.tsx
index 1b62e32b67c6f97ba66aba6b0f5735ef832820f0..647e39c59b965c5abcaa6c663d809b583209c5cc 100644
--- a/frontend/src/components/page/page.tsx
+++ b/frontend/src/components/page/page.tsx
@@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles'
 import { Container } from '@mui/material'
 import { appInst } from 'appConfig'
 
-const StyledPageHeader = styled('h2')(({ theme }) => ({
+const StyledPageHeader = styled('h1')(({ theme }) => ({
   color: theme.greg.textWhite,
   fontSize: '3rem',
   fontWeight: 'bold',
diff --git a/frontend/src/routes/components/notFound.tsx b/frontend/src/routes/components/notFound.tsx
index a0bfc390680e2ec063f82e71c6b55109339a6f48..c38a0f384fe0a4386f58c61c14b58d6b63a748c1 100644
--- a/frontend/src/routes/components/notFound.tsx
+++ b/frontend/src/routes/components/notFound.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import Page from 'components/page'
+import { Typography } from '@mui/material'
 
 export default function NotFound() {
   return (
     <Page header="404 - Not found">
-      <h2> 404 - Not found</h2>
+      <Typography variant="h1">404 - Not found</Typography>
     </Page>
   )
 }
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 79d2f554f6264e635a20305b4bd9ff44579b8001..912692f48cd3a2fc0dee5e313feac570d4b1c6c1 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/frontend/src/routes/frontpage/components/loginpage.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { styled } from '@mui/system'
-import { Container } from '@mui/material'
+import { Container, Typography } from '@mui/material'
 
 import LoginBox from 'components/loginBox'
 import { instNameUpperCaser } from 'utils'
@@ -24,7 +24,7 @@ export default function LoginPage() {
       }}
     >
       <Container>
-        <h1>{t('header')}</h1>
+        <Typography variant="h1">{t('header')}</Typography>
         <StyledParagraph sx={{ marginBottom: '4rem' }}>
           {t('description', { inst: instNameUpperCaser(appInst) })}
         </StyledParagraph>
diff --git a/frontend/src/routes/guest/register/steps/register.tsx b/frontend/src/routes/guest/register/steps/register.tsx
index 4da19a725000abbc8625da05179cc4d55dccf5c6..6ac33525402e21c00661cfaef2a59c08645357c2 100644
--- a/frontend/src/routes/guest/register/steps/register.tsx
+++ b/frontend/src/routes/guest/register/steps/register.tsx
@@ -250,7 +250,7 @@ const GuestRegisterStep = forwardRef(
       <>
         <Box sx={{ maxWidth: '30rem' }}>
           <Typography
-            variant="h5"
+            variant="h2"
             sx={{
               paddingTop: '1rem',
               paddingBottom: '1rem',
@@ -476,7 +476,7 @@ const GuestRegisterStep = forwardRef(
                   )}
                 />
               </Box>
-              <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
+              <Typography variant="h2" sx={{ paddingTop: '1rem' }}>
                 {t('guestRegisterWizardText.identityHeader')}
               </Typography>
               <Typography>
@@ -572,7 +572,7 @@ const GuestRegisterStep = forwardRef(
                 <Typography color="error">{idErrorState}</Typography>
               )}
 
-              <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
+              <Typography variant="h2" sx={{ paddingTop: '1rem' }}>
                 {t('guestRegisterWizardText.yourGuestPeriod')}
               </Typography>
               <Typography>
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 9373c224fc669c8cc9f20cbdbad60efb3526d050..7100e10c20990a3098417e2e48ff03fc2e722f41 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/frontend/src/routes/invite/index.tsx
@@ -6,7 +6,7 @@ import Loading from 'components/loading'
 import { useUserContext } from 'contexts'
 import { setCookie, submitJsonOpts } from 'utils'
 import LoginBox from 'components/loginBox'
-import { Box, Container } from '@mui/material'
+import { Box, Container, Typography } from '@mui/material'
 
 function ChooseRegistrationMethod() {
   const { t } = useTranslation(['invite'])
@@ -28,11 +28,17 @@ function ChooseRegistrationMethod() {
           marginBottom: '8rem',
         }}
       >
-        <h1>{t('header')}</h1>
+        <Typography variant="h1">{t('header')}</Typography>
         <Box sx={{ fontSize: '1rem', marginBottom: '2rem' }}>
           {t('description')}
         </Box>
-        <LoginBox header={t('guest')} info={t('guestInfo')} manual large onClickLogin={setCookieLogin}/>
+        <LoginBox
+          header={t('guest')}
+          info={t('guestInfo')}
+          manual
+          large
+          onClickLogin={setCookieLogin}
+        />
       </Container>
     </Page>
   )
@@ -48,8 +54,8 @@ function ShowFeedback(props: ShowFeedbackProps) {
 
   return (
     <Page>
-      <h1>{title}</h1>
-      <p>{description}</p>
+      <Typography variant="h1">{title}</Typography>
+      <Typography variant="body1">{description}</Typography>
     </Page>
   )
 }
diff --git a/frontend/src/routes/landing/index.tsx b/frontend/src/routes/landing/index.tsx
index 12702a8053ec190c28696620cbee26075864a9db..f964ef84a6a942230c3f40fa2e0b1f94d9e65f91 100644
--- a/frontend/src/routes/landing/index.tsx
+++ b/frontend/src/routes/landing/index.tsx
@@ -1,4 +1,4 @@
-import { Table, TableBody } from '@mui/material'
+import { Table, TableBody, Typography } from '@mui/material'
 import {
   TableContainer,
   TableHead,
@@ -28,7 +28,7 @@ const GuestPage = () => {
   }, [])
   return (
     <Page>
-      <h4>{t('guestInfo.contactInfo')}</h4>
+      <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead sx={{ backgroundColor: 'none' }}>
@@ -67,7 +67,7 @@ const GuestPage = () => {
           </TableBody>
         </Table>
       </TableContainer>
-      <h4>{t('guestInfo.roleInfoHead')}</h4>
+      <Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead sx={{ backgroundColor: 'none' }}>
@@ -84,7 +84,7 @@ const GuestPage = () => {
           </TableBody>
         </Table>
       </TableContainer>
-      <h4>{t('guestInfo.consentInfoHead')}</h4>
+      <Typography variant="h2">{t('guestInfo.consentInfoHead')}</Typography>
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead sx={{ backgroundColor: 'none' }}>
@@ -113,8 +113,8 @@ const AnonPage = () => {
   const [t] = useTranslation('common')
   return (
     <Page>
-      <h4>{t('anonpage.top')}</h4>
-      <p>{t('anonpage.body')}</p>
+      <Typography variant="h2">{t('anonpage.top')}</Typography>
+      <Typography variant="body1">{t('anonpage.body')}</Typography>
     </Page>
   )
 }
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index b453b9c405b43610fb495c8bf4e8282a4c26543f..e9ba72745b9b5a65ae0025a24a53c775770f1b95 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -11,6 +11,7 @@ import {
   AccordionSummary,
   AccordionDetails,
   Button,
+  Typography,
 } from '@mui/material'
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
@@ -216,10 +217,12 @@ const InvitedGuests = ({ persons }: GuestProps) => {
       <StyledAccordionSummary
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
-        <h2>{t('common:sentInvitations')}</h2>
+        <Typography variant="h2">{t('common:sentInvitations')}</Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <p>{t('common:sentInvitationsDescription')}</p>
+        <Typography variant="body1">
+          {t('common:sentInvitationsDescription')}
+        </Typography>
         <GuestTable guests={guests} emptyText={t('common:noInvitations')} />
       </AccordionDetails>
     </StyledAccordion>
@@ -245,10 +248,12 @@ const ActiveGuests = ({ persons }: GuestProps) => {
       <StyledAccordionSummary
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
-        <h2>{t('common:activeGuests')}</h2>
+        <Typography variant="h2">{t('common:activeGuests')}</Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <p>{t('common:activeGuestsDescription')}</p>
+        <Typography variant="body1">
+          {t('common:activeGuestsDescription')}
+        </Typography>
         <GuestTable guests={guests} emptyText={t('common:noActiveGuests')} />
       </AccordionDetails>
     </StyledAccordion>
@@ -275,22 +280,22 @@ const WaitingGuests = ({ persons }: GuestProps) => {
       <StyledAccordionSummary
         expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
       >
-        <h2>
+        <Typography variant="h2">
           {t('common:waitingGuests')}{' '}
           {guests.length > 0 && (
             <NotificationsActiveIcon
               sx={{ color: 'error.main', fontSize: '26px' }}
             />
           )}
-        </h2>
+        </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <p>
+        <Typography variant="body1">
           <Trans i18nKey="common:waitingGuestsDescription">
             Her godkjenner du gjester som har <b>registrert seg manuelt</b>.
             Gjester som har FEIDE-bruker trenger ikke godkjenning.
           </Trans>
-        </p>
+        </Typography>
         <GuestTable guests={guests} emptyText={t('common:noWaitingGuests')} />
       </AccordionDetails>
     </StyledAccordion>
diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
index fe65fcffc4e8467e26929a81e4256c66e6445d6d..3c95f61e2abc0db0df31a67ad711702fec64d33e 100644
--- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
@@ -13,6 +13,7 @@ import {
   DialogContent,
   DialogActions,
   TextField,
+  Typography,
 } from '@mui/material'
 import {
   TableContainer,
@@ -169,8 +170,9 @@ export default function GuestInfo({
   return (
     <Page>
       <SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
-      <h2>{t('guestInfo.contactInfo')}</h2>
-      <p>{t('guestInfo.contactInfoBody')}</p>
+      <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
+      <Typography variant="body1">{t('guestInfo.contactInfoBody')}</Typography>
+
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
@@ -283,9 +285,8 @@ export default function GuestInfo({
       >
         {t('button.save')}
       </Button>
-      <h2>{t('guestInfo.roleInfoHead')}</h2>
-      <p>{t('guestInfo.roleInfoBody')}</p>
-
+      <Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
+      <Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>
diff --git a/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
index 18ef01ec192691f16fd2bbea4a0d544dc741e1b9..3f1ec42f8c501c033b9992adf6f4efc6187574bb 100644
--- a/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx
@@ -1,6 +1,6 @@
 import format from 'date-fns/format'
 import { addDays } from 'date-fns/fp'
-import { Button, Table, TableBody, TextField } from '@mui/material'
+import { Button, Table, TableBody, TextField, Typography } from '@mui/material'
 import TableHeadMui from '@mui/material/TableHead'
 import { styled } from '@mui/system'
 import TableContainerMui from '@mui/material/TableContainer'
@@ -145,8 +145,8 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
         to={`/sponsor/guest/${pid}`}
         name={`${guest.first} ${guest.last}`}
       />
-      <h4>{t('sponsor.roleInfoHead')}</h4>
-      <p>{t('sponsor.roleInfoText')}</p>
+      <Typography variant="h2">{t('sponsor.roleInfoHead')}</Typography>
+      <Typography variant="body1">{t('sponsor.roleInfoText')}</Typography>
       <form onSubmit={onSubmit}>
         <TableContainer>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">
diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
index 753fcc93a96d1e8e5fe8b8b9740b9475ed710115..2916a1ef2397af8b626a50a268b310c1e3426e9c 100644
--- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
+++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
@@ -12,6 +12,7 @@ import {
   SelectChangeEvent,
   FormControlLabel,
   Box,
+  Typography,
 } from '@mui/material'
 import Page from 'components/page'
 import { format } from 'date-fns'
@@ -178,8 +179,8 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
         to={`/sponsor/guest/${pid}`}
         name={`${guest.first} ${guest.last}`}
       />
-      <h3>{t('guest.headerText')}</h3>
-      <h4>{t('guest.bodyText')}</h4>
+      <Typography variant="h2">{t('guest.headerText')}</Typography>
+      <Typography variant="body1">{t('guest.bodyText')}</Typography>
       <form onSubmit={onSubmit}>
         <Stack spacing={2}>
           <FormControl>
diff --git a/frontend/src/routes/sponsor/register/frontPage.tsx b/frontend/src/routes/sponsor/register/frontPage.tsx
index cac827cc432390ec27c35786ef751ee95563d1c3..e6ad53f70bcd4cc39a902136802e9eecbdd25495 100644
--- a/frontend/src/routes/sponsor/register/frontPage.tsx
+++ b/frontend/src/routes/sponsor/register/frontPage.tsx
@@ -1,4 +1,10 @@
-import { Button, InputAdornment, MenuItem, TextField } from '@mui/material'
+import {
+  Button,
+  InputAdornment,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
 import Page from 'components/page'
 import { Link } from 'react-router-dom'
 import SponsorGuestButtons from 'routes/components/sponsorGuestButtons'
@@ -51,8 +57,8 @@ function FrontPage() {
   return (
     <Page>
       <SponsorGuestButtons registerNewGuestActive />
-      <h2>{t('register.registerHeading')}</h2>
-      <p>{t('register.registerText')}</p>
+      <Typography variant="h2">{t('register.registerHeading')}</Typography>
+      <Typography variant="body1">{t('register.registerText')}</Typography>
       <Box
         sx={{
           borderStyle: () => (guests.length > 0 ? 'solid' : 'none'),
diff --git a/frontend/src/routes/sponsor/register/stepPersonForm.tsx b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
index 72e209d149539b1b25998e7449102ae79a354fd4..013d8d1b2dcd39a4f33cd522205d9272b7f43463 100644
--- a/frontend/src/routes/sponsor/register/stepPersonForm.tsx
+++ b/frontend/src/routes/sponsor/register/stepPersonForm.tsx
@@ -146,7 +146,7 @@ const StepPersonForm = forwardRef(
     return (
       <>
         <Typography
-          variant="h5"
+          variant="h2"
           sx={{
             paddingTop: '1rem',
             paddingBottom: '1rem',
@@ -154,7 +154,7 @@ const StepPersonForm = forwardRef(
         >
           {t('registerWizardText.registerContactInfo')}
         </Typography>
-        <Typography sx={{ paddingBottom: '0.5rem' }}>
+        <Typography variant="body1" sx={{ paddingBottom: '0.5rem' }}>
           {t('registerWizardText.registerPage')}
         </Typography>
         <Divider sx={{ border: '1px solid' }} />
@@ -198,7 +198,7 @@ const StepPersonForm = forwardRef(
             </Stack>
           </Box>
           <Typography
-            variant="h5"
+            variant="h2"
             sx={{
               paddingTop: '1rem',
               paddingBottom: '1rem',
@@ -206,7 +206,7 @@ const StepPersonForm = forwardRef(
           >
             {t('registerWizardText.registerPeriod')}
           </Typography>
-          <Typography sx={{ paddingBottom: '0.5rem' }}>
+          <Typography variant="body1" sx={{ paddingBottom: '0.5rem' }}>
             {t('registerWizardText.registerPeriodText')}
           </Typography>
           <Divider sx={{ border: '1px solid' }} />