diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
index 179e1fc..1fb7a6d 100644
--- a/frontend/react-app/src/css/MyTasks.css
+++ b/frontend/react-app/src/css/MyTasks.css
@@ -40,5 +40,4 @@ div.flexbox{
     font-size: 16px;
     cursor: pointer;
     border-radius: 10px;
-   
   }
diff --git a/frontend/react-app/src/pages/Notifications.jsx b/frontend/react-app/src/pages/Notifications.jsx
index e161b6a..2a3a16b 100644
--- a/frontend/react-app/src/pages/Notifications.jsx
+++ b/frontend/react-app/src/pages/Notifications.jsx
@@ -1,102 +1,128 @@
-import React from 'react';
-import {useEffect, useState} from 'react';
+import React, { useState } from 'react';
 import '../css/Notifications.css';
 import Notification from "../components/Notification";
 
 const Notifications = () => {
     const [notifications, setNotifications] = useState([
-        {id: 1, team: "Team 2", message: 'Bob edited your task "Create wireframe"', read: false},
+        { id: 1, team: "Team 2", message: 'Bob edited your task "Create wireframe"', read: false },
         { id: 2, team: "Team 1", message: 'Mary completed your task "Code things"', read: false },
         { id: 3, team: "Team 1", message: 'Adam assigned you to "Code more"', read: true }
     ]);
 
-    //mark as read or unread
     const toggleRead = (id) => {
         setNotifications(notifications.map(notif =>
             notif.id === id ? { ...notif, read: !notif.read } : notif
         ));
     };
 
-    //delete any notification
     const deleteNotification = (id) => {
         setNotifications(notifications.filter(notif => notif.id !== id));
     };
 
+    // Store filtered notifications to avoid redundant filtering
+    const unreadNotifications = notifications.filter(notif => !notif.read);
+    const readNotifications = notifications.filter(notif => notif.read);
+
+    // reusable section component
+    const NotificationSection = ({ title, items }) => (
+        items.length > 0 && (
+            <>
+                <tr>
+                    <td colSpan="4" className="subHeader">{title}</td>
+                </tr>
+                {items.map(notif => (
+                    <Notification 
+                        key={notif.id} 
+                        notif={notif} 
+                        toggleRead={toggleRead} 
+                        deleteNotification={deleteNotification} 
+                    />
+                ))}
+            </>
+        )
+    );
+
     return (
         <div id="notifContainer">
-           <table>
+            <table>
                 <thead>
                     <tr>
                         <td colSpan="4">Notifications</td>
                     </tr>
                 </thead>
                 <tbody>
-                    {notifications.some(notif => !notif.read) && (
-                        <>
-                            <tr>
-                                <td colSpan="4" className="subHeader">Unread</td>
-                            </tr>
-                            {notifications.filter(notif => !notif.read).map(notif => (
-                                <Notification key={notif.id} notif={notif} toggleRead={toggleRead} deleteNotification={deleteNotification} />
-                            ))}
-                        </>
-                    )}
-
-                    {notifications.some(notif => notif.read) && (
-                        <>
-                            <tr>
-                                <td colSpan="4" className="subHeader">Read</td>
-                            </tr>
-                            {notifications.filter(notif => notif.read).map(notif => (
-                                <Notification key={notif.id} notif={notif} toggleRead={toggleRead} deleteNotification={deleteNotification} />
-                            ))}
-                        </>
-                    )}
+                    <NotificationSection title="Unread" items={unreadNotifications} />
+                    <NotificationSection title="Read" items={readNotifications} />
                 </tbody>
             </table>
         </div>
-    )
-}
+    );
+};
+
+export default Notifications;
 
 
-//old static version (will delete later)
+//before refactoring 
+
+
+// import React from 'react';
+// import {useEffect, useState} from 'react';
+// import '../css/Notifications.css';
+// import Notification from "../components/Notification";
 
 // const Notifications = () => {
-//     return(
+//     const [notifications, setNotifications] = useState([
+//         {id: 1, team: "Team 2", message: 'Bob edited your task "Create wireframe"', read: false},
+//         { id: 2, team: "Team 1", message: 'Mary completed your task "Code things"', read: false },
+//         { id: 3, team: "Team 1", message: 'Adam assigned you to "Code more"', read: true }
+//     ]);
+
+//     //mark as read or unread
+//     const toggleRead = (id) => {
+//         setNotifications(notifications.map(notif =>
+//             notif.id === id ? { ...notif, read: !notif.read } : notif
+//         ));
+//     };
+
+//     //delete any notification
+//     const deleteNotification = (id) => {
+//         setNotifications(notifications.filter(notif => notif.id !== id));
+//     };
+
+//     return (
 //         <div id="notifContainer">
-//             <table>
+//            <table>
 //                 <thead>
-//                     <td colspan="4">Notifications</td>
-//                 </thead>
-//                 <tbody>
 //                     <tr>
-//                         <td colspan="4" class="subHeader">Unread</td>
-//                     </tr>
-//                     <tr>
-//                         <td class="items"><input type="checkbox" name="read"/></td>
-//                         <td class="items"><button class="smallTeamButton">Team 2</button></td>
-//                         <td class="notifDetails">Bob edited your task "Create wireframe"</td>
-//                         <td><button class='delete'>Delete</button></td>
-//                     </tr>
-//                     <tr>
-//                         <td class="items"><input type="checkbox" name="read"/></td>
-//                         <td class="items"><button class="smallTeamButton">Team 1</button></td>
-//                         <td class="notifDetails">Mary completed your task "Code things"</td>
-//                         <td><button class='delete'>Delete</button></td>
-//                     </tr>
-//                     <tr>
-//                         <td colspan="4" class="subHeader">Read</td>
-//                     </tr>
-//                     <tr>
-//                         <td class="items"><input type="checkbox" name="read" checked/></td>
-//                         <td class="items"><button class="smallTeamButton">Team 1</button></td>
-//                         <td class="notifDetails">Adam assigned you to "Code more"</td>
-//                         <td><button class='delete'>Delete</button></td>
+//                         <td colSpan="4">Notifications</td>
 //                     </tr>
+//                 </thead>
+//                 <tbody>
+//                     {notifications.some(notif => !notif.read) && (
+//                         <>
+//                             <tr>
+//                                 <td colSpan="4" className="subHeader">Unread</td>
+//                             </tr>
+//                             {notifications.filter(notif => !notif.read).map(notif => (
+//                                 <Notification key={notif.id} notif={notif} toggleRead={toggleRead} deleteNotification={deleteNotification} />
+//                             ))}
+//                         </>
+//                     )}
+
+//                     {notifications.some(notif => notif.read) && (
+//                         <>
+//                             <tr>
+//                                 <td colSpan="4" className="subHeader">Read</td>
+//                             </tr>
+//                             {notifications.filter(notif => notif.read).map(notif => (
+//                                 <Notification key={notif.id} notif={notif} toggleRead={toggleRead} deleteNotification={deleteNotification} />
+//                             ))}
+//                         </>
+//                     )}
 //                 </tbody>
 //             </table>
 //         </div>
 //     )
-// };
+// }
 
-export default Notifications;
\ No newline at end of file
+// export default Notifications;
\ No newline at end of file