From 4f2cc3469b75ede22515d948b07353d151121192 Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Fri, 26 Jun 2026 03:20:05 +0800
Subject: [PATCH] various update

---
 src/assets/style/navbarStyles.css             | 18 ++--
 src/assets/style/styles.css                   |  8 +-
 src/components/AdminLogo/index.js             |  4 +-
 src/components/MobileLogo/index.js            |  2 +-
 .../Header/HeaderContent/LocaleSelector.js    |  4 +-
 .../Header/HeaderContent/Notification.js      |  2 +-
 src/layout/MainLayout/Header/index.js         | 18 ++--
 src/layout/MainLayout/index.js                |  2 +-
 src/pages/Announcement/Search/index.js        |  2 +-
 src/pages/Announcement/Search_Public/index.js |  2 +-
 src/pages/AuditLog/index.js                   |  2 +-
 src/pages/DemandNote/Create/index.js          |  2 +-
 src/pages/DemandNote/Export/index.js          |  2 +-
 src/pages/DemandNote/Search/DataGrid.js       |  2 +
 src/pages/DemandNote/Search/index.js          |  2 +-
 src/pages/GFMIS/index.js                      |  2 +-
 src/pages/JVM/index.js                        |  2 +-
 src/pages/Message/Details/index.js            |  3 +-
 src/pages/Organization/SearchPage/index.js    |  2 +-
 src/pages/Payment/Search_GLD/index.js         |  2 +-
 src/pages/Proof/Create_FromApp/index.js       |  2 +-
 src/pages/Proof/Reply_Public/ProofForm.js     |  4 +-
 src/pages/Proof/Search_GLD/index.js           |  2 +-
 .../ApplyForm/PublicNoticeApplyForm.js        |  4 +-
 .../Details_GLD/ApplicationDetailCard.js      |  4 +-
 .../Details_Public/ApplicationDetailCard.js   |  8 +-
 .../PublicNotice/Details_Public/index.js      |  3 +-
 src/pages/PublicNotice/ListPanel/BaseGrid.js  |  3 +-
 .../ListPanel/PendingPaymentTab.js            |  3 +-
 .../ListPanel/SearchPublicNoticeTable.js      |  2 +
 src/pages/PublicNotice/Search_GLD/index.js    |  2 +-
 .../Search_Mark_As_Paid_GLD/index.js          |  2 +-
 src/pages/Recon/index.js                      |  2 +-
 src/pages/Report/FullList/index.js            |  2 +-
 src/pages/Report/Summary/index.js             |  2 +-
 src/pages/Setting/DrImport/index.js           |  3 +
 src/pages/User/DetailPage/index.js            |  2 +-
 src/pages/User/ManagePage_OrgPublic/index.js  | 31 ++++---
 src/pages/User/SearchPage/index.js            |  2 +-
 src/pages/User/SearchPage_Individual/index.js |  2 +-
 .../User/SearchPage_Organization/index.js     |  2 +-
 src/pages/authentication/AuthWrapper.js       |  2 +-
 src/pages/authentication/BusRegister.js       |  6 +-
 src/pages/authentication/IAmSmartRegister.js  |  6 +-
 src/pages/authentication/Register.js          |  6 +-
 src/pages/authentication/RegisterCustom.js    | 16 ++--
 .../auth-forms/AuthLoginCustom.js             |  4 +-
 .../auth-forms/BusCustomFormWizard.js         |  6 +-
 .../auth-forms/CustomFormWizard.js            |  6 +-
 .../auth-forms/IAmSmartFormWizard.js          |  6 +-
 src/pages/dashboard/GLD/index.js              |  2 +-
 src/pages/dashboard/Public/index.js           | 10 +--
 src/pages/extra-pages/UserMenuPub1/index.js   |  2 +-
 src/pages/pnspsUserGroupDetailPage/index.js   |  2 +-
 src/pages/pnspsUserGroupSearchPage/index.js   |  2 +-
 src/themes/buttonConst.js                     | 49 +++++++++-
 src/themes/colorConst.js                      | 34 +++++++
 src/themes/overrides/Button.js                | 24 +++--
 src/themes/overrides/Checkbox.js              | 17 ++++
 src/themes/overrides/InputLabel.js            | 13 ++-
 src/themes/overrides/OutlinedInput.js         | 18 ++--
 src/themes/overrides/Radio.js                 | 30 +++++++
 src/themes/overrides/Tab.js                   | 11 ++-
 src/themes/overrides/index.js                 |  2 +
 src/themes/themeConst.js                      | 90 ++++++++++++++++---
 .../statusUtils/PublicNoteStatusUtils.js      |  2 +-
 66 files changed, 393 insertions(+), 143 deletions(-)
 create mode 100644 src/themes/overrides/Radio.js

diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css
index dea1992..c718620 100644
--- a/src/assets/style/navbarStyles.css
+++ b/src/assets/style/navbarStyles.css
@@ -11,7 +11,7 @@
   top: 0px;
   width: 100%;
   z-index: 9999;
-  border-bottom: 3px solid #0C489E;
+  border-bottom: 3px solid #1976d2;
   min-height: 77px;
 }
 
@@ -112,7 +112,7 @@
 
 #navbar div li a:hover,
 #navbar div li button.navTrigger:hover{
-  color: #0C489E;
+  color: #1976d2;
 }
 
 #navbar div li a:hover::after,
@@ -122,7 +122,7 @@
   content: "";
   width: 80%;
   height: 3px;
-  background:#0C489E;
+  background:#1976d2;
   position: absolute;
   bottom: -5px;
   left: 20px;
@@ -166,7 +166,7 @@
 
 #navbar a:focus-visible,
 #navbar button.navTrigger:focus-visible{
-  outline: 3px solid #0C489E;
+  outline: 3px solid #1976d2;
   outline-offset: 2px;
   border-radius: 10px;
 }
@@ -234,7 +234,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #0C489E;
+  color: #1976d2;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -242,7 +242,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #0C489E;
+  color: #1976d2;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -284,7 +284,7 @@
   transition: 0.3s ease-in-out;
 }
 #sidebar li a:hover{
-  color: #0C489E;
+  color: #1976d2;
 }
 #sidebar div li ul{
   background: white;
@@ -344,12 +344,12 @@
 /* Hover / focus */
 #sidebar li > a:hover,
 #sidebar li > button.navTrigger:hover{
-  color: #0C489E;
+  color: #1976d2;
 }
 
 #sidebar li > a:focus-visible,
 #sidebar li > button.navTrigger:focus-visible{
-  outline: 3px solid #0C489E;
+  outline: 3px solid #1976d2;
   outline-offset: 2px;
   border-radius: 10px;
 }
diff --git a/src/assets/style/styles.css b/src/assets/style/styles.css
index a675de2..f1ee2c6 100644
--- a/src/assets/style/styles.css
+++ b/src/assets/style/styles.css
@@ -72,7 +72,7 @@ a:active {
   [role="link"],
   [tabindex]:not([tabindex="-1"])
 ):focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #1976d2;
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -95,9 +95,9 @@ a:active {
 /* ===== MUI DataGrid keyboard focus (WCAG 2.4.7 / 2.4.11) ===== */
 .MuiDataGrid-columnHeader:focus-visible,
 .MuiDataGrid-cell:focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #1976d2;
   outline-offset: -2px;
-  box-shadow: 0 0 0 3px rgba(12, 72, 158, 0.25);
+  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
 }
 
 /* Contained buttons only */
@@ -122,7 +122,7 @@ a:active {
 
 /* ===== Outlined button focus ===== */
 .MuiButton-outlined:focus-visible {
-  outline: 3px solid #0C489E;
+  outline: 3px solid #1976d2;
   outline-offset: 2px;
 }
 
diff --git a/src/components/AdminLogo/index.js b/src/components/AdminLogo/index.js
index 4fa7a84..7b62ee8 100644
--- a/src/components/AdminLogo/index.js
+++ b/src/components/AdminLogo/index.js
@@ -34,7 +34,7 @@ const LogoSection = ({ sx, to }) => {
           ...sx,
           /* ✅ WCAG 2.4.7 focus indicator */
           '&:focus-visible': {
-            outline: '3px solid #0C489E',
+            outline: '3px solid #1976d2',
             outlineOffset: '2px',
             borderRadius: '6px'
           }
@@ -42,7 +42,7 @@ const LogoSection = ({ sx, to }) => {
       >
         <Stack direction="column" justifyContent="center" alignItems="center" >
           <Logo />
-          <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
+          <span style={{ color: checkSysEnv()!=''?'red':'#1976d2'}} id="systemTitle">PNSPS</span>
         </Stack>
       </ButtonBase>
 
diff --git a/src/components/MobileLogo/index.js b/src/components/MobileLogo/index.js
index da2ff62..b5ebe8c 100644
--- a/src/components/MobileLogo/index.js
+++ b/src/components/MobileLogo/index.js
@@ -30,7 +30,7 @@ const LogoSection = ({ sx, to }) => {
 
       /* WCAG 2.4.7 – visible keyboard focus */
       '&:focus-visible': {
-        outline: '3px solid #0C489E',
+        outline: '3px solid #1976d2',
         outlineOffset: '2px',
         borderRadius: '6px'
       }
diff --git a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js
index 66d0b68..3d3aba6 100644
--- a/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js
+++ b/src/layout/MainLayout/Header/HeaderContent/LocaleSelector.js
@@ -64,7 +64,8 @@ const LocaleSelector = () => {
             }}
             aria-label={intl.formatMessage({id: 'openLanguage'})}
             ref={anchorRef}
-            aria-controls={open ? 'profile-grow' : undefined}
+            aria-controls={open ? 'locale-selector-menu' : undefined}
+            aria-expanded={open}
             aria-haspopup="true"
             onClick={handleToggle}
             >
@@ -103,6 +104,7 @@ const LocaleSelector = () => {
                         >
                             <ClickAwayListener onClickAway={handleClose}>
                                 <List
+                                    id="locale-selector-menu"
                                     component="nav"
                                 >
                                     <ListItem disablePadding>
diff --git a/src/layout/MainLayout/Header/HeaderContent/Notification.js b/src/layout/MainLayout/Header/HeaderContent/Notification.js
index a300a0b..d486c28 100644
--- a/src/layout/MainLayout/Header/HeaderContent/Notification.js
+++ b/src/layout/MainLayout/Header/HeaderContent/Notification.js
@@ -77,7 +77,7 @@ const Notification = () => {
 
           /* ✅ WCAG 2.4.7 focus indicator */
           '&:focus-visible': {
-            outline: '3px solid #0C489E',
+            outline: '3px solid #1976d2',
             outlineOffset: '2px',
             borderRadius: '6px'
           }
diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 335cc59..ce15f1e 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -775,7 +775,7 @@ function Header(props) {
     <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" sx={{ textAlign: "center", width: "300px" }}>
       <Box sx={{ mr: 2, mt: 1, display: { md: "none" } }}>
         <MobileLogo />
-        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#1976d2" }} id="mobileTitle">
           PNSPS
         </span>
       </Box>
@@ -794,7 +794,7 @@ function Header(props) {
     <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: "center" }}>
       <Box sx={{ mr: 2, mt: 1, display: { md: "none" } }}>
         <MobileLogo />
-        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#1976d2" }} id="mobileTitle">
           PNSPS
         </span>
       </Box>
@@ -826,13 +826,13 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#0C489E" }} />
+                <MenuIcon style={{ color: "#1976d2" }} />
               </IconButton>
               <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#1976d2" }} id="mobileTitle">
                       PNSPS
                     </span>
                   </Stack>
@@ -848,7 +848,7 @@ function Header(props) {
                 <Stack direction="row" justifyContent="flex-start" alignItems="center">
                   <Logo />
                   <Stack justifyContent="flex-start" alignItems="center">
-                    <span style={{ color: checkSysEnv() !== "" ? "#B00020" : "#0C489E" }} id="systemTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "#B00020" : "#1976d2" }} id="systemTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
@@ -863,14 +863,14 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#0C489E" }} />
+                <MenuIcon style={{ color: "#1976d2" }} />
               </IconButton>
 
               <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
                 <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#1976d2" }} id="mobileTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
@@ -946,14 +946,14 @@ function Header(props) {
               onClick={handleDrawerToggle}
               sx={{ mr: 2, display: { md: "none" } }}
             >
-              <MenuIcon style={{ color: "#0C489E" }} />
+              <MenuIcon style={{ color: "#1976d2" }} />
             </IconButton>
 
             <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
               <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                 <MobileLogo />
                 <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                  <span style={{ color: checkSysEnv() !== "" ? "red" : "#0C489E" }} id="mobileTitle">
+                  <span style={{ color: checkSysEnv() !== "" ? "red" : "#1976d2" }} id="mobileTitle">
                     <FormattedMessage id="PNSPS" />
                   </span>
                 </Stack>
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index d5999b8..0e6e281 100644
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@@ -67,7 +67,7 @@ const MainLayout = () => {
             {/* <Breadcrumbs navigation={navigation} title /> */}
             <Outlet />
           </Box>
-          <Box sx={{borderTop: "3px solid #0C489E"}}>
+          <Box sx={{borderTop: "3px solid #1976d2"}}>
             <Footer/>
           </Box>
         </Box>
diff --git a/src/pages/Announcement/Search/index.js b/src/pages/Announcement/Search/index.js
index a8c4156..a61bb3d 100644
--- a/src/pages/Announcement/Search/index.js
+++ b/src/pages/Announcement/Search/index.js
@@ -72,7 +72,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" }}>Announcement</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Announcement</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Announcement/Search_Public/index.js b/src/pages/Announcement/Search_Public/index.js
index 78ee469..448840f 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 component="h1" 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 #1976d2" }}><FormattedMessage id="announcement" /></Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/AuditLog/index.js b/src/pages/AuditLog/index.js
index 52e697d..fd5c6cb 100644
--- a/src/pages/AuditLog/index.js
+++ b/src/pages/AuditLog/index.js
@@ -61,7 +61,7 @@ const AuditLogPage = () => {
                 <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" }}>Audit Log</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Audit Log</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/DemandNote/Create/index.js b/src/pages/DemandNote/Create/index.js
index c33d88d..b77ffb4 100644
--- a/src/pages/DemandNote/Create/index.js
+++ b/src/pages/DemandNote/Create/index.js
@@ -68,7 +68,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 Create Demand Note
                             </Typography>
                         </Stack>
diff --git a/src/pages/DemandNote/Export/index.js b/src/pages/DemandNote/Export/index.js
index 16d3e61..7577334 100644
--- a/src/pages/DemandNote/Export/index.js
+++ b/src/pages/DemandNote/Export/index.js
@@ -68,7 +68,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 Export for GDN (Non Creditor) 
                             </Typography>
                         </Stack>
diff --git a/src/pages/DemandNote/Search/DataGrid.js b/src/pages/DemandNote/Search/DataGrid.js
index 8e2a88e..cb854d1 100644
--- a/src/pages/DemandNote/Search/DataGrid.js
+++ b/src/pages/DemandNote/Search/DataGrid.js
@@ -27,6 +27,7 @@ import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
 import { isGrantedAny } from "auth/utils";
 import { useIntl } from "react-intl";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchDemandNote({ applySearch, searchCriteria, applyGridOnReady }) {
@@ -334,6 +335,7 @@ export default function SearchDemandNote({ applySearch, searchCriteria, applyGri
                                 <Button
                                     component="span"
                                     variant="contained"
+                                    sx={PRIMARY_CONTAINED_BUTTON_SX}
                                 >
                                     Attach DN
                                 </Button>
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index 3213dd5..6fe4302 100644
--- a/src/pages/DemandNote/Search/index.js
+++ b/src/pages/DemandNote/Search/index.js
@@ -93,7 +93,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" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 Demand Note
                             </Typography>
                         </Stack>
diff --git a/src/pages/GFMIS/index.js b/src/pages/GFMIS/index.js
index 2dc8b02..a0af344 100644
--- a/src/pages/GFMIS/index.js
+++ b/src/pages/GFMIS/index.js
@@ -208,7 +208,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                             GFMIS Generate XML
                             </Typography>
                         </Stack>
diff --git a/src/pages/JVM/index.js b/src/pages/JVM/index.js
index c79c0b9..80e7982 100644
--- a/src/pages/JVM/index.js
+++ b/src/pages/JVM/index.js
@@ -87,7 +87,7 @@ const JVMDefault = () => {
       <Grid item xs={12}>
         <div style={BackgroundHead}>
           <Stack direction="row" height='70px' justifyContent="space-between" alignItems="center">
-            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
               System Background Status
             </Typography>
           </Stack>
diff --git a/src/pages/Message/Details/index.js b/src/pages/Message/Details/index.js
index 5f05984..2b48397 100644
--- a/src/pages/Message/Details/index.js
+++ b/src/pages/Message/Details/index.js
@@ -18,6 +18,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 import { FormattedMessage } from "react-intl";
 import usePageTitle from 'components/usePageTitle';
+import { PRIMARY_CONTAINED_BUTTON_SX } from 'themes/colorConst';
 
 const BackgroundHead = {
     backgroundImage: `url(${titleBackgroundImg})`,
@@ -100,7 +101,7 @@ const Index = () => {
                                             component="span"
                                             variant="contained"
                                             size="large"
-                                            sx={{ m: 4 }}
+                                            sx={{ m: 4, ...PRIMARY_CONTAINED_BUTTON_SX }}
                                             onClick={() => {
                                                 navigate(-1);
                                             }}
diff --git a/src/pages/Organization/SearchPage/index.js b/src/pages/Organization/SearchPage/index.js
index 71b9052..4403afb 100644
--- a/src/pages/Organization/SearchPage/index.js
+++ b/src/pages/Organization/SearchPage/index.js
@@ -72,7 +72,7 @@ const OrganizationSearchPage = () => {
                 <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" }}>View Organisation</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>View Organisation</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Payment/Search_GLD/index.js b/src/pages/Payment/Search_GLD/index.js
index 4a00787..9d7b054 100644
--- a/src/pages/Payment/Search_GLD/index.js
+++ b/src/pages/Payment/Search_GLD/index.js
@@ -71,7 +71,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 Online Payment Record
                             </Typography>
                         </Stack>
diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js
index 371a98d..8592d16 100644
--- a/src/pages/Proof/Create_FromApp/index.js
+++ b/src/pages/Proof/Create_FromApp/index.js
@@ -79,7 +79,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={{ "textShadow": "0px 0px 25px #0C489E" }}>Create Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Create Proof</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Proof/Reply_Public/ProofForm.js b/src/pages/Proof/Reply_Public/ProofForm.js
index b52bf77..2dc5997 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -718,9 +718,9 @@ const FormPanel = ({ formData }) => {
                                                 disabled={(actionValue == false && isOverReviseDeadline()) || isSubmitting}
                                                 aria-label={intl.formatMessage({ id: 'submitReply' })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#1976d2',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 {isSubmitting ? <FormattedMessage id="loading" /> : <FormattedMessage id="submitReply" />}
diff --git a/src/pages/Proof/Search_GLD/index.js b/src/pages/Proof/Search_GLD/index.js
index 49fbdba..e718277 100644
--- a/src/pages/Proof/Search_GLD/index.js
+++ b/src/pages/Proof/Search_GLD/index.js
@@ -86,7 +86,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" }}>Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Proof</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
index 9905a9a..87bb902 100644
--- a/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
+++ b/src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js
@@ -33,6 +33,7 @@ import { ThemeProvider } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useState, useEffect, useRef } from 'react';
 import { checkPaymentSuspension } from "utils/Utils";
+import { PRIMARY_CONTAINED_BUTTON_SX } from "themes/colorConst";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -545,8 +546,9 @@ const PublicNoticeApplyForm = ({ loadedData, _selections, gazetteIssueList }) =>
                                                     <Button
                                                         aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
                                                         component="span"
-                                                        variant="outlined"
+                                                        variant="contained"
                                                         size="large"
+                                                        sx={PRIMARY_CONTAINED_BUTTON_SX}
                                                     >{attachment ? intl.formatMessage({ id: 'uploadFileBtn' }) : intl.formatMessage({ id: 'reUpload' })}</Button>
                                                 </label>
                                             </Grid>
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index 1012d51..fd75371 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -749,9 +749,9 @@ const ApplicationDetailCard = (
                                                                 sx={{
                                                                     textTransform: 'capitalize',
                                                                     alignItems: 'end',
-                                                                    backgroundColor: '#0C489E',
+                                                                    backgroundColor: '#1976d2',
                                                                     color: '#FFFFFF',
-                                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                                 }}
                                                             >
                                                                 <DownloadIcon />
diff --git a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
index 585b4e0..abedd17 100644
--- a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
@@ -239,9 +239,9 @@ const ApplicationDetailCard = (
                                             startIcon={<CloseIcon />}
                                             aria-label={intl.formatMessage({ id: 'cancelApp' })}
                                             sx={{
-                                                backgroundColor: '#0C489E',
+                                                backgroundColor: '#1976d2',
                                                 color: '#FFFFFF',
-                                                '&:hover': { backgroundColor: '#093A7A' },
+                                                '&:hover': { backgroundColor: '#1565c0' },
                                             }}
                                         >
                                             <FormattedMessage id="cancelApp" />
@@ -665,9 +665,9 @@ const ApplicationDetailCard = (
                                                                 <Button
                                                                     sx={{
                                                                         ml: 3,
-                                                                        backgroundColor: '#0C489E',
+                                                                        backgroundColor: '#1976d2',
                                                                         color: '#FFFFFF',
-                                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                                        '&:hover': { backgroundColor: '#1565c0' },
                                                                     }}
                                                                     variant="contained"
                                                                     onClick={onDownloadClick()}
diff --git a/src/pages/PublicNotice/Details_Public/index.js b/src/pages/PublicNotice/Details_Public/index.js
index a5bb0ec..9ccc2a4 100644
--- a/src/pages/PublicNotice/Details_Public/index.js
+++ b/src/pages/PublicNotice/Details_Public/index.js
@@ -34,6 +34,7 @@ import ForwardIcon from '@mui/icons-material/Forward';
 import { notifyActionSuccess } from "utils/CommonFunction";
 import { FormattedMessage, useIntl } from "react-intl";
 import usePageTitle from "components/usePageTitle";
+import { PRIMARY_OUTLINED_BUTTON_SX } from "themes/colorConst";
 // ==============================|| Body - DEFAULT ||============================== //
 
 const DashboardDefault = () => {
@@ -190,7 +191,7 @@ const DashboardDefault = () => {
               <Button
                 aria-label={intl.formatMessage({ id: 'back' })}
                 title={intl.formatMessage({ id: 'back' })}
-                sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }}
+                sx={{ ml: 0, mt: 2.5, borderWidth: '2px', ...PRIMARY_OUTLINED_BUTTON_SX }}
                 variant="outlined" onClick={() => { navigate("/publicNotice") }}
               >
                 <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} />
diff --git a/src/pages/PublicNotice/ListPanel/BaseGrid.js b/src/pages/PublicNotice/ListPanel/BaseGrid.js
index 1196ca9..9f70ea7 100644
--- a/src/pages/PublicNotice/ListPanel/BaseGrid.js
+++ b/src/pages/PublicNotice/ListPanel/BaseGrid.js
@@ -15,6 +15,7 @@ import {
 import {useTheme} from "@emotion/react";
 import {getStatusIntl,getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import {FormattedMessage, useIntl} from "react-intl";
+import { PRIMARY_TEXT_BUTTON_SX } from "themes/colorConst";
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -106,7 +107,7 @@ export default function BaseGrid({setCount, url}) {
             renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({id: 'viewDetail'})} onClick={handleDetailClick(params)} sx={PRIMARY_TEXT_BUTTON_SX}>
                     <FormattedMessage id="viewDetail"/>
                 </Button>;
             },
diff --git a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
index 7e6191f..cdbda1c 100644
--- a/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
+++ b/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js
@@ -29,6 +29,7 @@ import {
 import { ThemeProvider, useTheme } from "@emotion/react";
 import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
 import { FormattedMessage, useIntl } from "react-intl";
+import { PRIMARY_TEXT_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ setCount, url }) {
@@ -309,7 +310,7 @@ export default function SubmittedTab({ setCount, url }) {
             renderHeader: renderHeaderWithAria,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)}>
+                return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)} sx={PRIMARY_TEXT_BUTTON_SX}>
                     <FormattedMessage id="viewDetail" />
                 </Button>;
             },
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
index 14dbf36..befa7f5 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
@@ -17,6 +17,7 @@ import {getModeIntl } from "utils/statusUtils/PublicNoteStatusUtils";
 import { useTheme } from "@emotion/react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as React from 'react';
+import { PRIMARY_TEXT_BUTTON_SX } from "themes/colorConst";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnReady, applySearch }) {
@@ -139,6 +140,7 @@ export default function SearchPublicNoticeTable({ searchCriteria, applyGridOnRea
             renderCell: (params) => {
                 return <Button onClick={handleDetailClick(params)}
                     aria-label={intl.formatMessage({ id: 'viewDetail' })}
+                    sx={PRIMARY_TEXT_BUTTON_SX}
                 >
                     <FormattedMessage id="viewDetail" />
                 </Button>;
diff --git a/src/pages/PublicNotice/Search_GLD/index.js b/src/pages/PublicNotice/Search_GLD/index.js
index 7a78261..d25c1c6 100644
--- a/src/pages/PublicNotice/Search_GLD/index.js
+++ b/src/pages/PublicNotice/Search_GLD/index.js
@@ -84,7 +84,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" }}>Application</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Application</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/PublicNotice/Search_Mark_As_Paid_GLD/index.js b/src/pages/PublicNotice/Search_Mark_As_Paid_GLD/index.js
index 9ed99aa..2796db2 100644
--- a/src/pages/PublicNotice/Search_Mark_As_Paid_GLD/index.js
+++ b/src/pages/PublicNotice/Search_Mark_As_Paid_GLD/index.js
@@ -84,7 +84,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" }}>Mark Payment</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Mark Payment</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Recon/index.js b/src/pages/Recon/index.js
index 0f860c6..1368392 100644
--- a/src/pages/Recon/index.js
+++ b/src/pages/Recon/index.js
@@ -125,7 +125,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                             Recon Report
                             </Typography>
                         </Stack>
diff --git a/src/pages/Report/FullList/index.js b/src/pages/Report/FullList/index.js
index 5a81b75..1bdd397 100644
--- a/src/pages/Report/FullList/index.js
+++ b/src/pages/Report/FullList/index.js
@@ -74,7 +74,7 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} mb={2}>
                     <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" }}>Gazette Notice Full List</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Gazette Notice Full List</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Report/Summary/index.js b/src/pages/Report/Summary/index.js
index 1930c56..81571cc 100644
--- a/src/pages/Report/Summary/index.js
+++ b/src/pages/Report/Summary/index.js
@@ -74,7 +74,7 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} mb={2}>
                     <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" }}>Summary of Gazette Notice</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>Summary of Gazette Notice</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Setting/DrImport/index.js b/src/pages/Setting/DrImport/index.js
index 2aeb659..50df9a5 100644
--- a/src/pages/Setting/DrImport/index.js
+++ b/src/pages/Setting/DrImport/index.js
@@ -14,6 +14,7 @@ import { notifyActionError } from 'utils/CommonFunction';
 import { FormattedMessage, useIntl } from "react-intl";
 
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import { PRIMARY_OUTLINED_BUTTON_SX } from 'themes/colorConst';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -168,6 +169,7 @@ const Index = () => {
                                             component="span"
                                             variant="outlined"
                                             size="large"
+                                            sx={PRIMARY_OUTLINED_BUTTON_SX}
                                         >Import DR Excel</Button>
                                     </label>
                                 </Grid>
@@ -199,6 +201,7 @@ const Index = () => {
                                             component="span"
                                             variant="outlined"
                                             size="large"
+                                            sx={PRIMARY_OUTLINED_BUTTON_SX}
                                         >Import Offline Mode Application</Button>
                                     </label>
                                 </Grid>
diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js
index 8f28825..600fcd1 100644
--- a/src/pages/User/DetailPage/index.js
+++ b/src/pages/User/DetailPage/index.js
@@ -242,7 +242,7 @@ const UserMaintainPage = () => {
                 <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" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/User/ManagePage_OrgPublic/index.js b/src/pages/User/ManagePage_OrgPublic/index.js
index 36ad3d4..e228c43 100644
--- a/src/pages/User/ManagePage_OrgPublic/index.js
+++ b/src/pages/User/ManagePage_OrgPublic/index.js
@@ -53,7 +53,14 @@ const ManageOrgUserPage = () => {
         '& .MuiDataGrid-footerContainer': {
             border: 1,
             borderColor: "#EEE"
-        }
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+            whiteSpace: "normal",
+            lineHeight: "normal"
+        },
+        "& .MuiDataGrid-columnHeader": {
+            height: "unset !important"
+        },
     }
 
     const [_searchCriteria, set_searchCriteria] = React.useState({});
@@ -78,9 +85,9 @@ const ManageOrgUserPage = () => {
         });
     }
 
-    /** DataGrid `headerName` must be a string; use `renderHeader` for styled markup. */
-    const renderStyledHeader = (params) => (
-        <Typography variant="h5">{params.colDef.headerName}</Typography>
+    /** Match /proof/search grid column header styling (inherits MuiDataGrid columnHeader color). */
+    const renderHeaderWithAria = (params) => (
+        <span aria-label={params.colDef.headerName}>{params.colDef.headerName}</span>
     );
 
     function getStatus(params) {
@@ -127,7 +134,7 @@ const ManageOrgUserPage = () => {
             id: 'username',
             field: 'username',
             headerName: intl.formatMessage({ id: 'loginName' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -136,7 +143,7 @@ const ManageOrgUserPage = () => {
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: intl.formatMessage({ id: 'userName' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
 
@@ -145,7 +152,7 @@ const ManageOrgUserPage = () => {
             id: 'contactTel',
             field: 'contactTel',
             headerName: intl.formatMessage({ id: 'userContactNumber' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -157,7 +164,7 @@ const ManageOrgUserPage = () => {
             id: 'emailBus',
             field: 'emailBus',
             headerName: intl.formatMessage({ id: 'userContactEmail' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
         },
@@ -165,7 +172,7 @@ const ManageOrgUserPage = () => {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: intl.formatMessage({ id: 'lastLoginDate' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
@@ -176,7 +183,7 @@ const ManageOrgUserPage = () => {
             id: 'lastApply',
             field: 'lastApply',
             headerName: intl.formatMessage({ id: 'lastSubmissionDate' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             valueGetter: () => {
@@ -186,7 +193,7 @@ const ManageOrgUserPage = () => {
         {
             field: 'actions',
             headerName: intl.formatMessage({ id: 'status' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
@@ -199,7 +206,7 @@ const ManageOrgUserPage = () => {
             field: 'primaryUser',
             type: 'bool',
             headerName: intl.formatMessage({ id: 'primary' }),
-            renderHeader: renderStyledHeader,
+            renderHeader: renderHeaderWithAria,
             width: isMdOrLg ? 'auto' : 160,
             flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js
index 4f9cbb8..beab6fe 100644
--- a/src/pages/User/SearchPage/index.js
+++ b/src/pages/User/SearchPage/index.js
@@ -92,7 +92,7 @@ const UserSettingPage = () => {
                 <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" }}>View GLD User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>View GLD User</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/User/SearchPage_Individual/index.js b/src/pages/User/SearchPage_Individual/index.js
index e3b52bd..22c6a2d 100644
--- a/src/pages/User/SearchPage_Individual/index.js
+++ b/src/pages/User/SearchPage_Individual/index.js
@@ -64,7 +64,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" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 View Individual User
                             </Typography>
                         </Stack>
diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js
index de642b7..26091cb 100644
--- a/src/pages/User/SearchPage_Organization/index.js
+++ b/src/pages/User/SearchPage_Organization/index.js
@@ -68,7 +68,7 @@ const UserSearchPage_Organization = () => {
                 <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" }}>View Organisation User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>View Organisation User</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/authentication/AuthWrapper.js b/src/pages/authentication/AuthWrapper.js
index 5eb74e4..424f930 100644
--- a/src/pages/authentication/AuthWrapper.js
+++ b/src/pages/authentication/AuthWrapper.js
@@ -143,7 +143,7 @@ const AuthWrapper = ({ children }) => {
             width: { xs: '95vw', md: 900 },
             maxWidth: '95vw',
             boxShadow: 10,
-            border: '1px solid #0c489e'
+            border: '1px solid #1976d2'
           }
         }}
       >
diff --git a/src/pages/authentication/BusRegister.js b/src/pages/authentication/BusRegister.js
index ad248a5..fc5d3c6 100644
--- a/src/pages/authentication/BusRegister.js
+++ b/src/pages/authentication/BusRegister.js
@@ -63,8 +63,8 @@ const BusRegister = () => {
 
     /* Completed */
     "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
+      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
+      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
     }
   };
 
@@ -176,7 +176,7 @@ const BusRegister = () => {
                   activeStep === 2
                     ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
                     : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
                       : { color: "rgba(0,0,0,0.6)" }
                 }
                 icon={<VisibilityIcon />}
diff --git a/src/pages/authentication/IAmSmartRegister.js b/src/pages/authentication/IAmSmartRegister.js
index a40864d..3fd578b 100644
--- a/src/pages/authentication/IAmSmartRegister.js
+++ b/src/pages/authentication/IAmSmartRegister.js
@@ -46,8 +46,8 @@ const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 
     /* Completed */
     "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
+      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
+      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
     }
   };
 
@@ -174,7 +174,7 @@ const Register = () => {
                   activeStep === 2
                     ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
                     : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
                       : { color: "rgba(0,0,0,0.6)" }
                 }
                 icon={<VisibilityIcon />}
diff --git a/src/pages/authentication/Register.js b/src/pages/authentication/Register.js
index 0999f4c..da8d29f 100644
--- a/src/pages/authentication/Register.js
+++ b/src/pages/authentication/Register.js
@@ -67,8 +67,8 @@ const Register = () => {
 
     /* Completed */
     "& .Mui-completed": {
-      "&.MuiStepIcon-root": { color: "#0C489E", fontSize: "2rem" },           // use your strong blue
-      "& .MuiStepConnector-line": { borderColor: "#0C489E" }
+      "&.MuiStepIcon-root": { color: "#1976d2", fontSize: "2rem" },           // use your strong blue
+      "& .MuiStepConnector-line": { borderColor: "#1976d2" }
     }
   };
 
@@ -182,7 +182,7 @@ const Register = () => {
                   activeStep === 2
                     ? { "& .MuiSvgIcon-root": { color: "warning.main", fontSize: "2rem" } }
                     : allStepsCompleted()
-                      ? { "& .MuiSvgIcon-root": { color: "#0C489E", fontSize: "2rem" } }
+                      ? { "& .MuiSvgIcon-root": { color: "#1976d2", fontSize: "2rem" } }
                       : { color: "rgba(0,0,0,0.6)" }
                 }
                 icon={<VisibilityIcon />}
diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js
index 3ce91a4..5a52727 100644
--- a/src/pages/authentication/RegisterCustom.js
+++ b/src/pages/authentication/RegisterCustom.js
@@ -142,14 +142,14 @@ const RegisterCustom = () => {
                     href="/registerFrom"
                     variant="contained"
                     sx={{
-                      backgroundColor: '#0C489E',
+                      backgroundColor: '#1976d2',
                       color: '#FFFFFF',
-                      border: '1px solid #0C489E',
+                      border: '1px solid #1976d2',
                       boxShadow: 'none',
                       '&:hover': {
-                        backgroundColor: '#093A7A',
+                        backgroundColor: '#1565c0',
                         color: '#FFFFFF',
-                        border: '1px solid #093A7A',
+                        border: '1px solid #1565c0',
                         boxShadow: 'none',
                       },
                     }}
@@ -172,14 +172,14 @@ const RegisterCustom = () => {
                     variant="contained"
                     sx={{
                       mt: 0.5,
-                      backgroundColor: '#0C489E',
+                      backgroundColor: '#1976d2',
                       color: '#FFFFFF',
-                      border: '1px solid #0C489E',
+                      border: '1px solid #1976d2',
                       boxShadow: 'none',
                       '&:hover': {
-                        backgroundColor: '#093A7A',
+                        backgroundColor: '#1565c0',
                         color: '#FFFFFF',
-                        border: '1px solid #093A7A',
+                        border: '1px solid #1565c0',
                         boxShadow: 'none',
                       },
                     }}
diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js
index b33a90e..60054b4 100644
--- a/src/pages/authentication/auth-forms/AuthLoginCustom.js
+++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js
@@ -369,9 +369,9 @@ const AuthLoginCustom = () => {
                     <Button disableElevation disabled={isButtonDisabled}
                       fullWidth size="large" type="submit" variant="contained" color="primary"
                       sx={{
-                        backgroundColor: "#0C489E",
+                        backgroundColor: "#1976d2",
                         color: "#FFFFFF",
-                        "&:hover": { backgroundColor: "#093A7A" },
+                        "&:hover": { backgroundColor: "#1565c0" },
                         "&.Mui-disabled": {
                           background: "#bbdefb",
                           color: "#fff",
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index dcfa428..e1de58c 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -1602,7 +1602,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 variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -1709,9 +1709,9 @@ const BusCustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#1976d2',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 <FormattedMessage id="captchaPlayAudio" />
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index e5676b8..4893ba3 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -1930,7 +1930,7 @@ const CustomFormWizard = (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 variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -2037,9 +2037,9 @@ const CustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#0C489E',
+                                                    backgroundColor: '#1976d2',
                                                     color: '#FFFFFF',
-                                                    '&:hover': { backgroundColor: '#093A7A' },
+                                                    '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
                                             >
                                                 <FormattedMessage id="captchaPlayAudio" />
diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
index 3536e17..f8398b8 100644
--- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
+++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
@@ -1031,7 +1031,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Grid container>
                                                 <Grid item xs={12} md={12}>
-                                                    <Typography variant="h5" sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0C489E" }}>
+                                                    <Typography variant="h5" sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
     
                                                         <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                     </Typography>
@@ -1123,9 +1123,9 @@ const CustomFormWizard = (props) => {
                                                     onClick={playCaptchaAudio}
                                                     aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                     sx={{
-                                                        backgroundColor: '#0C489E',
+                                                        backgroundColor: '#1976d2',
                                                         color: '#FFFFFF',
-                                                        '&:hover': { backgroundColor: '#093A7A' },
+                                                        '&:hover': { backgroundColor: '#1565c0' },
                                                     }}
                                                 >
                                                     <FormattedMessage id="captchaPlayAudio" />
diff --git a/src/pages/dashboard/GLD/index.js b/src/pages/dashboard/GLD/index.js
index b72df3d..901e912 100644
--- a/src/pages/dashboard/GLD/index.js
+++ b/src/pages/dashboard/GLD/index.js
@@ -45,7 +45,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={{ "textShadow": "0px 0px 25px #0C489E" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
               {getWelcomeMsg()}, {userData.fullenName}
             </Typography>
           </Stack>
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index 09dff7d..2ddf838 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -191,9 +191,9 @@ const DashboardDefault = () => {
                     p: 4,
                     justifyContent: "flex-start",
                     backgroundColor: "#e1edfc",
-                    border: "0px solid #0C489E",   // DARKER border (3:1+)
+                    border: "0px solid #1976d2",   // DARKER border (3:1+)
                     borderRadius: "10px",
-                    color: "#0C489E",              // icon + default text color
+                    color: "#1976d2",              // icon + default text color
                     "&:hover": {
                       backgroundColor: "#d6e6fb"
                     }
@@ -202,7 +202,7 @@ const DashboardDefault = () => {
                   <Stack direction="row" spacing={2}>
                     <AdsClickRoundedIcon />
                     <Stack direction="column" alignItems="flex-start">
-                      <Typography component="h2" variant="h4" sx={{ color: "#0C489E" }}>
+                      <Typography component="h2" variant="h4" sx={{ color: "#1976d2" }}>
                         <FormattedMessage id="submitApplication" />
                       </Typography>
                       <Typography sx={{ color: "#1A1A1A" }}>
@@ -220,7 +220,7 @@ const DashboardDefault = () => {
                     aria-label={intl.formatMessage({ id: 'viewAllAnnouncement' })}
                     onClick={() => { navigate("/announcement/search"); }}
                     sx={{
-                      color: '#0C489E',
+                      color: '#1976d2',
                       textTransform: 'none',
                       textDecoration: 'underline',
                       '&:hover': { textDecoration: 'underline' }
@@ -245,7 +245,7 @@ const DashboardDefault = () => {
                     aria-label={intl.formatMessage({ id: 'viewAllSystemMessage' })}
                     onClick={() => { navigate("/msg/search"); }}
                     sx={{
-                      color: '#0C489E',
+                      color: '#1976d2',
                       textTransform: 'none',
                       textDecoration: 'underline',
                       '&:hover': {
diff --git a/src/pages/extra-pages/UserMenuPub1/index.js b/src/pages/extra-pages/UserMenuPub1/index.js
index 2ed4f39..48060b7 100644
--- a/src/pages/extra-pages/UserMenuPub1/index.js
+++ b/src/pages/extra-pages/UserMenuPub1/index.js
@@ -23,7 +23,7 @@ const BackgroundHead = {
   height: "auto",
   backgroundSize: "contain",
   backgroundRepeat: "no-repeat",
-  backgroundColor: "#0C489E",
+  backgroundColor: "#1976d2",
   backgroundPosition: "right",
 };
 
diff --git a/src/pages/pnspsUserGroupDetailPage/index.js b/src/pages/pnspsUserGroupDetailPage/index.js
index fe35c5a..a917186 100644
--- a/src/pages/pnspsUserGroupDetailPage/index.js
+++ b/src/pages/pnspsUserGroupDetailPage/index.js
@@ -226,7 +226,7 @@ const UserMaintainPage = () => {
                 <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" }}>{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/pnspsUserGroupSearchPage/index.js b/src/pages/pnspsUserGroupSearchPage/index.js
index 10b9549..bb4f9ad 100644
--- a/src/pages/pnspsUserGroupSearchPage/index.js
+++ b/src/pages/pnspsUserGroupSearchPage/index.js
@@ -72,7 +72,7 @@ const UserGroupSearchPanel = () => {
                 <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 ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #1976d2" }}>
                                 View User Group
                             </Typography>
                         </Stack>
diff --git a/src/themes/buttonConst.js b/src/themes/buttonConst.js
index 23635c5..5e89661 100644
--- a/src/themes/buttonConst.js
+++ b/src/themes/buttonConst.js
@@ -69,6 +69,9 @@ export const PNSPS_BUTTON_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 /* -----------------------------
                 Icon alignment
@@ -93,17 +96,24 @@ export const PNSPS_BUTTON_THEME = createTheme({
                 '@media (min-width: 1280px)': { minWidth: '9vw' },
                 textTransform: 'none',
                 alignItems: 'normal',
+                '&:active': {
+                    boxShadow: 'none',
+                    transform: 'none',
+                },
                 },
 
                 /* -----------------------------
                 Remove default contained elevation / blue focus
                 ------------------------------ */
-                contained: {
+                contained: ({ theme, ownerState }) => ({
                 boxShadow: 'none',
                 '&:hover': { boxShadow: 'none' },
-                '&:active': { boxShadow: 'none' },
-                '&.Mui-focusVisible': { boxShadow: 'none' },
+                '&:active': {
+                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                    boxShadow: 'none',
                 },
+                '&.Mui-focusVisible': { boxShadow: 'none' },
+                }),
 
                 /* -----------------------------
                 RESET / CANCEL (contained + cancel)
@@ -123,7 +133,7 @@ export const PNSPS_BUTTON_THEME = createTheme({
                 },
 
                 '&:active': {
-                    backgroundColor: '#4A4A4A',
+                    backgroundColor: '#616161',
                     boxShadow: 'none !important',
                 },
 
@@ -145,10 +155,20 @@ export const PNSPS_BUTTON_THEME = createTheme({
                     backgroundColor: 'transparent',
                 },
 
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
                 '&.Mui-focusVisible': {
                     boxShadow: '0 0 0 3px rgba(66,66,66,0.4)',
                 },
                 },
+
+                outlined: {
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+                },
             },
         },
     }
@@ -215,6 +235,9 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 startIcon:{
                     display: 'flex',
@@ -240,6 +263,24 @@ export const PNSPS_LONG_BUTTON_THEME = createTheme({
                     },
                     textTransform: "none",
                     alignItems: 'normal',
+                    '&:active': {
+                        boxShadow: 'none',
+                        transform: 'none',
+                    },
+                },
+                contained: ({ theme, ownerState }) => ({
+                    boxShadow: 'none',
+                    '&:hover': { boxShadow: 'none' },
+                    '&:active': {
+                        backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                        boxShadow: 'none',
+                    },
+                    '&.Mui-focusVisible': { boxShadow: 'none' },
+                }),
+                outlined: {
+                    '&:active': {
+                        backgroundColor: 'transparent',
+                    },
                 },
             },
         },
diff --git a/src/themes/colorConst.js b/src/themes/colorConst.js
index 402fa3d..3451676 100644
--- a/src/themes/colorConst.js
+++ b/src/themes/colorConst.js
@@ -49,6 +49,40 @@ export const GENERAL_BORDER_COLOR ='#e6ebf1';
 
 export const GENERAL_TEXT_COLOR ='#262626';
 
+/** Page header bar background (gazette banner strip). */
+export const HEADER_BACKGROUND_COLOR = '#0C489E';
+
+/** MUI default primary — used by applyPublicNotice contained button (PNSPS_LONG_BUTTON_THEME). WCAG AA: 3:1+ for UI components on white. */
+export const CONTAINED_PRIMARY_BLUE = '#1976d2';
+
+/** Validation error text/border — matches FormHelperText in styles.css (e.g. "Please enter password"). WCAG AA on white. */
+export const VALIDATION_ERROR_COLOR = '#B00020';
+
+export const PRIMARY_CONTAINED_BUTTON_SX = {
+    backgroundColor: CONTAINED_PRIMARY_BLUE,
+    color: '#FFFFFF',
+    '&:hover': {
+        backgroundColor: '#1565c0',
+    },
+};
+
+export const PRIMARY_OUTLINED_BUTTON_SX = {
+    color: CONTAINED_PRIMARY_BLUE,
+    borderColor: CONTAINED_PRIMARY_BLUE,
+    '&:hover': {
+        borderColor: CONTAINED_PRIMARY_BLUE,
+        backgroundColor: 'rgba(25, 118, 210, 0.08)',
+    },
+};
+
+export const PRIMARY_TEXT_BUTTON_SX = {
+    color: CONTAINED_PRIMARY_BLUE,
+    fontWeight: 600,
+    '&:hover': {
+        backgroundColor: 'rgba(25, 118, 210, 0.08)',
+    },
+};
+
 export const formTheme = createTheme({
     components: {
         MuiFormLabel: {
diff --git a/src/themes/overrides/Button.js b/src/themes/overrides/Button.js
index e601b31..791b8ea 100644
--- a/src/themes/overrides/Button.js
+++ b/src/themes/overrides/Button.js
@@ -10,17 +10,29 @@ export default function Button(theme) {
   return {
     MuiButton: {
       defaultProps: {
-        disableElevation: true
+        disableElevation: true,
+        disableRipple: true
       },
       styleOverrides: {
         root: {
-          fontWeight: 400
-        },
-        contained: {
-          ...disabledStyle
+          fontWeight: 400,
+          '&:active': {
+            boxShadow: 'none',
+            transform: 'none'
+          }
         },
+        contained: ({ theme: muiTheme, ownerState }) => ({
+          ...disabledStyle,
+          '&:active': {
+            backgroundColor: muiTheme.palette[ownerState.color]?.main ?? muiTheme.palette.primary.main,
+            boxShadow: 'none'
+          }
+        }),
         outlined: {
-          ...disabledStyle
+          ...disabledStyle,
+          '&:active': {
+            backgroundColor: 'transparent'
+          }
         }
       }
     }
diff --git a/src/themes/overrides/Checkbox.js b/src/themes/overrides/Checkbox.js
index 1cc4056..17517c0 100644
--- a/src/themes/overrides/Checkbox.js
+++ b/src/themes/overrides/Checkbox.js
@@ -1,14 +1,31 @@
 // ==============================|| OVERRIDES - CHECKBOX ||============================== //
 
+import { CONTAINED_PRIMARY_BLUE } from '../colorConst';
+
 export default function Checkbox(theme) {
   
   const checkboxSize = "2rem"
 
   return {
     MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true
+      },
       styleOverrides: {
         root: {
           color: theme.palette.secondary[300],
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&.Mui-checked': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-focusVisible': {
+            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+          },
           svg: {
             width: checkboxSize,
             height: checkboxSize,
diff --git a/src/themes/overrides/InputLabel.js b/src/themes/overrides/InputLabel.js
index 7eec340..8ef1018 100644
--- a/src/themes/overrides/InputLabel.js
+++ b/src/themes/overrides/InputLabel.js
@@ -1,11 +1,22 @@
 // ==============================|| OVERRIDES - INPUT LABEL ||============================== //
 
+import { CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR } from '../colorConst';
+
 export default function InputLabel(theme) {
   return {
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: theme.palette.grey[600]
+          color: theme.palette.grey[600],
+          '&.Mui-focused:not(.Mui-error)': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-error': {
+            color: VALIDATION_ERROR_COLOR
+          },
+          '&.Mui-focused.Mui-error': {
+            color: VALIDATION_ERROR_COLOR
+          }
         },
         outlined: {
           lineHeight: '0.8em',
diff --git a/src/themes/overrides/OutlinedInput.js b/src/themes/overrides/OutlinedInput.js
index f5f0924..0f7cb40 100644
--- a/src/themes/overrides/OutlinedInput.js
+++ b/src/themes/overrides/OutlinedInput.js
@@ -1,5 +1,6 @@
 // material-ui
 import { alpha } from '@mui/material/styles';
+import { CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR } from '../colorConst';
 
 // ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
 
@@ -18,22 +19,25 @@ export default function OutlinedInput(theme) {
           fontWeight: 600,
           lineHeight: 1.57,
           '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.primary.light
+            borderColor: theme.palette.grey[400]
           },
-          '&.Mui-focused': {
-            boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
+          '&.Mui-focused:not(.Mui-error)': {
+            boxShadow: `0 0 0 2px ${alpha(CONTAINED_PRIMARY_BLUE, 0.2)}`,
             '& .MuiOutlinedInput-notchedOutline': {
-              border: `1px solid ${theme.palette.primary.light}`
+              border: `1px solid ${CONTAINED_PRIMARY_BLUE}`
             }
           },
+          '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: VALIDATION_ERROR_COLOR
+          },
           '&.Mui-error': {
             '&:hover .MuiOutlinedInput-notchedOutline': {
-              borderColor: theme.palette.error.light
+              borderColor: VALIDATION_ERROR_COLOR
             },
             '&.Mui-focused': {
-              boxShadow: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+              boxShadow: `0 0 0 2px ${alpha(VALIDATION_ERROR_COLOR, 0.2)}`,
               '& .MuiOutlinedInput-notchedOutline': {
-                border: `1px solid ${theme.palette.error.light}`
+                border: `3px solid ${VALIDATION_ERROR_COLOR}`
               }
             }
           }
diff --git a/src/themes/overrides/Radio.js b/src/themes/overrides/Radio.js
new file mode 100644
index 0000000..dbffc87
--- /dev/null
+++ b/src/themes/overrides/Radio.js
@@ -0,0 +1,30 @@
+// ==============================|| OVERRIDES - RADIO ||============================== //
+
+import { CONTAINED_PRIMARY_BLUE } from '../colorConst';
+
+export default function Radio() {
+  return {
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true
+      },
+      styleOverrides: {
+        root: {
+          color: '#595959',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&.Mui-checked': {
+            color: CONTAINED_PRIMARY_BLUE
+          },
+          '&.Mui-focusVisible': {
+            boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)'
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/src/themes/overrides/Tab.js b/src/themes/overrides/Tab.js
index e982023..810ca9a 100644
--- a/src/themes/overrides/Tab.js
+++ b/src/themes/overrides/Tab.js
@@ -3,12 +3,21 @@
 export default function Tab(theme) {
   return {
     MuiTab: {
+      defaultProps: {
+        disableRipple: true
+      },
       styleOverrides: {
         root: {
           minHeight: 46,
           color: theme.palette.text.primary,
           fontSize: "1.2rem",
-          fontWeight: 600
+          fontWeight: 600,
+          '&:active': {
+            backgroundColor: 'transparent'
+          },
+          '&:active:not(.Mui-selected)': {
+            color: theme.palette.text.primary
+          }
         }
       }
     }
diff --git a/src/themes/overrides/index.js b/src/themes/overrides/index.js
index 6e9461d..24c8ff7 100644
--- a/src/themes/overrides/index.js
+++ b/src/themes/overrides/index.js
@@ -13,6 +13,7 @@ import LinearProgress from './LinearProgress';
 import Link from './Link';
 import ListItemIcon from './ListItemIcon';
 import OutlinedInput from './OutlinedInput';
+import Radio from './Radio';
 import Tab from './Tab';
 import TableCell from './TableCell';
 import Tabs from './Tabs';
@@ -40,6 +41,7 @@ export default function ComponentsOverrides(theme) {
     Link(),
     ListItemIcon(),
     OutlinedInput(theme),
+    Radio(),
     Tab(theme),
     TableCell(theme),
     Tabs(),
diff --git a/src/themes/themeConst.js b/src/themes/themeConst.js
index 82583a4..392d4e3 100644
--- a/src/themes/themeConst.js
+++ b/src/themes/themeConst.js
@@ -1,8 +1,7 @@
 import {createTheme} from "@mui/material";
 import Palette from "./palette";
 import Typography from "./typography";
-import {alpha} from "@mui/material/styles";
-import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR} from "./colorConst";
+import {GENERAL_TABLE_BOARDER_COLOR, TABLE_HEADER_TEXT_COLOR, CONTAINED_PRIMARY_BLUE, VALIDATION_ERROR_COLOR} from "./colorConst";
 const FONT_SIZE = '1.1rem';
 const TABLE_FONT_SIZE = '1.0rem';
 const HELPER_FONT_SIZE = '0.9rem';
@@ -44,18 +43,34 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiButton: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: ({ ownerState }) => ({
                 ...(ownerState.color === "cancel" && {
                     borderColor: "#9E9E9E",
                 }),
+                '&:active': {
+                    boxShadow: 'none',
+                    transform: 'none',
+                },
                 }),
-                contained: ({ ownerState }) => ({
+                contained: ({ theme, ownerState }) => ({
                 ...(ownerState.color === "cancel" && {
                     border: "2px solid #9E9E9E",
                     boxShadow: "none",
                 }),
+                '&:active': {
+                    backgroundColor: theme.palette[ownerState.color]?.main ?? theme.palette.primary.main,
+                    boxShadow: 'none',
+                },
                 }),
+                outlined: {
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+                },
             },
         },
         MuiInputAdornment: {
@@ -131,6 +146,15 @@ export const PNSPS_THEME = createTheme({
                 root: {
                     color: 'rgba(0, 0, 0, 0.8)',
                     fontSize: '1.15rem',
+                    '&.Mui-focused': {
+                        color: CONTAINED_PRIMARY_BLUE,
+                    },
+                    '&.Mui-error': {
+                        color: VALIDATION_ERROR_COLOR,
+                    },
+                    '&.Mui-focused.Mui-error': {
+                        color: VALIDATION_ERROR_COLOR,
+                    },
                 },
             },
         },
@@ -220,7 +244,7 @@ export const PNSPS_THEME = createTheme({
                 },
 
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.primary.main,
+                    borderColor: CONTAINED_PRIMARY_BLUE,
                     borderWidth: 3,                 // thick focus indicator
                 },
 
@@ -232,16 +256,16 @@ export const PNSPS_THEME = createTheme({
                     padding: '5.5px 6px 5.5px 10px',  // 7.5-2, 8-2, 7.5-2, 12-2
                 },
 
-                /* Error state */
+                /* Error state — same red as FormHelperText (#B00020) */
                 '&.Mui-error .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                     borderWidth: 1,
                 },
                 '&.Mui-error:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                 },
                 '&.Mui-error.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error.main,
+                    borderColor: VALIDATION_ERROR_COLOR,
                     borderWidth: 3,
                 },
 
@@ -262,6 +286,9 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiCheckbox: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: {
                 /* Default (unchecked) state — darker */
@@ -272,14 +299,44 @@ export const PNSPS_THEME = createTheme({
                     backgroundColor: 'transparent',
                 },
 
-                /* Checked state */
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                /* Checked state — same blue as applyPublicNotice button */
                 '&.Mui-checked': {
-                    color: theme.palette.primary.main,
+                    color: CONTAINED_PRIMARY_BLUE,
                 },
 
                 /* Focus-visible */
                 '&.Mui-focusVisible': {
-                    boxShadow: `0 0 0 3px ${alpha(theme.palette.primary.main, 0.35)}`,
+                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
+                },
+                },
+            },
+        },
+        MuiRadio: {
+            defaultProps: {
+                disableRipple: true,
+            },
+            styleOverrides: {
+                root: {
+                color: '#595959',
+
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&.Mui-checked': {
+                    color: CONTAINED_PRIMARY_BLUE,
+                },
+
+                '&.Mui-focusVisible': {
+                    boxShadow: '0 0 0 3px rgba(25, 118, 210, 0.35)',
                 },
                 },
             },
@@ -416,6 +473,9 @@ export const PNSPS_THEME = createTheme({
             },
         },
         MuiTab: {
+            defaultProps: {
+                disableRipple: true,
+            },
             styleOverrides: {
                 root: {
                 fontSize: TABLE_FONT_SIZE,   // ✅ unchanged
@@ -435,6 +495,14 @@ export const PNSPS_THEME = createTheme({
                     color: '#1565C0',
                 },
 
+                '&:active': {
+                    backgroundColor: 'transparent',
+                },
+
+                '&:active:not(.Mui-selected)': {
+                    color: '#424242',
+                },
+
                 // ✅ Keyboard TAB focus (visible & accessible)
                 '&.Mui-focusVisible': {
                     outline: '3px solid rgba(21, 101, 192, 0.55)',
diff --git a/src/utils/statusUtils/PublicNoteStatusUtils.js b/src/utils/statusUtils/PublicNoteStatusUtils.js
index fab1794..b53bcd5 100644
--- a/src/utils/statusUtils/PublicNoteStatusUtils.js
+++ b/src/utils/statusUtils/PublicNoteStatusUtils.js
@@ -54,7 +54,7 @@ export function getStatusByTextEng(status, creditor) {
         case "submitted":
             return getStatusTag({ color: "#8F7200", text: "Submitted" }) // was #F1C40F
         case "reviewed":
-            return getStatusTag({ color: "#0C489E", text: "Reviewed" }) // unchanged
+            return getStatusTag({ color: "#1976d2", text: "Reviewed" }) // unchanged
         case "confirmed":
             if (creditor)
                 return getStatusTag({ color: "#217CBA", text: "Pending Publish" }) // was #3498DB