diff --git a/client/src/contexts/AlertSnackbarProvider.tsx b/client/src/contexts/AlertSnackbarProvider.tsx
new file mode 100644
index 0000000..e5da7be
--- /dev/null
+++ b/client/src/contexts/AlertSnackbarProvider.tsx
@@ -0,0 +1,133 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Alert, AlertColor, AlertProps, AlertTitle, Snackbar, SnackbarProps } from '@mui/material';
+import { createContext, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SetState, WithChildren } from '../utils/utils';
+type AlertSnackbarProps = AlertProps & {
+  severity: AlertColor;
+  open?: boolean;
+  snackBarProps?: Partial<SnackbarProps>;
+};
+
+export type AlertContent = {
+  messageI18nKey: AlertMessageKeys;
+  messageI18nContext?: object;
+  severity: AlertColor;
+  alertOpen: boolean;
+};
+
+export function AlertSnackbar({ severity, open, snackBarProps, children, ...alertProps }: AlertSnackbarProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Snackbar
+      open={open}
+      {...snackBarProps}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'center',
+        ...snackBarProps?.anchorOrigin,
+      }}
+    >
+      <Alert severity={severity} {...alertProps}>
+        <AlertTitle>{t('severity', { context: `${severity}` })}</AlertTitle>
+        {children}
+      </Alert>
+    </Snackbar>
+  );
+}
+
+type IAlertSnackbarContext = {
+  alertContent: AlertContent;
+  setAlertContent: SetState<AlertContent>;
+};
+
+const defaultAlertSnackbarContext: IAlertSnackbarContext = {
+  alertContent: {
+    messageI18nKey: '',
+    messageI18nContext: {},
+    severity: 'info',
+    alertOpen: false,
+  },
+  setAlertContent: () => {},
+};
+
+type AlertMessageKeys =
+  | 'missed_incoming_call'
+  | 'unknown_error_alert'
+  | 'username_input_helper_text_empty'
+  | 'password_input_helper_text_empty'
+  | 'login_invalid_password'
+  | 'registration_success'
+  | '';
+
+export const AlertSnackbarContext = createContext<IAlertSnackbarContext>(defaultAlertSnackbarContext);
+
+const AlertSnackbarProvider = ({ children }: WithChildren) => {
+  const { t } = useTranslation();
+  const [alertContent, setAlertContent] = useState<AlertContent>(defaultAlertSnackbarContext.alertContent);
+  const closeAlert = () => {
+    setAlertContent((prev) => {
+      return {
+        ...prev,
+        alertOpen: false,
+      };
+    });
+  };
+
+  //This is to explicitly let i18n know that these keys should be extracted
+  const getAlertMessageText = useCallback(
+    (messageI18nKey: AlertMessageKeys, messageI18nContext?: object): string => {
+      switch (messageI18nKey) {
+        case 'missed_incoming_call':
+          return t('missed_incoming_call', { ...messageI18nContext });
+        case 'unknown_error_alert':
+          return t('unknown_error_alert');
+        case 'username_input_helper_text_empty':
+          return t('username_input_helper_text_empty');
+        case 'password_input_helper_text_empty':
+          return t('password_input_helper_text_empty');
+        case 'login_invalid_password':
+          return t('login_invalid_password');
+        case 'registration_success':
+          return t('registration_success');
+        default:
+          return t('unknown_error_alert');
+      }
+    },
+    [t]
+  );
+
+  const value = {
+    alertContent,
+    setAlertContent,
+  };
+
+  return (
+    <>
+      <AlertSnackbar severity={alertContent.severity} open={alertContent.alertOpen} onClose={closeAlert}>
+        {getAlertMessageText(alertContent.messageI18nKey, alertContent.messageI18nContext)}
+      </AlertSnackbar>
+      <AlertSnackbarContext.Provider value={value}>{children}</AlertSnackbarContext.Provider>
+    </>
+  );
+};
+
+export default AlertSnackbarProvider;
diff --git a/client/src/contexts/CallManagerProvider.tsx b/client/src/contexts/CallManagerProvider.tsx
index b99df69..b9fbb0b 100644
--- a/client/src/contexts/CallManagerProvider.tsx
+++ b/client/src/contexts/CallManagerProvider.tsx
@@ -20,13 +20,13 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { AlertSnackbar } from '../components/AlertSnackbar';
 import { RemoteVideoOverlay } from '../components/VideoOverlay';
 import { useUrlParams } from '../hooks/useUrlParams';
 import { ConversationMember } from '../models/conversation-member';
 import { ConversationRouteParams } from '../router';
 import { useConversationInfosQuery, useMembersQuery } from '../services/conversationQueries';
 import { SetState, WithChildren } from '../utils/utils';
+import { AlertSnackbarContext } from './AlertSnackbarProvider';
 import CallProvider, { CallRole } from './CallProvider';
 import WebRtcProvider from './WebRtcProvider';
 import { WebSocketContext } from './WebSocketProvider';
@@ -59,11 +59,11 @@
 export default ({ children }: WithChildren) => {
   const [callData, setCallData] = useState<CallData>();
   const webSocket = useContext(WebSocketContext);
+  const { setAlertContent } = useContext(AlertSnackbarContext);
   const navigate = useNavigate();
   const { data: conversationInfos } = useConversationInfosQuery(callData?.conversationId);
   const { data: members } = useMembersQuery(callData?.conversationId);
   const { urlParams } = useUrlParams<ConversationRouteParams>();
-  const [missedCallConversationId, setMissedCallConversationId] = useState<string>();
   const { t } = useTranslation();
 
   const failStartCall = useCallback(() => {
@@ -90,7 +90,12 @@
       if (callData) {
         // TODO: Currently, we display a notification if already in a call.
         //       In the future, we should handle receiving a call while already in another.
-        setMissedCallConversationId(conversationId);
+        setAlertContent({
+          messageI18nKey: 'missed_incoming_call',
+          messageI18nContext: { conversationId },
+          severity: 'info',
+          alertOpen: true,
+        });
         return;
       }
 
@@ -103,7 +108,7 @@
     return () => {
       webSocket.unbind(WebSocketMessageType.CallBegin, callBeginListener);
     };
-  }, [webSocket, navigate, startCall, callData]);
+  }, [webSocket, navigate, startCall, callData, setAlertContent, t]);
 
   const value = useMemo(
     () => ({
@@ -118,13 +123,6 @@
 
   return (
     <>
-      <AlertSnackbar
-        severity={'info'}
-        open={missedCallConversationId !== undefined}
-        onClose={() => setMissedCallConversationId(undefined)}
-      >
-        {t('missed_incoming_call', { conversationId: missedCallConversationId })}
-      </AlertSnackbar>
       <CallManagerContext.Provider value={value}>
         <WebRtcProvider>
           <CallProvider>