diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 4231561..200e016 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -557,7 +557,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                         </Grid>
                                     </Grid>
                                     <Grid item xs={12} md={12} lg={12} sx={{ mb: 3 }}>
-                                        <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
+                                        <Typography component="span" display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
                                             <FormattedMessage id="uploadApplicationFileRemark" />
                                         </Typography>
                                     </Grid>
diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js
index 6e9accf..304308c 100644
--- a/src/pages/authentication/BusRegister.js
+++ b/src/pages/authentication/BusRegister.js
@@ -154,7 +154,7 @@ const BusRegister = () => {
       </Stepper>
       {allStepsCompleted() ? (
         <React.Fragment>
-          <Typography variant="h4" sx={{ mt: 2, mb: 1 }}>
+          <Typography component="span" variant="h4" sx={{ mt: 2, mb: 1, display: 'block' }}>
             All steps completed - you&apos;re finished
           </Typography>
           <Stack direction="row" sx={{ pb: 2 }}>
@@ -185,7 +185,7 @@ const BusRegister = () => {
                 sx={{ mr: 1 }}
                 variant="h5"
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -197,7 +197,7 @@ const BusRegister = () => {
                 sx={{ mr: 1 }}
                 variant="h5"
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -216,7 +216,7 @@ const BusRegister = () => {
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
@@ -225,7 +225,7 @@ const BusRegister = () => {
                 (
                   <Button variant="contained" color="inherit"
                     disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
@@ -233,7 +233,7 @@ const BusRegister = () => {
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                   <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>
diff --git a/src/pages/authentication/IAmSmartRegister.js b/src/pages/authentication/IAmSmartRegister.js
index 45edd96..16dc20d 100644
--- a/src/pages/authentication/IAmSmartRegister.js
+++ b/src/pages/authentication/IAmSmartRegister.js
@@ -161,12 +161,12 @@ const Register = () => {
       </Stepper>
       {allStepsCompleted() ? (
         <React.Fragment>
-          <Typography variant="h4" sx={{ mt: 2, mb: 1 }}>
+          <Typography component="span" variant="h4" sx={{ mt: 2, mb: 1, display: 'block' }}>
             All steps completed - you&apos;re finished
           </Typography>
           <Stack direction="row" sx={{ pt: 2 }}>
             <Stack sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}><Typography variant="h5"> <FormattedMessage id="reset"/></Typography></Button>
+            <Button onClick={handleReset}><Typography component="span" variant="h5"> <FormattedMessage id="reset"/></Typography></Button>
           </Stack>
         </React.Fragment>
       ) : (
@@ -192,7 +192,7 @@ const Register = () => {
                 onClick={handleBack}
                 sx={{ mr: 1 }}
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -203,7 +203,7 @@ const Register = () => {
                 onClick={handleBack}
                 sx={{ mr: 1 }}
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -222,7 +222,7 @@ const Register = () => {
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
@@ -231,7 +231,7 @@ const Register = () => {
                 (
                   <Button variant="contained" color="inherit"
                     disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
@@ -239,7 +239,7 @@ const Register = () => {
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                   <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>
diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js
index 2e6e427..34b9871 100644
--- a/src/pages/authentication/Register.js
+++ b/src/pages/authentication/Register.js
@@ -160,12 +160,12 @@ const Register = () => {
       </Stepper>
       {allStepsCompleted() ? (
         <React.Fragment>
-          <Typography variant="h4" sx={{ mt: 2, mb: 1 }}>
+          <Typography component="span" variant="h4" sx={{ mt: 2, mb: 1, display: 'block' }}>
             All steps completed - you&apos;re finished
           </Typography>
           <Stack direction="row" sx={{ pt: 2 }}>
             <Stack sx={{ flex: '1 1 auto' }} />
-            <Button onClick={handleReset}><Typography variant="h5">Reset</Typography></Button>
+            <Button onClick={handleReset}><Typography component="span" variant="h5">Reset</Typography></Button>
           </Stack>
         </React.Fragment>
       ) : (
@@ -191,7 +191,7 @@ const Register = () => {
                 sx={{ mr: 1 }}
                 variant="h5"
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -203,7 +203,7 @@ const Register = () => {
                 sx={{ mr: 1 }}
                 variant="h5"
               >
-                <Typography variant="h5">
+                <Typography component="span" variant="h5">
                   <FormattedMessage id="back"/>
                 </Typography>
               </Button>
@@ -222,7 +222,7 @@ const Register = () => {
                   {isNextBusy ? (
                     <CircularProgress size={22} color="inherit" aria-hidden />
                   ) : (
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   )}
@@ -231,7 +231,7 @@ const Register = () => {
                 (
                   <Button variant="contained" color="inherit"
                     disabled={true} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="submit"/>
                     </Typography>
                   </Button>
@@ -239,7 +239,7 @@ const Register = () => {
                 (
                   // <Button disabled={updateValid} variant="outlined" onClick={handleNext} sx={{ mr: 1 }}>
                   <Button disabled={!updateValid || isNextBusy} variant="contained" onClick={handleNext} sx={{ mr: 1, ...PRIMARY_CONTAINED_BUTTON_SX }}>
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="continue"/>
                     </Typography>
                   </Button>
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index 3328954..77e8371 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -739,7 +739,7 @@ const BusCustomFormWizard = (props) => {
                                 </Typography>
                             </Button>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3"component="h1" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewBusinessUser"/>
                                     </Typography>
                                 </div>
@@ -872,7 +872,7 @@ const BusCustomFormWizard = (props) => {
                                                         <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
                                                     </Grid>
                                                     <Grid item>
-                                                        <Typography variant="subtitle1">
+                                                        <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                                             <FormattedMessage id={level ? level?.label : "pwWeak" }/>
                                                         </Typography>
                                                     </Grid>
@@ -939,7 +939,7 @@ const BusCustomFormWizard = (props) => {
                                             </Stack>
                                             <Grid container spacing={2} alignItems="center">
                                                 <Grid item sx={{mt:1}}>
-                                                    <Typography variant="subtitle1">
+                                                    <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                                         •<FormattedMessage id="pwRemark1"/><br />
                                                         •<FormattedMessage id="pwRemark2"/><br />
                                                         •<FormattedMessage id="pwRemark3"/><br />
@@ -963,7 +963,7 @@ const BusCustomFormWizard = (props) => {
                                 </Grid>
 
                                 <Grid item xs={12} md={12}>
-                                    <Typography variant="subtitle1">
+                                    <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                         •<FormattedMessage id="pleaseEnterOrgOrCompName"/>
                                     </Typography>
                                 </Grid>
@@ -1617,7 +1617,7 @@ const BusCustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
+                                                <Typography component="span" variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e", display: "block" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -1744,7 +1744,7 @@ const BusCustomFormWizard = (props) => {
                         <Grid item xs={12}>
                             <Stack direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>
                                 <div style={{ borderBottom: "3px solid #1A4399", width: "100%", margin_right: "15px" }}>
-                                    <Typography display="inline" variant="h3"component="h1" sx={{ color: '#1A4399' }}>
+                                    <Typography display="inline" variant="h3" component="h1" sx={{ color: '#1A4399' }}>
                                         <FormattedMessage id="becomeNewBusinessUser"/>
                                     </Typography>
                                 </div>
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index ef2c9a7..0524bb2 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -1090,7 +1090,7 @@ const CustomFormWizard = (props) => {
                                                         <Box sx={{ bgcolor: level?.color, width: 85, height: 8, borderRadius: '7px' }} />
                                                     </Grid>
                                                     <Grid item>
-                                                        <Typography variant="subtitle1">
+                                                        <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                                             <FormattedMessage id={level ? level?.label : "pwWeak"} />
                                                         </Typography>
                                                     </Grid>
@@ -1157,7 +1157,7 @@ const CustomFormWizard = (props) => {
                                             </Stack>
                                             <Grid container spacing={2} alignItems="center">
                                                 <Grid item sx={{ mt: 1 }}>
-                                                    <Typography variant="subtitle1">
+                                                    <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                                         •<FormattedMessage id="pwRemark1" /><br />
                                                         •<FormattedMessage id="pwRemark2" /><br />
                                                         •<FormattedMessage id="pwRemark3" /><br />
@@ -1392,7 +1392,7 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                 </Grid>
                                 <Grid item xs={12} md={12}>
-                                    <Typography variant="subtitle1">
+                                    <Typography component="span" variant="subtitle1" sx={{ display: 'block' }}>
                                         <FormattedMessage id="registerNameLabel" />
                                     </Typography>
                                 </Grid>
@@ -1881,10 +1881,10 @@ const CustomFormWizard = (props) => {
                                                 <Typography display="inline" variant="h4" component="h2" sx={{ color: 'primary.primary' }}>
                                                     <FormattedMessage id="userIdDoc" />
                                                     <span style={{ color: '#B00020' }}>*</span></Typography>
-                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
+                                                <Typography component="span" variant="subtitle1" sx={{ color: 'primary.primary', display: 'block' }}>
                                                     <FormattedMessage id="pleaseUploadIdDoc" />
                                                 </Typography>
-                                                <Typography display="inline" variant="subtitle1" sx={{ color: 'primary.primary' }}>
+                                                <Typography component="span" variant="subtitle1" sx={{ color: 'primary.primary', display: 'block' }}>
                                                     <FormattedMessage id="pleaseUploadIdDocSubTitle" />
                                                 </Typography>
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
@@ -1945,7 +1945,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
+                                                <Typography height="100%" component="span" sx={{ textAlign: "left", display: "block", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
index c6a0ff6..a84714f 100644
--- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
+++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
@@ -1053,7 +1053,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Grid container>
                                                 <Grid item xs={12} md={12}>
-                                                    <Typography sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
+                                                    <Typography component="span" sx={{ textAlign: "left", display: "block", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
     
                                                         <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                     </Typography>
@@ -1192,7 +1192,7 @@ const CustomFormWizard = (props) => {
                                     </Grid>
                                     <Grid item xs={12} md={12} >
                                         <Stack direction="row">
-                                            <Typography variant="h5" component="h2" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
+                                            <Typography variant="h5" component="span" color={theme.palette.grey[600]} sx={{ mr: 1 }}>
                                                 <FormattedMessage id="userIdDoc" />
                                             </Typography>
                                             <Typography variant="h5" component="span" name="preview-idDocType-1">
diff --git a/src/pages/authentication/auth-forms/PreviewUploadFileTable.js b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js
index 0b2d048..fb107bc 100644
--- a/src/pages/authentication/auth-forms/PreviewUploadFileTable.js
+++ b/src/pages/authentication/auth-forms/PreviewUploadFileTable.js
@@ -34,7 +34,7 @@ export default function PreviewUploadFileTable({ recordList, }) {
     function NoRowsOverlay() {
         return (
             <Stack height="100%" alignItems="center" justifyContent="center">
-                <Typography variant="h6">
+                <Typography component="span" variant="h6">
                     <FormattedMessage id="noFile"/>
                 </Typography>
                 {/* <pre>(rows=&#123;[]&#125;)</pre> */}
diff --git a/src/pages/authentication/auth-forms/UploadFileTable.js b/src/pages/authentication/auth-forms/UploadFileTable.js
index b344c8b..9f4a23f 100644
--- a/src/pages/authentication/auth-forms/UploadFileTable.js
+++ b/src/pages/authentication/auth-forms/UploadFileTable.js
@@ -48,7 +48,7 @@ export default function UploadFileTable({ recordList, setUpdateRows, }) {
                     justifyContent: 'center',
                 }}
             >
-                <Typography variant="h6">
+                <Typography component="span" variant="h6">
                     <FormattedMessage id="noFile"/>
                 </Typography>
             </Box>