diff --git a/frontend/src/game/board/board.js b/frontend/src/game/board/board.js
index 56d6d9a..f789abb 100644
--- a/frontend/src/game/board/board.js
+++ b/frontend/src/game/board/board.js
@@ -21,6 +21,7 @@ module.exports = {
         boardState.forEach(function (row, rownum) {
             row["cards"].forEach(function (cardInRow) {
                 var newCard = builder.buildCard(templates.baseCard, cardInRow);
+                newCard.setAttribute("rownum", rownum);
 
                 if (cardInRow["owner"] === "me") {
                     fetchRow("#my-rows .game-row", rownum).appendChild(newCard);
diff --git a/frontend/src/game/board/builder.js b/frontend/src/game/board/builder.js
index 8b9560e..91f8089 100644
--- a/frontend/src/game/board/builder.js
+++ b/frontend/src/game/board/builder.js
@@ -1,5 +1,7 @@
 "use strict";
 
+var status = require("game/status.js");
+var play = require("game/play/play.js");
 const baseRow = document.getElementById("row-template")
     .content.querySelector("div");
 const myRows = document.getElementById("my-rows");
@@ -40,6 +42,14 @@ module.exports = {
         newCard.classList.remove("col-1");
         newCard.classList.add("col-2");
         newCard.innerHTML = cardData["power"];
+        newCard.addEventListener('click', function() {
+            if (status.clickedCard &&
+                status.clickedCard.hasAttribute("row-played") &&
+                !status.clickedCard.hasAttribute("target")) {
+                status.clickedCard.setAttribute("target", 1);
+                play.playCard(status.clickedCard);
+            }
+        });
 
         return newCard;
     }
diff --git a/frontend/src/game/hand.js b/frontend/src/game/hand.js
index 261fa32..7d719a5 100644
--- a/frontend/src/game/hand.js
+++ b/frontend/src/game/hand.js
@@ -23,8 +23,9 @@ module.exports = {
 
         handState.forEach(function (cardInHand, index) {
             var newCard = templates.baseCard.cloneNode(true);
-            newCard.innerHTML = cardInHand["power"]
-            newCard.innerHTML += showAddPower(cardInHand["add-power"])
+            newCard.innerHTML = cardInHand["power"];
+            newCard.setAttribute("add-power", cardInHand["add-power"]);
+            newCard.innerHTML += showAddPower(cardInHand["add-power"]);
             newCard.setAttribute("index", index);
             newCard.addEventListener('click', function(){play.clickCard(newCard)});
 
diff --git a/frontend/src/game/play/board.js b/frontend/src/game/play/board.js
index 3689178..f9c3fb7 100644
--- a/frontend/src/game/play/board.js
+++ b/frontend/src/game/play/board.js
@@ -9,8 +9,9 @@ module.exports = {
         if (status.clickedCard !== undefined) {
             event.preventDefault();
 
-            play.playCard(event.target.getAttribute("rownum"),
-                status.clickedCard.getAttribute("index"));
+            var rownum = event.target.getAttribute("rownum");
+            status.clickedCard.setAttribute("row-played", rownum);
+            play.playCard(status.clickedCard);
         }
     },
     allowDrop(event) {
@@ -18,12 +19,15 @@ module.exports = {
     },
     dropOnRow(event) {
         event.preventDefault();
-        const rownum = event.target.getAttribute("rownum");
-        const cardindex = event.dataTransfer.getData("handIndex");
+        var card = document.querySelector('.card[index="'+
+            event.dataTransfer.getData("handIndex")+
+            '"]');
+        card.setAttribute("row-played",
+            event.target.getAttribute("rownum"));
 
         status.onGetStatus(function(status) {
             if (status === config.messages["play"]) {
-                play.playCard(rownum, cardindex);
+                play.playCard(card);
             }
         })
     }
diff --git a/frontend/src/game/play/play.js b/frontend/src/game/play/play.js
index 2aabf23..2a44630 100644
--- a/frontend/src/game/play/play.js
+++ b/frontend/src/game/play/play.js
@@ -7,23 +7,29 @@ const config = require('config/config.js');
 const backend = config.servers["backend"];
 
 module.exports = {
-    playCard(rownum, cardindex, target) {
-        const playData = {
-            index: cardindex,
-            row: rownum,
-            target: target,
-        };
-        document.querySelector('.card[index="'+cardindex+'"]').style.background = "yellow";
+    playCard(card) {
+        if (!card.hasAttribute("target") &&
+            card.getAttribute("add-power") !== "undefined") {
+            card.style.background = "yellow";
+            status.clickedCard = card;
+            document.getElementById("game-status").innerHTML = "Select a target";
+        } else {
+            const playData = {
+                index: card.getAttribute("index"),
+                row: card.getAttribute("row-played"),
+            };
+            card.style.background = "green";
 
-        fetch(
-            `http://${backend}/games/${params.gameID}/player/${params.playerID}`,
-            {
-                method: 'POST',
-                body: JSON.stringify(playData),
-                headers: { 'Content-Type': 'application/json' }
-            }
-        )
-            .then( () => status.setStatus() )
-            .catch(error => console.log(error))
+            fetch(
+                `http://${backend}/games/${params.gameID}/player/${params.playerID}`,
+                {
+                    method: 'POST',
+                    body: JSON.stringify(playData),
+                    headers: { 'Content-Type': 'application/json' }
+                }
+            )
+                .then( () => status.setStatus() )
+                .catch(error => console.log(error))
+        }
     }
 }
diff --git a/frontend/tests/game/hand.test.js b/frontend/tests/game/hand.test.js
index 63604f5..cb7e70e 100644
--- a/frontend/tests/game/hand.test.js
+++ b/frontend/tests/game/hand.test.js
@@ -44,18 +44,18 @@ test('Set hand obeys the state', () => {
         document.querySelectorAll('.hand .card')[0].innerHTML
     ).toBe("3");
 
-    // Cards are replaced
-    var sampleHand = [{power: 5}, {power: 1}];
+    // Cards show ability
+    var sampleHand = [{power: 5, "add-power": -3}, {power: 1, "add-power": 7}];
     hand.setHand(sampleHand);
     expect(
         document.querySelectorAll('.hand .card').length
     ).toBe(2);
     expect(
         document.querySelectorAll('.hand .card')[0].innerHTML
-    ).toBe("5");
+    ).toBe("5 (-3)");
     expect(
         document.querySelectorAll('.hand .card')[1].innerHTML
-    ).toBe("1");
+    ).toBe("1 (+7)");
 
     // Cards are deleted
     var sampleHand = [];
diff --git a/frontend/tests/game/play.test.js b/frontend/tests/game/play.test.js
new file mode 100644
index 0000000..0fc2b62
--- /dev/null
+++ b/frontend/tests/game/play.test.js
@@ -0,0 +1,22 @@
+"use strict";
+
+const play = require('game/play/play.js');
+
+test('Playing cards changes background as intended', () => {
+    var card = document.createElement("div");
+    var mockedStatus = document.createElement("div");
+    mockedStatus.setAttribute("id", "game-status");
+    document.body.appendChild(mockedStatus);
+
+    card.setAttribute("add-power", "undefined");
+    play.playCard(card);
+    expect(card.style.background).toBe("green");
+    
+    card.setAttribute("add-power", 1);
+    play.playCard(card);
+    expect(card.style.background).toBe("yellow");
+
+    card.setAttribute("target", 1);
+    play.playCard(card);
+    expect(card.style.background).toBe("green");
+});