diff --git a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
index 8c1092a1..0d835cbc 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/DetailPanel.jsx
@@ -35,6 +35,7 @@ import {
   clearProductDetail,
   getProductOptionId,
 } from '../../actions/productActions';
+import { clearAllToasts } from '../../actions/toastActions';
 import TBody from '../../components/TBody/TBody';
 import TPanel from '../../components/TPanel/TPanel';
 import { panel_names } from '../../utils/Config';
@@ -180,6 +181,10 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
     [dispatch, panelInfo, panels]
   );
 
+  const onBackButtonFocus = useCallback(() => {
+    dispatch(clearAllToasts());
+  },[dispatch])
+
   const handleScrollToSection = useCallback(
     (sectionId) => {
       console.log('DetailPanel: handleScrollToSection called with:', sectionId);
@@ -681,6 +686,7 @@ export default function DetailPanel({ panelInfo, isOnTop, spotlightId }) {
           title={headerTitle}
           onBackButton
           onClick={onClick(false)}
+          onBackButtonFocus={onBackButtonFocus}
           spotlightDisabled={isLoading}
           onSpotlightUp={onSpotlightUpTButton}
           onSpotlightLeft={onSpotlightUpTButton}
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
index 51dcff1e..e6dcf6a4 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/THeaderCustom.jsx
@@ -28,6 +28,7 @@ export default function THeaderCustom({
   onBackButton,
   onSpotlightUp,
   onSpotlightLeft,
+  onBackButtonFocus,
   marqueeDisabled = true,
   onClick,
   ariaLabel,
@@ -65,12 +66,19 @@ export default function THeaderCustom({
     }
   };
 
+  const _onBackButtonFocus = useCallback(() => {
+    if(onBackButtonFocus){
+      onBackButtonFocus();
+    }
+  },[onBackButtonFocus])
+
   return (
     <Container className={classNames(css.tHeaderCustom, className)} {...rest}>
       {onBackButton && (
         <SpottableComponent
           className={css.button}
           onClick={_onClick}
+          onFocus={_onBackButtonFocus}
           spotlightId={"spotlightId_backBtn"}
           onSpotlightUp={_onSpotlightUp}
           onSpotlightLeft={_onSpotlightLeft}