diff --git a/templates/GameTutorial.html b/templates/GameTutorial.html
index 3d7e259..b021cf5 100644
--- a/templates/GameTutorial.html
+++ b/templates/GameTutorial.html
@@ -3,7 +3,7 @@
 <html lang="en">
 <script
   id="allow-copy_script">(function t() { var t = !1; document.addEventListener("allow_copy", (function (n) { t = n.detail.unlock })); var n = ["copy", "cut", "contextmenu", "selectstart", "mousedown", "mouseup", "mousemove", "keydown", "keypress", "keyup"], e = function (n) { t && (n.stopPropagation(), n.stopImmediatePropagation && n.stopImmediatePropagation()) }; n.forEach((function (t) { document.documentElement.addEventListener(t, e, { capture: !0 }) })) })()</script>
-
+  <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
@@ -199,7 +199,6 @@
   <section id="news">
 
     <div class="container">
-      <br>
 
       <div class="row clearfix">
 
@@ -213,14 +212,14 @@
           </div>
 
 
-          <img style=" width: 80%; height: 90vh;top: 5vh; left: 10vw;
+          <img style=" width: 80%; height: 90vh;top: 62px; left: 10vw;
             position: fixed;z-index: 900; visibility: visible; " src="../templates/Web/pic.png" id="windowshow">
 
           <div align="center" id="GameWindow">
 
             <div class="loading-container" id="loading" style="visibility: visible">
               <div class="loader"></div>
-              <div class="loading-text">Loading</div>e
+              <div class="loading-text">Loading</div>
             </div>
 
           </div>
@@ -256,10 +255,7 @@
             }
               document.getElementById("game").style.visibility = "visible";
 
-          });
-
-
-          ' class="cirButton">
+          });' class="cirButton">
             <h3>Repeat Tutorial</h3>
           </button>
         </div>
@@ -271,10 +267,36 @@
             <h3>Play Game</h3>
           </button>
         </div>
+        <div class="col-md-6" id="countdown" style="z-index:999; position:fixed; left:11vw; bottom: 5vh; color: #000; font-size: xx-large;"></div>
+        <script>
+          function countdown() {
+            var count = 15; // 设置倒计时秒数
+            var timer = setInterval(function () {
+              count--;
+              if (count <= 0) {
+                clearInterval(timer);
+                $("#countdown").hide();
+                $("#windowshow:visible").hide(); // 倒计时结束后隐藏倒计时容器
+                
+              } else {
+                $("#countdown").html("This instruction will close in "+ count +"s"); // 更新倒计时容器内容
+                $("#windowshow").click(function(){
+                  $("#windowshow").hide();
+                  $("#countdown").hide();
+                  });
+              }
+            }, 1000);
+          }
+
+          $(document).ready(function () {
+            countdown();
+          });
+        </script>
 
         <script>
           //Init Cheerpj Framework
           cheerpjInit();
+          
 
           var divElement = document.getElementById("GameWindow");
           var tutorialId = parseInt("{{tutorial}}")
diff --git a/templates/GameWelcome.html b/templates/GameWelcome.html
index f78824c..800fca8 100644
--- a/templates/GameWelcome.html
+++ b/templates/GameWelcome.html
@@ -261,8 +261,7 @@
         width: fit-content;
         display: flex;
         justify-content: center;
-        min-width: fit-content;
-">
+        min-width: fit-content;">
           <img src="../img/frameworkAD.gif">
         </div>
 
@@ -293,19 +292,10 @@
 
           <button onclick="window.location.href = '/question';" class="cirButton"><b> Start!</b> </button>
         </div>
-
-
       </div>
     </div>
-
-
   </section>
 
-
-
-
-
-
   <!-- Footer mx-auto -->
   <footer class="py-5 bg-dark">
     <div class="container">
diff --git a/templates/Web/pic.png b/templates/Web/pic.png
index 2702bd4..4e41928 100644
Binary files a/templates/Web/pic.png and b/templates/Web/pic.png differ
