diff --git a/src/pages/transfer/transferfee/blocks/AddDialog.tsx b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
index f6a736e..13469dc 100644
--- a/src/pages/transfer/transferfee/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/AddDialog.tsx
@@ -90,6 +90,10 @@ const AddFeeDialog = () => {
     id: customer.id,
     name: customer.username
   }));
+
+  const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
+  const [openCreditDestination, setOpenCreditDestination] = useState(false);
+
   const [errors, setErrors] = useState<Record<string, string>>({});
   const initialState = {
     name: '',
@@ -120,6 +124,16 @@ const AddFeeDialog = () => {
     setTransactionTypeName('');
   };
 
+  const handleCloseDialog = () => {
+    setFormField(initialState);
+    setAlert({ show: false, message: '' });
+    setCustomerSearchTerm('');
+    setOpenCreditDestination(false);
+    setOpenDeductOrigin(false);
+    setOpen(false);
+    handleEditFeeDialog(false, null);
+  };
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showTransactionFeeDialog, setShowTransactionFeeDialog] = useState(false);
   const parsedUser = getAuth()?.user;
@@ -376,7 +390,15 @@ const AddFeeDialog = () => {
   };
 
   return (
-    <Dialog open={showAddFeeDialog} onOpenChange={(open) => handleAddFeeDialog(open)}>
+    <Dialog
+      open={showAddFeeDialog}
+      onOpenChange={(open) => {
+        if (!open) {
+        handleAddFeeDialog(open);
+        handleCloseDialog();
+        }
+      }}
+    >
       <DialogContent className="container-fixed max-w-[1080px] flex flex-col p-5 overflow-hidden [&>button]:hidden">
         <DialogTitle></DialogTitle>
         <DialogDescription></DialogDescription>
@@ -595,16 +617,15 @@ const AddFeeDialog = () => {
                     <div className="relative">
                       <div
                         className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                        onClick={() => setOpen(!open)}
+                        onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
                       >
                         <span className="truncate">
                           {customers.find((customer) => customer.id === formField.deduct_origin)
                             ?.username || 'Search customer...'}
                         </span>
-                        <path d="m6 9 6 6 6-6"></path>
                       </div>
 
-                      {open && (
+                      {openDeductOrigin && (
                         <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
                           <div className="sticky top-0 bg-white p-2 border-b">
                             <Input
@@ -632,11 +653,8 @@ const AddFeeDialog = () => {
                                   key={customer.id}
                                   className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
                                   onClick={() => {
-                                    setFormField({
-                                      ...formField,
-                                      deduct_origin: customer.id
-                                    });
-                                    setOpen(false);
+                                    setFormField({ ...formField, deduct_origin: customer.id });
+                                    setOpenDeductOrigin(false);
                                   }}
                                 >
                                   {customer.username}
@@ -706,17 +724,16 @@ const AddFeeDialog = () => {
                     <div className="relative">
                       <div
                         className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                        onClick={() => setOpen(!open)}
+                        onClick={() => setOpenCreditDestination(!openCreditDestination)}
                       >
                         <span className="truncate">
                           {customers.find(
                             (customer) => customer.id === formField.credit_destination
                           )?.username || 'Search customer...'}
                         </span>
-                        <path d="m6 9 6 6 6-6"></path>
                       </div>
 
-                      {open && (
+                      {openCreditDestination && (
                         <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
                           <div className="sticky top-0 bg-white p-2 border-b">
                             <Input
@@ -748,7 +765,7 @@ const AddFeeDialog = () => {
                                       ...formField,
                                       credit_destination: customer.id
                                     });
-                                    setOpen(false);
+                                    setOpenCreditDestination(false);
                                   }}
                                 >
                                   {customer.username}
diff --git a/src/pages/transfer/transferfee/blocks/EditDialog.tsx b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
index 1999404..eef2dca 100644
--- a/src/pages/transfer/transferfee/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transferfee/blocks/EditDialog.tsx
@@ -1,4 +1,3 @@
-
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import {
@@ -62,6 +61,8 @@ const EditFeeDialog = () => {
   const { reload } = useDataGrid();
   const { GetData, PutData } = useCallApi();
   const parsedUser = getAuth()?.user;
+  const [openDeductOrigin, setOpenDeductOrigin] = useState(false);
+  const [openCreditDestination, setOpenCreditDestination] = useState(false);
 
   const [wallets, setWallets] = useState<WalletProps[]>([]);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
@@ -326,7 +327,8 @@ const EditFeeDialog = () => {
             status_include: response.data.status_include || '',
             deduct_from: response.data.deduct_from || '',
             deduct_from_account: response.data.deduct_from_account?.id || '',
-            deduct_origin: response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
+            deduct_origin:
+              response.data.deduct_origin?.id || '00000000-0000-0000-0000-000000000000',
             credit_to: response.data.credit_to || '',
             credit_destination:
               response.data.credit_destination?.id || '00000000-0000-0000-0000-000000000000',
@@ -361,22 +363,24 @@ const EditFeeDialog = () => {
       hasFetchedRef.current = false;
     }
   }, [selectedTransferFee, showEditFeeDialog, fetchTransactionFee]);
-  
+
   const handleCloseDialog = () => {
     setFormField(initialState);
     setAlert({ show: false, message: '' });
     setCustomerSearchTerm('');
+    setOpenCreditDestination(false);
+    setOpenDeductOrigin(false);
     setOpen(false);
     handleEditFeeDialog(false, null);
   };
-  
+
   useEffect(() => {
     if (!showEditFeeDialog) {
       setCustomerSearchTerm('');
       setOpen(false);
     }
   }, [showEditFeeDialog]);
-  
+
   const renderSelectWithLoading = (
     value: string,
     onChangeHandler: (value: string) => void,
@@ -645,78 +649,68 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-                  {formField.deduct_from === 'I' && (
-                    <div className="w-full">
-                      <label className="form-label">
-                        Deduct Origin <span className="text-red-500">*</span>
-                      </label>
-                      <div className="relative">
-                        <div
-                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                          onClick={() => setOpen(!open)}
-                        >
-                          <span className="truncate">
-                            {customers.find((customer) => customer.id === formField.deduct_origin)
-                              ?.username || 'Search customer...'}
-                          </span>
-                          <path d="m6 9 6 6 6-6"></path>
-                        </div>
+{formField.deduct_from === 'I' && (
+  <div className="w-full">
+    <label className="form-label">
+      Deduct Origin <span className="text-red-500">*</span>
+    </label>
+    <div className="relative">
+      <div
+        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        onClick={() => setOpenDeductOrigin(!openDeductOrigin)}
+      >
+        <span className="truncate">
+          {customers.find((customer) => customer.id === formField.deduct_origin)?.username || 'Search customer...'}
+        </span>
+      </div>
+
+      {openDeductOrigin && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="sticky top-0 bg-white p-2 border-b">
+            <Input
+              className="h-8 text-sm"
+              type="text"
+              placeholder="Search customer..."
+              value={customerSearchTerm}
+              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+              autoComplete="off"
+              onClick={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+          <div>
+            {customers
+              .filter(
+                (customer) =>
+                  customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+                  customer.msisdn.includes(customerSearchTerm)
+              )
+              .map((customer) => (
+                <div
+                  key={customer.id}
+                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                  onClick={() => {
+                    setFormField({ ...formField, deduct_origin: customer.id });
+                    setOpenDeductOrigin(false);
+                  }}
+                >
+                  {customer.username}
+                </div>
+              ))}
+            {customers.filter(
+              (customer) =>
+                customer.username.toLowerCase().includes(customerSearchTerm.toLowerCase()) ||
+                customer.msisdn.includes(customerSearchTerm)
+            ).length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)}
 
-                        {open && (
-                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-                            <div className="sticky top-0 bg-white p-2 border-b">
-                              <Input
-                                className="h-8 text-sm"
-                                type="text"
-                                placeholder="Search customer..."
-                                value={customerSearchTerm}
-                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
-                                autoComplete="off"
-                                onClick={(e) => e.stopPropagation()}
-                                autoFocus
-                              />
-                            </div>
-                            <div>
-                              {customers
-                                .filter(
-                                  (customer) =>
-                                    customer.username
-                                      .toLowerCase()
-                                      .includes(customerSearchTerm.toLowerCase()) ||
-                                    customer.msisdn.includes(customerSearchTerm)
-                                )
-                                .map((customer) => (
-                                  <div
-                                    key={customer.id}
-                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                                    onClick={() => {
-                                      setFormField({
-                                        ...formField,
-                                        deduct_origin: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </div>
-                                ))}
-                              {customers.filter(
-                                (customer) =>
-                                  customer.username
-                                    .toLowerCase()
-                                    .includes(customerSearchTerm.toLowerCase()) ||
-                                  customer.msisdn.includes(customerSearchTerm)
-                              ).length === 0 && (
-                                <div className="px-3 py-2 text-sm text-gray-500">
-                                  No customer found
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
 
                   <div className="w-full">
                     <label className="form-label">
@@ -756,79 +750,76 @@ const EditFeeDialog = () => {
                     </Select>
                   </div>
 
-                  {formField.credit_to === 'I' && (
-                    <div className="w-full">
-                      <label className="form-label">
-                        Credit Destination <span className="text-red-500">*</span>
-                      </label>
-                      <div className="relative">
-                        <div
-                          className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
-                          onClick={() => setOpen(!open)}
-                        >
-                          <span className="truncate">
-                            {customers.find(
-                              (customer) => customer.id === formField.credit_destination
-                            )?.username || 'Search customer...'}
-                          </span>
-                          <path d="m6 9 6 6 6-6"></path>
-                        </div>
+{formField.credit_to === 'I' && (
+  <div className="w-full">
+    <label className="form-label">
+      Credit Destination <span className="text-red-500">*</span>
+    </label>
+    <div className="relative">
+      <div
+        className="flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+        onClick={() => setOpenCreditDestination(!openCreditDestination)}
+      >
+        <span className="truncate">
+          {customers.find((customer) => customer.id === formField.credit_destination)
+            ?.username || 'Search customer...'}
+        </span>
+      </div>
+
+      {openCreditDestination && (
+        <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
+          <div className="sticky top-0 bg-white p-2 border-b">
+            <Input
+              className="h-8 text-sm"
+              type="text"
+              placeholder="Search customer..."
+              value={customerSearchTerm}
+              onChange={(e) => setCustomerSearchTerm(e.target.value)}
+              autoComplete="off"
+              onClick={(e) => e.stopPropagation()}
+              autoFocus
+            />
+          </div>
+          <div>
+            {customers
+              .filter(
+                (customer) =>
+                  customer.username
+                    .toLowerCase()
+                    .includes(customerSearchTerm.toLowerCase()) ||
+                  customer.msisdn.includes(customerSearchTerm)
+              )
+              .map((customer) => (
+                <div
+                  key={customer.id}
+                  className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
+                  onClick={() => {
+                    setFormField({
+                      ...formField,
+                      credit_destination: customer.id
+                    });
+                    setOpenCreditDestination(false);
+                  }}
+                >
+                  {customer.username}
+                </div>
+              ))}
+            {customers.filter(
+              (customer) =>
+                customer.username
+                  .toLowerCase()
+                  .includes(customerSearchTerm.toLowerCase()) ||
+                customer.msisdn.includes(customerSearchTerm)
+            ).length === 0 && (
+              <div className="px-3 py-2 text-sm text-gray-500">No customer found</div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  </div>
+)}
 
-                        {open && (
-                          <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-52 overflow-auto rounded-md border border-gray-200 bg-white shadow-lg">
-                            <div className="sticky top-0 bg-white p-2 border-b">
-                              <Input
-                                className="h-8 text-sm"
-                                type="text"
-                                placeholder="Search customer..."
-                                value={customerSearchTerm}
-                                onChange={(e) => setCustomerSearchTerm(e.target.value)}
-                                autoComplete="off"
-                                onClick={(e) => e.stopPropagation()}
-                                autoFocus
-                              />
-                            </div>
-                            <div>
-                              {customers
-                                .filter(
-                                  (customer) =>
-                                    customer.username
-                                      .toLowerCase()
-                                      .includes(customerSearchTerm.toLowerCase()) ||
-                                    customer.msisdn.includes(customerSearchTerm)
-                                )
-                                .map((customer) => (
-                                  <div
-                                    key={customer.id}
-                                    className="cursor-pointer px-3 py-1.5 text-sm hover:bg-gray-100"
-                                    onClick={() => {
-                                      setFormField({
-                                        ...formField,
-                                        credit_destination: customer.id
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    {customer.username}
-                                  </div>
-                                ))}
-                              {customers.filter(
-                                (customer) =>
-                                  customer.username
-                                    .toLowerCase()
-                                    .includes(customerSearchTerm.toLowerCase()) ||
-                                  customer.msisdn.includes(customerSearchTerm)
-                              ).length === 0 && (
-                                <div className="px-3 py-2 text-sm text-gray-500">
-                                  No customer found
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
 
                   <div className="w-full">
                     <label className="form-label">