diff --git a/main/index.html b/main/index.html
index a322b338b24c..487cc904070a 100755
--- a/main/index.html
+++ b/main/index.html
@@ -79,7 +79,7 @@ <h1 class="fw-bold lh-1 pb-5 hero-title" style="color: #ffffff;">Apache Paimon&t
           <div class="col-12 text-center"><h2>Key Features</h2></div>
         </div>
         <div class="row py-4 justify-content-center m-1">
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
                 <h2><i class="bi bi-shuffle"></i></h2>
@@ -88,49 +88,49 @@ <h5>Real-time Updates</h5>
               <div class="py-3">Primary-key table supports real-time streaming updates of large amounts of data. Real-time query within 1 minute.</div>
             </div>
           </div>
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
                 <h2><i class="bi bi-calculator"></i></h2>
                 <h5>Flexible Updates</h5>
               </div>
-              <div class="py-3">Support defining Merge Engines, update records however you like. Deduplicate to keep last row, or partial-update, or aggregate records, or first-row, you decide.</div>
+              <div class="py-3">Defining Merge Engines, update records however you like. Deduplicate to keep last row, or partial-update, or aggregate records, or first-row, you decide.</div>
             </div>
           </div>
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
                 <h2><i class="bi bi-clipboard2-pulse"></i></h2>
                 <h5>Change-tracking Updates</h5>
               </div>
-              <div class="py-3">Support defining changelog-producer, produce correct and complete changelog in updates for merge engines, simplifying your streaming analytics.</div>
+              <div class="py-3">Defining changelog-producer, produce correct and complete changelog in updates for merge engines, simplifying your streaming analytics.</div>
             </div>
           </div>
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
-                <h2><i class="bi bi-clipboard2-pulse"></i></h2>
-                <h5>Data Lake Capabilities</h5>
+                <h2><i class="bi bi-table"></i></h2>
+                <h5>Append Data Processing</h5>
               </div>
-              <div class="py-3">Low cost, High reliability, Scalable metadata, Time Travel and Full Schema Evolution. All advantage as a data lake storage.</div>
+              <div class="py-3">Append table (no primary-key) provides large scale batch and streaming processing capability. Supports compaction with z-order sorting.</div>
             </div>
           </div>
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
-                <h2><i class="bi bi-table"></i></h2>
-                <h5>Huge Append Data Processing</h5>
+                <h2><i class="bi bi-calendar-event"></i></h2>
+                <h5>Query Data Skipping</h5>
               </div>
-              <div class="py-3">Append table (no primary-key) provides large scale batch & streaming processing capability. Supports Data Compaction with z-order sorting to optimize file layout.</div>
+              <div class="py-3">Based on indexes such as minmax, filter irrelevant files and provide high-performance queries, more indexes are being supported.</div>
             </div>
           </div>
-          <div class="card shadow col-md-10 col-lg-5 m-3">
+          <div class="card shadow col-md-10 col-lg-5 col-xl-3 m-3">
             <div class="card-body">
               <div class="text-center text-primary">
-                <h2><i class="bi bi-calendar-event"></i></h2>
-                <h5>Data Skipping</h5>
+                <h2><i class="bi bi-clipboard2-pulse"></i></h2>
+                <h5>Data Lake Capabilities</h5>
               </div>
-              <div class="py-3">Based on indexes such as minmax, filter irrelevant files and provide high-performance queries.</div>
+              <div class="py-3">Low cost, High reliability, Scalable metadata, Time Travel and Full Schema Evolution. All advantage as a data lake storage.</div>
             </div>
           </div>
         </div>