diff --git a/src/App.js b/src/App.js
index e07b6a3ef..a4e7af08f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,6 +25,8 @@ import Routes, { useOptionalAuth } from 'navigation/components/Routes';
 
 import 'index.css';
 
+import WebSocket from 'webSockets/WebSocket';
+
 import BreadcrumbsShareContainer from 'layout/BreadcrumbsShareContainer';
 import OptionalAuthBottomMessage from 'account/components/OptionalAuthBottomMessage';
 import OptionalAuthTopMessage from 'account/components/OptionalAuthTopMessage';
@@ -40,6 +42,7 @@ const App = () => {
 
   return (
     <>
+      <WebSocket />
       <Box
         sx={{
           bgcolor: 'white',
diff --git a/src/webSockets/WebSocket.js b/src/webSockets/WebSocket.js
new file mode 100644
index 000000000..11483d009
--- /dev/null
+++ b/src/webSockets/WebSocket.js
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+
+const WebSocketComponent = props => {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const socket = new WebSocket('ws://127.0.0.1:8000/ws/notifications/');
+
+    socket.onopen = () => {
+      console.log('WebSocket connection opened');
+    };
+
+    socket.onmessage = event => {
+      const data = JSON.parse(event.data);
+      setMessage(data.message);
+    };
+
+    socket.onclose = () => {
+      console.log('WebSocket connection closed');
+    };
+
+    return () => {
+      socket.close();
+    };
+  }, []);
+
+  return (
+    <div>
+      <p>Message from WebSocket: {message}</p>
+    </div>
+  );
+};
+
+export default WebSocketComponent;