diff --git a/src/pages/profile/Profile.tsx b/src/pages/profile/Profile.tsx
index 1dfa7c0..fbf9f08 100644
--- a/src/pages/profile/Profile.tsx
+++ b/src/pages/profile/Profile.tsx
@@ -18,8 +18,8 @@ const Profile: FC = () => {
                 {t('profile.account_user')}
             </div>
 
-            <div className='bg-white rounded-3xl p-6 mt-8 text-sm'>
-                <div className='mt-10 flex items-center border-b pb-7'>
+            <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')}
@@ -28,11 +28,11 @@ const Profile: FC = () => {
                             {t('profile.image_profile_desc')}
                         </div>
                     </div>
-                    <div className='flex-1 flex gap-6'>
-                        <img src={AvatarImage} className='size-20 rounded-full object-cover' />
+                    <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='w-[160px]'
+                                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} />
@@ -46,7 +46,7 @@ const Profile: FC = () => {
                     </div>
                 </div>
 
-                <div className='mt-8 flex border-b pb-7'>
+                <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')}
@@ -56,40 +56,40 @@ const Profile: FC = () => {
                         </div>
                     </div>
                     <div className='flex-1 '>
-                        <div className='flex items-end gap-6'>
+                        <div className='flex items-end xl:gap-6 gap-3'>
                             <Input
                                 label={t('profile.username')}
                                 value={'mehrdad'}
                                 readOnly
                             />
                             <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit size={18} color='#0047FF' />
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                 <div>
                                     {t('edit')}
                                 </div>
                             </div>
                         </div>
-                        <div className='flex items-end gap-6 mt-7'>
+                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                             <Input
                                 label={t('email')}
                                 value={'info@example.com'}
                                 readOnly
                             />
                             <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit size={18} color='#0047FF' />
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                 <div>
                                     {t('edit')}
                                 </div>
                             </div>
                         </div>
-                        <div className='flex items-end gap-6 mt-7'>
+                        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
                             <Input
                                 label={t('profile.phone_call')}
                                 value={'۰۹۱۲۹۲۸۳۳۹۵'}
                                 readOnly
                             />
                             <div className='flex relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                                <Edit size={18} color='#0047FF' />
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
                                 <div>
                                     {t('edit')}
                                 </div>
@@ -98,7 +98,7 @@ const Profile: FC = () => {
                     </div>
                 </div>
 
-                <div className='mt-8 flex border-b pb-7'>
+                <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')}
@@ -115,7 +115,7 @@ const Profile: FC = () => {
                             defaulValue='1400-01-01'
                         />
 
-                        <div className='mt-7'>
+                        <div className='xl:mt-7 mt-4'>
                             <Input
                                 label={t('profile.national_code')}
                                 value={'۰۰۱۲۳۴۵۳۴۴'}
@@ -124,7 +124,7 @@ const Profile: FC = () => {
                     </div>
                 </div>
 
-                <div className='mt-8 flex'>
+                <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
                     <div className='flex-1'>
                         <div>
                             {t('profile.address')}
@@ -156,13 +156,13 @@ const Profile: FC = () => {
                             />
                         </div>
 
-                        <div className='mt-7'>
+                        <div className='xl:mt-7 mt-4'>
                             <Input
                                 label={t('profile.postal_code')}
                                 value={'۱۲۳۴۵۶۷۸'}
                             />
                         </div>
-                        <div className='mt-7'>
+                        <div className='xl:mt-7 mt-4'>
                             <Textarea
                                 label={t('profile.address')}
                                 value={'للورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک استورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است'}
@@ -170,6 +170,8 @@ const Profile: FC = () => {
                         </div>
                     </div>
                 </div>
+
+                <div className='h-20 xl:hidden'></div>
             </div>
 
         </div>
diff --git a/src/pages/setting/Setting.tsx b/src/pages/setting/Setting.tsx
index 94c719a..990f707 100644
--- a/src/pages/setting/Setting.tsx
+++ b/src/pages/setting/Setting.tsx
@@ -38,17 +38,17 @@ const Setting: FC = () => {
 
             {
                 activeTab === 'notification' ?
-                    <div className='mt-10 bg-white p-8 rounded-3xl'>
+                    <div className='mt-10 bg-white xl:p-8 p-4 rounded-3xl'>
                         <div>
                             {t('setting.setting_email_message')}
                         </div>
 
-                        <div className='flex gap-6 text-sm mt-8'>
-                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
-                                <div>
+                        <div className='flex xl:flex-row flex-col gap-6 text-sm mt-8'>
+                            <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
+                                <div className='xl:text-sm text-xs'>
                                     {t('setting.notification_announcement')}
                                 </div>
-                                <div className='flex gap-4'>
+                                <div className='flex xl:gap-4 gap-2'>
                                     <div className='flex gap-1 text-xs items-center text-description'>
                                         <SwitchComponent
                                             active={true}
@@ -69,11 +69,11 @@ const Setting: FC = () => {
                                     </div>
                                 </div>
                             </div>
-                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
-                                <div>
+                            <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
+                                <div className='xl:text-sm text-xs'>
                                     {t('setting.notification_announcement')}
                                 </div>
-                                <div className='flex gap-4'>
+                                <div className='flex xl:gap-4 gap-2'>
                                     <div className='flex gap-1 text-xs items-center text-description'>
                                         <SwitchComponent
                                             active={true}
@@ -95,12 +95,12 @@ const Setting: FC = () => {
                                 </div>
                             </div>
                         </div>
-                        <div className='flex gap-6 text-sm mt-6'>
-                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
-                                <div>
+                        <div className='flex xl:flex-row flex-col gap-6 text-sm mt-6'>
+                            <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
+                                <div className='xl:text-sm text-xs'>
                                     {t('setting.notification_announcement')}
                                 </div>
-                                <div className='flex gap-4'>
+                                <div className='flex xl:gap-4 gap-2'>
                                     <div className='flex gap-1 text-xs items-center text-description'>
                                         <SwitchComponent
                                             active={true}
@@ -121,11 +121,11 @@ const Setting: FC = () => {
                                     </div>
                                 </div>
                             </div>
-                            <div className='flex-1 border border-border px-4 rounded-2xl h-14 items-center flex justify-between'>
-                                <div>
+                            <div className='flex-1 border border-border px-4 rounded-2xl min-h-14 items-center flex justify-between'>
+                                <div className='xl:text-sm text-xs'>
                                     {t('setting.notification_announcement')}
                                 </div>
-                                <div className='flex gap-4'>
+                                <div className='flex xl:gap-4 gap-2'>
                                     <div className='flex gap-1 text-xs items-center text-description'>
                                         <SwitchComponent
                                             active={true}
@@ -154,7 +154,7 @@ const Setting: FC = () => {
                             {t('setting.change_password')}
                         </div>
 
-                        <div className='flex gap-10'>
+                        <div className='flex xl:flex-row flex-col xl:gap-10 gap-4'>
                             <div className='flex-1'>
                                 <Input
                                     type='password'
@@ -172,7 +172,7 @@ const Setting: FC = () => {
                                     placeholder={t('setting.reapeat_password')}
                                 />
 
-                                <div className='mt-9'>
+                                <div className='mt-9 xl:block hidden'>
                                     <Button
                                         label={t('setting.save_change')}
                                         className='w-32'
@@ -180,7 +180,7 @@ const Setting: FC = () => {
                                 </div>
                             </div>
 
-                            <div className='flex-1 p-8 bg-[#EEF0F7] rounded-3xl text-sm'>
+                            <div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
                                 <div>
                                     {t('setting.password_is')}
                                 </div>
@@ -199,7 +199,16 @@ const Setting: FC = () => {
                                     </li>
                                 </ul>
                             </div>
+
+                            <div className=' xl:hidden block'>
+                                <Button
+                                    label={t('setting.save_change')}
+                                    className='w-32'
+                                />
+                            </div>
                         </div>
+
+                        <div className='h-14'></div>
                     </div>
             }