diff --git a/ui/src/app/notifications/component/NotificationItem.js b/ui/src/app/notifications/component/NotificationItem.js
index 4884aa188..73b0d2043 100644
--- a/ui/src/app/notifications/component/NotificationItem.js
+++ b/ui/src/app/notifications/component/NotificationItem.js
@@ -1,21 +1,18 @@
 import React from 'react';
 import Alert from 'react-bootstrap/Alert';
-import { NotificationContext, removeNotificationAction } from '../hoc/Notifications';
 
-export function NotificationItem ({ type, body, timeout, id }) {
-
-    const { dispatch } = React.useContext(NotificationContext);
+export function NotificationItem ({ type, body, timeout, id, onRemove }) {
 
     React.useEffect(() => {
         if (timeout) {
             setTimeout(() => {
-                dispatch(removeNotificationAction(id));
+                onRemove(id)
             }, timeout);
         }
-    }, [timeout, id, dispatch]);
+    }, [timeout, id, onRemove]);
 
     return (
-        <Alert variant={type} onClose={() => dispatch(removeNotificationAction(id))}>
+        <Alert variant={type} onClose={() => onRemove(id)}>
             {body}
         </Alert>
     )
diff --git a/ui/src/app/notifications/component/NotificationItem.test.js b/ui/src/app/notifications/component/NotificationItem.test.js
index cd87d7521..93733a660 100644
--- a/ui/src/app/notifications/component/NotificationItem.test.js
+++ b/ui/src/app/notifications/component/NotificationItem.test.js
@@ -1,8 +1,7 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import { NotificationItem } from './NotificationItem';
-import { NotificationContext, Notifications } from '../hoc/Notifications';
 
 jest.mock('../../i18n/hooks', () => ({
     useTranslation: (value) => value
@@ -12,12 +11,10 @@ describe('Notifcation Item', () => {
     let context;
     beforeEach(() => {
         jest.useFakeTimers();
-
-        context = React.useContext(NotificationContext);
     })
 
     it('should change color based on type', () => {
-        render(<NotificationItem type="danger" body="foo" />, {wrapper: Notifications });
+        render(<NotificationItem type="danger" body="foo" />);
         const el = screen.getByText('foo');
         expect(el).toBeInTheDocument();
         expect(el).toHaveClass('alert-danger')
@@ -25,13 +22,29 @@ describe('Notifcation Item', () => {
 
     it('should dispatch an event if provided a timeout', () => {
 
-        jest.spyOn(context, 'dispatch');
+        const mockOnRemove = jest.fn();
 
-        render(<NotificationItem type="danger" body="foo" timeout={5000} />, { wrapper: Notifications });
-        const el = screen.getByText('foo');
+        render(<NotificationItem type="danger" body="foo" timeout={5000} onRemove={mockOnRemove} />);
 
         jest.runAllTimers();
 
-        expect(context.dispatch).toHaveBeenCalled();
+        expect(mockOnRemove).toHaveBeenCalled();
+    });
+
+    it('should be removed when clicked', () => {
+
+        const mockOnRemove = jest.fn();
+
+        render(<NotificationItem type="danger" body="foo" timeout={5000} onRemove={mockOnRemove} />);
+
+        const el = screen.getByText('Close alert');
+
+        fireEvent(el,
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+            }));
+
+        expect(mockOnRemove).toHaveBeenCalled();
     });
 })
diff --git a/ui/src/app/notifications/component/NotificationList.js b/ui/src/app/notifications/component/NotificationList.js
index 07d6b03b2..7d621f5c3 100644
--- a/ui/src/app/notifications/component/NotificationList.js
+++ b/ui/src/app/notifications/component/NotificationList.js
@@ -1,16 +1,18 @@
 import React from 'react';
-import { NotificationContext } from '../hoc/Notifications';
+import { NotificationContext, removeNotificationAction } from '../hoc/Notifications';
 import { NotificationItem } from './NotificationItem';
 
 export function NotificationList () {
 
-    const { state } = React.useContext(NotificationContext);
+    const { state, dispatch } = React.useContext(NotificationContext);
+
+    const onRemove = (id) => dispatch(removeNotificationAction(id));
 
     return (
         <ul className="notification-list list-unstyled position-fixed p-4 w-25">
             {state.notifications.map((n) => (
                 <li key={n.id}>
-                    <NotificationItem id={n.id} type={n.type} body={n.body} timeout={n.timeout} />
+                    <NotificationItem id={n.id} type={n.type} body={n.body} timeout={n.timeout} onRemove={onRemove} />
                 </li>
             ))}
         </ul>