diff --git a/backend/src/routes/notif.ts b/backend/src/routes/notif.ts
index f6e79b8d..1601df8d 100644
--- a/backend/src/routes/notif.ts
+++ b/backend/src/routes/notif.ts
@@ -34,17 +34,17 @@ router.get("/get/:id", async (req: Req, res: Response) => {
 });
 
 // Create a new notification
-router.post("/notifications", async (req: Req, res: Response) => {
-    const { user_id, message, sender, date_sent, user_id_user_id } = req.body;
-    try {
-        const newNotification = await pool.query('INSERT INTO notifications (user_id, message, sender, date_sent, user_id_user_id) VALUES ($1, $2, $3, $4, $5) RETURNING *',
-            [user_id, message, sender, date_sent, user_id_user_id]);
-        res.status(201).json(newNotification.rows[0]);
-    } catch (err) {
-        console.error("ERROR", err);
-        res.status(500).json({ error: 'An error occurred while creating notification.' });
-    }
-});
+// router.post("/notifications", async (req: Req, res: Response) => {
+//     const { user_id, message, sender, date_sent, user_id_user_id } = req.body;
+//     try {
+//         const newNotification = await pool.query('INSERT INTO notifications (user_id, message, sender, date_sent, user_id_user_id) VALUES ($1, $2, $3, $4, $5) RETURNING *',
+//             [user_id, message, sender, date_sent, user_id_user_id]);
+//         res.status(201).json(newNotification.rows[0]);
+//     } catch (err) {
+//         console.error("ERROR", err);
+//         res.status(500).json({ error: 'An error occurred while creating notification.' });
+//     }
+// });
 
 // Update a notification
 router.put("/notifications/:id", async (req: Req, res: Response) => {
diff --git a/backend/src/types/datatypes.ts b/backend/src/types/datatypes.ts
index 546fa3f0..98486938 100644
--- a/backend/src/types/datatypes.ts
+++ b/backend/src/types/datatypes.ts
@@ -69,6 +69,7 @@ export interface RegisterUser {
   confirm_password?: string;
 }
 
+<<<<<<< Updated upstream
 export interface Cars {
   id?: string;
   driver_id?: string;
@@ -78,3 +79,13 @@ export interface Cars {
   license_number?: string;
   brand?: string;
 }
+=======
+export interface Notification {
+  id: string;
+  user_id: number;
+  message: string;
+  sender: "Admin" | "User";
+  date_sent: string;
+}
+
+>>>>>>> Stashed changes
diff --git a/backend/types/datatypes.ts b/backend/types/datatypes.ts
index a2f53326..8e39f924 100644
--- a/backend/types/datatypes.ts
+++ b/backend/types/datatypes.ts
@@ -66,3 +66,12 @@ export interface RegisterUser {
   violation_date: string;
   paid_status: boolean;
 }
+
+export interface Notification {
+  id: string;
+  user_id: number;
+  message: string;
+  sender: "Admin" | "User";
+  date_sent: string;
+}
+
diff --git a/frontend/src/components/NotificationComponent.tsx b/frontend/src/components/NotificationComponent.tsx
new file mode 100644
index 00000000..f3f349d6
--- /dev/null
+++ b/frontend/src/components/NotificationComponent.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import useNotif from './useNotif.ts';
+
+const NotificationsComponent: React.FC = () => {
+    const {
+        notifications,
+        loading,
+        error,
+        deleteNotification,
+    } = useNotif();
+
+    if (loading) return <div>Loading notifications...</div>;
+    if (error) return <div>Error: {error}</div>;
+
+    return (
+        <div>
+            <h2>Notifications</h2>
+            <ul>
+                {notifications.map((notifs) => (
+                    <li key={notifs.id}>
+                        {notifs.message}
+                        <button onClick={() => deleteNotification(notifs.id)}>Delete</button>
+                    </li>
+                ))}
+            </ul>
+            {/* Add functionality to create or update notifications as needed */}
+        </div>
+    );
+};
+
+export default NotificationsComponent;
\ No newline at end of file
diff --git a/frontend/src/hooks/useNotif.ts b/frontend/src/hooks/useNotif.ts
new file mode 100644
index 00000000..97634c1f
--- /dev/null
+++ b/frontend/src/hooks/useNotif.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { BackendError } from "../types/error.types";
+import { Notification } from "../types/datatypes";
+import useFetch from "./useFetch.ts";
+
+
+export const useNotif = () => {
+    const [notifs, setNotifs] = useState<Notification[] | null>(null); // Store fetched notifs
+    const [error, setError] = useState<BackendError | null>(null); // Handle errors
+    const [loading, setLoading] = useState<boolean>(true); // Track loading state
+    
+    const { fetchWithAuth } = useFetch();
+
+    const fetchNotif = async () => {
+        setLoading(true);
+        try {
+            const response = await fetchWithAuth('notifications', 'GET');
+
+            if (!response.ok) {
+                throw new Error(response.statusText);
+            }
+            const data = await response.json();
+            setNotifs(data.data);
+        } catch (error) {
+            console.error("Unexpected error:", error);
+            setError({ message: "An unexpected error occurred" } as BackendError); 
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    useEffect(() => {
+        fetchNotif();
+    }, []);
+
+    return { notifs, error, loading, fetchNotif};
+            
+};
+export default useNotif;
+            
\ No newline at end of file