diff --git a/public/images/wechat-double/bg.png b/public/images/app-twins/bg.png
similarity index 100%
rename from public/images/wechat-double/bg.png
rename to public/images/app-twins/bg.png
diff --git a/public/images/wechat-double/icon-concat.png b/public/images/app-twins/icon-concat.png
similarity index 100%
rename from public/images/wechat-double/icon-concat.png
rename to public/images/app-twins/icon-concat.png
diff --git a/public/images/wechat-double/icon-minus.png b/public/images/app-twins/icon-minus.png
similarity index 100%
rename from public/images/wechat-double/icon-minus.png
rename to public/images/app-twins/icon-minus.png
diff --git a/public/images/wechat-double/icon-safe.png b/public/images/app-twins/icon-safe.png
similarity index 100%
rename from public/images/wechat-double/icon-safe.png
rename to public/images/app-twins/icon-safe.png
diff --git a/public/images/wechat-double/line-left.png b/public/images/app-twins/line-left.png
similarity index 100%
rename from public/images/wechat-double/line-left.png
rename to public/images/app-twins/line-left.png
diff --git a/public/images/wechat-double/line-right.png b/public/images/app-twins/line-right.png
similarity index 100%
rename from public/images/wechat-double/line-right.png
rename to public/images/app-twins/line-right.png
diff --git a/public/images/wechat-double/step1-side.png b/public/images/app-twins/step1-side.png
similarity index 100%
rename from public/images/wechat-double/step1-side.png
rename to public/images/app-twins/step1-side.png
diff --git a/public/images/wechat-double/step2-side.png b/public/images/app-twins/step2-side.png
similarity index 100%
rename from public/images/wechat-double/step2-side.png
rename to public/images/app-twins/step2-side.png
diff --git a/src/api/pay.ts b/src/api/pay.ts
index a0309c4..e463260 100644
--- a/src/api/pay.ts
+++ b/src/api/pay.ts
@@ -9,6 +9,7 @@ export type GoodsItem = {
   price: string
   sign_value: string
   weixinMpOriId: string
+  recommend?: boolean
 }
 
 export type OrderPayload = Record<string, unknown> & {
diff --git a/src/index.css b/src/index.css
index 821fcf5..5550de7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -211,6 +211,42 @@ p {
         background: #FFFFFF;
       }
 
+      .plan-recommend-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 34px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #FF2D2D;
+        border-radius: 0px 8px 0px 8px;
+        pointer-events: none;
+      }
+
+      .plan-recommend-badge span {
+        width: 24px;
+        height: 16px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 16px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+
+      .plan-selected-icon {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 20px;
+        height: 20px;
+        pointer-events: none;
+      }
+
       .plan-price-symbol {
         font-size: 10px;
         transition: color 320ms ease;
diff --git a/src/pages/PayPage.tsx b/src/pages/PayPage.tsx
index 60a6a79..75a4ea7 100644
--- a/src/pages/PayPage.tsx
+++ b/src/pages/PayPage.tsx
@@ -69,6 +69,7 @@ function PayPage() {
       try {
         const { data } = await getGoods()
         const nextGoodsList = Array.isArray(data) ? data : []
+        const recommendIndex = nextGoodsList.findIndex((goods) => goods.recommend)
         const checkedIndex = nextGoodsList.findIndex((goods) => goods.checked)
 
         if (!isMounted) {
@@ -76,7 +77,7 @@ function PayPage() {
         }
 
         setGoodsList(nextGoodsList)
-        setCurrentIndex(checkedIndex >= 0 ? checkedIndex : 0)
+        setCurrentIndex(recommendIndex >= 0 ? recommendIndex : checkedIndex >= 0 ? checkedIndex : 0)
       } catch {
         if (isMounted) {
           setGoodsList([])
@@ -429,6 +430,11 @@ function Plan({
               onClick={() => handlePlanClick(index)}
               type="button"
             >
+              {plan.recommend && (
+                <span className="plan-recommend-badge">
+                  <span>推荐</span>
+                </span>
+              )}
               <div className="plan-name">{plan.goods_name}</div>
               <div className="plan-price">
                 <span className="plan-price-symbol">￥</span>
@@ -438,6 +444,9 @@ function Plan({
                 <span>￥</span>
                 {plan.origin_price}
               </div>
+              {index === currentIndex && (
+                <img className="plan-selected-icon" src="/images/pay/icon-check-footer.png" alt="" />
+              )}
             </button>
           ))}
         </div>