diff --git a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
index 8c4d14c..7cfd6e7 100644
--- a/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
+++ b/src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js
@@ -2,8 +2,8 @@
 import {
     Grid, TextField, Typography, Button
 } from '@mui/material';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+// import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import MainCard from "../../components/MainCard";
 import * as React from "react";
 import {useForm} from "react-hook-form";
@@ -12,6 +12,7 @@ import * as DateUtils from '../../utils/DateUtils';
 import * as HttpUtils from '../../utils/HttpUtils';
 import * as UrlUtils from "../../utils/ApiPathConst";
 import {useNavigate} from "react-router-dom";
+import { useFormik } from 'formik';
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -20,10 +21,49 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
 
     const [currentUserData, setCurrentUserData] = useState(userData);
     const form = useForm({defaultValues: userData});
-    const {register,reset, handleSubmit} = form;
+    const {register,reset} = form;
 
     const navigate = useNavigate();
 
+    const formik = useFormik({
+        enableReinitialize:true,
+        initialValues:currentUserData,
+        onSubmit: values =>{
+            HttpUtils.post({
+                url: UrlUtils.POST_ORG_SAVE_PATH,
+                params: {
+                    id:id>0?id:null,
+                    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
+                    },
+                    faxNo: {
+                        countryCode: values.fax_countryCode,
+                        faxNumber: values.faxNumber
+                    },
+                    addressTemp: {
+                        country: values.country,
+                        district: values.district,
+                        addressLine1: values.addressLine1,
+                        addressLine2: values.addressLine2,
+                        addressLine3: values.addressLine3,             
+                    }
+                },
+                onSuccess: function(responseData){
+                    navigate('/org/'+responseData.id);
+                }
+            });
+        }
+    });
+
     useEffect(() => {
         if(id>0){
             userData["country"] = userData.addressTemp?.country;
@@ -54,42 +94,57 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
     useEffect(() => {
         reset(currentUserData);
     }, [currentUserData]);
+    
+    const getTextField=(label, key, form)=>{
+        return <Grid item lg={4} >
+            <Grid container alignItems={"center"}>
+                <Grid item xs={4} s={4} md={4} lg={4}
+                        sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                    {label}
+                </Grid>
+                <Grid item xs={7} s={7} md={7} lg={6}>
+                <TextField
+                        fullWidth
+                        id={key}
+                        name={key}
+                        type="text"
+                        onChange={form.handleChange}
+                        value={form.values[key]}
+                    />
+                </Grid>
+            </Grid>
+        </Grid>;
+    }
 
-
-    const onSubmitForm=(_formData)=>{
-        console.log(_formData);
-        HttpUtils.post({
-            url: UrlUtils.POST_ORG_SAVE_PATH,
-            params: {
-                id:id>0?id:null,
-                enCompanyName: _formData.enCompanyName,
-                chCompanyName: _formData.chCompanyName,
-                brNo: _formData.brNo,
-                brExpiryDate: _formData.brExpiryDate,
-                enCompanyNameTemp: _formData.enCompanyNameTemp,
-                chCompanyNameTemp: _formData.chCompanyNameTemp,
-                brExpiryDateTemp: _formData.brExpiryDateTemp,
-                contactPerson: _formData.contactPerson,
-                contactTel: {
-                    countryCode: _formData.tel_countryCode,
-                    phoneNumber: _formData.phoneNumber
-                },
-                faxNo: {
-                    countryCode: _formData.fax_countryCode,
-                    faxNumber: _formData.faxNumber
-                },
-                addressTemp: {
-                    country: _formData.country,
-                    district: _formData.district,
-                    addressLine1: _formData.addressLine1,
-                    addressLine2: _formData.addressLine2,
-                    addressLine3: _formData.addressLine3,             
-                }
-            },
-            onSuccess: function(responseData){
-                navigate('/org/'+responseData.id);
-            }
-        });
+    const getPhoneField=(label, key, key2, form)=>{
+        return <Grid item lg={4}>
+        <Grid container alignItems={"center"}>
+            <Grid item xs={4} s={4} md={4} lg={4}
+                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
+                {label}
+            </Grid>
+            <Grid item xs={2}>
+                <TextField
+                    fullWidth
+                    id={key}
+                    name={key}
+                    type="number"
+                    onChange={form.handleChange}
+                    value={form.values[key]}
+                />
+            </Grid>
+            <Grid item xs={4}>
+                <TextField
+                    fullWidth
+                    id={key2}
+                    name={key2}
+                    type="number"
+                    onChange={form.handleChange}
+                    value={form.values[key2]}
+                />
+            </Grid>
+        </Grid>
+    </Grid>;
     }
 
     return (
@@ -101,7 +156,7 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
                     Information
                 </Typography>
 
-                <form onSubmit={handleSubmit(onSubmitForm)}>
+                <form onSubmit={formik.handleSubmit}>
 
                 <Grid container spacing={1}>
                       {/*bottom top*/}
@@ -124,196 +179,18 @@ const OrganizationCard_loadFromUser = ({userData, id}) => {
                 
            </Grid>
            {/*bottom top*/}
-                    <Grid item lg={4} >
-                        <Grid container alignItems={"center"}>
-                            <Grid item xs={4} s={4} md={4} lg={4}
-                                    sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                BR No.:
-                            </Grid>
-
-                            <Grid item xs={7} s={7} md={7} lg={6}>
-                                <TextField
-                                    fullWidth
-                                    id='brNo'
-                                    inputProps={{ maxLength: 8 }}
-                                    
-                                    {...register("brNo")}
-                                />
-                            </Grid>
-                        </Grid>
-                    </Grid>
-                    <Grid item lg={8} >
-                    </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Name (Eng):
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("enCompanyName")}
-                                        id='enCompanyName'
-                                        
-                                        inputProps={{ maxLength: 150 }}
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Name (Ch):
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("chCompanyName")}
-                                        id='chCompanyName'
-                                        inputProps={{ maxLength: 150 }}
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Expiry Date:
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                <LocalizationProvider fullWidth dateAdapter={AdapterDayjs}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("brExpiryDate")}
-                                        id='brExpiryDate'
-                                    />
-                                    </LocalizationProvider>
-                                </Grid>
-                                
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Contact Person:
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("contactPerson")}
-                                        id='contactPerson'
-                                        
-                                        inputProps={{ maxLength: 150 }}
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4}>
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Contact Tel:
-                                </Grid>
-                                <Grid item xs={2}>
-                                    <TextField
-                                        fullWidth
-                                        type="number"
-                                        defaultValue="852"
-                                        {...register("tel_countryCode")}
-                                        id='tel_countryCode'
-                                        
-                                    />
-                                </Grid>
-                                <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        type="tel"
-                                        inputProps={{ maxLength: 20 }}
-                                        {...register("phoneNumber")}
-                                        id='phoneNumber'
-                                        
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4}>
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Fax No:
-                                </Grid>
-                                <Grid item xs={2}>
-                                    <TextField
-                                        fullWidth
-                                        type="number"
-                                        defaultValue="852"
-                                        {...register("fax_countryCode")}
-                                        id='fax_countryCode'
-                                        
-                                    />
-                                </Grid>
-                                <Grid item xs={4}>
-                                    <TextField
-                                        fullWidth
-                                        inputProps={{ maxLength: 20 }}
-                                        type="number"
-                                        {...register("faxNumber")}
-                                        id='faxNumber'
-                                        
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    Country :
-                                </Grid>
 
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("country")}
-                                        id='country'
-                                        
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item lg={4} >
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    District :
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("district")}
-                                        id='district'
-                                        
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
+                    {getTextField("BR No.:","brNo",formik)}
+                    <Grid item lg={8}></Grid>
+                    {getTextField("Name (Eng):","enCompanyName",formik)}
+                    {getTextField("Name (Ch):","chCompanyName",formik)}
+                    {getTextField("Expiry Date:","brExpiryDate",formik)} {/* TODO: date field */}
+                    {getTextField("Contact Person:","contactPerson",formik)}
+                    {getPhoneField("Contact Tel:","tel_countryCode", "phoneNumber",formik)}
+                    {getPhoneField("Fax No.:","fax_countryCode", "faxNumber",formik)}
+                    {getTextField("Country:","country",formik)}
+                    {getTextField("District :","district", formik)}
+                    {getTextField("Expiry Date:","brExpiryDate",formik)}
 
                         <Grid item lg={4} >
                             <Grid container alignItems={"top"}>
diff --git a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
index 969599a..c0d867c 100644
--- a/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
+++ b/src/pages/pnspsUserDetailPage_Organization/UserInformationCard_Organization.js
@@ -36,7 +36,6 @@ const UserInformationCard_Organization = ({userData, loadDataFun}) => {
     const formik = useFormik({
         initialValues:(currentUserData),
         validationSchema:yup.object().shape({
-           
             enName: yup.string().max(255).required('請輸入英文姓名'),
             enCompanyName: yup.string().max(255).required('請輸入英文名稱'),
             chName: yup.string().max(255).required('請輸入中文姓名'),