diff --git a/web/app/(commonLayout)/remark-directive-test/page.tsx b/web/app/(commonLayout)/remark-directive-test/page.tsx
index 7d75063185..d5c38fcb31 100644
--- a/web/app/(commonLayout)/remark-directive-test/page.tsx
+++ b/web/app/(commonLayout)/remark-directive-test/page.tsx
@@ -1,7 +1,25 @@
 'use client'
 import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
 
-const markdown = `
+const markdown1 = `
+We’re refining our messaging for technical teams, like how did you find us and did our positioning truly resonate?
+
+Share your perspective in a 30-minute chat and receive:
+
+::::withIconCardList
+
+:::withIconCardItem {icon="https://assets.dify.ai/images/gift-card.png"}
+$100 Amazon gift card
+:::
+
+:::withIconCardItem {icon="https://assets.dify.ai/images/dify-swag.png"}
+Dify swag
+:::
+
+::::
+`
+
+const markdown2 = `
 We’re speaking with technical teams to better understand:
 
 - How you discovered Dify
@@ -28,7 +46,11 @@ export default function RemarkDirectiveTestPage() {
         remark-directive test page
       </h1>
       <div className="markdown-body">
-        <MarkdownWithDirective markdown={markdown} />
+        <MarkdownWithDirective markdown={markdown1} />
+      </div>
+
+      <div className="markdown-body !mt-5">
+        <MarkdownWithDirective markdown={markdown2} />
       </div>
     </main>
   )