diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index 8a634ac..2b52da8 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -22,27 +22,14 @@ import { notifySaveSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
 import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
 import { ThemeProvider } from "@emotion/react";
-import { makeStyles } from '@mui/styles';
 import { isGrantedAny } from "auth/utils";
-// ==============================|| DASHBOARD - DEFAULT ||============================== //
-const useStyles = makeStyles(() => ({
-    root: {
-        position: "relative"
-    },
-    display: {
-        position: "absolute",
-        top: 2,
-        left: 12,
-        bottom: 2,
-        background: "white",
-        pointerEvents: "none",
-        right: 50,
-        display: "flex",
-        alignItems: "center",
-        width: "70%"
-    },
-}));
 
+import {DatePicker} from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import {DemoItem} from "@mui/x-date-pickers/internals/demo";
+import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
 const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const intl = useIntl();
     const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
@@ -53,10 +40,10 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     const [createMode, setCreateMode] = useState(false);
     const [onReady, setOnReady] = useState(false);
     const [errorMsg, setErrorMsg] = useState("");
-    const [minDate] = React.useState(new Date());
-    const [fromDate, setFromDate] = React.useState("dd / mm / yyyy");
-    const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
-    const { register, handleSubmit, reset } = useForm()
+    const [minDate] = React.useState(new Date().setDate(new Date().getDate() + 1));
+    const [fromDate, setFromDate] = React.useState(null);
+    const [fromDateValue, setFromDateValue] = React.useState(null);
+    const {register, handleSubmit, reset} = useForm()
 
     React.useEffect(() => {
         setFromDateValue(fromDate);
@@ -66,33 +53,15 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
-            setFromDate(currentUserData.brExpiryDate)
+            if(DateUtils.dateValue(currentUserData.brExpiryDate)>DateUtils.dateValue(minDate)){
+                setFromDate(currentUserData.brExpiryDate);
+            }else{
+                setErrorMsg("Please select a date after today.")
+            }
             setOnReady(true);
         }
     }, [currentUserData]);
 
-    function FormDateInputComponent({ inputRef, ...props }) {
-        const classes = useStyles();
-        return (
-            <>
-                <div className={classes.display}>
-                    {DateUtils.dateStr(fromDateValue) == "Invalid Date" ?
-                        fromDateValue
-                        :
-                        DateUtils.dateStr(fromDateValue)}
-                </div>
-                <input
-                    // className={classes.input}
-                    ref={inputRef}
-                    {...props}
-                    // onChange={handleChange}
-                    value={fromDateValue}
-                    min={minDate}
-                />
-            </>
-        );
-    }
-
     function displayErrorMsg(errorMsg) {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
@@ -140,47 +109,49 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                     setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
                 } else {
                     let sentDateFrom = "";
-                    if (fromDateValue != "dd / mm / yyyy") {
+                    if (fromDateValue == null) {
+                        setErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))
+                    }else{
                         sentDateFrom = DateUtils.dateValue(fromDateValue)
+                        HttpUtils.post({
+                            url: UrlUtils.POST_ORG_SAVE_PATH,
+                            params: {
+                                id: id > 0 ? id : null,
+                                enCompanyName: values.enCompanyName,
+                                chCompanyName: values.chCompanyName,
+                                orgShortName: values.creditor?values.orgShortName:"",
+                                brNo: values.brNo,
+                                // brExpiryDate: values.brExpiryDate,
+                                brExpiryDate: sentDateFrom,
+                                enCompanyNameTemp: values.enCompanyNameTemp,
+                                chCompanyNameTemp: values.chCompanyNameTemp,
+                                brExpiryDateTemp: values.brExpiryDateTemp,
+                                contactPerson: values.contactPerson,
+                                contactTel: {
+                                    countryCode: values.tel_countryCode,
+                                    phoneNumber: values.phoneNumber
+                                },
+                                faxNo: {
+                                    countryCode: values.fax_countryCode,
+                                    faxNumber: values.faxNumber
+                                },
+                                addressTemp: {
+                                    country: values.country.type,
+                                    district: values.district?.type,
+                                    addressLine1: values.addressLine1,
+                                    addressLine2: values.addressLine2,
+                                    addressLine3: values.addressLine3,
+                                },
+                                creditor: values.creditor,
+                            },
+                            onSuccess: function () {
+                                notifySaveSuccess()
+                                loadDataFun();
+                                setEditMode(false);
+                            }
+                        });
                     }
 
-                    HttpUtils.post({
-                        url: UrlUtils.POST_ORG_SAVE_PATH,
-                        params: {
-                            id: id > 0 ? id : null,
-                            enCompanyName: values.enCompanyName,
-                            chCompanyName: values.chCompanyName,
-                            orgShortName: values.creditor ? values.orgShortName : "",
-                            brNo: values.brNo,
-                            // brExpiryDate: values.brExpiryDate,
-                            brExpiryDate: sentDateFrom,
-                            enCompanyNameTemp: values.enCompanyNameTemp,
-                            chCompanyNameTemp: values.chCompanyNameTemp,
-                            brExpiryDateTemp: values.brExpiryDateTemp,
-                            contactPerson: values.contactPerson,
-                            contactTel: {
-                                countryCode: values.tel_countryCode,
-                                phoneNumber: values.phoneNumber
-                            },
-                            faxNo: {
-                                countryCode: values.fax_countryCode,
-                                faxNumber: values.faxNumber
-                            },
-                            addressTemp: {
-                                country: values.country.type,
-                                district: values.district?.type,
-                                addressLine1: values.addressLine1,
-                                addressLine2: values.addressLine2,
-                                addressLine3: values.addressLine3,
-                            },
-                            creditor: values.creditor,
-                        },
-                        onSuccess: function () {
-                            notifySaveSuccess()
-                            loadDataFun();
-                            setEditMode(false);
-                        }
-                    });
                 }
             }
         }
@@ -421,7 +392,35 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                     <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
                                 </Grid>
                                 <Grid item xs={12} md={6} lg={6}>
-                                    <TextField
+                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                        <DemoItem  components={['DatePicker']}>
+                                            <DatePicker
+                                                id="brExpiryDate"
+                                                name="brExpiryDate"
+                                                // onError={Boolean(formik.errors["brExpiryDate"])}
+                                                slotProps={{
+                                                    field: { readOnly: true, },
+                                                    textField: {
+                                                        helperText:fromDate == null ? intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }):""
+                                                    },
+                                                }}
+                                                format="DD/MM/YYYY"
+                                                // label={"Submit Date (From)"}
+                                                value={fromDate == null ? null : dayjs(fromDate)}
+                                                minDate={minDate == null ? null : dayjs(minDate)}
+                                                disabled={(!editMode && !createMode)}
+                                                onChange={(newValue) => {
+                                                    setErrorMsg("")
+                                                    if(DateUtils.dateValue(newValue)>DateUtils.dateValue(new Date())){
+                                                        setFromDate(newValue);
+                                                    }else{
+                                                        setErrorMsg("Please select a date after today.")
+                                                    }
+                                                }}
+                                            />
+                                        </DemoItem >
+                                    </LocalizationProvider>
+                                    {/* <TextField
                                         fullWidth
                                         id="brExpiryDate"
                                         type="date"
@@ -443,8 +442,8 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                             shrink: true
                                         }}
                                         disabled={(!editMode && !createMode)}
-                                        sx={{ "& .MuiInputBase-input": { display: "block", textIndent: "-9999px" } }}
-                                    />
+                                        sx={{ "& .MuiInputBase-input": {display:"block", textIndent: "-9999px"} }}
+                                    /> */}
                                 </Grid>
                             </Grid>
 
diff --git a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
index 067a74d..c420839 100644
--- a/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
+++ b/src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js
@@ -2,7 +2,8 @@
 import {
     Grid, Button, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
-    FormHelperText, TextField
+    FormHelperText, 
+    // TextField
 } from '@mui/material';
 import MainCard from "components/MainCard";
 import * as React from "react";
@@ -21,6 +22,11 @@ import { lazy } from 'react';
 import { notifyCreateSuccess } from 'utils/CommonFunction';
 import { useIntl } from "react-intl";
 
+import {DatePicker} from "@mui/x-date-pickers/DatePicker";
+import dayjs from "dayjs";
+import {DemoItem} from "@mui/x-date-pickers/internals/demo";
+import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
+import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -32,15 +38,28 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
     const [isFailPopUp, setIsFailPopUp] = useState(false);
     const [failText, setFailText] = useState("");
     const [errorMsg, setErrorMsg] = useState("");
+    const [minDate] = React.useState(new Date().setDate(new Date().getDate() + 1));
+    const [fromDate, setFromDate] = React.useState(null);
+    const [fromDateValue, setFromDateValue] = React.useState(null);
 
     useEffect(() => {
         //if state data are ready and assign to different field
         // console.log(currentApplicationDetailData)
         if (Object.keys(currentUserData).length > 0) {
+            if(DateUtils.dateValue(currentUserData.brExpiryDate)>DateUtils.dateValue(minDate)){
+                setFromDate(currentUserData.brExpiryDate);
+            }else{
+                setErrorMsg("Please select a date after today.")
+            }
+            // setFromDate(currentUserData.brExpiryDate)
             setOnReady(true);
         }
     }, [currentUserData]);
 
+    React.useEffect(() => {
+        setFromDateValue(fromDate);
+    }, [fromDate]);
+
     function displayErrorMsg(errorMsg) {
         return <Typography variant="errorMessage1">{errorMsg}</Typography>
     }
@@ -78,45 +97,52 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                 if (values.country.type == "hongKong" && values.district == null) {
                     setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
                 } else {
-                    HttpUtils.post({
-                        url: UrlUtils.POST_ORG_SAVE_PATH,
-                        params: {
-                            id: null,
-                            primaryUserId: userId,
-                            enCompanyName: values.enCompanyName,
-                            chCompanyName: values.chCompanyName,
-                            brNo: values.brNo,
-                            brExpiryDate: values.brExpiryDate,
-                            enCompanyNameTemp: values.enCompanyNameTemp,
-                            chCompanyNameTemp: values.chCompanyNameTemp,
-                            brExpiryDateTemp: values.brExpiryDateTemp,
-                            contactPerson: values.contactPerson,
-                            contactTel: {
-                                countryCode: values.tel_countryCode,
-                                phoneNumber: values.phoneNumber
+                    let sentDateFrom = "";
+                    if (fromDateValue == null) {
+                        setErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))
+                    }else{
+                        sentDateFrom = DateUtils.dateValue(fromDateValue)
+                        HttpUtils.post({
+                            url: UrlUtils.POST_ORG_SAVE_PATH,
+                            params: {
+                                id: null,
+                                primaryUserId: userId,
+                                enCompanyName: values.enCompanyName,
+                                chCompanyName: values.chCompanyName,
+                                brNo: values.brNo,
+                                brExpiryDate: sentDateFrom,
+                                enCompanyNameTemp: values.enCompanyNameTemp,
+                                chCompanyNameTemp: values.chCompanyNameTemp,
+                                brExpiryDateTemp: values.brExpiryDateTemp,
+                                contactPerson: values.contactPerson,
+                                contactTel: {
+                                    countryCode: values.tel_countryCode,
+                                    phoneNumber: values.phoneNumber
+                                },
+                                faxNo: {
+                                    countryCode: values.fax_countryCode,
+                                    faxNumber: values.faxNumber
+                                },
+                                addressTemp: {
+                                    country: values.country.type,
+                                    district: values.district?.type,
+                                    addressLine1: values.addressLine1,
+                                    addressLine2: values.addressLine2,
+                                    addressLine3: values.addressLine3,
+                                }
                             },
-                            faxNo: {
-                                countryCode: values.fax_countryCode,
-                                faxNumber: values.faxNumber
-                            },
-                            addressTemp: {
-                                country: values.country.type,
-                                district: values.district?.type,
-                                addressLine1: values.addressLine1,
-                                addressLine2: values.addressLine2,
-                                addressLine3: values.addressLine3,
-                            }
-                        },
-                        onSuccess: function (responseData) {
-                            if (responseData.msg) {
-                                setFailText(responseData.msg);
-                                setIsFailPopUp(true);
-                                return;
+                            onSuccess: function (responseData) {
+                                if (responseData.msg) {
+                                    setFailText(responseData.msg);
+                                    setIsFailPopUp(true);
+                                    return;
+                                }
+                                navigate('/org/' + responseData.id);
+                                notifyCreateSuccess()
                             }
-                            navigate('/org/' + responseData.id);
-                            notifyCreateSuccess()
-                        }
-                    });
+                        });
+                    }
+
                 }
             }
         }
@@ -207,7 +233,35 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                         <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
                                     </Grid>
                                     <Grid item xs={12} md={6} lg={6}>
-                                        <TextField
+                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                                            <DemoItem  components={['DatePicker']}>
+                                                <DatePicker
+                                                    id="brExpiryDate"
+                                                    name="brExpiryDate"
+                                                    // onError={Boolean(formik.errors["brExpiryDate"])}
+                                                    slotProps={{
+                                                        field: { readOnly: true, },
+                                                        // textField: {
+                                                        //     helperText:formik.errors["brExpiryDate"] ? formik.errors["brExpiryDate"] : ''
+                                                        // },
+                                                    }}
+                                                    format="DD/MM/YYYY"
+                                                    // label={"Submit Date (From)"}
+                                                    value={fromDate == null ? null : dayjs(fromDate)}
+                                                    minDate={minDate == null ? null : dayjs(minDate)}
+                                                    // disabled={(!editMode && !createMode)}
+                                                    onChange={(newValue) => {
+                                                        setErrorMsg("")
+                                                        if(DateUtils.dateValue(newValue)>DateUtils.dateValue(new Date())){
+                                                            setFromDate(newValue);
+                                                        }else{
+                                                            setErrorMsg("Please select a date after today.")
+                                                        }
+                                                    }}
+                                                />
+                                            </DemoItem >
+                                        </LocalizationProvider>
+                                        {/* <TextField
                                             fullWidth
                                             id="brExpiryDate"
                                             name="brExpiryDate"
@@ -220,7 +274,7 @@ const OrganizationCard_loadFromUser = ({ userData, userId }) => {
                                             sx={{
                                                 width: '100%'
                                             }}
-                                        />
+                                        /> */}
                                     </Grid>
                                 </Grid>