diff --git a/src/App.tsx b/src/App.tsx
index f5aa5fb..3288e17 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom'
 import 'swiper/swiper-bundle.css';
 import 'rc-rate/assets/index.css';
 import './assets/fonts/roboto/roboto.css'
+import 'react-loading-skeleton/dist/skeleton.css'
 import i18next from 'i18next'
 import { I18nextProvider } from 'react-i18next'
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
diff --git a/src/components/DefaultTableSkeleton.tsx b/src/components/DefaultTableSkeleton.tsx
new file mode 100644
index 0000000..c230eb7
--- /dev/null
+++ b/src/components/DefaultTableSkeleton.tsx
@@ -0,0 +1,30 @@
+import { FC, Fragment } from 'react'
+import Td from './Td'
+import Skeleton from 'react-loading-skeleton'
+
+type Props = {
+    tdCount: number,
+    trCount?: number,
+}
+
+const DefaultTableSkeleton: FC<Props> = ({ tdCount, trCount = 5 }) => {
+    return (
+        <Fragment>
+            {
+                Array.from({ length: trCount }).map((_, rowIndex) => (
+                    <tr className="tr" key={rowIndex}>
+                        {
+                            Array.from({ length: tdCount }).map((_, colIndex) => (
+                                <Td text={''} key={colIndex}>
+                                    <Skeleton />
+                                </Td>
+                            ))
+                        }
+                    </tr>
+                ))
+            }
+        </Fragment>
+    )
+}
+
+export default DefaultTableSkeleton
diff --git a/src/components/ServiceItem.tsx b/src/components/ServiceItem.tsx
index cb38f66..351be5a 100644
--- a/src/components/ServiceItem.tsx
+++ b/src/components/ServiceItem.tsx
@@ -9,6 +9,7 @@ import { ItemServiceType } from '../pages/service/types/ServiecTypes'
 type Props = {
     item: ItemServiceType,
     className?: string,
+    isLinkPanel?: boolean
 }
 
 const ServiceItem: FC<Props> = (props: Props) => {
diff --git a/src/index.css b/src/index.css
index ce2e452..8491c7e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -199,3 +199,29 @@ tbody tr {
 .has-number {
   font-family: Roboto !important;
 }
+
+.skeleton-box {
+  display: inline-block;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: #dddbdd;
+}
+
+.skeleton-box:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    rgba(#fff, 0) 0,
+    rgba(#fff, 0.2) 20%,
+    rgba(#fff, 0.5) 60%,
+    rgba(#fff, 0)
+  );
+  animation: shimmer 5s infinite;
+  content: "";
+}
diff --git a/src/langs/fa.json b/src/langs/fa.json
index ecc6d23..6b161a1 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -244,7 +244,9 @@
     "accepted": "تایید شده",
     "sure_confrim_pay": "آیا مطمئن هستید که مبلغ صورتحساب از کیف پول شما کسر شود؟",
     "thank_pay_1": "ضمن تشکر از خرید شما",
-    "thank_pay_2": "مبلغ این صورت حساب پرداخت شده است."
+    "thank_pay_2": "مبلغ این صورت حساب پرداخت شده است.",
+    "discount_code": "کد تخفیف",
+    "apply": "اعمال"
   },
   "confrim": {
     "subject": "حذف",
@@ -372,7 +374,8 @@
     "username_not_available": "نام کاربری موجود نیست",
     "username_save_success": "نام کاربری با موفقیت ذخیره شد",
     "image_uploaded_successfully": "تصویر با موفقیت آپلود شد",
-    "confrim_email": "تایید ایمیل"
+    "confrim_email": "تایید ایمیل",
+    "confrim": "تایید صورتحساب "
   },
   "email": "ایمیل",
   "save": "ذخیره",
diff --git a/src/pages/receipts/Detail.tsx b/src/pages/receipts/Detail.tsx
index 1338a09..d5f599e 100644
--- a/src/pages/receipts/Detail.tsx
+++ b/src/pages/receipts/Detail.tsx
@@ -14,6 +14,7 @@ import { clx } from '../../helpers/utils'
 import Button from '../../components/Button'
 import ApproveInvoice from './components/ApproveInvoice'
 import PayInvoice from './components/PayInvoice'
+import Input from '../../components/Input'
 
 const ReceiptsDetail: FC = () => {
 
@@ -24,10 +25,30 @@ const ReceiptsDetail: FC = () => {
 
     return (
         <div className='mt-4'>
-            <div className='flex gap-6 items-center'>
-                <div>{t('receip.detail_account')}</div>
+            <div className='flex xl:flex-row flex-col gap-4 items-center'>
+                <div className='flex gap-6 items-center'>
+                    <div className='whitespace-nowrap'>{t('receip.detail_account')}</div>
 
-                <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
+                    <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
+                </div>
+
+                {
+                    getInvoce.data?.data?.invoice?.status === 'PENDING' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ?
+                        <div className='flex gap-2 items-center w-full'>
+                            <div className='w-full xl:w-fit'>
+                                <Input
+                                    className='bg-transparent border border-border xl:max-w-40'
+                                    placeholder={t('receip.discount_code')}
+                                />
+                            </div>
+
+                            <Button
+                                label={t('receip.apply')}
+                                className='bg-transparent text-black border border-black mt-1 px-5 w-fit'
+                            />
+                        </div>
+                        : null
+                }
             </div>
 
             {
diff --git a/src/pages/receipts/components/ApproveInvoice.tsx b/src/pages/receipts/components/ApproveInvoice.tsx
index bbff422..2252b1f 100644
--- a/src/pages/receipts/components/ApproveInvoice.tsx
+++ b/src/pages/receipts/components/ApproveInvoice.tsx
@@ -58,7 +58,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
         return (
             <Fragment>
                 <Button
-                    isLoading={approveInvoce.isPending || requestApprove.isPending}
+                    disabled={approveInvoce.isPending || requestApprove.isPending}
                     onClick={() => status === 'PENDING' ? handleShowModal() : null}
                     className={clx(
                         'px-9 w-fit bg-white bg-opacity-70 text-description',
@@ -70,7 +70,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                             size={20}
                             color={status === 'PENDING' ? '#888888' : '#00BA4B'}
                         />
-                        <div>
+                        <div className='whitespace-nowrap'>
                             {
                                 status === 'APPROVED' ?
                                     t('receip.accepted')
@@ -85,7 +85,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                     open={showModal}
                     close={() => setShowModal(false)}
                     isHeader
-                    title_header={t('profile.confrim_email')}
+                    title_header={t('profile.confrim')}
                 >
                     <div className='mt-7'>
                         <div className='text-xs text-center'>
@@ -121,6 +121,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                                     className='w-[150px] text-xs'
                                     onClick={handleConfrim}
                                     disabled={code.length !== 5}
+                                    isLoading={approveInvoce.isPending}
                                 >
                                     <div className='flex gap-2 items-center'>
                                         <TickCircle
diff --git a/src/pages/receipts/hooks/useReceiptData.ts b/src/pages/receipts/hooks/useReceiptData.ts
index 090ee19..012bfcd 100644
--- a/src/pages/receipts/hooks/useReceiptData.ts
+++ b/src/pages/receipts/hooks/useReceiptData.ts
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ReceiptService";
 import {
+  ApplyDiscountType,
   ApproveInvoiceType,
   RequestApproveInvoiceType,
 } from "../types/ReceiptTypes";
@@ -39,3 +40,9 @@ export const useRequestApprove = () => {
       api.requestApprove(variables),
   });
 };
+
+export const useApplyDiscount = () => {
+  return useMutation({
+    mutationFn: (variables: ApplyDiscountType) => api.applyDiscount(variables),
+  });
+};
diff --git a/src/pages/receipts/service/ReceiptService.ts b/src/pages/receipts/service/ReceiptService.ts
index 5da2e25..1f525b9 100644
--- a/src/pages/receipts/service/ReceiptService.ts
+++ b/src/pages/receipts/service/ReceiptService.ts
@@ -1,5 +1,6 @@
 import axios from "../../../config/axios";
 import {
+  ApplyDiscountType,
   ApproveInvoiceType,
   RequestApproveInvoiceType,
 } from "../types/ReceiptTypes";
@@ -31,3 +32,11 @@ export const payInvoice = async (id: string) => {
   const { data } = await axios.post(`/invoices/${id}/pay`);
   return data;
 };
+
+export const applyDiscount = async (params: ApplyDiscountType) => {
+  const { data } = await axios.post(
+    `/invoices/${params.id}/apply-discount`,
+    params
+  );
+  return data;
+};
diff --git a/src/pages/receipts/types/ReceiptTypes.ts b/src/pages/receipts/types/ReceiptTypes.ts
index 269e850..3a95a60 100644
--- a/src/pages/receipts/types/ReceiptTypes.ts
+++ b/src/pages/receipts/types/ReceiptTypes.ts
@@ -40,3 +40,8 @@ export type ApproveInvoiceType = {
   code: string;
   id: string;
 };
+
+export type ApplyDiscountType = {
+  id: string;
+  discountCode: string;
+};
diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx
index c4641d5..d11d326 100644
--- a/src/pages/transaction/List.tsx
+++ b/src/pages/transaction/List.tsx
@@ -4,11 +4,12 @@ import { useTranslation } from 'react-i18next'
 import Td from '../../components/Td'
 import Detail from './components/Detail'
 import { useGetTransactions } from './hooks/useTransactionData'
-import PageLoading from '../../components/PageLoading'
 import { TransactionItemType } from './types/TransactionTypes'
 import moment from 'moment-jalaali'
 import { NumberFormat } from '../../config/func'
 import Pagination from '../../components/Pagination'
+import BoxSekeleton from './skeleton/BoxSekeleton'
+import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
 
 const TransactionList: FC = () => {
 
@@ -22,12 +23,14 @@ const TransactionList: FC = () => {
                 {t('transaction.transaction')}
             </div>
 
-            {
-                getTransactions.isPending ?
-                    <PageLoading />
-                    :
-                    <Fragment>
+
+            <Fragment>
+                {
+                    getTransactions.isPending ?
+                        <BoxSekeleton />
+                        :
                         <div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
+
                             <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                                 <div className='flex xl:flex-row flex-col gap-2 items-center'>
                                     <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
@@ -86,48 +89,52 @@ const TransactionList: FC = () => {
                                 </div>
                             </div>
                         </div>
+                }
 
-                        <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                            <table className='w-full text-sm '>
-                                <thead className='thead'>
-                                    <tr>
-                                        <Td text={t('ticket.number')} />
-                                        <Td text={t('transaction.description')} />
-                                        <Td text={t('transaction.amount')} />
-                                        <Td text={t('ticket.date')} />
-                                        <Td text={t('ticket.detail')} />
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    {
-                                        getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
-                                            return (
-                                                <tr key={item.id}>
-                                                    <Td text={item.numericId + ''} />
-                                                    <Td text={item.description} />
-                                                    <Td text={NumberFormat(+item.amount)} />
-                                                    <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
-                                                    <Td text={''}>
-                                                        <Detail />
-                                                    </Td>
-                                                </tr>
-                                            )
-                                        })
-                                    }
-                                </tbody>
-                            </table>
-                        </div>
+                <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                    <table className='w-full text-sm '>
+                        <thead className='thead'>
+                            <tr>
+                                <Td text={t('ticket.number')} />
+                                <Td text={t('transaction.description')} />
+                                <Td text={t('transaction.amount')} />
+                                <Td text={t('ticket.date')} />
+                                <Td text={t('ticket.detail')} />
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {
+                                getTransactions.isPending &&
+                                <DefaultTableSkeleton tdCount={5} />
+                            }
+                            {
+                                getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
+                                    return (
+                                        <tr className='tr' key={item.id}>
+                                            <Td text={item.numericId + ''} />
+                                            <Td text={item.description} />
+                                            <Td text={NumberFormat(+item.amount)} />
+                                            <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                            <Td text={''}>
+                                                <Detail />
+                                            </Td>
+                                        </tr>
+                                    )
+                                })
+                            }
+                        </tbody>
+                    </table>
+                </div>
 
-                        <div className='flex justify-end'>
-                            <Pagination
-                                currentPage={page}
-                                totalPages={getTransactions.data?.data?.pager?.totalPages}
-                                onPageChange={setPage}
-                            />
-                        </div>
+                <div className='flex justify-end'>
+                    <Pagination
+                        currentPage={page}
+                        totalPages={getTransactions.data?.data?.pager?.totalPages}
+                        onPageChange={setPage}
+                    />
+                </div>
 
-                    </Fragment>
-            }
+            </Fragment>
         </div >
     )
 }
diff --git a/src/pages/transaction/skeleton/BoxSekeleton.tsx b/src/pages/transaction/skeleton/BoxSekeleton.tsx
new file mode 100644
index 0000000..49006fa
--- /dev/null
+++ b/src/pages/transaction/skeleton/BoxSekeleton.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+
+const BoxSekeleton: FC = () => {
+    return (
+        <div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
+            <Skeleton
+                containerClassName='flex-1  xl:p-6 py-2 px-4 xl:max-w-[253px]'
+                className='h-[111px] !rounded-2xl'
+                baseColor='#D9D9D9'
+            />
+            <Skeleton
+                containerClassName='flex-1  xl:p-6 py-2 px-4 xl:max-w-[253px]'
+                className='h-[111px] !rounded-2xl'
+                baseColor='#D9D9D9'
+            />
+            <Skeleton
+                containerClassName='flex-1  xl:p-6 py-2 px-4 xl:max-w-[253px]'
+                className='h-[111px] !rounded-2xl'
+                baseColor='#D9D9D9'
+            />
+        </div>
+    )
+}
+
+export default BoxSekeleton
\ No newline at end of file
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 63ba767..2517e58 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -36,7 +36,7 @@ const MainRouter: FC = () => {
             <Header />
             <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
                 <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
-                    <div className='pb-16'>
+                    <div className='pb-20'>
                         <Routes>
                             <Route path={Pages.dashboard} element={<Home />} />
                             <Route path={Pages.services.mine} element={<MyServices />} />