diff --git a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
index 10d8390..a090d18 100644
--- a/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
+++ b/src/pages/transfer/transferfee/hooks/ManageTransferFeeContext.tsx
@@ -363,8 +363,8 @@ const ManageTransferFeeContextProvider = ({
 
   return (
     <div className="container mx-auto py-5">
-      <div className="flex justify-between items-center mt-6">
-        <h1 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h1>
+      <div className="flex items-center mb-5 px-5">
+        <h2 className="text-xl font-semibold text-gray-900">Manage Transaction Fee</h2>
       </div>
       <ManageTransferFeeContext.Provider
         value={{
diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
index 1458819..e164a1b 100644
--- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx
@@ -64,7 +64,7 @@ const AddDialog = () => {
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const { reload } = useDataGrid();
   const { PostData, PutData } = useCallApi();
-  
+
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   const initialState = {
@@ -164,11 +164,12 @@ const AddDialog = () => {
           toast.error(response?.message || 'Failed to create transfer type');
           return false;
         }
-      } catch (error) {
+      } catch (error: any) {
         toast.error(
-          error instanceof Error
-            ? error.message
-            : 'An error occurred while creating transfer type'
+          error?.response?.data?.message ||
+            (error instanceof Error
+              ? error.message
+              : 'An error occurred while creating transfer type')
         );
         return false;
       }
@@ -203,8 +204,9 @@ const AddDialog = () => {
           order_direction: sorting[0].desc ? 'DESC' : 'ASC'
         });
         setCustomers(response?.data.list);
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching customer', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch customer data');
       }
     };
 
@@ -284,7 +286,9 @@ const AddDialog = () => {
                           }
                         }}
                       />
-                      {errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
+                      {errors.name && (
+                        <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -308,7 +312,9 @@ const AddDialog = () => {
                           }
                         }}
                       />
-                      {errors.description && <span className="text-red-500 text-xs mt-1">{errors.description}</span>}
+                      {errors.description && (
+                        <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -408,7 +414,9 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
-                      {errors.wallet_origin && <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>}
+                      {errors.wallet_origin && (
+                        <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -427,7 +435,9 @@ const AddDialog = () => {
                           setErrors((prev) => ({ ...prev, wallet_destination: '' }));
                         }}
                       >
-                        <SelectTrigger className={errors.wallet_destination ? 'border-red-500' : ''}>
+                        <SelectTrigger
+                          className={errors.wallet_destination ? 'border-red-500' : ''}
+                        >
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
@@ -438,7 +448,11 @@ const AddDialog = () => {
                           ))}
                         </SelectContent>
                       </Select>
-                      {errors.wallet_destination && <span className="text-red-500 text-xs mt-1">{errors.wallet_destination}</span>}
+                      {errors.wallet_destination && (
+                        <span className="text-red-500 text-xs mt-1">
+                          {errors.wallet_destination}
+                        </span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -485,7 +499,9 @@ const AddDialog = () => {
                           <SelectItem value="DN">Donation</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
+                      {errors.type && (
+                        <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -512,7 +528,9 @@ const AddDialog = () => {
                           <SelectItem value="N">No</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.status_approval && <span className="text-red-500 text-xs mt-1">{errors.status_approval}</span>}
+                      {errors.status_approval && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status_approval}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -543,7 +561,9 @@ const AddDialog = () => {
                           <SelectItem value="N">Top Up Patner</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.status_kind && <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>}
+                      {errors.status_kind && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -571,7 +591,9 @@ const AddDialog = () => {
                           <SelectItem value="N">Inactive</SelectItem>
                         </SelectContent>
                       </Select>
-                      {errors.status && <span className="text-red-500 text-xs mt-1">{errors.status}</span>}
+                      {errors.status && (
+                        <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                      )}
                     </div>
                   </div>
                 </div>
@@ -599,4 +621,4 @@ const AddDialog = () => {
   );
 };
 
-export default AddDialog;
\ No newline at end of file
+export default AddDialog;
diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 4a18331..1fd1936 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -234,8 +234,10 @@ const EditDialog = () => {
         toast.error(response?.message || 'Failed to update transfer type');
         return false;
       }
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : 'Failed to Update Transfer Type');
+    } catch (error: any) {
+      toast.error(
+        error?.response?.data?.message || error.message || 'Failed to Update Transfer Type'
+      );
       return false;
     }
   }, [formField, selectedTransferType]);
@@ -257,8 +259,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setCustomers(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching customer', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch customer data');
       }
     };
 
@@ -281,8 +284,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setGroups(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching groups', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch groups');
       }
     };
 
@@ -305,8 +309,9 @@ const EditDialog = () => {
         if (response?.status && response?.data) {
           setWallets(response.data.list);
         }
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching wallets', error);
+        toast.error(error?.response?.data?.message || 'Failed to fetch wallets');
       }
     };
 
@@ -353,8 +358,9 @@ const EditDialog = () => {
           }));
         }
         // console.log(response);
-      } catch (error) {
+      } catch (error: any) {
         console.error('Error fetching transaction type', error);
+        toast.error(error?.response?.data?.message || 'Failed to load transaction type data');
         setAlert({
           show: true,
           message: 'Failed to load transaction type data'
@@ -454,400 +460,407 @@ const EditDialog = () => {
                 <p className="mt-4 text-gray-500 text-center">Loading transaction type data...</p>
               </div>
             ) : (
-              <form action="" onSubmit={handleSubmit}>
-                <div className="card-body grid gap-5 p-0">
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Transfer Type Name
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Input
-                          className={`input ${errors.name ? 'border-red-500' : ''}`}
-                          type="text"
-                          autoComplete="off"
-                          value={formField.name}
-                          onChange={({ target }) => {
-                            setFormField((prev) => ({ ...prev, name: target.value }));
-                            if (target.value) {
-                              setErrors((prev) => ({ ...prev, name: '' }));
-                            }
-                          }}
-                        />
-                        {errors.name && (
-                          <span className="text-red-500 text-xs mt-1">{errors.name}</span>
-                        )}
+              <div>
+                <form action="" onSubmit={handleSubmit}>
+                  <div className="card-body grid gap-5 p-0">
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Transfer Type Name
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Input
+                            className={`input ${errors.name ? 'border-red-500' : ''}`}
+                            type="text"
+                            autoComplete="off"
+                            value={formField.name}
+                            onChange={({ target }) => {
+                              setFormField((prev) => ({ ...prev, name: target.value }));
+                              if (target.value) {
+                                setErrors((prev) => ({ ...prev, name: '' }));
+                              }
+                            }}
+                          />
+                          {errors.name && (
+                            <span className="text-red-500 text-xs mt-1">{errors.name}</span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Description
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Input
-                          className={`input ${errors.description ? 'border-red-500' : ''}`}
-                          type="text"
-                          autoComplete="off"
-                          value={formField.description}
-                          onChange={({ target }) => {
-                            setFormField((prev) => ({ ...prev, description: target.value }));
-                            if (target.value) {
-                              setErrors((prev) => ({ ...prev, description: '' }));
-                            }
-                          }}
-                        />
-                        {errors.description && (
-                          <span className="text-red-500 text-xs mt-1">{errors.description}</span>
-                        )}
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Description
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Input
+                            className={`input ${errors.description ? 'border-red-500' : ''}`}
+                            type="text"
+                            autoComplete="off"
+                            value={formField.description}
+                            onChange={({ target }) => {
+                              setFormField((prev) => ({ ...prev, description: target.value }));
+                              if (target.value) {
+                                setErrors((prev) => ({ ...prev, description: '' }));
+                              }
+                            }}
+                          />
+                          {errors.description && (
+                            <span className="text-red-500 text-xs mt-1">{errors.description}</span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Minimum Amount
-                      </label>
-                      <div className="grow">
-                        <NumericFormat
-                          className="input"
-                          value={formField.minimum_amount}
-                          thousandSeparator="."
-                          decimalSeparator=","
-                          allowNegative={false}
-                          onValueChange={(values) => {
-                            setFormField((prev) => ({
-                              ...prev,
-                              minimum_amount: values.floatValue || 0
-                            }));
-                          }}
-                          placeholder="Enter Minimum Amount"
-                        />
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Minimum Amount
+                        </label>
+                        <div className="grow">
+                          <NumericFormat
+                            className="input"
+                            value={formField.minimum_amount}
+                            thousandSeparator="."
+                            decimalSeparator=","
+                            allowNegative={false}
+                            onValueChange={(values) => {
+                              setFormField((prev) => ({
+                                ...prev,
+                                minimum_amount: values.floatValue || 0
+                              }));
+                            }}
+                            placeholder="Enter Minimum Amount"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Maximum Amount
-                      </label>
-                      <div className="grow">
-                        <NumericFormat
-                          className="input"
-                          value={formField.maximum_amount}
-                          thousandSeparator="."
-                          decimalSeparator=","
-                          allowNegative={false}
-                          onValueChange={(values) => {
-                            setFormField((prev) => ({
-                              ...prev,
-                              maximum_amount: values.floatValue || 0
-                            }));
-                          }}
-                          placeholder="Enter Maximum Amount"
-                        />
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Maximum Amount
+                        </label>
+                        <div className="grow">
+                          <NumericFormat
+                            className="input"
+                            value={formField.maximum_amount}
+                            thousandSeparator="."
+                            decimalSeparator=","
+                            allowNegative={false}
+                            onValueChange={(values) => {
+                              setFormField((prev) => ({
+                                ...prev,
+                                maximum_amount: values.floatValue || 0
+                              }));
+                            }}
+                            placeholder="Enter Maximum Amount"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Max Transaction per day
-                      </label>
-                      <div className="grow">
-                        <NumericFormat
-                          className="input"
-                          value={formField.max_transaction_per_day}
-                          thousandSeparator="."
-                          decimalSeparator=","
-                          allowNegative={false}
-                          onValueChange={(values) => {
-                            setFormField((prev) => ({
-                              ...prev,
-                              max_transaction_per_day: values.floatValue || 0
-                            }));
-                          }}
-                          placeholder="Enter Max Transaction Per Day"
-                        />
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Max Transaction per day
+                        </label>
+                        <div className="grow">
+                          <NumericFormat
+                            className="input"
+                            value={formField.max_transaction_per_day}
+                            thousandSeparator="."
+                            decimalSeparator=","
+                            allowNegative={false}
+                            onValueChange={(values) => {
+                              setFormField((prev) => ({
+                                ...prev,
+                                max_transaction_per_day: values.floatValue || 0
+                              }));
+                            }}
+                            placeholder="Enter Max Transaction Per Day"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        From Account
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        {renderSelectWithLoading(
-                          formField.wallet_origin,
-                          (value) => setFormField({ ...formField, wallet_origin: value }),
-                          wallets,
-                          'Select Wallet',
-                          isLoadingWallets
-                        )}
-                        {errors.wallet_origin && (
-                          <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
-                        )}
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          From Account
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          {renderSelectWithLoading(
+                            formField.wallet_origin,
+                            (value) => setFormField({ ...formField, wallet_origin: value }),
+                            wallets,
+                            'Select Wallet',
+                            isLoadingWallets
+                          )}
+                          {errors.wallet_origin && (
+                            <span className="text-red-500 text-xs mt-1">
+                              {errors.wallet_origin}
+                            </span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        To Account
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.wallet_destination}
-                          onValueChange={(wallet_destination) => {
-                            setFormField((prev) => ({ ...prev, wallet_destination }));
-                            setErrors((prev) => ({ ...prev, wallet_destination: '' }));
-                          }}
-                        >
-                          <SelectTrigger
-                            className={errors.wallet_destination ? 'border-red-500' : ''}
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          To Account
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Select
+                            value={formField.wallet_destination}
+                            onValueChange={(wallet_destination) => {
+                              setFormField((prev) => ({ ...prev, wallet_destination }));
+                              setErrors((prev) => ({ ...prev, wallet_destination: '' }));
+                            }}
                           >
-                            <SelectValue placeholder="Select Wallet" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {wallets.map((wallet) => (
-                              <SelectItem value={wallet.id} key={wallet.id}>
-                                {wallet.name}
+                            <SelectTrigger
+                              className={errors.wallet_destination ? 'border-red-500' : ''}
+                            >
+                              <SelectValue placeholder="Select Wallet" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {wallets.map((wallet) => (
+                                <SelectItem value={wallet.id} key={wallet.id}>
+                                  {wallet.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {errors.wallet_destination && (
+                            <span className="text-red-500 text-xs mt-1">
+                              {errors.wallet_destination}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Status Transaction Type
+                          <span className="text-red-500"> *</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Select
+                            value={formField.type}
+                            onValueChange={(value) => {
+                              setFormField((prev) => ({ ...prev, type: value }));
+                              setErrors((prev) => ({ ...prev, type: '' }));
+                            }}
+                          >
+                            <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="D">Disbursement </SelectItem>
+                              <SelectItem value="O">Other </SelectItem>
+                              <SelectItem value="CA">
+                                Change Group Emoney Customer to Agent{' '}
                               </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        {errors.wallet_destination && (
-                          <span className="text-red-500 text-xs mt-1">
-                            {errors.wallet_destination}
-                          </span>
-                        )}
+                              <SelectItem value="AC">
+                                Change Group Emoney Agent to Customer{' '}
+                              </SelectItem>
+                              <SelectItem value="PA">
+                                Change Group Point Agent to Customer{' '}
+                              </SelectItem>
+                              <SelectItem value="PC">
+                                Change Group Point Customer to Agent
+                              </SelectItem>
+                              <SelectItem value="CE">Return Customer Emoney </SelectItem>
+                              <SelectItem value="AD">Return Agent Deposit </SelectItem>
+                              <SelectItem value="AM">Return Agent Merchant </SelectItem>
+                              <SelectItem value="AE">Return Agent Emoney </SelectItem>
+                              <SelectItem value="R">Reward Point </SelectItem>
+                              <SelectItem value="TE">Top Up Escrow </SelectItem>
+                              <SelectItem value="TM">Top Up Master Agent </SelectItem>
+                              <SelectItem value="TA">Top Up Agent </SelectItem>
+                              <SelectItem value="PL">Purchase Loja</SelectItem>
+                              <SelectItem value="DE">Disbursment Escrow</SelectItem>
+                              <SelectItem value="DM">Disbursment Master Agent</SelectItem>
+                              <SelectItem value="DA">Disbursment Agent</SelectItem>
+                              <SelectItem value="WI">Withdraw Merchant</SelectItem>
+                              <SelectItem value="IC">Income Merchant</SelectItem>
+                              <SelectItem value="DN">Donation</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          {errors.type && (
+                            <span className="text-red-500 text-xs mt-1">{errors.type}</span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Status Transaction Type
-                        <span className="text-red-500"> *</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.type}
-                          onValueChange={(value) => {
-                            setFormField((prev) => ({ ...prev, type: value }));
-                            setErrors((prev) => ({ ...prev, type: '' }));
-                          }}
-                        >
-                          <SelectTrigger className={errors.type ? 'border-red-500' : ''}>
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="D">Disbursement </SelectItem>
-                            <SelectItem value="O">Other </SelectItem>
-                            <SelectItem value="CA">
-                              Change Group Emoney Customer to Agent{' '}
-                            </SelectItem>
-                            <SelectItem value="AC">
-                              Change Group Emoney Agent to Customer{' '}
-                            </SelectItem>
-                            <SelectItem value="PA">
-                              Change Group Point Agent to Customer{' '}
-                            </SelectItem>
-                            <SelectItem value="PC">Change Group Point Customer to Agent</SelectItem>
-                            <SelectItem value="CE">Return Customer Emoney </SelectItem>
-                            <SelectItem value="AD">Return Agent Deposit </SelectItem>
-                            <SelectItem value="AM">Return Agent Merchant </SelectItem>
-                            <SelectItem value="AE">Return Agent Emoney </SelectItem>
-                            <SelectItem value="R">Reward Point </SelectItem>
-                            <SelectItem value="TE">Top Up Escrow </SelectItem>
-                            <SelectItem value="TM">Top Up Master Agent </SelectItem>
-                            <SelectItem value="TA">Top Up Agent </SelectItem>
-                            <SelectItem value="PL">Purchase Loja</SelectItem>
-                            <SelectItem value="DE">Disbursment Escrow</SelectItem>
-                            <SelectItem value="DM">Disbursment Master Agent</SelectItem>
-                            <SelectItem value="DA">Disbursment Agent</SelectItem>
-                            <SelectItem value="WI">Withdraw Merchant</SelectItem>
-                            <SelectItem value="IC">Income Merchant</SelectItem>
-                            <SelectItem value="DN">Donation</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        {errors.type && (
-                          <span className="text-red-500 text-xs mt-1">{errors.type}</span>
-                        )}
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Status Approval
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Select
+                            value={formField.status_approval}
+                            onValueChange={(value) => {
+                              setFormField((prev) => ({ ...prev, status_approval: value }));
+                              setErrors((prev) => ({ ...prev, status_approval: '' }));
+                            }}
+                          >
+                            <SelectTrigger
+                              className={errors.status_approval ? 'border-red-500' : ''}
+                            >
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Y">Yes</SelectItem>
+                              <SelectItem value="N">No</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          {errors.status_approval && (
+                            <span className="text-red-500 text-xs mt-1">
+                              {errors.status_approval}
+                            </span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Status Kind
+                          <span className="text-red-500">*</span>
+                        </label>
 
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Status Approval
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.status_approval}
-                          onValueChange={(value) => {
-                            setFormField((prev) => ({ ...prev, status_approval: value }));
-                            setErrors((prev) => ({ ...prev, status_approval: '' }));
-                          }}
-                        >
-                          <SelectTrigger className={errors.status_approval ? 'border-red-500' : ''}>
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="Y">Yes</SelectItem>
-                            <SelectItem value="N">No</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        {errors.status_approval && (
-                          <span className="text-red-500 text-xs mt-1">
-                            {errors.status_approval}
-                          </span>
-                        )}
+                        <div className="grow flex flex-col">
+                          <Select
+                            value={formField.status_kind}
+                            onValueChange={(value) => {
+                              setFormField((prev) => ({ ...prev, status_kind: value }));
+                              setErrors((prev) => ({ ...prev, status_kind: '' }));
+                            }}
+                          >
+                            <SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}>
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="R">Return</SelectItem>
+                              <SelectItem value="T">Transfer</SelectItem>
+                              <SelectItem value="P">Purchase</SelectItem>
+                              <SelectItem value="W">Withdraw</SelectItem>
+                              <SelectItem value="U">Top Up</SelectItem>
+                              <SelectItem value="N">Top Up Patner</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          {errors.status_kind && (
+                            <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Status
+                          <span className="text-red-500"> *</span>
+                        </label>
+                        <div className="grow flex flex-col">
+                          <Select
+                            value={formField.status}
+                            onValueChange={(value) => {
+                              setFormField((prev) => ({ ...prev, status: value }));
+                              setErrors((prev) => ({ ...prev, status: '' }));
+                            }}
+                          >
+                            <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
+                              <SelectValue placeholder="Select" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Y">Active</SelectItem>
+                              <SelectItem value="N">Inactive</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          {errors.status && (
+                            <span className="text-red-500 text-xs mt-1">{errors.status}</span>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Status Kind
-                        <span className="text-red-500">*</span>
-                      </label>
 
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.status_kind}
-                          onValueChange={(value) => {
-                            setFormField((prev) => ({ ...prev, status_kind: value }));
-                            setErrors((prev) => ({ ...prev, status_kind: '' }));
-                          }}
-                        >
-                          <SelectTrigger className={errors.status_kind ? 'border-red-500' : ''}>
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="R">Return</SelectItem>
-                            <SelectItem value="T">Transfer</SelectItem>
-                            <SelectItem value="P">Purchase</SelectItem>
-                            <SelectItem value="W">Withdraw</SelectItem>
-                            <SelectItem value="U">Top Up</SelectItem>
-                            <SelectItem value="N">Top Up Patner</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        {errors.status_kind && (
-                          <span className="text-red-500 text-xs mt-1">{errors.status_kind}</span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Status
-                        <span className="text-red-500"> *</span>
-                      </label>
-                      <div className="grow flex flex-col">
-                        <Select
-                          value={formField.status}
-                          onValueChange={(value) => {
-                            setFormField((prev) => ({ ...prev, status: value }));
-                            setErrors((prev) => ({ ...prev, status: '' }));
-                          }}
-                        >
-                          <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
-                            <SelectValue placeholder="Select" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="Y">Active</SelectItem>
-                            <SelectItem value="N">Inactive</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        {errors.status && (
-                          <span className="text-red-500 text-xs mt-1">{errors.status}</span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="w-full">
-                    <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                      <label className="form-label flex items-center gap-1 max-w-56">
-                        Groups
-                        <span className="text-red-500">*</span>
-                      </label>
-                      <div className="relative w-full">
-                        <Input
-                          type="text"
-                          placeholder="No groups selected"
-                          value={selectedPermissionNames || ''}
-                          readOnly
-                          className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
-                        />
-                        {errors.permission && (
-                          <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
-                        )}
-                        <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
-                          <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                            {groups.map((group) => (
-                              <div key={group.id} className="flex items-center space-x-2">
-                                <Checkbox
-                                  id={`group-${group.id}`}
-                                  checked={formField.permission.includes(group.id)}
-                                  onCheckedChange={() => handleGroupChange(group.id)}
-                                />
-                                <label
-                                  htmlFor={`group-${group.id}`}
-                                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                >
-                                  {group.name}
-                                </label>
-                              </div>
-                            ))}
+                    <div className="w-full">
+                      <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                        <label className="form-label flex items-center gap-1 max-w-56">
+                          Groups
+                          <span className="text-red-500">*</span>
+                        </label>
+                        <div className="relative w-full">
+                          <Input
+                            type="text"
+                            placeholder="No groups selected"
+                            value={selectedPermissionNames || ''}
+                            readOnly
+                            className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
+                          />
+                          {errors.permission && (
+                            <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
+                          )}
+                          <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                              {groups.map((group) => (
+                                <div key={group.id} className="flex items-center space-x-2">
+                                  <Checkbox
+                                    id={`group-${group.id}`}
+                                    checked={formField.permission.includes(group.id)}
+                                    onCheckedChange={() => handleGroupChange(group.id)}
+                                  />
+                                  <label
+                                    htmlFor={`group-${group.id}`}
+                                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                  >
+                                    {group.name}
+                                  </label>
+                                </div>
+                              ))}
+                            </div>
                           </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  <div className="flex justify-end pt-2.5 gap-5">
-                    <Button variant={'outline'} type="button" onClick={() => resetForm()}>
-                      Reset
-                    </Button>
-                    <Button
-                      variant={'default'}
-                      type="submit"
-                      disabled={isSubmitting || isLoadingData}
-                    >
-                      {isSubmitting ? 'Saving...' : 'Save Changes'}
-                    </Button>
+                    <div className="flex justify-end pt-2.5 gap-5">
+                      <Button variant={'outline'} type="button" onClick={() => resetForm()}>
+                        Reset
+                      </Button>
+                      <Button
+                        variant={'default'}
+                        type="submit"
+                        disabled={isSubmitting || isLoadingData}
+                      >
+                        {isSubmitting ? 'Saving...' : 'Save Changes'}
+                      </Button>
+                    </div>
                   </div>
+                </form>
+                <div className="mt-8 pt-6 border-t border-gray-200">
+                  <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
+                    <Container>
+                      <div className="grid gap-5 lg:gap-7.5 mt-5">
+                        <DataGridInner />
+                      </div>
+                      <AddFeeDialog />
+                      <DeleteFeeDialog />
+                      <EditFeeDialog />
+                    </Container>
+                  </ManageTransferFeeContextProvider>
                 </div>
-              </form>
-            )}
-
-            {isLoadingData && (
-              <ManageTransferFeeContextProvider transactionTypeId={selectedTransferType}>
-                <Container>
-                  <div className="grid gap-5 lg:gap-7.5 mt-5">
-                    <DataGridInner />
-                  </div>
-                  <AddFeeDialog />
-                  <DeleteFeeDialog />
-                  <EditFeeDialog />
-                </Container>
-              </ManageTransferFeeContextProvider>
+              </div>
             )}
           </div>
         </DialogBody>
diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index c815be0..afb3628 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -106,6 +106,25 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     setShowDeleteDialog(show);
   }, []);
 
+  const StatusBadge = ({
+    value,
+    map
+  }: {
+    value: string;
+    map: Record<string, { label: string; color: string }>;
+  }) => {
+    const statusInfo = map[value] || { label: value || 'Unknown', color: 'gray' };
+    const { label, color } = statusInfo;
+
+    return (
+      <span
+        className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+      >
+        {label}
+      </span>
+    );
+  };
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
@@ -217,40 +236,82 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+
       {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        accessorFn: (row) => row.status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const status = row.original.status;
+          const label = status === 'Y' ? 'Active' : 'Inactive';
+          const color = status === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
-        accessorFn: (row: { status_kind: string }) => {
-          const mapping: Record<string, string> = {
-            R: 'Return',
-            T: 'Transfer',
-            P: 'Purchase',
-            W: 'Withdraw',
-            U: 'Top Up',
-            N: 'Top Up Patner'
-          };
-
-          return mapping[row.status_kind] || 'Unknown';
-        },
+        accessorFn: (row) => row.status_kind,
         id: 'status_kind',
         header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
+        cell: ({ row }) => {
+          const kind = row.original.status_kind;
+
+          const mapping: Record<string, { label: string; className: string }> = {
+            R: { label: 'Return', className: 'bg-blue-100 text-blue-600' },
+            T: { label: 'Transfer', className: 'bg-indigo-100 text-indigo-600' },
+            P: { label: 'Purchase', className: 'bg-green-100 text-green-600' },
+            W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
+            U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
+            N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' }
+          };
+
+          const kindInfo = mapping[kind] || {
+            label: 'Unknown',
+            className: 'bg-gray-100 text-gray-600'
+          };
+
+          return (
+            <span className={`px-2 py-1 text-xs font-semibold rounded-full ${kindInfo.className}`}>
+              {kindInfo.label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[250px]', cellClassName: 'text-center' }
       },
       {
-        accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
+        accessorFn: (row) => row.status_approval,
         id: 'status_approval',
         header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const approval = row.original.status_approval;
+          const label = approval === 'Y' ? 'Yes' : 'No';
+          const color = approval === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[150px]', cellClassName: 'text-center' }
       },
       {
         id: 'actions',