diff --git a/web/template/syzoj/demos/1.html b/web/template/syzoj/demos/1.html
new file mode 100644
index 0000000..56b6510
--- /dev/null
+++ b/web/template/syzoj/demos/1.html
@@ -0,0 +1 @@
+11111
\ No newline at end of file
diff --git a/web/template/syzoj/demos/2.html b/web/template/syzoj/demos/2.html
new file mode 100644
index 0000000..7b4353a
--- /dev/null
+++ b/web/template/syzoj/demos/2.html
@@ -0,0 +1 @@
+22222
\ No newline at end of file
diff --git a/web/template/syzoj/demos/3.html b/web/template/syzoj/demos/3.html
new file mode 100644
index 0000000..3d7f848
--- /dev/null
+++ b/web/template/syzoj/demos/3.html
@@ -0,0 +1 @@
+33333
\ No newline at end of file
diff --git a/web/template/syzoj/demoset.php b/web/template/syzoj/demoset.php
index 72a58c8..7cf3364 100644
--- a/web/template/syzoj/demoset.php
+++ b/web/template/syzoj/demoset.php
@@ -16,6 +16,40 @@ foreach ($directory as $fileinfo) {
   }
 }
 ?>
+<div class="container"></div>
+  <div class="row">
+    <div class="col-md-3">
+      <ul class="list-group">
+        <?php foreach ($files as $file): ?>
+          <li class="list-group-item">
+            <a href="demoset.php?demo=<?php echo $file; ?>"><?php echo $file; ?></a>
+          </li>
+        <?php endforeach; ?>
+      </ul>
+    </div>
+    <div class="col-md-9">
+      <div id="content">
+        <?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>
+
+<script>
+function loadContent(file) {
+  fetch('demos/' + file)
+    .then(response => response.text())
+    .then(data => {
+      document.getElementById('content').innerHTML = data;
+    });
+}
+</script>
 
   </div>
   <?php include("template/$OJ_TEMPLATE/footer.php"); ?>
\ No newline at end of file