diff --git a/apps/web/src/assets/icons/alert-octagon.svg b/apps/web/src/assets/icons/alert-octagon.svg
new file mode 100644
index 0000000000..2292351802
--- /dev/null
+++ b/apps/web/src/assets/icons/alert-octagon.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M7.15289 1.29289C7.34043 1.10536 7.59478 1 7.86 1H16.14C16.4052 1 16.6596 1.10536 16.8471 1.29289L22.7071 7.15289C22.8946 7.34043 23 7.59478 23 7.86V16.14C23 16.4052 22.8946 16.6596 22.7071 16.8471L16.8471 22.7071C16.6596 22.8946 16.4052 23 16.14 23H7.86C7.59478 23 7.34043 22.8946 7.15289 22.7071L1.29289 16.8471C1.10536 16.6596 1 16.4052 1 16.14V7.86C1 7.59478 1.10536 7.34043 1.29289 7.15289L7.15289 1.29289ZM8.27421 3L3 8.27421V15.7258L8.27421 21H15.7258L21 15.7258V8.27421L15.7258 3H8.27421Z"
+    fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12 7C12.5523 7 13 7.44772 13 8V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V8C11 7.44772 11.4477 7 12 7Z"
+    fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M11 16C11 15.4477 11.4477 15 12 15H12.01C12.5623 15 13.01 15.4477 13.01 16C13.01 16.5523 12.5623 17 12.01 17H12C11.4477 17 11 16.5523 11 16Z"
+    fill="currentColor" />
+</svg>
diff --git a/apps/web/src/assets/icons/alert-triangle.svg b/apps/web/src/assets/icons/alert-triangle.svg
new file mode 100644
index 0000000000..c5b5680189
--- /dev/null
+++ b/apps/web/src/assets/icons/alert-triangle.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M10.528 2.2833C10.9773 2.03035 11.4842 1.89746 11.9998 1.89746C12.5154 1.89746 13.0223 2.03035 13.4716 2.2833C13.9209 2.53626 14.2974 2.90074 14.5648 3.34158L14.5677 3.34633L23.0376 17.4863L23.0458 17.5001C23.3077 17.9538 23.4463 18.4681 23.4478 18.9919C23.4493 19.5158 23.3135 20.0308 23.0541 20.4859C22.7947 20.941 22.4207 21.3203 21.9692 21.5859C21.5177 21.8516 21.0046 21.9944 20.4808 22.0001L20.4698 22.0003L3.51879 22.0002C2.99498 21.9944 2.48182 21.8516 2.03035 21.5859C1.57887 21.3203 1.20483 20.941 0.945426 20.4859C0.686022 20.0308 0.550303 19.5158 0.55177 18.9919C0.553236 18.4681 0.691839 17.9538 0.953786 17.5001L0.961909 17.4863L9.43191 3.34633L10.2898 3.86019L9.43478 3.34158C9.70218 2.90074 10.0787 2.53626 10.528 2.2833ZM11.146 4.37684L2.68246 18.506C2.59729 18.6558 2.55224 18.8251 2.55176 18.9975C2.55127 19.1721 2.59651 19.3438 2.68298 19.4955C2.76945 19.6472 2.89413 19.7736 3.04462 19.8622C3.1938 19.95 3.36317 19.9975 3.53617 20.0002H20.4634C20.6364 19.9975 20.8058 19.95 20.9549 19.8622C21.1054 19.7736 21.2301 19.6472 21.3166 19.4955C21.403 19.3438 21.4483 19.1721 21.4478 18.9975C21.4473 18.8251 21.4023 18.6559 21.3171 18.5061L12.8548 4.37883C12.8544 4.37817 12.854 4.37751 12.8536 4.37684C12.7645 4.23079 12.6395 4.11001 12.4904 4.02607C12.3406 3.94176 12.1716 3.89746 11.9998 3.89746C11.8279 3.89746 11.6589 3.94176 11.5092 4.02607C11.3601 4.11001 11.235 4.23079 11.146 4.37684Z"
+    fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M12 8C12.5523 8 13 8.44772 13 9V13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13V9C11 8.44772 11.4477 8 12 8Z"
+    fill="currentColor" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M11 17C11 16.4477 11.4477 16 12 16H12.01C12.5623 16 13.01 16.4477 13.01 17C13.01 17.5523 12.5623 18 12.01 18H12C11.4477 18 11 17.5523 11 17Z"
+    fill="currentColor" />
+</svg>
diff --git a/apps/web/src/assets/icons/index.ts b/apps/web/src/assets/icons/index.ts
index f60d24e7f0..4655aaa33d 100644
--- a/apps/web/src/assets/icons/index.ts
+++ b/apps/web/src/assets/icons/index.ts
@@ -1,5 +1,7 @@
 export { default as AddContactIcon } from "./add-contact-s.svg";
 export { default as AlertCircleIcon } from "./alert-circle.svg";
+export { default as AlertTriangleIcon } from "./alert-triangle.svg";
+export { default as AlertOctagonIcon } from "./alert-octagon.svg";
 export { default as AlertIcon } from "./alert.svg";
 export { default as ArrowDownLeftIcon } from "./arrow-down-left.svg";
 export { default as ArrowLeftCircleIcon } from "./arrow-left-circle.svg";
diff --git a/apps/web/src/components/CustomToast/CustomToast.tsx b/apps/web/src/components/CustomToast/CustomToast.tsx
new file mode 100644
index 0000000000..260ea994bf
--- /dev/null
+++ b/apps/web/src/components/CustomToast/CustomToast.tsx
@@ -0,0 +1,77 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Flex,
+  Icon,
+  IconButton,
+  type UseToastOptions,
+} from "@chakra-ui/react";
+import { type ReactNode } from "react";
+
+import {
+  AlertCircleIcon,
+  AlertOctagonIcon,
+  AlertTriangleIcon,
+  CheckCircleIcon,
+  CloseIcon,
+} from "../../assets/icons";
+import { useColor } from "../../styles/useColor";
+
+type CustomToastProps = {
+  onClose: () => void;
+} & UseToastOptions;
+
+export const CustomToast = (props: CustomToastProps): ReactNode => {
+  const color = useColor();
+
+  const { status, id, title, isClosable, onClose, description } = props;
+
+  const ids = id
+    ? {
+        root: `toast-${id}`,
+        title: `toast-${id}-title`,
+        description: `toast-${id}-description`,
+      }
+    : undefined;
+
+  const AlertIcon = () => {
+    switch (props.status) {
+      case "info":
+        return <AlertCircleIcon />;
+      case "success":
+        return <CheckCircleIcon />;
+      case "error":
+        return <AlertTriangleIcon />;
+      case "warning":
+        return <AlertOctagonIcon />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Alert addRole={false} id={ids?.root} status={status}>
+      <Icon as={AlertIcon} />
+      <Flex width="full" marginLeft="6px">
+        {title && <AlertTitle id={ids?.title}>{title}</AlertTitle>}
+        {description && (
+          <AlertDescription marginRight="12px" id={ids?.description}>
+            {description}
+          </AlertDescription>
+        )}
+      </Flex>
+      {isClosable && (
+        <IconButton
+          boxSize="24px"
+          marginLeft="auto"
+          color={color("400")}
+          aria-label="Close toast"
+          icon={<CloseIcon />}
+          onClick={onClose}
+          variant="empty"
+        />
+      )}
+    </Alert>
+  );
+};
diff --git a/apps/web/src/components/CustomToast/index.ts b/apps/web/src/components/CustomToast/index.ts
new file mode 100644
index 0000000000..b4778eaf41
--- /dev/null
+++ b/apps/web/src/components/CustomToast/index.ts
@@ -0,0 +1 @@
+export * from "./CustomToast";
diff --git a/apps/web/src/providers/UmamiTheme.tsx b/apps/web/src/providers/UmamiTheme.tsx
index cf6fbdd390..8c13543b1b 100644
--- a/apps/web/src/providers/UmamiTheme.tsx
+++ b/apps/web/src/providers/UmamiTheme.tsx
@@ -3,6 +3,7 @@ import { Global, css } from "@emotion/react";
 import { type PropsWithChildren } from "react";
 import "focus-visible/dist/focus-visible";
 
+import { CustomToast } from "../components/CustomToast/CustomToast";
 import theme from "../styles/theme";
 
 const GlobalStyles = css`
@@ -17,7 +18,14 @@ const GlobalStyles = css`
 `;
 
 export const UmamiTheme = ({ children }: PropsWithChildren) => (
-  <ChakraProvider theme={theme}>
+  <ChakraProvider
+    theme={theme}
+    toastOptions={{
+      defaultOptions: {
+        render: CustomToast,
+      },
+    }}
+  >
     <Global styles={GlobalStyles} />
     <ColorModeScript initialColorMode={theme.config.initialColorMode} />
     {children}
diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts
index b860568a0a..19fce1f1a0 100644
--- a/apps/web/src/styles/theme.ts
+++ b/apps/web/src/styles/theme.ts
@@ -291,6 +291,36 @@ const theme = extendTheme({
         },
       }),
     },
+    Alert: {
+      baseStyle: (props: StyleFunctionProps) => {
+        let accentColor;
+
+        switch (props.status) {
+          case "success":
+            accentColor = light.green;
+            break;
+          case "warning":
+          case "error":
+            accentColor = light.redDark;
+            break;
+          default:
+            accentColor = light.grey[400];
+        }
+
+        return {
+          container: {
+            borderRadius: "6px",
+            boxShadow: "0px 0px 8px 0px rgba(45, 55, 72, 0.25)",
+            borderLeft: `4px solid ${accentColor}`,
+            color: accentColor,
+            background: light.grey["white"],
+          },
+          description: {
+            color: light.grey[900],
+          },
+        };
+      },
+    },
     Link: {
       baseStyle: {
         color: "gray.600",