diff --git a/Web/Html,CSS,Javascript/drawing-app/index.html b/Web/Html,CSS,Javascript/drawing-app/index.html
index e55b657..1db6106 100644
--- a/Web/Html,CSS,Javascript/drawing-app/index.html
+++ b/Web/Html,CSS,Javascript/drawing-app/index.html
@@ -9,19 +9,19 @@
 </head>
 
 <body>
-  <canvas id="canvas" width="800" height="700"></canvas>
+  <canvas id="canvas" width="800" height="500"></canvas>
   <div class="toolbox">
     <button id="decrease">-</button>
-    <span id="size">10</span>
+    <span id="size" title="Thickness">10</span>
     <button id="increase">+</button>
-    <input type="color" id="color">
-    <button id="eraser"> <img src="images.png" style="height: 25px ;" alt=""> </button>
-    <input type="button" id="click" value="📷" />
-    <button id="clear">X</button>
+    <input type="color" id="color" title="Color">
+    <button id="eraser" title="Eraser"> <img src="images.png" style="height: 25px ;" alt=""> </button>
+    <input type="button" id="click" value="📷" title="Snapshot"/>
+    <button id="clear" title="Clear">X</button>
   </div>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.4/html2canvas.min.js"></script>
   <script src="script.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/Web/Html,CSS,Javascript/drawing-app/style.css b/Web/Html,CSS,Javascript/drawing-app/style.css
index 9fab7d4..a98da88 100644
--- a/Web/Html,CSS,Javascript/drawing-app/style.css
+++ b/Web/Html,CSS,Javascript/drawing-app/style.css
@@ -5,7 +5,7 @@
 }
 
 body {
-  background-color: #f5f5f5;
+  background-color: #e8ba22;
   font-family: 'Roboto', sans-serif;
   display: flex;
   flex-direction: column;
@@ -16,12 +16,13 @@ body {
 }
 
 canvas {
-  border: 2px solid steelblue;
+  border: 3px solid steelblue;
+  background-color: whitesmoke;
 }
 
 .toolbox {
   background-color: steelblue;
-  border: 1px solid slateblue;
+  border: 3px solid slateblue;
   display: flex;
   width: 804px;
   padding: 1rem;
@@ -33,12 +34,14 @@ canvas {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 2rem;
+  font-size: 1.5rem;
   height: 50px;
   width: 50px;
   margin: 0.25rem;
   padding: 0.25rem;
   cursor: pointer;
+  border-radius: 10px;
+  box-shadow: 2px 2px  #e8ba22;
 }
 
 .toolbox > *:last-child {
@@ -48,3 +51,18 @@ canvas {
   margin-left: auto;
 }
 
+@media only screen and (max-width: 800px) {
+    #canvas{
+        width:80vw;
+        height:70vh;
+    }
+    .toolbox{
+      width:80vw;
+      height:15vh;
+    }
+    .toolbox > * {
+      font-size: 1.2rem;
+      border-radius: 10px;
+    }
+  }
+
