diff --git a/src/pages/DemandNote/Search_Public/DataGrid.js b/src/pages/DemandNote/Search_Public/DataGrid.js
index 2a3f080..76dd4f5 100644
--- a/src/pages/DemandNote/Search_Public/DataGrid.js
+++ b/src/pages/DemandNote/Search_Public/DataGrid.js
@@ -51,7 +51,7 @@ export default function SearchDemandNote({ recordList }) {
             headerName: '狀態',
             width: 175,
             renderCell: (params) => {
-                return [StatusUtils.getStatus_Eng(params)]
+                return [StatusUtils.getStatus_Cht(params)]
             },
         },
         {
diff --git a/src/pages/Organization/DetailPage/CreditorHistoryTable.js b/src/pages/Organization/DetailPage/CreditorHistoryTable.js
new file mode 100644
index 0000000..ae2b301
--- /dev/null
+++ b/src/pages/Organization/DetailPage/CreditorHistoryTable.js
@@ -0,0 +1,53 @@
+// material-ui
+import * as React from 'react';
+import { FiDataGrid } from "components/FiDataGrid";
+import { useEffect } from "react";
+import * as DateUtils from "utils/DateUtils";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function CreditorHistoryTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const columns = [
+        {
+            id: 'actionType',
+            field: 'actionType',
+            headerName: 'Action',
+            flex: 2
+        },
+        {
+            id: 'modified',
+            field: 'modified',
+            headerName: 'Datetime',
+            flex: 1,
+            renderCell: (params) => {
+                return DateUtils.datetimeStr(params.value);
+            }
+        },
+        {
+            id: 'modifiedByName',
+            field: 'modifiedByName',
+            headerName: 'Modified By',
+            width: 200,
+        },
+        
+    ];
+
+    return (
+        <div style={{ height: "fit-content", width: '100%' }}>
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 100 },
+                    },
+                }}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/Organization/DetailPage/OrganizationCard.js b/src/pages/Organization/DetailPage/OrganizationCard.js
index 15527aa..1b9c582 100644
--- a/src/pages/Organization/DetailPage/OrganizationCard.js
+++ b/src/pages/Organization/DetailPage/OrganizationCard.js
@@ -1,6 +1,7 @@
 // material-ui
 import {
-    Grid, Button, Checkbox, FormControlLabel, Typography
+    Grid, Button, Checkbox, FormControlLabel, Typography,
+    Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
 import MainCard from "../../../components/MainCard";
@@ -22,6 +23,9 @@ import { notifySaveSuccess } from 'utils/CommonFunction';
 
 const OrganizationCard = ({ userData, loadDataFun, id }) => {
 
+    const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
+    const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);
+
     const [currentUserData, setCurrentUserData] = useState({});
     const [editMode, setEditMode] = useState(false);
     const [createMode, setCreateMode] = useState(false);
@@ -93,7 +97,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                         addressLine2: vaule.addressLine2,
                         addressLine3: vaule.addressLine3,
                     },
-                    creditor: vaule.creditor,
+                    //creditor: vaule.creditor,
                 },
                 onSuccess: function () {
                     notifySaveSuccess()
@@ -125,6 +129,26 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
         setEditMode(true);
     };
 
+    const markAsCreditor = () => {
+        setCreditorConfirmPopUp(false);
+        HttpUtils.get({
+            url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
+            onSuccess: () => {
+                loadDataFun();
+            }
+        });
+    }
+
+    const markAsNonCreditor = () => {
+        setNonCreditorConfirmPopUp(false);
+        HttpUtils.get({
+            url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
+            onSuccess: () => {
+                loadDataFun();
+            }
+        });
+    }
+
     return (
         <MainCard elevation={0}
             border={false}
@@ -201,6 +225,34 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                         <Typography variant="h5">Edit</Typography>
                                     </Button>
                                 </Grid>
+                                <Grid item sx={{ ml: 3, mr: 3 }}>
+                                    <Button
+                                        size="large"
+                                        variant="contained"
+                                        color="orange"
+                                        onClick={()=>setCreditorConfirmPopUp(true)}
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end'
+                                        }}
+                                    >
+                                        <Typography variant="h5">Mark as Creditor</Typography>
+                                    </Button>
+                                </Grid>
+                                <Grid item sx={{ ml: 3, mr: 3 }}>
+                                    <Button
+                                        size="large"
+                                        variant="contained"
+                                        color="error"
+                                        onClick={()=>setNonCreditorConfirmPopUp(true)}
+                                        sx={{
+                                            textTransform: 'capitalize',
+                                            alignItems: 'end'
+                                        }}
+                                    >
+                                        <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                    </Button>
+                                </Grid>
                             </>
                         }
                     </Grid>
@@ -212,7 +264,7 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     :
                     <Grid container spacing={1}>
                         <Grid item xs={12}>
-                            <Typography variant="h4" sx={{mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                            <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                                 Organisation Details
                             </Typography>
                         </Grid>
@@ -233,7 +285,8 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                                 onChange={() => {
                                     formik.setFieldValue("creditor", !formik.values.creditor);
                                 }}
-                                disabled={!editMode && !createMode}
+                                disabled={true}
+                            //disabled={!editMode && !createMode}
                             />
                         </Grid>
 
@@ -334,6 +387,30 @@ const OrganizationCard = ({ userData, loadDataFun, id }) => {
                     </Grid>
                 }
             </form>
+            <div>
+                <Dialog open={creditorConfirmPopUp} onClose={() => setCreditorConfirmPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cencel</Typography></Button>
+                        <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+            <div>
+                <Dialog open={nonCreditorConfirmPopUp} onClose={() => setNonCreditorConfirmPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                    <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cencel</Typography></Button>
+                        <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
         </MainCard>
     );
 };
diff --git a/src/pages/Organization/DetailPage/index.js b/src/pages/Organization/DetailPage/index.js
index ad864a9..849b6a8 100644
--- a/src/pages/Organization/DetailPage/index.js
+++ b/src/pages/Organization/DetailPage/index.js
@@ -1,18 +1,17 @@
 // material-ui
 import { Grid, Typography, Stack, Box, Button } from '@mui/material';
-import { useEffect, useState } from "react";
 import * as React from "react";
-import * as HttpUtils from "../../../utils/HttpUtils";
-import { useParams } from "react-router-dom";
-import * as UrlUtils from "../../../utils/ApiPathConst";
-import * as DateUtils from "../../../utils/DateUtils";
+import * as HttpUtils from "utils/HttpUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
-import { lazy } from 'react';
-const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
-const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
+const InfoCard = Loadable(React.lazy(() => import('./OrganizationCard')));
+const Table = Loadable(React.lazy(() => import('./CreditorHistoryTable')));
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+
 import ForwardIcon from '@mui/icons-material/Forward';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
 const BackgroundHead = {
@@ -30,11 +29,12 @@ const BackgroundHead = {
 
 const OrganizationDetailPage = () => {
     const params = useParams();
-    const [formData, setFormData] = useState({})
-    const [isLoading, setLoding] = useState(true);
+    const [formData, setFormData] = React.useState({})
+    const [list, setList] = React.useState([])
+    const [isLoading, setLoding] = React.useState(true);
     const navigate = useNavigate();
 
-    useEffect(() => {
+    React.useEffect(() => {
         console.log(formData);
         loadData();
     }, []);
@@ -59,13 +59,14 @@ const OrganizationDetailPage = () => {
 
                     response.data["brExpiryDate"] = response.data.brExpiryDate ? DateUtils.dateStr(response.data.brExpiryDate) : "";
                     setFormData(response.data)
+                    setList(response.historyList)
                 }
             });
         }
     };
 
 
-    useEffect(() => {
+    React.useEffect(() => {
         setLoding(false);
     }, [formData]);
 
@@ -99,6 +100,19 @@ const OrganizationDetailPage = () => {
                             </Box>
                             <br />
                         </Grid>
+                        <Grid item xs={12} md={12} lg={12}>
+                            <Box xs={12} ml={0} mt={-1} mr={0} sx={{ pl:4, pr:4, pb:2 }}>
+                                <Grid container sx={{ p: 3, backgroundColor: "#FFF",  borderRadius: '10px' }}>
+                                    <Grid item xs={12} sx={{ p:1 }}>
+                                        <Table
+                                            sx={{ p: 1 }}
+                                            recordList={list}
+                                        >
+                                        </Table>
+                                    </Grid>
+                                </Grid>
+                            </Box>
+                        </Grid>
                     </Grid>
                 </Grid>
                 {/*col 2*/}
diff --git a/src/pages/Organization/SearchPage/OrganizationSearchForm.js b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
index 3f03328..5c1f317 100644
--- a/src/pages/Organization/SearchPage/OrganizationSearchForm.js
+++ b/src/pages/Organization/SearchPage/OrganizationSearchForm.js
@@ -3,17 +3,18 @@ import {
     Button,
     CardContent,
     Grid, TextField,
-    Typography
+    Typography,
+    Checkbox, FormControlLabel,
 } from '@mui/material';
 import MainCard from "../../../components/MainCard";
-import {useForm} from "react-hook-form";
+import { useForm } from "react-hook-form";
 
-import { useState} from "react";
+import { useState } from "react";
 import * as React from "react";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const OrganizationSearchForm = ({applySearch}) => {
+const OrganizationSearchForm = ({ applySearch }) => {
 
     const [type, setType] = useState([]);
 
@@ -22,7 +23,7 @@ const OrganizationSearchForm = ({applySearch}) => {
 
         let typeArray = [];
 
-        for(let i =0; i < type.length; i++){
+        for (let i = 0; i < type.length; i++) {
             typeArray.push(type[i].label);
         }
 
@@ -30,19 +31,20 @@ const OrganizationSearchForm = ({applySearch}) => {
             brNo: data.brNo,
             enCompanyName: data.enCompanyName,
             chCompanyName: data.chCompanyName,
+            searchCreditor: data.searchCreditor
         };
         applySearch(temp);
     };
 
-    function resetForm(){
+    function resetForm() {
         setType([]);
         reset();
     }
 
     return (
         <MainCard xs={12} md={12} lg={12}
-                  border={false}
-                  content={false}>
+            border={false}
+            content={false}>
 
             <form onSubmit={handleSubmit(onSubmit)}>
                 {/*row 1*/}
@@ -54,7 +56,7 @@ const OrganizationSearchForm = ({applySearch}) => {
 
                 {/*row 2*/}
                 <Grid container alignItems={"center"}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("brNo")}
@@ -66,7 +68,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("enCompanyName")}
@@ -78,7 +80,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                         <TextField
                             fullWidth
                             {...register("chCompanyName")}
@@ -90,13 +92,22 @@ const OrganizationSearchForm = ({applySearch}) => {
                         />
                     </Grid>
 
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3}}>
+                        <FormControlLabel
+                            {...register("searchCreditor")}
+                            control={<Checkbox/>}
+                            label="Search Creditor Only"
+                            id="    "
+                        />
+                    </Grid>
+
                 </Grid>
 
 
                 {/*last row*/}
                 <Grid container maxWidth justifyContent="flex-end">
 
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -109,7 +120,7 @@ const OrganizationSearchForm = ({applySearch}) => {
                         </Button>
                     </Grid>
 
-                    <Grid item sx={{ml:3, mr:3, mb:3, mt:3}}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
                         <Button
                             size="large"
                             variant="contained"
@@ -121,6 +132,8 @@ const OrganizationSearchForm = ({applySearch}) => {
                             <Typography variant="h5">Submit</Typography>
                         </Button>
                     </Grid>
+                    
+
                 </Grid>
             </form>
         </MainCard>
diff --git a/src/pages/Organization/SearchPage/OrganizationTable.js b/src/pages/Organization/SearchPage/OrganizationTable.js
index 4dd7420..73de8a0 100644
--- a/src/pages/Organization/SearchPage/OrganizationTable.js
+++ b/src/pages/Organization/SearchPage/OrganizationTable.js
@@ -76,12 +76,21 @@ export default function OrganizationTable({ recordList }) {
         {
             id: 'brExpiryDate',
             field: 'brExpiryDate',
-            headerName: 'Expiry Date',
+            headerName: 'BR Expiry Date',
             flex: 1,
             valueGetter: (params) => {
                 return DateUtils.dateStr(params?.value);
             }
         },
+        {
+            id: 'creditor',
+            field: 'creditor',
+            headerName: 'Creditor',
+            width: 100,
+            valueGetter: (params) => {
+                return params?.value?"Yes":"";
+            }
+        },
     ];
 
     function handleRowDoubleClick(params) {
diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js
index 4f9fd6e..5e4c319 100644
--- a/src/utils/ApiPathConst.js
+++ b/src/utils/ApiPathConst.js
@@ -26,6 +26,9 @@ export const GET_ORG_PATH = apiPath+'/org';
 export const GET_ORG_FROM_USER_PATH = apiPath+'/org/from-user';
 export const POST_ORG_SAVE_PATH = apiPath+'/org/save';
 export const GET_ORG_COMBO = apiPath+'/org/combo';
+export const GET_ORG_CHECK_CREDITOR = apiPath+'/org/check-creditor';
+export const GET_ORG_MARK_AS_CREDITOR = apiPath+'/org/mark-as-creditor';
+export const GET_ORG_MARK_AS_NON_CREDITOR = apiPath+'/org/mark-as-non-creditor';