diff --git a/com.twin.app.shoptime/src/style/utils.module.less b/com.twin.app.shoptime/src/style/utils.module.less
index 46a5b096..da51148d 100644
--- a/com.twin.app.shoptime/src/style/utils.module.less
+++ b/com.twin.app.shoptime/src/style/utils.module.less
@@ -8,7 +8,7 @@
 
 .focused(@boxShadow: 0px, @borderRadius: 0px) {
   .position(@position: absolute, @top: 0, @left: 0, @right: 0, @bottom: 0);
-  z-index: 20;
+  z-index: 19;
   border: 4px solid @PRIMARY_COLOR_RED;
   box-shadow: 0 0 @boxShadow 0 rgba(0, 0, 0, 0.5);
   border-radius: @borderRadius;
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
index 342e387b..05fad6f6 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.jsx
@@ -339,7 +339,7 @@ function Indicator({
               <img src={playImg} alt="Play" />
             </h3>
           )}
-          {promotionPrcie?.promotionCode && !canPlayVideo && (
+          {promotionPrcie?.promotionCode && autoPlaying && (
             <div className={css.promotionImage}>
               <p className={css.badgeTitle}>{$L("Extra Promo")}</p>
               <p className={css.badgeTitle}>{$L("Code")}</p>
diff --git a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less
index 87339436..d484969c 100644
--- a/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less
+++ b/com.twin.app.shoptime/src/views/DetailPanel/components/indicator/Indicator.module.less
@@ -74,6 +74,7 @@
       color: #fff;
       text-align: center;
       font-weight: bold;
+      z-index: 20;
 
       > p:nth-child(1) {
         margin-top: 13px;