diff --git a/.env b/.env
index 6c6866d..ab2c418 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'dsc_token'
 VITE_REFRESH_TOKEN_NAME = 'dsc_refresh_token'
 VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.108:4000'
\ No newline at end of file
+# VITE_BASE_URL = 'http://192.168.1.113:4000'
\ No newline at end of file
diff --git a/src/langs/fa.json b/src/langs/fa.json
index e1458af..eed8756 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -264,7 +264,9 @@
     "discount_error": "کد تخفیف معتبر نیست",
     "pending": "در انتظار تایید",
     "discount_removed": "کد تخفیف با موفقیت حذف شد",
-    "remove_discount": "حذف تخفیف"
+    "remove_discount": "حذف تخفیف",
+    "charge_wallet": "شارژ کیف پول",
+    "sure_charge_wallet": "آیا از شارژ کیف پول اطمینان دارید؟"
   },
   "active": "فعال",
   "inactive": "غیرفعال",
diff --git a/src/pages/receipts/Detail.tsx b/src/pages/receipts/Detail.tsx
index ff01a75..e9b4c6b 100644
--- a/src/pages/receipts/Detail.tsx
+++ b/src/pages/receipts/Detail.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import { useApplyDiscount, useGetInvoiceDetail, useRemoveDiscount } from './hooks/useReceiptData'
@@ -19,16 +19,21 @@ import { useGetProfile } from '../profile/hooks/useProfileData'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../helpers/types'
 import PDFGenerator from '../../components/PDFGenerator'
+import { useGetGetWays } from '../wallet/hooks/useWalletData'
+import { GatewayItemType } from '../wallet/types/WalletTypes'
 
 const ReceiptsDetail: FC = () => {
 
     const { id } = useParams()
     const { t } = useTranslation('global')
     const [code, setCode] = useState<string>('')
+    const [gateWayId, setGateWayId] = useState<string>('')
     const getProfile = useGetProfile()
     const getInvoce = useGetInvoiceDetail(id ? id : '')
     const applyDiscount = useApplyDiscount()
     const removeDiscount = useRemoveDiscount()
+    const getWays = useGetGetWays()
+
     const handleApplyDiscount = () => {
         const params: ApplyDiscountType = {
             id: id ? id : '',
@@ -57,6 +62,15 @@ const ReceiptsDetail: FC = () => {
         })
     }
 
+    useEffect(() => {
+
+        if (getWays.data) {
+            setGateWayId(getWays.data?.data?.paymentGateways?.[0]?.id)
+        }
+
+    }, [getWays.data])
+
+
     return (
         <div className='mt-4'>
             <Helmet>
@@ -291,9 +305,30 @@ const ReceiptsDetail: FC = () => {
                                         <PayInvoice
                                             id={id ? id : ''}
                                             refetch={getInvoce.refetch}
+                                            gateWayId={gateWayId}
                                         />
                                     </div>
                                 }
+                                {
+                                    getInvoce.data?.data?.remainingToCharge > 0 &&
+                                    <div className='flex mt-6 justify-center gap-2'>
+                                        {
+                                            getWays.data?.data?.paymentGateways?.map((item: GatewayItemType) => {
+                                                return (
+                                                    <div key={item.id} className={clx(
+                                                        'size-[72px] rounded-xl border border-border flex flex-col justify-center items-center',
+                                                        gateWayId === item.id && 'border-black'
+                                                    )}>
+                                                        <img src={item.logoUrl} className='w-8' />
+                                                        <div className='mt-1 text-[10px]'>
+                                                            {item.name}
+                                                        </div>
+                                                    </div>
+                                                )
+                                            })
+                                        }
+                                    </div>
+                                }
                             </div>
 
 
diff --git a/src/pages/receipts/components/PayInvoice.tsx b/src/pages/receipts/components/PayInvoice.tsx
index 07caaeb..32efd4e 100644
--- a/src/pages/receipts/components/PayInvoice.tsx
+++ b/src/pages/receipts/components/PayInvoice.tsx
@@ -1,32 +1,48 @@
 import { FC, Fragment, useState } from 'react'
 import Button from '../../../components/Button'
 import { useTranslation } from 'react-i18next'
-import { usePayInvoice } from '../hooks/useReceiptData'
-import { toast } from 'react-toastify'
+import { useGetInvoiceDetail, usePayInvoice } from '../hooks/useReceiptData'
 import { ErrorType } from '../../../helpers/types'
 import ModalConfrim from '../../../components/ModalConfrim'
+import { usePayment } from '../../wallet/hooks/useWalletData'
+import { toast } from '../../../components/Toast'
 
 type Props = {
     id: string,
     refetch: () => void,
+    gateWayId: string,
 }
 
-const PayInvoice: FC<Props> = ({ id, refetch }) => {
+const PayInvoice: FC<Props> = ({ id, refetch, gateWayId }) => {
 
     const { t } = useTranslation('global')
     const [showModal, setShowModal] = useState<boolean>(false)
+    const getInvoce = useGetInvoiceDetail(id)
     const payInvoice = usePayInvoice()
+    const payment = usePayment()
 
 
     const handleConfrim = () => {
         payInvoice.mutate(id, {
             onSuccess: () => {
-                toast.success(t('success'))
+                toast(t('success'), 'success')
                 refetch()
                 setShowModal(false)
             },
             onError: (error: ErrorType) => {
-                toast.error(error.response?.data?.error.message[0])
+                toast(error.response?.data?.error.message[0], 'error')
+            }
+        })
+    }
+
+    const handleChartWallet = () => {
+        payment.mutate({ amount: getInvoce.data?.data?.remainingToCharge, gatewayId: gateWayId, invoiceId: id }, {
+            onSuccess: (data) => {
+                window.location.href = data?.data?.redirectUrl
+                toast(t('wallet.transfer_to_getway'), 'success')
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error.message[0], 'error')
             }
         })
     }
@@ -34,15 +50,15 @@ const PayInvoice: FC<Props> = ({ id, refetch }) => {
     return (
         <Fragment>
             <Button
-                label={t('receip.pay')}
+                label={getInvoce.data?.data?.remainingToCharge > 0 ? t('receip.charge_wallet') : t('receip.pay')}
                 onClick={() => setShowModal(true)}
             />
 
             <ModalConfrim
                 isOpen={showModal}
                 close={() => setShowModal(false)}
-                onConfrim={handleConfrim}
-                label={t('receip.sure_confrim_pay')}
+                onConfrim={getInvoce.data?.data?.remainingToCharge > 0 ? handleChartWallet : handleConfrim}
+                label={getInvoce.data?.data?.remainingToCharge > 0 ? t('receip.sure_charge_wallet') : t('receip.sure_confrim_pay')}
                 isLoading={payInvoice.isPending}
             />
         </Fragment>
diff --git a/src/pages/wallet/types/WalletTypes.ts b/src/pages/wallet/types/WalletTypes.ts
index f2a3935..d05707c 100644
--- a/src/pages/wallet/types/WalletTypes.ts
+++ b/src/pages/wallet/types/WalletTypes.ts
@@ -1,6 +1,7 @@
 export type PaymentType = {
   amount: number;
   gatewayId: string;
+  invoiceId?: string;
 };
 
 export type GatewayItemType = {