diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index 2a7cc2d..1973ba4 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -19,7 +19,10 @@ export const Pages = {
     create: "/tickets/create",
     detail: "/tickets/messages/",
   },
-  announcement: "/announcement",
+  announcement: {
+    list: "/announcement",
+    detail: "/announcement/",
+  },
   criticisms: "/criticisms",
   learning: "/learning",
   setting: "/setting",
diff --git a/src/langs/fa.json b/src/langs/fa.json
index cb3b94a..23cd1cc 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -182,8 +182,10 @@
     "announcements": "اطلاعیه ها",
     "search": "جستجو در اطلاعیه ها",
     "new": "جدید",
-    "important": "مهم"
+    "important": "مهم",
+    "text_announcement": "متن اطلاعیه"
   },
+  "back": "بازگشت",
   "criticisms": {
     "criticisms": "انتقادات",
     "submit_your_criticisms": "ثبت انتقاد شما",
diff --git a/src/pages/annoncement/Detail.tsx b/src/pages/annoncement/Detail.tsx
new file mode 100644
index 0000000..f42ed70
--- /dev/null
+++ b/src/pages/annoncement/Detail.tsx
@@ -0,0 +1,39 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import StatusWithText from '../../components/StatusWithText'
+
+const AnnouncementDetail: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between'>
+                <div>
+                    {t('announcement.text_announcement')}
+                </div>
+                <div className='text-xs font-extralight'>
+                    {t('back')}
+                </div>
+            </div>
+
+            <div className='flex-1 mt-4 bg-white py-6 px-4 rounded-2xl'>
+                <div className='flex justify-between items-start'>
+                    <div className='text-sm max-w-[70%] leading-67'>
+                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
+                    </div>
+                    <StatusWithText
+                        variant='success'
+                        text={t('announcement.new')}
+                    />
+                </div>
+
+                <div className='mt-5 leading-7 text-xs font-light'>
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default AnnouncementDetail
\ No newline at end of file
diff --git a/src/pages/annoncement/List.tsx b/src/pages/annoncement/List.tsx
index 6f7d318..279ab8f 100644
--- a/src/pages/annoncement/List.tsx
+++ b/src/pages/annoncement/List.tsx
@@ -16,7 +16,7 @@ const AnnouncementtList: FC = () => {
             </div>
 
             <div className='mt-10 flex gap-8'>
-                <div className='bg-white w-[400px] rounded-2xl p-6'>
+                <div className='bg-white xl:w-[400px] w-full rounded-2xl p-6'>
                     <div className='flex gap-3 items-center'>
                         <div className='flex-1'>
                             <Input
@@ -44,7 +44,7 @@ const AnnouncementtList: FC = () => {
                             'bg-[#F8F9FB]'
                         )}>
                             <div className='flex justify-between'>
-                                <div className='leading-6 max-w-[70%]'>
+                                <div className='leading-6 text-xs xl:text-sm max-w-[70%]'>
                                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                 </div>
 
@@ -73,7 +73,7 @@ const AnnouncementtList: FC = () => {
                             'p-4 rounded-2xl',
                         )}>
                             <div className='flex justify-between'>
-                                <div className='leading-6 max-w-[70%]'>
+                                <div className='leading-6 text-xs xl:text-sm max-w-[70%]'>
                                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                                 </div>
 
@@ -101,7 +101,7 @@ const AnnouncementtList: FC = () => {
                     </div>
                 </div>
 
-                <div className='flex-1 bg-white py-7 px-5 rounded-2xl'>
+                <div className='flex-1 hidden xl:block bg-white py-7 px-5 rounded-2xl'>
                     <div className='flex justify-between items-center'>
                         <div className='text-lg'>
                             متن اطلاعیه
diff --git a/src/pages/criticisms/Add.tsx b/src/pages/criticisms/Add.tsx
index 2370921..09150e7 100644
--- a/src/pages/criticisms/Add.tsx
+++ b/src/pages/criticisms/Add.tsx
@@ -17,8 +17,8 @@ const AddCriticisms: FC = () => {
                 {t('criticisms.criticisms')}
             </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-5'>
+                <div className='flex-1 bg-white py-8 xl:px-10 px-5 rounded-3xl'>
                     <div>
                         {t('criticisms.submit_your_criticisms')}
                     </div>
@@ -56,7 +56,7 @@ const AddCriticisms: FC = () => {
                     </div>
                 </div>
 
-                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white py-10 px-5 h-fit rounded-3xl'>
+                <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white 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/learning/List.tsx b/src/pages/learning/List.tsx
index b52e0f4..f4e3935 100644
--- a/src/pages/learning/List.tsx
+++ b/src/pages/learning/List.tsx
@@ -17,8 +17,8 @@ const LearningList: FC = () => {
                     {t('learning.learning')}
                 </div>
 
-                <div className='mt-8 flex  gap-6 items-center'>
-                    <div className='w-[300px]'>
+                <div className='xl:mt-8 mt-4 flex  xl:gap-6 gap-4 items-center'>
+                    <div className='xl:w-[300px] w-full'>
                         <Input
                             variant='search'
                             placeholder={t('service.search')}
@@ -26,18 +26,20 @@ const LearningList: FC = () => {
                         />
                     </div>
 
-                    <Select
-                        items={[
-                            { label: t('all'), value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        className='max-w-[100px]'
-                    />
+                    <div>
+                        <Select
+                            items={[
+                                { label: t('all'), value: 'all' },
+                                { label: 'Active', value: 'active' },
+                                { label: 'Inactive', value: 'inactive' },
+                            ]}
+                            className='max-w-[100px]'
+                        />
+                    </div>
                 </div>
 
-                <div className='mt-9 flex flex-wrap gap-8 text-sm'>
-                    <div className='bg-white p-4 rounded-3xl min-w-[30%] flex-1'>
+                <div className='xl:mt-9 mt-4 flex flex-wrap xl:gap-8 gap-6 text-sm'>
+                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                         <img src={LearningImage} className='w-full rounded-[20px]' />
                         <div className='mt-4'>
                             لورم ایپسوم متن ساختگی با تولید سادگی
@@ -51,7 +53,7 @@ const LearningList: FC = () => {
                             آذر ماه 1403
                         </div>
                     </div>
-                    <div className='bg-white p-4 rounded-3xl min-w-[30%] flex-1'>
+                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                         <img src={LearningImage} className='w-full rounded-[20px]' />
                         <div className='mt-4'>
                             لورم ایپسوم متن ساختگی با تولید سادگی
@@ -66,7 +68,7 @@ const LearningList: FC = () => {
                         </div>
                     </div>
 
-                    <div className='bg-white p-4 rounded-3xl min-w-[30%] flex-1'>
+                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                         <img src={LearningImage} className='w-full rounded-[20px]' />
                         <div className='mt-4'>
                             لورم ایپسوم متن ساختگی با تولید سادگی
@@ -80,7 +82,7 @@ const LearningList: FC = () => {
                             آذر ماه 1403
                         </div>
                     </div>
-                    <div className='bg-white p-4 rounded-3xl min-w-[30%] flex-1'>
+                    <div className='bg-white p-4 rounded-3xl xl:min-w-[30%] min-w-full flex-1'>
                         <img src={LearningImage} className='w-full rounded-[20px]' />
                         <div className='mt-4'>
                             لورم ایپسوم متن ساختگی با تولید سادگی
@@ -99,9 +101,10 @@ const LearningList: FC = () => {
                     <div className='min-w-[30%] flex-1 px-4'></div>
                     <div className='min-w-[30%] flex-1 px-4'></div>
                 </div>
+                <div className='h-14 xl:hidden'></div>
             </div>
 
-            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white h-fit rounded-3xl overflow-hidden relative'>
+            <div style={{ width: SIDEBAR_SIZE_LEFT }} className='bg-white 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/router/Main.tsx b/src/router/Main.tsx
index 95b5048..4edcdf3 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -19,6 +19,7 @@ import ReceiptsDetail from '../pages/receipts/Detail'
 import Profile from '../pages/profile/Profile'
 import OtherServices from '../pages/service/OtherServices'
 import Footer from '../shared/Footer'
+import AnnouncementDetail from '../pages/annoncement/Detail'
 
 const MainRouter: FC = () => {
     return (
@@ -38,7 +39,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.transactions} element={<TransactionList />} />
                             <Route path={Pages.receipts.index} element={<ReceiptsList />} />
                             <Route path={Pages.receipts.detail + ':id'} element={<ReceiptsDetail />} />
-                            <Route path={Pages.announcement} element={<AnnouncementtList />} />
+                            <Route path={Pages.announcement.list} element={<AnnouncementtList />} />
+                            <Route path={Pages.announcement.detail + ':id'} element={<AnnouncementDetail />} />
                             <Route path={Pages.criticisms} element={<AddCriticisms />} />
                             <Route path={Pages.learning} element={<LearningList />} />
                             <Route path={Pages.setting} element={<Setting />} />
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 0620093..c483dd3 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -90,7 +90,7 @@ const SideBar: FC = () => {
                             icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.announcement')}
                             isActive={isActive('announcement')}
-                            link={Pages.announcement}
+                            link={Pages.announcement.list}
                         />
                     </div>
                     <div className='text-xs text-[#8C90A3]'>