diff --git a/index.html b/index.html
index 748440c..00ead08 100644
--- a/index.html
+++ b/index.html
@@ -315,6 +315,11 @@
             background-color: black;
             z-index: 10;
         }
+        .demo {
+            margin-top: -20px;
+            background-color: #fff;
+            text-align: center;
+        }
         .image-comparison-content .image-2 {
             clip-path: inset(0 0 0 50%);
         }
@@ -461,6 +466,9 @@
             .image-comparison-container {
                 background-color: #333; /* Dark color for dark mode */
             }
+            .demo {
+                background-color: #333;
+        }
         }
     </style>
 </head>
@@ -556,8 +564,6 @@ <h2>Efficient High-Resolution Image Synthesis <br>
       <div id="modal-description"></div> <!-- Text for description -->
     </div>
 
-    <div class="w-embed w-iframe"><iframe src="https://24b5795674fcf4e2b0.gradio.live/" width="100%" height="1024" style="border: 1px solid #ddd; border-radius: 4px;" allowfullscreen=""></iframe></div>
-
     <section class="description">
         <div>
             <img src="asset/SANA.png" alt="Sana-logo" class="inserted-image-noshadow">
@@ -681,6 +687,15 @@ <h2>Our Mission</h2>
                 AI technologies that address practical challenges and deliver fast, open-source solutions.</p>
         </div>
 
+        <!--    Online Demo-->
+        <div class="description-content">
+            <h2 class="title">Online Demo</h2>
+        </div>
+
+        <div class="demo">
+            <iframe src="https://24b5795674fcf4e2b0.gradio.live/" width="50%" height="1280" style="border: 1px solid #ddd; border-radius: 4px;" allowfullscreen=""></iframe>
+        </div>
+
         <!--BibTex citation -->
         <div class="description-content">
             <h2 class="title">BibTeX</h2>