diff --git a/src/components/AdminLogo/index.js b/src/components/AdminLogo/index.js
index bcc0d89..8a75781 100644
--- a/src/components/AdminLogo/index.js
+++ b/src/components/AdminLogo/index.js
@@ -11,6 +11,9 @@ import Logo from './AdminLogo';
 import config from 'config';
 import { activeItem } from 'store/reducers/menu';
 import { Stack } from '@mui/material';
+import {
+  checkSysEnv
+} from "utils/Utils";
 
 // ==============================|| MAIN LOGO ||============================== //
 
@@ -28,7 +31,7 @@ const LogoSection = ({ sx, to }) => {
         >
           <Logo />
         </ButtonBase>
-        <span id="systemTitle" >PNSPS</span>
+        <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="systemTitle">PNSPS</span>
     </Stack>
 
   );
diff --git a/src/components/SysSettingProvider.js b/src/components/SysSettingProvider.js
index 94ee8af..ac7dbbc 100644
--- a/src/components/SysSettingProvider.js
+++ b/src/components/SysSettingProvider.js
@@ -18,7 +18,9 @@ const SysSettingProvider = ({ children }) => {
         get({
             url: GET_SYS_SETTING,
             onSuccess: (responseData) => {
+                // console.log(responseData)
                 setSysSetting(responseData);
+                localStorage.setItem('sysEnv', responseData.sysEnv)
             }
         });
     }
diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js
index 4ccef9a..81ef09e 100644
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@@ -51,6 +51,7 @@ import {
   isPasswordExpiry,
   haveOrgPaymentRecord,
   isORGLoggedIn,
+  checkSysEnv
   // getUserId
 } from "utils/Utils";
 import { handleLogoutFunction } from 'auth/index';
@@ -536,7 +537,7 @@ function Header(props) {
         </Typography> */}
         <Box sx={{ mr: 2, mt: 1, display: { md: 'none' } }}>
           <MobileLogo />
-          <span id="mobileTitle" >PNSPS</span>
+          <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="mobileTitle" >PNSPS</span>
         </Box>
         <Divider />
         <ul id="sidebartop">
@@ -555,7 +556,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 id="mobileTitle" >PNSPS</span>
+          <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="mobileTitle" >PNSPS</span>
         </Box>
         <Divider />
         <ul id="logoutContent">
@@ -596,7 +597,7 @@ function Header(props) {
                   <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                     <MobileLogo />
                     <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                      <span id="mobileTitle">PNSPS</span>
+                      <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="mobileTitle">PNSPS</span>
                     </Stack>
                     <Stack justifyContent="flex-end" alignItems="center">
                       <span style={{color:"#B11B1B",fontWeight:'bold',fontSize:'15px'}}>RESTRICTED</span>
@@ -617,7 +618,7 @@ function Header(props) {
                     <Stack justifyContent="flex-start" alignItems="center">
                       {/*<span id="systemTitle">公共啟事提交</span>*/}
                       {/*<span id="systemTitle">及繳費系統</span>*/}
-                      <span id="systemTitle">
+                      <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}}  id="systemTitle">
                         <FormattedMessage id="PNSPS" />
                       </span>
                     </Stack>
@@ -636,7 +637,7 @@ function Header(props) {
                   <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                     <MobileLogo />
                     <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                      <span id="mobileTitle">
+                      <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="mobileTitle">
                         <FormattedMessage id="PNSPS" />
                       </span>
                     </Stack>
@@ -735,7 +736,7 @@ function Header(props) {
                 <Stack direction="row" justifyContent="space-between" alignItems="center" width="100%">
                   <MobileLogo />
                   <Stack justifyContent="flex-start" alignItems="flex-start" width="100%" ml={2}>
-                    <span id="mobileTitle">
+                    <span style={{ color: checkSysEnv()!=''?'red':'#0C489E'}} id="mobileTitle">
                       <FormattedMessage id="PNSPS" />
                     </span>
                   </Stack>
diff --git a/src/pages/authentication/AuthWrapper.js b/src/pages/authentication/AuthWrapper.js
index 7a1e0af..95c1e37 100644
--- a/src/pages/authentication/AuthWrapper.js
+++ b/src/pages/authentication/AuthWrapper.js
@@ -22,6 +22,9 @@ const BackgroundHead = {
   height: '100%',
   backgroundSize:'cover'
 }
+import {
+  checkSysEnv
+} from "utils/Utils";
 
 // ==============================|| AUTHENTICATION - WRAPPER ||============================== //
 
@@ -54,6 +57,13 @@ const AuthWrapper = ({ children }) => (
               <Typography style={{textAlign: "center",fontSize: "1.8rem"}}>
                 <FormattedMessage id="PNSPS_fullname"/>
               </Typography>
+              {
+                checkSysEnv()!=''?
+                  <Typography style={{color: 'red',textAlign: "center",fontSize: "1.8rem"}}>
+                    User Acceptance Test Environment
+                  </Typography>
+                :""
+              }
             </Grid>
             <Grid
               item
diff --git a/src/utils/HttpUtils.js b/src/utils/HttpUtils.js
index dba6ad0..a64e599 100644
--- a/src/utils/HttpUtils.js
+++ b/src/utils/HttpUtils.js
@@ -7,7 +7,7 @@ export const get = ({ url, params, onSuccess, onFail, onError }) => {
     }).then(
         (response) => { onResponse(response, onSuccess, onFail); }
     ).catch((error) => {
-        console.log(error);
+        // console.log(error);
         return handleError(error, onError);
     });
 };
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
index 66211bc..795711f 100644
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -99,6 +99,12 @@ export const haveOrgPaymentRecord = () =>{
     if (localStorage.getItem('userData') != null){
         return JSON.parse(localStorage.getItem('userData')).orgPaymentRecord
     }
+}
+export const checkSysEnv = () =>{
+    if (localStorage.getItem('sysEnv') != null){
+        console.log(localStorage.getItem('sysEnv'))
+        return localStorage.getItem('sysEnv')
+    }
 } 
 /**
  ** This function is used for demo purpose route navigation