diff --git a/index.html b/index.html
index dcc4e70..e6eaa9c 100644
--- a/index.html
+++ b/index.html
@@ -1,20 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <link rel="stylesheet" href="styles.css">
     <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
+    <link rel="stylesheet" href="styles.css">
 </head>
-<body>
-    <div class="selectors">
-        <div class="color-selection board-color">
-            <div class="color-header">Board Colour : </div>
-            <input type="color" name="boardColor" id="board-color" value="#FFFFFF">
-        </div>
-        <div class="color-selection pen-color">
-            <div class="color-header">Pen Colour : </div>
-            <input type="color" name="penColor" id="pen-color">
-        </div>
+
+<body onload="blackBoard()">
+    <div class="container-fluid">
+        <h3>Welcome to &nbsp;<h3>
+                <h3 style="color:rgb(17, 106, 17);"> The Board</h3>
     </div>
+
     <div class="canvas-container">
         <canvas id="black-board"></canvas>
     </div>
@@ -24,9 +27,20 @@
         <button id="download">
             <img src="/assets/ico/download.svg">
         </button>
+
     </div>
 
     <script src="script.js"></script>
     <script src="colorChanges.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
+        integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js"
+        integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy"
+        crossorigin="anonymous"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index b173a18..8e55650 100644
--- a/styles.css
+++ b/styles.css
@@ -7,9 +7,14 @@ html {
 body {
   font-family: "Poppins", sans-serif;
   background: #2c3131;
+  color: white;
   height: 100%;
+
+}
+
+.container {
   display: flex;
-  flex-direction: column;
+  /* flex-direction: column; */
   align-items: center;
   justify-content: center;
 }
@@ -17,11 +22,15 @@ body {
 .selectors {
   margin: auto;
   display: flex;
+  flex-direction: column;
   align-items: center;
+  color: white;
+  padding-top: 0;
+  margin-top: 0;
+  font-size: large;
   justify-content: center;
-  background: linear-gradient(to right, #eea959, #e68a22);
-  border-radius: 50px;
-  padding-right: 40px;
+  /* height: 80%; */
+
 }
 
 .color-selection {
@@ -32,18 +41,34 @@ body {
 }
 
 .color-header {
-  color: rgb(44, 39, 39);
+  /* color: rgb(44, 39, 39); */
   margin: 20px;
 }
 
 .canvas-container {
   height: 100%;
+  width: 70%;
   display: flex;
+  margin-top: 0;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
 }
 
+.container-fluid {
+  /* margin: 50px; */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  margin-bottom: 40px;
+  background-color: hsla(0, 0%, 0%, 0.3);
+  backdrop-filter: saturate(180%) blur(10px);
+  /* opacity: 0.5; */
+  /* width: 98%; */
+}
+
 canvas {
   background: rgb(255, 255, 255);
   border: 3px solid rgba(0, 0, 0, 0.5);
@@ -57,7 +82,7 @@ canvas {
 
 .clear-button {
   padding: 30px;
-  position: absolute;
+  /* position: absolute; */
   right: 200px;
 }
 
@@ -81,7 +106,8 @@ canvas {
 }
 
 canvas:active {
-  border-color: rgb(192, 192, 192);
+  border-color: rgb(151, 151, 151);
+  box-shadow: rgba(164, 164, 164, 0.56) 0px 2px 10px 4px;
 }
 
 @media screen and (max-width: 700px) {
@@ -93,6 +119,7 @@ canvas:active {
     margin-right: auto;
     height: 50px;
   }
+
   canvas {
     background: white;
     margin-top: 0px;
@@ -100,12 +127,14 @@ canvas:active {
     height: 78vh;
     cursor: grabbing;
   }
-  
+
   .canvas-container button {
+
     position: relative;
     right: -90px;
     bottom: -180px;
   }
+
 }
 
 .clear-download-button button {
@@ -312,4 +341,5 @@ canvas:active {
   100% {
     margin: 0;
   }
+
 }
\ No newline at end of file
