diff --git a/css/arrows.png b/css/arrows.png
new file mode 100644
index 0000000..0fa5f67
Binary files /dev/null and b/css/arrows.png differ
diff --git a/css/catapult.png b/css/catapult.png
new file mode 100644
index 0000000..531ef3f
Binary files /dev/null and b/css/catapult.png differ
diff --git a/css/style.css b/css/style.css
index df26ef5..e73be24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,89 +1,143 @@
-body{
+body {
     color: white;
     font-weight: bolder;
     font-family: 'MedievalSharp', cursive;
-    display: flex;
-    justify-content: center;
-    position: relative;
     background-color: #005995;
-    flex-direction: column;
-    }
-.main-container{
-    margin-top: 1%;
+}
+
+.main-container {
     display: flex;
-    flex-direction: row;
-    
+    justify-content: center;
 }
 
-canvas{
-    background-image: url("https://image.freepik.com/free-vector/old-stone-cartoon-castle-with-bridges-river-children-s-illustration_273525-160.jpg");
-    border: 1px solid black;
+.canvas-container {
+    display: flex;
+    justify-content: center;
     width: 50%;
-    height: 70vh;
-    background-color: aliceblue;
+    height: 65vh
+}
+
+canvas {
+    border-radius: 10%;
+    height: 100%;
+    width: 100%;
     position: relative;
-    background-size:cover;
+    background-size: cover;
     background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("https://image.freepik.com/free-vector/old-stone-cartoon-castle-with-bridges-river-children-s-illustration_273525-160.jpg");
+}
+
+.start-game-overlay {
+    height: 65vh;
+    width: 50%;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.55);
     border-radius: 10%;
-  
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
+.start-game-overlay>button {
+    position: absolute;
+    color: #fff;
+    padding: 20px;
+    border-radius: 10%;
+    font-size: 1.5rem;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+
+}
+
+
 .score {
     background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-    position: relative;
-    width: 10%;
-    height: 100%;
-    font-size: 2em;
+    position: absolute;
+    right: 2%;
+    top: 10%;
+    width: 240px;
+    font-size: 1.5em;
     text-align: center;
     border-radius: 10%;
-    margin-top: 18%;
-    margin-right: 2%;
-    
-}
-.footer{
-    width: 80%;
-    justify-content: center;
+    padding: 20px;
 }
 
-.instructions{
-    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+.instructions {
+    margin-top: 10px;
+    margin: 0 auto;
     position: relative;
-    height: 100%;
-    font-size: 1.5em;
+    z-index: 100;
+    width: 90%;
+    padding: 20px;
+    font-size: 1.3em;
     text-align: center;
-    border-radius: 10%;
-    margin-top: 2%;
-    margin-right: 2%;
+    margin-top: 1%;
+    z-index: 100;
+    background-color: #C2B280;
+    color: black;
+    border: solid 4px brown;
+    overflow: hidden;
+}
+
+#wasd {
+    position: absolute;
+    top: 110px;
+    right: 9%;
+    z-index: 10000;
+    height: 110px;
+    width: 120px;
+}
 
+#arrows {
+    position: absolute;
+    right: 10%;
+    top: 30px;
+    z-index: 10000;
+    height: 80px;
+    width: 100px;
 }
 
+
+
 .result {
     color: gold;
-    position: relative;
+    position: absolute;
     background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-    width: 20%;
-    height: 100%;
-    font-size: 2em;
+    width: 240px;
+    padding: 20px;
+    font-size: 1.7rem;
     text-align: center;
     border-radius: 10%;
-    margin-top: 3%;
-    margin-left: 2%;
+    top: 30%;
+    right: 2%;
 }
 
-#source{
-    display: none;
+.result.active {
+    display: flex;
+    padding: 20px;
 }
 
-.reset {
-color:aliceblue;
-font-family: 'MedievalSharp', cursive;
-position: absolute;
-background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
-left: .1%;
-top: 10%;
-height: 20%;
-width: 10%;
-font-size: 2em;
-border-radius: 20%;
 
+.reset {
+    color: aliceblue;
+    font-family: 'MedievalSharp', cursive;
+    position: absolute;
+    left: 10%;
+    top: 15%;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+    padding: 25px;
+    font-size: 1.6rem;
+    border-radius: 20%;
 }
+
+.how-to {
+    color: aliceblue;
+    font-family: 'MedievalSharp', cursive;
+    position: absolute;
+    left: 10%;
+    top: 29%;
+    background-image: url("https://i.pinimg.com/564x/e4/0c/6c/e40c6cb21c4cb60180c5edd65fb808ac.jpg");
+    padding: 25px;
+    font-size: 1.6rem;
+    border-radius: 20%;
+}
\ No newline at end of file
diff --git a/css/wasd.png b/css/wasd.png
new file mode 100644
index 0000000..a4b8d7f
Binary files /dev/null and b/css/wasd.png differ
diff --git a/index.html b/index.html
index 57814c5..175b78b 100644
--- a/index.html
+++ b/index.html
@@ -9,23 +9,34 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/style.css">
-    <title>Canvas</title>
+    <title>PROTECT THE CASTLE</title>
   
 </head>
 <body>
     <div class = "main-container">
-
-    <div class = "score" id = "score"></div>
-    <canvas id= "canvas"></canvas>
-    <div class = "result" id = "result"></div>
-    <button class = "reset" id = "restart">restart game</button>
-    <img src = "https://github.com/lawrencesalinas/Project-1/blob/main/css/pngegg.png?raw=true" alt="shield"  id = "shield">
-
-
-    <script src = "js/script.js"></script>
+    <div class="canvas-container">
+        <canvas id= "canvas"></canvas>
+        <div class="start-game-overlay" id="overlay">
+                <button id="start">Play Now</button>
+        </div>
+        <div class = "score" id = "score"></div>
+        <div class="result-container">
+            <div class = "result" id = "result">
+                <span id="result-text"></span>
+            </div>
+        </div>
+    </div>
+  
+    <button class = "reset" id = "restart">restart game</button> 
+    <button class = "how-to" id = "how-to">How to play</button> 
+    
+    </div>        
+    <div class = "instructions" id = "instructions">
+        <span id="instructions-text"></span>
+        <img src="./css//wasd.png" alt="wasd-keys" id="wasd">
+        <img src="./css//arrows.png" alt="arrow-keys" id="arrows">
     </div>
-    <div class = "footer">
-    <div class = "instructions" id = "instructions"></div>
     </div>
+    <script src = "js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
index 0161c35..fc18de3 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,86 +1,108 @@
 const canvas = document.querySelector("canvas")
 const resetGame = document.getElementById("restart")
-const images = document.getElementById("shield")
+const start = document.getElementById('start')
+const howTo = document.getElementById('how-to')
+const overlay = document.getElementById('overlay')
+
+const wasd = new Image()
+wasd.src = '../css/wasd.png'
+const arrows = new Image()
+arrows.src = '../css/arrows.png'
+const shieldImg = new Image()
+shieldImg.src = '../css/pngegg.png'
+const catapult = new Image()
+catapult.src = '../css/catapult.png'
+
 canvas.height = window.innerHeight
 canvas.width = window.innerWidth
 const c = canvas.getContext("2d")
 /*----variables used for results and scoring*----*/
-let playerOneScore = 0;
+let playerOneScore = 0
 let playerTwoScore = 0
 let roundWiiner = ""
 let weHaveAwinner = false
 
 /*--------------constructor functions to create the characters of the game-------------------*/
-function Shield(image, x, y, width, height){
+function Shield(image, x, y, width, height) {
     this.image = image
     this.x = x
     this.y = y
     this.width = width
     this.height = height
-    this.render = () =>{
-        c.drawImage(this.image, this.x, this.y, this.width, this. height )
+    this.render = () => {
+        c.drawImage(this.image, this.x, this.y, this.width, this.height)
     }
 }
 
-function Player(x, y , color, width, height){             
+function Catapult(image, x, y, width, height) {
+    this.image = image
     this.x = x
-    this.y = y 
-    this.width = width 
+    this.y = y
+    this.width = width
+    this.height = height
+    this.render = () => {
+        c.drawImage(this.image, this.x, this.y, this.width, this.height)
+    }
+}
+
+function Player(x, y, color, width, height) {
+    this.x = x
+    this.y = y
+    this.width = width
     this.height = height
     this.color = color
     this.render = () => {
         c.fillStyle = this.color
         c.fillRect(this.x, this.y, this.width, this.height)
     }
-  
 }
 
-function Circle(x, y, radius,dy, caught){
-     this.x = x
+function Fireball(x, y, radius, dy, caught) {
+    this.x = x
     this.y = y
-    this.radius = radius 
+    this.radius = radius
     this.dy = dy
-    this.draw = () =>{
+    this.draw = () => {
         c.beginPath()
-        c.arc(this.x , this.y, this.radius, 0, Math.PI * 2, false)
+        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
         c.fillStyle = " #FEDE17"
         c.stroke()
         c.fill()
     }
     /*-----circle function when it reaches the winning score---*/
     this.shootAndEndOfGame = () => {
-        if(playerOneScore === 10 || playerTwoScore === 10){
+        if (playerOneScore === 10 || playerTwoScore === 10) {
             this.y += 300            /////circles
             this.x = -20            ///////get sent outside the canvas
-            this.y +=  0           ///////and stop moving  
+            this.y += 0           ///////and stop moving  
         } else {
-        this.y += this.dy 
-       }
+            this.y += this.dy
+        }
     }
     /*---circle function when it collides with the shield---*/
     this.detectPlayer = () => {
-        if(this.y - this.radius < player.y + player.height && this.x + this.radius > shield.x && this.x < shield.x + shield.width){
+        if (this.y - this.radius < player.y + player.height && this.x + this.radius > shield.x && this.x < shield.x + shield.width) {
             this.y = 300
             this.x = -20
             this.dy = 0
-            playerOneScore++       
-         }  
-         }
+            playerOneScore++
+        }
+    }
     this.detectWall = () => {
-        if(this.y - this.radius < 0){
+        if (this.y - this.radius < 0) {
             this.y = 300
             this.x = -20
             this.dy = 0
-            playerTwoScore++  
+            playerTwoScore++
         }
     }
-    }    
+}
 
 /*-------------character variables-------------*/
-let canvasXmid = (canvas.width/2 - 100)
+let canvasXmid = (canvas.width / 2 - 100)
 let player = new Player(canvasXmid, 0, '#bada55', 130, 70)
-let player2 = new Player(canvasXmid, canvas.height - 50, "brown", 150, 40)
-let shield = new Shield(images,canvasXmid, 0, 140, 80)
+let player2 = new Catapult(catapult, canvasXmid, canvas.height - 100, 140, 100)
+let shield = new Shield(shieldImg, canvasXmid, 0, 140, 80)
 
 
 /*---------------------------------------------------------------------------------------------------*/
@@ -90,99 +112,114 @@ let shield = new Shield(images,canvasXmid, 0, 140, 80)
 /*function to create multiple  circles with the use of the key spacebar*/
 let circles = []
 const fire = (e) => {
-     switch(e.key){
+    switch (e.key) {
         case " ":
-                            /*circle shoots out from the middle of the shooter*/
-        let circle = new Circle(player2.width/2 + player2.x, player2.y, 20,-7) 
-        circles.push(circle)  
-         }
+            /*circle shoots out from the middle of the shooter*/
+            let circle = new Fireball(player2.width / 2 + player2.x, player2.y, 20, -7)
+            circles.push(circle)
+    }
 }
 
 /*function to control the shield and the destroyer from left and right directions as well as wall detection*/
 const movements = () => {
-    if(controls.shooterRight){
+    if (controls.shooterRight) {
         shield.x += 20
-        if(shield.x + shield.width >= canvas.width){
+        if (shield.x + shield.width >= canvas.width) {
             shield.x = canvas.width - shield.width
         }
     }
-    if (controls.shooterLeft){
+    if (controls.shooterLeft) {
         shield.x -= 20
-        if(shield.x < 0){
+        if (shield.x < 0) {
             shield.x = 0
         }
     }
-    if(controls.catcherLeft){
+    if (controls.catcherLeft) {
         player2.x -= 20
-        if(player2.x < 0){
+        if (player2.x < 0) {
             player2.x = 0
         }
-      
-    } 
-    if (controls.catcherRight){
+
+    }
+    if (controls.catcherRight) {
         player2.x += 20
-        if(player2.x + player2.width >= canvas.width){
+        if (player2.x + player2.width >= canvas.width) {
             player2.x = canvas.width - player2.width
         }
     }
 }
-    
+
 /*function to assign & setup the key controls of the shooter and the shield*/
 let controls = {}
 const controller = (key, keyDown) => {
-if(key == "d"){
-    controls.shooterRight = keyDown
-}
-if(key == "a"){
-    controls.shooterLeft = keyDown
-}
-if(key == "ArrowRight"){
-    controls.catcherRight = keyDown
-}
-if(key == "ArrowLeft"){
-    controls.catcherLeft = keyDown
-}
-}
+    if (key == "d") {
+        controls.shooterRight = keyDown
+    }
 
+    if (key == "a") {
+        controls.shooterLeft = keyDown
+    }
 
+    if (key == "ArrowRight") {
+        controls.catcherRight = keyDown
+    }
 
+    if (key == "ArrowLeft") {
+        controls.catcherLeft = keyDown
+    }
+}
+
+
+/* start the game */
+const startGame = (e) => {
+    overlay.style.display = 'none'
+    shield.x = canvasXmid
+    player2.x = canvasXmid
+    playerOneScore = 0
+    playerTwoScore = 0
+    roundWiiner = ""
+}
 
 /*function to reset the game*/
 const gameReset = (e) => {
-  const reset = e.target.resetGame
-      shield.x = canvasXmid
-      player2.x = canvasXmid
-      playerOneScore = 0
-      playerTwoScore = 0
-      roundWiiner = ""
-      }
+    const reset = e.target.resetGame
+    shield.x = canvasXmid
+    player2.x = canvasXmid
+    playerOneScore = 0
+    playerTwoScore = 0
+    roundWiiner = ""
+}
 
 const isntructions = (e) => {
-    const isntructions = document.getElementById("instructions")
-    isntructions.innerText = `How to play\n Destroyer controls: left key to move left, right key to move right, space to shoot.
+    const instructionsText = document.getElementById("instructions-text")
+    instructionsText.innerText = `How to play\n Destroyer controls: left key to move left, right key to move right, space bar to shoot..\n
      Protecter controls: a key to move left and d key to move right.\n
      Destroyer needs to get pass through the shield 10 times to win
-     Protector needs to get catch the fireballs 10 times to win \n -------`
-        }
-     
+     Protector needs to get catch the fireballs 10 times to win \n`
+    wasd.classList.add('wasd')
+}
 
 const getScoresAndResult = () => {
     const scores = document.getElementById("score")
-    scores.innerText = `Shield score: ${playerOneScore} \n\n Destroyer score: ${playerTwoScore}`
-     if(playerOneScore >= 10 && playerTwoScore < 20){
-            roundWiiner = "The shield has prevailed and protected the castle"
-                
-     } else if(playerTwoScore >= 10 && playerOneScore < 20 ){
-            roundWiiner = "The destroyer has has broken our shield and has taken over the castle"      
-    }
+    scores.innerText = `Shield score: ${playerOneScore} \n\n Catapult score: ${playerTwoScore}`
+    if (playerOneScore >= 10 && playerTwoScore < 20) {
+        roundWiiner = "The shield has prevailed and protected the castle"
 
-    const result = document.getElementById("result")
-    result.innerText = roundWiiner
+    } else if (playerTwoScore >= 10 && playerOneScore < 20) {
+        roundWiiner = "The destroyer has has broken our shield and has taken over the castle"
     }
 
+    const resultText = document.getElementById("result-text")
+    const result = document.getElementById('result')
+
+    // result.classList.add('active')
+    resultText.innerText = roundWiiner
+    result.classList.add('active')
+}
+
 
- /*function to clear the game loop when it loops*/
-const clearInt = () =>{
+/*function to clear the game loop when it loops*/
+const clearInt = () => {
     c.clearRect(0, 0, canvas.width, canvas.height)
 }
 /*----------------------------------game loop----------------------------------------------*/
@@ -192,30 +229,52 @@ const gameLoop = () => {
     shield.render()
     player2.render()
     /*----create  and renders multiple circles ---*/
-    for(var i = 0; i < circles.length; i++){   ////
+    for (var i = 0; i < circles.length; i++) {   ////
         circles[i].draw()               //////////
         circles[i].shootAndEndOfGame()  /////////
         circles[i].detectPlayer()       ////////
         circles[i].detectWall()         ///////
-     }                          //////////////
-   /*---------------------------------------*/   
+    }                          //////////////
+    /*---------------------------------------*/
     movements()
-    getScoresAndResult()   
+    getScoresAndResult()
 }
 /*------------------------------------------------------------------------------------------*/
 
-setInterval(gameLoop,1000/60)
+setInterval(gameLoop, 1000 / 60)
 
 
 /*adding eventListerners to the program*/
-document.addEventListener("keydown", (e) =>{
+document.addEventListener("keydown", (e) => {
     controller(e.key, true)
 })
 document.addEventListener("keyup", (e) => {
     controller(e.key, false)
 })
 
+start.addEventListener('click', startGame)
+
 restart.addEventListener("click", gameReset)
 
 document.addEventListener('keydown', fire)
 
+const restartBtn = document.getElementById('restart')
+const howToBtn = document.getElementById('how-to')
+
+// Add a keydown event listener to the restartBtn
+restartBtn.addEventListener('keydown', function (event) {
+    // Check if the key pressed is the space bar
+    if (event.keyCode === 32) {
+        // Prevent the default action to stop the space bar from activating the button
+        event.preventDefault()
+    }
+})
+
+howToBtn.addEventListener('keydown', function (event) {
+    // Check if the key pressed is the space bar
+    if (event.keyCode === 32) {
+        // Prevent the default action to stop the space bar from activating the button
+        event.preventDefault()
+    }
+})
+