diff --git a/client/src/Board.css b/client/src/Board.css
index 39aed27..d74b4c5 100644
--- a/client/src/Board.css
+++ b/client/src/Board.css
@@ -85,6 +85,18 @@
 }
 
 .Selected {
-  background-color: rgba(255, 238, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.5);
   box-shadow: 5px 5px 5px black;
+}
+.Selected[data-color='R'] {
+  background-color: rgba(255, 0, 0, 0.5);
+}
+.Selected[data-color='O'] {
+  background-color: rgba(255, 196, 0, 0.5);
+}
+.Selected[data-color='W'] {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.Selected[data-color='B'] {
+  background-color: rgba(0, 0, 255, 0.5);
 }
\ No newline at end of file
diff --git a/client/src/Board.js b/client/src/Board.js
index 5d380bd..3ac061d 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -41,6 +41,7 @@ const Board = ({ game }) => {
           el.classList.remove('Selected');
         }
       }
+      event.target.setAttribute("data-color", game.color);
       event.target.classList.toggle('Selected');
     };
     return <div className="Road"
@@ -64,6 +65,7 @@ const Board = ({ game }) => {
         }
       }
       event.target.classList.toggle('Selected');
+      event.target.setAttribute("data-color", game.color);
     };
     return <div className="Corner"
       onClick={onClick}