diff --git a/.changeset/flat-days-double.md b/.changeset/flat-days-double.md
new file mode 100644
index 00000000000..de568fa4497
--- /dev/null
+++ b/.changeset/flat-days-double.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Update KaizenProvider to await document before rendering ToastNotificationsList
diff --git a/packages/components/src/KaizenProvider/KaizenProvider.tsx b/packages/components/src/KaizenProvider/KaizenProvider.tsx
index 0655ad217cd..5348cf495ad 100644
--- a/packages/components/src/KaizenProvider/KaizenProvider.tsx
+++ b/packages/components/src/KaizenProvider/KaizenProvider.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
import { ToastNotificationsList } from "~components/Notification"
import { ToastNotificationProvider } from "~components/Notification/ToastNotification/context/ToastNotificationContext"
import { FontDefinitions } from "./subcomponents/FontDefinitions"
@@ -12,16 +12,30 @@ export type KaizenProviderProps = {
export const KaizenProvider = ({
children,
locale = "en",
-}: KaizenProviderProps): JSX.Element => (
-
- <>
-
-
- {children}
-
-
- >
-
-)
+}: KaizenProviderProps): JSX.Element => {
+ const [documentIsAvailable, setDocumentIsAvailable] = useState(false)
+ const [notificationsList, setNotificationsList] = useState()
+
+ useEffect(() => {
+ // SSR does not have a document, which is required for ToastNotificationsList.
+ // Await document render before rendering the component.
+ if (document !== undefined) {
+ setNotificationsList()
+ setDocumentIsAvailable(true)
+ }
+ }, [documentIsAvailable])
+
+ return (
+
+ <>
+
+ {notificationsList}
+ {children}
+
+
+ >
+
+ )
+}
KaizenProvider.displayName = "KaizenProvider"