diff --git a/frontend/pages/factor.vue b/frontend/pages/factor.vue
new file mode 100644
index 0000000..72bc236
--- /dev/null
+++ b/frontend/pages/factor.vue
@@ -0,0 +1,200 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div class="fixed w-[200%] h-[200%] bg-[url('/logo/logo-pattern.png')] bg-repeat inset-0 -left-1/2 -top-1/2 opacity-5 rotate-12" :style="{backgroundSize: '150px'}">
+
+    </div>
+    <div class="flex justify-center w-full h-300 pt-20">
+        <div class="w-[1300px] h-fit flex flex-col gap-4 relative">
+            <div class="w-35 aspect-square border-2 border-indigo-500 bg-white absolute left-12 bottom-0 translate-y-1/2 rounded-2xl overflow-hidden p-1">
+                <img
+                    src="/logo/qr-code.png"
+                    class="w-full"
+                />
+            </div>
+
+            <div class="w-full flex items-center justify-center font-bold text-2xl gap-4 text-indigo-500">
+                <div class="w-full text-end">صورت حساب الکترونیکی</div>
+                <div class="shrink-0">
+                    <img
+                        src="/logo/logo2.png"
+                        class="w-24"
+                    />
+                </div>
+                <div class="w-full text-start">فروشگاه هیملز</div>
+            </div>
+            <div class="w-full flex flex-col gap-2">
+                <div class="grid gap-2 grid-cols-12 w-full">
+                    <div
+                        class="flex items-center justify-center p-2 border-2 border-indigo-500 text-indigo-500 bg-indigo-100 rounded-2xl col-span-1"
+                    >
+                        <div class="-rotate-90 leading-[100%]">
+                            فروشگاه
+                            <br />
+                            هی ملز
+                        </div>
+                    </div>
+                    <div class="flex flex-wrap gap-6 p-4 border-2 border-indigo-500 bg-white rounded-2xl col-span-8">
+                        <div class="flex gap-1">
+                            <span>فرستنده :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>شناسه ملی :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>َشماره ثبت :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>َشماره مجوز :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>نشانی شرکت :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>کد پستی :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>تلفن و فکس :</span>
+                            <span>مقدار</span>
+                        </div>
+                    </div>
+                    <div class="flex flex-col gap-1 p-4 border-2 border-indigo-500 bg-white rounded-3xl col-span-3">
+                        <div class="flex gap-1">
+                            <span>شماره فاکتور :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>تاریخ :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>شماره پیگیری :</span>
+                            <span>مقدار</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid gap-2 grid-cols-12 w-ful">
+                    <div
+                        class="flex items-center justify-center p-2 border-2 border-indigo-500 text-indigo-500 bg-indigo-100 rounded-2xl col-span-1"
+                    >
+                        <div class="-rotate-90 leading-[100%]">خریدار</div>
+                    </div>
+                    <div class="grid grid-cols-4 gap-6 p-4 border-2 border-indigo-500 bg-white rounded-2xl col-span-11">
+                        <div class="flex gap-1">
+                            <span>خریدار :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>شماره ملی :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>َشماره تماس :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>کد پستی :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>نشانی :</span>
+                            <span>مقدار</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="border-2 border-indigo-500 bg-white rounded-2xl overflow-hidden">
+                    <table class="text-sm">
+                        <thead>
+                            <tr class="divide-x-2 divide-white">
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">ردیف</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">شناسه کلمات یا خدمات</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4 w-50">شرح کالا یا خدمات</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">تعداد</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ واحد(تومان)</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ کل (تومان)</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">تخفیف (تومان)</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">مبلغ کل پس از تخفیف (تومان)</th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">
+                                    جمع مالیات و عوارض ارزش افزوده (تومان)
+                                </th>
+                                <th class="text-indigo-500 bg-indigo-100 px-3 py-4">
+                                    جمع کل پس از تخفیف و مالیات و عوارض (تومان)
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="divide-x-2 divide-indigo-100">
+                                <td class="px-3 py-4 text-center">ردیف</td>
+                                <td class="px-3 py-4 text-center">شناسه کلمات یا خدمات</td>
+                                <td class="px-3 py-4 text-center">شرح کالا یا خدمات</td>
+                                <td class="px-3 py-4 text-center">تعداد</td>
+                                <td class="px-3 py-4 text-center">مبلغ واحد(تومان)</td>
+                                <td class="px-3 py-4 text-center">مبلغ کل (تومان)</td>
+                                <td class="px-3 py-4 text-center">تخفیف (تومان)</td>
+                                <td class="px-3 py-4 text-center">مبلغ کل پس از تخفیف (تومان)</td>
+                                <td class="px-3 py-4 text-center">جمع مالیات و عوارض ارزش افزوده (تومان)</td>
+                                <td class="px-3 py-4 text-center">جمع کل پس از تخفیف و مالیات و عوارض (تومان)</td>
+                            </tr>
+                            <tr class="divide-x-2 divide-indigo-100 border-t-2 border-indigo-100">
+                                <td
+                                    class="px-3 py-4 text-center"
+                                    colspan="3"
+                                >
+                                    قیمت کل
+                                </td>
+                                <td class="px-3 py-4 text-center">تعداد</td>
+                                <td class="px-3 py-4 text-center">مبلغ واحد(تومان)</td>
+                                <td class="px-3 py-4 text-center">مبلغ کل (تومان)</td>
+                                <td class="px-3 py-4 text-center">تخفیف (تومان)</td>
+                                <td class="px-3 py-4 text-center">مبلغ کل پس از تخفیف (تومان)</td>
+                                <td class="px-3 py-4 text-center">جمع مالیات و عوارض ارزش افزوده (تومان)</td>
+                                <td class="px-3 py-4 text-center">جمع کل پس از تخفیف و مالیات و عوارض (تومان)</td>
+                            </tr>
+                            <tr class="divide-x-2 divide-white">
+                                <td
+                                    class="bg-indigo-100"
+                                    colspan="5"
+                                ></td>
+                                <td
+                                    colspan="4"
+                                    class="px-3 py-4 text-center bg-indigo-100 border-e-indigo-100"
+                                >
+                                    جمع کل پس از کسر تخفیف با احتساب مالیات و عوارض (تومان)
+                                </td>
+                                <td class="px-3 py-4 text-center border-t-2 border-t-indigo-100">مبلغ</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="grid grid-cols-5 gap-6 p-4 min-h-50">
+                        <div class="flex gap-1">
+                            <span>مهر و امضای فروشگاه :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>تاریخ تحویل :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>ساعت تحویل :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>روش های پرداخت :</span>
+                            <span>مقدار</span>
+                        </div>
+                        <div class="flex gap-1">
+                            <span>مهر و امضای خریدار :</span>
+                            <span>مقدار</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/frontend/public/logo/logo-pattern.png b/frontend/public/logo/logo-pattern.png
new file mode 100644
index 0000000..f9f12fe
Binary files /dev/null and b/frontend/public/logo/logo-pattern.png differ
diff --git a/frontend/public/logo/logo2.png b/frontend/public/logo/logo2.png
new file mode 100644
index 0000000..0a0ef47
Binary files /dev/null and b/frontend/public/logo/logo2.png differ
diff --git a/frontend/public/logo/qr-code.png b/frontend/public/logo/qr-code.png
new file mode 100644
index 0000000..c8cbf60
Binary files /dev/null and b/frontend/public/logo/qr-code.png differ