diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx
index 1e01baa..aac29f6 100644
--- a/src/components/Tabs.tsx
+++ b/src/components/Tabs.tsx
@@ -1,5 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { clx } from '../helpers/utils'
+import { Swiper, SwiperSlide } from 'swiper/react'
 
 type Item = {
     icon: ReactNode,
@@ -14,24 +15,35 @@ type Props = {
 }
 
 const Tabs: FC<Props> = (props: Props) => {
+
+    const SWIPER_SLIDE_STYLE = {
+        overflow: 'visible !important',
+        display: 'flex',
+    }
+
     return (
-        <div className='px-10  w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
+        <Swiper
+            slidesPerView='auto'
+            spaceBetween={30}
+            className='px-10 max-w-full w-fit items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 flex h-[80px] rounded-[32px] bg-white bg-opacity-45'>
             {
-                props.items.map((item: Item) => {
+                props.items.map((item: Item, index: number) => {
                     return (
-                        <div onClick={() => props.onChange(item.value)} key={item.value} className={clx(
-                            'flex flex-col items-center gap-2 cursor-pointer',
+                        <SwiperSlide style={SWIPER_SLIDE_STYLE} onClick={() => props.onChange(item.value)} key={item.value} className={clx(
+                            'flex flex-col max-w-fit mt-[15px] items-center gap-2 cursor-pointer',
+                            index === 0 && 'pr-[30px]',
+                            index === props.items.length - 1 && 'pl-[30px]',
                             props.active === item.value && 'text-black'
                         )}>
                             {item.icon}
                             <div className='text-xs'>
                                 {item.label}
                             </div>
-                        </div>
+                        </SwiperSlide>
                     )
                 })
             }
-        </div>
+        </Swiper>
     )
 }
 
diff --git a/src/pages/criticisms/Add.tsx b/src/pages/criticisms/Add.tsx
index 09150e7..1d4057d 100644
--- a/src/pages/criticisms/Add.tsx
+++ b/src/pages/criticisms/Add.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import Input from '../../components/Input'
 import Textarea from '../../components/Textarea'
 import UploadBox from '../../components/UploadBox'
@@ -56,7 +55,7 @@ const AddCriticisms: FC = () => {
                     </div>
                 </div>
 
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white hidden xl:block py-10 px-5 h-fit rounded-3xl'>
+                <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>
diff --git a/src/pages/home/components/DanakLearning.tsx b/src/pages/home/components/DanakLearning.tsx
index 5533628..580f1b2 100644
--- a/src/pages/home/components/DanakLearning.tsx
+++ b/src/pages/home/components/DanakLearning.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import { SIDEBAR_SIZE_LEFT } from '../../../config/Const'
 import { useTranslation } from 'react-i18next'
 import { ArrowLeft } from 'iconsax-react'
 import CoverImage from '../../../assets/images/banner.png'
@@ -9,7 +8,7 @@ const DanakLearning: FC = () => {
     const { t } = useTranslation('global')
 
     return (
-        <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+        <div className='bg-white w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
             <div className='flex justify-between items-center'>
                 <div>
                     {t('home.danak_learning')}
diff --git a/src/pages/learning/List.tsx b/src/pages/learning/List.tsx
index f4e3935..3f3dcc7 100644
--- a/src/pages/learning/List.tsx
+++ b/src/pages/learning/List.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import BannerImage from '../../assets/images/banner.png'
 import Select from '../../components/Select'
 import Input from '../../components/Input'
@@ -104,7 +103,7 @@ const LearningList: FC = () => {
                 <div className='h-14 xl:hidden'></div>
             </div>
 
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white hidden xl:block h-fit rounded-3xl overflow-hidden relative'>
+            <div className='bg-white w-sidebar hidden xl:block h-fit rounded-3xl overflow-hidden relative'>
                 <img
                     src={BannerImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/pages/receipts/Detail.tsx b/src/pages/receipts/Detail.tsx
index 5d8ebca..9b38620 100644
--- a/src/pages/receipts/Detail.tsx
+++ b/src/pages/receipts/Detail.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import { Edit } from 'iconsax-react'
 import StatusCircle from '../../components/StatusCircle'
 import SamanImage from '../../assets/images/saman.png'
@@ -16,7 +15,7 @@ const ReceiptsDetail: FC = () => {
                 ۱۲۳۱۲
             </div>
 
-            <div className='flex mt-8 gap-6'>
+            <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'>
@@ -31,7 +30,7 @@ const ReceiptsDetail: FC = () => {
                             </div>
                         </div>
 
-                        <div className='mt-8 flex gap-16 items-center text-xs'>
+                        <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')}
@@ -68,7 +67,7 @@ const ReceiptsDetail: FC = () => {
                             </div>
                         </div>
 
-                        <div className='mt-8 border-t pt-7 flex gap-16 items-center text-xs'>
+                        <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')}
@@ -98,7 +97,7 @@ const ReceiptsDetail: FC = () => {
 
                         </div>
 
-                        <div className='mt-6 flex gap-16 items-center text-xs'>
+                        <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')}
@@ -187,7 +186,7 @@ const ReceiptsDetail: FC = () => {
                     </div>
                 </div>
 
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white text-sm h-fit rounded-3xl p-8'>
+                <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')}
diff --git a/src/pages/service/DetailService.tsx b/src/pages/service/DetailService.tsx
index 5d9850f..3556ea9 100644
--- a/src/pages/service/DetailService.tsx
+++ b/src/pages/service/DetailService.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import RobotImage from '../../assets/images/robot.jpeg'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import Rate from 'rc-rate'
@@ -195,7 +194,7 @@ const DetailService: FC = () => {
                 </div>
             </div>
 
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
+            <div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
                 <img
                     src={RobotImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/pages/service/MyServices.tsx b/src/pages/service/MyServices.tsx
index 2d80f82..4313184 100644
--- a/src/pages/service/MyServices.tsx
+++ b/src/pages/service/MyServices.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Select from '../../components/Select'
@@ -54,39 +53,45 @@ const MyServices: FC = () => {
                             </div>
                         </div>
                     </Link>
-                    <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
-                        <ServiceSection
-                        />
-                        <div className='mt-6 flex gap-1 items-center'>
-                            <StatusCircle
-                                color='#00BA4B'
+                    <Link to={Pages.services.detail + '1'}>
+                        <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
+                            <ServiceSection
                             />
-                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            <div className='mt-6 flex gap-1 items-center'>
+                                <StatusCircle
+                                    color='#00BA4B'
+                                />
+                                <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            </div>
                         </div>
-                    </div>
-                    <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
-                        <ServiceSection
-                        />
-                        <div className='mt-6 flex gap-1 items-center'>
-                            <StatusCircle
-                                color='#00BA4B'
+                    </Link>
+                    <Link to={Pages.services.detail + '1'}>
+                        <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
+                            <ServiceSection
                             />
-                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            <div className='mt-6 flex gap-1 items-center'>
+                                <StatusCircle
+                                    color='#00BA4B'
+                                />
+                                <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            </div>
                         </div>
-                    </div>
-                    <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
-                        <ServiceSection
-                        />
-                        <div className='mt-6 flex gap-1 items-center'>
-                            <StatusCircle
-                                color='#00BA4B'
+                    </Link>
+                    <Link to={Pages.services.detail + '1'}>
+                        <div className='flex-1 min-w-[40%] xl:min-w-[20%] bg-white rounded-3xl p-6'>
+                            <ServiceSection
                             />
-                            <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            <div className='mt-6 flex gap-1 items-center'>
+                                <StatusCircle
+                                    color='#00BA4B'
+                                />
+                                <div className='text-xs text-description'>1 {t('service.active_menu')}</div>
+                            </div>
                         </div>
-                    </div>
+                    </Link>
                 </div>
             </div>
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white hidden xl:block rounded-3xl overflow-hidden relative'>
+            <div className='bg-white w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
                 <img
                     src={BannerImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/pages/service/OtherServices.tsx b/src/pages/service/OtherServices.tsx
index 6ce25c8..5de71f4 100644
--- a/src/pages/service/OtherServices.tsx
+++ b/src/pages/service/OtherServices.tsx
@@ -5,9 +5,10 @@ import BannerImage from '../../assets/images/banner2.jpeg'
 import RobotImage from '../../assets/images/robot.jpeg'
 import { ArrowLeft } from 'iconsax-react'
 import TitleLine from '../../components/TitleLine'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import Button from '../../components/Button'
 import ServiceSection from '../../components/ServiceSection'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
 
 const OtherServices: FC = () => {
 
@@ -86,14 +87,16 @@ const OtherServices: FC = () => {
                         </div>
 
                         <div className='mt-4'>
-                            <Button
-                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
-                            >
-                                <div className='flex gap-2'>
-                                    <div>{t('service.buy')}</div>
-                                    <ArrowLeft color='black' size={16} />
-                                </div>
-                            </Button>
+                            <Link to={Pages.services.detail + '1'}>
+                                <Button
+                                    className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                >
+                                    <div className='flex gap-2'>
+                                        <div>{t('service.buy')}</div>
+                                        <ArrowLeft color='black' size={16} />
+                                    </div>
+                                </Button>
+                            </Link>
                         </div>
                     </div>
                     <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
@@ -111,14 +114,16 @@ const OtherServices: FC = () => {
                         </div>
 
                         <div className='mt-4'>
-                            <Button
-                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
-                            >
-                                <div className='flex gap-2'>
-                                    <div>{t('service.buy')}</div>
-                                    <ArrowLeft color='black' size={16} />
-                                </div>
-                            </Button>
+                            <Link to={Pages.services.detail + '1'}>
+                                <Button
+                                    className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                >
+                                    <div className='flex gap-2'>
+                                        <div>{t('service.buy')}</div>
+                                        <ArrowLeft color='black' size={16} />
+                                    </div>
+                                </Button>
+                            </Link>
                         </div>
                     </div>
                     <div className='flex-1 min-w-[40%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4'>
@@ -136,14 +141,16 @@ const OtherServices: FC = () => {
                         </div>
 
                         <div className='mt-4'>
-                            <Button
-                                className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
-                            >
-                                <div className='flex gap-2'>
-                                    <div>{t('service.buy')}</div>
-                                    <ArrowLeft color='black' size={16} />
-                                </div>
-                            </Button>
+                            <Link to={Pages.services.detail + '1'}>
+                                <Button
+                                    className='h-8 w-fit px-5 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                >
+                                    <div className='flex gap-2'>
+                                        <div>{t('service.buy')}</div>
+                                        <ArrowLeft color='black' size={16} />
+                                    </div>
+                                </Button>
+                            </Link>
                         </div>
                     </div>
                     <div className='flex-1 min-w-[40%] xl:min-w-[30%] xl:p-6 p-4'></div>
@@ -159,14 +166,16 @@ const OtherServices: FC = () => {
                             <div className='flex justify-between items-center'>
                                 <ServiceSection
                                 />
-                                <Button
-                                    className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
-                                >
-                                    <div className='flex gap-2'>
-                                        <div>{t('service.buy')}</div>
-                                        <ArrowLeft color='black' size={16} />
-                                    </div>
-                                </Button>
+                                <Link to={Pages.services.detail + '1'}>
+                                    <Button
+                                        className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                    >
+                                        <div className='flex gap-2'>
+                                            <div>{t('service.buy')}</div>
+                                            <ArrowLeft color='black' size={16} />
+                                        </div>
+                                    </Button>
+                                </Link>
                             </div>
 
                         </div>
@@ -174,14 +183,16 @@ const OtherServices: FC = () => {
                             <div className='flex justify-between items-center'>
                                 <ServiceSection
                                 />
-                                <Button
-                                    className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
-                                >
-                                    <div className='flex gap-2'>
-                                        <div>{t('service.buy')}</div>
-                                        <ArrowLeft color='black' size={16} />
-                                    </div>
-                                </Button>
+                                <Link to={Pages.services.detail + '1'}>
+                                    <Button
+                                        className='h-8 w-fit px-2 text-xs text-black bg-description bg-opacity-20 rounded-xl'
+                                    >
+                                        <div className='flex gap-2'>
+                                            <div>{t('service.buy')}</div>
+                                            <ArrowLeft color='black' size={16} />
+                                        </div>
+                                    </Button>
+                                </Link>
                             </div>
 
                         </div>
@@ -193,7 +204,7 @@ const OtherServices: FC = () => {
 
 
             </div>
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
+            <div className='bg-white w-sidebar h-fit hidden xl:block rounded-3xl overflow-hidden relative'>
                 <img
                     src={RobotImage}
                     className='w-full backdrop-blur-[100px] h-[550px] object-cover'
diff --git a/src/pages/ticket/CreateTicket.tsx b/src/pages/ticket/CreateTicket.tsx
index 33e8bfc..5747cc5 100644
--- a/src/pages/ticket/CreateTicket.tsx
+++ b/src/pages/ticket/CreateTicket.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import Input from '../../components/Input'
 import Select from '../../components/Select'
 import Textarea from '../../components/Textarea'
@@ -18,8 +17,8 @@ const CreateTicket: FC = () => {
                 {t('ticket.new_ticket')}
             </div>
 
-            <div className='flex gap-6 mt-8'>
-                <div className='flex-1 bg-white py-8 px-10 rounded-3xl'>
+            <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>
@@ -90,7 +89,7 @@ const CreateTicket: FC = () => {
                     </div>
                 </div>
 
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white py-10 px-5 h-fit rounded-3xl'>
+                <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>
diff --git a/src/pages/ticket/Detail.tsx b/src/pages/ticket/Detail.tsx
index 6d485ce..dcd78e1 100644
--- a/src/pages/ticket/Detail.tsx
+++ b/src/pages/ticket/Detail.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import Input from '../../components/Input'
 import Textarea from '../../components/Textarea'
 import UploadBox from '../../components/UploadBox'
@@ -17,8 +16,8 @@ const TicketDetail: FC = () => {
                 <div>{t('ticket.ticket_number')}</div>
                 <div>12312</div>
             </div>
-            <div className='flex gap-6 mt-8'>
-                <div className='flex-1 bg-white py-8 px-10 rounded-3xl'>
+            <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')}
@@ -32,11 +31,11 @@ const TicketDetail: FC = () => {
                         />
                     </div>
 
-                    <div className='mt-8 text-sm'>
+                    <div className='mt-8 xl:text-sm text-xs'>
                         موضوع درخواست پشتیبانی
                     </div>
 
-                    <div className='mt-6 text-sm bg-[#F6F7FA] p-6 rounded-3xl rounded-tr-none max-w-[70%]'>
+                    <div 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'>
                             لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد،
                         </div>
@@ -46,7 +45,7 @@ const TicketDetail: FC = () => {
                     </div>
 
                     <div className='w-full flex justify-end'>
-                        <div className='mt-6 text-sm bg-[#EBEDF5] p-6 rounded-3xl rounded-tl-none max-w-[70%]'>
+                        <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')}
@@ -81,16 +80,16 @@ const TicketDetail: FC = () => {
                             className='max-w-[100px]'
                         />
                     </div>
-
+                    <div className='h-8'></div>
                 </div>
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='h-fit'>
-                    <div className='bg-white p-6 rounded-3xl flex gap-4'>
+                <div className={`h-fit xl:w-sidebar w-full`}>
+                    <div className='bg-white xl:p-6 p-4 rounded-3xl flex gap-4'>
                         <Button
                             label={t('ticket.send_answer')}
-                            className='text-xs'
+                            className='text-xs xl:h-10 h-8'
                         />
                         <Button
-                            className='bg-[#D52903]'
+                            className='bg-[#D52903] xl:h-10 h-8'
                         >
                             <div className='flex gap-2 text-xs items-center'>
                                 <CloseCircle
diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx
index bae2f92..c14696d 100644
--- a/src/pages/transaction/List.tsx
+++ b/src/pages/transaction/List.tsx
@@ -14,18 +14,18 @@ const TransactionList: FC = () => {
                 {t('transaction.transaction')}
             </div>
 
-            <div className='mt-6 flex gap-6 justify-center'>
-                <div className='bg-white rounded-2xl p-6 w-[253px]'>
-                    <div className='flex gap-2 items-center'>
+            <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='text-xs text-[#101828]'>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                             {t('transaction.totao_deposit')}
                         </div>
                     </div>
-                    <div className='mt-2 flex gap-2 items-center'>
-                        <div className='text-[#101828] text-xs'>
+                    <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'>
@@ -34,17 +34,17 @@ const TransactionList: FC = () => {
                         </div>
                     </div>
                 </div>
-                <div className='bg-white rounded-2xl p-6 w-[253px]'>
-                    <div className='flex gap-2 items-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'>
                             <MoneyRecive size={18} color='black' />
                         </div>
-                        <div className='text-xs text-[#101828]'>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                             {t('transaction.total_withdrawal')}
                         </div>
                     </div>
-                    <div className='mt-2 flex gap-2 items-center'>
-                        <div className='text-[#101828] text-xs'>
+                    <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'>
@@ -53,17 +53,17 @@ const TransactionList: FC = () => {
                         </div>
                     </div>
                 </div>
-                <div className='bg-white rounded-2xl p-6 w-[253px]'>
-                    <div className='flex gap-2 items-center'>
-                        <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-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 xl:flex-row flex-col justify-center items-center'>
                             <MoneyRecive size={18} color='black' />
                         </div>
-                        <div className='text-xs text-[#101828]'>
+                        <div className='xl:text-xs text-[10px] text-[#101828]'>
                             {t('transaction.balance')}
                         </div>
                     </div>
-                    <div className='mt-2 flex gap-2 items-center'>
-                        <div className='text-[#101828] text-xs'>
+                    <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'>
diff --git a/src/pages/wallet/Wallet.tsx b/src/pages/wallet/Wallet.tsx
index 486ce39..6ec4ed9 100644
--- a/src/pages/wallet/Wallet.tsx
+++ b/src/pages/wallet/Wallet.tsx
@@ -1,7 +1,6 @@
 import { Cards, Money3, MoneyRecive, TickSquare } from 'iconsax-react'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { SIDEBAR_SIZE_LEFT } from '../../config/Const'
 import Tabs from '../../components/Tabs'
 import Online from './components/Online'
 import CardtoCard from './components/CardtoCard'
@@ -52,7 +51,7 @@ const Wallet: FC = () => {
 
                 </div>
 
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                <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>
diff --git a/src/shared/Footer.tsx b/src/shared/Footer.tsx
index 25ced0b..89e857a 100644
--- a/src/shared/Footer.tsx
+++ b/src/shared/Footer.tsx
@@ -1,6 +1,8 @@
 import { Element3, Element4, 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 = () => {
 
@@ -10,56 +12,66 @@ const Footer: FC = () => {
         <div className='xl:hidden'>
             <div className='h-[60px] '></div>
             <div className='fixed bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3'>
-                <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>
-                <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
-                    <Element4
-                        className='size-5'
-                        color='#8C90A3'
-                    />
-                    <div className='text-[10px]'>
-                        {t('footer.other_services')}
-                    </div>
-                </div>
-
-                <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'>
-                            <Element3
-                                className='size-5'
-                                color='white'
-                            />
+                <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>
-                    <div className='text-[10px] '>
-                        {t('footer.my_services')}
+                </Link>
+                <Link to={Pages.services.other}>
+                    <div className='text-description w-[70px] flex flex-col items-center gap-1.5'>
+                        <Element4
+                            className='size-5'
+                            color='#8C90A3'
+                        />
+                        <div className='text-[10px]'>
+                            {t('footer.other_services')}
+                        </div>
                     </div>
-                </div>
-                <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')}
+                </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'>
+                                <Element3
+                                    className='size-5'
+                                    color='white'
+                                />
+                            </div>
+                        </div>
+                        <div className='text-[10px] '>
+                            {t('footer.my_services')}
+                        </div>
                     </div>
-                </div>
-                <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')}
+                </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>
-                </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>
     )
diff --git a/tailwind.config.js b/tailwind.config.js
index d6b1a10..627586e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,9 @@ module.exports = withMT({
         header: "#C3C7DD",
         success: "#00BA4B"
       },
+      width: {
+        'sidebar': '300px'
+      },
       borderRadius: {
         '2.5': '10px'
       }