diff --git a/src/_nav.js b/src/_nav.js
index 56e07e3..bf6801f 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -44,6 +44,12 @@ const _nav = [
     to: '/orders-placed',
     icon: <CIcon icon={cilPaperPlane} customClassName="nav-icon" />,
   },
+  {
+    component: CNavItem,
+    name: 'Announcements',
+    to: '/announcements',
+    icon: <CIcon icon={cilPaperPlane} customClassName="nav-icon" />,
+  },
   // {
   //   component: CNavItem,
   //   name: 'Product manual',
diff --git a/src/routes.js b/src/routes.js
index 9b69e9f..9f1944e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -5,6 +5,8 @@ import Cart from './views/pages/cart/cart'
 import OrderDetails from './views/orders/OrderDetails'
 import ProductManual from './views/pages/productManual/productManual'
 import ViewProductManual from './views/pages/productManual/viewProductManual'
+import { Announcement } from '@mui/icons-material'
+import Announcements from './views/pages/announcements/announcements'
 
 const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
 const Shop = React.lazy(() => import('./views/shops/Shop'))
@@ -32,6 +34,7 @@ const routes = [
   { path: '/change-password', name: 'Change password', element: ChangePassword },
 
   { path: '/cart', name: 'Cart', element: Cart },
+  { path: '/announcements', name: 'Announcements', element: Announcements },
 ]
 
 export default routes
diff --git a/src/views/pages/announcements/announcements.js b/src/views/pages/announcements/announcements.js
new file mode 100644
index 0000000..1b6541a
--- /dev/null
+++ b/src/views/pages/announcements/announcements.js
@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from 'react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TablePagination,
+  Paper,
+  Button,
+  Typography,
+  Skeleton,
+  Box,
+} from '@mui/material'
+import axios from 'axios'
+// import { Box } from '@material-ui/core'
+import { useNavigate } from 'react-router-dom'
+import { isAutheticated } from '../../../auth'
+import Axios from '../../../axios'
+
+const Announcements = () => {
+  const [announcements, setAnnouncements] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [page, setPage] = useState(0)
+  const [rowsPerPage, setRowsPerPage] = useState(5)
+  const [totalAnnouncements, setTotalAnnouncements] = useState(0)
+  const token = isAutheticated()
+
+  const fetchAnnouncements = async (page, rowsPerPage) => {
+    setLoading(true)
+    try {
+      const response = await Axios.get('/api/announcement/RDs', {
+        params: {
+          page: page + 1, // backend uses 1-based index
+          rowsPerPage,
+        },
+        headers: {
+          Authorization: `Bearer ${token}`, // if token is necessary for authorization
+        },
+      })
+      console.log(response, 'this is the response ')
+      const { announcements, totalAnnouncements } = response.data
+      setAnnouncements(announcements)
+      setTotalAnnouncements(totalAnnouncements)
+    } catch (error) {
+      console.error('Error fetching announcements', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchAnnouncements(page, rowsPerPage)
+  }, [page, rowsPerPage])
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage)
+  }
+
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10))
+    setPage(0) // Reset page to 0 when changing rows per page
+  }
+
+  const formatAMPM = (dateString) => {
+    const date = new Date(dateString)
+    let hours = date.getHours()
+    let minutes = date.getMinutes()
+    const ampm = hours >= 12 ? 'PM' : 'AM'
+    hours = hours % 12 || 12
+    minutes = minutes < 10 ? '0' + minutes : minutes
+    return `${hours}:${minutes} ${ampm}`
+  }
+  const navigate = useNavigate()
+
+  return (
+    <Box>
+      <Box display={'flex'} mb={2}>
+        <Typography flex={1} textAlign={'center'} fontWeight={'bold'} variant="h4">
+          Announcements
+        </Typography>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table>
+          <TableHead sx={{ fontWeight: 'bold' }}>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Time</TableCell>
+              {/* <TableCell>Sent to</TableCell> */}
+              <TableCell>Message</TableCell>
+              {/* <TableCell>Action</TableCell> */}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {loading ? (
+              Array.from(new Array(rowsPerPage)).map((_, index) => (
+                <TableRow key={index}>
+                  <TableCell colSpan={5}>
+                    <Skeleton height={40} />
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : announcements.length > 0 ? (
+              announcements.map((announcement) => (
+                <TableRow key={announcement._id}>
+                  <TableCell>{announcement.uniqueId}</TableCell>
+                  <TableCell>
+                    {new Date(announcement.createdAt).toDateString()}
+                    <span>, {formatAMPM(announcement.createdAt)}</span>
+                  </TableCell>
+                  {/* <TableCell>{announcement.sentTo.join(', ')}</TableCell> */}
+                  <TableCell>{announcement.message}</TableCell>
+                  {/* <TableCell>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      onClick={() =>
+                        alert(`Viewing announcement ${announcement.id}`)
+                      }
+                    >
+                      View
+                    </Button>
+                  </TableCell> */}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={5} align="center">
+                  <Typography variant="body1">Data not found</Typography>
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={totalAnnouncements}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onPageChange={handleChangePage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+        />
+      </TableContainer>
+    </Box>
+  )
+}
+
+export default Announcements