diff --git a/plugins/app/src/components/Toast/Toast.module.css b/plugins/app/src/components/Toast/Toast.module.css
index eeb6e92084..4111ce9c23 100644
--- a/plugins/app/src/components/Toast/Toast.module.css
+++ b/plugins/app/src/components/Toast/Toast.module.css
@@ -45,16 +45,7 @@
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  padding: var(--bui-space-4);
-  gap: var(--bui-space-3);
 
-  /* Appearance */
-  border-radius: var(--bui-radius-3);
-  background-color: var(--bui-bg-surface-1);
-  font-family: var(--bui-font-regular);
-  font-size: var(--bui-font-size-3);
   outline: none;
   cursor: default;
   user-select: none;
@@ -64,13 +55,25 @@
   /* Stacking */
   z-index: calc(1000 - var(--toast-index));
   transform-origin: bottom center;
+}
 
-  /* Shadow */
-  box-shadow: 0 4px 12px -2px rgba(0 0 0 / 0.4);
+.surface {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--bui-space-4);
+  gap: var(--bui-space-3);
+  border-radius: var(--bui-radius-3);
+  font-size: var(--bui-font-size-3);
+  background-color: var(--bui-bg-app);
+  border: 1px solid var(--bui-border-1);
+  color: var(--bui-fg-primary);
+  box-shadow: var(--bui-shadow);
 }
 
 .toast:focus-visible {
-  outline: 2px solid var(--bui-border-focus);
+  outline: 2px solid var(--bui-ring);
   outline-offset: 2px;
 }
 
@@ -211,14 +214,14 @@
 }
 
 .closeButton:hover {
-  background-color: var(--bui-bg-neutral-on-surface-1-hover);
+  background-color: var(--bui-bg-neutral-1-hover);
 }
 
 .closeButton:focus-visible {
-  outline: 2px solid var(--bui-border-focus);
+  outline: 2px solid var(--bui-ring);
   outline-offset: 1px;
 }
 
 .closeButton:active {
-  background-color: var(--bui-bg-neutral-on-surface-1-pressed);
+  background-color: var(--bui-bg-neutral-1-pressed);
 }
diff --git a/plugins/app/src/components/Toast/Toast.tsx b/plugins/app/src/components/Toast/Toast.tsx
index 331a53958a..3f81629c38 100644
--- a/plugins/app/src/components/Toast/Toast.tsx
+++ b/plugins/app/src/components/Toast/Toast.tsx
@@ -18,6 +18,7 @@ import { forwardRef, Ref, useRef, useLayoutEffect, useState } from 'react';
 import { useToast } from '@react-aria/toast';
 import { useButton } from '@react-aria/button';
 import { motion } from 'motion/react';
+import { Box } from '@backstage/ui';
 import {
   RiInformationLine,
   RiCheckLine,
@@ -27,6 +28,8 @@ import {
 } from '@remixicon/react';
 import type { ToastApiMessageProps } from './types';
 import styles from './Toast.module.css';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { BgReset } from '../../../../../packages/ui/src/hooks/useBg';
 
 // Track which toasts are being manually closed (vs auto-timeout)
 // This allows different exit animations for each case
@@ -225,34 +228,40 @@ export const Toast = forwardRef(
         transition={{ type: 'spring', stiffness: 400, damping: 35 }}
         data-status={finalStatus}
       >
-        <div className={styles.wrapper}>
-          {statusIcon && <div className={styles.icon}>{statusIcon}</div>}
-          <div className={styles.content}>
-            <div {...titleProps} className={styles.title}>
-              {content.title}
-            </div>
-            {content.description && (
-              <div className={styles.description}>{content.description}</div>
-            )}
-            {content.links && content.links.length > 0 && (
-              <div className={styles.links}>
-                {content.links.map(link => (
-                  <a key={link.href} href={link.href}>
-                    {link.label}
-                  </a>
-                ))}
+        <BgReset>
+          <Box className={styles.surface}>
+            <div className={styles.wrapper}>
+              {statusIcon && <div className={styles.icon}>{statusIcon}</div>}
+              <div className={styles.content}>
+                <div {...titleProps} className={styles.title}>
+                  {content.title}
+                </div>
+                {content.description && (
+                  <div className={styles.description}>
+                    {content.description}
+                  </div>
+                )}
+                {content.links && content.links.length > 0 && (
+                  <div className={styles.links}>
+                    {content.links.map(link => (
+                      <a key={link.href} href={link.href}>
+                        {link.label}
+                      </a>
+                    ))}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
-        {/* eslint-disable-next-line react/forbid-elements */}
-        <button
-          {...buttonProps}
-          ref={closeButtonRef}
-          className={styles.closeButton}
-        >
-          <RiCloseLine aria-hidden="true" />
-        </button>
+            </div>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <button
+              {...buttonProps}
+              ref={closeButtonRef}
+              className={styles.closeButton}
+            >
+              <RiCloseLine aria-hidden="true" />
+            </button>
+          </Box>
+        </BgReset>
       </motion.div>
     );
   },