diff --git a/static/js/stream.js b/static/js/stream.js
index edb3b08..26d99d6 100755
--- a/static/js/stream.js
+++ b/static/js/stream.js
@@ -75,8 +75,8 @@ document.addEventListener("DOMContentLoaded", function(){
 function draw(){
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawImage();
-    watchArea.draw(ctx);
     watchAreas.forEach(watchArea => watchArea.draw(ctx));
+    watchArea.draw(ctx);
 }
 
 function drawImage(){
diff --git a/templates/stream.html b/templates/stream.html
index 479485c..f6b984a 100755
--- a/templates/stream.html
+++ b/templates/stream.html
@@ -11,7 +11,7 @@
     <img src="{{ .GetCurrentURL }}" width="425" height="240">
 </div>
 <form action="/addWatchArea" method="GET" id="newWatchAreaForm">
-    <table class="pure-table pure-table-horizontal pure-table-striped">
+    <table class="pure-table pure-table-horizontal">
         <caption>Watches</caption>
         <thead>
             <tr>
@@ -34,7 +34,7 @@
         </thead>
         <tbody id="watchAreas">
             {{range $watchArea := .WatchAreas}}
-                <tr>
+                <tr style="background-color:rgb({{ $watchArea.Color.R }}, {{$watchArea.Color.G}}, {{$watchArea.Color.B}})">
                     <td>{{ $watchArea.Name }}</td>
                     <td>{{ $watchArea.Color.R }}</td>
                     <td>{{ $watchArea.Color.G }}</td>