diff --git a/editor/src/components/canvas/canvas-floating-toolbars.tsx b/editor/src/components/canvas/canvas-floating-toolbars.tsx
index 87e1e7041f26..938290b89427 100644
--- a/editor/src/components/canvas/canvas-floating-toolbars.tsx
+++ b/editor/src/components/canvas/canvas-floating-toolbars.tsx
@@ -6,6 +6,7 @@ import { ErrorOverlayComponent } from './canvas-error-overlay'
 import { SafeModeErrorOverlay } from './canvas-wrapper-component'
 import { CanvasStrategyPicker } from './controls/select-mode/canvas-strategy-picker'
 import { TestMenu } from '../titlebar/test-menu'
+import { ToastRenderer } from '../editor/editor-component'
 
 export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSProperties }) => {
   const safeMode = useEditorState(
@@ -43,6 +44,9 @@ export const CanvasFloatingToolbars = React.memo((props: { style: React.CSSPrope
           <CanvasStrategyPicker />
         </FlexRow>
       </FlexRow>
+      <FlexRow style={{ marginTop: 'auto', marginBottom: '6.5px' }}>
+        <ToastRenderer />
+      </FlexRow>
       {/* The error overlays are deliberately the last here so they hide other canvas UI, except the test menu */}
       {safeMode ? <SafeModeErrorOverlay /> : <ErrorOverlayComponent />}
       <TestMenu />
diff --git a/editor/src/components/editor/editor-component.tsx b/editor/src/components/editor/editor-component.tsx
index c7bcd6d1cbe1..a712edca6ee0 100644
--- a/editor/src/components/editor/editor-component.tsx
+++ b/editor/src/components/editor/editor-component.tsx
@@ -645,6 +645,7 @@ export const ToastRenderer = React.memo(() => {
   return (
     <FlexColumn
       key={'toast-stack'}
+      data-testid={'toast-stack'}
       style={{
         zIndex: 100,
         gap: 10,