diff --git a/packages/compass-components/src/hooks/use-theme.tsx b/packages/compass-components/src/hooks/use-theme.tsx
index d68c3bb019e..99868fd49f6 100644
--- a/packages/compass-components/src/hooks/use-theme.tsx
+++ b/packages/compass-components/src/hooks/use-theme.tsx
@@ -17,7 +17,7 @@ const ThemeProvider = ({
   children,
   theme,
 }: {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   theme: ThemeState;
 }): React.ReactElement => {
   return (
diff --git a/packages/compass-components/src/hooks/use-toast.spec.tsx b/packages/compass-components/src/hooks/use-toast.spec.tsx
new file mode 100644
index 00000000000..1c041f743eb
--- /dev/null
+++ b/packages/compass-components/src/hooks/use-toast.spec.tsx
@@ -0,0 +1,107 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { expect } from 'chai';
+import React from 'react';
+import sinon from 'sinon';
+
+import { ToastArea, ToastVariant, useToast } from '..';
+
+const OpenToastButton = ({
+  namespace,
+  id,
+  title,
+  variant,
+  timeout,
+  body,
+}: {
+  namespace: string;
+  variant: ToastVariant;
+  id: string;
+  title: string;
+  timeout?: number;
+  body?: string;
+}) => {
+  const { openToast } = useToast(namespace);
+  return (
+    <button onClick={() => openToast(id, { title, variant, body, timeout })}>
+      Open Toast
+    </button>
+  );
+};
+
+const CloseToastButton = ({
+  namespace,
+  id,
+}: {
+  namespace: string;
+  id: string;
+}) => {
+  const { closeToast } = useToast(namespace);
+  return <button onClick={() => closeToast(id)}>Close Toast</button>;
+};
+
+describe('useToast', function () {
+  afterEach(cleanup);
+
+  it('opens and closes a toast', async function () {
+    render(
+      <ToastArea>
+        <OpenToastButton
+          namespace="ns-1"
+          id="toast-1"
+          title="My Toast"
+          body="Toast body"
+          variant={ToastVariant.Success}
+        />
+        <CloseToastButton namespace="ns-1" id="toast-1" />
+      </ToastArea>
+    );
+
+    fireEvent.click(screen.getByText('Open Toast'));
+
+    await screen.findByText('My Toast');
+    screen.getByText('Toast body');
+
+    fireEvent.click(screen.getByText('Close Toast'));
+
+    expect(screen.queryByText('My Toast')).to.not.exist;
+  });
+
+  describe('with timeout', function () {
+    let clock;
+
+    beforeEach(function () {
+      clock = sinon.useFakeTimers();
+    });
+
+    afterEach(function () {
+      clock.restore();
+    });
+
+    it('closes a toast after timeout expires', async function () {
+      render(
+        <ToastArea>
+          <OpenToastButton
+            namespace="ns-1"
+            id="toast-1"
+            title="My Toast"
+            body="Toast body"
+            timeout={5000}
+            variant={ToastVariant.Success}
+          />
+        </ToastArea>
+      );
+
+      fireEvent.click(screen.getByText('Open Toast'));
+
+      await screen.findByText('My Toast');
+
+      clock.tick(2000);
+
+      await screen.findByText('My Toast');
+
+      clock.tick(3001);
+
+      expect(screen.queryByText('My Toast')).to.not.exist;
+    });
+  });
+});
diff --git a/packages/compass-components/src/hooks/use-toast.tsx b/packages/compass-components/src/hooks/use-toast.tsx
new file mode 100644
index 00000000000..3437b14018c
--- /dev/null
+++ b/packages/compass-components/src/hooks/use-toast.tsx
@@ -0,0 +1,164 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import type { ToastVariant } from '..';
+import { css } from '..';
+import { Toast } from '..';
+
+type ToastProperties = {
+  title?: React.ReactNode;
+  body: React.ReactNode;
+  variant: ToastVariant;
+  progress?: number;
+  timeout?: number;
+};
+
+interface ToastActions {
+  openToast: (id: string, toastProperties: ToastProperties) => void;
+  closeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastActions>({
+  openToast: () => {
+    //
+  },
+  closeToast: () => {
+    //
+  },
+});
+
+const toastStyles = css({
+  button: {
+    position: 'absolute',
+  },
+});
+
+/**
+ * @example
+ *
+ * ```
+ * const MyButton = () => {
+ *   const { openToast } = useToast('namespace');
+ *   return <button onClick={() => openToast(
+ *      'myToast1', {title: 'This is a notification'})} />
+ * };
+ *
+ * <ToastArea><MyButton/><ToastArea>
+ * ```
+ *
+ * @returns
+ */
+export const ToastArea: React.FunctionComponent = ({ children }) => {
+  const [toasts, setToasts] = useState<Record<string, ToastProperties>>({});
+  const timeouts = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+
+  useEffect(() => {
+    return () => {
+      Object.values(timeouts).forEach(clearTimeout);
+    };
+  }, [timeouts]);
+
+  const clearTimeoutRef = useCallback(
+    (id) => {
+      clearTimeout(timeouts.current[id]);
+      delete timeouts.current[id];
+    },
+    [timeouts]
+  );
+
+  const setTimeoutRef = useCallback(
+    (id: string, callback: () => void, timeout: number) => {
+      clearTimeoutRef(id);
+      timeouts.current[id] = setTimeout(callback, timeout);
+    },
+    [timeouts, clearTimeoutRef]
+  );
+
+  const closeToast = useCallback(
+    (toastId: string): void => {
+      clearTimeoutRef(toastId);
+
+      setToasts((prevToasts) => {
+        const newToasts = { ...prevToasts };
+        delete newToasts[toastId];
+        return newToasts;
+      });
+    },
+    [setToasts, clearTimeoutRef]
+  );
+
+  const openToast = useCallback(
+    (toastId: string, toastProperties: ToastProperties): void => {
+      clearTimeoutRef(toastId);
+
+      if (toastProperties.timeout) {
+        setTimeoutRef(
+          toastId,
+          () => {
+            closeToast(toastId);
+          },
+          toastProperties.timeout
+        );
+      }
+
+      setToasts((prevToasts) => ({
+        ...prevToasts,
+        [toastId]: {
+          ...toastProperties,
+        },
+      }));
+    },
+    [setToasts, setTimeoutRef, clearTimeoutRef, closeToast]
+  );
+
+  return (
+    <ToastContext.Provider value={{ closeToast, openToast }}>
+      <>{children}</>
+      <>
+        {Object.entries(toasts).map(
+          ([id, { title, body, variant, progress }]) => (
+            <Toast
+              className={toastStyles}
+              key={id}
+              title={title}
+              body={body}
+              variant={variant}
+              progress={progress}
+              open={true}
+              close={() => closeToast(id)}
+            />
+          )
+        )}
+      </>
+    </ToastContext.Provider>
+  );
+};
+
+export function useToast(namespace: string): ToastActions {
+  const { openToast: openGlobalToast, closeToast: closeGlobalToast } =
+    useContext(ToastContext);
+
+  const openToast = useCallback(
+    (toastId: string, toastProperties: ToastProperties): void => {
+      openGlobalToast(`${namespace}--${toastId}`, toastProperties);
+    },
+    [namespace, openGlobalToast]
+  );
+
+  const closeToast = useCallback(
+    (toastId: string): void => {
+      closeGlobalToast(`${namespace}--${toastId}`);
+    },
+    [namespace, closeGlobalToast]
+  );
+
+  return {
+    openToast,
+    closeToast,
+  };
+}
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
index bc5b183c3d6..edf779331be 100644
--- a/packages/compass-components/src/index.ts
+++ b/packages/compass-components/src/index.ts
@@ -61,6 +61,9 @@ export {
   default as Toast,
   Variant as ToastVariant,
 } from '@leafygreen-ui/toast';
+
+export { useToast, ToastArea } from './hooks/use-toast';
+
 export { Toggle } from './components/toggle';
 
 export { breakpoints, spacing } from '@leafygreen-ui/tokens';
diff --git a/packages/compass-home/src/components/home.tsx b/packages/compass-home/src/components/home.tsx
index 726ff8c8924..a16833bda74 100644
--- a/packages/compass-home/src/components/home.tsx
+++ b/packages/compass-home/src/components/home.tsx
@@ -1,3 +1,14 @@
+import {
+  css,
+  Theme,
+  ThemeProvider,
+  ToastArea,
+} from '@mongodb-js/compass-components';
+import Connections from '@mongodb-js/compass-connections';
+import ipc from 'hadron-ipc';
+import type { ConnectionInfo, DataService } from 'mongodb-data-service';
+import { getConnectionTitle } from 'mongodb-data-service';
+import toNS from 'mongodb-ns';
 import React, {
   useCallback,
   useEffect,
@@ -5,22 +16,14 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { ThemeProvider, css } from '@mongodb-js/compass-components';
-import { Theme } from '@mongodb-js/compass-components';
-import { getConnectionTitle } from 'mongodb-data-service';
-import type { ConnectionInfo, DataService } from 'mongodb-data-service';
-import toNS from 'mongodb-ns';
-import Connections from '@mongodb-js/compass-connections';
-
-import Workspace from './workspace';
-import type Namespace from '../types/namespace';
 import {
   AppRegistryRoles,
   useAppRegistryContext,
   useAppRegistryRole,
 } from '../contexts/app-registry-context';
 import updateTitle from '../modules/update-title';
-import ipc from 'hadron-ipc';
+import type Namespace from '../types/namespace';
+import Workspace from './workspace';
 
 const homeViewStyles = css({
   display: 'flex',
@@ -309,7 +312,9 @@ function ThemedHome(
 
   return (
     <ThemeProvider theme={theme}>
-      <Home {...props}></Home>
+      <ToastArea>
+        <Home {...props}></Home>
+      </ToastArea>
     </ThemeProvider>
   );
 }
diff --git a/packages/connections/src/components/connection-list/connection-menu.spec.tsx b/packages/connections/src/components/connection-list/connection-menu.spec.tsx
index 482fd718b91..230168f34d4 100644
--- a/packages/connections/src/components/connection-list/connection-menu.spec.tsx
+++ b/packages/connections/src/components/connection-list/connection-menu.spec.tsx
@@ -5,6 +5,7 @@ import sinon from 'sinon';
 
 import ConnectionMenu from './connection-menu';
 import type { ConnectionInfo } from 'mongodb-data-service';
+import { ToastArea } from '@mongodb-js/compass-components';
 
 describe('ConnectionMenu Component', function () {
   describe('on non-favorite item', function () {
@@ -68,13 +69,15 @@ describe('ConnectionMenu Component', function () {
         },
       };
       render(
-        <ConnectionMenu
-          connectionString={'mongodb://kaleesi'}
-          duplicateConnection={() => true}
-          removeConnection={() => true}
-          connectionInfo={connectionInfo}
-          iconColor="#EAEAEA"
-        />
+        <ToastArea>
+          <ConnectionMenu
+            connectionString={'mongodb://kaleesi'}
+            duplicateConnection={() => true}
+            removeConnection={() => true}
+            connectionInfo={connectionInfo}
+            iconColor="#EAEAEA"
+          />
+        </ToastArea>
       );
     });
 
@@ -160,7 +163,7 @@ describe('ConnectionMenu Component', function () {
 
         it('opens a toast with a success message', async function () {
           await waitFor(
-            () => expect(screen.getByText('Success!')).to.be.visible
+            () => expect(screen.getByText('Success')).to.be.visible
           );
           await waitFor(
             () => expect(screen.getByText('Copied to clipboard.')).to.be.visible
@@ -239,7 +242,12 @@ describe('ConnectionMenu Component', function () {
         it('opens a toast with an error message', async function () {
           await waitFor(() => expect(screen.getByText('Error')).to.be.visible);
           await waitFor(
-            () => expect(screen.getByText('Test error')).to.be.visible
+            () =>
+              expect(
+                screen.getByText(
+                  'An error occurred when copying to clipboard. Please try again.'
+                )
+              ).to.be.visible
           );
         });
       });
diff --git a/packages/connections/src/components/connection-list/connection-menu.tsx b/packages/connections/src/components/connection-list/connection-menu.tsx
index 86ec6f81fb9..c08f22e495c 100644
--- a/packages/connections/src/components/connection-list/connection-menu.tsx
+++ b/packages/connections/src/components/connection-list/connection-menu.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useRef, useReducer, useState } from 'react';
+import React, { useState } from 'react';
 import {
   IconButton,
   Icon,
   Menu,
   MenuItem,
-  Toast,
   ToastVariant,
   spacing,
   css,
   cx,
+  useToast,
 } from '@mongodb-js/compass-components';
 import type { ConnectionInfo } from 'mongodb-data-service';
 const dropdownButtonStyles = css({
@@ -19,58 +19,8 @@ const dropdownButtonStyles = css({
   bottom: 0,
 });
 
-const toastStyles = css({
-  button: {
-    position: 'absolute',
-  },
-});
-
 const TOAST_TIMEOUT_MS = 5000; // 5 seconds.
 
-type State = {
-  error: string;
-  toastVariant: ToastVariant;
-  toastOpen: boolean;
-};
-
-const defaultToastState: State = {
-  error: '',
-  toastOpen: false,
-  toastVariant: ToastVariant.Success,
-};
-
-type Action =
-  | { type: 'show-success-toast' }
-  | { type: 'show-warning-toast'; error: string }
-  | { type: 'toast-timeout-started' }
-  | { type: 'close-toast' };
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case 'show-success-toast':
-      return {
-        ...state,
-        toastOpen: true,
-        toastVariant: ToastVariant.Success,
-        error: '',
-      };
-    case 'show-warning-toast':
-      return {
-        ...state,
-        toastOpen: true,
-        toastVariant: ToastVariant.Warning,
-        error: action.error,
-      };
-    case 'close-toast':
-      return {
-        ...state,
-        toastOpen: false,
-      };
-    default:
-      return state;
-  }
-}
-
 function ConnectionMenu({
   connectionString,
   iconColor,
@@ -84,76 +34,31 @@ function ConnectionMenu({
   duplicateConnection: (connectionInfo: ConnectionInfo) => void;
   removeConnection: (connectionInfo: ConnectionInfo) => void;
 }): React.ReactElement {
-  const [{ error, toastOpen, toastVariant }, dispatch] = useReducer(reducer, {
-    ...defaultToastState,
-  });
-  const toastHideTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [menuIsOpen, setMenuIsOpen] = useState(false);
-  function startToastHideTimeout() {
-    if (toastHideTimeout.current) {
-      // If we're currently showing a toast, cancel that previous timeout.
-      clearTimeout(toastHideTimeout.current);
-      toastHideTimeout.current = null;
-    }
 
-    toastHideTimeout.current = setTimeout(() => {
-      dispatch({ type: 'close-toast' });
-    }, TOAST_TIMEOUT_MS);
-  }
+  const { openToast } = useToast('compass-connections');
 
   async function copyConnectionString(connectionString: string) {
     try {
       await navigator.clipboard.writeText(connectionString);
-      dispatch({
-        type: 'show-success-toast',
+      openToast('copy-to-clipboard', {
+        title: 'Success',
+        body: 'Copied to clipboard.',
+        variant: ToastVariant.Success,
+        timeout: TOAST_TIMEOUT_MS,
       });
     } catch (err) {
-      if (err instanceof Error) {
-        dispatch({
-          type: 'show-warning-toast',
-          error: err.message,
-        });
-      } else if (typeof err === 'string') {
-        dispatch({
-          type: 'show-warning-toast',
-          error: err,
-        });
-      } else {
-        dispatch({
-          type: 'show-warning-toast',
-          error:
-            'An error occurred when copying to clipboard. Please try again.',
-        });
-      }
+      openToast('copy-to-clipboard', {
+        title: 'Error',
+        body: 'An error occurred when copying to clipboard. Please try again.',
+        variant: ToastVariant.Warning,
+        timeout: TOAST_TIMEOUT_MS,
+      });
     }
-
-    startToastHideTimeout();
   }
 
-  useEffect(() => {
-    return () => {
-      // When we unmount, close the timeout if it exists.
-      if (toastHideTimeout.current) {
-        clearTimeout(toastHideTimeout.current);
-        toastHideTimeout.current = null;
-      }
-    };
-  }, []);
-
   return (
     <>
-      <Toast
-        className={toastStyles}
-        variant={toastVariant}
-        title={toastVariant === ToastVariant.Success ? 'Success!' : 'Error'}
-        body={
-          toastVariant === ToastVariant.Success
-            ? 'Copied to clipboard.'
-            : `${error}`
-        }
-        open={toastOpen}
-        close={() => dispatch({ type: 'close-toast' })}
-      />
       <Menu
         align="bottom"
         justify="start"
diff --git a/packages/connections/src/components/connections.spec.tsx b/packages/connections/src/components/connections.spec.tsx
index 1fa54a21e61..acb33a8d2b0 100644
--- a/packages/connections/src/components/connections.spec.tsx
+++ b/packages/connections/src/components/connections.spec.tsx
@@ -5,7 +5,6 @@ import {
   screen,
   waitFor,
   fireEvent,
-  within,
 } from '@testing-library/react';
 import { expect } from 'chai';
 import type { ConnectionInfo, ConnectionOptions } from 'mongodb-data-service';
@@ -14,6 +13,7 @@ import sinon from 'sinon';
 
 import Connections from './connections';
 import type { ConnectionStore } from '../stores/connections-store';
+import { ToastArea } from '@mongodb-js/compass-components';
 
 function getMockConnectionStorage(
   mockConnections: ConnectionInfo[]
@@ -147,12 +147,14 @@ describe('Connections Component', function () {
       sinon.replace(mockStorage, 'save', saveConnectionSpy);
 
       render(
-        <Connections
-          onConnected={onConnectedSpy}
-          connectFn={mockConnectFn}
-          connectionStorage={mockStorage}
-          appName="Test App Name"
-        />
+        <ToastArea>
+          <Connections
+            onConnected={onConnectedSpy}
+            connectFn={mockConnectFn}
+            connectionStorage={mockStorage}
+            appName="Test App Name"
+          />
+        </ToastArea>
       );
 
       await waitFor(() => expect(screen.queryAllByRole('listitem')).to.exist);
@@ -173,37 +175,6 @@ describe('Connections Component', function () {
       expect(screen.getByText('localhost:27018')).to.be.visible;
     });
 
-    describe('when saving the connection fails', function () {
-      beforeEach(async function () {
-        mockStorage.save = () => {
-          throw new Error('Error: pineapples');
-        };
-
-        await loadSavedConnectionAndConnect(
-          connections.find(({ id }) => id === savedConnectionId)
-        );
-      });
-
-      it('displays the error that occurred when saving', function () {
-        expect(screen.getByRole('alert').textContent).to.equal(
-          'Error: pineapples'
-        );
-      });
-
-      describe('clicking the close button on the banner', function () {
-        beforeEach(function () {
-          const closeBannerButton = within(
-            screen.getByRole('alert')
-          ).getByLabelText('X Icon');
-          fireEvent.click(closeBannerButton);
-        });
-
-        it('should hide the save error banner', function () {
-          expect(screen.queryByRole('alert')).to.not.exist;
-        });
-      });
-    });
-
     describe('when a saved connection is clicked on and connected to', function () {
       beforeEach(async function () {
         this.clock = sinon.useFakeTimers({
diff --git a/packages/connections/src/components/connections.tsx b/packages/connections/src/components/connections.tsx
index 46b0967ab1c..9d6be2ebc0a 100644
--- a/packages/connections/src/components/connections.tsx
+++ b/packages/connections/src/components/connections.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  Banner,
-  BannerVariant,
   ErrorBoundary,
   compassUIColors,
   spacing,
@@ -74,7 +72,6 @@ function Connections({
     connect,
     createNewConnection,
     duplicateConnection,
-    hideStoreConnectionError,
     setActiveConnectionById,
     removeAllRecentsConnections,
     removeConnection,
@@ -88,7 +85,6 @@ function Connections({
     connectingStatusText,
     connections,
     isConnected,
-    storeConnectionError,
   } = state;
 
   return (
@@ -109,15 +105,6 @@ function Connections({
         duplicateConnection={duplicateConnection}
       />
       <div className={connectItemContainerStyles}>
-        {storeConnectionError && (
-          <Banner
-            variant={BannerVariant.Danger}
-            dismissible
-            onClose={hideStoreConnectionError}
-          >
-            {storeConnectionError}
-          </Banner>
-        )}
         <div className={formContainerStyles}>
           <ErrorBoundary
             onError={(error: Error, errorInfo: React.ErrorInfo) => {
diff --git a/packages/connections/src/stores/connections-store.ts b/packages/connections/src/stores/connections-store.ts
index 293a13ee0f7..d8b10ffb5d0 100644
--- a/packages/connections/src/stores/connections-store.ts
+++ b/packages/connections/src/stores/connections-store.ts
@@ -19,6 +19,7 @@ import {
 import ConnectionString from 'mongodb-connection-string-url';
 import type { MongoClientOptions } from 'mongodb';
 
+import { ToastVariant, useToast } from '@mongodb-js/compass-components';
 const debug = debugModule('mongodb-compass:connections:connections-store');
 
 export function createNewConnectionInfo(): ConnectionInfo {
@@ -108,13 +109,6 @@ type Action =
       type: 'set-active-connection';
       connectionInfo: ConnectionInfo;
     }
-  | {
-      type: 'store-connection-error';
-      errorMessage: string;
-    }
-  | {
-      type: 'hide-store-connection-error';
-    }
   | {
       type: 'set-connections';
       connections: ConnectionInfo[];
@@ -165,16 +159,6 @@ export function connectionsReducer(state: State, action: Action): State {
         activeConnectionId: action.connectionInfo.id,
         activeConnectionInfo: action.connectionInfo,
       };
-    case 'store-connection-error':
-      return {
-        ...state,
-        storeConnectionError: action.errorMessage,
-      };
-    case 'hide-store-connection-error':
-      return {
-        ...state,
-        storeConnectionError: null,
-      };
     case 'set-connections':
       return {
         ...state,
@@ -229,13 +213,14 @@ export function useConnections({
   cancelConnectionAttempt: () => void;
   connect: (connectionInfo: ConnectionInfo) => Promise<void>;
   createNewConnection: () => void;
-  hideStoreConnectionError: () => void;
   saveConnection: (connectionInfo: ConnectionInfo) => Promise<void>;
   setActiveConnectionById: (newConnectionId: string) => void;
   removeAllRecentsConnections: () => Promise<void>;
   duplicateConnection: (connectioInfo: ConnectionInfo) => void;
   removeConnection: (connectionInfo: ConnectionInfo) => void;
 } {
+  const { openToast } = useToast('compass-connections');
+
   const [state, dispatch]: [State, React.Dispatch<Action>] = useReducer(
     connectionsReducer,
     defaultConnectionsState()
@@ -258,12 +243,13 @@ export function useConnections({
         }`
       );
 
-      dispatch({
-        type: 'store-connection-error',
-        errorMessage: (err as Error).message,
+      openToast('save-connection-error', {
+        title: 'Error',
+        variant: ToastVariant.Warning,
+        body: `An error occurred while saving the connection. ${
+          (err as Error).message
+        }`,
       });
-
-      throw err;
     }
   }
 
@@ -284,11 +270,6 @@ export function useConnections({
           (err as Error).message
         }`
       );
-
-      dispatch({
-        type: 'store-connection-error',
-        errorMessage: (err as Error).message,
-      });
     }
   }
 
@@ -395,11 +376,6 @@ export function useConnections({
         connectionInfo: createNewConnectionInfo(),
       });
     },
-    hideStoreConnectionError() {
-      dispatch({
-        type: 'hide-store-connection-error',
-      });
-    },
     async saveConnection(connectionInfo: ConnectionInfo) {
       await saveConnectionInfo(connectionInfo);