diff --git a/components/pages/reports/ReportHeader.js b/components/pages/reports/ReportHeader.js
index b8104203..805e45b6 100644
--- a/components/pages/reports/ReportHeader.js
+++ b/components/pages/reports/ReportHeader.js
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/router';
-import { Icon, LoadingButton, InlineEditField, useToast } from 'react-basics';
+import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import PageHeader from 'components/layout/PageHeader';
 import { useMessages, useApi } from 'hooks';
 import { ReportContext } from './Report';
@@ -10,7 +10,7 @@ import reportStyles from './reports.module.css';
 export function ReportHeader({ icon }) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels, messages } = useMessages();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { post, useMutation } = useApi();
   const router = useRouter();
   const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
@@ -75,7 +75,6 @@ export function ReportHeader({ icon }) {
           onCommit={handleDescriptionChange}
         />
       </div>
-      {toast}
     </div>
   );
 }
diff --git a/components/pages/settings/profile/PasswordChangeButton.js b/components/pages/settings/profile/PasswordChangeButton.js
index 9aa6fdca..03bf74bc 100644
--- a/components/pages/settings/profile/PasswordChangeButton.js
+++ b/components/pages/settings/profile/PasswordChangeButton.js
@@ -1,11 +1,11 @@
-import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
+import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
 import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
 export function PasswordChangeButton() {
   const { formatMessage, labels, messages } = useMessages();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
 
   const handleSave = () => {
     showToast({ message: formatMessage(messages.saved), variant: 'success' });
@@ -13,7 +13,6 @@ export function PasswordChangeButton() {
 
   return (
     <>
-      {toast}
       <ModalTrigger>
         <Button>
           <Icon>
diff --git a/components/pages/settings/teams/TeamMembers.js b/components/pages/settings/teams/TeamMembers.js
index 333e176d..3ea8232c 100644
--- a/components/pages/settings/teams/TeamMembers.js
+++ b/components/pages/settings/teams/TeamMembers.js
@@ -1,10 +1,10 @@
-import { Loading, useToast } from 'react-basics';
+import { Loading, useToasts } from 'react-basics';
 import TeamMembersTable from 'components/pages/settings/teams/TeamMembersTable';
 import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
 export function TeamMembers({ teamId, readOnly }) {
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { get, useQuery } = useApi();
   const { formatMessage, messages } = useMessages();
   const { data, isLoading, refetch } = useQuery(['teams:users', teamId], () =>
@@ -22,7 +22,6 @@ export function TeamMembers({ teamId, readOnly }) {
 
   return (
     <>
-      {toast}
       <TeamMembersTable onSave={handleSave} data={data} readOnly={readOnly} />
     </>
   );
diff --git a/components/pages/settings/teams/TeamSettings.js b/components/pages/settings/teams/TeamSettings.js
index 1bff1289..64160578 100644
--- a/components/pages/settings/teams/TeamSettings.js
+++ b/components/pages/settings/teams/TeamSettings.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
@@ -17,7 +17,7 @@ export function TeamSettings({ teamId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { data, isLoading } = useQuery(
     ['team', teamId],
     () => {
@@ -44,7 +44,6 @@ export function TeamSettings({ teamId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      {toast}
       <PageHeader
         title={
           <Breadcrumbs>
diff --git a/components/pages/settings/teams/TeamWebsites.js b/components/pages/settings/teams/TeamWebsites.js
index 9ceda8d4..9a5761e5 100644
--- a/components/pages/settings/teams/TeamWebsites.js
+++ b/components/pages/settings/teams/TeamWebsites.js
@@ -7,7 +7,7 @@ import {
   Modal,
   ModalTrigger,
   Text,
-  useToast,
+  useToasts,
 } from 'react-basics';
 import TeamWebsitesTable from 'components/pages/settings/teams/TeamWebsitesTable';
 import TeamAddWebsiteForm from 'components/pages/settings/teams/TeamAddWebsiteForm';
@@ -15,7 +15,7 @@ import useApi from 'hooks/useApi';
 import useMessages from 'hooks/useMessages';
 
 export function TeamWebsites({ teamId }) {
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const { data, isLoading, refetch } = useQuery(['teams:websites', teamId], () =>
@@ -48,7 +48,6 @@ export function TeamWebsites({ teamId }) {
 
   return (
     <div>
-      {toast}
       <ActionForm description={formatMessage(messages.teamWebsitesInfo)}>{addButton}</ActionForm>
       {hasData && <TeamWebsitesTable teamId={teamId} data={data} onSave={handleSave} />}
     </div>
diff --git a/components/pages/settings/teams/TeamsList.js b/components/pages/settings/teams/TeamsList.js
index 73dcb17d..783696b1 100644
--- a/components/pages/settings/teams/TeamsList.js
+++ b/components/pages/settings/teams/TeamsList.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, Icon, Modal, ModalTrigger, useToast, Text, Flexbox } from 'react-basics';
+import { Button, Icon, Modal, ModalTrigger, useToasts, Text, Flexbox } from 'react-basics';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import TeamAddForm from 'components/pages/settings/teams/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
@@ -16,7 +16,7 @@ export default function TeamsList() {
   const { get, useQuery } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
 
   const handleSave = () => {
     setUpdate(state => state + 1);
@@ -63,7 +63,6 @@ export default function TeamsList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      {toast}
       <PageHeader title={formatMessage(labels.teams)}>
         {hasData && (
           <Flexbox gap={10}>
diff --git a/components/pages/settings/users/UserSettings.js b/components/pages/settings/users/UserSettings.js
index cd3bea42..d703e964 100644
--- a/components/pages/settings/users/UserSettings.js
+++ b/components/pages/settings/users/UserSettings.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
 import Link from 'next/link';
 import UserEditForm from 'components/pages/settings/users//UserEditForm';
 import Page from 'components/layout/Page';
@@ -14,7 +14,7 @@ export function UserSettings({ userId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { data, isLoading } = useQuery(
     ['user', userId],
     () => {
@@ -44,7 +44,6 @@ export function UserSettings({ userId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      {toast}
       <PageHeader
         title={
           <Breadcrumbs>
diff --git a/components/pages/settings/users/UsersList.js b/components/pages/settings/users/UsersList.js
index 1605cb51..8886203b 100644
--- a/components/pages/settings/users/UsersList.js
+++ b/components/pages/settings/users/UsersList.js
@@ -1,4 +1,4 @@
-import { useToast } from 'react-basics';
+import { useToasts } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -15,7 +15,7 @@ export function UsersList() {
   const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
     enabled: !!user,
   });
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const hasData = data && data.length !== 0;
 
   const handleSave = () => {
@@ -30,7 +30,6 @@ export function UsersList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      {toast}
       <PageHeader title={formatMessage(labels.users)}>
         <UserAddButton onSave={handleSave} />
       </PageHeader>
diff --git a/components/pages/settings/websites/WebsiteSettings.js b/components/pages/settings/websites/WebsiteSettings.js
index 0a70a731..5a96fa8c 100644
--- a/components/pages/settings/websites/WebsiteSettings.js
+++ b/components/pages/settings/websites/WebsiteSettings.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast, Button, Text, Icon, Icons } from 'react-basics';
+import { Breadcrumbs, Item, Tabs, useToasts, Button, Text, Icon, Icons } from 'react-basics';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import Page from 'components/layout/Page';
@@ -17,7 +17,7 @@ export function WebsiteSettings({ websiteId }) {
   const { formatMessage, labels, messages } = useMessages();
   const { openExternal } = useConfig();
   const { get, useQuery } = useApi();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { data, isLoading } = useQuery(
     ['website', websiteId],
     () => get(`/websites/${websiteId}`),
@@ -51,7 +51,6 @@ export function WebsiteSettings({ websiteId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      {toast}
       <PageHeader
         title={
           <Breadcrumbs>
diff --git a/components/pages/settings/websites/WebsitesList.js b/components/pages/settings/websites/WebsitesList.js
index 84f96c83..23abd897 100644
--- a/components/pages/settings/websites/WebsitesList.js
+++ b/components/pages/settings/websites/WebsitesList.js
@@ -1,4 +1,4 @@
-import { Button, Icon, Text, Modal, ModalTrigger, useToast, Icons } from 'react-basics';
+import { Button, Icon, Text, Modal, ModalTrigger, useToasts, Icons } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -17,7 +17,7 @@ export function WebsitesList() {
     () => get(`/users/${user?.id}/websites`),
     { enabled: !!user },
   );
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const hasData = data && data.length !== 0;
 
   const handleSave = async () => {
@@ -41,7 +41,6 @@ export function WebsitesList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      {toast}
       <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
       {hasData && <WebsitesTable data={data} />}
       {!hasData && (
diff --git a/package.json b/package.json
index 8e03a3a9..5cfc9823 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.83.0",
+    "react-basics": "^0.84.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.4",
diff --git a/pages/_app.js b/pages/_app.js
index 22458215..8d549773 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,6 @@
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactBasicsProvider } from 'react-basics';
 import Head from 'next/head';
 import Script from 'next/script';
 import { useRouter } from 'next/router';
@@ -42,37 +43,39 @@ export default function App({ Component, pageProps }) {
         textComponent={Wrapper}
         onError={() => null}
       >
-        <ErrorBoundary>
-          <Head>
-            <link rel="icon" href={`${basePath}/favicon.ico`} />
-            <link
-              rel="apple-touch-icon"
-              sizes="180x180"
-              href={`${basePath}/apple-touch-icon.png`}
-            />
-            <link
-              rel="icon"
-              type="image/png"
-              sizes="32x32"
-              href={`${basePath}/favicon-32x32.png`}
-            />
-            <link
-              rel="icon"
-              type="image/png"
-              sizes="16x16"
-              href={`${basePath}/favicon-16x16.png`}
-            />
-            <link rel="manifest" href={`${basePath}/site.webmanifest`} />
-            <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
-            <meta name="msapplication-TileColor" content="#da532c" />
-            <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
-            <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
-            <meta name="viewport" content="width=device-width, initial-scale=1" />
-            <meta name="robots" content="noindex,nofollow" />
-          </Head>
-          <Component {...pageProps} />
-          {!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
-        </ErrorBoundary>
+        <ReactBasicsProvider>
+          <ErrorBoundary>
+            <Head>
+              <link rel="icon" href={`${basePath}/favicon.ico`} />
+              <link
+                rel="apple-touch-icon"
+                sizes="180x180"
+                href={`${basePath}/apple-touch-icon.png`}
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="32x32"
+                href={`${basePath}/favicon-32x32.png`}
+              />
+              <link
+                rel="icon"
+                type="image/png"
+                sizes="16x16"
+                href={`${basePath}/favicon-16x16.png`}
+              />
+              <link rel="manifest" href={`${basePath}/site.webmanifest`} />
+              <link rel="mask-icon" href={`${basePath}/safari-pinned-tab.svg`} color="#5bbad5" />
+              <meta name="msapplication-TileColor" content="#da532c" />
+              <meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)" />
+              <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
+              <meta name="viewport" content="width=device-width, initial-scale=1" />
+              <meta name="robots" content="noindex,nofollow" />
+            </Head>
+            <Component {...pageProps} />
+            {!pathname.includes('/share/') && <Script src={`${basePath}/telemetry.js`} />}
+          </ErrorBoundary>
+        </ReactBasicsProvider>
       </IntlProvider>
     </QueryClientProvider>
   );
diff --git a/yarn.lock b/yarn.lock
index 579d52af..aa847d57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8191,10 +8191,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.83.0:
-  version "0.83.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.83.0.tgz#bc4a962967383ecec20a0eb49b88c004c67a7f3a"
-  integrity sha512-3P74I1Tp8Ih8gw3xG65mB0aTzG0oTOYg72Gpfbd3igKjg/L1wgN6stWjIwzNP7mgWFc0FQ63BB13P7pL025bNQ==
+react-basics@^0.84.0:
+  version "0.84.0"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.84.0.tgz#cfea2ae6b64d9318406a0c6cf0d5d9e8a0790a28"
+  integrity sha512-QWnUkw7kVbBK0Z1xvvsNgrUBlUI0FzL39jQAZR5EutE83BlkAtYeisXooPZk3PJuGHZzJvY6+JzMYmvALLjqnQ==
   dependencies:
     classnames "^2.3.1"
     date-fns "^2.29.3"