diff --git a/README.md b/README.md
index 9f019b3..5af2e0b 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,26 @@
-*Due to file size limitations, only the source code and README.md are included in the submitted zip file. Please pull the full repository from the link below to access all project files*
-
-*http://git.prototyping.id/20230412/individual_project.git*
-
-*If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.*
-
 # Personal Information
 - **Name:** Chaebean Yang  
 - **ID:** 20230412  
 - **Email:** kazed0102@kaist.ac.kr  
 
-*If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.*
+
+
+# Notice
+Due to file size limitations, only the source code and README.md are included in the submitted zip file. Please pull the full repository from the link below to access all project files.
+
+To install dependencies, navigate to the project root directory and run:
+
+http://git.prototyping.id/20230412/individual_project.git
+
+```javascript
+cd svelteP5play
+npm install
+npm run dev
+```
+
+If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.
+
+If you do not have Markdown Preview Enhanced installed, the Mermaid diagrams may not be visible in the preview. In that case, please refer to the `README.pdf` file below.
 
 
 
diff --git a/README.pdf b/README.pdf
index 7cb2520..87be8f6 100644
Binary files a/README.pdf and b/README.pdf differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..621a7de
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "svelteP5Play-main",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/sveltep5play/src/screens/GameClearScreen.svelte b/sveltep5play/src/screens/GameClearScreen.svelte
index 18fed5c..4628ccf 100644
--- a/sveltep5play/src/screens/GameClearScreen.svelte
+++ b/sveltep5play/src/screens/GameClearScreen.svelte
@@ -9,6 +9,7 @@
 </script>
 
 <div class="start-screen">
+  <img src ='/assets/gameclear.png' alt="gameclear-img" class="gameclear-img">
   <h1>Game Clear</h1>
   <button on:click={handleClear}>Try Again</button>
 </div>
@@ -20,23 +21,63 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #222;
-    color: white;
+    background-color: #210140;
+    color: #18a48e;
     padding: 20px;
+    align-items: center;
   }
 
   button {
+    position: relative;
     display: block;
-    margin: 20px auto 0;
-    padding: 10px 20px;
-    font-size: 1.2rem;
-    width: 200px;
+    margin: 0;
+    padding: 4px;
+    width: fit-content;
     cursor: pointer;
+    font-size: 1.2rem;
     text-align: center;
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-family: 'Aztec';
+    justify-content: center;
+    align-items: center;
+  }
+
+  button::before,
+  button::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    width: 24px;
+    height: 24px;
+    background-image: url("/assets/obstacle.png");
+    background-size: cover;
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+
+  button::before {
+    left: -30px;
+  }
+
+  button::after {
+    right: -30px;
+  }
+
+  button:hover::before,
+  button:hover::after {
+    opacity: 1;
   }
 
   h1 {
     text-align: center;
     margin: 20px;
   }
+
+  .gameclear-img {
+    width: 300px;
+    height: auto;
+    align-self: center;
+  }
 </style>
\ No newline at end of file
diff --git a/sveltep5play/src/screens/GameOverScreen.svelte b/sveltep5play/src/screens/GameOverScreen.svelte
index 1d00374..6bc96ca 100644
--- a/sveltep5play/src/screens/GameOverScreen.svelte
+++ b/sveltep5play/src/screens/GameOverScreen.svelte
@@ -14,6 +14,7 @@
 </script>
 
 <div class="gameover-screen">
+  <img src ='/assets/gameover.png' alt="gameover-img" class="gameover-img">
   <h1>Game Over</h1>
   <div class="buttons">
     <button on:click={handleRetry}>Retry</button>
@@ -28,8 +29,8 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #222;
-    color: white;
+    background-color: #210140;
+    color: #18a48e;
     padding: 20px;
   }
 
@@ -86,4 +87,10 @@
     text-align: center;
     margin: 20px;
   }
+
+  .gameover-img {
+    width: 600px;
+    height: auto;
+    align-self: center;
+  }
 </style>
\ No newline at end of file
diff --git a/sveltep5play/src/screens/StartScreen.svelte b/sveltep5play/src/screens/StartScreen.svelte
index 935650e..6398518 100644
--- a/sveltep5play/src/screens/StartScreen.svelte
+++ b/sveltep5play/src/screens/StartScreen.svelte
@@ -10,7 +10,11 @@
 
 <div class="start-screen">
   <div class="title">
-    <h1>QUETZALCOATL</h1>
+    <div class="big">
+      <img src="/assets/quetzalcoatl.png" alt="left icon" class="title-icon left" />
+      <h1>QUETZALCOATL</h1>
+      <img src="/assets/quetzalcoatl.png" alt="right icon" class="title-icon right" />
+    </div>
     <h2>The Fifth Sun</h2>
   </div>
   <button on:click={handleStart}>Start Game</button>
@@ -23,8 +27,8 @@
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: #26071B;
-    color: #BF2A45;
+    background-color: #210140;
+    color: #18a48e;
     padding: 40px;
   }
 
@@ -71,7 +75,24 @@
   }
 
   .title {
-    margin: 0;
+    margin: 4px;
+  }
+
+  .big {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+  }
+
+  .title-icon {
+    width: 64px; 
+    height: auto;
+  }
+
+  .title-icon.left {
+    transform: scaleX(-1);
   }
 
   h1 {
@@ -83,5 +104,8 @@
   h2 {
     text-align: center;
     margin: 0;
+    color: #eef251;
+    font-size: 2.4rem;
   }
-</style>
\ No newline at end of file
+</style>
+
diff --git a/sveltep5play/src/sketch.js b/sveltep5play/src/sketch.js
index 2199046..262612c 100644
--- a/sveltep5play/src/sketch.js
+++ b/sveltep5play/src/sketch.js
@@ -30,7 +30,7 @@ export function createSketch(p, onGameData) {
   //game state variables
   let life = 3;
   let score = 0;
-  let speed = 8;
+  let speed = 7;
   let obstacles = [];
   let obstacleInterval = 100;
   let walls = [];
@@ -86,7 +86,7 @@ export function createSketch(p, onGameData) {
     newY = p.constrain(newY, 0, p.floor(p.height / cellSize) - 1);
 
     //overlap check
-    const overlap = [...snake, ...walls, ...items].some(seg => seg.x == newX && seg.y == newY);
+    const overlap = [...snake, ...walls].some(seg => seg.x == newX && seg.y == newY);
     if (overlap) return;
 
     obstacles = [{x: newX, y: newY, hit: null, time: p.frameCount}];
@@ -141,7 +141,7 @@ export function createSketch(p, onGameData) {
     updateGameData();
 
     let grow = growNext;
-    growNext = false;
+    growNext = 0;
 
     const head = snake[0];
     const tail = snake[snake.length - 1];
@@ -173,7 +173,7 @@ export function createSketch(p, onGameData) {
         x: tail.x + dirTail.x,
         y: tail.y + dirTail.y
       };
-      
+
       if(dirHead.x !== 0 || dirHead.y !== 0) {
         snake.unshift(newHead);
 
@@ -199,25 +199,27 @@ export function createSketch(p, onGameData) {
           return true;
         });
 
-        if(growNext > 0) {
-          growNext -= 1;
-        }
-        else {
-          snake.pop();
+        if(!growNext) snake.pop();
+        growNext = false;
+      }
+      else if (dirTail.x !== 0 || dirTail.y !== 0) {
+        snake.push(newTail);
+        if (!growNext) {
+          snake.shift();
+          growNext = false;
         }
       }
-    }
       
-    //collision test
-    if (snake.length >= 2) {
-      const updatedHead = snake[0];
-      const updatedTail = snake[snake.length - 1];
-      if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
-        gameState = "over";
-        return;
+      //collision test
+      if (snake.length >= 2) {
+        const updatedHead = snake[0];
+        const updatedTail = snake[snake.length - 1];
+        if (updatedHead.x == updatedTail.x && updatedHead.y == updatedTail.y) {
+          gameState = "over";
+          return;
+        }
       }
     }
-    
 
     ////GET ITEMS////
 
@@ -410,40 +412,42 @@ export function createSketch(p, onGameData) {
 
   //operating snake
   p.keyPressed = () => {
-    const key = p.key.toLowerCase();
-
+    // Head
     if (p.keyCode === p.LEFT_ARROW && !(dirHead.x === 1 && dirHead.y === 0)) {
       dirHead = {x: -1, y: 0};
+      dirTail = {x: 0, y: 0}; // stop tail
     }
     if (p.keyCode === p.RIGHT_ARROW && !(dirHead.x === -1 && dirHead.y === 0)) {
       dirHead = {x: 1, y: 0};
+      dirTail = {x: 0, y: 0};
     }
     if (p.keyCode === p.UP_ARROW && !(dirHead.x === 0 && dirHead.y === 1)) {
       dirHead = {x: 0, y: -1};
+      dirTail = {x: 0, y: 0};
     }
     if (p.keyCode === p.DOWN_ARROW && !(dirHead.x === 0 && dirHead.y === -1)) {
       dirHead = {x: 0, y: 1};
+      dirTail = {x: 0, y: 0};
+    }
+
+    // Tail
+    if (p.key === 'a' && !(dirTail.x === 1 && dirTail.y === 0)) {
+      dirTail = {x: -1, y: 0};
+      dirHead = {x: 0, y: 0}; // stop head
+    }
+    if (p.key === 'd' && !(dirTail.x === -1 && dirTail.y === 0)) {
+      dirTail = {x: 1, y: 0};
+      dirHead = {x: 0, y: 0};
+    }
+    if (p.key === 'w' && !(dirTail.x === 0 && dirTail.y === 1)) {
+      dirTail = {x: 0, y: -1};
+      dirHead = {x: 0, y: 0};
+    }
+    if (p.key === 's' && !(dirTail.x === 0 && dirTail.y === -1)) {
+      dirTail = {x: 0, y: 1};
+      dirHead = {x: 0, y: 0};
     }
   };
-   
-  function handleKeyDown(e) {
-    const key = e.key.toLowerCase();
-  
-    if (key === 'a' && !(dirTail.x === 1 && dirTail.y === 0)) {
-      dirTail = {x: -1, y: 0};
-    }
-    if (key === 'd' && !(dirTail.x === -1 && dirTail.y === 0)) {
-      dirTail = {x: 1, y: 0};
-    }
-    if (key === 'w' && !(dirTail.x === 0 && dirTail.y === 1)) {
-      dirTail = {x: 0, y: -1};
-    }
-    if (key === 's' && !(dirTail.x === 0 && dirTail.y === -1)) {
-      dirTail = {x: 0, y: 1};
-    }
-  }
-  
-  window.addEventListener('keydown', handleKeyDown);
 }