diff --git a/game2.html b/game2.html
index a221e12..188ef46 100644
--- a/game2.html
+++ b/game2.html
@@ -22,46 +22,51 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
     <div class="row">
       <div class="col">
         <div class="row">
-          <div style="background-color: aqua;">
-            <p class="fs-3">Moves</p>
+          <div style="background-color: orange; opacity: 90%;">
+            <p class="fs-3" style="text-align: center; color: rgb(255, 255, 255); font-weight: bold;">Moves</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">White Move</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">White Move</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                        orient="auto-start-reverse">
+                      <marker id="arrow" stroke="#47ff47" fill="#47ff47" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                      marker-end="url(#arrow)" />
                   </svg>
+                  <!-- A line with a marker -->
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                    marker-end="url(#arrow)" />
                 </div>
               </div>
 
             </div>
             <div class="row" style="padding: 10%; height: 30px; width: 100%;">
               <div class="col" style="height: 50px">
-                <p style="margin-right: 10px">Black Move</p>
+                <p style="margin-right: 10px;color: white;  font-weight: bold; ">Black Move</p>
               </div>
               <div class="col">
                 <svg viewBox="0 0 100 100">
                   <defs>
 
                     <!-- A marker to be used as an arrowhead -->
-                    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                      orient="auto-start-reverse">
+                    <marker id="arrow2" viewBox="0 0 10 10" refX="5" stroke="#AD0AFD" fill="#AD0AFD" refY="5"
+                      markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                       <path d="M 0 0 L 10 5 L 0 10 z" />
                     </marker>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#AD0AFD" stroke-width="3.5px"
+                    marker-end="url(#arrow2)" />
                 </svg>
               </div>
             </div>
@@ -70,24 +75,25 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div style="background-color: yellow">
-            <p class="fs-3">Check and Checkmate</p>
+          <div style="background-color: lightblue; opacity: 200%;">
+            <p class="fs-3" style="text-align: center; color: white; font-weight: bold;">Check and Checkmate</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">Check</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">Check</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
+                      <marker id="arrow3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
                         orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-dasharray="10, 10, 10"
+                      stroke-width="10.5px" />
                   </svg>
                 </div>
               </div>
@@ -95,7 +101,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
             </div>
             <div class="row" style="padding: 10%; height: 30px; width: 100%;">
               <div class="col" style="height: 50px">
-                <p style="margin-right: 10px">CheckMate</p>
+                <p style="margin-right: 10px; color: white; font-weight: bold; ">CheckMate</p>
               </div>
               <div class="col">
                 <svg viewBox="0 0 100 100">
@@ -109,7 +115,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-width="10.5px" />
                 </svg>
               </div>
             </div>
@@ -118,12 +124,12 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div style="background-color: aqua;">
-            <p class="fs-3">Kill</p>
+          <div style="background-color: orange; opacity: 90%;">
+            <p class="fs-3" style="text-align: center; color: white; font-weight: bold">Kill</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">White Move</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">Kill</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
@@ -135,7 +141,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <circle r="10" cx="20" cy="20" fill="none" stroke-width="5px" stroke="yellow"></circle>
                   </svg>
                 </div>
               </div>
@@ -159,41 +165,44 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
     </div>
   </div>
   </div>
-  <div style="background-color: orange">
-    <div class="container" style="margin-top: 50px">
-      <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
-      <hr>
+  <div style="background-color: rgb(249, 137, 57);">
+    <div class="container" style="margin-top: 0px;">
+      <div style="padding-top: 20px">
+        <h3 style="text-align: center; color: white; font-weight: bold;">Game 2: Initial Movements of the Game: Opening Game
+        </h3>
+      </div>
+
     </div>
-    <div class="dad-container" style="background-color: bisque;">
+    <div class="dad-container" style="background-color: bisque">
       <div class="row" style="margin-top: 4%; margin-left: 5%; margin-bottom:  3%">
         <div class="col">
           <div class="main-container">
             <div class="file-a files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">1</p>
               </div>
-              <div class="square">
+              <div class="square top-bold left-bold">
                 <img src="./images/pieces/black/rook.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square left-bold">
                 <img src="./images/pieces/black/pawn.png" alt="" />
               </div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square">
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold left-bold">
                 <img src="./images/pieces/white/rook.png" alt="" />
               </div>
             </div>
             <div class="file-b files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">2</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/knight.png" alt="" />
               </div>
               <div class="square">
@@ -206,15 +215,15 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/knight.png" alt="" />
               </div>
             </div>
             <div class="file-c files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">3</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/bishop.png" alt="" />
               </div>
               <div class="square">
@@ -227,15 +236,15 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/bishop.png" alt="" />
               </div>
             </div>
             <div class="file-d files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">4</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/queen.png" alt="" />
               </div>
               <div class="square">
@@ -248,15 +257,15 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/queen.png" alt="" />
               </div>
             </div>
             <div class="file-e files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">5</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/king.png" alt="" />
               </div>
               <div class="square">
@@ -269,15 +278,15 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/king.png" alt="" />
               </div>
             </div>
             <div class="file-f files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">6</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/bishop.png" alt="" />
               </div>
               <div class="square">
@@ -290,15 +299,15 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/bishop.png" alt="" />
               </div>
             </div>
             <div class="file-g files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">7</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/knight.png" alt="" />
               </div>
               <div class="square">
@@ -311,64 +320,64 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/knight.png" alt="" />
               </div>
             </div>
             <div class="file-h files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">8</p>
               </div>
-              <div class="square">
+              <div class="square top-bold right-bold">
                 <img src="./images/pieces/black/rook.png  " alt="" />
               </div>
-              <div class="square">
+              <div class="square right-bold">
                 <img src="./images/pieces/black/pawn.png" alt="" />
               </div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square">
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square right-bold bottom-bold">
                 <img src="./images/pieces/white/rook.png" alt="" />
               </div>
             </div>
             <div class="file-i files">
-              <div class="square">
+              <div class="square" style="background-color: bisque;">
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">A</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">B</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">C</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">D</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">E</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">F</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">G</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">H</p>
               </div>
             </div>
           </div>
         </div>
         <div class="col" style="padding: 12%">
-          <p class="fs-3">Death Pieces</p>
-          <div style="background-color: aqua;">
+          <p class="fs-3" style="text-align: center;">Death Pieces</p>
+          <div style="background:linear-gradient(to left, #33ccff 10%, #ff99cc 100%);">
             <div class="row">
               <div class="col">
                 <img src="../images/pieces/black/pawn.png" alt="" />
@@ -435,29 +444,74 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
         </div>
       </div>
     </div>
-    <div class="container" style="background-color: greenyellow; margin-top: 1%">
-      <p class="fs-3"> Explanation: </p>
-      <hr>
-      <p>1. Finally White Player is the winner as they are no positional movement for the Black Player.</p>
-      <p>2. Inital positions of the Players: </p>
-      <p>White: Queen - G5</p>
-      <p>Rook - RA2</p>
-      <p> King - A8</p>
-      <p>Knight - H2</p>
-      <p>Camel - B5</p>
-      <p>Rook - RF4</p>
-      <p>Black: King - E1</p>
-      <p>Camel - B8</p>
-      <p>Soldiers - D5 and E7</p>
-      <p>3. Movements: </p>
-      <p> First White Queen moves to the H4 then Check</p>
-      <p>Next, Black king responds and the only possible move is D1.</p>
-      <p>Next, White player moves camel (B5) to the A4 position. then Check.</p>
-      <p>Responding to the white player, the only possible way is c1. </p>
-      <p>Third move of the white player is the Rook (RF4) to F1, then Checkmate.</p>
-      <p> White wins. </p>
+    <div class="container" style="background-color: rgb(249, 137, 57); margin-top: 1%">
+      <p class="fs-3" style="text-align: center; color: white; font-weight: bold;"> Explanation: </p>
+    </div>
+    <div style="background-color: bisque;">
+      <div class="container" style="padding: 8%;">
+        <table class="table table-head border border-5 border-dark">
+          <thead>
+            <tr style="font-weight: bold; font-size: 140%;">
+              <th scope="col">#</th>
+              <th scope="col">Piece</th>
+              <th scope="col">Move</th>
+              <th scope="col">Result</th>
+              <th scope="col">Description</th>
+            </tr>
+          </thead>
+          <tbody style="font-size: 110%">
+            <tr style="background-color: white">
+              <th scope="row">1</th>
+              <td>Queen: G5</td>
+              <td> G5 --&gt H4</td>
+              <td>Check</td>
+              <td>White Queen to Black King Check by diagonally</td>
+            </tr>
+            <tr style="background-color: gainsboro">
+              <th scope="row">2</th>
+              <td>King: E1</td>
+              <td> E1 ---&gt D1</td>
+              <td>Escapes from Check</td>
+              <td>Black King's only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">3</th>
+              <td>Camel: B5</td>
+              <td>B5 --&gt A4</td>
+              <td>Check</td>
+              <td>White Camel Check to the Black King</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">4</th>
+              <td>King: D1</td>
+              <td>D1 --&gt C1</td>
+              <td>Escapes from Check</td>
+              <td>Black King only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">5</th>
+              <td>Rook: F4</td>
+              <td>F4 -- &gt F1</td>
+              <td>CheckMate</td>
+              <td>White Wins</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">6</th>
+              <td>King: C1</td>
+              <td>No Move </td>
+              <td>White Wins</td>
+              <td>White Player Wins</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
+  <hr>
+  <p style="text-align: center; font-weight: bold;">Team: 2022101005 , 2022101002, 2022101044</p>
+  <br>
+  <p style="text-align: center; font-weight: bold;"> Code: <a
+      href="https://github.com/hemanth-sunkireddy/Static_Chess_Game_Visualisation">Code Link</a> </p>
 </body>
 <script>
 
@@ -467,8 +521,8 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
     function updateGame() {
       var gameValue = parseInt(Slider.value);
       if (gameValue == 1) {
-        window.location.href = "index.html";          
-        console.log("1");
+        window.location.href = "index.html";
+        console.log("2");
       } else if (gameValue == 3) {
         window.location.href = "game3.html";
         console.log("3");
@@ -483,4 +537,5 @@ <h4 style="text-align: center">Game 2: Initial Movements of the Game</h4>
   });
 
 </script>
+
 </html>
\ No newline at end of file
diff --git a/game3.html b/game3.html
index b9c4726..0c869da 100644
--- a/game3.html
+++ b/game3.html
@@ -22,46 +22,51 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
     <div class="row">
       <div class="col">
         <div class="row">
-          <div style="background-color: aqua;">
-            <p class="fs-3">Moves</p>
+          <div style="background-color: orange; opacity: 90%;">
+            <p class="fs-3" style="text-align: center; color: rgb(255, 255, 255); font-weight: bold;">Moves</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">White Move</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">White Move</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                        orient="auto-start-reverse">
+                      <marker id="arrow" stroke="#47ff47" fill="#47ff47" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                      marker-end="url(#arrow)" />
                   </svg>
+                  <!-- A line with a marker -->
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                    marker-end="url(#arrow)" />
                 </div>
               </div>
 
             </div>
             <div class="row" style="padding: 10%; height: 30px; width: 100%;">
               <div class="col" style="height: 50px">
-                <p style="margin-right: 10px">Black Move</p>
+                <p style="margin-right: 10px;color: white;  font-weight: bold; ">Black Move</p>
               </div>
               <div class="col">
                 <svg viewBox="0 0 100 100">
                   <defs>
 
                     <!-- A marker to be used as an arrowhead -->
-                    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                      orient="auto-start-reverse">
+                    <marker id="arrow2" viewBox="0 0 10 10" refX="5" stroke="#AD0AFD" fill="#AD0AFD" refY="5"
+                      markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                       <path d="M 0 0 L 10 5 L 0 10 z" />
                     </marker>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#AD0AFD" stroke-width="3.5px"
+                    marker-end="url(#arrow2)" />
                 </svg>
               </div>
             </div>
@@ -70,24 +75,25 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div style="background-color: yellow">
-            <p class="fs-3">Check and Checkmate</p>
+          <div style="background-color: lightblue; opacity: 200%;">
+            <p class="fs-3" style="text-align: center; color: white; font-weight: bold;">Check and Checkmate</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">Check</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">Check</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
+                      <marker id="arrow3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
                         orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-dasharray="10, 10, 10"
+                      stroke-width="10.5px" />
                   </svg>
                 </div>
               </div>
@@ -95,7 +101,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
             </div>
             <div class="row" style="padding: 10%; height: 30px; width: 100%;">
               <div class="col" style="height: 50px">
-                <p style="margin-right: 10px">CheckMate</p>
+                <p style="margin-right: 10px; color: white; font-weight: bold; ">CheckMate</p>
               </div>
               <div class="col">
                 <svg viewBox="0 0 100 100">
@@ -109,7 +115,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-width="10.5px" />
                 </svg>
               </div>
             </div>
@@ -118,12 +124,12 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div style="background-color: aqua;">
-            <p class="fs-3">Kill</p>
+          <div style="background-color: orange; opacity: 90%;">
+            <p class="fs-3" style="text-align: center; color: white; font-weight: bold">Kill</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
                 <div class="col">
-                  <p style="margin-right: 10px">White Move</p>
+                  <p style="margin-right: 10px; color: white; font-weight: bold;">Kill</p>
                 </div>
                 <div class="col">
                   <svg viewBox="0 0 100 100 ">
@@ -135,7 +141,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <circle r="10" cx="20" cy="20" fill="none" stroke-width="5px" stroke="yellow"></circle>
                   </svg>
                 </div>
               </div>
@@ -159,41 +165,44 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
     </div>
   </div>
   </div>
-  <div style="background-color: orange">
-    <div class="container" style="margin-top: 50px">
-      <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
-      <hr>
+  <div style="background-color: rgb(249, 137, 57);">
+    <div class="container" style="margin-top: 0px;">
+      <div style="padding-top: 20px">
+        <h3 style="text-align: center; color: white; font-weight: bold;">Game 3: Killing Movements of the Game - Middle Game
+        </h3>
+      </div>
+
     </div>
-    <div class="dad-container" style="background-color: bisque;">
+    <div class="dad-container" style="background-color: bisque">
       <div class="row" style="margin-top: 4%; margin-left: 5%; margin-bottom:  3%">
         <div class="col">
           <div class="main-container">
             <div class="file-a files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">1</p>
               </div>
-              <div class="square">
+              <div class="square top-bold left-bold">
                 <img src="./images/pieces/black/rook.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square left-bold">
                 <img src="./images/pieces/black/pawn.png" alt="" />
               </div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square">
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold"></div>
+              <div class="square left-bold">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold left-bold">
                 <img src="./images/pieces/white/rook.png" alt="" />
               </div>
             </div>
             <div class="file-b files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">2</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/knight.png" alt="" />
               </div>
               <div class="square">
@@ -206,15 +215,15 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/knight.png" alt="" />
               </div>
             </div>
             <div class="file-c files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">3</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/bishop.png" alt="" />
               </div>
               <div class="square">
@@ -227,15 +236,15 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/bishop.png" alt="" />
               </div>
             </div>
             <div class="file-d files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">4</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/queen.png" alt="" />
               </div>
               <div class="square">
@@ -248,15 +257,15 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/queen.png" alt="" />
               </div>
             </div>
             <div class="file-e files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">5</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/king.png" alt="" />
               </div>
               <div class="square">
@@ -269,15 +278,15 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/king.png" alt="" />
               </div>
             </div>
             <div class="file-f files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">6</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/bishop.png" alt="" />
               </div>
               <div class="square">
@@ -290,15 +299,15 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/bishop.png" alt="" />
               </div>
             </div>
             <div class="file-g files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">7</p>
               </div>
-              <div class="square">
+              <div class="square top-bold">
                 <img src="./images/pieces/black/knight.png" alt="" />
               </div>
               <div class="square">
@@ -311,64 +320,64 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
               <div class="square">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square bottom-bold">
                 <img src="./images/pieces/white/knight.png" alt="" />
               </div>
             </div>
             <div class="file-h files">
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">8</p>
               </div>
-              <div class="square">
+              <div class="square top-bold right-bold">
                 <img src="./images/pieces/black/rook.png  " alt="" />
               </div>
-              <div class="square">
+              <div class="square right-bold">
                 <img src="./images/pieces/black/pawn.png" alt="" />
               </div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square"></div>
-              <div class="square">
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold"></div>
+              <div class="square right-bold">
                 <img src="./images/pieces/white/pawn.png" alt="" />
               </div>
-              <div class="square">
+              <div class="square right-bold bottom-bold">
                 <img src="./images/pieces/white/rook.png" alt="" />
               </div>
             </div>
             <div class="file-i files">
-              <div class="square">
+              <div class="square" style="background-color: bisque;">
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">A</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">B</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">C</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">D</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">E</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">F</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">G</p>
               </div>
-              <div class="square">
+              <div class="square" style="background-color: lightblue;">
                 <p style="font-size: 300%; justify-content: center; align-items: center; margin-left: 20px;">H</p>
               </div>
             </div>
           </div>
         </div>
         <div class="col" style="padding: 12%">
-          <p class="fs-3">Death Pieces</p>
-          <div style="background-color: aqua;">
+          <p class="fs-3" style="text-align: center;">Death Pieces</p>
+          <div style="background:linear-gradient(to left, #33ccff 10%, #ff99cc 100%);">
             <div class="row">
               <div class="col">
                 <img src="../images/pieces/black/pawn.png" alt="" />
@@ -435,29 +444,74 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
         </div>
       </div>
     </div>
-    <div class="container" style="background-color: greenyellow; margin-top: 1%">
-      <p class="fs-3"> Explanation: </p>
-      <hr>
-      <p>1. Finally White Player is the winner as they are no positional movement for the Black Player.</p>
-      <p>2. Inital positions of the Players: </p>
-      <p>White: Queen - G5</p>
-      <p>Rook - RA2</p>
-      <p> King - A8</p>
-      <p>Knight - H2</p>
-      <p>Camel - B5</p>
-      <p>Rook - RF4</p>
-      <p>Black: King - E1</p>
-      <p>Camel - B8</p>
-      <p>Soldiers - D5 and E7</p>
-      <p>3. Movements: </p>
-      <p> First White Queen moves to the H4 then Check</p>
-      <p>Next, Black king responds and the only possible move is D1.</p>
-      <p>Next, White player moves camel (B5) to the A4 position. then Check.</p>
-      <p>Responding to the white player, the only possible way is c1. </p>
-      <p>Third move of the white player is the Rook (RF4) to F1, then Checkmate.</p>
-      <p> White wins. </p>
+    <div class="container" style="background-color: rgb(249, 137, 57); margin-top: 1%">
+      <p class="fs-3" style="text-align: center; color: white; font-weight: bold;"> Explanation: </p>
+    </div>
+    <div style="background-color: bisque;">
+      <div class="container" style="padding: 8%;">
+        <table class="table table-head border border-5 border-dark">
+          <thead>
+            <tr style="font-weight: bold; font-size: 140%;">
+              <th scope="col">#</th>
+              <th scope="col">Piece</th>
+              <th scope="col">Move</th>
+              <th scope="col">Result</th>
+              <th scope="col">Description</th>
+            </tr>
+          </thead>
+          <tbody style="font-size: 110%">
+            <tr style="background-color: white">
+              <th scope="row">1</th>
+              <td>Queen: G5</td>
+              <td> G5 --&gt H4</td>
+              <td>Check</td>
+              <td>White Queen to Black King Check by diagonally</td>
+            </tr>
+            <tr style="background-color: gainsboro">
+              <th scope="row">2</th>
+              <td>King: E1</td>
+              <td> E1 ---&gt D1</td>
+              <td>Escapes from Check</td>
+              <td>Black King's only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">3</th>
+              <td>Camel: B5</td>
+              <td>B5 --&gt A4</td>
+              <td>Check</td>
+              <td>White Camel Check to the Black King</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">4</th>
+              <td>King: D1</td>
+              <td>D1 --&gt C1</td>
+              <td>Escapes from Check</td>
+              <td>Black King only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">5</th>
+              <td>Rook: F4</td>
+              <td>F4 -- &gt F1</td>
+              <td>CheckMate</td>
+              <td>White Wins</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">6</th>
+              <td>King: C1</td>
+              <td>No Move </td>
+              <td>White Wins</td>
+              <td>White Player Wins</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
+  <hr>
+  <p style="text-align: center; font-weight: bold;">Team: 2022101005 , 2022101002, 2022101044</p>
+  <br>
+  <p style="text-align: center; font-weight: bold;"> Code: <a
+      href="https://github.com/hemanth-sunkireddy/Static_Chess_Game_Visualisation">Code Link</a> </p>
 </body>
 <script>
 
@@ -467,7 +521,7 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
     function updateGame() {
       var gameValue = parseInt(Slider.value);
       if (gameValue == 2) {
-        window.location.href = "game2.html";          
+        window.location.href = "game2.html";
         console.log("2");
       } else if (gameValue == 1) {
         window.location.href = "index.html";
@@ -483,4 +537,5 @@ <h4 style="text-align: center">Game 3: Middle Of the Game - Killing Moves </h4>
   });
 
 </script>
+
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index b487eaa..183c0d0 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
     <div class="row">
       <div class="col">
         <div class="row">
-          <div
-            style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,215,54,1) 0%, rgba(0,212,255,1) 100%);">
+          <div style="background-color: orange; opacity: 90%;">
             <p class="fs-3" style="text-align: center; color: rgb(255, 255, 255); font-weight: bold;">Moves</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
@@ -34,14 +33,18 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                        orient="auto-start-reverse">
+                      <marker id="arrow" stroke="#47ff47" fill="#47ff47" viewBox="0 0 10 10" refX="5" refY="5"
+                        markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                      marker-end="url(#arrow)" />
                   </svg>
+                  <!-- A line with a marker -->
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#47ff47" stroke-width="3.5px"
+                    marker-end="url(#arrow)" />
                 </div>
               </div>
 
@@ -55,14 +58,15 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   <defs>
 
                     <!-- A marker to be used as an arrowhead -->
-                    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
-                      orient="auto-start-reverse">
+                    <marker id="arrow2" viewBox="0 0 10 10" refX="5" stroke="#AD0AFD" fill="#AD0AFD" refY="5"
+                      markerWidth="6" markerHeight="6" orient="auto-start-reverse">
                       <path d="M 0 0 L 10 5 L 0 10 z" />
                     </marker>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="#AD0AFD" stroke-width="3.5px"
+                    marker-end="url(#arrow2)" />
                 </svg>
               </div>
             </div>
@@ -71,8 +75,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div
-            style="background: linear-gradient(90deg, rgb(59, 229, 29) 0%, rgb(67, 239, 159) 0%, rgba(32, 149, 173, 0.683) 100%);">
+          <div style="background-color: lightblue; opacity: 200%;">
             <p class="fs-3" style="text-align: center; color: white; font-weight: bold;">Check and Checkmate</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
@@ -83,13 +86,14 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   <svg viewBox="0 0 100 100 ">
                     <defs>
                       <!-- A marker to be used as an arrowhead -->
-                      <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
+                      <marker id="arrow3" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
                         orient="auto-start-reverse">
                         <path d="M 0 0 L 10 5 L 0 10 z" />
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-dasharray="10, 10, 10"
+                      stroke-width="10.5px" />
                   </svg>
                 </div>
               </div>
@@ -111,7 +115,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                   </defs>
 
                   <!-- A line with a marker -->
-                  <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                  <line x1="10" y1="10" x2="90" y2="10" stroke="red" stroke-width="10.5px" />
                 </svg>
               </div>
             </div>
@@ -120,8 +124,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
       </div>
       <div class="col">
         <div class="row">
-          <div
-            style="background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(37,215,54,1) 0%, rgba(0,212,255,1) 100%);">
+          <div style="background-color: orange; opacity: 90%;">
             <p class="fs-3" style="text-align: center; color: white; font-weight: bold">Kill</p>
             <div class="col">
               <div class="row" style="padding: 10%; height: 30px; width: 100%">
@@ -138,7 +141,7 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
                       </marker>
                     </defs>
                     <!-- A line with a marker -->
-                    <line x1="10" y1="10" x2="90" y2="10" stroke="black" marker-end="url(#arrow)" />
+                    <circle r="10" cx="20" cy="20" fill="none" stroke-width="5px" stroke="yellow"></circle>
                   </svg>
                 </div>
               </div>
@@ -165,8 +168,8 @@ <h3 style="text-align: center;">Static Chess game Visualisation</h3>
   <div style="background-color: rgb(249, 137, 57);">
     <div class="container" style="margin-top: 0px;">
       <div style="padding-top: 20px">
-        <h3 style="text-align: center; color: white; font-weight: bold;">Game 1: Final Movements of Game - CheckMate
-          Game</h3>
+        <h3 style="text-align: center; color: white; font-weight: bold;">Game 1: CheckMate movements of Game - End Game
+        </h3>
       </div>
 
     </div>
@@ -445,26 +448,70 @@ <h3 style="text-align: center; color: white; font-weight: bold;">Game 1: Final M
       <p class="fs-3" style="text-align: center; color: white; font-weight: bold;"> Explanation: </p>
     </div>
     <div style="background-color: bisque;">
-      <p>1. Finally White Player is the winner as they are no positional movement for the Black Player.</p>
-      <p>2. Inital positions of the Players: </p>
-      <p>White: Queen - G5</p>
-      <p>Rook - RA2</p>
-      <p> King - A8</p>
-      <p>Knight - H2</p>
-      <p>Camel - B5</p>
-      <p>Rook - RF4</p>
-      <p>Black: King - E1</p>
-      <p>Camel - B8</p>
-      <p>Soldiers - D5 and E7</p>
-      <p>3. Movements: </p>
-      <p> First White Queen moves to the H4 then Check</p>
-      <p>Next, Black king responds and the only possible move is D1.</p>
-      <p>Next, White player moves camel (B5) to the A4 position. then Check.</p>
-      <p>Responding to the white player, the only possible way is c1. </p>
-      <p>Third move of the white player is the Rook (RF4) to F1, then Checkmate.</p>
-      <p> White wins. </p>
+      <div class="container" style="padding: 8%;">
+        <table class="table table-head border border-5 border-dark">
+          <thead>
+            <tr style="font-weight: bold; font-size: 140%;">
+              <th scope="col">#</th>
+              <th scope="col">Piece</th>
+              <th scope="col">Move</th>
+              <th scope="col">Result</th>
+              <th scope="col">Description</th>
+            </tr>
+          </thead>
+          <tbody style="font-size: 110%">
+            <tr style="background-color: white">
+              <th scope="row">1</th>
+              <td>Queen: G5</td>
+              <td> G5 --&gt H4</td>
+              <td>Check</td>
+              <td>White Queen to Black King Check by diagonally</td>
+            </tr>
+            <tr style="background-color: gainsboro">
+              <th scope="row">2</th>
+              <td>King: E1</td>
+              <td> E1 ---&gt D1</td>
+              <td>Escapes from Check</td>
+              <td>Black King's only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">3</th>
+              <td>Camel: B5</td>
+              <td>B5 --&gt A4</td>
+              <td>Check</td>
+              <td>White Camel Check to the Black King</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">4</th>
+              <td>King: D1</td>
+              <td>D1 --&gt C1</td>
+              <td>Escapes from Check</td>
+              <td>Black King only possible move</td>
+            </tr>
+            <tr style="background-color: white;">
+              <th scope="row">5</th>
+              <td>Rook: F4</td>
+              <td>F4 -- &gt F1</td>
+              <td>CheckMate</td>
+              <td>White Wins</td>
+            </tr>
+            <tr style="background-color: gainsboro;">
+              <th scope="row">6</th>
+              <td>King: C1</td>
+              <td>No Move </td>
+              <td>White Wins</td>
+              <td>White Player Wins</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
+  <hr>
+  <p style="text-align: center; font-weight: bold;">Team: 2022101005 , 2022101002, 2022101044</p>
+  <br>
+  <p style="text-align: center; font-weight: bold;"> Code: <a
+      href="https://github.com/hemanth-sunkireddy/Static_Chess_Game_Visualisation">Code Link</a> </p>
 </body>
 <script>