diff --git a/static/canvas.css b/static/canvas.css
index a2dd7a1..f96bfc8 100644
--- a/static/canvas.css
+++ b/static/canvas.css
@@ -10,6 +10,8 @@
 
 html, body {
     height: 100%;
+    width: 100%;
+    margin: 0px;
 }
 
 .wrapper {
@@ -72,23 +74,24 @@ html, body {
 
 .toolbar {
     display: flex;
-    justify-content: space-around;
-    align-items: center;
+    flex-direction: row;
+    justify-content: start;
+    align-items: start;
     border-top: solid black 1px;
-    background-color: var(--utsa-blue);
+    background-color: gray;
     width: 100%;
-    height:auto;
+    height:100%;
 }
 
 .toolbarItems {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: start;
     font-weight: 900;
     color: white;
     text-align: center;
-    height: 100%;
-    width: 100px;
+    height: 20px;
+    width: 20px;
 }
 
 .strokePicker {
@@ -113,4 +116,4 @@ canvas {
       /* possible hamburger menu for moblie users*/
       position: absolute
     }
-  }
+}
\ No newline at end of file
diff --git a/static/canvas.html b/static/canvas.html
index 4d3135f..9a5fe55 100644
--- a/static/canvas.html
+++ b/static/canvas.html
@@ -20,23 +20,51 @@
         <a class="rightB">Settings</a>
       </div>
       <!--note to self: below IS the canvas-->
-      <!--<div class="canvasCont">-->
-        <canvas id="canvas" width="1000" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
-        <div id="toolbar" class="d-flex align-items-center toolbar">
-          <div class="toolbarItems">
-            <button id="zoomOut">-</button>
-          </div>
-          <div class="toolbarItems">
-            <label for="stroke">Strokes</label>
-            <input id="stroke" name="stroke" type="color" class="strokePicker">
-          </div>
-          <div class="toolbarItems">
-            <button onclick="zoomIn"id="zoomIn">+</button>
-          </div>
-        </div>
-      <!--</div>-->
+      <canvas id="canvas" width="1000" height="550" style="border:1px solid #000000;" alt="canvas"></canvas>
         <!--note to self: above IS the canvas-->
     </div>
+    <div id="toolbar" class="d-flex toolbar flex-wrap">
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(255, 255, 255);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0, 0, 0);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,128);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,0);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,0);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,0);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,128,128);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(0,0,128);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,0,128);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
+      </div>
+      <div class="toolbarItems">
+        <button id="colorPicker" style="height:20px; width:20px; background-color:rgb(128,128,64);" type="button"></button>
+      </div>
+      <!--<div class="toolbarItems">
+        <label for="stroke">Strokes</label>
+        <input id="stroke" name="stroke" type="color" class="strokePicker">
+      </div>-->
+    </div>
     <script src="./canvas.js"></script>   
   </body>
 </html>
\ No newline at end of file
diff --git a/static/canvas.js b/static/canvas.js
index ab521a2..4a42620 100644
--- a/static/canvas.js
+++ b/static/canvas.js
@@ -100,7 +100,7 @@ canvas.addEventListener("mouseup", async (e) => {
         if (cx < 0 || cx > CANVAS_SIZE || cy < 0 || cy > CANVAS_SIZE) {
             return;
         }
-        setPixel(image.data, cx, cy, [255, 0, 0, 255]);
+        setPixel(image.data, cx, cy, [0, 0, 255, 255]);
         await redraw();
         draw();
     }