diff --git a/src/styles.css b/src/styles.css
index b9eba57..75720e5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -425,7 +425,7 @@
 
 [data-sileo-viewport] {
 	position: fixed;
-	z-index: 50;
+	z-index: 9999;
 	display: flex;
 	gap: 0.75rem;
 	padding: 0.75rem;
diff --git a/src/toast.tsx b/src/toast.tsx
index 1dc7647..171da84 100644
--- a/src/toast.tsx
+++ b/src/toast.tsx
@@ -8,6 +8,7 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { createPortal } from "react-dom";
 import { Sileo } from "./sileo";
 import {
 	SILEO_POSITIONS,
@@ -227,6 +228,9 @@ export function Toaster({
 }: SileoToasterProps) {
 	const [toasts, setToasts] = useState<SileoItem[]>(store.toasts);
 	const [activeId, setActiveId] = useState<string>();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => setMounted(true), []);
 
 	const hoverRef = useRef(false);
 	const timersRef = useRef(new Map<string, number>());
@@ -390,54 +394,56 @@ export function Toaster({
 		return map;
 	}, [toasts, position]);
 
+	const viewports = SILEO_POSITIONS.map((pos) => {
+		const items = byPosition[pos];
+		if (!items?.length) return null;
+
+		const pill = pillAlign(pos);
+		const expand = expandDir(pos);
+
+		return (
+			<section
+				key={pos}
+				data-sileo-viewport
+				data-position={pos}
+				aria-live="polite"
+				style={getViewportStyle(pos)}
+			>
+				{items.map((item) => {
+					const h = getHandlers(item.id);
+					return (
+						<Sileo
+							key={item.id}
+							id={item.id}
+							state={item.state}
+							title={item.title}
+							description={item.description}
+							position={pill}
+							expand={expand}
+							icon={item.icon}
+							fill={item.fill}
+							styles={item.styles}
+							button={item.button}
+							roundness={item.roundness}
+							exiting={item.exiting}
+							autoExpandDelayMs={item.autoExpandDelayMs}
+							autoCollapseDelayMs={item.autoCollapseDelayMs}
+							refreshKey={item.instanceId}
+							canExpand={activeId === undefined || activeId === item.id}
+							onMouseEnter={h.enter}
+							onMouseLeave={h.leave}
+							onDismiss={h.dismiss}
+						/>
+					);
+				})}
+			</section>
+		);
+	});
+
 	return (
 		<>
 			{children}
-			{SILEO_POSITIONS.map((pos) => {
-				const items = byPosition[pos];
-				if (!items?.length) return null;
-
-				const pill = pillAlign(pos);
-				const expand = expandDir(pos);
-
-				return (
-					<section
-						key={pos}
-						data-sileo-viewport
-						data-position={pos}
-						aria-live="polite"
-						style={getViewportStyle(pos)}
-					>
-						{items.map((item) => {
-							const h = getHandlers(item.id);
-							return (
-								<Sileo
-									key={item.id}
-									id={item.id}
-									state={item.state}
-									title={item.title}
-									description={item.description}
-									position={pill}
-									expand={expand}
-									icon={item.icon}
-									fill={item.fill}
-									styles={item.styles}
-									button={item.button}
-									roundness={item.roundness}
-									exiting={item.exiting}
-									autoExpandDelayMs={item.autoExpandDelayMs}
-									autoCollapseDelayMs={item.autoCollapseDelayMs}
-									refreshKey={item.instanceId}
-									canExpand={activeId === undefined || activeId === item.id}
-									onMouseEnter={h.enter}
-									onMouseLeave={h.leave}
-									onDismiss={h.dismiss}
-								/>
-							);
-						})}
-					</section>
-				);
-			})}
+			{mounted && createPortal(<>{viewports}</>, document.body)}
 		</>
 	);
 }