diff --git a/chef_no_background.png b/chef.png
similarity index 100%
rename from chef_no_background.png
rename to chef.png
diff --git a/index.html b/index.html
index ab8f89e..57476f7 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,10 @@
 <body>
     <div class="canteen">
         <img src="background.png" class="background" alt="Background">
+        <img src="rice_bucket.png" class="rice_bucket" alt="Rice bucket">
         <img src="desktop.png" class="table" alt="Table">
         <img src="dinner_plate.png" class="plate" alt="Plate">
+        <img src="chef.png" class="chef" alt="Chef">
         <img src="chef_hand.png" class="chef-hand" alt="Chef's Hand">
         <img src="rice.png" class="rice" alt="Rice">
         <img src="braised_pork.png" class="meat" alt="Meat">
diff --git a/script.js b/script.js
index 0b0243c..91c4b75 100644
--- a/script.js
+++ b/script.js
@@ -1,6 +1,7 @@
 let step = 0;
 
 function serveFood() {
+    console.log("click")
     switch(step) {
         case 0:
             document.querySelector('.chef-hand').style.opacity = '1';
diff --git a/styles.css b/styles.css
index 389ba27..db4c0f6 100644
--- a/styles.css
+++ b/styles.css
@@ -1,16 +1,29 @@
-.canteen {
-    position: relative;
-    width: 500px;
-    height: 500px;
-    margin: 50px auto;
+.background {
+    position: relative; 
+    width: 100%;
+    z-index: 0; 
 }
 
+.canteen {
+    width: 40vw;  /* 设置为视口宽度 */
+    height: 40vw; /* 保持宽高比 */
+    position: relative;
+}
+
+.canteen img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+
 .table {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 2;
 }
 
 .plate {
@@ -18,7 +31,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 1;
+    z-index: 3;
 }
 
 .chef-hand {
@@ -38,7 +51,15 @@
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 0.5s;
-    z-index: 2;
+    z-index: 3;
+}
+
+.chef {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1; 
 }
 
 button {
@@ -46,4 +67,14 @@ button {
     margin: 20px auto;
     padding: 10px 20px;
     font-size: 18px;
+    position: relative; 
+    z-index: 10; 
+}
+
+.rice_bucket{
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1; 
 }
