diff --git a/static/canvas.css b/static/canvas.css
index 82b4c9c..06e3162 100644
--- a/static/canvas.css
+++ b/static/canvas.css
@@ -1,3 +1,8 @@
+:root {
+    --utsa-orange: #f15a22;
+    --utsa-blue: #0c2340;
+}
+
 * {
     padding: 0;
     margin: 0;
@@ -12,10 +17,11 @@ html, body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    background-color: var(--utsa-orange);
 }
 
 .navbarCont {
-    background-color: grey;
+    background-color: var(--utsa-blue);
     width: 100%;
     text-align: center;
     margin-bottom: 10px;
@@ -36,9 +42,9 @@ html, body {
     justify-content: space-around;
     align-items: center;
     border-top: solid black 1px;
+    background-color: var(--utsa-blue);
     width: 100%;
-    height: 60px;
-    z-index: 10;
+    height:auto;
 }
 
 .toolbarItems {
@@ -46,7 +52,7 @@ html, body {
     flex-direction: column;
     justify-content: center;
     font-weight: 900;
-    color: blue;
+    color: white;
     text-align: center;
     height: 100%;
     width: 100px;
@@ -64,7 +70,7 @@ html, body {
 
 
 canvas {
-    background-color: lightblue;
+    background-color: white;
     margin: 20px;
     image-rendering: pixelated;
 }
diff --git a/static/canvas.html b/static/canvas.html
index 031a8be..03aeb71 100644
--- a/static/canvas.html
+++ b/static/canvas.html
@@ -13,12 +13,12 @@
   <body>
     <div class="wrapper">
       <div class="navbarCont">
-        <h1>ThePlaceHolders</h1>
+        <h1 style="color: white;">ThePlaceHolders</h1>
       </div>
       <!--note to self: below IS the canvas-->
-      <div class="canvasCont">
-        <canvas id="canvas" width="500" height="500" style="border:1px solid #000000;" alt="canvas"></canvas>
-        <div id="toolbar" class="toolbar">
+      <!--<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>
@@ -30,7 +30,7 @@
             <button onclick="zoomIn"id="zoomIn">+</button>
           </div>
         </div>
-      </div>
+      <!--</div>-->
         <!--note to self: above IS the canvas-->
     </div>
     <script src="./canvas.js"></script>   
