diff --git a/ghost/admin-x-settings/package.json b/ghost/admin-x-settings/package.json
index 78cd29d80c..16d82f3a3b 100644
--- a/ghost/admin-x-settings/package.json
+++ b/ghost/admin-x-settings/package.json
@@ -76,6 +76,7 @@
     "postcss": "8.4.24",
     "postcss-import": "^15.1.0",
     "prop-types": "15.8.1",
+    "react-hot-toast": "^2.4.1",
     "react-select": "^5.7.3",
     "rollup-plugin-node-builtins": "2.1.2",
     "storybook": "7.0.18",
diff --git a/ghost/admin-x-settings/src/App.tsx b/ghost/admin-x-settings/src/App.tsx
index 2dd025aa4b..d53098d3f6 100644
--- a/ghost/admin-x-settings/src/App.tsx
+++ b/ghost/admin-x-settings/src/App.tsx
@@ -5,16 +5,33 @@ import NiceModal from '@ebay/nice-modal-react';
 import Settings from './components/Settings';
 import Sidebar from './components/Sidebar';
 import {ServicesProvider} from './components/providers/ServiceProvider';
+import {Toaster} from 'react-hot-toast';
+import {showToast} from './admin-x-ds/global/Toast';
 
 interface AppProps {
     ghostVersion: string;
 }
 
 function App({ghostVersion}: AppProps) {
+    // const notify = () => toast.success('Here is your toast.', {
+    //     duration: 10000000,
+    //     position: 'bottom-left'
+    // });
+
+    const notify = () => showToast({
+        message: 'Hello toast',
+        options: {
+            duration: 1000000,
+            position: 'bottom-left'
+        }
+    });
+
     return (
         <ServicesProvider ghostVersion={ghostVersion}>
             <DataProvider>
                 <div className="admin-x-settings">
+                    <Toaster />
+                    <button type='button' onClick={notify}>Make me a toast</button>
                     <NiceModal.Provider>
                         <div className='fixed left-6 top-4'>
                             <Button label='&larr; Done' link={true} onClick={() => window.history.back()} />
diff --git a/ghost/admin-x-settings/src/admin-x-ds/assets/icons/close.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/close.svg
new file mode 100644
index 0000000000..e49c5fb03d
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>close</title><line x1="0.75" y1="23.249" x2="23.25" y2="0.749" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line><line x1="23.25" y1="23.249" x2="0.75" y2="0.749" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5px"></line></svg>
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/assets/icons/warning.svg b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/warning.svg
new file mode 100644
index 0000000000..d8092290f2
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/assets/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.313 2.27521C13.1833 2.04051 12.9931 1.84486 12.7622 1.70861C12.5313 1.57235 12.2681 1.50049 12 1.50049C11.7318 1.50049 11.4686 1.57235 11.2377 1.70861C11.0068 1.84486 10.8166 2.04051 10.687 2.27521L0.936968 20.2752C0.810886 20.5036 0.746538 20.7609 0.750276 21.0217C0.754014 21.2825 0.825708 21.5379 0.958282 21.7625C1.09086 21.9872 1.27972 22.1734 1.50625 22.3028C1.73277 22.4321 1.98911 22.5002 2.24997 22.5002H21.75C22.0108 22.5002 22.2672 22.4321 22.4937 22.3028C22.7202 22.1734 22.9091 21.9872 23.0417 21.7625C23.1742 21.5379 23.2459 21.2825 23.2497 21.0217C23.2534 20.7609 23.189 20.5036 23.063 20.2752L13.313 2.27521Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15V8.25"></path><path stroke="currentColor" stroke-width="1.5" d="M12 18.75C11.7929 18.75 11.625 18.5821 11.625 18.375C11.625 18.1679 11.7929 18 12 18"></path><path stroke="currentColor" stroke-width="1.5" d="M12 18.75C12.2071 18.75 12.375 18.5821 12.375 18.375C12.375 18.1679 12.2071 18 12 18"></path></svg>
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx
new file mode 100644
index 0000000000..748bf36a2e
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Toast.stories.tsx
@@ -0,0 +1,64 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import ToastContainer from './ToastContainer';
+import {Toaster} from 'react-hot-toast';
+
+const meta = {
+    title: 'Global / Toast',
+    component: ToastContainer,
+    tags: ['autodocs'],
+    decorators: [(_story: any) => (
+        <>
+            <Toaster />
+            {_story()}
+        </>
+    )]
+} satisfies Meta<typeof ToastContainer>;
+
+export default meta;
+type Story = StoryObj<typeof ToastContainer>;
+
+export const Default: Story = {
+    args: {
+        message: 'Hello notification in a toast'
+    }
+};
+
+export const Success: Story = {
+    args: {
+        message: 'Hello success message in a toast',
+        type: 'success'
+    }
+};
+
+export const Error: Story = {
+    args: {
+        message: 'Hello error message in a toast',
+        type: 'error'
+    }
+};
+
+export const Icon: Story = {
+    args: {
+        message: 'Custom icon in a toast',
+        icon: 'user-add'
+    }
+};
+
+export const Custom: Story = {
+    args: {
+        message: (
+            <div>
+                And here is one with a longer notification and a <a className='underline' href="https://ghost.org" rel="noreferrer" target="_blank">link</a>, custom <strong>formatting</strong>, icon and duration.
+            </div>
+        ),
+        icon: (
+            <>
+                👋
+            </>
+        ),
+        options: {
+            duration: 10000
+        }
+    }
+};
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Toast.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Toast.tsx
new file mode 100644
index 0000000000..c79ed32921
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Toast.tsx
@@ -0,0 +1,96 @@
+import Icon from './Icon';
+import React from 'react';
+import {ToastOptions, toast} from 'react-hot-toast';
+
+export type ToastType = 'neutral' | 'success' | 'error';
+
+export interface ShowToastProps {
+    message?: React.ReactNode;
+    type?: ToastType;
+    icon?: React.ReactNode | string;
+    options?: ToastOptions
+}
+
+interface ToastProps {
+    t: any;
+
+    /**
+     * Can be a name of an icon from the icon library or a react component
+     */
+    children?: React.ReactNode;
+    props?: ShowToastProps;
+}
+
+const Toast: React.FC<ToastProps> = ({
+    t,
+    children,
+    props
+}) => {
+    let classNames = `flex w-[300px] items-start justify-between rounded py-3 px-4 text-sm font-medium text-white gap-6`;
+
+    if (t.visible) {
+        classNames += ' animate-toaster-in';
+    } else {
+        classNames += ' animate-toaster-out';
+    }
+
+    switch (props?.type) {
+    case 'success':
+        classNames += ' bg-black';
+        props.icon = props.icon || 'check-circle';
+        break;
+    case 'error':
+        classNames += ' bg-red';
+        props.icon = props.icon || 'warning';
+        break;
+    default:
+        classNames += ' bg-black';
+        break;
+    }
+
+    return (
+        <div className={classNames}>
+            <div className='flex items-start gap-3'>
+                {props?.icon && (typeof props.icon === 'string' ?
+                    <div className='mt-0.5'><Icon className='grow' color={props.type === 'success' ? 'green' : 'white'} name={props.icon} size='sm' /></div> : props.icon)}
+                {children}
+            </div>
+            <button className='cursor-pointer' type='button' onClick={() => {
+                toast.dismiss(t.id);
+            }}>
+                <div className='mt-1'>
+                    <Icon color='white' name='close' size='xs' />
+                </div>
+            </button>
+        </div>
+    );
+};
+
+export default Toast;
+
+export const showToast = ({
+    message,
+    type = 'neutral',
+    icon = '',
+    options = {
+        position: 'bottom-left',
+        duration: 5000
+    }
+}: ShowToastProps): void => {
+    if (!options.position) {
+        options.position = 'bottom-left';
+    }
+
+    toast.custom(t => (
+        <Toast props={{
+            type: type,
+            icon: icon
+        }} t={t}>
+            {message}
+        </Toast>
+    ),
+    {
+        ...options
+    }
+    );
+};
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx
new file mode 100644
index 0000000000..36166a8a8c
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/ToastContainer.tsx
@@ -0,0 +1,15 @@
+import Button from './Button';
+import React from 'react';
+import {ShowToastProps, showToast} from './Toast';
+
+const ToastContainer: React.FC<ShowToastProps> = ({...props}) => {
+    return (
+        <>
+            <Button color='black' label='Toast me!' onClick={() => {
+                showToast({...props});
+            }} />
+        </>
+    );
+};
+
+export default ToastContainer;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/components/settings/general/modals/InviteUserModal.tsx b/ghost/admin-x-settings/src/components/settings/general/modals/InviteUserModal.tsx
index bbf19c4f2c..d1365dad18 100644
--- a/ghost/admin-x-settings/src/components/settings/general/modals/InviteUserModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/modals/InviteUserModal.tsx
@@ -6,6 +6,7 @@ import useRoles from '../../../../hooks/useRoles';
 import useStaffUsers from '../../../../hooks/useStaffUsers';
 import validator from 'validator';
 import {ServicesContext} from '../../../providers/ServiceProvider';
+import {toast} from 'react-hot-toast';
 import {useContext, useEffect, useRef, useState} from 'react';
 
 type RoleType = 'administrator' | 'editor' | 'author' | 'contributor';
@@ -68,6 +69,8 @@ const InviteUserModal = NiceModal.create(() => {
             setInvites([...invites, res.invites[0]]);
 
             setSaveState('saved');
+
+            toast.success('Invitation sent!');
         } catch (e: any) {
             setSaveState('error');
             return;
diff --git a/ghost/admin-x-settings/tailwind.config.cjs b/ghost/admin-x-settings/tailwind.config.cjs
index 24d32b9bd2..6303dd7ccd 100644
--- a/ghost/admin-x-settings/tailwind.config.cjs
+++ b/ghost/admin-x-settings/tailwind.config.cjs
@@ -93,6 +93,37 @@ module.exports = {
             none: '0 0 #0000'
         },
         extend: {
+            keyframes: {
+                toasterIn: {
+                    '0.00%': {
+                        opacity: '0',
+                        transform: 'translateX(-232.05px)'
+                    },
+                    '26.52%': {
+                        opacity: '0.5',
+                        transform: 'translateX(5.90px)'
+                    },
+                    '63.26%': {
+                        opacity: '1',
+                        transform: 'translateX(-1.77px)'
+                    },
+                    '100.00%': {
+                        transform: 'translateX(0px)'
+                    }
+                },
+                toasterOut: {
+                    '0%': {
+                        opacity: '1'
+                    },
+                    '100%': {
+                        opacity: '0'
+                    }
+                }
+            },
+            animation: {
+                'toaster-in': 'toasterIn 0.8s cubic-bezier(0.445, 0.050, 0.550, 0.950)',
+                'toaster-out': 'toasterOut 0.4s 0s 1 ease forwards'
+            },
             spacing: {
                 px: '1px',
                 0: '0px',