diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4b30aea2..ec8163ea 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,9 +19,11 @@ import FloatingVideo from './components/FloatingVideo';
 import { WebsocketProvider } from './WebSocket';
 import { Box, AppShell, MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css'; // Ensure Mantine global styles load
+import '@mantine/notifications/styles.css';
 import 'mantine-react-table/styles.css';
 import mantineTheme from './mantineTheme';
 import API from './api';
+import { Notifications } from '@mantine/notifications';
 
 const drawerWidth = 240;
 const miniDrawerWidth = 60;
@@ -79,6 +81,7 @@ const App = () => {
       withNormalizeCSS
     >
       <WebsocketProvider>
+        <Notifications containerWidth={250} />
         <Router>
           <AppShell
             header={{