diff --git a/src/pages/extra-pages/DatabaseHealthCheck/index.js b/src/pages/extra-pages/DatabaseHealthCheck/index.js
new file mode 100644
index 0000000..dbd12ff
--- /dev/null
+++ b/src/pages/extra-pages/DatabaseHealthCheck/index.js
@@ -0,0 +1,79 @@
+import { Grid, Typography, Stack, } from '@mui/material';
+import { useState, useEffect, lazy } from "react";
+
+import Loadable from 'components/Loadable';
+// import { useIntl, FormattedMessage } from "react-intl";
+import { get } from "utils/HttpUtils"
+import {GET_SYS_SETTING} from "utils/ApiPathConst"
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: 'auto',
+    height: 'auto',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+// import DownloadIcon from '@mui/icons-material/Download';
+
+const DatabaseHealthCheck = () => {
+    // const intl = useIntl();
+    // const { locale } = intl;
+    const [onReady, setOnReady] = useState(false);
+    const [sysEnv, setSysEnv] = useState("");
+
+    useEffect(() => {
+        loadSysSetting();
+    }, []);
+
+    // useEffect(() => {
+    //     setOnReady(true);
+    // }, [locale]);
+
+    const loadSysSetting = () => {
+        get({
+            url: GET_SYS_SETTING,
+            onSuccess: (responseData) => {
+                // console.log(responseData)
+                setSysEnv(responseData.sysEnv);
+                setOnReady(true);
+            }
+        });
+    }
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            (
+                <Grid container sx={{ minHeight: '87vh', mb: 3}} direction="column" alignItems="center" >
+                    <Grid item xs={12} md={12} width="100%">
+                        <div style={BackgroundHead}>
+                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block'} }}>
+                                    Database Health Check
+                                </Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    <Grid container justifyContent="center" alignItems="center" >
+                        <Grid item xs={12} md={12} ml={15}>
+                            <div>{sysEnv}</div> Connection OK
+                        </Grid>
+                    </Grid>
+                </Grid>
+            )
+    );
+
+}
+
+export default DatabaseHealthCheck;
\ No newline at end of file
diff --git a/src/routes/LoginRoutes.js b/src/routes/LoginRoutes.js
index 65b776d..790a421 100644
--- a/src/routes/LoginRoutes.js
+++ b/src/routes/LoginRoutes.js
@@ -17,6 +17,7 @@ const ImportantNoticePage = Loadable(lazy(() => import('pages/extra-pages/Import
 const AboutUsPage = Loadable(lazy(() => import('pages/extra-pages/AboutUs')));
 const UserMenuPage = Loadable(lazy(() => import('pages/extra-pages/UserMenu')));
 const UserMenuPubPage = Loadable(lazy(() => import('pages/extra-pages/UserMenuPub')));
+const DatabaseHealthCheckPage = Loadable(lazy(() => import('pages/extra-pages/DatabaseHealthCheck')));
 
 
 const ForgotPassword = Loadable(lazy(() => import('pages/authentication/ForgotPassword')));
@@ -91,6 +92,10 @@ const LoginRoutes = {
       path: 'userGuidePub',
       element: <UserMenuPubPage/>
     },
+    {
+      path: 'databaseHealthCheck',
+      element: <DatabaseHealthCheckPage/>
+    },
     {
       path: 'iamsmart/logincallback',
       element: <IAmSmart_DirectLoginCallback/>