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/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
index 4a18331..84e0621 100644
--- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx
+++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx
@@ -454,400 +454,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>