diff --git a/web/demos/1.html b/web/demos/11/1.html
similarity index 100%
rename from web/demos/1.html
rename to web/demos/11/1.html
diff --git a/web/demos/2.html b/web/demos/11/2.html
similarity index 100%
rename from web/demos/2.html
rename to web/demos/11/2.html
diff --git a/web/demos/3.html b/web/demos/22/3.html
similarity index 100%
rename from web/demos/3.html
rename to web/demos/22/3.html
diff --git a/web/demos/index.php b/web/demos/index.php
new file mode 100644
index 0000000..866bd02
--- /dev/null
+++ b/web/demos/index.php
@@ -0,0 +1,23 @@
+<?php
+// 遍历demos文件夹下的所有文件夹，然后再遍历所有文件
+$directory = new DirectoryIterator(dirname(__FILE__));
+$folders = [];
+$files = [];
+
+foreach ($directory as $folderinfo) {
+  if ($folderinfo->isDir() && !$folderinfo->isDot()) {
+    $folders[] = $folderinfo->getFilename();
+  }
+}
+
+foreach ($folders as $folder) {
+  $subDirectory = new DirectoryIterator(dirname(__FILE__) . $folder);
+  foreach ($subDirectory as $fileinfo) {
+    if ($fileinfo->isFile() && $fileinfo->getExtension() == 'html') {
+      $files[] = $folder . '/' . $fileinfo->getFilename();
+    }
+  }
+}
+sort($folder);
+sort($files);
+?>
\ No newline at end of file
diff --git a/web/demoset.php b/web/demoset.php
index bcdfc2e..32ac56f 100644
--- a/web/demoset.php
+++ b/web/demoset.php
@@ -4,81 +4,11 @@
 <?php include("template/$OJ_TEMPLATE/header.php"); ?>
 <div class="padding">
 
-<?php
-  // 遍历demos文件夹下的所有php文件
-  $directory = new DirectoryIterator(dirname(__FILE__) . '/demos');
-  $files = [];
 
-  foreach ($directory as $fileinfo) {
-    if ($fileinfo->isFile() && $fileinfo->getExtension() == 'html') {
-      $files[] = $fileinfo->getFilename();
-    }
-  }
-  sort($files);
-  ?>
-  <div class="container"></div>
-  <div class="row">
-    <div class="col-md-3">
-      <div id="search-container"></div>
-      <ul class="list-group" id="file-list">
-        <?php foreach ($files as $file): ?>
-          <li class="list-group-item">
-            <a href="demoset.php?demo=<?php echo $file; ?>"><?php echo pathinfo($file, PATHINFO_FILENAME); ?></a>
-          </li>
-        <?php endforeach; ?>
-      </ul>
-      <script type="text/javascript">
-        class Search extends React.Component {
-          constructor(props) {
-            super(props);
-            this.state = { query: '' };
-          }
-
-          handleChange = (event) => {
-            this.setState({ query: event.target.value }, () => {
-              this.filterList();
-            });
-          };
-
-          filterList = () => {
-            const query = this.state.query.toLowerCase();
-            const items = document.querySelectorAll('#file-list .list-group-item');
-            items.forEach((item) => {
-              const text = item.textContent.toLowerCase();
-              item.style.display = text.includes(query) ? '' : 'none';
-            });
-          };
-
-          render() {
-            return (
-              <input
-                type="text"
-                className="form-control"
-                placeholder="Search..."
-                value={this.state.query}
-                onChange={this.handleChange}
-              />
-            );
-          }
-        }
-
-        ReactDOM.render(<Search />, document.getElementById('search-container'));
-      </script>
-    </div>
-    <div class="col-md-9">
-      <div id="content">
-        <div style="border: 1px solid #ccc; padding: 10px;">
-          <?php
-          if (isset($_GET['demo']) && in_array($_GET['demo'], $files)) {
-            $demoFile = $_GET['demo'];
-            $demoContent = file_get_contents(dirname(__FILE__) . '/demos/' . $demoFile);
-            echo $demoContent;
-          }
-          ?>
-        </div>
-      </div>
-    </div>
+  <div class="container">
+    <?php include "demos/index.php"; ?>
   </div>
+
 </div>
 
 </div>