diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
index 64a98c8786a211c52fbb74a5d07b0d62e5d0954f..819218d16f5d09c1e4ad1dfdd5e890fe2e5c9971 100644
--- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
+++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx
@@ -18,6 +18,7 @@ import {
   FormControlLabel,
   Box,
   Typography,
+  FormHelperText,
 } from '@mui/material'
 import Page from 'components/page'
 import { Guest } from 'interfaces'
@@ -175,7 +176,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
       </MenuItem>
     )
   }
-
+  const hasRoleTypeError =
+    errors && errors.type && errors.type.type === 'required'
+  const hasOuChoiceError =
+    errors && errors.orgunit && errors.orgunit.type === 'required'
   return (
     <Page>
       <SponsorInfoButtons
@@ -195,7 +199,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
             control={control}
             rules={{ required: true }}
             render={() => (
-              <FormControl>
+              <FormControl error={hasRoleTypeError}>
                 <InputLabel id="roletype-select-label">
                   {t('input.roleType')}
                 </InputLabel>
@@ -214,10 +218,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               </FormControl>
             )}
           />
-          {errors.type && errors.type.type === 'required' && (
-            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+          {hasRoleTypeError && (
+            <FormHelperText error>
               {t('validation.typeMustBeChosen')}
-            </Box>
+            </FormHelperText>
           )}
 
           <Controller
@@ -225,7 +229,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
             control={control}
             rules={{ required: true }}
             render={() => (
-              <FormControl>
+              <FormControl error={hasOuChoiceError}>
                 <InputLabel id="ou-select-label-id">
                   {t('common:ou')}
                 </InputLabel>
@@ -246,10 +250,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               </FormControl>
             )}
           />
-          {errors.orgunit && errors.orgunit.type === 'required' && (
-            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+          {hasOuChoiceError && (
+            <FormHelperText error>
               {t('validation.ouMustBeChosen')}
-            </Box>
+            </FormHelperText>
           )}
 
           <Controller