Vite + React + TS

+ {t('reportCard.reportCard')} +

+ +

+ + +

+ +

+ + + +

+ +

+ + + + +

+                    </div>
+
+                    <div className='mt-7'>
+                        <UploadBox
+                            label={t('attachment')}
+                        />
+                    </div>
+
+
+                    <div className='mt-20 flex justify-end'>
+                        <Button
+                            label={t('ticket.send')}
+                            className='max-w-[100px]'
+                        />
+                    </div>
+                </div>
+
+
+
+
+                <div className='bg-white w-sidebar hidden xl:block py-10 px-5 h-fit rounded-3xl'>
+                    <div className='text-sm'>
+                        {t('ticket.title_hint')}
+                    </div>
+                    <div className='mt-6'>
+                        <div className='flex items-start gap-2 border-b pb-5'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
+                            </div>
+                        </div>
+                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
+                            </div>
+                        </div>
+                        <div className='flex items-start gap-2 mt-6'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+
+
+
+            </div>
+
+
+        </div>
+
+    )
+}
+
+export default AddCriticisms
\ No newline at end of file
diff --git a/src/pages/grade/records.tsx b/src/pages/grade/records.tsx
new file mode 100644
index 0000000..5fa6488
--- /dev/null
+++ b/src/pages/grade/records.tsx
@@ -0,0 +1,85 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import Button from '../../components/Button'
+import downloadIcon from '../../assets/images/download.svg'
+const Records: FC = () => {
+    const { t } = useTranslation('global')
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('grade-records.all-records')}
+                </div>
+            </div>
+            <div>
+                <div className='flex justify-between items-end gap-2 xl:items-end'>
+                    <div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('grade-records.search')}
+                            className='bg-white w-full'
+                        />
+                    </div>
+                    <div className='flex items-center gap-4'>
+                        <div className='w-[100px] xl:w-[200px]'>
+                            <Select
+                                items={[
+                                    {
+                                        label: 'همه',
+                                        value: 'active'
+                                    }
+                                ]}
+                                className='bg-white border'
+                            />
+                        </div>
+                    </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('grade-records.title')} />
+                            <Td text={t('grade-records.status')} />
+                            <Td text=''>
+                                <div className='max-w-[200px] flex justify-center'>
+                                    {t('grade-records.record')}
+                                </div>
+                            </Td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text={t('grade-records.title')} />
+                            <Td text=''>
+                                <div className='flex gap-1 !items-center'>
+                                    <div className='w-2 h-2 rounded-full bg-green-600'></div>
+                                    <div>{t('grade-records.status')}</div>
+                                </div>
+                            </Td>
+                            <Td text=''>
+                                <Button className='text-xs px-2 rounded-lg gap-2 max-w-[200px]' label='دانلود' icon={downloadIcon} />
+                            </Td>
+                        </tr>
+                        <tr className='tr'>
+                            <Td text={t('grade-records.title')} />
+                            <Td text=''>
+                                <div className='flex gap-1 !items-center'>
+                                    <div className='w-2 h-2 rounded-full bg-yellow-600'></div>
+                                    <div>{t('grade-records.status')}</div>
+                                </div>
+                            </Td>
+                            <Td text=''>
+                                <Button className='text-xs px-2 rounded-lg  gap-2 max-w-[200px]' label='دانلود' icon={downloadIcon} />
+                            </Td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+export default Records
\ No newline at end of file
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
new file mode 100644
index 0000000..121d478
--- /dev/null
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,171 @@
+import { Building, InfoCircle } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clx } from '../../helpers/utils'
+import StatusWithText from '../../components/StatusWithText'
+import TitleSeeAll from '../../components/TitleSeeAll'
+
+const Home: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div className='w-full h-10 flex gap-2 items-center px-4 rounded-xl bg-[#FCE7CE] text-[#FF7B00]'>
+                <InfoCircle
+                    size={24}
+                    color='#FF7B00'
+                />
+                <div className='text-xs'>
+                    درخواست شما برای ثبت شرکت، هنوز تایید نشده است
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <TitleSeeAll
+                    title={t('home.last_announcement')}
+                    link='/'
+                />
+            </div>
+
+
+            <div className='mt-4'>
+                <div className={clx(
+                    'p-4 rounded-2xl',
+                    'bg-[#F8F9FB]'
+                )}>
+                    <div className='flex justify-between'>
+                        <div className='leading-6 text-xs xl:text-[12.5px] max-w-[70%]'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                        </div>
+
+                        <div className='flex gap-1'>
+                            <StatusWithText
+                                variant='error'
+                                text={t('announcement.important')}
+                            />
+                            <StatusWithText
+                                variant='success'
+                                text={t('announcement.new')}
+                            />
+                        </div>
+                    </div>
+
+                    <div className='m-2 flex justify-between items-center text-[11px]'>
+                        <div className='max-w-[70%] truncate text-description'>
+                            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                        </div>
+                        <div className='text-description'>
+                            ۱۴۰۳/۰۹/۲۴
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <TitleSeeAll
+                    title={t('home.companies')}
+                    link='/'
+                />
+            </div>
+
+            <div className='flex gap-2 mt-4 overflowX'>
+                <div className='h-9 bg-white rounded-full px-5 flex gap-2 items-center'>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+                <div className='h-9 bg-white rounded-full px-5 flex gap-2 items-center'>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+                <div className='h-9 bg-white rounded-full px-5 flex gap-2 items-center'>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+                <div className='h-9 bg-white rounded-full px-5 flex gap-2 items-center'>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+                <div className='h-9 bg-white rounded-full px-5 flex gap-2 items-center'>
+                    <Building
+                        size={20}
+                        color='black'
+                    />
+                    <div className='text-sm'>
+                        همه
+                    </div>
+                </div>
+            </div>
+
+            <div className='mt-6 flex gap-4 flex-wrap'>
+                <div className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
+                    <div className='size-[64px] rounded-xl bg-red-100'></div>
+                    <div className='text-xs'>
+                        <div>
+                            شرکت
+                        </div>
+                        <div className='text-description mt-2'>
+                            شهرک شماره ۱
+                        </div>
+                    </div>
+                </div>
+                <div className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
+                    <div className='size-[64px] rounded-xl bg-red-100'></div>
+                    <div className='text-xs'>
+                        <div>
+                            هنرمند
+                        </div>
+                        <div className='text-description mt-2'>
+                            درامز
+                        </div>
+                    </div>
+                </div>
+                <div className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
+                    <div className='size-[64px] rounded-xl bg-red-100'></div>
+                    <div className='text-xs'>
+                        <div>
+                            هنرمند
+                        </div>
+                        <div className='text-description mt-2'>
+                            درامز
+                        </div>
+                    </div>
+                </div>
+                <div className='flex-1 gap-2.5 bg-white min-w-[40%] h-20 flex items-center p-2 rounded-xl'>
+                    <div className='size-[64px] rounded-xl bg-red-100'></div>
+                    <div className='text-xs'>
+                        <div>
+                            هنرمند
+                        </div>
+                        <div className='text-description mt-2'>
+                            درامز
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Home
\ No newline at end of file
diff --git a/src/pages/my-courses/List.tsx b/src/pages/my-courses/List.tsx
new file mode 100644
index 0000000..9e2cf72
--- /dev/null
+++ b/src/pages/my-courses/List.tsx
@@ -0,0 +1,85 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import LevelingCart from '../../components/LevelingCard'
+import germanyFly from '../../assets/images/germany.png'
+import CourseCard from '../../components/CourseCard'
+import book from '../../assets/images/books.jpg'
+const AdmitCard: FC = () => {
+    const { t } = useTranslation('global')
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('myCourses.myCourses')}
+                </div>
+            </div>
+            <div>
+                <div className='flex justify-between items-end gap-2 xl:items-end'>
+                    <div className='mt-6 xl:mt-0 max-w-[420px] xl:w-[300px] w-full'>
+                        <Input
+                            variant='search'
+                            placeholder={t('myCourses.search')}
+                            className='bg-white w-full'
+                        />
+                    </div>
+                    <div className='flex items-center gap-4'>
+                        <div className='w-[100px] xl:w-[200px]'>
+                            <Select
+                                items={[
+                                    {
+                                        label: 'همه',
+                                        value: 'active'
+                                    }
+                                ]}
+                                className='bg-white border'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='flex overflow-auto gap-4 mt-8 hide-scroll-bar'>
+                <LevelingCart
+                    image={germanyFly}
+                    title='سطح A1'
+                />
+            </div>
+            <div className='mt-6 pb-[120px]'>
+                <h2>{t('myCourses.myCourses')}</h2>
+                <div className='flex flex-wrap gap-2 mt-2'>
+                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
+                        <CourseCard
+                            image={book}
+                            teacher='حمید ضرغامی'
+                            time='20'
+                            price='1.000.000'
+                            title='دوره 504 واژه'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
+                        <CourseCard
+                            image={book}
+                            teacher='حمید ضرغامی'
+                            time='20'
+                            price='1.000.000'
+                            title='دوره 504 واژه'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
+                        <CourseCard
+                            image={book}
+                            teacher='حمید ضرغامی'
+                            time='20'
+                            price='1.000.000'
+                            title='دوره 504 واژه'
+                        />
+                    </div>
+                    <div className='min-w-[40%] flex-1 lg:min-w-[175px]'>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default AdmitCard
\ No newline at end of file
diff --git a/src/pages/notification/Notification.tsx b/src/pages/notification/Notification.tsx
new file mode 100644
index 0000000..5682255
--- /dev/null
+++ b/src/pages/notification/Notification.tsx
@@ -0,0 +1,113 @@
+import { Notification } from 'iconsax-react'
+import { FC, useState } from 'react'
+import XIcon from '../../assets/images/close-circle.svg'
+import { useTranslation } from 'react-i18next'
+import { clx } from '../../helpers/utils'
+import StatusCircle from '../../components/StatusCircle'
+import { useOutsideClick } from '../../hooks/useOutSideClick'
+
+const Notifications: FC = () => {
+
+    const { t } = useTranslation('global')
+    const ref = useOutsideClick(() => setShowModal(false))
+    const [activeTab, setActiveTab] = useState<'all' | 'read' | 'unread'>('all')
+    const [showModal, setShowModal] = useState<boolean>(false)
+
+    return (
+        <div ref={ref}>
+            <Notification onClick={() => setShowModal(!showModal)} size={18} color='black' />
+
+            {
+                showModal && (
+                    <div className='xl:h-[calc(100%-110px)] h-[70%] p-6 z-50 xl:w-[300px] w-full xl:left-7 left-0 xl:top-[90px] top-0 overflow-y-auto xl:rounded-3xl rounded-b-3xl rounded-t-none fixed modalGlass3 '>
+                        <div className='flex justify-between items-center'>
+                            <div>
+                                {t('notif.natification')}
+                            </div>
+                            <div className='size-7 rounded-full bg-white bg-opacity-35  flex justify-center items-center'>
+                                <img src={XIcon} alt='close' className='w-4 h-4' onClick={() => setShowModal(false)} />
+                            </div>
+                        </div>
+
+                        <div className='mt-6 flex h-8 border border-white border-opacity-35 text-xs rounded-lg overflow-hidden'>
+                            <div onClick={() => setActiveTab('all')} className={clx(
+                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 flex justify-center items-center',
+                                activeTab === 'all' ? 'bg-white bg-opacity-70 text-black' : ''
+                            )}>
+                                همه
+                            </div>
+                            <div onClick={() => setActiveTab('unread')} className={clx(
+                                'flex-1 border-l cursor-pointer text-white border-white border-opacity-70 bg-transparent flex justify-center items-center',
+                                activeTab === 'unread' ? 'bg-white bg-opacity-70 text-black' : ''
+                            )}>
+                                خوانده نشده
+                            </div>
+                            <div onClick={() => setActiveTab('read')} className={clx(
+                                'flex-1 cursor-pointer text-white border-white bg-transparent flex justify-center items-center',
+                                activeTab === 'read' ? 'bg-white bg-opacity-70 text-black' : ''
+                            )}>
+                                خوانده شده
+                            </div>
+                        </div>
+
+                        <div className='mt-6 flex flex-col gap-4 text-xs'>
+                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
+                                <div className='mt-1'>
+                                    <StatusCircle color='#00BA4B' />
+                                </div>
+                                <div className=''>
+                                    <div className='truncate'>
+                                        لورم ایپسوم متن ساختگی با تولید سادگی
+                                    </div>
+                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
+                                        <div>۲ ساعت پیش</div>
+                                        <div className='flex gap-1 items-center'>
+                                            <StatusCircle color='#8C90A3' />
+                                            <div>دیزاین</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
+                                <div className='mt-1'>
+                                    <StatusCircle color='#00BA4B' />
+                                </div>
+                                <div className=''>
+                                    <div className='truncate'>
+                                        لورم ایپسوم متن ساختگی با تولید سادگی
+                                    </div>
+                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
+                                        <div>۲ ساعت پیش</div>
+                                        <div className='flex gap-1 items-center'>
+                                            <StatusCircle color='#8C90A3' />
+                                            <div>دیزاین</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className='bg-white h-fit gap-4 items-start rounded-xl bg-opacity-60 p-3 flex'>
+                                <div className='mt-1'>
+                                    <StatusCircle color='#00BA4B' />
+                                </div>
+                                <div className=''>
+                                    <div className='truncate'>
+                                        لورم ایپسوم متن ساختگی با تولید سادگی
+                                    </div>
+                                    <div className='mt-2 flex gap-2 text-[10px] text-description'>
+                                        <div>۲ ساعت پیش</div>
+                                        <div className='flex gap-1 items-center'>
+                                            <StatusCircle color='#8C90A3' />
+                                            <div>دیزاین</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )
+            }
+        </div>
+    )
+}
+
+export default Notifications
\ No newline at end of file
diff --git a/src/pages/payment/Details.tsx b/src/pages/payment/Details.tsx
new file mode 100644
index 0000000..3d3a90f
--- /dev/null
+++ b/src/pages/payment/Details.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import book from '../../assets/images/books.jpg'
+import { useTranslation } from 'react-i18next'
+import Tabs from '../../components/Tabs'
+import { MoneyTick, MoneyTime } from 'iconsax-react'
+import Input from '../../components/Input'
+import Button from '../../components/Button'
+import RadioGroup from '../../components/RadioGroup'
+import bank from '../../assets/images/bank.png'
+const PaymentDetails = () => {
+    const [activeTab, setActiveTab] = useState<string>('unpaid')
+    const { t } = useTranslation('global')
+    return (
+        <div className='pb-[120px]'>
+            <div className="rounded-[32px] bg-white py-6 flex items-center gap-4 px-6">
+                <img src={book} className='w-[95px] h-[95px] rounded-2xl' alt="" />
+                <div className='space-y-2'>
+                    <h2 className='text-[14px]'>دوره مقدماتی</h2>
+                    <div className='space-y-[2px]'>
+                        <p className='text-[10px] text-description'>1 شنبه - 2 شنبه، ساعت 2 تا 4 عصر</p>
+                        <div className='flex items-center gap-1 text-[13px]'>
+                            <p className='text-description'>پیش پرداخت :</p>
+                            <p>500,000 تومان</p>
+                        </div>
+                        <div className='flex items-center gap-1 text-[13px]'>
+                            <p className='text-description'>کل مبلغ دوره :</p>
+                            <p>500,000 تومان</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className='mt-6 w-full'>
+                <Tabs
+                    isFullWidth
+                    active={activeTab}
+                    items={[
+                        {
+                            icon: <MoneyTime color={activeTab === 'unpaid' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('payment.prePay'),
+                            value: 'unpaid'
+                        },
+                        {
+                            icon: <MoneyTick color={activeTab === 'not_confimed' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('payment.fullPay'),
+                            value: 'not_confimed'
+                        }
+                    ]}
+                    onChange={setActiveTab}
+                />
+            </div>
+            <div className="rounded-[32px] bg-white py-6 mt-6 gap-4 px-6">
+                <h2 className='text-[14px]'>{t('payment.fullPay')}</h2>
+                <div className='flex items-end mt-4 gap-2 justify-between'>
+                    <Input placeholder='کد تخفیف' />
+                    <Button className='bg-white text-xs text-black border border-black max-w-[80px]' label='اعمال' />
+                </div>
+                <div className='flex items-center text-xs gap-3 my-6'>
+                    <p className='text-description'>مبلغ قابل پرداخت</p>
+                    <div className='border-b border-dashed border-description flex-1'></div>
+                    <p>1,000,000 تومان</p>
+                </div>
+                <div className='flex items-center gap-2'>
+                    <RadioGroup
+                        items={[
+                            {
+                                label: t('استفاده از موجودی کیف پول'),
+                                value: '3month'
+                            },
+                            {
+                                label: t('پرداخت مستقیم'),
+                                value: 'year'
+                            }
+                        ]}
+                        onChange={() => ''}
+                        selected={''}
+                    />
+                </div>
+                <div className='text-xs gap-3 my-6'>
+                    <h2 className='text-[14px]'>روش پرداخت</h2>
+                    <div className='grid grid-cols-2 gap-2 mt-4'>
+                        <div className='border border-black rounded-2xl flex items-center justify-center'>
+                            <div className='text-center flex flex-col items-center space-y-1 py-4'>
+                                <img src={bank} className='h-[50px] w-[50px]' alt="" />
+                                <p>بانک پارسیان</p>
+                                <p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
+                            </div>
+                        </div>
+                        <div className='border border-black rounded-2xl flex items-center justify-center'>
+                            <div className='text-center flex flex-col items-center space-y-1 py-4'>
+                                <img src={bank} className='h-[50px] w-[50px]' alt="" />
+                                <p>بانک پارسیان</p>
+                                <p className='text-description text-[10px]'>تمام کارت های عضو شتاب</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PaymentDetails
\ No newline at end of file
diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
new file mode 100644
index 0000000..e1cda59
--- /dev/null
+++ b/src/pages/profile/Profile.tsx
@@ -0,0 +1,174 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import AvatarImage from '../../assets/images/avatar_image.png'
+import Button from '../../components/Button'
+import { DocumentUpload, Edit } from 'iconsax-react'
+import Input from '../../components/Input'
+import DatePickerComponent from '../../components/DatePicker'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
+import { useGetProfile } from './hooks/useProfileData'
+import Username from './components/Username'
+
+const Profile: FC = () => {
+
+    const { t } = useTranslation('global')
+    const getProfile = useGetProfile()
+
+    return (
+        <div className='mt-4 '>
+            <div>
+                {t('profile.account_user')}
+            </div>
+
+            <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
+                <div className='xl:mt-10 mt-4 flex xl:flex-row flex-col xl:gap-0 gap-7 xl:items-center border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.image_profile')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.image_profile_desc')}
+                        </div>
+                    </div>
+                    <div className='flex-1 flex xl:gap-6 gap-4'>
+                        <img src={AvatarImage} className='xl:size-20 size-14 rounded-full object-cover' />
+                        <div>
+                            <Button
+                                className='xl:w-[160px] w-fit px-4 xl:;px-0 h-8 xl:h-10 text-xs xl:text-sm'
+                            >
+                                <div className='flex items-center gap-3'>
+                                    <DocumentUpload color='white' size={18} />
+                                    <div>{t('profile.upload_image')}</div>
+                                </div>
+                            </Button>
+                            <p className='mt-3 text-description'>
+                                {t('profile.format_image')}
+                            </p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.info_account')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.auth_after_change_info')}
+                        </div>
+                    </div>
+                    <div className='flex-1 '>
+                        <Username
+                            username={getProfile.data?.data?.user?.userName}
+                        />
+                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+                            <Input
+                                label={t('email')}
+                                value={getProfile.data?.data?.user?.email}
+                                readOnly
+                            />
+                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+                            <Input
+                                label={t('profile.phone_call')}
+                                value={getProfile.data?.data?.user?.phone}
+                                readOnly
+                            />
+                            <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7 border-b pb-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.personal_information')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.enter_carefully_your_information')}
+                        </div>
+                    </div>
+                    <div className='flex-1'>
+                        <DatePickerComponent
+                            label={t('profile.date_of_birth')}
+                            onChange={() => { }}
+                            placeholder=''
+                            defaulValue='1400-01-01'
+                        />
+
+                        <div className='xl:mt-7 mt-4'>
+                            <Input
+                                label={t('profile.national_code')}
+                                value={'۰۰۱۲۳۴۵۳۴۴'}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
+                    <div className='flex-1'>
+                        <div>
+                            {t('profile.address')}
+                        </div>
+                        <div className='text-description text-xs mt-2'>
+                            {t('profile.address_live')}
+                        </div>
+                    </div>
+                    <div className='flex-1'>
+                        <div className='rowTwoInput'>
+                            <Select
+                                label={t('profile.province')}
+                                items={[
+                                    {
+                                        label: 'تهران',
+                                        value: 'tehran'
+                                    }
+                                ]}
+                                className='bg-white border'
+                            />
+                            <Select
+                                label={t('profile.city')}
+                                items={[
+                                    {
+                                        label: 'تهران',
+                                        value: 'tehran'
+                                    }
+                                ]}
+                            />
+                        </div>
+
+                        <div className='xl:mt-7 mt-4'>
+                            <Input
+                                label={t('profile.postal_code')}
+                                value={'۱۲۳۴۵۶۷۸'}
+                            />
+                        </div>
+                        <div className='xl:mt-7 mt-4'>
+                            <Textarea
+                                label={t('profile.address')}
+                                value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className='h-20 xl:hidden'></div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Profile
\ No newline at end of file
diff --git a/src/pages/profile/components/Username.tsx b/src/pages/profile/components/Username.tsx
new file mode 100644
index 0000000..23d8f5f
--- /dev/null
+++ b/src/pages/profile/components/Username.tsx
@@ -0,0 +1,132 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { useCheckUserName, useUpdateProfile } from '../hooks/useProfileData'
+import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    username: string | null,
+}
+const Username: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [username, setUsername] = useState<string>(props.username ? props.username : '')
+    const [canSave, setCanSave] = useState<boolean>(false)
+    const [canEdit, setCanEdit] = useState<boolean>(false)
+    const [status, setStatus] = useState<'success' | 'error' | ''>('')
+    const checkUsername = useCheckUserName()
+    const updateProfile = useUpdateProfile()
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value
+        setCanSave(false)
+        if (value.indexOf(' ') === -1) {
+            if (value.length <= 3) {
+                setUsername(value)
+                return
+            }
+            setStatus('')
+            const params: CheckUserNameType = {
+                value: e.target.value,
+                type: 'userName'
+            }
+            setUsername(e.target.value)
+            checkUsername.mutate(params, {
+                onSuccess() {
+                    setStatus('success')
+                    setCanSave(true)
+                },
+                onError() {
+                    setStatus('error')
+                }
+            })
+        }
+    }
+
+    const handleSave = () => {
+        const params: UpdateProfileType = {
+            userName: username
+        }
+
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast.success(t('profile.username_save_success'))
+                setCanEdit(false)
+                setCanSave(false)
+                setStatus('')
+            },
+            onError(error: ErrorType) {
+                toast.error(error.response?.data?.error?.message?.[0])
+            },
+        })
+    }
+
+    useEffect(() => {
+        if (username !== props.username) {
+            setUsername(props.username ? props.username : '')
+        }
+    }, [props.username])
+
+
+    return (
+        <>
+            <div className='flex items-end xl:gap-6 gap-3'>
+                <div className='relative w-full'>
+                    <Input
+                        label={t('profile.username')}
+                        value={username}
+                        readOnly={!canEdit}
+                        onChange={handleChange}
+                        minLength={3}
+                        maxLength={20}
+                    />
+
+                    {
+                        checkUsername.isPending &&
+                        <div className='absolute left-4 top-8'>
+                            <div className='loader'></div>
+                        </div>
+                    }
+                </div>
+                <div className='flex relative  gap-1 text-[#0047FF] text-xs items-center'>
+                    {
+                        !canEdit ?
+                            <div onClick={() => setCanEdit(true)} className='flex gap-1 cursor-pointer relative -top-3'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                            :
+                            <Button
+                                label={t('save')}
+                                onClick={handleSave}
+                                className='px-4'
+                                disabled={!canSave}
+                                isLoading={updateProfile.isPending}
+                            />
+                    }
+
+                </div>
+            </div>
+            {
+                status === 'success' ?
+                    <div className='text-xs text-green-500 mt-2'>
+                        {t('profile.username_available')}
+                    </div>
+                    :
+                    status === 'error' ?
+                        <div className='text-xs text-red-500 mt-2'>
+                            {t('profile.username_not_available')}
+                        </div>
+                        : null
+            }
+        </>
+    )
+}
+
+export default Username
\ No newline at end of file
diff --git a/src/pages/profile/hooks/useProfileData.tsx b/src/pages/profile/hooks/useProfileData.tsx
new file mode 100644
index 0000000..346669b
--- /dev/null
+++ b/src/pages/profile/hooks/useProfileData.tsx
@@ -0,0 +1,22 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import * as api from '../service/ProfileService'
+import { CheckUserNameType, UpdateProfileType } from '../types/ProfileTypes';
+
+export const useGetProfile = () => {
+    return useQuery({
+        queryKey: ["profile"],
+        queryFn: () => api.getProfile(),
+    });
+};
+
+export const useCheckUserName = () => {
+    return useMutation({
+        mutationFn: (variables: CheckUserNameType) => api.checkUserName(variables),
+    });
+};
+
+export const useUpdateProfile = () => {
+    return useMutation({
+        mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
+    });
+};
\ No newline at end of file
diff --git a/src/pages/profile/service/ProfileService.ts b/src/pages/profile/service/ProfileService.ts
new file mode 100644
index 0000000..5a59db1
--- /dev/null
+++ b/src/pages/profile/service/ProfileService.ts
@@ -0,0 +1,17 @@
+import axios from "../../../config/axios";
+import { CheckUserNameType, UpdateProfileType } from "../types/ProfileTypes";
+
+export const getProfile = async () => {
+  const { data } = await axios.get(`/users/me`);
+  return data;
+};
+
+export const checkUserName = async (params: CheckUserNameType) => {
+  const { data } = await axios.post(`/users/check-validity`, params);
+  return data;
+};
+
+export const updateProfile = async (params: UpdateProfileType) => {
+  const { data } = await axios.patch(`/users/update-profile`, params);
+  return data;
+};
diff --git a/src/pages/profile/types/ProfileTypes.ts b/src/pages/profile/types/ProfileTypes.ts
new file mode 100644
index 0000000..7b305f1
--- /dev/null
+++ b/src/pages/profile/types/ProfileTypes.ts
@@ -0,0 +1,11 @@
+export type CheckUserNameType = {
+  type: "userName";
+  value: string;
+};
+
+export type UpdateProfileType = {
+  firstName?: string;
+  lastName?: string;
+  birthDate?: string;
+  userName?: string;
+};
diff --git a/src/pages/receipts/Detail.tsx b/src/pages/receipts/Detail.tsx
new file mode 100644
index 0000000..0aa726b
--- /dev/null
+++ b/src/pages/receipts/Detail.tsx
@@ -0,0 +1,258 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Edit } from 'iconsax-react'
+import StatusCircle from '../../components/StatusCircle'
+import SamanImage from '../../assets/images/saman.png'
+
+const ReceiptsDetail: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4 pb-20'>
+            <div>
+                {t('receip.detail_account')}
+                ۱۲۳۱۲
+            </div>
+
+            <div className='flex xl:flex-row flex-col mt-8 gap-6'>
+                <div className='flex-1'>
+                    <div className='w-full bg-white rounded-3xl p-8'>
+                        <div className='flex justify-between items-center'>
+                            <div>
+                                {t('receip.personal_information')}
+                            </div>
+                            <div className='flex gap-1 items-center text-xs text-[#0047FF]'>
+                                <Edit size={16} color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='mt-8 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.type_person')}
+                                </div>
+                                <div>
+                                    {t('receip.company')}
+                                </div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.representativeـname')}
+                                </div>
+                                <div>
+                                    مهرداد مظفری
+                                </div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.company_name')}
+                                </div>
+                                <div>
+                                    داناک
+                                </div>
+                            </div>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.registration_number')}
+                                </div>
+                                <div>
+                                    ۱۲۳۴
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='mt-8 border-t pt-7 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center text-xs'>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.tel_company')}
+                                </div>
+                                <div>
+                                    ۰۰۱۲۳۴۵۶۷۸
+                                </div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.national_code')}
+                                </div>
+                                <div>
+                                    ۰۰۱۲۳۴۵۶۷۸
+                                </div>
+                            </div>
+
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.postal_code')}
+                                </div>
+                                <div>
+                                    ۳۸۲۱۳۵۸۸۹۲
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <div className='mt-6 flex xl:flex-row flex-col xl:gap-16 gap-4 xl:items-center  text-xs'>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.state')}
+                                </div>
+                                <div>
+                                    مرکزی
+                                </div>
+                            </div>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.state')}
+                                </div>
+                                <div>
+                                    مرکزی
+                                </div>
+                            </div>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.city')}
+                                </div>
+                                <div>
+                                    اراک
+                                </div>
+                            </div>
+                            <div className='flex gap-2'>
+                                <div className='text-description'>
+                                    {t('receip.address')}
+                                </div>
+                                <div>
+                                    اراک -خیابان شریعتی-خیابان جنت
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div className='w-full bg-white rounded-3xl mt-8 p-8'>
+                        <div className='flex justify-between items-center'>
+                            <div>
+                                {t('receip.detail_receip')}
+                            </div>
+                            <div className='flex gap-2 text-xs items-center'>
+                                <StatusCircle
+                                    color='#FF7B00'
+                                />
+                                <div>
+                                    {t('receip.not_paid')}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className='mt-7 text-sm'>
+                            <div className='flex justify-between items-center text-description h-14'>
+                                <div>
+                                    {t('receip.description')}
+                                </div>
+                                <div>
+                                    {t('receip.price')}
+                                </div>
+                            </div>
+                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
+                                <div>
+                                    اکانت یکساله با دسترسی
+                                </div>
+                                <div>
+                                    ۱۰,۰۰۰,۰۰۰ ریال
+                                </div>
+                            </div>
+                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
+                                <div>
+                                    ۱۰٪ ارزش افزوده
+                                </div>
+                                <div>
+                                    ۱۰,۰۰۰,۰۰۰ ریال
+                                </div>
+                            </div>
+                            <div className='flex justify-between items-center text-xs border-t border-[#EAEDF5] h-14'>
+                                <div>
+                                    جمع کل
+                                </div>
+                                <div>
+                                    ۱۰,۰۰۰,۰۰۰ ریال
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
+                    <div className='flex justify-between items-center'>
+                        <div>
+                            {t('receip.receip_information')}
+                        </div>
+                        <div className='flex gap-2 text-xs items-center'>
+                            <StatusCircle
+                                color='#FF7B00'
+                            />
+                            <div>پرداخت نشده</div>
+                        </div>
+                    </div>
+
+                    <div className='mt-6 text-xs font-extralight'>
+                        <div className='flex justify-between h-12 border-b items-center'>
+                            <div className='text-description'>
+                                {t('receip.date_factor')}
+                            </div>
+                            <div>
+                                ۱۴۰۲/۱۰/۰۴
+                            </div>
+                        </div>
+                        <div className='flex justify-between h-12 border-b items-center'>
+                            <div className='text-description'>
+                                {t('receip.due_date')}
+                            </div>
+                            <div>
+                                ۱۴۰۲/۱۰/۰۴
+                            </div>
+                        </div>
+                        <div className='flex justify-between h-12 border-b items-center'>
+                            <div className='text-description'>
+                                {t('receip.factor_number')}
+                            </div>
+                            <div>
+                                ۱۲۳۱
+                            </div>
+                        </div>
+                        <div className='flex justify-between h-12 border-b items-center'>
+                            <div className='text-description'>
+                                {t('receip.status_factor')}
+                            </div>
+                            <div>
+                                تایید شده
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='mt-5 flex justify-center gap-2'>
+                        <div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
+                            <img src={SamanImage} alt='saman' className='w-8 h-8' />
+                            <div className='mt-2'>
+                                بانک سامان
+                            </div>
+                        </div>
+                        <div className='border size-[72px] flex-col text-[10px] justify-center items-center rounded-xl border-border flex'>
+                            <img src={SamanImage} alt='saman' className='w-8 h-8' />
+                            <div className='mt-2'>
+                                بانک سامان
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default ReceiptsDetail
\ No newline at end of file
diff --git a/src/pages/receipts/List.tsx b/src/pages/receipts/List.tsx
new file mode 100644
index 0000000..dfd8837
--- /dev/null
+++ b/src/pages/receipts/List.tsx
@@ -0,0 +1,112 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tabs from '../../components/Tabs'
+import { Calendar, CloseCircle, Eye, FolderOpen, MoneyChange, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
+import Td from '../../components/Td'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const ReceiptsList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [activeTab, setActiveTab] = useState<string>('unpaid')
+
+    return (
+        <div className='flex justify-center'>
+        <div className='mt-4 w-full max-w-[1200px]'>
+            <div>
+                {t('receip.Language_learners_list')}
+            </div>
+
+            <div className='mt-14'>
+                <Tabs
+                    active={activeTab}
+                    items={[
+                        {
+                            icon: <WalletRemove color={activeTab === 'unpaid' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.dont_pay'),
+                            value: 'unpaid'
+                        },
+                        {
+                            icon: <WalletSearch color={activeTab === 'not_confimed' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.dont_confrim'),
+                            value: 'not_confimed'
+                        },
+                        {
+                            icon: <WalletCheck color={activeTab === 'paid' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.paid'),
+                            value: 'paid'
+                        },
+                        {
+                            icon: <CloseCircle color={activeTab === 'canceled' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.canceled'),
+                            value: 'canceled'
+                        },
+                        {
+                            icon: <MoneyChange color={activeTab === 'returned' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.returned'),
+                            value: 'returned'
+                        },
+                        {
+                            icon: <Calendar color={activeTab === 'time' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.its_time'),
+                            value: 'time'
+                        },
+                        {
+                            icon: <FolderOpen color={activeTab === 'archive' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('receip.archive'),
+                            value: 'archive'
+                        },
+                    ]}
+                    onChange={setActiveTab}
+                />
+            </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('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''}>
+                                <Link to={Pages.receipts.detail + '1'}>
+                                    <Eye size={20} color='black' />
+                                </Link>
+                            </Td>
+                        </tr>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        </div>
+    )
+}
+
+export default ReceiptsList
\ No newline at end of file
diff --git a/src/pages/ticket/CreateTicket.tsx b/src/pages/ticket/CreateTicket.tsx
new file mode 100644
index 0000000..03b42e0
--- /dev/null
+++ b/src/pages/ticket/CreateTicket.tsx
@@ -0,0 +1,243 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
+import UploadBox from '../../components/UploadBox'
+import Button from '../../components/Button'
+import { TickSquare } from 'iconsax-react'
+import { useCreateTicket, useGetCategoriesTicket, useMultiUpload } from './hooks/useTicketData'
+import { useGetProfile } from '../profile/hooks/useProfileData'
+import PageLoading from '../../components/PageLoading'
+import { useFormik } from 'formik'
+import { CreateTicketType } from './types/TicketTypes'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const CreateTicket: FC = () => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const [files, setFiles] = useState<File[]>([])
+    const getProfile = useGetProfile()
+    const getCategories = useGetCategoriesTicket()
+    const multiUpload = useMultiUpload()
+    const createTicket = useCreateTicket()
+
+    const formik = useFormik<CreateTicketType>({
+        initialValues: {
+            subject: '',
+            message: '',
+            categoryId: '',
+            priority: 'LOW',
+            danakServiceId: '',
+            title: '',
+            attachmentUrls: []
+        },
+        validationSchema: Yup.object({
+            subject: Yup.string().required(t('errors.required')),
+            message: Yup.string().required(t('errors.required')),
+            categoryId: Yup.string().required(t('errors.required')),
+            priority: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (files.length > 0) {
+                const images = new FormData()
+                files.forEach(file => {
+                    images.append('files', file)
+                })
+                await multiUpload.mutateAsync(images, {
+                    onSuccess: async (data) => {
+                        values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                delete values.attachmentUrls
+            }
+
+
+            createTicket.mutate(values, {
+                onSuccess: (data) => {
+                    toast.success(t('success'))
+                    formik.resetForm()
+                    navigate(Pages.ticket.detail + data.data?.ticketId)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    console.log(formik.errors);
+
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('ticket.new_ticket')}
+            </div>
+
+            {
+                getProfile.isPending || getCategories.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex gap-6 xl:mt-8 mt-4'>
+                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                            <div>
+                                {t('ticket.submit_your_message')}
+                            </div>
+
+                            <div className='mt-6 rowTwoInput'>
+                                <Input
+                                    label={t('ticket.name')}
+                                    readOnly
+                                    placeholder={getProfile?.data?.data?.user?.firstName + ' ' + getProfile?.data?.data?.user?.lastName}
+                                />
+                                <Input
+                                    label={t('ticket.email')}
+                                    readOnly
+                                    placeholder={getProfile?.data?.data?.user?.email}
+                                />
+                            </div>
+
+
+                            <div className='mt-6 rowTwoInput'>
+                                <Input
+                                    label={t('ticket.subject')}
+                                    placeholder={t('ticket.enter_your_subject')}
+                                    name='subject'
+                                    value={formik.values.subject}
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ''}
+                                />
+                                <Select
+                                    label={t('ticket.priority')}
+                                    items={[
+                                        {
+                                            label: t('ticket.low'),
+                                            value: 'LOW'
+                                        },
+                                        {
+                                            label: t('ticket.medium'),
+                                            value: 'MEDIUM'
+                                        },
+                                        {
+                                            label: t('ticket.high'),
+                                            value: 'HIGH'
+                                        }
+                                    ]}
+                                    placeholder={t('select')}
+                                    className='border'
+                                    name='priority'
+                                    value={formik.values.priority}
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ''}
+                                />
+                            </div>
+
+                            <div className='mt-6 rowTwoInput'>
+                                <Select
+                                    label={t('ticket.select_your_service')}
+                                    items={[
+                                        {
+                                            label: '',
+                                            value: ''
+                                        }
+                                    ]}
+                                    placeholder={t('ticket.not_once')}
+                                    className='border'
+                                    name='danakServiceId'
+                                />
+                                <Select
+                                    label={t('ticket.category')}
+                                    items={getCategories.data?.data?.ticketCategories?.map((item: { id: string, title: string }) => ({
+                                        label: item.title,
+                                        value: item.id
+                                    })
+                                    )}
+                                    placeholder={t('select')}
+                                    className='border'
+                                    name='categoryId'
+                                    value={formik.values.categoryId}
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
+                                />
+                            </div>
+                            <div className='mt-6'>
+                                <Textarea
+                                    label={t('description')}
+                                    placeholder={t('ticket.your_description')}
+                                    name='message'
+                                    value={formik.values.message}
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ''}
+                                />
+                            </div>
+
+                            <div className='mt-6'>
+                                <UploadBox
+                                    label={t('ticket.attachment')}
+                                    isMultiple
+                                    onChange={setFiles}
+                                />
+                            </div>
+
+                            <div className='mt-8 flex justify-end'>
+                                <Button
+                                    label={t('ticket.send')}
+                                    className='max-w-[100px]'
+                                    onClick={() => formik.handleSubmit()}
+                                    isLoading={createTicket.isPending || multiUpload.isPending}
+                                />
+                            </div>
+                        </div>
+
+                        <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                            <div className='text-sm'>
+                                {t('ticket.title_hint')}
+                            </div>
+
+                            <div className='mt-6'>
+                                <div className='flex items-start gap-2 border-b pb-5'>
+                                    <div>
+                                        <TickSquare size={20} color='black' variant='Bold' />
+                                    </div>
+                                    <div className='text-description text-xs leading-5'>
+                                        سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
+                                    </div>
+                                </div>
+                                <div className='flex items-start gap-2 mt-6 border-b pb-5'>
+                                    <div>
+                                        <TickSquare size={20} color='black' variant='Bold' />
+                                    </div>
+                                    <div className='text-description text-xs leading-5'>
+                                        لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
+                                    </div>
+                                </div>
+                                <div className='flex items-start gap-2 mt-6'>
+                                    <div>
+                                        <TickSquare size={20} color='black' variant='Bold' />
+                                    </div>
+                                    <div className='text-description text-xs leading-5'>
+                                        پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            }
+
+
+
+        </div>
+    )
+}
+
+export default CreateTicket
\ No newline at end of file
diff --git a/src/pages/ticket/Detail.tsx b/src/pages/ticket/Detail.tsx
new file mode 100644
index 0000000..1e8bde0
--- /dev/null
+++ b/src/pages/ticket/Detail.tsx
@@ -0,0 +1,309 @@
+import { FC, Fragment, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../components/Input'
+import Textarea from '../../components/Textarea'
+import UploadBox from '../../components/UploadBox'
+import Button from '../../components/Button'
+import { CloseCircle, InfoCircle, Paperclip2 } from 'iconsax-react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { useAddMessageTicket, useCloseTicket, useGetMessages, useMultiUpload } from './hooks/useTicketData'
+import PageLoading from '../../components/PageLoading'
+import moment from 'moment-jalaali'
+import { useFormik } from 'formik'
+import { AddMessageTicketType } from './types/TicketTypes'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { clx } from '../../helpers/utils'
+import { Pages } from '../../config/Pages'
+
+const TicketDetail: FC = () => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const { id } = useParams()
+    const getMessages = useGetMessages(id ? id : '')
+    const [files, setFiles] = useState<File[]>([])
+    const addMessage = useAddMessageTicket(id ? id : '')
+    const multiUpload = useMultiUpload()
+    const [isResetFiles, setIsResetFiles] = useState<boolean>(false)
+    const closeTicket = useCloseTicket()
+
+    const formik = useFormik<AddMessageTicketType>({
+        initialValues: {
+            content: '',
+            attachmentUrls: [],
+        },
+        validationSchema: Yup.object().shape({
+            content: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (files.length > 0) {
+                const images = new FormData()
+                files.forEach(file => {
+                    images.append('files', file)
+                })
+                await multiUpload.mutateAsync(images, {
+                    onSuccess: async (data) => {
+                        values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                delete values.attachmentUrls
+            }
+
+            addMessage.mutate(values, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                    formik.resetForm()
+                    setFiles([])
+                    setIsResetFiles(true)
+                    setTimeout(() => {
+                        setIsResetFiles(false)
+                    }, 1000);
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        },
+    })
+
+    const hadleCloseTicket = () => {
+        closeTicket.mutate(id ? id : '', {
+            onSuccess: () => {
+                toast.success(t('success'))
+                navigate(Pages.ticket.list)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    return (
+        <div className='mt-4'>
+            <div className='flex gap-1'>
+                <div>{t('ticket.ticket_number')}</div>
+                <div>12312</div>
+            </div>
+            {
+                getMessages.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex xl:flex-row flex-col-reverse gap-6 xl:mt-8 mt-6'>
+                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+                            <div className='gap-6 rowTwoInput'>
+                                <Input
+                                    label={t('ticket.select_your_service')}
+                                    value={'دی منو'}
+                                    readOnly
+                                />
+                                <Input
+                                    label={t('ticket.user_name')}
+                                    value={getMessages.data?.data?.ticket?.user?.firstName + ' ' + getMessages.data?.data?.ticket?.user?.lastName}
+                                    readOnly
+                                />
+                            </div>
+
+                            <div className='mt-8 xl:text-sm text-xs'>
+                                {getMessages.data?.data?.ticket?.subject}
+                            </div>
+
+                            {
+                                getMessages.data?.data?.messages.map((item: any) => {
+                                    if (item?.author?.role?.name === 'user') {
+                                        return (
+                                            <div key={item.id} className='mt-6 xl:text-sm text-xs bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none xl:max-w-[70%] max-w-[90%]'>
+                                                <div className='leading-7'>
+                                                    {item.content}
+                                                </div>
+                                                <div className='flex dltr end mt-6 text-xs text-description'>
+                                                    {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
+                                                </div>
+
+                                                <div className='flex gap-2 flex-wrap text-sm'>
+                                                    {
+                                                        item.attachments && item?.attachments?.map((item: any, index: number) => {
+                                                            return (
+                                                                <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={item.id}>
+                                                                    <Paperclip2 size={20} color='#0047FF' />
+                                                                    <a href={item.attachmentUrl} target='_blank' rel='noreferrer'>
+                                                                        {t('attach') + ' ' + Number(index + 1)}
+                                                                    </a>
+                                                                </div>
+                                                            )
+                                                        })
+                                                    }
+                                                </div>
+                                            </div>
+                                        )
+                                    } else {
+                                        return (
+                                            <div className='w-full flex justify-end'>
+                                                <div className='mt-6 xl:text-sm text-xs bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none xl:max-w-[70%] max-w-[90%]'>
+                                                    <div className='flex gap-1'>
+                                                        <div className='font-bold'>
+                                                            {t('ticket.expert')}
+                                                        </div>
+                                                        <div>{item.author?.firstName + ' ' + item?.author?.lastName}</div>
+                                                    </div>
+                                                    <div className='leading-7 mt-4'>
+                                                        {item.content}
+                                                    </div>
+                                                    <div className='flex justify-end mt-6 text-xs text-description'>
+                                                        10:07  |  1403/09/30
+                                                    </div>
+                                                </div>
+
+                                                <div className='flex gap-2 flex-wrap text-sm'>
+                                                    {
+                                                        item.attachments && item?.attachments?.map((item: any, index: number) => {
+                                                            return (
+                                                                <div className='text-[#0047FF] mt-2 flex  gap-1 items-center' key={item.id}>
+                                                                    <Paperclip2 size={20} color='#0047FF' />
+                                                                    <a href={item.attachmentUrl} target='_blank' rel='noreferrer'>
+                                                                        {t('attach') + ' ' + Number(index + 1)}
+                                                                    </a>
+                                                                </div>
+                                                            )
+                                                        })
+                                                    }
+                                                </div>
+                                            </div>
+                                        )
+                                    }
+                                })
+                            }
+
+
+
+                            {
+                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
+                                <Fragment>
+                                    <div className='mt-9'>
+                                        <Textarea
+                                            label={t('ticket.answer')}
+                                            placeholder={t('ticket.your_description')}
+                                            value={formik.values.content}
+                                            onChange={formik.handleChange}
+                                            name='content'
+                                            error_text={formik.touched.content && formik.errors.content ? formik.errors.content : ''}
+                                        />
+                                    </div>
+
+                                    <div className='mt-7'>
+                                        <UploadBox
+                                            label={t('ticket.attachment')}
+                                            onChange={setFiles}
+                                            isMultiple
+                                            isReset={isResetFiles}
+                                        />
+                                    </div>
+
+                                    <div className='flex justify-end mt-6'>
+                                        <Button
+                                            label={t('ticket.send')}
+                                            className='max-w-[100px]'
+                                            onClick={() => formik.handleSubmit()}
+                                            isLoading={addMessage.isPending || multiUpload.isPending}
+                                        />
+                                    </div>
+                                </Fragment>
+                            }
+                            <div className='h-8'></div>
+                        </div>
+                        <div className={`h-fit lg:sticky left-0 lg:top-0 xl:w-sidebar w-full`}>
+                            {
+                                getMessages.data?.data?.ticket?.status !== 'CLOSED' &&
+                                <div className='bg-white xl:p-6 p-4 rounded-3xl flex gap-4'>
+                                    <Button
+                                        label={t('ticket.send_answer')}
+                                        className='text-xs xl:h-10 h-8'
+                                    />
+                                    <Button
+                                        className='bg-[#D52903] xl:h-10 h-8'
+                                        onClick={hadleCloseTicket}
+                                        isLoading={closeTicket.isPending}
+                                    >
+                                        <div className='flex gap-2 text-xs items-center'>
+                                            <CloseCircle
+                                                color='white'
+                                                size={20}
+                                            />
+                                            <div>
+                                                {t('ticket.close_ticket')}
+                                            </div>
+                                        </div>
+                                    </Button>
+                                </div>
+                            }
+                            <div className={clx(
+                                'bg-white p-6 rounded-3xl mt-8',
+                                getMessages.data?.data?.ticket?.status === 'CLOSED' && 'mt-0'
+                            )}>
+                                <div className='flex justify-between'>
+                                    <div className='text-sm'>
+                                        {t('ticket.info_ticket')}
+                                    </div>
+                                    <div className={clx(
+                                        'h-7 px-3 rounded-xl flex items-center text-xs bg-green-100 text-green-400',
+                                        getMessages.data?.data?.ticket?.status === 'PENDING' && 'bg-orange-100 text-orange-700',
+                                        getMessages.data?.data?.ticket?.status === 'CLOSED' && 'bg-red-100 text-red-400'
+                                    )}>
+                                        {t(`ticket.${getMessages.data?.data?.ticket?.status}`)}
+                                    </div>
+                                </div>
+
+                                <div className='mt-14 text-xs w-full'>
+                                    <div className='flex justify-between text-description'>
+                                        <div>{t('ticket.ticket_number')}</div>
+                                        <div>
+                                            {getMessages.data?.data?.ticket?.numericId}
+                                        </div>
+                                    </div>
+                                    <div className='flex mt-6 justify-between text-description'>
+                                        <div>{t('ticket.asignto')}</div>
+                                        <div>
+                                            {getMessages.data?.data?.ticket?.assignedTo ? getMessages.data?.data?.ticket?.assignedTo?.firstName + ' ' + getMessages.data?.data?.ticket?.assignedTo?.lastName : ''}
+                                        </div>
+                                    </div>
+                                    <div className='flex mt-6 justify-between text-description'>
+                                        <div>{t('date')}</div>
+                                        <div className='dltr'>
+                                            {moment(getMessages.data?.data?.ticket?.createdAt).format('jYYYY/jMM/jDD HH:mm')}
+                                        </div>
+                                    </div>
+                                    <div className='flex mt-6 justify-between text-description'>
+                                        <div>{t('ticket.category')}</div>
+                                        <div>
+                                            {getMessages.data?.data?.ticket?.category?.title}
+                                        </div>
+                                    </div>
+                                    <div className='flex mt-6 justify-between text-description'>
+                                        <div>{t('ticket.priority')}</div>
+                                        <div>
+                                            {getMessages.data?.data?.ticket?.priority === 'low' ? t('ticket.low') : getMessages.data?.data?.ticket?.priority === 'medium' ? t('ticket.medium') : t('ticket.high')}
+                                        </div>
+                                    </div>
+
+                                </div>
+
+                                <div className='mt-10 border-t text-xs pt-5 border-border items-center flex gap-2'>
+                                    <InfoCircle size={20} color='black' />
+                                    <div>
+                                        {t('ticket.update_sms')}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            }
+        </div>
+    )
+}
+
+export default TicketDetail
\ No newline at end of file
diff --git a/src/pages/ticket/TicketList.tsx b/src/pages/ticket/TicketList.tsx
new file mode 100644
index 0000000..002ddaf
--- /dev/null
+++ b/src/pages/ticket/TicketList.tsx
@@ -0,0 +1,112 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { Add, Eye, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
+import Tabs from '../../components/Tabs'
+import Td from '../../components/Td'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { useGetTickets } from './hooks/useTicketData'
+import moment from 'moment-jalaali'
+
+const TicketList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED'>('ANSWERED')
+    const getTickets = useGetTickets(activeTab)
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('ticket.tickets')}
+                </div>
+
+                <Link to={Pages.ticket.create}>
+                    <Button
+                        className='w-[172px]'
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <Add size={20} color='white' />
+                            <div>
+                                {t('ticket.new_ticket')}
+                            </div>
+                        </div>
+                    </Button>
+                </Link>
+            </div>
+
+            <div className='mt-14'>
+                <Tabs
+                    active={activeTab}
+                    items={[
+                        {
+                            icon: <MessageTick color={activeTab === 'ANSWERED' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.answered'),
+                            value: 'ANSWERED'
+                        },
+                        {
+                            icon: <MessageTime color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.checking'),
+                            value: 'PENDING'
+                        },
+                        // {
+                        //     icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
+                        //     label: t('ticket.wait_answered'),
+                        //     value: 'wating'
+                        // },
+                        {
+                            icon: <MessageRemove color={activeTab === 'CLOSED' ? 'black' : '#8C90A3'} size={22} />,
+                            label: t('ticket.closed'),
+                            value: 'CLOSED'
+                        },
+                    ]}
+                    onChange={(value) => setActiveTab(value as 'ANSWERED' | 'PENDING' | 'CLOSED')}
+                />
+            </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('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            getTickets.data?.data?.tickets?.map((item: any) => (
+                                <tr key={item.id} className='tr'>
+                                    <Td text={item.numericId} />
+                                    <Td text={item.subject} />
+                                    <Td text={item?.category?.title} />
+                                    <Td text={''}>
+                                        <div className='dltr text-right'>
+                                            {moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')}
+                                        </div>
+                                    </Td>
+                                    <Td text={t(`ticket.${item.status}`)} />
+                                    <Td text={t(`ticket.${item.priority}`)} />
+                                    <Td text={''}>
+                                        <Link to={Pages.ticket.detail + item.id}>
+                                            <Eye size={20} color='#8C90A3' />
+                                        </Link>
+                                    </Td>
+                                    <Td text={''} />
+                                </tr>
+                            ))
+                        }
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default TicketList
\ No newline at end of file
diff --git a/src/pages/ticket/hooks/useTicketData.ts b/src/pages/ticket/hooks/useTicketData.ts
new file mode 100644
index 0000000..7587f58
--- /dev/null
+++ b/src/pages/ticket/hooks/useTicketData.ts
@@ -0,0 +1,62 @@
+import * as api from "../service/TicketService";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AddMessageTicketType, CreateTicketType } from "../types/TicketTypes";
+
+export const useGetTickets = (status: string) => {
+  return useQuery({
+    queryKey: ["tickets", status],
+    queryFn: () => api.getTickets(status),
+  });
+};
+
+export const useCreateTicket = () => {
+  return useMutation({
+    mutationFn: (variables: CreateTicketType) => api.createTicket(variables),
+  });
+};
+
+export const useGetCategoriesTicket = () => {
+  return useQuery({
+    queryKey: ["category-tickets"],
+    queryFn: () => api.getCategoriesTicket(),
+  });
+};
+
+export const useSingleUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadSingle(variables),
+  });
+};
+export const useMultiUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadMultiple(variables),
+  });
+};
+
+export const useGetMessages = (id: string) => {
+  return useQuery({
+    queryKey: ["ticket-messages", id],
+    queryFn: () => api.getMessages(id),
+    enabled: !!id,
+  });
+};
+
+export const useAddMessageTicket = (id: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: AddMessageTicketType) =>
+      api.addMessageTicket(id, variables),
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        queryKey: ["ticket-messages", id],
+      });
+    },
+  });
+};
+
+export const useCloseTicket = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.closeTicket(id),
+  });
+};
diff --git a/src/pages/ticket/service/TicketService.ts b/src/pages/ticket/service/TicketService.ts
new file mode 100644
index 0000000..440f759
--- /dev/null
+++ b/src/pages/ticket/service/TicketService.ts
@@ -0,0 +1,45 @@
+import axios from "../../../config/axios";
+import { AddMessageTicketType, CreateTicketType } from "../types/TicketTypes";
+
+export const getTickets = async (status: string) => {
+  const { data } = await axios.get(`/tickets?status=${status}`);
+  return data;
+};
+
+export const createTicket = async (params: CreateTicketType) => {
+  const { data } = await axios.post(`/tickets`, params);
+  return data;
+};
+
+export const getCategoriesTicket = async () => {
+  const { data } = await axios.get(`/tickets/categories`);
+  return data;
+};
+
+export const uploadSingle = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/single-file`, params);
+  return data;
+};
+
+export const uploadMultiple = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/multi-file`, params);
+  return data;
+};
+
+export const getMessages = async (id: string) => {
+  const { data } = await axios.get(`/tickets/${id}/messages`);
+  return data;
+};
+
+export const addMessageTicket = async (
+  id: string,
+  params: AddMessageTicketType
+) => {
+  const { data } = await axios.post(`/tickets/${id}/messages`, params);
+  return data;
+};
+
+export const closeTicket = async (id: string) => {
+  const { data } = await axios.post(`/tickets/${id}/close`);
+  return data;
+};
diff --git a/src/pages/ticket/types/TicketTypes.ts b/src/pages/ticket/types/TicketTypes.ts
new file mode 100644
index 0000000..2eb7198
--- /dev/null
+++ b/src/pages/ticket/types/TicketTypes.ts
@@ -0,0 +1,14 @@
+export type CreateTicketType = {
+  title: string;
+  subject: string;
+  priority: "LOW" | "MEDIUM" | "HIGH";
+  danakServiceId?: string;
+  categoryId: string;
+  message: string;
+  attachmentUrls?: string[];
+};
+
+export type AddMessageTicketType = {
+  content: string;
+  attachmentUrls?: string[];
+};
diff --git a/src/pages/transaction/.DS_Store b/src/pages/transaction/.DS_Store
new file mode 100644
index 0000000..09a9102
Binary files /dev/null and b/src/pages/transaction/.DS_Store differ
diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx
new file mode 100644
index 0000000..c14696d
--- /dev/null
+++ b/src/pages/transaction/List.tsx
@@ -0,0 +1,123 @@
+import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import Detail from './components/Detail'
+
+const TransactionList: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('transaction.transaction')}
+            </div>
+
+            <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'>
+                            <MoneySend size={18} color='black' />
+                        </div>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
+                            {t('transaction.totao_deposit')}
+                        </div>
+                    </div>
+                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
+                        <div className='text-[#101828] xl:text-xs text-[10px]'>
+                            ۱۴۰,۰۰۰,۰۰۰ ریال
+                        </div>
+                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
+                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
+                            <div>۳۰٪</div>
+                        </div>
+                    </div>
+                </div>
+                <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'>
+                            <MoneyRecive size={18} color='black' />
+                        </div>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
+                            {t('transaction.total_withdrawal')}
+                        </div>
+                    </div>
+                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
+                        <div className='text-[#101828] xl:text-xs text-[10px]'>
+                            ۱۴۰,۰۰۰,۰۰۰ ریال
+                        </div>
+                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
+                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
+                            <div>۳۰٪</div>
+                        </div>
+                    </div>
+                </div>
+                <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 xl:flex-row flex-col justify-center items-center'>
+                            <MoneyRecive size={18} color='black' />
+                        </div>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
+                            {t('transaction.balance')}
+                        </div>
+                    </div>
+                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
+                        <div className='text-[#101828] xl:text-xs text-[10px]'>
+                            ۱۴۰,۰۰۰,۰۰۰ ریال
+                        </div>
+                        <div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
+                            <ArrowRight size={12} color='red' className='rotate-45' />
+                            <div>۳۰٪</div>
+                        </div>
+                    </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('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''}>
+                                <Detail
+                                />
+                            </Td>
+                        </tr>
+                        <tr className='tr'>
+                            <Td text={t('ticket.number')} />
+                            <Td text={t('ticket.title')} />
+                            <Td text={t('ticket.team')} />
+                            <Td text={t('ticket.date')} />
+                            <Td text={t('ticket.status')} />
+                            <Td text={t('ticket.priority')} />
+                            <Td text={t('ticket.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+    )
+}
+
+export default TransactionList
\ No newline at end of file
diff --git a/src/pages/transaction/components/Detail.tsx b/src/pages/transaction/components/Detail.tsx
new file mode 100644
index 0000000..cd74852
--- /dev/null
+++ b/src/pages/transaction/components/Detail.tsx
@@ -0,0 +1,177 @@
+import { Calendar, CardPos, Document, DocumentDownload, DollarCircle, Eye, NoteText, Printer, Profile, Receipt, Status, Wallet1 } from 'iconsax-react'
+import { FC, useState } from 'react'
+import DefaulModal from '../../../components/DefaulModal'
+import { useTranslation } from 'react-i18next'
+import StatusCircle from '../../../components/StatusCircle'
+import Button from '../../../components/Button'
+
+const Detail: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+
+    return (
+        <div>
+            <Eye onClick={() => setShowModal(true)} className='cursor-pointer' size={20} color='black' />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header={`${t('transaction.transaction2')} ۱۲۳۴۵۵`}
+            >
+                <div className='my-10'>
+                    <div className='flex lg:flex-row flex-col '>
+                        <div className='flex-1 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <CardPos size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.type_deposit')}
+                                </div>
+                            </div>
+                            <div>
+                                واریز شتابی
+                            </div>
+                        </div>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Status size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.status')}
+                                </div>
+                            </div>
+                            <div className='flex gap-2 items-center'>
+                                <StatusCircle
+                                    color='#00BA4B'
+                                />
+                                <div>{t('transaction.success_paid')}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='flex lg:flex-row flex-col'>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Wallet1 size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.type_getway')}
+                                </div>
+                            </div>
+                            <div>
+                                آنلاین بانک سامان
+                            </div>
+                        </div>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <DollarCircle size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.amount')}
+                                </div>
+                            </div>
+                            <div className='flex gap-2 items-center'>
+                                ۱۰,۰۰۰,۰۰۰ ریال
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='flex lg:flex-row flex-col '>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Profile size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.doer')}
+                                </div>
+                            </div>
+                            <div>
+                                مهرداد مظفری
+                            </div>
+                        </div>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Calendar size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.date')}
+                                </div>
+                            </div>
+                            <div className='flex gap-2 items-center'>
+                                ۱۴۰۳/۰۹/۳۰
+                            </div>
+                        </div>
+                    </div>
+                    <div className='flex lg:flex-row flex-col '>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Document size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.tracking_number')}
+                                </div>
+                            </div>
+                            <div>
+                                bbd704c-۱۲۳۴۵۶
+                            </div>
+                        </div>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <Receipt size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.order_number')}
+                                </div>
+                            </div>
+                            <div className='flex gap-2 items-center'>
+                                bbd704c-۱۲۳۴۵۶
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='flex lg:flex-row flex-col gap-8'>
+                        <div className='flex-1 mt-4 px-6 h-10 flex justify-between items-center'>
+                            <div className='flex gap-2 text-description'>
+                                <NoteText size={14} color='#8C90A3' />
+                                <div>
+                                    {t('transaction.description_transaction')}
+                                </div>
+                            </div>
+                            <div>
+                                -
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='border-t pt-8 flex justify-end border-white border-opacity-40'>
+                    <div className='flex gap-5'>
+                        <Button
+                            className='bg-white bg-opacity-35 w-[170px] text-description'
+                        >
+                            <div className='flex gap-2 items-center  justify-center'>
+                                <Printer
+                                    size={20}
+                                    color='#8C90A3'
+                                />
+                                <div>
+                                    {t('transaction.print')}
+                                </div>
+                            </div>
+
+                        </Button>
+                        <Button
+                            className='bg-black w-[170px] '
+                        >
+                            <div className='flex gap-2 items-center  justify-center'>
+                                <DocumentDownload
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('transaction.download')}
+                                </div>
+                            </div>
+
+                        </Button>
+                    </div>
+                </div>
+            </DefaulModal>
+        </div>
+    )
+}
+
+export default Detail
\ No newline at end of file
diff --git a/src/pages/wallet/Wallet.tsx b/src/pages/wallet/Wallet.tsx
new file mode 100644
index 0000000..8f8c390
--- /dev/null
+++ b/src/pages/wallet/Wallet.tsx
@@ -0,0 +1,93 @@
+import { Cards, Money3, MoneyRecive, TickSquare } from 'iconsax-react'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tabs from '../../components/Tabs'
+import Online from './components/Online'
+import CardtoCard from './components/CardtoCard'
+import Sheba from './components/Sheba'
+
+const Wallet: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [activeTab, setActiveTab] = useState<string>('online')
+
+    return (
+        <div className='mt-4 pb-14'>
+            <div>
+                {t('wallet.increese_wallet')}
+            </div>
+
+            <div className='mt-8 flex gap-6'>
+                <div className='flex-1'>
+                    <Tabs
+                        isFullWidth
+                        active={activeTab}
+                        items={[
+                            {
+                                label: t('wallet.online_pay'),
+                                value: 'online',
+                                icon: <MoneyRecive color={activeTab === 'online' ? 'black' : '#8C90A3'} size={22} />
+                            },
+                            {
+                                icon: <Cards color={activeTab === 'card' ? 'black' : '#8C90A3'} size={22} />,
+                                label: t('wallet.card_to_card'),
+                                value: 'card'
+                            },
+                            {
+                                icon: <Money3 color={activeTab === 'sheba' ? 'black' : '#8C90A3'} size={22} />,
+                                label: t('wallet.sheba'),
+                                value: 'sheba'
+                            },
+                        ]}
+                        onChange={setActiveTab}
+                    />
+
+                    {
+                        activeTab === 'online' ?
+                            <Online />
+                            : activeTab === 'card' ?
+                                <CardtoCard />
+                                : <Sheba />
+                    }
+
+                </div>
+
+                <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                    <div className='text-sm'>
+                        {t('ticket.title_hint')}
+                    </div>
+
+                    <div className='mt-6'>
+                        <div className='flex items-start gap-2 border-b pb-5'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
+                            </div>
+                        </div>
+                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
+                            </div>
+                        </div>
+                        <div className='flex items-start gap-2 mt-6'>
+                            <div>
+                                <TickSquare size={20} color='black' variant='Bold' />
+                            </div>
+                            <div className='text-description text-xs leading-5'>
+                                پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Wallet
\ No newline at end of file
diff --git a/src/pages/wallet/components/CardtoCard.tsx b/src/pages/wallet/components/CardtoCard.tsx
new file mode 100644
index 0000000..5f7890a
--- /dev/null
+++ b/src/pages/wallet/components/CardtoCard.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../../components/Input'
+import UploadBox from '../../../components/UploadBox'
+import Button from '../../../components/Button'
+
+const CardtoCard: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-8 bg-white p-8 rounded-3xl'>
+            <div>
+                {t('wallet.card_to_card')}
+            </div>
+
+            <div className='mt-8'>
+                <Input
+                    label={t('wallet.amount')}
+                    placeholder={t('wallet.enter_amount_card')}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <UploadBox
+                    label={t('wallet.upload_deposit_slip')}
+                />
+            </div>
+
+            <div className='mt-10 flex justify-end'>
+                <Button
+                    label={t('wallet.submit_slip')}
+                    className='w-[180px]'
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default CardtoCard
\ No newline at end of file
diff --git a/src/pages/wallet/components/Online.tsx b/src/pages/wallet/components/Online.tsx
new file mode 100644
index 0000000..3259145
--- /dev/null
+++ b/src/pages/wallet/components/Online.tsx
@@ -0,0 +1,111 @@
+import { FC, useState } from 'react'
+import Button from '../../../components/Button'
+import { useTranslation } from 'react-i18next'
+import { clx } from '../../../helpers/utils'
+import SamanImage from '../../../assets/images/saman.png'
+import Input from '../../../components/Input'
+
+const Online: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [priceSelect, setPriceSelect] = useState<number>(1)
+    const [bankSelected, setBankSelected] = useState<number>(1)
+
+    return (
+        <div className='mt-8 bg-white p-8 rounded-3xl'>
+            <div>
+                {t('wallet.online_pay')}
+            </div>
+
+            <div className='mt-8 text-sm'>
+                {t('wallet.select_price')}
+            </div>
+
+            <div className='mt-4 flex gap-4 flex-wrap'>
+                <div onClick={() => setPriceSelect(1)} className={clx(
+                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-4 rounded-lg',
+                    priceSelect === 1 && 'border-black'
+                )}>
+                    ۱۰,۰۰۰,۰۰۰ تومان
+                </div>
+                <div onClick={() => setPriceSelect(2)} className={clx(
+                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
+                    priceSelect === 2 && 'border-black'
+                )}>
+                    ۱۰,۰۰۰,۰۰۰ تومان
+                </div>
+                <div onClick={() => setPriceSelect(3)} className={clx(
+                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
+                    priceSelect === 3 && 'border-black'
+                )}>
+                    ۱۰,۰۰۰,۰۰۰ تومان
+                </div>
+                <div onClick={() => setPriceSelect(4)} className={clx(
+                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
+                    priceSelect === 4 && 'border-black'
+                )}>
+                    ۱۰,۰۰۰,۰۰۰ تومان
+                </div>
+                <div onClick={() => setPriceSelect(5)} className={clx(
+                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
+                    priceSelect === 5 && 'border-black'
+                )}>
+                    ۱۰,۰۰۰,۰۰۰ تومان
+                </div>
+            </div>
+
+            <div className='mt-9'>
+                <Input
+                    label={t('wallet.optional_price')}
+                    placeholder={t('wallet.enter_your_price')}
+                />
+            </div>
+
+            <div className='mt-8 text-sm'>
+                <div>
+                    {t('wallet.select_payment')}
+                </div>
+
+                <div className='mt-6 flex gap-4'>
+                    <div onClick={() => setBankSelected(1)} className={clx(
+                        'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
+                        bankSelected === 1 && 'border-black'
+                    )}>
+                        <img src={SamanImage} className='w-10' />
+                        <div>
+                            <div>
+                                بانک پارسیان
+                            </div>
+                            <div className='text-xs mt-1 text-description'>
+                                تمام کارت های عضو شتاب
+                            </div>
+                        </div>
+                    </div>
+                    <div onClick={() => setBankSelected(2)} className={clx(
+                        'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
+                        bankSelected === 2 && 'border-black'
+                    )}>
+                        <img src={SamanImage} className='w-10' />
+                        <div>
+                            <div>
+                                بانک پارسیان
+                            </div>
+                            <div className='text-xs mt-1 text-description'>
+                                تمام کارت های عضو شتاب
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-10 flex justify-end'>
+                    <Button
+                        label={t('wallet.pay')}
+                        className='w-[180px]'
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Online
\ No newline at end of file
diff --git a/src/pages/wallet/components/Sheba.tsx b/src/pages/wallet/components/Sheba.tsx
new file mode 100644
index 0000000..15ea594
--- /dev/null
+++ b/src/pages/wallet/components/Sheba.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '../../../components/Input'
+import UploadBox from '../../../components/UploadBox'
+import Button from '../../../components/Button'
+
+const Sheba: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-8 bg-white p-8 rounded-3xl'>
+            <div>
+                {t('wallet.pay_sheba')}
+            </div>
+
+            <div className='mt-8'>
+                <Input
+                    label={t('wallet.amount')}
+                    placeholder={t('wallet.enter_sheba_deposit')}
+                />
+            </div>
+
+            <div className='mt-8'>
+                <UploadBox
+                    label={t('wallet.upload_deposit_slip')}
+                />
+            </div>
+
+            <div className='mt-10 flex justify-end'>
+                <Button
+                    label={t('wallet.submit_slip')}
+                    className='w-[180px]'
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default Sheba
\ No newline at end of file
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
new file mode 100644
index 0000000..7f2b72b
--- /dev/null
+++ b/src/router/Main.tsx
@@ -0,0 +1,52 @@
+import Header from "../shared/Header"
+import SideBar from "../shared/SideBar"
+import '../assets/fonts/irancell/style.css'
+import { Route, Routes } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import Home from '../pages/home/Home'
+import ReceiptsList from '../pages/receipts/List'
+import AddCriticisms from '../pages/criticisms/Add'
+import Footer from "../shared/Footer"
+import GradeRecordes from "../pages/grade/records"
+import Certificate from "../pages/certificate/List"
+import AdmitCard from "../pages/admitCard/List"
+import MyCourses from "../pages/my-courses/List"
+import Payment from "../pages/payment/Details"
+import Wallet from "../pages/wallet/Wallet"
+import ReceiptsDetail from "../pages/receipts/Detail"
+import ReportCardList from "../pages/ReportCard/List"
+import TransactionList from "../pages/transaction/List"
+import Profile from "../pages/profile/Profile"
+import CompanyDetail from "../pages/company/Detail"
+const MainRouter = () => {
+    return (
+        <div className='p-4 overflow-hidden'>
+            <SideBar />
+            <Header />
+            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
+                <div className={`hide-scroll-bar overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
+                    <div>
+                        <Routes>
+                            <Route path={Pages.dashboard} element={<Home />} />
+                            <Route path={Pages.receipts.index} element={<ReceiptsList />} />
+                            <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
+                            <Route path={Pages.company.detail + ':id'} element={<CompanyDetail />} />
+                            <Route path={Pages.criticisms} element={<AddCriticisms />} />
+                            <Route path={Pages.grade.records} element={<GradeRecordes />} />
+                            <Route path={Pages.transactions} element={<TransactionList />} />
+                            <Route path={Pages.certificate} element={<Certificate />} />
+                            <Route path={Pages.admitCard} element={<AdmitCard />} />
+                            <Route path={Pages.myCourses} element={<MyCourses />} />
+                            <Route path={Pages.payment} element={<Payment />} />
+                            <Route path={Pages.wallet} element={<Wallet />} />
+                            <Route path={Pages.reportCard.list} element={<ReportCardList />} />
+                            <Route path={Pages.profile} element={<Profile />} />
+                        </Routes>
+                    </div>
+                </div>
+            </div>
+            <Footer />
+        </div>
+    )
+}
+export default MainRouter
\ No newline at end of file
diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx
new file mode 100644
index 0000000..16dd1cb
--- /dev/null
+++ b/src/shared/Footer.tsx
@@ -0,0 +1,80 @@
+import { Buildings, Buildings2, Home2, Messages3, NotificationStatus } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Pages } from '../config/Pages'
+import { Link } from 'react-router-dom'
+
+const Footer: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='xl:hidden'>
+            <div className='h-[60px] '></div>
+            <div className='fixed bottom-2 z-10 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
+                <Link to={Pages.dashboard}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <Home2
+                            className='size-5'
+                            color='#8C90A3'
+                        />
+                        <div className='text-[10px]'>
+                            {t('footer.home')}
+                        </div>
+                    </div>
+                </Link>
+                <Link to={Pages.services.other}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <Buildings2
+                            className='size-5'
+                            color='#8C90A3'
+                        />
+                        <div className='text-[10px]'>
+                            {t('footer.companies')}
+                        </div>
+                    </div>
+                </Link>
+                <Link to={Pages.services.mine}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <div className='bg-white p-1 rounded-full -mt-7'>
+                            <div className='bg-black flex justify-center items-center size-10 rounded-full'>
+                                <Buildings
+                                    className='size-5'
+                                    color='white'
+                                />
+                            </div>
+                        </div>
+                        <div className='text-[10px] '>
+                            {t('footer.my_company')}
+                        </div>
+                    </div>
+                </Link>
+                <Link to={Pages.announcement.list}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <NotificationStatus
+                            className='size-5'
+                            color='#8C90A3'
+                        />
+                        <div className='text-[10px]'>
+                            {t('footer.announcements')}
+                        </div>
+                    </div>
+                </Link>
+
+                <Link to={Pages.ticket.list}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <Messages3
+                            className='size-5'
+                            color='#8C90A3'
+                        />
+                        <div className='text-[10px]'>
+                            {t('footer.tickets')}
+                        </div>
+                    </div>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/shared/Header.tsx b/src/shared/Header.tsx
new file mode 100644
index 0000000..40ef33e
--- /dev/null
+++ b/src/shared/Header.tsx
@@ -0,0 +1,50 @@
+import { FC } from 'react'
+import Input from '../components/Input'
+import { ArrowDown2, Element3, HambergerMenu, Wallet } from 'iconsax-react'
+import AvatarImage from '../assets/images/Avatar.png'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import Notifications from '../pages/notification/Notification'
+import { useSharedStore } from './store/sharedStore'
+
+const Header: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { setOpenSidebar, openSidebar } = useSharedStore()
+
+    return (
+        <div className='fixed z-10 right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-6 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]'>
+            <div className='min-w-[270px] hidden xl:block'>
+                <Input
+                    variant='search'
+                    placeholder={t('header.search')}
+                />
+            </div>
+            <div onClick={() => setOpenSidebar(!openSidebar)} className='xl:hidden block'>
+                <HambergerMenu size={24} color='black' />
+            </div>
+            {/* <img src={LogoImage} className='h-6 xl:hidden block absolute right-0 left-0 mx-auto' /> */}
+            <div className='flex xl:gap-6 gap-3 items-center'>
+                <Element3 color='black' className='xl:size-[18px] size-4' />
+                <Link to={Pages.wallet}>
+                    <Wallet className='xl:size-[18px] size-4' color='black' />
+                </Link>
+                <Notifications />
+                <div className='flex gap-2 items-center'>
+                    <div className='size-7 rounded-full bg-description overflow-hidden'>
+                        <Link to={Pages.profile}>
+                            <img src={AvatarImage} className='size-full object-cover' />
+                        </Link>
+                    </div>
+                    <div className='xl:flex hidden gap-1 items-center'>
+                        <div className='text-xs'>مهرداد مظفری</div>
+                        <ArrowDown2 size={14} color='#8C90A3' />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
new file mode 100644
index 0000000..7bea479
--- /dev/null
+++ b/src/shared/SideBar.tsx
@@ -0,0 +1,126 @@
+import { FC } from 'react'
+import LogoImage from '../assets/images/logo.svg'
+import { useTranslation } from 'react-i18next'
+import { Card, DocumentText, Home2, Logout, Messages3, NotificationStatus, Setting2, Teacher, Receipt21 } from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useLocation } from 'react-router-dom'
+import { Pages } from '../config/Pages'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+
+const SideBar: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { openSidebar, setOpenSidebar } = useSharedStore()
+    const location = useLocation()
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    const iconSizeSideBar = 20
+
+    return (
+        <>
+            {
+                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
+            }
+            <div
+                className={clx(
+                    'fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
+                    openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
+                )}
+            >
+                <div className='flex justify-center'>
+                    <img src={LogoImage} className='w-[140px]' />
+                </div>
+                <div className='flex-1 h-full overflow-y-auto no-scrollbar'>
+                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                        {t('sidebar.menu')}
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.mainpage')}
+                            isActive={isActive('dashboard')}
+                            link={Pages.dashboard}
+                        />
+
+
+
+                        <SideBarItem
+                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.receipt_list')}
+                            isActive={isActive('receipts')}
+                            link={Pages.receipts.index}
+                        />
+
+
+
+                        <SideBarItem
+                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.transactions')}
+                            isActive={isActive('transactions')}
+                            link={Pages.transactions}
+                        />
+                    </div>
+                    <div className='mt-10 px-12 text-header text-sm font-normal'>
+                        {t('sidebar.other')}
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.ticket')}
+                            isActive={isActive('tickets')}
+                            link={Pages.ticket.list}
+                        />
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.announcement')}
+                            isActive={isActive('announcement')}
+                            link={Pages.announcement.list}
+                        />
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.criticisms')}
+                            isActive={isActive('criticisms')}
+                            link={Pages.criticisms}
+                        />
+                    </div>
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.learning')}
+                            isActive={isActive('learning')}
+                            link={Pages.learning}
+                        />
+                    </div>
+                    <div className='flex-1 items-end mt-14'>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.setting')}
+                                isActive={isActive('setting')}
+                                link={Pages.setting}
+                            />
+                        </div>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.logout')}
+                                isActive={isActive('logout')}
+                                link={`#`}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SideBar
\ No newline at end of file
diff --git a/src/shared/SideBarItem.tsx b/src/shared/SideBarItem.tsx
new file mode 100644
index 0000000..f4295f1
--- /dev/null
+++ b/src/shared/SideBarItem.tsx
@@ -0,0 +1,37 @@
+import { FC, ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { clx } from '../helpers/utils'
+import { Pages } from '../config/Pages'
+
+type Props = {
+    icon: ReactNode,
+    title: string,
+    isActive: boolean,
+    link: string,
+    isLogout?: boolean,
+}
+
+const SideBarItem: FC<Props> = (props: Props) => {
+
+    const handleLogout = () => {
+        localStorage.removeItem(import.meta.env.VITE_TOKEN_NAME)
+        window.location.href = Pages.auth.login
+    }
+
+    return (
+        <Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-9 mt-4'>
+            <div className={clx(
+                'w-1 bg-black h-6',
+                !props.isActive && 'invisible'
+            )}></div>
+            <div className='flex gap-3 items-center'>
+                {props.icon}
+                <div className={props.isActive ? 'text-black' : ''}>
+                    {props.title}
+                </div>
+            </div>
+        </Link>
+    )
+}
+
+export default SideBarItem
\ No newline at end of file
diff --git a/src/shared/store/sharedStore.ts b/src/shared/store/sharedStore.ts
new file mode 100644
index 0000000..4f202d3
--- /dev/null
+++ b/src/shared/store/sharedStore.ts
@@ -0,0 +1,7 @@
+import { create } from "zustand";
+import { SharedStoreType } from "../types/SharedTypes";
+
+export const useSharedStore = create<SharedStoreType>((set) => ({
+  openSidebar: false,
+  setOpenSidebar: (value) => set({ openSidebar: value }),
+}));
diff --git a/src/shared/types/SharedTypes.ts b/src/shared/types/SharedTypes.ts
new file mode 100644
index 0000000..9d48330
--- /dev/null
+++ b/src/shared/types/SharedTypes.ts
@@ -0,0 +1,5 @@
+export type SharedStoreType = {
+    openSidebar: boolean;
+    setOpenSidebar: (value: boolean) => void;
+  };
+  
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..7fcb987
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,28 @@
+const withMT = require("@material-tailwind/react/utils/withMT");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = withMT({
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'black',
+        secondary: '#F4F5F9',
+        border: '#D0D0D0',
+        description: '#888888',
+        header: "#C3C7DD",
+        success: "#00BA4B"
+      },
+      width: {
+        'sidebar': '300px'
+      },
+      borderRadius: {
+        '2.5': '10px'
+      }
+    },
+  },
+  plugins: [],
+})
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..358ca9b
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..db0becc
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..8b0f57b
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})