diff --git a/index.html b/index.html
index 0ca6868..1819a81 100644
--- a/index.html
+++ b/index.html
@@ -2,8 +2,17 @@
 <html lang="en">
 
 <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Stylesheet -->
+    <link rel="stylesheet" href="style.css" />
+
+    <!-- JavaScript files -->
+    <script defer src="./js/edge.js"></script>
+    <script defer src="./js/box.js"></script>
+    <script defer src="./js/board.js"></script>
+    <script defer src="./js/game.js"></script>
 
 	<!-- Stylesheet -->
 	<link rel="stylesheet" href="style.css" />
@@ -17,14 +26,79 @@
 	<script defer src="./js/game.js"></script>
 	<script defer src="./js/theme.js"></script>
 
-	<!-- Logo of the game -->
-	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
 
-	<!-- Title of the game -->
-	<title>Dots & Boxes Game</title>
+    <!-- Logo of the game -->
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+
+    <!-- Title of the game -->
+    <title>Dots & Boxes Game</title>
 </head>
 
 <body>
+    <!-- Setting Page -->
+    <div class="settings">
+        <div class="form">
+            <h1 class="heading"
+                style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
+                ▁ ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁
+            </h1>
+
+            <h3 class="instructions-heading">Instructions</h3>
+
+            <p class="instructions">
+                1. Select the number of rows, columns and players. <br>
+                2. The player who has maximum number of boxes on board is the winner. <br>
+                3. Players will switch after every turn. But the player who has filled the last box, will get one extra
+                chance
+                consecutively. <br>
+            </p>
+
+        </div>
+
+        <!-- Form page -->
+        <div class="form">
+            <div>
+                <h2>What size of Board do you want? :</h2>
+            </div>
+
+            <div class="form-item">
+                <label for="rows">Rows : <span class="details">(between 5 and 30)</span></label>
+                <input type="number" id="rows" min="5" max="30" value="6" />
+            </div>
+
+            <div class="form-item">
+                <label for="columns">Columns : <span class="details">(between 5 and 30)</span></label>
+                <input type="number" id="columns" min="5" max="30" value="6" />
+            </div>
+
+            <div class="form-item">
+                <label for="players-count">Players : <span class="details">(between 2 and 6)</span></label>
+                <input type="number" id="players-count" min="2" max="6" value="2" />
+            </div>
+
+            <button class="start-btn">START</button>
+
+        </div>
+
+
+    </div>
+
+    <!-- Players -->
+    <div class="players" style="margin-top: 50px;"></div>
+
+    <div class="player-turn">
+        <div class="bg" style="margin-top: 60px;">
+            <span class="name">PlayerX</span>'s turn
+        </div>
+    </div>
+
+    <!-- Game Page -->
+    <div class="board" style="margin-top: 154px;"></div>
+    
+    <!-- Footer -->
+    <footer>
+        <p>&copy; 2024 Dots & Boxes. All rights reserved.</p>   
+    </footer>
 	
 	<!-- Setting Page -->
 	<div class="settings">
@@ -108,6 +182,10 @@ <h2 style="color: rgb(211, 211, 211);">What size of Board do you want? :</h2>
 
 	<button class="mute-btn"><i class="fa fa-volume-up fa-2x"></i></button>
 
+
 </body>
 
 </html>
+<!--Video by <a href="https://pixabay.com/users/blendertimer-9538909/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Daniel Roberts</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Pixabay</a>
+</a>
+
diff --git a/style.css b/style.css
index fd72280..4990363 100644
--- a/style.css
+++ b/style.css
@@ -323,6 +323,18 @@ h1 {
 .settings button:active {
 	background: rgb(70, 70, 70);
 }
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #333;
+    color: white;
+    text-align: center;
+    padding: 10px 0;
+    z-index: 1000; 
+}
 .back{
 	position: absolute;
 	right: 0;
