diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
index 2aad64825..2f89707e1 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html
@@ -90,16 +90,12 @@ body {
 
 .cardStrength {
     text-align: center;
-    background-color: #7a6a53;
-    opacity: 1;
     font-weight: bolder;
     color: #ffffff;
 }
 
 .cardVitality {
     text-align: center;
-    background-color: #8a1f0d;
-    opacity: 1;
     font-weight: bolder;
     color: #ffffff;
 }
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png
new file mode 100644
index 000000000..c0894d430
Binary files /dev/null and b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/strength.png differ
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png
new file mode 100644
index 000000000..6ea82c8e1
Binary files /dev/null and b/gemp-lotr/gemp-lotr-web/src/main/webapp/images/vitality.png differ
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js
index 72c99e889..2e92713d7 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameAnimations.js
@@ -710,7 +710,9 @@ var GameAnimations = Class.extend({
         $("#main").queue(
                 function(next) {
                     $(".cardStrength").css({display: "none"});
+                    $(".cardStrengthBg").css({display: "none"});
                     $(".cardVitality").css({display: "none"});
+                    $(".cardVitalityBg").css({display: "none"});
                     $(".cardSiteNumber").css({display: "none"});
                     $(".cardResistance").css({display: "none"});
 
@@ -721,7 +723,9 @@ var GameAnimations = Class.extend({
                             var cardStats = charStatsArr[i].split("=");
                             var cardDiv = $(".card:cardId(" + cardStats[0] + ")");
                             var cardStatArr = cardStats[1].split("|");
+                            $(".cardStrengthBg", cardDiv).css({display: ""});
                             $(".cardStrength", cardDiv).html(cardStatArr[0]).css({display: ""});
+                            $(".cardVitalityBg", cardDiv).css({display: ""});
                             $(".cardVitality", cardDiv).html(cardStatArr[1]).css({display: ""});
                             if (cardStatArr.length > 2) {
                                 if (cardStatArr[2].indexOf("R") == 0) {
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js
index fd5c8226d..219c9ffa2 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js
@@ -1032,10 +1032,18 @@ var GempLotrGameUI = Class.extend({
 
         var tokenOverlay = $(".tokenOverlay", cardDiv);
 
+        var cardStrengthBgDiv = $("<div class='cardStrengthBg'><img src='images/strength.png' width='100%' height='100%'></div>");
+        cardStrengthBgDiv.css({display: "none"});
+        tokenOverlay.append(cardStrengthBgDiv);
+
         var cardStrengthDiv = $("<div class='cardStrength'></div>");
         cardStrengthDiv.css({display: "none"});
         tokenOverlay.append(cardStrengthDiv);
 
+        var cardVitalityBgDiv = $("<div class='cardVitalityBg'><img src='images/vitality.png' width='100%' height='100%'></div>");
+        cardVitalityBgDiv.css({display: "none"});
+        tokenOverlay.append(cardVitalityBgDiv);
+
         var cardVitalityDiv = $("<div class='cardVitality'></div>");
         cardVitalityDiv.css({display: "none"});
         tokenOverlay.append(cardVitalityDiv);
@@ -1057,16 +1065,27 @@ var GempLotrGameUI = Class.extend({
 
                 var size = 0.0865 * maxDimension;
 
-                var x = 0.09255 * maxDimension - size / 2;
-                var strengthY = 0.67203 * maxDimension - size / 2;
-                var vitalityY = 0.79074 * maxDimension - size / 2;
+                var x = 0.09 * maxDimension - size / 2;
+                var strengthY = 0.678 * maxDimension - size / 2;
+                var vitalityY = 0.795 * maxDimension - size / 2;
                 var minionSiteNumberY = 0.89135 * maxDimension - size / 2;
 
-                var fontPerc = (size * 7) + "%";
+                var fontPerc = (size * 6) + "%";
                 var borderRadius = Math.ceil(size / 5) + "px";
 
-                $(".cardStrength", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: strengthY + "px", width: size, height: size});
-                $(".cardVitality", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: vitalityY + "px", width: size, height: size});
+                var strBgX = 0.03800 * maxDimension;
+                var strBgY = 0.60765 * maxDimension;
+                var strBgWidth = 0.1624 * width;
+                var strBgHeight = 0.1650 * height;
+
+                var vitBgX = 0.0532 * width;
+                var vitBgY = 0.7465 * height;
+                var vitalityBgSize = 0.105 * height;
+
+                $(".cardStrengthBg", cardElem).css({position: "absolute", left: strBgX + "px", top: strBgY + "px", width: strBgWidth, height: strBgHeight});
+                $(".cardStrength", cardElem).css({position: "absolute", "font-size": fontPerc, left: x + "px", top: strengthY + "px", width: size, height: size});
+                $(".cardVitalityBg", cardElem).css({position: "absolute", left: vitBgX + "px", top: vitBgY + "px", width: vitalityBgSize, height: vitalityBgSize});
+                $(".cardVitality", cardElem).css({position: "absolute", "font-size": fontPerc, left: x + "px", top: vitalityY + "px", width: size, height: size});
                 $(".cardSiteNumber", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: minionSiteNumberY + "px", width: size, height: size});
                 $(".cardResistance", cardElem).css({position: "absolute", "border-radius": borderRadius, "font-size": fontPerc, left: x + "px", top: minionSiteNumberY + "px", width: size, height: size});
             }