diff --git a/public/favicon.svg b/public/favicon.svg
index 3caf057..dddf9f8 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -2,7 +2,7 @@
 <path d="M1.63954 13.3644L3.95187 11.052L3.95428 11.0496H8.30453L6.5736 12.7806L6.12669 13.2275L4.35415 15L4.57368 15.2201L14.5039 25.1498L24.6537 15L22.8805 13.2275L22.7557 13.102L20.7033 11.0496H25.0535L25.0559 11.052L26.8683 12.8644L29.0039 15L14.5039 29.5L0.00390625 15L1.63954 13.3644ZM14.5039 0.5L22.8823 8.87842H18.5321L14.5039 4.85024L10.4757 8.87842H6.12548L14.5039 0.5Z" fill="#096DD9"/>
 <path d="M4.35477 15.0002L6.12731 13.2276L6.57422 12.7807L4.84389 11.0498H3.9549L3.95249 11.0522L1.64016 13.3645L3.85961 15.5731L4.35477 15.0002Z" fill="url(#paint0_linear_112102_1824)"/>
 <path d="M22.8814 13.2276L24.6545 15.0002L24.479 15.1757L24.4796 15.1763L26.8691 12.8646L25.0568 11.0522L25.0544 11.0498H24.8783L22.7565 13.1022L22.8814 13.2276Z" fill="url(#paint1_linear_112102_1824)"/>
-<path d="M3.9497 11.0498L3.95211 11.0522L6.12693 13.2276L14.5041 21.6043L25.0586 11.0498H3.9497Z" fill="#1890FF"/>
+<path d="M3.9497 11.0498L3.95211 11.0522L6.12693 13.2276L14.5041 21.6043L25.0586 11.0498H3.9497Z" fill="#0C489E"/>
 <defs>
 <linearGradient id="paint0_linear_112102_1824" x1="5.62978" y1="11.5889" x2="2.57161" y2="14.6471" gradientUnits="userSpaceOnUse">
 <stop stop-color="#023B95"/>
diff --git a/src/assets/style/navbarStyles.css b/src/assets/style/navbarStyles.css
index a7618ce..078a711 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 #1976d2;
+  border-bottom: 3px solid #0c489e;
   min-height: 77px;
 }
 
@@ -166,7 +166,7 @@
 
 #navbar a:focus-visible,
 #navbar button.navTrigger:focus-visible{
-  outline: 3px solid #1976d2;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 10px;
 }
@@ -234,7 +234,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #1976d2;
+  color: #0c489e;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -242,7 +242,7 @@
   text-decoration: none;
   font-size: 1.1rem;
   font-weight: 600;
-  color: #1976d2;
+  color: #0c489e;
   transition: 0.3s ease-in-out;
   text-align: center;
 }
@@ -284,7 +284,7 @@
   transition: 0.3s ease-in-out;
 }
 #sidebar li a:hover{
-  color: #1976d2;
+  color: #0c489e;
 }
 #sidebar div li ul{
   background: white;
@@ -344,12 +344,12 @@
 /* Hover / focus */
 #sidebar li > a:hover,
 #sidebar li > button.navTrigger:hover{
-  color: #1976d2;
+  color: #0c489e;
 }
 
 #sidebar li > a:focus-visible,
 #sidebar li > button.navTrigger:focus-visible{
-  outline: 3px solid #1976d2;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 10px;
 }
diff --git a/src/assets/style/styles.css b/src/assets/style/styles.css
index f1ee2c6..17f9cc6 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 #1976d2;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -95,7 +95,7 @@ a:active {
 /* ===== MUI DataGrid keyboard focus (WCAG 2.4.7 / 2.4.11) ===== */
 .MuiDataGrid-columnHeader:focus-visible,
 .MuiDataGrid-cell:focus-visible {
-  outline: 3px solid #1976d2;
+  outline: 3px solid #0c489e;
   outline-offset: -2px;
   box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.25);
 }
@@ -122,7 +122,7 @@ a:active {
 
 /* ===== Outlined button focus ===== */
 .MuiButton-outlined:focus-visible {
-  outline: 3px solid #1976d2;
+  outline: 3px solid #0c489e;
   outline-offset: 2px;
 }
 
diff --git a/src/components/AdminLogo/index.js b/src/components/AdminLogo/index.js
index 7b62ee8..e0b8052 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 #1976d2',
+            outline: '3px solid #0c489e',
             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':'#1976d2'}} id="systemTitle">PNSPS</span>
+          <span style={{ color: checkSysEnv()!=''?'red':'#0c489e'}} id="systemTitle">PNSPS</span>
         </Stack>
       </ButtonBase>
 
diff --git a/src/components/MobileLogo/index.js b/src/components/MobileLogo/index.js
index b5ebe8c..8732c4a 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 #1976d2',
+        outline: '3px solid #0c489e',
         outlineOffset: '2px',
         borderRadius: '6px'
       }
diff --git a/src/layout/MainLayout/Header/HeaderContent/Notification.js b/src/layout/MainLayout/Header/HeaderContent/Notification.js
index d486c28..3348002 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 #1976d2',
+            outline: '3px solid #0c489e',
             outlineOffset: '2px',
             borderRadius: '6px'
           }
diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 215e803..c2755ef 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" : "#1976d2" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} 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" : "#1976d2" }} id="mobileTitle">
+        <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
           PNSPS
         </span>
       </Box>
@@ -826,13 +826,13 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#1976d2" }} />
+                <MenuIcon style={{ color: "#0c489e" }} />
               </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" : "#1976d2" }} id="mobileTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} 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" : "#1976d2" }} id="systemTitle">
+                    <span style={{ color: checkSysEnv() !== "" ? "#B00020" : "#0c489e" }} id="systemTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
@@ -863,7 +863,7 @@ function Header(props) {
                 onClick={handleDrawerToggle}
                 sx={{ mr: 2, display: { md: "none" } }}
               >
-                <MenuIcon style={{ color: "#1976d2" }} />
+                <MenuIcon style={{ color: "#0c489e" }} />
               </IconButton>
 
               <Box sx={{ flexGrow: 1, mr: 2, display: { sm: "block", md: "none" } }}>
@@ -946,14 +946,14 @@ function Header(props) {
               onClick={handleDrawerToggle}
               sx={{ mr: 2, display: { md: "none" } }}
             >
-              <MenuIcon style={{ color: "#1976d2" }} />
+              <MenuIcon style={{ color: "#0c489e" }} />
             </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" : "#1976d2" }} id="mobileTitle">
+                  <span style={{ color: checkSysEnv() !== "" ? "red" : "#0c489e" }} id="mobileTitle">
                     <FormattedMessage id="PNSPS" />
                   </span>
                 </Stack>
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index 0e6e281..de5ca80 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 #1976d2"}}>
+          <Box sx={{borderTop: "3px solid #0c489e"}}>
             <Footer/>
           </Box>
         </Box>
diff --git a/src/pages/Announcement/Search/index.js b/src/pages/Announcement/Search/index.js
index a61bb3d..60f69e5 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 #1976d2" }}>Announcement</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Announcement</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Announcement/Search_Public/index.js b/src/pages/Announcement/Search_Public/index.js
index 448840f..8a7af5b 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 #1976d2" }}><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/AuditLog/index.js b/src/pages/AuditLog/index.js
index fd5c6cb..a0aa124 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 #1976d2" }}>Audit Log</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Audit Log</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/DemandNote/Create/index.js b/src/pages/DemandNote/Create/index.js
index b77ffb4..fdaa876 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Create Demand Note
                             </Typography>
                         </Stack>
diff --git a/src/pages/DemandNote/Export/index.js b/src/pages/DemandNote/Export/index.js
index 7577334..dddc82d 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Export for GDN (Non Creditor) 
                             </Typography>
                         </Stack>
diff --git a/src/pages/DemandNote/Search/index.js b/src/pages/DemandNote/Search/index.js
index 6fe4302..912dca9 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Demand Note
                             </Typography>
                         </Stack>
diff --git a/src/pages/GFMIS/index.js b/src/pages/GFMIS/index.js
index a0af344..3d5a042 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                             GFMIS Generate XML
                             </Typography>
                         </Stack>
diff --git a/src/pages/JVM/index.js b/src/pages/JVM/index.js
index 80e7982..ebffeab 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 #1976d2" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
               System Background Status
             </Typography>
           </Stack>
diff --git a/src/pages/Organization/SearchPage/index.js b/src/pages/Organization/SearchPage/index.js
index 4403afb..6b8a62a 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 #1976d2" }}>View Organisation</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>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 9d7b054..fc4d970 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 Online Payment Record
                             </Typography>
                         </Stack>
diff --git a/src/pages/Proof/Create_FromApp/index.js b/src/pages/Proof/Create_FromApp/index.js
index 8592d16..08c90a5 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 #1976d2" }}>Create Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>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 b33457d..56783bf 100644
--- a/src/pages/Proof/Reply_Public/ProofForm.js
+++ b/src/pages/Proof/Reply_Public/ProofForm.js
@@ -719,7 +719,7 @@ const FormPanel = ({ formData }) => {
                                                 disabled={(actionValue == false && isOverReviseDeadline()) || isSubmitting}
                                                 aria-label={intl.formatMessage({ id: 'submitReply' })}
                                                 sx={{
-                                                    backgroundColor: '#1976d2',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
                                                     '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
diff --git a/src/pages/Proof/Search_GLD/index.js b/src/pages/Proof/Search_GLD/index.js
index e718277..80c07fe 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 #1976d2" }}>Proof</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Proof</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index fd75371..c77b6ba 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -749,7 +749,7 @@ const ApplicationDetailCard = (
                                                                 sx={{
                                                                     textTransform: 'capitalize',
                                                                     alignItems: 'end',
-                                                                    backgroundColor: '#1976d2',
+                                                                    backgroundColor: '#0c489e',
                                                                     color: '#FFFFFF',
                                                                     '&:hover': { backgroundColor: '#1565c0' },
                                                                 }}
diff --git a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
index 57c191d..e8b5006 100644
--- a/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_Public/ApplicationDetailCard.js
@@ -240,7 +240,7 @@ const ApplicationDetailCard = (
                                             startIcon={<CloseIcon />}
                                             aria-label={intl.formatMessage({ id: 'cancelApp' })}
                                             sx={{
-                                                backgroundColor: '#1976d2',
+                                                backgroundColor: '#0c489e',
                                                 color: '#FFFFFF',
                                                 '&:hover': { backgroundColor: '#1565c0' },
                                             }}
@@ -666,7 +666,7 @@ const ApplicationDetailCard = (
                                                                 <Button
                                                                     sx={{
                                                                         ml: 3,
-                                                                        backgroundColor: '#1976d2',
+                                                                        backgroundColor: '#0c489e',
                                                                         color: '#FFFFFF',
                                                                         '&:hover': { backgroundColor: '#1565c0' },
                                                                     }}
diff --git a/src/pages/PublicNotice/Search_GLD/index.js b/src/pages/PublicNotice/Search_GLD/index.js
index d25c1c6..2a3fdc3 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 #1976d2" }}>Application</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>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 2796db2..6c28c8e 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 #1976d2" }}>Mark Payment</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Mark Payment</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/Recon/index.js b/src/pages/Recon/index.js
index 1368392..398e335 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                             Recon Report
                             </Typography>
                         </Stack>
diff --git a/src/pages/Report/FullList/index.js b/src/pages/Report/FullList/index.js
index 1bdd397..6a59fe4 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 #1976d2" }}>Gazette Notice Full List</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>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 81571cc..6a3f2d4 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 #1976d2" }}>Summary of Gazette Notice</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>Summary of Gazette Notice</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/User/DetailPage/index.js b/src/pages/User/DetailPage/index.js
index 600fcd1..16c87e2 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 #1976d2" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>{isNewRecord ? "Create GLD User" : "Maintain GLD User"}</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/User/SearchPage/index.js b/src/pages/User/SearchPage/index.js
index beab6fe..1683aef 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 #1976d2" }}>View GLD User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>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 22c6a2d..b60a1ee 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 View Individual User
                             </Typography>
                         </Stack>
diff --git a/src/pages/User/SearchPage_Organization/index.js b/src/pages/User/SearchPage_Organization/index.js
index 26091cb..285cb9f 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 #1976d2" }}>View Organisation User</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>View Organisation User</Typography>
                         </Stack>
                     </div>
                 </Grid>
diff --git a/src/pages/authentication/AuthWrapper.js b/src/pages/authentication/AuthWrapper.js
index 424f930..5eb74e4 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 #1976d2'
+            border: '1px solid #0c489e'
           }
         }}
       >
diff --git a/src/pages/authentication/RegisterCustom.js b/src/pages/authentication/RegisterCustom.js
index 5a52727..1e5702f 100644
--- a/src/pages/authentication/RegisterCustom.js
+++ b/src/pages/authentication/RegisterCustom.js
@@ -142,9 +142,9 @@ const RegisterCustom = () => {
                     href="/registerFrom"
                     variant="contained"
                     sx={{
-                      backgroundColor: '#1976d2',
+                      backgroundColor: '#0c489e',
                       color: '#FFFFFF',
-                      border: '1px solid #1976d2',
+                      border: '1px solid #0c489e',
                       boxShadow: 'none',
                       '&:hover': {
                         backgroundColor: '#1565c0',
@@ -172,9 +172,9 @@ const RegisterCustom = () => {
                     variant="contained"
                     sx={{
                       mt: 0.5,
-                      backgroundColor: '#1976d2',
+                      backgroundColor: '#0c489e',
                       color: '#FFFFFF',
-                      border: '1px solid #1976d2',
+                      border: '1px solid #0c489e',
                       boxShadow: 'none',
                       '&:hover': {
                         backgroundColor: '#1565c0',
diff --git a/src/pages/authentication/auth-forms/AuthLoginCustom.js b/src/pages/authentication/auth-forms/AuthLoginCustom.js
index 60054b4..ec1480a 100644
--- a/src/pages/authentication/auth-forms/AuthLoginCustom.js
+++ b/src/pages/authentication/auth-forms/AuthLoginCustom.js
@@ -369,7 +369,7 @@ const AuthLoginCustom = () => {
                     <Button disableElevation disabled={isButtonDisabled}
                       fullWidth size="large" type="submit" variant="contained" color="primary"
                       sx={{
-                        backgroundColor: "#1976d2",
+                        backgroundColor: "#0c489e",
                         color: "#FFFFFF",
                         "&:hover": { backgroundColor: "#1565c0" },
                         "&.Mui-disabled": {
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index 52daae6..3328954 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -1617,7 +1617,7 @@ const BusCustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
+                                                <Typography variant="h6" height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -1724,7 +1724,7 @@ const BusCustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#1976d2',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
                                                     '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
diff --git a/src/pages/authentication/auth-forms/CustomFormWizard.js b/src/pages/authentication/auth-forms/CustomFormWizard.js
index 3e6a58b..ef2c9a7 100644
--- a/src/pages/authentication/auth-forms/CustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/CustomFormWizard.js
@@ -1945,7 +1945,7 @@ const CustomFormWizard = (props) => {
                                     <Grid item xs={12} md={12}>
                                         <Grid container>
                                             <Grid item xs={12} md={12}>
-                                                <Typography height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
+                                                <Typography height="100%" sx={{ textAlign: "left", /*overflow: "scroll",*/ borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
                                                 <div style={{padding: 12}} dangerouslySetInnerHTML={{__html: intl.formatMessage({id: "termsAndCon"})}} />
                                                 </Typography>
                                             </Grid>
@@ -2052,7 +2052,7 @@ const CustomFormWizard = (props) => {
                                                 onClick={playCaptchaAudio}
                                                 aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                 sx={{
-                                                    backgroundColor: '#1976d2',
+                                                    backgroundColor: '#0c489e',
                                                     color: '#FFFFFF',
                                                     '&:hover': { backgroundColor: '#1565c0' },
                                                 }}
diff --git a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
index 1c68831..c6a0ff6 100644
--- a/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
+++ b/src/pages/authentication/auth-forms/IAmSmartFormWizard.js
@@ -1053,7 +1053,7 @@ const CustomFormWizard = (props) => {
                                         <Grid item xs={12} md={12}>
                                             <Grid container>
                                                 <Grid item xs={12} md={12}>
-                                                    <Typography sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#1976d2" }}>
+                                                    <Typography sx={{ textAlign: "left", borderRadius: "inherit", borderStyle: "solid", borderWidth: "1px", borderColor: "#0c489e" }}>
     
                                                         <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
                                                     </Typography>
@@ -1152,7 +1152,7 @@ const CustomFormWizard = (props) => {
                                                     onClick={playCaptchaAudio}
                                                     aria-label={intl.formatMessage({ id: "captchaPlayAudio" })}
                                                     sx={{
-                                                        backgroundColor: '#1976d2',
+                                                        backgroundColor: '#0c489e',
                                                         color: '#FFFFFF',
                                                         '&:hover': { backgroundColor: '#1565c0' },
                                                     }}
diff --git a/src/pages/components-overview/Color.js b/src/pages/components-overview/Color.js
index d64cc49..b0ab84b 100644
--- a/src/pages/components-overview/Color.js
+++ b/src/pages/components-overview/Color.js
@@ -68,7 +68,7 @@ const ComponentColor = () => (
             <ColorBox bgcolor="primary.200" data={{ label: 'Blue-3', color: '#91d5ff' }} title="primary[200]" dark />
             <ColorBox bgcolor="primary.light" data={{ label: 'Blue-4', color: '#69c0ff' }} title="primary.light" dark />
             <ColorBox bgcolor="primary.400" data={{ label: 'Blue-5', color: '#40a9ff' }} title="primary[400]" />
-            <ColorBox bgcolor="primary.main" data={{ label: 'Blue-6', color: '#1890ff' }} title="primary.main" main />
+            <ColorBox bgcolor="primary.main" data={{ label: 'Blue-6', color: '#0c489e' }} title="primary.main" main />
             <ColorBox bgcolor="primary.dark" data={{ label: 'Blue-7', color: '#096dd9' }} title="primary.dark" />
             <ColorBox bgcolor="primary.700" data={{ label: 'Blue-8', color: '#0050b3' }} title="primary[700]" />
             <ColorBox bgcolor="primary.darker" data={{ label: 'Blue-9', color: '#003a8c' }} title="primary.darker" />
diff --git a/src/pages/dashboard/GLD/index.js b/src/pages/dashboard/GLD/index.js
index 901e912..a85b3f5 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 #1976d2" }}>
+            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
               {getWelcomeMsg()}, {userData.fullenName}
             </Typography>
           </Stack>
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index 2655c4d..d5f9977 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -204,7 +204,7 @@ const DashboardDefault = () => {
                     p: 4,
                     justifyContent: "flex-start",
                     backgroundColor: "#e1edfc",
-                    border: "0px solid #1976d2",   // DARKER border (3:1+)
+                    border: "0px solid #0c489e",   // DARKER border (3:1+)
                     borderRadius: "10px",
                     color: "#1565C0",              // icon + default text color
                     "&:hover": {
diff --git a/src/pages/extra-pages/UserMenuPub1/index.js b/src/pages/extra-pages/UserMenuPub1/index.js
index 48060b7..dcee88b 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: "#1976d2",
+  backgroundColor: "#0c489e",
   backgroundPosition: "right",
 };
 
diff --git a/src/pages/pnspsUserGroupDetailPage/index.js b/src/pages/pnspsUserGroupDetailPage/index.js
index a917186..1920c3f 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 #1976d2" }}>{isNewRecord ? "Create User Group" : "Maintain User Group"}</Typography>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>{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 bb4f9ad..0dd09de 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 #1976d2" }}>
+                            <Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0c489e" }}>
                                 View User Group
                             </Typography>
                         </Stack>
diff --git a/src/themes/colorConst.js b/src/themes/colorConst.js
index 153f729..8ebc9ae 100644
--- a/src/themes/colorConst.js
+++ b/src/themes/colorConst.js
@@ -53,7 +53,7 @@ export const GENERAL_TEXT_COLOR ='#262626';
 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';
+export const CONTAINED_PRIMARY_BLUE = '#0c489e';
 
 /** Validation error text/border — matches FormHelperText in styles.css (e.g. "Please enter password"). WCAG AA on white. */
 export const VALIDATION_ERROR_COLOR = '#B00020';
diff --git a/src/themes/theme/index.js b/src/themes/theme/index.js
index 670cfef..b50288d 100644
--- a/src/themes/theme/index.js
+++ b/src/themes/theme/index.js
@@ -30,7 +30,7 @@ const Theme = (colors) => {
       200: blue[2],
       light: blue[3],
       400: blue[4],
-      main: blue[5],
+      main: '#0C489E',
       dark: blue[6],
       700: blue[7],
       darker: blue[8],
diff --git a/src/utils/statusUtils/PublicNoteStatusUtils.js b/src/utils/statusUtils/PublicNoteStatusUtils.js
index b53bcd5..dd9fd92 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: "#1976d2", text: "Reviewed" }) // unchanged
+            return getStatusTag({ color: "#0c489e", text: "Reviewed" }) // unchanged
         case "confirmed":
             if (creditor)
                 return getStatusTag({ color: "#217CBA", text: "Pending Publish" }) // was #3498DB