From a865e4e3f3a3a1a18b2eff6a7006d2a962d5d6e7 Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Fri, 27 Feb 2026 04:07:14 +0800
Subject: [PATCH] WCAG 2.0 A 1.3.1 Info and Relationships

---
 src/pages/Announcement/Search_Public/index.js |  2 +-
 src/pages/DemandNote/Search_Public/index.js   |  2 +-
 src/pages/Message/Details/index.js            |  6 ++--
 src/pages/Message/Search/index.js             |  2 +-
 src/pages/Organization/DetailPage/index.js    |  4 +--
 src/pages/Payment/Details_Public/index.js     |  2 +-
 src/pages/Payment/Search_Public/index.js      |  2 +-
 src/pages/Proof/Reply_Public/index.js         |  2 +-
 src/pages/Proof/Search_Public/index.js        |  2 +-
 .../ApplyForm/PublicNoticeApplyForm.js        |  2 +-
 .../PublicNotice/Details_Public/index.js      |  4 +--
 src/pages/PublicNotice/ListPanel/index.js     |  2 +-
 src/pages/User/ChangePasswordPage/index.js    |  2 +-
 .../User/DetailsPage_Individual/index.js      |  4 +--
 .../User/DetailsPage_Organization/index.js    |  4 +--
 src/pages/User/ManagePage_OrgPublic/index.js  |  2 +-
 .../ForgotPassword/AuthCallback/index.js      |  2 +-
 .../ForgotPassword/ForgotPasswordApplyForm.js |  2 +-
 .../ForgotUsername/AuthCallback/index.js      |  2 +-
 .../ForgotUsername/ForgotUsernameApplyForm.js |  2 +-
 src/pages/authentication/RegisterCustom.js    |  6 ++--
 src/pages/dashboard/Public/index.js           | 12 ++++----
 src/pages/extra-pages/AboutUs/AboutUs_cn.js   | 12 ++++----
 src/pages/extra-pages/AboutUs/AboutUs_en.js   | 12 ++++----
 src/pages/extra-pages/AboutUs/AboutUs_zh.js   | 12 ++++----
 src/pages/extra-pages/AboutUs/index.js        |  2 +-
 .../extra-pages/ImportantNoticePage/index.js  |  2 +-
 .../PrivacyPolicyPage/PrivacyPolicy_cn.js     | 22 +++++++--------
 .../PrivacyPolicyPage/PrivacyPolicy_en.js     | 28 ++++++++-----------
 .../PrivacyPolicyPage/PrivacyPolicy_zh.js     | 27 ++++++++----------
 .../extra-pages/PrivacyPolicyPage/index.js    |  2 +-
 src/pages/extra-pages/UserMenuPub1/index.js   |  2 +-
 32 files changed, 89 insertions(+), 102 deletions(-)

diff --git a/src/pages/Announcement/Search_Public/index.js b/src/pages/Announcement/Search_Public/index.js
index b282c39..78ee469 100644
--- a/src/pages/Announcement/Search_Public/index.js
+++ b/src/pages/Announcement/Search_Public/index.js
@@ -75,7 +75,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}><FormattedMessage id="announcement" /></Typography>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}><FormattedMessage id="announcement" /></Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/DemandNote/Search_Public/index.js b/src/pages/DemandNote/Search_Public/index.js
index 8f174a1..f1d49e0 100644
--- a/src/pages/DemandNote/Search_Public/index.js
+++ b/src/pages/DemandNote/Search_Public/index.js
@@ -102,7 +102,7 @@ const SearchPage_DemandNote_Pub = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="paymentInfoRecord" />
                             </Typography>
                         </Stack>
diff --git a/src/pages/Message/Details/index.js b/src/pages/Message/Details/index.js
index 117c9a2..5f05984 100644
--- a/src/pages/Message/Details/index.js
+++ b/src/pages/Message/Details/index.js
@@ -76,7 +76,7 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
                                     <FormattedMessage id="msgDetails" />
                                 </Typography>
                             </Stack>
@@ -87,7 +87,7 @@ const Index = () => {
                         <Grid container justifyContent="flex-start" alignItems="center" >
                             <center>
                                 <Grid item xs={12} md={12} sx={{p:2}} >
-                                    <Typography variant="h3" sx={{ textAlign: "left", borderBottom: "1px solid black" }}>
+                                    <Typography component="h2" variant="h3" sx={{ textAlign: "left", borderBottom: "1px solid black" }}>
                                     {record?.subject}
                                     </Typography>
                                     <Typography sx={{p:1}} align="justify">{DateUtils.datetimeStr(record?.sentDate)}</Typography>
@@ -95,7 +95,7 @@ const Index = () => {
                                         <div  dangerouslySetInnerHTML={{__html: record?.content}}></div>
                                     </Typography>
 
-                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
+                                    <Typography component="h3" variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                         <Button
                                             component="span"
                                             variant="contained"
diff --git a/src/pages/Message/Search/index.js b/src/pages/Message/Search/index.js
index c994f28..974cc62 100644
--- a/src/pages/Message/Search/index.js
+++ b/src/pages/Message/Search/index.js
@@ -88,7 +88,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="systemMessage"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/Organization/DetailPage/index.js b/src/pages/Organization/DetailPage/index.js
index d8c181d..006e492 100644
--- a/src/pages/Organization/DetailPage/index.js
+++ b/src/pages/Organization/DetailPage/index.js
@@ -136,11 +136,11 @@ const OrganizationDetailPage = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 Maintain Organisation
                             </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="organizationProfile" />
                             </Typography>
                         }
diff --git a/src/pages/Payment/Details_Public/index.js b/src/pages/Payment/Details_Public/index.js
index cc62f7e..72ef727 100644
--- a/src/pages/Payment/Details_Public/index.js
+++ b/src/pages/Payment/Details_Public/index.js
@@ -147,7 +147,7 @@ const Index = () => {
                         <Grid className="printHidden" item xs={12} width="100%">
                             <div style={BackgroundHead} width="100%">
                                 <Stack direction="row" height='70px'>
-                                    <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
+                                    <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>
                                         <FormattedMessage id="payDetail"/>
                                     </Typography>
                                 </Stack>
diff --git a/src/pages/Payment/Search_Public/index.js b/src/pages/Payment/Search_Public/index.js
index 278e445..9859a79 100644
--- a/src/pages/Payment/Search_Public/index.js
+++ b/src/pages/Payment/Search_Public/index.js
@@ -78,7 +78,7 @@ const Index = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="onlinePaymentHistory"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/Proof/Reply_Public/index.js b/src/pages/Proof/Reply_Public/index.js
index 80a80d2..4debbdb 100644
--- a/src/pages/Proof/Reply_Public/index.js
+++ b/src/pages/Proof/Reply_Public/index.js
@@ -95,7 +95,7 @@ const Index = () => {
                     <Grid item xs={12} width="100%">
                         <div style={BackgroundHead} width="100%">
                             <Stack direction="row" height='70px'>
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }, pt:2}}>
                                     <FormattedMessage id="proofRecord"/>
                                 </Typography>
                             </Stack>
diff --git a/src/pages/Proof/Search_Public/index.js b/src/pages/Proof/Search_Public/index.js
index 3f5f85e..5d5d8b2 100644
--- a/src/pages/Proof/Search_Public/index.js
+++ b/src/pages/Proof/Search_Public/index.js
@@ -89,7 +89,7 @@ const UserSearchPage_Individual = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead} >
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center" >
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="proofRecord"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 41745f3..7154c94 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -255,7 +255,7 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                        <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                             <FormattedMessage id="applyPublicNotice" />
                         </Typography>
                     </Stack>
diff --git a/src/pages/PublicNotice/Details_Public/index.js b/src/pages/PublicNotice/Details_Public/index.js
index 831b940..4ed3305 100644
--- a/src/pages/PublicNotice/Details_Public/index.js
+++ b/src/pages/PublicNotice/Details_Public/index.js
@@ -161,7 +161,7 @@ const DashboardDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
               <FormattedMessage id="myPublicNotice" />
             </Typography>
           </Stack>
@@ -179,7 +179,7 @@ const DashboardDefault = () => {
               >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
               </Button>
-              <Typography ml={3} mt={3} variant="h4">{title}</Typography>
+              <Typography component="h2" ml={3} mt={3} variant="h4">{title}</Typography>
             </Stack>
           </Grid>
           <Grid item width={{ md: "60%", xs: "90%" }}>
diff --git a/src/pages/PublicNotice/ListPanel/index.js b/src/pages/PublicNotice/ListPanel/index.js
index 192ff9c..aa8e520 100644
--- a/src/pages/PublicNotice/ListPanel/index.js
+++ b/src/pages/PublicNotice/ListPanel/index.js
@@ -114,7 +114,7 @@ const PublicNotice = () => {
                 <Grid item xs={12}>
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block' } }}>
                                 <FormattedMessage id="myPublicNotice" />
                             </Typography>
                         </Stack>
diff --git a/src/pages/User/ChangePasswordPage/index.js b/src/pages/User/ChangePasswordPage/index.js
index 978895a..b5c3ebd 100644
--- a/src/pages/User/ChangePasswordPage/index.js
+++ b/src/pages/User/ChangePasswordPage/index.js
@@ -174,7 +174,7 @@ const Index = () => {
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="userChangePassword"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/User/DetailsPage_Individual/index.js b/src/pages/User/DetailsPage_Individual/index.js
index bdcb18f..7704dbf 100644
--- a/src/pages/User/DetailsPage_Individual/index.js
+++ b/src/pages/User/DetailsPage_Individual/index.js
@@ -140,11 +140,11 @@ const UserMaintainPage_Individual = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                         {isGLDLoggedIn()?
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                 Maintain Individual User
                             </Typography>
                         :
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                 <FormattedMessage id="userProfile" />
                             </Typography>
                         }
diff --git a/src/pages/User/DetailsPage_Organization/index.js b/src/pages/User/DetailsPage_Organization/index.js
index 9551c44..c5e4727 100644
--- a/src/pages/User/DetailsPage_Organization/index.js
+++ b/src/pages/User/DetailsPage_Organization/index.js
@@ -235,11 +235,11 @@ const UserMaintainPage_Organization = () => {
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                             {isGLDLoggedIn()?
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                     Maintain Organisation User
                                 </Typography>
                             :
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block', pt:2 }}}>
                                     <FormattedMessage id="userProfile" />
                                 </Typography>
                             }
diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js
index 56294bc..5d1ee6c 100644
--- a/src/pages/User/ManagePage_OrgPublic/index.js
+++ b/src/pages/User/ManagePage_OrgPublic/index.js
@@ -226,7 +226,7 @@ const ManageOrgUserPage = () => {
             <Grid item xs={12}>
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4"  sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                        <Typography component="h1" ml={15} color='#FFF' variant="h4"  sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
                             <FormattedMessage id="companyOrUserRecord" />
                         </Typography>
                     </Stack>
diff --git a/src/pages/authentication/ForgotPassword/AuthCallback/index.js b/src/pages/authentication/ForgotPassword/AuthCallback/index.js
index 0d6406c..a87b478 100644
--- a/src/pages/authentication/ForgotPassword/AuthCallback/index.js
+++ b/src/pages/authentication/ForgotPassword/AuthCallback/index.js
@@ -193,7 +193,7 @@ const Index = () => {
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="forgotUserPassword"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js b/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
index c75b704..c08ef4b 100644
--- a/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
+++ b/src/pages/authentication/ForgotPassword/ForgotPasswordApplyForm.js
@@ -83,7 +83,7 @@ const ForgotPasswordApplyForm = () => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                        <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="forgotUserPassword"/>
                         </Typography>
                     </Stack>
diff --git a/src/pages/authentication/ForgotUsername/AuthCallback/index.js b/src/pages/authentication/ForgotUsername/AuthCallback/index.js
index e33b162..82c84f6 100644
--- a/src/pages/authentication/ForgotUsername/AuthCallback/index.js
+++ b/src/pages/authentication/ForgotUsername/AuthCallback/index.js
@@ -204,7 +204,7 @@ const Index = () => {
                 <Grid item xs={12} md={12} width="100%" >
                     <div style={BackgroundHead}>
                         <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                            <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                            <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                                 <FormattedMessage id="forgotUserPassword"/>
                             </Typography>
                         </Stack>
diff --git a/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js b/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js
index e67e0d4..4261a26 100644
--- a/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js
+++ b/src/pages/authentication/ForgotUsername/ForgotUsernameApplyForm.js
@@ -85,7 +85,7 @@ const ForgotUsernameApplyForm = () => {
             <Grid item xs={12} md={12} width="100%" >
                 <div style={BackgroundHead}>
                     <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                        <Typography ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
+                        <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{display: { xs: 'none', sm: 'none', md: 'block' }}}>
                             <FormattedMessage id="forgotUsername"/>
                         </Typography>
                     </Stack>
diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js
index 38eb1bb..465bcf3 100644
--- a/src/pages/authentication/RegisterCustom.js
+++ b/src/pages/authentication/RegisterCustom.js
@@ -99,7 +99,7 @@ const RegisterCustom = () => {
           <Box alignItems="center">
             <Grid container>
               <Grid item xs={12} md={12}>
-                <Typography mt={4} variant="h3">
+                <Typography component="h1" mt={4} variant="h3">
                   <FormattedMessage id="registerTitle1" />
                   <strong style={{ color: '#FF5733' }}>
                     {" " + intl.formatMessage({ id: 'registerTitle2' }) + " "}
@@ -114,7 +114,7 @@ const RegisterCustom = () => {
             <Box mt={3} mb={3}>
               <Grid container >
                 <Grid item xs={12} md={6} sx={{ borderRight: 1, borderColor: 'grey.500' }}>
-                  <Typography mb={4} variant="h3">
+                  <Typography component="h2" mb={4} variant="h3">
                     <FormattedMessage id="personalUser" />
                   </Typography>
                   <IAmSmartButton
@@ -172,7 +172,7 @@ const RegisterCustom = () => {
                       },
                     }}
                   >
-                    <Typography variant="h5">
+                    <Typography component="h2" variant="h5">
                       <FormattedMessage id="registerNewBusinessUser" />
                     </Typography>
                   </Button>
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index 4e97036..ae35e8d 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -155,7 +155,7 @@ const DashboardDefault = () => {
               <div style={BackgroundHead}>
                 <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                   {/* <Typography variant="h5">我的公共啟事</Typography> */}
-                  <Typography color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                  <Typography component="h1" color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                     {isORGLoggedIn() ? userData.fullenName: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
                   </Typography>
                 </Stack>
@@ -175,7 +175,7 @@ const DashboardDefault = () => {
             <div style={BackgroundHead}>
               <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
                 {/* <Typography variant="h5">我的公共啟事</Typography> */}
-                <Typography color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
+                <Typography component="h1" color='#FFF' variant="h5" sx={{ ml: 10, display: { xs: 'none', sm: 'none', md: 'block' } }}>
                   {isORGLoggedIn() ? userData.fullenName: (locale === 'en' ?userData.fullenName: userData.fullchName)}, {getWelcomeMsg()}
                 </Typography>
               </Stack>
@@ -204,7 +204,7 @@ const DashboardDefault = () => {
                   <Stack direction="row" spacing={2}>
                     <AdsClickRoundedIcon />
                     <Stack direction="column" alignItems="flex-start">
-                      <Typography variant="h4" sx={{ color: "#0C489E" }}>
+                      <Typography component="h2" variant="h4" sx={{ color: "#0C489E" }}>
                         <FormattedMessage id="submitApplication" />
                       </Typography>
                       <Typography sx={{ color: "#1A1A1A" }}>
@@ -214,7 +214,7 @@ const DashboardDefault = () => {
                   </Stack>
                 </Button>
                 <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
-                  <Typography variant="h4">
+                  <Typography component="h2" variant="h4">
                     <FormattedMessage id="announcement" />
                   </Typography>
                   <Button
@@ -239,8 +239,8 @@ const DashboardDefault = () => {
               </Grid>
               <Grid item xs={12} lg={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
                 <Stack direction="row" justifyContent="space-between" sx={{ pl: 2, pr: 2, pt: 2 }} >
-                  <Typography variant="h4">
-                    <FormattedMessage id="systemMessage" />
+<Typography component="h2" variant="h4">
+                  <FormattedMessage id="systemMessage" />
                   </Typography>
                   <Button
                     variant="text"
diff --git a/src/pages/extra-pages/AboutUs/AboutUs_cn.js b/src/pages/extra-pages/AboutUs/AboutUs_cn.js
index 6e0082d..de5d2fd 100644
--- a/src/pages/extra-pages/AboutUs/AboutUs_cn.js
+++ b/src/pages/extra-pages/AboutUs/AboutUs_cn.js
@@ -3,14 +3,14 @@ const AboutUs = () => {
 
 	const content =`
 		<div style="text-align: justify; text-justify: inter-word; font-style: normal;">
-		<h1 style="color:#0000AA;">宪报公共启事提交及缴费系统(系统)</h1>
+		<h2 style="color:#0000AA;">宪报公共启事提交及缴费系统(系统)</h2>
 		<p>「<a target="_brank" href="https://pnsps.gld.gov.hk/">宪报公共启事提交及缴费系统</a>」已于2024年8月顺利启用，并将于2026年1月28日全面推行。由2026年1月28日开始，所有申请人必须使用网上「宪报公共启事提交及缴费系统」提交公共启事申请及缴交相关费用，申请人可以选择转数快（FPS）、 缴费灵（PPS）和信用卡缴交费用。以其他方式提交的申请将退回给申请人，重新透过系统提交。 </p>
 
 		<p>现诚邀所有刊登宪报公共启事申请人及早为新安排做好准备，立即<a target="_brank" href="https://pnsps.gld.gov.hk/register">登记成为系统用户</a>，使用系统提交申请，以体验新平台的便捷。 </p>
 
 		<p>如果你对上述网上付款方式的设定有任何查询，请联络你的银行（转数快及信用卡）或缴费灵（缴费灵热线：2311 9876）。 </p>
 
-		<h2 style="color:#00A650;">透过系统于宪报刊登公共启事须知</h2>
+		<h3 style="color:#00A650;">透过系统于宪报刊登公共启事须知</h3>
 
 		<p>香港特别行政区政府宪报一般在星期五出版。在宪报上刊登公共启事，透过系统提交的申请，必须在预计刊登公共启事的该星期的星期二上午八时前提交。如星期一至星期五的其中一天为公众假期，则申请须于预计刊登公共启事的该星期的星期一上午八时前透过系统提交申请。如遇两天或以上的公众假期，截稿日期和时间将于假期前三星期在宪报第6号副刊及<a target="_brank" href="https://egazette.gld.gov.hk/zh">宪报网页</a>内公布。 </p>
 
@@ -24,7 +24,7 @@ const AboutUs = () => {
 
 		<p>如申请人就同一公共启事以任何方式将超过一份稿件送交印务科排版，则每份稿件将视作独立申请处理。不论公共启事最终是否刊登，申请人可能须缴付全部费用。 </p>
 
-		<h2 style="color:#00A650;">公共启事</h2>
+		<h3 style="color:#00A650;">公共启事</h3>
 
 		<p>申请人必须确保递交的稿件内容正确，并且是最终的版本。 </p>
 
@@ -96,7 +96,7 @@ const AboutUs = () => {
 
 				<p>政府物流服务署署长有权拒收不适宜刊登的公共启事稿件。 </p>
 
-				<h2 style="color:#00A650;">公共启事费用 – 价目表</h2>
+				<h3 style="color:#00A650;">公共启事费用 – 价目表</h3>
 				<p>
 					<table class="aboutus">
 
@@ -122,11 +122,11 @@ const AboutUs = () => {
 				<p>收费表刊载于宪报第6号副刊及政府物流服务署<a target="_blank" href="https://www.gld.gov.hk/zh-hk/home/ ">网页</a>内。所缴交费用并不包括知识产权署或公司注册处等其他政府部门的收费。 </p>
 
 
-				<h2 style="color:#00A650;">出版人声明</h2>
+				<h3 style="color:#00A650;">出版人声明</h3>
 
 				<p>出版人刊登各界交来的公共启事，并不表示该等公共启事的内容已获政府或政府的代表认可。 </p>
 
-				<h2 style="color:#00A650;">联络我们</h2>
+				<h3 style="color:#00A650;">联络我们</h3>
 
 				<table class="contactus">
 					<tr>
diff --git a/src/pages/extra-pages/AboutUs/AboutUs_en.js b/src/pages/extra-pages/AboutUs/AboutUs_en.js
index 69cb265..b026ad8 100644
--- a/src/pages/extra-pages/AboutUs/AboutUs_en.js
+++ b/src/pages/extra-pages/AboutUs/AboutUs_en.js
@@ -3,14 +3,14 @@ const AboutUs = () => {
 
 	const content = `
 	<div style="text-align: justify; text-justify: inter-word; font-style: normal;">
-		<h1 style="color:#0000AA;">Gazette Public Notice Submission and Payment System (PNSPS)</h1>
+		<h2 style="color:#0000AA;">Gazette Public Notice Submission and Payment System (PNSPS)</h2>
 		<p>The <a target="_brank" href="https://pnsps.gld.gov.hk/">Gazette Public Notice Submission and Payment System (PNSPS)</a> has been smoothly rolled out in August 2024 and will be fully implemented on 28 January 2026. Starting from 28 January 2026, applications for publication of public notice in the Government Gazette and payment of gazette fee must be made online via the PNSPS. FPS (轉數快), PPS (繳費靈) and credit card are available in the PNSPS for payment of gazette fee. Applications made by other means will be returned to the applicant for re-submission via the PNSPS.</p>
 
 		<p>We would like to invite all applicants for publishing public notices in the Gazette to get well prepared for the change early, <a target="_brank" href="https://pnsps.gld.gov.hk/register">register as PNSPS user</a> now and submit online applications to experience the benefits of the new online platform.</p>
 
 		<p>If you have any enquiries on the set-up of the above online payment methods, please contact your bank (for FPS and credit card) or the PPS (PPS hotline: 2311 9876).</p>
 		
-		<h2 style="color:#00A650;">Notes on Publishing Public Notices in the Gazette through PNSPS</h2>
+		<h3 style="color:#00A650;">Notes on Publishing Public Notices in the Gazette through PNSPS</h3>
 
 
 		<p>The Government of the Hong Kong Special Administrative Region Gazette is normally published on Friday.  For publication of a public notice in the Gazette, applications through PNSPS must be submitted not later than 8:00 a.m. on Tuesday in the week in which the public notice is intended to be published. If any one day from Monday to Friday of the week is a general holiday, the application must be submitted not later than 8:00 a.m. on Monday in the week in which the public notice is intended to be published. If there are two or more general holidays in the week, the closing deadline will be announced in Gazette Supplement No. 6 and on the <a target="_brank" href="https://egazette.gld.gov.hk/en">Gazette website</a> three weeks prior to the holidays.</p>
@@ -25,7 +25,7 @@ const AboutUs = () => {
 
 		<p>If more than one copies of the same public notice are submitted by any means to the Printing Division for typesetting, each one will be regarded as a separate application and the applicant may be required to pay the full fees irrespective of whether the public notice will eventually be published or not.</p>
 
-		<h2 style="color:#00A650;">Public Notices</h2>
+		<h3 style="color:#00A650;">Public Notices</h3>
 
 		<p>The applicant must ensure that the public notice submitted for publication in the Gazette is accurate and is the final version. </p>
 
@@ -99,7 +99,7 @@ const AboutUs = () => {
 
 				<p>The Director of Government Logistics reserves the right to reject public notices which are considered not suitable for publication.</p>
 
-				<h2 style="color:#00A650;">Public Notice Fee – Charging Rates</h2>
+				<h3 style="color:#00A650;">Public Notice Fee – Charging Rates</h3>
 
 				<p>
 					<table class="aboutus">
@@ -126,11 +126,11 @@ const AboutUs = () => {
 
 				<p>Fees for publication of public notices are listed on Gazette Supplement No. 6 and on the Government Logistics Department <a target="_blank" href="https://www.gld.gov.hk/en/home/">website</a>. This fee payment does not include any fee charged by other Government departments including the Intellectual Property Department and the Companies Registry.</p>
 
-				<h2 style="color:#00A650;">Publisher's Statement</h2>
+				<h3 style="color:#00A650;">Publisher's Statement</h3>
 
 				<p>The fact that any notice from a member of the public is published does not imply approbation by or on behalf of the Government of the content of such notice. </p>
 
-				<h2 style="color:#00A650;">Contact Us</h2>
+				<h3 style="color:#00A650;">Contact Us</h3>
 
 				<table  class="contactus" >
 				 	<colgroup>
diff --git a/src/pages/extra-pages/AboutUs/AboutUs_zh.js b/src/pages/extra-pages/AboutUs/AboutUs_zh.js
index 80c70b5..c7600ca 100644
--- a/src/pages/extra-pages/AboutUs/AboutUs_zh.js
+++ b/src/pages/extra-pages/AboutUs/AboutUs_zh.js
@@ -3,14 +3,14 @@ const AboutUs = () => {
 
 	const content =`
 	<div style="text-align: justify; text-justify: inter-word; font-style: normal;">
-		<h1 style="color:#0000AA;">憲報公共啟事提交及繳費系統(系統)</h1>
+		<h2 style="color:#0000AA;">憲報公共啟事提交及繳費系統(系統)</h2>
 		<p>「<a target="_brank" href="https://pnsps.gld.gov.hk/">憲報公共啟事提交及繳費系統</a>」已於2024年8月順利啟用，並將於2026年1月28日全面推行。由2026年1月28日開始，所有申請人必須使用網上「憲報公共啟事提交及繳費系統」提交公共啟事申請及繳交相關費用，申請人可以選擇轉數快（FPS）、 繳費靈（PPS）和信用卡繳交費用。以其他方式提交的申請將退回給申請人，重新透過系統提交。</p>
 		
 		<p>現誠邀所有刊登憲報公共啟事申請人及早為新安排做好準備，立即<a target="_brank" href="https://pnsps.gld.gov.hk/register">登記成為系統用戶</a>，使用系統提交申請，以體驗新平台的便捷。</p>
 
 		<p>如果你對上述網上付款方式的設定有任何查詢，請聯絡你的銀行（轉數快及信用卡）或繳費靈（繳費靈熱線：2311 9876）。</p>
 		
-		<h2 style="color:#00A650;">透過系統於憲報刊登公共啟事須知</h2>
+		<h3 style="color:#00A650;">透過系統於憲報刊登公共啟事須知</h3>
 
 
 		<p>香港特別行政區政府憲報一般在星期五出版。在憲報上刊登公共啟事，透過系統提交的申請，必須在預計刊登公共啟事的該星期的星期二上午八時前提交。如星期一至星期五的其中一天為公眾假期，則申請須於預計刊登公共啟事的該星期的星期一上午八時前透過系統提交申請。如遇兩天或以上的公眾假期，截稿日期和時間將於假期前三星期在憲報第6號副刊及<a target="_brank" href="https://egazette.gld.gov.hk/zh">憲報網頁</a>內公佈。</p>
@@ -25,7 +25,7 @@ const AboutUs = () => {
 
 		<p>如申請人就同一公共啟事以任何方式將超過一份稿件送交印務科排版，則每份稿件將視作獨立申請處理。不論公共啟事最終是否刊登，申請人可能須繳付全部費用。</p>
 
-		<h2 style="color:#00A650;">公共啟事</h2>
+		<h3 style="color:#00A650;">公共啟事</h3>
 
 		<p>申請人必須確保遞交的稿件內容正確，並且是最終的版本。</p>
 
@@ -98,7 +98,7 @@ const AboutUs = () => {
 
 				<p>政府物流服務署署長有權拒收不適宜刊登的公共啟事稿件。</p>
 
-				<h2 style="color:#00A650;">公共啟事費用 – 價目表</h2>
+				<h3 style="color:#00A650;">公共啟事費用 – 價目表</h3>
 
 				<p>
 					<table class="aboutus">
@@ -126,11 +126,11 @@ const AboutUs = () => {
 				<p>收費表刊載於憲報第6號副刊及政府物流服務署<a target="_blank" href="https://www.gld.gov.hk/zh-hk/home/">網頁</a>內。所繳交費用並不包括知識產權署或公司註冊處等其他政府部門的收費。</p>
 
 
-				<h2 style="color:#00A650;">出版人聲明</h2>
+				<h3 style="color:#00A650;">出版人聲明</h3>
 
 				<p>出版人刊登各界交來的公共啟事，並不表示該等公共啟事的內容已獲政府或政府的代表認可。</p>
 
-				<h2 style="color:#00A650;">聯絡我們</h2>
+				<h3 style="color:#00A650;">聯絡我們</h3>
 
 				<p>
 					<table class="contactus">
diff --git a/src/pages/extra-pages/AboutUs/index.js b/src/pages/extra-pages/AboutUs/index.js
index 1f72065..6a920dc 100644
--- a/src/pages/extra-pages/AboutUs/index.js
+++ b/src/pages/extra-pages/AboutUs/index.js
@@ -51,7 +51,7 @@ const PrivacyPolicy = () => {
                     <Grid item xs={12}>
                         <div style={BackgroundHead}>
                             <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
                                     <FormattedMessage id="aboutUs" />
                                 </Typography>
                             </Stack>
diff --git a/src/pages/extra-pages/ImportantNoticePage/index.js b/src/pages/extra-pages/ImportantNoticePage/index.js
index e31069e..c2a3733 100644
--- a/src/pages/extra-pages/ImportantNoticePage/index.js
+++ b/src/pages/extra-pages/ImportantNoticePage/index.js
@@ -51,7 +51,7 @@ const ImportantNotice = () => {
                     <Grid item xs={12}>
                         <div style={BackgroundHead}>
                             <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
                                     <FormattedMessage id="importantNotice" />
                                 </Typography>
                             </Stack>
diff --git a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_cn.js b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_cn.js
index a994845..6ea9c98 100644
--- a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_cn.js
+++ b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_cn.js
@@ -12,18 +12,16 @@ const Page = () => {
         text-justify: inter-word;
     }
 
-    .privacy-policy h1,
     .privacy-policy h2,
-    .privacy-policy h3 {
+    .privacy-policy h3,
+    .privacy-policy h4 {
         margin: 1.8rem 0 0.9rem;
         font-weight: 600;
         text-align: left;
     }
-
-    /* Keep your visual sizes (map old h2->h1, h3->h2, h4->h3) */
-    .privacy-policy h1 { font-size: 1.9rem; }   /* was h2 */
-    .privacy-policy h2 { font-size: 1.35rem; }  /* was h3 */
-    .privacy-policy h3 { font-size: 1.15rem; }  /* was h4 */
+    .privacy-policy h2 { font-size: 1.9rem; }
+    .privacy-policy h3 { font-size: 1.35rem; }
+    .privacy-policy h4 { font-size: 1.15rem; }
 
     .privacy-policy p { margin: 0 0 1rem; }
     .privacy-policy ol { margin: 0.5rem 0 1.6rem; padding-left: 1.4rem; }
@@ -35,7 +33,7 @@ const Page = () => {
 
     <div class="privacy-policy">
 
-    <h1>私隐政策</h1>
+    <h2>私隐政策</h2>
 
     <p>
         保障个人资料私隐是政府物流服务署每位成员所关注的事宜。我们尊重个人资料私隐，并承诺全面执行及遵从保障资料原则及《个人资料（私隐）条例》的所有相关条文。政府物流服务署建立及实施系统监控，以确保遵从以下六项保障资料原则：
@@ -50,19 +48,19 @@ const Page = () => {
         <li>准许资料当事人查阅／改正其个人资料及以法律准许或规定的方式处理任何查阅／改正个人资料的要求。</li>
     </ol>
 
-    <h2>收集个人资料声明</h2>
+    <h3>收集个人资料声明</h3>
 
-    <h3>收集资料的目的</h3>
+    <h4>收集资料的目的</h4>
     <p>
         申请人在本网站内所提供的个人资料会供申请刊登公共启事及为承担法律责任用途。在本网站提供的个人资料是自愿的。如果申请人未有提供足够资料，我们可能无法处理相关公共启事的刊登事宜。
     </p>
 
-    <h3>披露个人资料</h3>
+    <h4>披露个人资料</h4>
     <p>
         政府物流服务署可能会向其他政策局／部门披露你在本网站提供的个人资料。
     </p>
 
-    <h3>查阅个人资料</h3>
+    <h4>查阅个人资料</h4>
     <p>
         如要查阅或改正本署所持有的个人资料，请向以下人士提出：
     </p>
diff --git a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_en.js b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_en.js
index b6854b6..d5b9499 100644
--- a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_en.js
+++ b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_en.js
@@ -10,23 +10,17 @@ const Page = () => {
             text-justify: inter-word;
         }
 
-        /* Updated heading list: h1/h2/h3 only */
-        .privacy-policy h1,
+        /* Page banner is h1; content uses h2 > h3 > h4 */
         .privacy-policy h2,
-        .privacy-policy h3 {
+        .privacy-policy h3,
+        .privacy-policy h4 {
             margin: 1.8rem 0 0.9rem;
             font-weight: 600;
             text-align: left;
         }
-
-        /* Keep your original visual sizes:
-            old h2 -> new h1
-            old h3 -> new h2
-            old h4 -> new h3
-        */
-        .privacy-policy h1 { font-size: 1.9rem; }
-        .privacy-policy h2 { font-size: 1.35rem; }
-        .privacy-policy h3 { font-size: 1.15rem; }
+        .privacy-policy h2 { font-size: 1.9rem; }
+        .privacy-policy h3 { font-size: 1.35rem; }
+        .privacy-policy h4 { font-size: 1.15rem; }
 
         .privacy-policy p { margin: 0 0 1rem; }
 
@@ -52,7 +46,7 @@ const Page = () => {
         </style>
 
         <div class="privacy-policy">
-        <h1>Privacy Policy</h1>
+        <h2>Privacy Policy</h2>
 
         <p>
             The protection of personal data privacy is the concern of every member of Government Logistics
@@ -92,9 +86,9 @@ const Page = () => {
             </li>
         </ol>
 
-        <h2>Personal Information Collection Statement</h2>
+        <h3>Personal Information Collection Statement</h3>
 
-        <h3>Purpose of Collection</h3>
+        <h4>Purpose of Collection</h4>
         <p>
             The personal data provided by the applicant in this website would be used for application of public
             notice publication and for assumption of liability. The provision of the personal data is voluntary.
@@ -102,12 +96,12 @@ const Page = () => {
             of the relevant public notice.
         </p>
 
-        <h3>Disclosure of Personal Data</h3>
+        <h4>Disclosure of Personal Data</h4>
         <p>
             The personal data provided in this website may be disclosed to other bureaux / departments.
         </p>
 
-        <h3>Access to Personal Data</h3>
+        <h4>Access to Personal Data</h4>
         <p>
             Requests for access to or correction of personal data held by us should be addressed to -
         </p>
diff --git a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_zh.js b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_zh.js
index e77b6b0..ce5773b 100644
--- a/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_zh.js
+++ b/src/pages/extra-pages/PrivacyPolicyPage/PrivacyPolicy_zh.js
@@ -10,23 +10,18 @@ const Page = () => {
     text-justify: inter-word;
   }
 
-  /* Use meaningful heading sequence: h1 > h2 > h3 */
-  .privacy-policy h1,
+  /* Meaningful heading sequence: page banner is h1, content h2 > h3 > h4 */
   .privacy-policy h2,
-  .privacy-policy h3 {
+  .privacy-policy h3,
+  .privacy-policy h4 {
     margin: 1.8rem 0 0.9rem;
     font-weight: 600;
     text-align: left;
   }
 
-  /* Keep original look:
-     old h2 -> new h1
-     old h3 -> new h2
-     old h4 -> new h3
-  */
-  .privacy-policy h1 { font-size: 1.9rem; }
-  .privacy-policy h2 { font-size: 1.35rem; }
-  .privacy-policy h3 { font-size: 1.15rem; }
+  .privacy-policy h2 { font-size: 1.9rem; }
+  .privacy-policy h3 { font-size: 1.35rem; }
+  .privacy-policy h4 { font-size: 1.15rem; }
 
   .privacy-policy p { margin: 0 0 1rem; }
 
@@ -53,7 +48,7 @@ const Page = () => {
 
 <div class="privacy-policy">
 
-  <h1>私隱政策</h1>
+  <h2>私隱政策</h2>
 
   <p>
     保障個人資料私隱是政府物流服務署每位成員所關注的事宜。我們尊重個人資料私隱，並承諾全面執行及遵從保障資料原則及《個人資料（私隱）條例》的所有相關條文。政府物流服務署建立及實施系統監控，以確保遵從以下六項保障資料原則 -
@@ -68,19 +63,19 @@ const Page = () => {
     <li>准許資料當事人查閱／改正其個人資料及以法律准許或規定的方式處理任何查閱／改正個人資料的要求。</li>
   </ol>
 
-  <h2>收集個人資料聲明</h2>
+  <h3>收集個人資料聲明</h3>
 
-  <h3>收集資料的目的</h3>
+  <h4>收集資料的目的</h4>
   <p>
     申請人在本網站內所提供的個人資料會供申請刊登公共啟事及為承擔法律責任用途。在本網站提供的個人資料是自願的。如果申請人未有提供足夠資料，我們可能無法處理相關公共啟事的刊登事宜。
   </p>
 
-  <h3>披露個人資料</h3>
+  <h4>披露個人資料</h4>
   <p>
     政府物流服務署可能會向其他政策局／部門披露你在本網站提供的個人資料。
   </p>
 
-  <h3>查閱個人資料</h3>
+  <h4>查閱個人資料</h4>
   <p>
     如要查閱或改正本署所持有的個人資料，請向以下人士提出：
   </p>
diff --git a/src/pages/extra-pages/PrivacyPolicyPage/index.js b/src/pages/extra-pages/PrivacyPolicyPage/index.js
index 765f2e7..6cd9e2f 100644
--- a/src/pages/extra-pages/PrivacyPolicyPage/index.js
+++ b/src/pages/extra-pages/PrivacyPolicyPage/index.js
@@ -51,7 +51,7 @@ const PrivacyPolicy = () => {
                     <Grid item xs={12}>
                         <div style={BackgroundHead}>
                             <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
-                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
+                                <Typography component="h1" ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
                                     <FormattedMessage id="privacyPolicy" />
                                 </Typography>
                             </Stack>
diff --git a/src/pages/extra-pages/UserMenuPub1/index.js b/src/pages/extra-pages/UserMenuPub1/index.js
index 481caae..a30cf38 100644
--- a/src/pages/extra-pages/UserMenuPub1/index.js
+++ b/src/pages/extra-pages/UserMenuPub1/index.js
@@ -218,7 +218,7 @@ const UserMenuPub1 = () => {
       <Grid item xs={12} md={12} width="100%">
         <div style={BackgroundHead}>
           <Stack direction="row" height="70px" justifyContent="flex-start" alignItems="center">
-            <Typography ml={15} color="#FFF" variant="h4" sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
+            <Typography component="h1" ml={15} color="#FFF" variant="h4" sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
               <FormattedMessage id="userGuide" />
             </Typography>
           </Stack>