diff --git a/frontend/react-app/src/components/Header.jsx b/frontend/react-app/src/components/Header.jsx
index e3dbc6f..d1974fe 100644
--- a/frontend/react-app/src/components/Header.jsx
+++ b/frontend/react-app/src/components/Header.jsx
@@ -1,5 +1,5 @@
 import { useCookies } from 'react-cookie'
-import { Home, UserCircle, ListChecks, ShieldUser, LogOut } from "lucide-react";
+import { Home, UserCircle, ListChecks, ShieldUser, LogOut, Bell } from "lucide-react";
 
 function Header(){
     const [cookies, removeCookie] = useCookies(['userInfo'])
@@ -18,7 +18,8 @@ function Header(){
 
                 <ul className ='icon-nav'>
                     <li><a href="/home" title="Home"><Home/></a></li>
-                    <li><a href="/my-tasks" title="My Tasks"><ListChecks/></a></li>
+                    <li><a href="/my-tasks" title="My Tasks"><ListChecks /></a></li>
+                    <li><a href="/notifications" title="Notifications"><Bell /></a></li>
                     <li><a href="/profile" title="Profile"><UserCircle/></a></li>
 
                     {cookies.userInfo.role === 'admin' && (
diff --git a/frontend/react-app/src/login.css b/frontend/react-app/src/login.css
index 3d4aae2..60db239 100644
--- a/frontend/react-app/src/login.css
+++ b/frontend/react-app/src/login.css
@@ -40,7 +40,7 @@
     height: 100%;
     width: 100%;
     /* background-color: #5f577a; */
-    background-color: #1f6e76;
+    background-color: #3B3355;
 }
 
 #loginForm {
diff --git a/frontend/react-app/src/pages/Notifications.jsx b/frontend/react-app/src/pages/Notifications.jsx
index 7f22a71..8ba52c6 100644
--- a/frontend/react-app/src/pages/Notifications.jsx
+++ b/frontend/react-app/src/pages/Notifications.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import '../css/Notifications.css';
 import Notification from "../components/Notification";
+import Header from "../components/Header";
 import { getReadNotifications, getUnreadNotifications, markAsRead, markAsUnread, deleteNotification as deleteThisNotification} from '../api/notificationApi';
 import { useCookies } from 'react-cookie';
 
diff --git a/frontend/react-app/src/tests/Notifications.test.js b/frontend/react-app/src/tests/Notifications.test.js
index deeb908..0204261 100644
--- a/frontend/react-app/src/tests/Notifications.test.js
+++ b/frontend/react-app/src/tests/Notifications.test.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import Notifications from "../pages/Notifications";
+jest.mock("../components/Header", () => () => <div data-testid="mock-header" />);
 
 jest.mock("../components/Notification", () => ({ notif, toggleRead }) => (
     <tr>