diff --git a/src/pages/invoice/DetailPerfomaInvoice.tsx b/src/pages/invoice/DetailPerfomaInvoice.tsx
new file mode 100644
index 0000000..82ed714
--- /dev/null
+++ b/src/pages/invoice/DetailPerfomaInvoice.tsx
@@ -0,0 +1,106 @@
+import { type FC } from 'react'
+import Button from '@/components/Button'
+import { AddSquare, TickSquare } from 'iconsax-react'
+import Input from '@/components/Input'
+import { COLORS } from '@/constants/colors'
+import { Checkbox } from '@/components/ui/checkbox'
+import UploadBox from '@/components/UploadBox'
+import Textarea from '@/components/Textarea'
+
+const DetailPerfomaInvoice: FC = () => {
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>پیش فاکتور درخواست #123456</h1>
+                <Button
+                    className='w-fit px-6'
+                >
+                    <div className='flex gap-1.5'>
+                        <TickSquare size={18} color='black' />
+                        <div className='text-[13px]'>ثبت پیش فاکتور</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8 bg-white p-6 rounded-3xl'>
+                <div className='font-light'>اطلاعات پیش فاکتور</div>
+
+                <div className='mt-6 flex items-end gap-5'>
+                    <Input
+                        label='محصول'
+                        readOnly
+                        value='کارت ویزیت'
+                    />
+
+                    <Input
+                        label='توضیحات'
+                    />
+
+                    <div>
+                        <Input
+                            label='تعداد'
+                            className='w-[100px]'
+                        />
+                    </div>
+                    <div>
+                        <Input
+                            label='مبلغ واحد'
+                            className='w-[100px]'
+                        />
+                    </div>
+                    <div>
+                        <Input
+                            label='تخفیف'
+                            className='w-[100px]'
+                        />
+                    </div>
+                    <div>
+                        <Input
+                            label='مبلغ کل'
+                            className='w-[100px]'
+                            readOnly
+                        />
+                    </div>
+
+                    <AddSquare className='min-w-[30px]' size={40} color={COLORS.primary} />
+
+                </div>
+
+                <div className='mt-6 flex gap-2'>
+                    <Checkbox
+                    />
+                    <div className='text-[13px]'>مالیات بر ارزش افزوده</div>
+                </div>
+
+                <div className='mt-6'>
+                    <UploadBox
+                        label='فایل ضمیمه'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Textarea
+                        label='نحوه پرداخت'
+                        placeholder='مبلغ 70 درصد پیش پرداخت / اعتبار 2 روز'
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Textarea
+                        label='توضیحات'
+                        placeholder='1- قیمت ها بدون احتساب مالیات بر ارزش افزوده می باشد
+2- تیراژ تحویلی سفارشات با  تقریب مثبت و منفی  15 % می باشد و مبلغ نهایی براساس تیراژ تحویلی محاسبه می گردد.
+3- سفارشات چاپی با اختلاف رنگ 10 الی 15 درصد با فایل طراحی شده می باشد.'
+                    />
+                </div>
+
+                <div className='mt-6 bg-[#F5F7FC] h-12 px-3 flex justify-between items-center rounded-xl'>
+                    <div className='text-[#888888] text-[13px]'>مبلغ کل:</div>
+                    <div className='font-semibold text-[13px]'>۰ ﷼</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DetailPerfomaInvoice
\ No newline at end of file
diff --git a/src/pages/invoice/ProformaInvoice.tsx b/src/pages/invoice/ProformaInvoice.tsx
index 8c8fff5..9376248 100644
--- a/src/pages/invoice/ProformaInvoice.tsx
+++ b/src/pages/invoice/ProformaInvoice.tsx
@@ -3,6 +3,9 @@ import { useState, type FC } from 'react'
 import { ProformaInvoiceStatusEnum } from './enum/InvoiceEnum'
 import Filters from '@/components/Filters'
 import Table from '@/components/Table'
+import { Eye } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Paths } from '@/config/Paths'
 
 const ProformaInvoice: FC = () => {
 
@@ -73,6 +76,17 @@ const ProformaInvoice: FC = () => {
                         {
                             key: 'paymentStatus',
                             title: 'وضعیت پرداخت',
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                            render: () => {
+                                return (
+                                    <Link to={Paths.perfomaInvoice.detail + '1'}>
+                                        <Eye size={20} color='#8C90A3' />
+                                    </Link>
+                                )
+                            }
                         }
                     ]}
                     data={[
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index bb95dd1..b2b29c4 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -12,6 +12,7 @@ import FeaturesList from '@/pages/features/List'
 import CreateProduct from '@/pages/product/Create'
 import CreateFeature from '@/pages/features/Create'
 import PrintService from '@/pages/service/PrintService'
+import DetailPerfomaInvoice from '@/pages/invoice/DetailPerfomaInvoice'
 const MainRouter: FC = () => {
     return (
         <div className='p-4 overflow-hidden'>
@@ -25,7 +26,7 @@ const MainRouter: FC = () => {
                             <Route path="/" element={<Home />} />
                             <Route path={Paths.home} element={<Home />} />
                             <Route path={Paths.perfomaInvoice.list} element={<ProformaInvoice />} />
-
+                            <Route path={Paths.perfomaInvoice.detail + ':id'} element={<DetailPerfomaInvoice />} />
                             <Route path={Paths.requests.list} element={<RequestList />} />
                             <Route path={Paths.product.list} element={<ProductList />} />
                             <Route path={Paths.product.create} element={<CreateProduct />} />