diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index 273b2eb..e951994 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -8,6 +8,7 @@ import {
 import MainCard from "components/MainCard";
 import * as React from "react";
 import { useFormik } from 'formik';
+import { useForm } from "react-hook-form";
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
 import * as DateUtils from 'utils/DateUtils';
@@ -56,6 +57,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
     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()
 
     React.useEffect(() => {
         setFromDateValue(fromDate);
@@ -110,6 +112,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         validationSchema: yup.object().shape({
             enCompanyName: yup.string().max(255, getMaxErrStr(255)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
             chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))).nullable(),
+            orgShortName: yup.string().max(24,getMaxErrStr(24)).required(getRequiredErrStr("Please enter ORG Short Name")),
             addressLine1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
             addressLine2: yup.string().max(40, getMaxErrStr(40)),
             addressLine3: yup.string().max(40, getMaxErrStr(40)),
@@ -148,6 +151,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                             id: id > 0 ? id : null,
                             enCompanyName: values.enCompanyName,
                             chCompanyName: values.chCompanyName,
+                            orgShortName: values.creditor?values.orgShortName:"",
                             brNo: values.brNo,
                             // brExpiryDate: values.brExpiryDate,
                             brExpiryDate: sentDateFrom,
@@ -170,7 +174,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 addressLine2: values.addressLine2,
                                 addressLine3: values.addressLine3,
                             },
-                            //creditor: values.creditor,
+                            creditor: values.creditor,
                         },
                         onSuccess: function () {
                             notifySaveSuccess()
@@ -208,11 +212,35 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         setEditMode(true);
     };
 
-    const markAsCreditor = () => {
+    const onSubmit = (data) => {
+        let sentOrgShortName = "";
+        if(data.orgShortName!=null && data.orgShortName!=""){
+            sentOrgShortName = data.orgShortName 
+            if (sentOrgShortName.length <=12){
+                const temp = {
+                    orgShortName: sentOrgShortName,
+                };
+                markAsCreditor(temp);
+            }else{
+                alert("ORG Short Name Must not exceed 12 characters.")
+            }
+        }else{
+            alert("Please enter ORG Short Name.")
+        }
+
+    };
+
+    function resetForm() {
+        reset();
+    }
+
+    const markAsCreditor = (temp) => {
         setCreditorConfirmPopUp(false);
-        HttpUtils.get({
+        HttpUtils.post({
             url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
+            params: temp,
             onSuccess: () => {
+                resetForm();
                 loadDataFun();
             }
         });
@@ -473,6 +501,19 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 form: formik
                             })}
                         </Grid>
+                        {
+                            currentUserData.creditor ?
+                                <Grid item xs={12} lg={4} >
+                                    {FieldUtils.getTextField({
+                                        label: FieldUtils.notNullFieldLabel("Org Short Name:"),
+                                        valueName: "orgShortName",
+                                        disabled: (!editMode && !createMode),
+                                        form: formik
+                                    })}
+                                </Grid>
+                            :
+                                null
+                        }
 
 
                         <Grid item xs={12} lg={12} >
@@ -501,14 +542,38 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         }
                     }}
                 >
-                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
-                    <DialogContent style={{ display: 'flex', }}>
-                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Credit Client?</Typography>
-                    </DialogContent>
-                    <DialogActions>
-                        <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
-                        <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
-                    </DialogActions>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Grid container direction="column">
+                                <Grid item>
+                                    <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Credit Client?</Typography>
+                                </Grid>
+                                <Grid item>
+                                    <Typography variant="h6" style={{ padding: '16px' }}>Please Enter ORG Short Name for Credit Client</Typography>
+                                </Grid>
+                                <Grid item>
+                                    <TextField
+                                        fullWidth
+                                        style={{ padding: '16px' }}
+                                        {...register("orgShortName")}
+                                        id='orgShortName'
+                                        label="ORG Short Form"
+                                        defaultValue={currentUserData.orgShortName}
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                </Grid>
+                            </Grid>
+
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                            <Button type="submit"><Typography variant="h5">Confirm</Typography></Button>
+                            {/* <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button> */}
+                        </DialogActions>
+                    </form>
                 </Dialog>
             </div>
             <div>