diff --git a/src/index.css b/src/index.css
index 3643380..dc00132 100644
--- a/src/index.css
+++ b/src/index.css
@@ -118,3 +118,11 @@ tbody tr {
 .rc-rate-star {
   margin-right: 3px !important; /* فاصله بین ستاره‌ها */
 }
+
+.overflowX {
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.overflowX::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/pages/service/DetailService.tsx b/src/pages/service/DetailService.tsx
index 3556ea9..7da95d2 100644
--- a/src/pages/service/DetailService.tsx
+++ b/src/pages/service/DetailService.tsx
@@ -16,44 +16,44 @@ const DetailService: FC = () => {
     return (
         <div className='w-full flex gap-6 mt-4'>
 
-            <div className='flex-1'>
+            <div className='flex-1 max-w-full'>
 
                 <ServiceHeader />
-                <div className='mt-8 flex justify-between items-center gap-8'>
-                    <div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description text-xs'>
+                <div className='mt-8 flex overflowX justify-between items-center xl:gap-8 gap-5'>
+                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                        <div className='text-description xl:text-xs text-[11px]'>
                             {t('service.company_develop')}
                         </div>
                         <div className='mt-3 text-sm'>
                             {t('service.company_danak')}
                         </div>
                     </div>
-                    <div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description text-xs'>
+                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                        <div className='text-description xl:text-xs text-[11px]'>
                             {t('service.user_count')}
                         </div>
                         <div className='mt-3 text-sm'>
                             +۵۰۰
                         </div>
                     </div>
-                    <div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description text-xs'>
+                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                        <div className='text-description xl:text-xs text-[11px]'>
                             {t('service.year_make')}
                         </div>
                         <div className='mt-3 text-sm'>
                             ۱۴۰۰
                         </div>
                     </div>
-                    <div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description text-xs'>
+                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                        <div className='text-description xl:text-xs text-[11px]'>
                             {t('service.lang_app')}
                         </div>
                         <div className='mt-3 text-sm'>
                             {t('service.persian')}
                         </div>
                     </div>
-                    <div className='bg-white flex flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
-                        <div className='text-description text-xs'>
+                    <div className='bg-white flex xl:min-w-max min-w-[127px] flex-1 flex-col justify-center items-center h-[109px] rounded-2xl py-6 px-4'>
+                        <div className='text-description xl:text-xs text-[11px]'>
                             {t('service.score')}
                         </div>
                         <div className='mt-3 dltr flex gap-1 text-sm'>
@@ -78,8 +78,8 @@ const DetailService: FC = () => {
                     </p>
                 </div>
 
-                <div className='mt-8 flex gap-8 items-start'>
-                    <div className='bg-white p-6 rounded-3xl w-[360px]'>
+                <div className='mt-8 flex xl:flex-row flex-col gap-8 items-start'>
+                    <div className='bg-white p-6 rounded-3xl xl:w-[360px] w-full'>
                         <div>
                             {t('service.submit_comment')}
                         </div>
@@ -125,7 +125,7 @@ const DetailService: FC = () => {
                             </div>
                         </div>
                     </div>
-                    <div className='flex-1 bg-white p-6 rounded-3xl'>
+                    <div className='flex-1 max-w-full bg-white p-6 rounded-3xl'>
                         <div className='text-sm'>
                             {t('service.users_comments')}
                         </div>
diff --git a/src/pages/service/components/ServiceHeader.tsx b/src/pages/service/components/ServiceHeader.tsx
index f829189..8690658 100644
--- a/src/pages/service/components/ServiceHeader.tsx
+++ b/src/pages/service/components/ServiceHeader.tsx
@@ -11,20 +11,20 @@ const ServiceHeader: FC = () => {
     const [planSelected, setPlanSelected] = useState<'year' | '3month' | 'month'>('year')
 
     return (
-        <div className='w-full p-6 bg-white rounded-3xl flex justify-between'>
-            <div className='flex gap-8'>
-                <div className='size-[70px] bg-blue-400 rounded-xl'></div>
+        <div className='w-full p-6 bg-white rounded-3xl flex xl:flex-row flex-col xl:justify-between'>
+            <div className='flex xl:gap-8 gap-4'>
+                <div className='xl:size-[70px] size-[50px] bg-blue-400 rounded-xl'></div>
                 <div>
                     <div>
                         دی منو
                     </div>
-                    <div className='text-xs mt-3 text-[#4E505A]'>
+                    <div className='text-xs xl:mt-3 mt-1.5 text-[#4E505A]'>
                         منوی رستوران
                     </div>
                     <p className='text-description mt-1 text-[11px]'>
                         دی منو، راهی ساده و هوشمند برای مدیریت منو شما!
                     </p>
-                    <div className='flex gap-5 mt-5'>
+                    <div className='hidden xl:flex gap-5 mt-5'>
                         <RadioGroup
                             items={[
                                 {
@@ -47,14 +47,34 @@ const ServiceHeader: FC = () => {
                 </div>
             </div>
 
-            <div className='flex flex-col justify-between items-end'>
-                <div className='size-9 bg-description rounded-xl flex justify-center items-center'>
+            <div className='flex flex-col justify-between xl:items-end'>
+                <div className='xl:hidden flex gap-5 mt-5'>
+                    <RadioGroup
+                        items={[
+                            {
+                                label: t('service.year'),
+                                value: 'year'
+                            },
+                            {
+                                label: t('service.month3'),
+                                value: '3month'
+                            },
+                            {
+                                label: t('service.month'),
+                                value: 'month'
+                            }
+                        ]}
+                        onChange={setPlanSelected}
+                        selected={planSelected}
+                    />
+                </div>
+                <div className='size-9 hidden bg-description rounded-xl xl:flex justify-center items-center'>
                     <img src={ShareIcon} className='w-4' />
                 </div>
-                <div className='flex gap-4 items-center'>
+                <div className='flex gap-4 mt-5 xl:mt-0 items-center justify-between xl:justify-normal'>
                     <div className='text-xs whitespace-nowrap'>2,000,000 تومان {t('service.year')}</div>
                     <Button
-                        className='bg-description text-xs h-8 bg-opacity-20 text-black px-4'
+                        className='bg-description xl:max-w-full max-w-[100px] text-xs h-8 bg-opacity-20 text-black px-4'
                     >
                         <div className='flex gap-1 items-center'>
                             <div>