diff --git a/apps/storefront/index.html b/apps/storefront/index.html
index bce9eb4a..1c6f179f 100644
--- a/apps/storefront/index.html
+++ b/apps/storefront/index.html
@@ -63,9 +63,55 @@ <h1>Ugly Cornerstone Store Theme with Weird CSS</h1>
     </div>
     <div id="b2bRemoveOrAdd">onclick(remove/add)</div>
     <div>
-      <div id="form-action-addToCart">
-        <p>12312313</p>
-      </div>
+      <form class="form" method="post" action="https://storefront-staging.mybigcommerce.com/cart.php" enctype="multipart/form-data" data-cart-item-add="">
+        <input type="hidden" name="action" value="add">
+        <input type="hidden" name="product_id" value="97">
+        <div data-product-option-change="" style="">
+
+        </div>
+        <div class="form-field form-field--stock u-hiddenVisually">
+            <label class="form-label form-label--alternate">
+                Current Stock:
+                <span data-product-stock=""></span>
+            </label>
+        </div>
+        <div id="add-to-cart-wrapper" class="add-to-cart-wrapper">
+
+        <div class="form-field form-field--increments">
+            <label class="form-label form-label--alternate" for="qty[]">Quantity:</label>
+                <div class="form-increment" data-quantity-change="">
+                    <button class="button button--icon" data-action="dec">
+                        <span class="is-srOnly">Decrease Quantity of [Sample] Tiered Wire Basket</span>
+                        <i class="icon" aria-hidden="true">
+                            <svg>
+                                <use xlink:href="#icon-keyboard-arrow-down"></use>
+                            </svg>
+                        </i>
+                    </button>
+                    <input class="form-input form-input--incrementTotal" id="qty[]" name="qty[]" type="tel" value="1" data-quantity-min="0" data-quantity-max="0" min="1" pattern="[0-9]*" aria-live="polite">
+                    <button class="button button--icon" data-action="inc">
+                        <span class="is-srOnly">Increase Quantity of [Sample] Tiered Wire Basket</span>
+                        <i class="icon" aria-hidden="true">
+                            <svg>
+                                <use xlink:href="#icon-keyboard-arrow-up"></use>
+                            </svg>
+                        </i>
+                    </button>
+                <span style="display: none;"></span></div>
+        </div>
+
+        <div class="alertBox productAttributes-message" style="display:none">
+        <div class="alertBox-column alertBox-icon">
+            <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
+        </div>
+        <p class="alertBox-column alertBox-message"></p>
+        </div>
+        <div class="form-action">
+            <input id="form-action-addToCart" data-wait-message="Adding to cart…" class="button button--primary" type="submit" value="Add to Cart">
+            <span class="product-status-message aria-description--hidden">Adding to cart… The item has been added</span>
+        </div>
+        </div>
+      </form>
     </div>
     <style>
       body {
diff --git a/apps/storefront/src/App.tsx b/apps/storefront/src/App.tsx
index 2cbb45f2..ce7d0963 100644
--- a/apps/storefront/src/App.tsx
+++ b/apps/storefront/src/App.tsx
@@ -96,6 +96,14 @@ export default function App() {
     } else {
       document.body.style.height = defaultHeight
       document.body.style.overflow = defaultOverflow
+      dispatch({
+        type: 'common',
+        payload: {
+          tipMessage: {
+            msgs: [],
+          },
+        },
+      })
     }
   }, [isOpen])
 
@@ -242,7 +250,6 @@ export default function App() {
           {isOpen ? (
             <B3RenderRouter setOpenPage={setOpenPage} />
           ) : null}
-          {/* <PDP /> */}
         </ThemeFrame>
       </div>
     </HashRouter>
diff --git a/apps/storefront/src/components/B3Tip.tsx b/apps/storefront/src/components/B3Tip.tsx
index 1232f524..e34ec73a 100644
--- a/apps/storefront/src/components/B3Tip.tsx
+++ b/apps/storefront/src/components/B3Tip.tsx
@@ -39,6 +39,7 @@ export const B3Tip = ({
             <Alert
               sx={{
                 width: '100%',
+                alignItems: 'center',
                 '& button[title="Close"]': {
                   display: `${handleItemClose ? 'block' : 'none'}`,
                 },
@@ -48,7 +49,9 @@ export const B3Tip = ({
               onClose={() => handleItemClose && handleItemClose(msg.id)}
             >
               {msg?.title && <AlertTitle>{msg.title}</AlertTitle>}
-              {msg.msg}
+              {
+                msg.jsx ? msg.jsx() : msg.msg
+              }
             </Alert>
           ))
         }
diff --git a/apps/storefront/src/components/layout/B3LayoutTip.tsx b/apps/storefront/src/components/layout/B3LayoutTip.tsx
index aae43a3d..9ee09a1a 100644
--- a/apps/storefront/src/components/layout/B3LayoutTip.tsx
+++ b/apps/storefront/src/components/layout/B3LayoutTip.tsx
@@ -53,7 +53,7 @@ const B3LayoutTip = () => {
 
   const {
     msgs = [],
-    autoHideDuration = 13000,
+    autoHideDuration = 3000,
     vertical = `${isMobile ? 'top' : 'top'}`,
     horizontal = 'right',
     isClose = false,
diff --git a/apps/storefront/src/components/spin/B3Sping.tsx b/apps/storefront/src/components/spin/B3Sping.tsx
index a12b49ee..7e6126e1 100644
--- a/apps/storefront/src/components/spin/B3Sping.tsx
+++ b/apps/storefront/src/components/spin/B3Sping.tsx
@@ -23,6 +23,7 @@ interface B3SpingProps {
   thickness?: number & undefined,
   isCloseLoading?: Boolean,
   background?: string,
+  spinningHeight?: number,
 }
 
 export const B3Sping = (props: B3SpingProps) => {
@@ -34,12 +35,15 @@ export const B3Sping = (props: B3SpingProps) => {
     thickness,
     isCloseLoading,
     background,
+    spinningHeight,
   } = props
 
   const [isMobile] = useMobile()
 
   return (
-    <SpinContext>
+    <SpinContext
+      height={spinningHeight}
+    >
       {
       isSpinning && (
         <SpinCenter
diff --git a/apps/storefront/src/components/spin/styled.ts b/apps/storefront/src/components/spin/styled.ts
index 35208935..8b75f328 100644
--- a/apps/storefront/src/components/spin/styled.ts
+++ b/apps/storefront/src/components/spin/styled.ts
@@ -27,12 +27,25 @@ const SpinTip = styled.div({
   marginTop: '12px',
 })
 
-const SpinContext = styled.div({
+styled('div')(() => ({
   position: 'relative',
   height: '100%',
   width: '100%',
   display: 'flex',
-})
+}))
+
+interface SpinContextProps {
+  height?: number,
+}
+
+const SpinContext = styled('div')(({
+  height,
+}: SpinContextProps) => ({
+  position: 'relative',
+  height: height || '100%',
+  width: '100%',
+  display: 'flex',
+}))
 
 export {
   SpinCenter,
diff --git a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx
index f5c8d6ea..1d587f1a 100644
--- a/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx
+++ b/apps/storefront/src/pages/orderDetail/components/OrderShoppingList.tsx
@@ -173,7 +173,9 @@ export const OrderShoppingList = (props: orderShoppingListProps) => {
                     className={activeId === item.node.id ? 'active' : ''}
                     onClick={handleListItemClicked(item)}
                   >
-                    <ListItemText>{item.node.name}</ListItemText>
+                    <ListItemText>
+                      {item.node.name}
+                    </ListItemText>
                   </ShoppingListMenuItem>
                 ))
               }
diff --git a/apps/storefront/src/pages/pdp/PDP.tsx b/apps/storefront/src/pages/pdp/PDP.tsx
index 035d72ee..eba05a23 100644
--- a/apps/storefront/src/pages/pdp/PDP.tsx
+++ b/apps/storefront/src/pages/pdp/PDP.tsx
@@ -3,12 +3,21 @@ import {
   useState,
   Dispatch,
   SetStateAction,
+  useRef,
 } from 'react'
 
+import {
+  Button,
+  Box,
+} from '@mui/material'
+
 import type {
   OpenPageState,
 } from '@b3/hooks'
 
+import {
+  useNavigate,
+} from 'react-router-dom'
 import {
   B3SStorage,
   snackbar,
@@ -29,6 +38,10 @@ interface PDPProps {
   setOpenPage: Dispatch<SetStateAction<OpenPageState>>,
 }
 
+interface PDPRefProps {
+  timer: null | number,
+}
+
 const serialize = (form: any) => {
   const arr: any = {}
   for (let i = 0; i < form.elements.length; i += 1) {
@@ -81,29 +94,77 @@ const PDP = ({
 }: PDPProps) => {
   const isPromission = true
 
+  const pdpRef = useRef<PDPRefProps>({
+    timer: null,
+  })
+
   const [openShoppingList, setOpenShoppingList] = useState<boolean>(false)
   const [isOpenCreateShopping, setIsOpenCreateShopping] = useState<boolean>(false)
 
   const [isRequestLoading, setIsRequestLoading] = useState<boolean>(false)
 
+  const navigate = useNavigate()
+
   useEffect(() => {
     setOpenShoppingList(true)
   }, [])
 
-  const handleShoppingClose = () => {
-    setOpenShoppingList(false)
-    setIsOpenCreateShopping(false)
-    setOpenPage({
-      isOpen: false,
-    })
+  const handleShoppingClose = (isTrue?: boolean) => {
+    if (isTrue) {
+      setOpenShoppingList(false)
+      setIsOpenCreateShopping(false)
+      pdpRef.current.timer = window.setTimeout(() => {
+        setOpenPage({
+          isOpen: false,
+        })
+      }, 4000)
+    } else {
+      setOpenShoppingList(false)
+      setIsOpenCreateShopping(false)
+      setOpenPage({
+        isOpen: false,
+      })
+    }
   }
+
+  const gotoShoppingDetail = (id: string | number) => {
+    if (pdpRef.current?.timer) clearTimeout(pdpRef.current.timer)
+    navigate(`/shoppingList/${id}`)
+  }
+
+  const tip = (id: string | number) => (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          mr: '15px',
+        }}
+      >
+        Products are added to shopping list
+
+      </Box>
+      <Button
+        onClick={() => gotoShoppingDetail(id)}
+        variant="text"
+      >
+        view shoppping list
+      </Button>
+    </Box>
+  )
+
   const handleShoppingConfirm = async (id: string | number) => {
     try {
       setIsRequestLoading(true)
       const productId = (document.querySelector('input[name=product_id]') as any)?.value
       const qty = (document.querySelector('[name="qty[]"]') as any)?.value ?? 1
       const sku = (document.querySelector('[data-product-sku]')?.innerHTML ?? '').trim()
-
+      // const productId = '97'
+      // const qty = '1'
+      // const sku = 'TWB'
       const form = document.querySelector('form[data-cart-item-add]')
 
       const getDefaultCurrencyInfo = () => {
@@ -147,8 +208,11 @@ const PDP = ({
         shoppingListId: +id,
         items: [params],
       })
-      snackbar.success('Products are added to shopping list')
-      handleShoppingClose()
+      snackbar.success('Products are added to shopping list', {
+        jsx: () => tip(id),
+        isClose: true,
+      })
+      handleShoppingClose(true)
     } finally {
       setOpenShoppingList(false)
     }
diff --git a/apps/storefront/src/shared/global/context/config.ts b/apps/storefront/src/shared/global/context/config.ts
index d71b97cb..c4c92ebe 100644
--- a/apps/storefront/src/shared/global/context/config.ts
+++ b/apps/storefront/src/shared/global/context/config.ts
@@ -1,5 +1,6 @@
 import {
   Dispatch,
+  ReactElement,
   ReactNode,
 } from 'react'
 
@@ -17,7 +18,8 @@ export interface CustomerInfo {
 export type AlertTip = 'error' | 'info' | 'success' | 'warning'
 export interface MsgsProps {
   title?: string,
-  msg: string,
+  msg?: string,
+  jsx?: () => ReactElement,
   id: string | number,
   type: AlertTip
 }
diff --git a/apps/storefront/src/utils/b3Tip.ts b/apps/storefront/src/utils/b3Tip.ts
index 6dd1e3f8..bf1357d1 100644
--- a/apps/storefront/src/utils/b3Tip.ts
+++ b/apps/storefront/src/utils/b3Tip.ts
@@ -1,27 +1,37 @@
+import {
+  ReactElement,
+} from 'react'
 import {
   v1 as uuid,
 } from 'uuid'
 
+interface SnackbarItemProps {
+  duration?: number,
+  jsx?: () => ReactElement,
+  isClose?: boolean,
+}
+
 interface SnackbarProps {
-  [key: string]: (message: string, duration?: number) => void
+  [key: string]: (message: string, options?: SnackbarItemProps) => void
 }
 
 const snackbar: SnackbarProps = {}
 const variants = ['error', 'success', 'info', 'warning']
 
 variants.forEach((variant) => {
-  snackbar[variant] = (message = `${variant} without any info.`, duration = 3000) => {
+  snackbar[variant] = (message, options) => {
     window.tipDispatch({
       type: 'common',
       payload: {
         tipMessage: {
-          autoHideDuration: duration,
-          isClose: false,
+          autoHideDuration: options?.duration || 3000,
+          isClose: options?.isClose || false,
           msgs: [
             {
               id: uuid(),
               type: variant,
-              msg: message,
+              msg: message || `${variant} without any info.`,
+              jsx: options?.jsx,
             },
           ],
         },
diff --git a/packages/hooks/useB3PDPOpen.ts b/packages/hooks/useB3PDPOpen.ts
index 5610ce24..e892f658 100644
--- a/packages/hooks/useB3PDPOpen.ts
+++ b/packages/hooks/useB3PDPOpen.ts
@@ -14,6 +14,7 @@ export const useB3PDPOpen = (el: string, cd: () => void, isB2BUser: boolean, rol
     const addToCartAll = document.querySelectorAll(el)
     const wishlistSdd = document.querySelector('form[data-wishlist-add]')
     let shoppingBtnDom: CustomFieldItems | null = null
+    console.log(addToCartAll.length, document.querySelectorAll('#shoppingListBtn').length)
     if (!addToCartAll.length) return
     if (document.querySelectorAll('#shoppingListBtn').length) return
     if (isB2BUser && (+role === 0 || +role === 1)) {