diff --git a/app/Http/Controllers/AccountController.php b/app/Http/Controllers/AccountController.php
index b20dd28..821c100 100644
--- a/app/Http/Controllers/AccountController.php
+++ b/app/Http/Controllers/AccountController.php
@@ -28,6 +28,7 @@ class AccountController extends Controller
             'bank_name' => 'required|string',
             'holder_name' => 'required|string',
             'account_number' => 'required|string',
+            'admin_fee' => 'required|numeric',
             'logo' => 'required|image',
         ]);
 
@@ -39,6 +40,7 @@ class AccountController extends Controller
             'bank_name' => $request->bank_name,
             'holder_name' => $request->holder_name,
             'account_number' => $request->account_number,
+            'admin_fee' => $request->admin_fee,
             'logo' => $file->hashName('uploads'),
         ]);
 
@@ -60,6 +62,7 @@ class AccountController extends Controller
             'bank_name' => 'required|string',
             'holder_name' => 'required|string',
             'account_number' => 'required|string',
+            'admin_fee' => 'required|numeric',
             'logo' => 'nullable|image',
         ]);
 
@@ -75,6 +78,7 @@ class AccountController extends Controller
             'bank_name' => $request->bank_name,
             'holder_name' => $request->holder_name,
             'account_number' => $request->account_number,
+            'admin_fee' => $request->admin_fee
         ]);
 
         return redirect()->route('account.index')
diff --git a/app/Http/Controllers/SettingController.php b/app/Http/Controllers/SettingController.php
index 90e9adf..0574e34 100644
--- a/app/Http/Controllers/SettingController.php
+++ b/app/Http/Controllers/SettingController.php
@@ -49,4 +49,44 @@ class SettingController extends Controller
 
         session()->flash('message', ['type' => 'success', 'message' => 'Setting has beed saved']);
     }
+
+    public function payment()
+    {
+        $setting = Setting::all();
+
+        return inertia('Setting/Payment', [
+            'setting' => $setting,
+            'midtrans_notification_url' => route('api.midtrans.notification'),
+
+        ]);
+    }
+
+
+    public function updatePayment(Request $request)
+    {
+        $request->validate([
+            'MIDTRANS_SERVER_KEY' => 'required|string',
+            'MIDTRANS_CLIENT_KEY' => 'required|string',
+            'MIDTRANS_MERCHANT_ID' => 'required|string',
+            'MIDTRANS_ENABLED' => 'required|in:0,1',
+            'midtrans_logo_file' => 'nullable|image',
+        ]);
+
+        DB::beginTransaction();
+        foreach ($request->except(['midtrans_logo_file']) as $key => $value) {
+            Setting::where('key', $key)->update(['value' => $value]);
+        }
+
+        if ($request->hasFile('midtrans_logo_file')) {
+            $file = $request->file('midtrans_logo_file');
+            $file->store('uploads', 'public');
+            Setting::where('key', 'MIDTRANS_LOGO')->update(['value' => $file->hashName('uploads')]);
+        }
+
+        Cache::flush();
+
+        DB::commit();
+
+        session()->flash('message', ['type' => 'success', 'message' => 'Setting has beed saved']);
+    }
 }
diff --git a/resources/js/Layouts/Partials/routes.js b/resources/js/Layouts/Partials/routes.js
index 938588e..9c71f08 100644
--- a/resources/js/Layouts/Partials/routes.js
+++ b/resources/js/Layouts/Partials/routes.js
@@ -176,9 +176,9 @@ export default [
                 name: 'Payment Gateway',
                 show: true,
                 icon: HiOutlineTable,
-                route: route('account.index'),
-                active: 'account.pg',
-                permission: 'view-account',
+                route: route('setting.payment'),
+                active: 'setting.payment',
+                permission: 'view-setting',
             },
             {
                 name: 'Cash / Setor Tunai',
@@ -186,7 +186,7 @@ export default [
                 icon: HiCash,
                 route: route('account.index'),
                 active: 'account.st',
-                permission: 'view-account',
+                permission: 'view-account', //need new permission
             },
         ],
     },
@@ -195,7 +195,7 @@ export default [
         show: true,
         icon: HiCog,
         route: route('setting.index'),
-        active: 'setting.*',
+        active: 'setting.index',
         permission: 'view-setting',
     },
 ]
diff --git a/resources/js/Pages/Account/Form.jsx b/resources/js/Pages/Account/Form.jsx
index 1a36a16..3fd9a09 100644
--- a/resources/js/Pages/Account/Form.jsx
+++ b/resources/js/Pages/Account/Form.jsx
@@ -4,6 +4,7 @@ import { isEmpty } from 'lodash'
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
 import FormInput from '@/Components/FormInput'
 import FormFile from '@/Components/FormFile'
+import FormInputNumeric from '@/Components/FormInputNumeric'
 import Button from '@/Components/Button'
 import { Head, useForm } from '@inertiajs/react'
 
@@ -15,6 +16,7 @@ export default function Form(props) {
         bank_name: '',
         holder_name: '',
         account_number: '',
+        admin_fee: 0,
         logo: null,
         logo_url: '',
     })
@@ -44,6 +46,7 @@ export default function Form(props) {
                 bank_name: account.bank_name,
                 holder_name: account.holder_name,
                 account_number: account.account_number,
+                admin_fee: account.admin_fee,
                 logo_url: account.logo_url,
             })
         }
@@ -89,6 +92,13 @@ export default function Form(props) {
                             label="Nomor Rekening"
                             error={errors.account_number}
                         />
+                        <FormInputNumeric
+                            name="admin_fee"
+                            value={data.admin_fee}
+                            onChange={handleOnChange}
+                            label="Admin Fee"
+                            error={errors.admin_fee}
+                        />
                         <FormFile
                             label={'Logo'}
                             onChange={(e) => setData('logo', e.target.files[0])}
diff --git a/resources/js/Pages/Setting/Payment.jsx b/resources/js/Pages/Setting/Payment.jsx
new file mode 100644
index 0000000..fa8b4f2
--- /dev/null
+++ b/resources/js/Pages/Setting/Payment.jsx
@@ -0,0 +1,121 @@
+import React from 'react'
+import { Head, router, useForm } from '@inertiajs/react'
+
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
+import FormInput from '@/Components/FormInput'
+import Button from '@/Components/Button'
+import TextArea from '@/Components/TextArea'
+import FormFile from '@/Components/FormFile'
+import Checkbox from '@/Components/Checkbox'
+import { extractValue } from './utils'
+
+export default function General(props) {
+    const { setting, midtrans_notification_url } = props
+    const { data, setData, post, reset, processing, errors } = useForm({
+        MIDTRANS_SERVER_KEY: extractValue(setting, 'MIDTRANS_SERVER_KEY'),
+        MIDTRANS_CLIENT_KEY: extractValue(setting, 'MIDTRANS_CLIENT_KEY'),
+        MIDTRANS_MERCHANT_ID: extractValue(setting, 'MIDTRANS_MERCHANT_ID'),
+        MIDTRANS_LOGO_URL: extractValue(setting, 'MIDTRANS_LOGO'),
+        MIDTRANS_ENABLED: extractValue(setting, 'MIDTRANS_ENABLED'),
+        midtrans_logo_file: null,
+    })
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleSubmit = () => {
+        post(route('setting.payment'), {
+            onSuccess: () => {
+                setTimeout(() => router.get(route(route().current())), 3000)
+            },
+        })
+    }
+
+    return (
+        <AuthenticatedLayout
+            page={'Payment Gateway'}
+            action={''}
+            parent={route(route().current())}
+        >
+            <Head title="Payment Gateway" />
+
+            <div>
+                <div className="mx-auto sm:px-6 lg:px-8">
+                    <div className="overflow-hidden p-4 shadow-sm sm:rounded-lg bg-white dark:bg-gray-800 flex flex-col">
+                        <div className="mt-2 p-2 border rounded-xl">
+                            <div className="font-bold mb-2">
+                                Midtrans Payment
+                            </div>
+                            <FormInput
+                                name="MIDTRANS_MERCHANT_ID"
+                                value={data.MIDTRANS_MERCHANT_ID}
+                                onChange={handleOnChange}
+                                label="Merchant ID"
+                                error={errors.MIDTRANS_MERCHANT_ID}
+                            />
+                            <FormInput
+                                name="MIDTRANS_SERVER_KEY"
+                                value={data.MIDTRANS_SERVER_KEY}
+                                onChange={handleOnChange}
+                                label="Server Key"
+                                error={errors.MIDTRANS_SERVER_KEY}
+                            />
+                            <FormInput
+                                name="MIDTRANS_CLIENT_KEY"
+                                value={data.MIDTRANS_CLIENT_KEY}
+                                onChange={handleOnChange}
+                                label="Client Key"
+                                error={errors.MIDTRANS_CLIENT_KEY}
+                            />
+                            <FormFile
+                                label={'Logo'}
+                                onChange={(e) =>
+                                    setData(
+                                        'midtrans_logo_file',
+                                        e.target.files[0]
+                                    )
+                                }
+                                error={errors.midtrans_logo_file}
+                                preview={
+                                    <img
+                                        src={`${data.MIDTRANS_LOGO_URL}`}
+                                        className="w-40 mb-1"
+                                        alt="site logo"
+                                    />
+                                }
+                            />
+                            <FormInput
+                                value={midtrans_notification_url}
+                                label="Notification URL"
+                                readOnly={true}
+                            />
+                            <Checkbox
+                                label="Enable"
+                                value={+data.MIDTRANS_ENABLED === 1}
+                                onChange={handleOnChange}
+                                name="MIDTRANS_ENABLED"
+                            />
+                        </div>
+
+                        <div className="mt-4">
+                            <Button
+                                onClick={handleSubmit}
+                                processing={processing}
+                            >
+                                Simpan
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </AuthenticatedLayout>
+    )
+}
diff --git a/routes/admin.php b/routes/admin.php
index 67e7e71..6f33380 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -130,6 +130,8 @@ Route::middleware(['http_secure_aware', 'inertia.admin'])
             Route::get('/vouchers/{location}/{profile}', [VoucherController::class, 'index'])->name('voucher.index');
 
             // setting
+            Route::get('/payment-gateway', [SettingController::class, 'payment'])->name('setting.payment');
+            Route::post('/payment-gateway', [SettingController::class, 'updatePayment']);
             Route::get('/settings', [SettingController::class, 'index'])->name('setting.index');
             Route::post('/settings', [SettingController::class, 'update'])->name('setting.update');