diff --git a/src/App.jsx b/src/App.jsx
index 99d55a675..7ea66fd87 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,6 +15,7 @@ import InactivityHandler from "./helper/inactivityhandler";
 import Examination from "./Modules/Examination/examination";
 import Database from "./Modules/Database/database";
 import ProgrammeCurriculumRoutes from "./Modules/Program_curriculum/programmCurriculum";
+import NotificationView from "./routes/notificationRoutes";
 import NotFoundPage from "./components/NotFoundPage";
 
 const theme = createTheme({
@@ -46,6 +47,14 @@ export default function App() {
             </Layout>
           }
         />
+        <Route
+          path="/dashboard/notifications"
+          element={
+            <Layout>
+              <NotificationView />
+            </Layout>
+          }
+        />
         <Route
           path="/academics"
           element={
diff --git a/src/Modules/Dashboard/dashboardNotifications.jsx b/src/Modules/Dashboard/dashboardNotifications.jsx
index ca8565bda..90eedecbd 100644
--- a/src/Modules/Dashboard/dashboardNotifications.jsx
+++ b/src/Modules/Dashboard/dashboardNotifications.jsx
@@ -127,15 +127,15 @@ function Dashboard() {
           data: JSON.parse(item.data.replace(/'/g, '"')),
         }));
 
+        const isAnnouncement = (item) =>
+          item?.data?.flag === "announcement" ||
+          item?.data?.type === "announcement";
+
         setNotificationsList(
-          notificationsData.filter(
-            (item) => item.data?.flag !== "announcement",
-          ),
+          notificationsData.filter((item) => !isAnnouncement(item)),
         );
         setAnnouncementsList(
-          notificationsData.filter(
-            (item) => item.data?.flag === "announcement",
-          ),
+          notificationsData.filter((item) => isAnnouncement(item)),
         );
       } catch (error) {
         console.error("Error fetching dashboard data:", error);
@@ -408,4 +408,4 @@ NotificationItem.propTypes = {
   markAsUnread: PropTypes.func.isRequired,
   deleteNotification: PropTypes.func.isRequired,
   loading: PropTypes.number.isRequired,
-};
\ No newline at end of file
+};
diff --git a/src/Modules/Notification/Announcements.jsx b/src/Modules/Notification/Announcements.jsx
new file mode 100644
index 000000000..7b1ef7701
--- /dev/null
+++ b/src/Modules/Notification/Announcements.jsx
@@ -0,0 +1,81 @@
+import { useEffect, useState } from "react";
+import { notificationAPI, notificationUtils } from "./api";
+
+function Announcements() {
+  const [announcementsList, setAnnouncementsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingId, setLoadingId] = useState(-1);
+
+  // Fetch announcements on mount
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const data = await notificationAPI.fetchAll();
+        const { announcements } = notificationUtils.separate(data);
+        setAnnouncementsList(announcements);
+      } catch (err) {
+        console.error("Failed to fetch announcements:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // Mark as read
+  const handleMarkAsRead = async (announcementId) => {
+    try {
+      setLoadingId(announcementId);
+      await notificationAPI.markAsRead(announcementId);
+      setAnnouncementsList((prev) =>
+        prev.map((a) =>
+          a.id === announcementId ? { ...a, unread: false } : a,
+        ),
+      );
+    } catch (err) {
+      console.error("Error:", err);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  // Mark as unread
+  const handleMarkAsUnread = async (announcementId) => {
+    try {
+      setLoadingId(announcementId);
+      await notificationAPI.markAsUnread(announcementId);
+      setAnnouncementsList((prev) =>
+        prev.map((a) => (a.id === announcementId ? { ...a, unread: true } : a)),
+      );
+    } catch (err) {
+      console.error("Error:", err);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  // Delete announcement
+  const handleDelete = async (announcementId) => {
+    try {
+      await notificationAPI.delete(announcementId);
+      setAnnouncementsList((prev) =>
+        prev.filter((a) => a.id !== announcementId),
+      );
+    } catch (err) {
+      console.error("Error:", err);
+    }
+  };
+
+  return {
+    announcementsList,
+    setAnnouncementsList,
+    loading,
+    loadingId,
+    markAsRead: handleMarkAsRead,
+    markAsUnread: handleMarkAsUnread,
+    deleteNotification: handleDelete,
+  };
+}
+
+export default Announcements;
diff --git a/src/Modules/Notification/Notifications.jsx b/src/Modules/Notification/Notifications.jsx
new file mode 100644
index 000000000..21b0bb73b
--- /dev/null
+++ b/src/Modules/Notification/Notifications.jsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+import { notificationAPI, notificationUtils } from "./api";
+
+function Notifications() {
+  const [notificationsList, setNotificationsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingId, setLoadingId] = useState(-1);
+
+  // Fetch notifications on mount
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const data = await notificationAPI.fetchAll();
+        const { notifications } = notificationUtils.separate(data);
+        setNotificationsList(notifications);
+      } catch (err) {
+        console.error("Failed to fetch notifications:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // Mark as read
+  const handleMarkAsRead = async (notifId) => {
+    try {
+      setLoadingId(notifId);
+      await notificationAPI.markAsRead(notifId);
+      setNotificationsList((prev) =>
+        prev.map((n) => (n.id === notifId ? { ...n, unread: false } : n)),
+      );
+    } catch (err) {
+      console.error("Error:", err);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  // Mark as unread
+  const handleMarkAsUnread = async (notifId) => {
+    try {
+      setLoadingId(notifId);
+      await notificationAPI.markAsUnread(notifId);
+      setNotificationsList((prev) =>
+        prev.map((n) => (n.id === notifId ? { ...n, unread: true } : n)),
+      );
+    } catch (err) {
+      console.error("Error:", err);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  // Delete notification
+  const handleDelete = async (notifId) => {
+    try {
+      await notificationAPI.delete(notifId);
+      setNotificationsList((prev) => prev.filter((n) => n.id !== notifId));
+    } catch (err) {
+      console.error("Error:", err);
+    }
+  };
+
+  return {
+    notificationsList,
+    setNotificationsList,
+    loading,
+    loadingId,
+    markAsRead: handleMarkAsRead,
+    markAsUnread: handleMarkAsUnread,
+    deleteNotification: handleDelete,
+  };
+}
+
+export default Notifications;
diff --git a/src/Modules/Notification/NotificationsPage.jsx b/src/Modules/Notification/NotificationsPage.jsx
new file mode 100644
index 000000000..de4d29e8e
--- /dev/null
+++ b/src/Modules/Notification/NotificationsPage.jsx
@@ -0,0 +1,106 @@
+import { useMemo, useState } from "react";
+import { Flex } from "@mantine/core";
+import CustomBreadcrumbs from "../../components/Breadcrumbs.jsx";
+import ModuleTabs from "../../components/moduleTabs.jsx";
+import { useNotifications } from "./hooks/useNotifications";
+import { sortNotifications, getUnreadCount } from "./utils/notificationUtils";
+import NotificationList from "./components/NotificationList";
+import NotificationFilters from "./components/NotificationFilters";
+
+function NotificationsPage() {
+  const {
+    notificationsList,
+    announcementsList,
+    loading,
+    markAsRead,
+    markAsUnread,
+    deleteNotification,
+  } = useNotifications();
+
+  const [activeTab, setActiveTab] = useState("0");
+  const [sortedBy, setSortedBy] = useState("Most Recent");
+  const [loadingId, setLoadingId] = useState(-1);
+
+  // Tab configuration
+  const tabItems = [{ title: "Notifications" }, { title: "Announcements" }];
+
+  // Calculate badge counts
+  const notificationBadgeCount = getUnreadCount(notificationsList);
+  const announcementBadgeCount = getUnreadCount(announcementsList);
+  const badges = [notificationBadgeCount, announcementBadgeCount];
+
+  // Get current tab data
+  const notificationsToDisplay =
+    activeTab === "1" ? announcementsList : notificationsList;
+
+  // Sort notifications
+  const sortedNotifications = useMemo(
+    () => sortNotifications(notificationsToDisplay, sortedBy),
+    [sortedBy, notificationsToDisplay],
+  );
+
+  // Handlers with loading state management
+  const handleMarkAsRead = async (notifId) => {
+    try {
+      setLoadingId(notifId);
+      await markAsRead(notifId);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  const handleMarkAsUnread = async (notifId) => {
+    try {
+      setLoadingId(notifId);
+      await markAsUnread(notifId);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  const handleDelete = async (notifId) => {
+    try {
+      setLoadingId(notifId);
+      await deleteNotification(notifId);
+    } catch (err) {
+      console.error("Failed to delete:", err);
+    } finally {
+      setLoadingId(-1);
+    }
+  };
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+
+      {/* Header with tabs and filters */}
+      <Flex
+        justify="space-between"
+        align={{ base: "start", sm: "center" }}
+        mt="lg"
+        direction={{ base: "column", sm: "row" }}
+      >
+        <ModuleTabs
+          tabs={tabItems}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          badges={badges}
+        />
+
+        <NotificationFilters sortedBy={sortedBy} onSortChange={setSortedBy} />
+      </Flex>
+
+      {/* Notifications list */}
+      <NotificationList
+        notifications={sortedNotifications}
+        onMarkAsRead={handleMarkAsRead}
+        onMarkAsUnread={handleMarkAsUnread}
+        onDelete={handleDelete}
+        loading={loading}
+        loadingId={loadingId}
+      />
+    </>
+  );
+}
+
+export default NotificationsPage;
diff --git a/src/Modules/Notification/api.js b/src/Modules/Notification/api.js
new file mode 100644
index 000000000..f95b89c6c
--- /dev/null
+++ b/src/Modules/Notification/api.js
@@ -0,0 +1,110 @@
+import axios from "axios";
+import {
+  notificationReadRoute,
+  notificationDeleteRoute,
+  notificationUnreadRoute,
+  getNotificationsRoute,
+} from "../../routes/dashboardRoutes";
+
+const getAuthToken = () => localStorage.getItem("authToken");
+
+const getAuthHeaders = () => ({
+  headers: { Authorization: `Token ${getAuthToken()}` },
+});
+
+/**
+ * Notification API instance
+ * All backend communication for notifications
+ */
+export const notificationAPI = {
+  fetchAll: async () => {
+    try {
+      const token = getAuthToken();
+      if (!token) throw new Error("No authentication token found!");
+      const { data } = await axios.get(getNotificationsRoute, getAuthHeaders());
+      return data.notifications || [];
+    } catch (error) {
+      console.error("Error fetching notifications:", error);
+      throw error;
+    }
+  },
+
+  markAsRead: async (notificationId) => {
+    try {
+      return await axios.post(
+        notificationReadRoute,
+        { id: notificationId },
+        getAuthHeaders(),
+      );
+    } catch (error) {
+      console.error("Error marking as read:", error);
+      throw error;
+    }
+  },
+
+  markAsUnread: async (notificationId) => {
+    try {
+      return await axios.post(
+        notificationUnreadRoute,
+        { id: notificationId },
+        getAuthHeaders(),
+      );
+    } catch (error) {
+      console.error("Error marking as unread:", error);
+      throw error;
+    }
+  },
+
+  delete: async (notificationId) => {
+    try {
+      return await axios.delete(
+        notificationDeleteRoute.replace("{id}", notificationId),
+        getAuthHeaders(),
+      );
+    } catch (error) {
+      console.error("Error deleting notification:", error);
+      throw error;
+    }
+  },
+};
+
+/**
+ * Utility functions for notification data
+ */
+export const notificationUtils = {
+  isAnnouncement: (notification) =>
+    notification?.data?.flag === "announcement" ||
+    notification?.data?.type === "announcement",
+
+  parseData: (notification) => ({
+    ...notification,
+    data:
+      typeof notification.data === "string"
+        ? JSON.parse(notification.data.replace(/'/g, '"'))
+        : notification.data,
+  }),
+
+  separate: (notifications) => {
+    const parsed = notifications.map(notificationUtils.parseData);
+    return {
+      notifications: parsed.filter((n) => !notificationUtils.isAnnouncement(n)),
+      announcements: parsed.filter((n) => notificationUtils.isAnnouncement(n)),
+    };
+  },
+
+  sort: (notifications, sortBy) => {
+    const sortMap = {
+      "Most Recent": (a, b) => new Date(b.timestamp) - new Date(a.timestamp),
+      Tags: (a, b) =>
+        (a.data?.module || "").localeCompare(b.data?.module || ""),
+      Title: (a, b) => (a.verb || "").localeCompare(b.verb || ""),
+    };
+    const sortFn = sortMap[sortBy] || sortMap["Most Recent"];
+    return [...notifications].sort(sortFn);
+  },
+
+  getUnreadCount: (notifications) =>
+    notifications.filter((n) => !n.deleted && n.unread).length,
+
+  filterActive: (notifications) => notifications.filter((n) => !n.deleted),
+};
diff --git a/src/Modules/Notification/components/NotificationCard.jsx b/src/Modules/Notification/components/NotificationCard.jsx
new file mode 100644
index 000000000..d4c4eac0c
--- /dev/null
+++ b/src/Modules/Notification/components/NotificationCard.jsx
@@ -0,0 +1,95 @@
+import PropTypes from "prop-types";
+import {
+  Button,
+  CloseButton,
+  Divider,
+  Flex,
+  Grid,
+  Paper,
+  Text,
+  Badge,
+} from "@mantine/core";
+
+export function NotificationCard({
+  notification,
+  onMarkAsRead,
+  onDelete,
+  onMarkAsUnread,
+  loadingId,
+}) {
+  const { module } = notification.data || {};
+  const isLoading = loadingId === notification.id;
+
+  return (
+    <Grid.Col span={{ base: 12, md: 6 }}>
+      <Paper
+        radius="md"
+        px="lg"
+        pt="sm"
+        pb="xl"
+        style={{ borderLeft: "0.6rem solid #15ABFF" }}
+        withBorder
+        maw="1240px"
+      >
+        <Flex justify="space-between" mb="md">
+          <Flex direction="column" gap="xs" flex={1}>
+            <Flex gap="md" align="center">
+              <Text fw={600} size="1.2rem">
+                {notification.verb}
+              </Text>
+              <Badge color="#15ABFF">{module || "N/A"}</Badge>
+            </Flex>
+            <Text c="#6B6B6B" size="0.7rem">
+              {new Date(notification.timestamp).toLocaleDateString()}
+            </Text>
+            <Divider my="sm" w="10rem" />
+          </Flex>
+          <CloseButton
+            variant="transparent"
+            style={{ cursor: "pointer" }}
+            onClick={() => onDelete(notification.id)}
+          />
+        </Flex>
+
+        <Flex justify="space-between" align="flex-start" gap="md">
+          <Text flex={1}>
+            {notification.description || "No description available."}
+          </Text>
+          <Button
+            variant="filled"
+            color={notification.unread ? "blue" : "gray"}
+            onClick={() =>
+              notification.unread
+                ? onMarkAsRead(notification.id)
+                : onMarkAsUnread(notification.id)
+            }
+            loaderProps={{ type: "dots" }}
+            loading={isLoading}
+            style={{ cursor: "pointer" }}
+            ml="sm"
+            miw="120px"
+          >
+            {notification.unread ? "Mark as read" : "Unread"}
+          </Button>
+        </Flex>
+      </Paper>
+    </Grid.Col>
+  );
+}
+
+NotificationCard.propTypes = {
+  notification: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    verb: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    timestamp: PropTypes.string.isRequired,
+    data: PropTypes.shape({
+      module: PropTypes.string,
+    }),
+    unread: PropTypes.bool.isRequired,
+  }).isRequired,
+  onMarkAsRead: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onMarkAsUnread: PropTypes.func.isRequired,
+  loadingId: PropTypes.number.isRequired,
+};
diff --git a/src/Modules/Notification/components/NotificationFilters.jsx b/src/Modules/Notification/components/NotificationFilters.jsx
new file mode 100644
index 000000000..095b540f1
--- /dev/null
+++ b/src/Modules/Notification/components/NotificationFilters.jsx
@@ -0,0 +1,41 @@
+import PropTypes from "prop-types";
+import { Flex, Select } from "@mantine/core";
+import { SortAscending } from "@phosphor-icons/react";
+import classes from "../../Dashboard/Dashboard.module.css";
+
+const SORT_CATEGORIES = ["Most Recent", "Tags", "Title"];
+
+function NotificationFilters({ sortedBy, onSortChange }) {
+  return (
+    <Flex
+      w={{ base: "40%", sm: "auto" }}
+      align="center"
+      mt="md"
+      rowGap="1rem"
+      columnGap="4rem"
+      wrap="wrap"
+    >
+      <Select
+        classNames={{
+          option: classes.selectoptions,
+          input: classes.selectinputs,
+        }}
+        variant="filled"
+        leftSection={<SortAscending />}
+        data={SORT_CATEGORIES}
+        value={sortedBy}
+        onChange={onSortChange}
+        placeholder="Sort By"
+        searchable={false}
+        clearable={false}
+      />
+    </Flex>
+  );
+}
+
+NotificationFilters.propTypes = {
+  sortedBy: PropTypes.string.isRequired,
+  onSortChange: PropTypes.func.isRequired,
+};
+
+export default NotificationFilters;
diff --git a/src/Modules/Notification/components/NotificationItem.jsx b/src/Modules/Notification/components/NotificationItem.jsx
new file mode 100644
index 000000000..776e55324
--- /dev/null
+++ b/src/Modules/Notification/components/NotificationItem.jsx
@@ -0,0 +1,103 @@
+import PropTypes from "prop-types";
+import {
+  Button,
+  CloseButton,
+  Divider,
+  Flex,
+  Grid,
+  Paper,
+  Text,
+  Badge,
+} from "@mantine/core";
+
+function NotificationItem({
+  notification,
+  onMarkAsRead,
+  onDelete,
+  onMarkAsUnread,
+  loadingId,
+}) {
+  const { module } = notification.data || {};
+  const isLoading = loadingId === notification.id;
+  const isUnread = notification.unread;
+
+  return (
+    <Grid.Col span={{ base: 12, md: 6 }} key={notification.id}>
+      <Paper
+        radius="md"
+        px="lg"
+        pt="sm"
+        pb="xl"
+        style={{ borderLeft: "0.6rem solid #15ABFF" }}
+        withBorder
+        maw="1240px"
+      >
+        {/* Header with title and module badge */}
+        <Flex justify="space-between" mb="md">
+          <Flex direction="column" gap="xs" flex={1}>
+            <Flex gap="md" align="center">
+              <Text fw={600} size="1.2rem">
+                {notification.verb}
+              </Text>
+              <Badge color="#15ABFF">{module || "N/A"}</Badge>
+            </Flex>
+            <Text c="#6B6B6B" size="0.7rem">
+              {new Date(notification.timestamp).toLocaleDateString()}
+            </Text>
+            <Divider my="sm" w="10rem" />
+          </Flex>
+          <CloseButton
+            variant="transparent"
+            style={{ cursor: "pointer" }}
+            onClick={() => onDelete(notification.id)}
+            aria-label="Delete notification"
+            disabled={isLoading}
+          />
+        </Flex>
+
+        {/* Description and action button */}
+        <Flex justify="space-between" align="flex-start" gap="md">
+          <Text flex={1}>
+            {notification.description || "No description available."}
+          </Text>
+          <Button
+            variant="filled"
+            color={isUnread ? "blue" : "gray"}
+            onClick={() =>
+              isUnread
+                ? onMarkAsRead(notification.id)
+                : onMarkAsUnread(notification.id)
+            }
+            loaderProps={{ type: "dots" }}
+            loading={isLoading}
+            style={{ cursor: "pointer" }}
+            ml="sm"
+            miw="120px"
+          >
+            {isUnread ? "Mark as read" : "Unread"}
+          </Button>
+        </Flex>
+      </Paper>
+    </Grid.Col>
+  );
+}
+
+NotificationItem.propTypes = {
+  notification: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    verb: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    timestamp: PropTypes.string.isRequired,
+    data: PropTypes.shape({
+      module: PropTypes.string,
+      flag: PropTypes.string,
+    }),
+    unread: PropTypes.bool.isRequired,
+  }).isRequired,
+  onMarkAsRead: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onMarkAsUnread: PropTypes.func.isRequired,
+  loadingId: PropTypes.number.isRequired,
+};
+
+export default NotificationItem;
diff --git a/src/Modules/Notification/components/NotificationList.jsx b/src/Modules/Notification/components/NotificationList.jsx
new file mode 100644
index 000000000..796de5e9e
--- /dev/null
+++ b/src/Modules/Notification/components/NotificationList.jsx
@@ -0,0 +1,60 @@
+import PropTypes from "prop-types";
+import { Container, Loader, Grid } from "@mantine/core";
+import { Empty } from "../../../components/empty";
+import NotificationItem from "./NotificationItem";
+
+function NotificationList({
+  notifications,
+  onMarkAsRead,
+  onMarkAsUnread,
+  onDelete,
+  loading,
+  loadingId,
+}) {
+  if (loading) {
+    return (
+      <Container py="xl">
+        <Loader size="lg" />
+      </Container>
+    );
+  }
+
+  const activeNotifications = notifications.filter((n) => !n.deleted);
+
+  if (activeNotifications.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <Grid mt="xl">
+      {activeNotifications.map((notification) => (
+        <NotificationItem
+          key={notification.id}
+          notification={notification}
+          onMarkAsRead={onMarkAsRead}
+          onMarkAsUnread={onMarkAsUnread}
+          onDelete={onDelete}
+          loadingId={loadingId}
+        />
+      ))}
+    </Grid>
+  );
+}
+
+NotificationList.propTypes = {
+  notifications: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      verb: PropTypes.string.isRequired,
+      timestamp: PropTypes.string.isRequired,
+      deleted: PropTypes.bool,
+    }),
+  ).isRequired,
+  onMarkAsRead: PropTypes.func.isRequired,
+  onMarkAsUnread: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  loadingId: PropTypes.number.isRequired,
+};
+
+export default NotificationList;
diff --git a/src/Modules/Notification/hooks/useNotifications.js b/src/Modules/Notification/hooks/useNotifications.js
new file mode 100644
index 000000000..925c540bd
--- /dev/null
+++ b/src/Modules/Notification/hooks/useNotifications.js
@@ -0,0 +1,87 @@
+import { useEffect, useState } from "react";
+import { notificationService } from "../services/notificationService";
+import { separateNotifications } from "../utils/notificationUtils";
+
+/**
+ * Hook to fetch and manage notifications
+ */
+export const useNotifications = () => {
+  const [notificationsList, setNotificationsList] = useState([]);
+  const [announcementsList, setAnnouncementsList] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchNotifications = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await notificationService.fetchNotifications();
+      const { notifications, announcements } = separateNotifications(data);
+      setNotificationsList(notifications);
+      setAnnouncementsList(announcements);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to fetch notifications:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateNotificationStatus = (notifId, updates) => {
+    setNotificationsList((prev) =>
+      prev.map((n) => (n.id === notifId ? { ...n, ...updates } : n)),
+    );
+    setAnnouncementsList((prev) =>
+      prev.map((n) => (n.id === notifId ? { ...n, ...updates } : n)),
+    );
+  };
+
+  const removeNotification = (notifId) => {
+    setNotificationsList((prev) => prev.filter((n) => n.id !== notifId));
+    setAnnouncementsList((prev) => prev.filter((n) => n.id !== notifId));
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+  }, []);
+
+  const handleMarkAsRead = async (notifId) => {
+    try {
+      await notificationService.markAsRead(notifId);
+      updateNotificationStatus(notifId, { unread: false });
+    } catch (err) {
+      console.error("Failed to mark as read:", err);
+      throw err;
+    }
+  };
+
+  const handleMarkAsUnread = async (notifId) => {
+    try {
+      await notificationService.markAsUnread(notifId);
+      updateNotificationStatus(notifId, { unread: true });
+    } catch (err) {
+      console.error("Failed to mark as unread:", err);
+      throw err;
+    }
+  };
+
+  const handleDelete = async (notifId) => {
+    try {
+      await notificationService.deleteNotification(notifId);
+      removeNotification(notifId);
+    } catch (err) {
+      console.error("Failed to delete notification:", err);
+      throw err;
+    }
+  };
+
+  return {
+    notificationsList,
+    announcementsList,
+    loading,
+    error,
+    markAsRead: handleMarkAsRead,
+    markAsUnread: handleMarkAsUnread,
+    deleteNotification: handleDelete,
+  };
+};
diff --git a/src/Modules/Notification/index.js b/src/Modules/Notification/index.js
new file mode 100644
index 000000000..dcbb57925
--- /dev/null
+++ b/src/Modules/Notification/index.js
@@ -0,0 +1,36 @@
+/**
+ * Notification Module Index
+ * Exports all public components and utilities
+ */
+
+// Components
+export { default as NotificationItem } from "./components/NotificationItem";
+export { default as NotificationList } from "./components/NotificationList";
+export { default as NotificationFilters } from "./components/NotificationFilters";
+
+// Pages
+export { default as NotificationsPage } from "./NotificationsPage";
+
+// Hooks
+export { useNotifications } from "./hooks/useNotifications";
+
+// Services
+export { notificationService } from "./services/notificationService";
+
+// Utils
+export * from "./utils/notificationUtils";
+
+// Redux
+export {
+  setNotifications,
+  setAnnouncements,
+  setLoading,
+  setError,
+  setSortedBy,
+  setActiveTab,
+  setLoadingId,
+  updateNotificationStatus,
+  removeNotification,
+  clearNotifications,
+} from "./redux/notificationSlice";
+export { default as notificationReducer } from "./redux/notificationSlice";
diff --git a/src/Modules/Notification/redux/notificationSlice.js b/src/Modules/Notification/redux/notificationSlice.js
new file mode 100644
index 000000000..98f80d549
--- /dev/null
+++ b/src/Modules/Notification/redux/notificationSlice.js
@@ -0,0 +1,98 @@
+/**
+ * Notification Redux Slice
+ * Manages notification state globally
+ */
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  notificationsList: [],
+  announcementsList: [],
+  loading: false,
+  error: null,
+  sortedBy: "Most Recent",
+  activeTab: "0",
+  loadingId: -1,
+};
+
+const notificationSlice = createSlice({
+  name: "notifications",
+  initialState,
+  reducers: {
+    // Set notifications
+    setNotifications: (state, action) => {
+      state.notificationsList = action.payload;
+    },
+
+    // Set announcements
+    setAnnouncements: (state, action) => {
+      state.announcementsList = action.payload;
+    },
+
+    // Set loading state
+    setLoading: (state, action) => {
+      state.loading = action.payload;
+    },
+
+    // Set error
+    setError: (state, action) => {
+      state.error = action.payload;
+    },
+
+    // Update sort option
+    setSortedBy: (state, action) => {
+      state.sortedBy = action.payload;
+    },
+
+    // Update active tab
+    setActiveTab: (state, action) => {
+      state.activeTab = action.payload;
+    },
+
+    // Set loading notification ID
+    setLoadingId: (state, action) => {
+      state.loadingId = action.payload;
+    },
+
+    // Update notification status
+    updateNotificationStatus: (state, action) => {
+      const { notifId, updates } = action.payload;
+      const notif = state.notificationsList.find((n) => n.id === notifId);
+      const announce = state.announcementsList.find((n) => n.id === notifId);
+      if (notif) Object.assign(notif, updates);
+      if (announce) Object.assign(announce, updates);
+    },
+
+    // Remove notification
+    removeNotification: (state, action) => {
+      const notifId = action.payload;
+      state.notificationsList = state.notificationsList.filter(
+        (n) => n.id !== notifId,
+      );
+      state.announcementsList = state.announcementsList.filter(
+        (n) => n.id !== notifId,
+      );
+    },
+
+    // Clear all
+    clearNotifications: (state) => {
+      state.notificationsList = [];
+      state.announcementsList = [];
+      state.error = null;
+    },
+  },
+});
+
+export const {
+  setNotifications,
+  setAnnouncements,
+  setLoading,
+  setError,
+  setSortedBy,
+  setActiveTab,
+  setLoadingId,
+  updateNotificationStatus,
+  removeNotification,
+  clearNotifications,
+} = notificationSlice.actions;
+
+export default notificationSlice.reducer;
diff --git a/src/Modules/Notification/services/notificationService.js b/src/Modules/Notification/services/notificationService.js
new file mode 100644
index 000000000..b898fa0ad
--- /dev/null
+++ b/src/Modules/Notification/services/notificationService.js
@@ -0,0 +1,81 @@
+import axios from "axios";
+import {
+  notificationReadRoute,
+  notificationDeleteRoute,
+  notificationUnreadRoute,
+  getNotificationsRoute,
+} from "../../../routes/dashboardRoutes";
+
+const getAuthToken = () => localStorage.getItem("authToken");
+
+const getAuthHeaders = () => ({
+  headers: { Authorization: `Token ${getAuthToken()}` },
+});
+
+export const notificationService = {
+  /**
+   * Fetch all notifications and announcements
+   */
+  fetchNotifications: async () => {
+    try {
+      const token = getAuthToken();
+      if (!token) throw new Error("No authentication token found!");
+
+      const { data } = await axios.get(getNotificationsRoute, getAuthHeaders());
+      return data.notifications || [];
+    } catch (error) {
+      console.error("Error fetching notifications:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Mark notification as read
+   */
+  markAsRead: async (notificationId) => {
+    try {
+      const response = await axios.post(
+        notificationReadRoute,
+        { id: notificationId },
+        getAuthHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error marking notification as read:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Mark notification as unread
+   */
+  markAsUnread: async (notificationId) => {
+    try {
+      const response = await axios.post(
+        notificationUnreadRoute,
+        { id: notificationId },
+        getAuthHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error marking notification as unread:", error);
+      throw error;
+    }
+  },
+
+  /**
+   * Delete notification
+   */
+  deleteNotification: async (notificationId) => {
+    try {
+      const response = await axios.delete(
+        notificationDeleteRoute.replace("{id}", notificationId),
+        getAuthHeaders(),
+      );
+      return response.data;
+    } catch (error) {
+      console.error("Error deleting notification:", error);
+      throw error;
+    }
+  },
+};
diff --git a/src/Modules/Notification/utils/notificationUtils.js b/src/Modules/Notification/utils/notificationUtils.js
new file mode 100644
index 000000000..a4bb94e38
--- /dev/null
+++ b/src/Modules/Notification/utils/notificationUtils.js
@@ -0,0 +1,51 @@
+/**
+ * Parse notification data from JSON string
+ */
+export const parseNotificationData = (notification) => ({
+  ...notification,
+  data:
+    typeof notification.data === "string"
+      ? JSON.parse(notification.data.replace(/'/g, '"'))
+      : notification.data,
+});
+
+export const isAnnouncementNotification = (notification) =>
+  notification?.data?.flag === "announcement" ||
+  notification?.data?.type === "announcement";
+
+/**
+ * Separate notifications into regular notifications and announcements
+ */
+export const separateNotifications = (notifications) => {
+  const parsed = notifications.map(parseNotificationData);
+  return {
+    notifications: parsed.filter((n) => !isAnnouncementNotification(n)),
+    announcements: parsed.filter((n) => isAnnouncementNotification(n)),
+  };
+};
+
+/**
+ * Get unread count for a list of notifications
+ */
+export const getUnreadCount = (notifications) =>
+  notifications.filter((n) => !n.deleted && n.unread).length;
+
+/**
+ * Sort notifications based on category
+ */
+export const sortNotifications = (notifications, sortBy) => {
+  const sortMap = {
+    "Most Recent": (a, b) => new Date(b.timestamp) - new Date(a.timestamp),
+    Tags: (a, b) => (a.data?.module || "").localeCompare(b.data?.module || ""),
+    Title: (a, b) => (a.verb || "").localeCompare(b.verb || ""),
+  };
+
+  const sortFn = sortMap[sortBy] || sortMap["Most Recent"];
+  return [...notifications].sort(sortFn);
+};
+
+/**
+ * Filter active notifications (not deleted)
+ */
+export const filterActiveNotifications = (notifications) =>
+  notifications.filter((n) => !n.deleted);
diff --git a/src/components/header.jsx b/src/components/header.jsx
index b2ed336ce..bfb4c24c2 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { User, SignOut, Bell, UserSwitch } from "@phosphor-icons/react";
 import { useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
@@ -24,13 +24,18 @@ import classes from "../Modules/Dashboard/Dashboard.module.css";
 import avatarImage from "../assets/avatar.png";
 import { setPfNo } from "../redux/pfNoSlice";
 
-import { logoutRoute, updateRoleRoute } from "../routes/dashboardRoutes";
+import {
+  logoutRoute,
+  updateRoleRoute,
+  getNotificationsRoute,
+} from "../routes/dashboardRoutes";
 
 function Header({ opened, toggleSidebar }) {
   const [popoverOpened, setPopoverOpened] = useState(false);
   const username = useSelector((state) => state.user.username);
   const roles = useSelector((state) => state.user.roles);
   const role = useSelector((state) => state.user.role);
+  const [unreadCount, setUnreadCount] = useState(0);
   const navigate = useNavigate();
   const dispatch = useDispatch();
   // const queryclient = useQueryClient();
@@ -65,7 +70,7 @@ function Header({ opened, toggleSidebar }) {
       console.log(response.data.message);
       dispatch(setRole(newRole));
       dispatch(setCurrentAccessibleModules());
-      navigate('/dashboard')
+      navigate("/dashboard");
     } catch (error) {
       console.error("Error updating last selected role:", error.response.data);
     }
@@ -98,6 +103,27 @@ function Header({ opened, toggleSidebar }) {
     }
   };
 
+  useEffect(() => {
+    const fetchUnread = async () => {
+      const token = localStorage.getItem("authToken");
+      if (!token) return;
+
+      try {
+        const { data } = await axios.get(getNotificationsRoute, {
+          headers: { Authorization: `Token ${token}` },
+        });
+        const list = data?.notifications || [];
+        setUnreadCount(
+          list.filter((item) => item?.unread && !item?.deleted).length,
+        );
+      } catch (err) {
+        console.error("Failed to fetch unread count:", err);
+      }
+    };
+
+    fetchUnread();
+  }, [role]);
+
   return (
     <Flex
       bg="#F5F7F8"
@@ -141,8 +167,17 @@ function Header({ opened, toggleSidebar }) {
             onChange={handleRoleChange}
             placeholder="Role"
           />
-          <Indicator>
-            <Bell color="orange" size="32px" cursor="pointer" />
+          <Indicator
+            disabled={unreadCount === 0}
+            label={unreadCount > 99 ? "99+" : unreadCount}
+            size={18}
+          >
+            <Bell
+              color="orange"
+              size="32px"
+              cursor="pointer"
+              onClick={() => navigate("/dashboard/notifications")}
+            />
           </Indicator>
           <Popover
             opened={popoverOpened}
diff --git a/src/routes/dashboardRoutes/index.jsx b/src/routes/dashboardRoutes/index.jsx
index 007c8f013..7af53b4dc 100644
--- a/src/routes/dashboardRoutes/index.jsx
+++ b/src/routes/dashboardRoutes/index.jsx
@@ -4,7 +4,9 @@ export const logoutRoute = `${host}/api/auth/logout/`;
 export const updateRoleRoute = `${host}/api/update-role/`;
 export const getNotificationsRoute = `${host}/api/notification/`;
 export const notificationReadRoute = `${host}/api/notificationread`;
-export const notificationDeleteRoute = `${host}/api/notificationdelete`;
+export const notificationDeleteRoute = `${host}/notification/api/notifications/{id}/`;
 export const notificationUnreadRoute = `${host}/api/notificationunread`;
+export const announcementCreateRoute = `${host}/notification/api/announcements/`;
+export const announcementPublishRoute = `${host}/notification/api/announcements`;
 export const getProfileDataRoute = `${host}/api/profile/`;
 export const updateProfileDataRoute = `${host}/api/profile_update/`;
diff --git a/src/routes/notificationRoutes/index.jsx b/src/routes/notificationRoutes/index.jsx
new file mode 100644
index 000000000..e316790e2
--- /dev/null
+++ b/src/routes/notificationRoutes/index.jsx
@@ -0,0 +1,908 @@
+import {
+  Flex,
+  Select,
+  MultiSelect,
+  Container,
+  Modal,
+  Loader,
+  Grid,
+  Button,
+  Paper,
+  Stack,
+  Textarea,
+  TextInput,
+  Group,
+  Text,
+} from "@mantine/core";
+import { SortAscending } from "@phosphor-icons/react";
+import { useMemo, useState, useEffect, useCallback } from "react";
+import { useSelector } from "react-redux";
+import axios from "axios";
+import { notifications } from "@mantine/notifications";
+import CustomBreadcrumbs from "../../components/Breadcrumbs.jsx";
+import ModuleTabs from "../../components/moduleTabs.jsx";
+import { NotificationCard } from "../../Modules/Notification/components/NotificationCard";
+import {
+  getUnreadCount,
+  sortNotifications,
+  filterActiveNotifications,
+} from "../../Modules/Notification/utils/notificationUtils";
+import { Empty } from "../../components/empty";
+import classes from "../../Modules/Dashboard/Dashboard.module.css";
+import NotificationsHook from "../../Modules/Notification/Notifications";
+import AnnouncementsHook from "../../Modules/Notification/Announcements";
+import {
+  notificationAPI,
+  notificationUtils,
+} from "../../Modules/Notification/api";
+import { announcementCreateRoute } from "../dashboardRoutes";
+
+/**
+ * Combined Notifications and Announcements view
+ */
+function NotificationView() {
+  const notificationsData = NotificationsHook();
+  const announcementsData = AnnouncementsHook();
+  const role = useSelector((state) => state.user.role);
+  const roles = useSelector((state) => state.user.roles);
+
+  const [activeTab, setActiveTab] = useState("0");
+  const [sortedBy, setSortedBy] = useState("Most Recent");
+
+  const [manageLoading, setManageLoading] = useState(false);
+  const [manageSubmitting, setManageSubmitting] = useState(false);
+  const [deletingAnnouncementId, setDeletingAnnouncementId] = useState(null);
+  const [manageAnnouncements, setManageAnnouncements] = useState([]);
+  const [announcementStatusMap, setAnnouncementStatusMap] = useState({});
+  const [announcementStatsMap, setAnnouncementStatsMap] = useState({});
+  const [studentRollOptions, setStudentRollOptions] = useState([]);
+  const [studentRollLoading, setStudentRollLoading] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [editingAnnouncementId, setEditingAnnouncementId] = useState(null);
+  const [formData, setFormData] = useState({
+    title: "",
+    content: "",
+    module: "Fusion",
+    target_audience: "all_students",
+    batch: "",
+    specific_usernames: [],
+  });
+  const [editFormData, setEditFormData] = useState({
+    title: "",
+    content: "",
+    module: "Fusion",
+    target_audience: "all_students",
+    batch: "",
+    specific_usernames: [],
+  });
+
+  const targetAudienceOptions = [
+    { value: "all_users", label: "All Users" },
+    { value: "students", label: "Students" },
+    { value: "faculty", label: "Faculty" },
+    { value: "professor", label: "Professor" },
+    { value: "staff", label: "Staff" },
+    { value: "batch", label: "Batch" },
+    { value: "specific_users", label: "Specific Users" },
+    { value: "all_cse", label: "ALL CSE" },
+    { value: "all_ece", label: "ALL ECE" },
+    { value: "all_me", label: "ALL ME" },
+    { value: "all_ug", label: "ALL UG" },
+    { value: "all_pg", label: "ALL PG" },
+    { value: "all_students", label: "ALL Students" },
+    { value: "specific_student", label: "Specific Student" },
+  ];
+
+  const tabItems = [{ title: "Notifications" }, { title: "Announcements" }];
+
+  const canManageAnnouncements = useMemo(() => {
+    const allRoles = [...(Array.isArray(roles) ? roles : []), role]
+      .filter(Boolean)
+      .map((r) => String(r).toLowerCase());
+
+    return allRoles.some((r) =>
+      ["admin", "professor", "faculty", "staff"].some((k) => r.includes(k)),
+    );
+  }, [role, roles]);
+
+  const getAuthHeaders = useCallback(() => {
+    const token = localStorage.getItem("authToken");
+    return { headers: { Authorization: `Token ${token}` } };
+  }, []);
+
+  const refreshNotificationLists = useCallback(async () => {
+    try {
+      const data = await notificationAPI.fetchAll();
+      const { notifications: updatedNotifications, announcements } =
+        notificationUtils.separate(data);
+      notificationsData.setNotificationsList(updatedNotifications);
+      announcementsData.setAnnouncementsList(announcements);
+    } catch (err) {
+      console.error("Failed to refresh notifications:", err);
+    }
+  }, [notificationsData, announcementsData]);
+
+  const fetchManageAnnouncements = useCallback(async () => {
+    if (!canManageAnnouncements) return;
+
+    try {
+      setManageLoading(true);
+      const { data } = await axios.get(
+        `${announcementCreateRoute}my_announcements/`,
+        getAuthHeaders(),
+      );
+      setManageAnnouncements(data?.results || []);
+    } catch (err) {
+      console.error("Failed to load your announcements:", err);
+    } finally {
+      setManageLoading(false);
+    }
+  }, [canManageAnnouncements, getAuthHeaders]);
+
+  useEffect(() => {
+    fetchManageAnnouncements();
+  }, [fetchManageAnnouncements]);
+
+  const fetchStudentRollNumbers = useCallback(async () => {
+    if (!canManageAnnouncements) return;
+
+    try {
+      setStudentRollLoading(true);
+      const { data } = await axios.get(
+        `${announcementCreateRoute}student_roll_numbers/`,
+        getAuthHeaders(),
+      );
+
+      setStudentRollOptions(
+        (data?.results || []).map((student) => ({
+          value: student.username,
+          label: student.username,
+        })),
+      );
+    } catch (err) {
+      console.error("Failed to load student roll numbers:", err);
+    } finally {
+      setStudentRollLoading(false);
+    }
+  }, [canManageAnnouncements, getAuthHeaders]);
+
+  useEffect(() => {
+    fetchStudentRollNumbers();
+  }, [fetchStudentRollNumbers]);
+
+  const parseAnnouncementMessage = (announcement) => {
+    if (announcement?.title || announcement?.content) {
+      return {
+        title: announcement?.title || "",
+        content: announcement?.content || "",
+      };
+    }
+
+    const raw = (announcement?.message || "").trim();
+    if (!raw) {
+      return { title: "", content: "" };
+    }
+
+    if (raw.includes("\n\n")) {
+      const [title, ...rest] = raw.split("\n\n");
+      return { title: title.trim(), content: rest.join("\n\n").trim() };
+    }
+
+    return { title: raw, content: raw };
+  };
+
+  const getAudienceFromAnnouncement = (announcement) => {
+    if (announcement?.target_group === "all_users") return "all_users";
+    if (announcement?.target_group === "faculty") return "faculty";
+    if (announcement?.target_group === "staff") return "staff";
+    if (announcement?.target_group === "students") return "all_students";
+    if (announcement?.target_group === "specific_users")
+      return "specific_users";
+
+    const batch = (announcement?.batch || "").toUpperCase();
+    if (batch === "BCS") return "all_cse";
+    if (batch === "BEC") return "all_ece";
+    if (batch === "BME") return "all_me";
+    if (batch === "UG") return "all_ug";
+    if (batch === "PG") return "all_pg";
+
+    return "all_students";
+  };
+
+  const mapAudienceToPayload = (audience, specificUsernames = []) => {
+    if (audience === "all_users") return { target_group: "all_users" };
+    if (audience === "students") return { target_group: "students" };
+    if (audience === "faculty" || audience === "professor") {
+      return { target_group: "faculty" };
+    }
+    if (audience === "staff") return { target_group: "staff" };
+    if (audience === "batch") return { target_group: "batch" };
+    if (audience === "specific_users") {
+      return {
+        target_group: "specific_users",
+        specific_usernames: specificUsernames,
+      };
+    }
+    if (audience === "all_cse") return { target_group: "batch", batch: "BCS" };
+    if (audience === "all_ece") return { target_group: "batch", batch: "BEC" };
+    if (audience === "all_me") return { target_group: "batch", batch: "BME" };
+    if (audience === "all_ug") return { target_group: "batch", batch: "UG" };
+    if (audience === "all_pg") return { target_group: "batch", batch: "PG" };
+    if (audience === "specific_student") {
+      return {
+        target_group: "specific_users",
+        specific_usernames: specificUsernames,
+      };
+    }
+
+    return { target_group: "students" };
+  };
+
+  const resetCreateForm = () => {
+    setFormData({
+      title: "",
+      content: "",
+      module: "Fusion",
+      target_audience: "all_students",
+      batch: "",
+      specific_usernames: [],
+    });
+  };
+
+  const closeEditModal = () => {
+    setEditingAnnouncementId(null);
+    setIsEditModalOpen(false);
+    setEditFormData({
+      title: "",
+      content: "",
+      module: "Fusion",
+      target_audience: "all_students",
+      batch: "",
+      specific_usernames: [],
+    });
+  };
+
+  const validateAudienceSelection = (source) => {
+    if (!(source?.title || "").trim() || !(source?.content || "").trim()) {
+      notifications.show({
+        title: "Missing fields",
+        message: "Please enter both title and content.",
+        color: "orange",
+      });
+      return false;
+    }
+
+    if (
+      (source.target_audience === "specific_student" ||
+        source.target_audience === "specific_users") &&
+      (source.specific_usernames || []).length === 0
+    ) {
+      notifications.show({
+        title: "No students selected",
+        message: "Please select at least one student roll number.",
+        color: "orange",
+      });
+      return false;
+    }
+
+    if (source.target_audience === "batch" && !(source.batch || "").trim()) {
+      notifications.show({
+        title: "Batch required",
+        message: "Please provide a batch value.",
+        color: "orange",
+      });
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleEditAnnouncement = async (announcement) => {
+    let specificRecipients = [];
+    if (announcement.target_group === "specific_users") {
+      try {
+        const { data } = await axios.get(
+          `${announcementCreateRoute}${announcement.id}/`,
+          getAuthHeaders(),
+        );
+
+        specificRecipients = (data?.recipients || []).map(
+          (recipient) => recipient.user_username,
+        );
+      } catch (err) {
+        console.error("Failed to load recipients for edit:", err);
+      }
+    }
+
+    const parsed = parseAnnouncementMessage(announcement);
+    setEditingAnnouncementId(announcement.id);
+    setEditFormData({
+      title: parsed.title,
+      content: parsed.content,
+      module: announcement.module || "Fusion",
+      target_audience: getAudienceFromAnnouncement(announcement),
+      batch: announcement.batch || "",
+      specific_usernames: specificRecipients,
+    });
+    setIsEditModalOpen(true);
+  };
+
+  const handleViewStatus = async (announcementId) => {
+    try {
+      const [statsRes, detailRes] = await Promise.all([
+        axios.get(
+          `${announcementCreateRoute}${announcementId}/statistics/`,
+          getAuthHeaders(),
+        ),
+        axios.get(
+          `${announcementCreateRoute}${announcementId}/`,
+          getAuthHeaders(),
+        ),
+      ]);
+
+      setAnnouncementStatsMap((prev) => ({
+        ...prev,
+        [announcementId]: statsRes.data,
+      }));
+
+      setAnnouncementStatusMap((prev) => ({
+        ...prev,
+        [announcementId]: detailRes.data,
+      }));
+    } catch (err) {
+      console.error("Failed to fetch announcement status:", err);
+      notifications.show({
+        title: "Status load failed",
+        message: "Could not load recipient read status.",
+        color: "red",
+      });
+    }
+  };
+
+  const handleDeleteAnnouncement = async (announcementId) => {
+    try {
+      setDeletingAnnouncementId(announcementId);
+      await axios.delete(
+        `${announcementCreateRoute}${announcementId}/`,
+        getAuthHeaders(),
+      );
+
+      notifications.show({
+        title: "Deleted",
+        message: "Announcement deleted successfully.",
+        color: "green",
+      });
+
+      await fetchManageAnnouncements();
+      await refreshNotificationLists();
+    } catch (err) {
+      console.error("Failed to delete announcement:", err);
+      notifications.show({
+        title: "Delete failed",
+        message: "Could not delete announcement.",
+        color: "red",
+      });
+    } finally {
+      setDeletingAnnouncementId(null);
+    }
+  };
+
+  const buildPayloadFromForm = (source) => {
+    const audiencePayload = mapAudienceToPayload(
+      source.target_audience,
+      source.specific_usernames,
+    );
+
+    const payload = {
+      title: (source.title || "").trim(),
+      content: (source.content || "").trim(),
+      module: (source.module || "Fusion").trim() || "Fusion",
+      ...audiencePayload,
+    };
+
+    if (source.target_audience === "batch" && (source.batch || "").trim()) {
+      payload.batch = source.batch.trim();
+    }
+
+    return payload;
+  };
+
+  const handleCreateAnnouncement = async () => {
+    const title = (formData.title || "").trim();
+    const content = (formData.content || "").trim();
+
+    if (!title || !content) {
+      notifications.show({
+        title: "Missing fields",
+        message: "Please enter both title and content.",
+        color: "orange",
+      });
+      return;
+    }
+
+    if (
+      (formData.target_audience === "specific_student" ||
+        formData.target_audience === "specific_users") &&
+      formData.specific_usernames.length === 0
+    ) {
+      notifications.show({
+        title: "No students selected",
+        message: "Please select at least one student roll number.",
+        color: "orange",
+      });
+      return;
+    }
+
+    const payload = buildPayloadFromForm(formData);
+
+    try {
+      setManageSubmitting(true);
+      await axios.post(announcementCreateRoute, payload, getAuthHeaders());
+
+      notifications.show({
+        title: "Created",
+        message: "Announcement created successfully.",
+        color: "green",
+      });
+
+      resetCreateForm();
+      await fetchManageAnnouncements();
+      await refreshNotificationLists();
+    } catch (err) {
+      console.error("Failed to save announcement:", err);
+      const serverData = err?.response?.data;
+      const serverMessage =
+        serverData?.detail ||
+        serverData?.message ||
+        (typeof serverData === "string" ? serverData : null) ||
+        (serverData && Object.keys(serverData).length
+          ? Object.entries(serverData)
+              .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(", ") : v}`)
+              .join(" | ")
+          : null);
+
+      notifications.show({
+        title: "Save failed",
+        message:
+          serverMessage ||
+          "Could not save announcement. Please check role permissions.",
+        color: "red",
+      });
+    } finally {
+      setManageSubmitting(false);
+    }
+  };
+
+  const handleResendAnnouncement = async () => {
+    if (!editingAnnouncementId) return;
+    if (!validateAudienceSelection(editFormData)) return;
+
+    const payload = buildPayloadFromForm(editFormData);
+
+    try {
+      setManageSubmitting(true);
+      await axios.patch(
+        `${announcementCreateRoute}${editingAnnouncementId}/`,
+        payload,
+        getAuthHeaders(),
+      );
+
+      notifications.show({
+        title: "Resent",
+        message: "Announcement updated and resent successfully.",
+        color: "green",
+      });
+
+      closeEditModal();
+      await fetchManageAnnouncements();
+      await refreshNotificationLists();
+    } catch (err) {
+      console.error("Failed to resend announcement:", err);
+      const serverData = err?.response?.data;
+      const serverMessage =
+        serverData?.detail ||
+        serverData?.message ||
+        (typeof serverData === "string" ? serverData : null) ||
+        (serverData && Object.keys(serverData).length
+          ? Object.entries(serverData)
+              .map(([k, v]) => `${k}: ${Array.isArray(v) ? v.join(", ") : v}`)
+              .join(" | ")
+          : null);
+
+      notifications.show({
+        title: "Resend failed",
+        message: serverMessage || "Could not update and resend announcement.",
+        color: "red",
+      });
+    } finally {
+      setManageSubmitting(false);
+    }
+  };
+
+  // Get data based on active tab
+  const currentList =
+    activeTab === "0"
+      ? notificationsData.notificationsList
+      : announcementsData.announcementsList;
+  const currentHandlers =
+    activeTab === "0" ? notificationsData : announcementsData;
+  const loading =
+    activeTab === "0" ? notificationsData.loading : announcementsData.loading;
+  const loadingId =
+    activeTab === "0"
+      ? notificationsData.loadingId
+      : announcementsData.loadingId;
+
+  // Calculate badge counts
+  const notifCount = getUnreadCount(notificationsData.notificationsList);
+  const announceCount = getUnreadCount(announcementsData.announcementsList);
+  const badges = [notifCount, announceCount];
+
+  // Sort data
+  const sortedNotifications = useMemo(
+    () => sortNotifications(currentList, sortedBy),
+    [sortedBy, currentList],
+  );
+
+  const activeNotifications = filterActiveNotifications(sortedNotifications);
+
+  return (
+    <>
+      <CustomBreadcrumbs />
+
+      {/* Header with tabs and filters */}
+      <Flex
+        justify="space-between"
+        align={{ base: "start", sm: "center" }}
+        mt="lg"
+        direction={{ base: "column", sm: "row" }}
+      >
+        <ModuleTabs
+          tabs={tabItems}
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          badges={badges}
+        />
+
+        <Flex
+          w={{ base: "40%", sm: "auto" }}
+          align="center"
+          mt="md"
+          rowGap="1rem"
+          columnGap="4rem"
+          wrap="wrap"
+        >
+          <Select
+            classNames={{
+              option: classes.selectoptions,
+              input: classes.selectinputs,
+            }}
+            variant="filled"
+            leftSection={<SortAscending />}
+            data={["Most Recent", "Tags", "Title"]}
+            value={sortedBy}
+            onChange={setSortedBy}
+            placeholder="Sort By"
+          />
+        </Flex>
+      </Flex>
+
+      {/* Notifications/Announcements Grid */}
+      {loading ? (
+        <Container py="xl">
+          <Loader size="lg" />
+        </Container>
+      ) : activeNotifications.length === 0 ? (
+        <Empty />
+      ) : (
+        <Grid mt="xl">
+          {activeNotifications.map((item) => (
+            <NotificationCard
+              key={item.id}
+              notification={item}
+              onMarkAsRead={currentHandlers.markAsRead}
+              onMarkAsUnread={currentHandlers.markAsUnread}
+              onDelete={currentHandlers.deleteNotification}
+              loadingId={loadingId}
+            />
+          ))}
+        </Grid>
+      )}
+
+      {canManageAnnouncements && activeTab === "1" && (
+        <Paper withBorder radius="md" p="md" mt="xl">
+          <Stack gap="sm">
+            <Text fw={600} size="lg">
+              Manage Announcements
+            </Text>
+
+            <Textarea
+              label="Content"
+              placeholder="Type announcement content"
+              minRows={3}
+              value={formData.content}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, content: e.target.value }))
+              }
+            />
+
+            <Group grow>
+              <TextInput
+                label="Title"
+                placeholder="Announcement title"
+                value={formData.title}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, title: e.target.value }))
+                }
+              />
+              <TextInput
+                label="Module"
+                placeholder="Fusion"
+                value={formData.module}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, module: e.target.value }))
+                }
+              />
+              <Select
+                label="Target Audience"
+                value={formData.target_audience}
+                data={targetAudienceOptions}
+                onChange={(value) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    target_audience: value || "all_students",
+                    batch: value === "batch" ? prev.batch : "",
+                    specific_usernames:
+                      value === "specific_student" || value === "specific_users"
+                        ? prev.specific_usernames
+                        : [],
+                  }))
+                }
+              />
+            </Group>
+
+            {formData.target_audience === "batch" && (
+              <TextInput
+                label="Batch"
+                placeholder="e.g. 2023 or programme code"
+                value={formData.batch}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, batch: e.target.value }))
+                }
+              />
+            )}
+
+            {(formData.target_audience === "specific_student" ||
+              formData.target_audience === "specific_users") && (
+              <MultiSelect
+                label="Select Students"
+                placeholder="Choose roll numbers"
+                data={studentRollOptions}
+                value={formData.specific_usernames}
+                onChange={(value) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    specific_usernames: value,
+                  }))
+                }
+                searchable
+                clearable
+                nothingFoundMessage={
+                  studentRollLoading
+                    ? "Loading students..."
+                    : "No students found"
+                }
+              />
+            )}
+
+            <Group>
+              <Button
+                onClick={handleCreateAnnouncement}
+                loading={manageSubmitting}
+              >
+                Create Announcement
+              </Button>
+            </Group>
+
+            <Text fw={600} mt="md">
+              Your Announcements
+            </Text>
+
+            {manageLoading ? (
+              <Loader size="sm" />
+            ) : manageAnnouncements.length === 0 ? (
+              <Text c="dimmed" size="sm">
+                No announcements created yet.
+              </Text>
+            ) : (
+              <Stack gap="xs">
+                {manageAnnouncements.map((announcement) => (
+                  <Paper key={announcement.id} withBorder p="sm" radius="sm">
+                    <Group justify="space-between" align="start">
+                      <Stack gap={2} style={{ flex: 1 }}>
+                        <Text fw={500}>
+                          {announcement.title || announcement.message}
+                        </Text>
+                        {(announcement.content || "").trim() && (
+                          <Text size="sm" c="dimmed">
+                            {announcement.content}
+                          </Text>
+                        )}
+                        <Text size="xs" c="dimmed">
+                          Module: {announcement.module || "Fusion"} • Target:{" "}
+                          {announcement.target_group}
+                        </Text>
+                      </Stack>
+                      <Group gap="xs">
+                        <Button
+                          size="xs"
+                          variant="light"
+                          onClick={() => handleEditAnnouncement(announcement)}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          size="xs"
+                          color="red"
+                          variant="light"
+                          loading={deletingAnnouncementId === announcement.id}
+                          onClick={() =>
+                            handleDeleteAnnouncement(announcement.id)
+                          }
+                        >
+                          Delete
+                        </Button>
+                        <Button
+                          size="xs"
+                          variant="default"
+                          onClick={() => handleViewStatus(announcement.id)}
+                        >
+                          View Stats
+                        </Button>
+                      </Group>
+                    </Group>
+
+                    {announcementStatsMap[announcement.id] && (
+                      <Stack mt="sm" gap={4}>
+                        <Text size="xs" fw={600}>
+                          Total:{" "}
+                          {
+                            announcementStatsMap[announcement.id]
+                              .total_recipients
+                          }{" "}
+                          • Read:{" "}
+                          {announcementStatsMap[announcement.id].read_count} •
+                          Unread:{" "}
+                          {announcementStatsMap[announcement.id].unread_count}
+                        </Text>
+                      </Stack>
+                    )}
+
+                    {announcement.target_group === "specific_users" &&
+                      announcementStatusMap[announcement.id]?.recipients
+                        ?.length > 0 && (
+                        <Stack mt="sm" gap={4}>
+                          <Text size="xs" fw={600}>
+                            Read Status
+                          </Text>
+                          {announcementStatusMap[
+                            announcement.id
+                          ].recipients.map((recipient) => (
+                            <Text key={recipient.id} size="xs" c="dimmed">
+                              {recipient.user_username}:{" "}
+                              {recipient.is_read ? "Read" : "Unread"}
+                            </Text>
+                          ))}
+                        </Stack>
+                      )}
+                  </Paper>
+                ))}
+              </Stack>
+            )}
+          </Stack>
+        </Paper>
+      )}
+
+      <Modal
+        opened={isEditModalOpen}
+        onClose={closeEditModal}
+        centered
+        title="Edit Announcement"
+        size="lg"
+      >
+        <Stack gap="sm">
+          <Textarea
+            label="Content"
+            placeholder="Type announcement content"
+            minRows={3}
+            value={editFormData.content}
+            onChange={(e) =>
+              setEditFormData((prev) => ({ ...prev, content: e.target.value }))
+            }
+          />
+
+          <Group grow>
+            <TextInput
+              label="Title"
+              placeholder="Announcement title"
+              value={editFormData.title}
+              onChange={(e) =>
+                setEditFormData((prev) => ({ ...prev, title: e.target.value }))
+              }
+            />
+            <TextInput
+              label="Module"
+              placeholder="Fusion"
+              value={editFormData.module}
+              onChange={(e) =>
+                setEditFormData((prev) => ({ ...prev, module: e.target.value }))
+              }
+            />
+            <Select
+              label="Target Audience"
+              value={editFormData.target_audience}
+              data={targetAudienceOptions}
+              onChange={(value) =>
+                setEditFormData((prev) => ({
+                  ...prev,
+                  target_audience: value || "all_students",
+                  batch: value === "batch" ? prev.batch : "",
+                  specific_usernames:
+                    value === "specific_student" || value === "specific_users"
+                      ? prev.specific_usernames
+                      : [],
+                }))
+              }
+            />
+          </Group>
+
+          {editFormData.target_audience === "batch" && (
+            <TextInput
+              label="Batch"
+              placeholder="e.g. 2023 or programme code"
+              value={editFormData.batch}
+              onChange={(e) =>
+                setEditFormData((prev) => ({ ...prev, batch: e.target.value }))
+              }
+            />
+          )}
+
+          {(editFormData.target_audience === "specific_student" ||
+            editFormData.target_audience === "specific_users") && (
+            <MultiSelect
+              label="Select Students"
+              placeholder="Choose roll numbers"
+              data={studentRollOptions}
+              value={editFormData.specific_usernames}
+              onChange={(value) =>
+                setEditFormData((prev) => ({
+                  ...prev,
+                  specific_usernames: value,
+                }))
+              }
+              searchable
+              clearable
+              nothingFoundMessage={
+                studentRollLoading ? "Loading students..." : "No students found"
+              }
+            />
+          )}
+
+          <Group justify="flex-end">
+            <Button variant="default" onClick={closeEditModal}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleResendAnnouncement}
+              loading={manageSubmitting}
+            >
+              Resend
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
+  );
+}
+
+export default NotificationView;