diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
index 90a7985c0..d70e4e18d 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -35,6 +35,14 @@
             border: solid #000000;
         }
 
+        .card .count {
+            position: absolute;
+            font-weight: bolder;
+            display: table-cell;
+            text-align: right;
+            vertical-align: top;
+        }
+
         .deckPart {
             position: relative;
         }
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js
index 2c7c060e2..1294040b4 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/DeckPanel.js
@@ -1,5 +1,6 @@
 // Each card should have properties:
 // group: ring, ringBearer, site, fp, shadow
+// blueprintId: blueprintId of the card
 var DeckPanel = Class.extend({
     tabs:null,
 
@@ -105,9 +106,62 @@ var DeckPanel = Class.extend({
         this.shadowContainer.setLayout(0, 0, innerWidth, resultHeight);
     },
 
-    addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
-        var selectedTabIndex = this.tabs.tabs('option', 'selected');
+    getCardCount: function(blueprintId) {
+        var count = 0;
 
+        var incrementCount =
+                function(cardDiv, cardId, props, layout) {
+                    if (props["blueprintId"] == blueprintId)
+                        count++;
+                };
+
+        this.ringBearerContainer.iterCards(incrementCount);
+        this.ringContainer.iterCards(incrementCount);
+        this.sitesContainer.iterCards(incrementCount);
+        this.fpContainer.iterCards(incrementCount);
+        this.shadowContainer.iterCards(incrementCount);
+
+        return count;
+    },
+
+    addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
+        var group = cardProps["group"];
+
+        var addCardToGroup = function (groupContainer) {
+            groupContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc);
+        };
+
+        if (group == "ring") {
+            addCardToGroup(this.ringContainer);
+        } else if (group == "ringBearer" || group == "fp") {
+            addCardToGroup(this.fpContainer);
+        } else if (group == "site") {
+            addCardToGroup(this.sitesContainer);
+        } else if (group == "shadow") {
+            addCardToGroup(this.shadowContainer);
+        }
+    },
+
+    addRingBearerCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
+        this.ringBearerContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc);
+    },
+
+    finishAddingCards: function() {
+        var updateGroup = function (groupContainer, titlePrefix, tabHref) {
+            groupContainer.layoutCards();
+            var count = groupContainer.getCardsCount();
+            var title = titlePrefix + " (" + count + ")";
+            $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title);
+        };
+
+        updateGroup(this.ringContainer, "Ring", "ring");
+        updateGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer");
+        updateGroup(this.sitesContainer, "Sites", "sites");
+        updateGroup(this.fpContainer, "Free People", "fp");
+        updateGroup(this.shadowContainer, "Shadow", "shadow");
+    },
+
+    addSingleCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
         var group = cardProps["group"];
 
         var that = this;
@@ -116,13 +170,15 @@ var DeckPanel = Class.extend({
             groupContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc);
             groupContainer.layoutCards();
             var count = groupContainer.getCardsCount();
-            var title = titlePrefix+" ("+count+")";
-            $(".ui-tabs-nav a[href='#"+tabHref+"']", that.tabs).html(title);
+            var title = titlePrefix + " (" + count + ")";
+            $(".ui-tabs-nav a[href='#" + tabHref + "']", that.tabs).html(title);
         };
 
         if (group == "ring") {
             addCardToGroup(this.ringContainer, "Ring", "ring");
         } else if (group == "ringBearer") {
+            var selectedTabIndex = this.tabs.tabs('option', 'selected');
+
             if (selectedTabIndex == 0) {
                 addCardToGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer");
             } else {
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js
index a5e983c6c..4d7affdf9 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gemp-012/deckBuildingUi2.js
@@ -13,6 +13,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
     padding: 3,
 
     cardInCollectionId:0,
+    cardInDeckId:0,
 
     // Card properties:
     // type: pack, card
@@ -83,9 +84,9 @@ var GempLotrDeckBuildingUI2 = Class.extend({
             // If card in collection
             if (tar.hasClass("cardInCollection")) {
                 // add card to deck
-                var cardId = cardElem.data("id");
                 var cardProps = cardElem.data("props");
-                this.deckPanel.addCard(this.createDeckCardElem(cardProps), cardId, cardProps, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
+                this.deckPanel.addSingleCard(this.createDeckCardElem(cardProps), ""+(this.cardInDeckId++), cardProps, this.layoutCardInDeck, this.widthToHeightScaleInCollection);
+                this.updateCardCount(cardElem, cardProps);
             }
         }
         return true;
@@ -115,32 +116,39 @@ var GempLotrDeckBuildingUI2 = Class.extend({
             }
         } else if (type == "card") {
             var countInDeck = 0;
-            $(".card", this.deckDiv).each(
-                    function () {
-                        var tempCardData = $(this).data("props");
-                        if (blueprintId == tempCardData["blueprintId"])
-                            countInDeck++;
-                    });
-            props["count"] = count-countInDeck;
             props["hor"] = card.horizontal;
         }
         props["image"] = card.imageUrl;
         props["group"] = group;
 
-        var cardDiv = this.createCollectionCardElem(props);
+        this.collectionContainer.addCard(this.createCollectionCardElem(props), ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
+    },
 
-        this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
+    updateCardCount: function(cardDiv, props) {
+        var count = props["count"] - this.deckPanel.getCardCount(props["blueprintId"]);
+        $(".count", cardDiv).html(count);
+    },
+
+    updateCardCounts: function() {
+        var that = this;
+        this.collectionContainer.iterCards(
+                function(cardDiv, cardId, props, layout) {
+                    that.updateCardCount(cardDiv, props);
+                });
     },
 
     createCollectionCardElem: function(props) {
         var cardDiv = $("<div class='cardInCollection'></div>");
         this.appendCardElemDetails(cardDiv, props);
+        cardDiv.append("<div class='count'></div>");
+        cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
         return cardDiv;
     },
 
     createDeckCardElem: function(props) {
         var cardDiv = $("<div class='cardInDeck'></div>");
         this.appendCardElemDetails(cardDiv, props);
+        cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
         return cardDiv;
     },
 
@@ -148,8 +156,6 @@ var GempLotrDeckBuildingUI2 = Class.extend({
         cardDiv.append("<div class='img'><img src='" + props["image"] + "' width='100%' height='100%'></div>");
         if (props["type"] == "card")
             cardDiv.append("<div class='border'><img src='images/pixel.png' width='100%' height='100%'></div>");
-        cardDiv.append("<div class='click'><img class='clickArea' src='images/pixel.png' width='100%' height='100%'></div>");
-
     },
 
     widthToHeightScaleInCollection: function(cardId, props) {
@@ -160,6 +166,17 @@ var GempLotrDeckBuildingUI2 = Class.extend({
     },
 
     layoutCardInCollection: function(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight) {
+        $(".img", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight});
+        var maxDimension = Math.max(cardWidth, cardHeight)
+        if (props["type"] == "card") {
+            var borderWidth = Math.floor(maxDimension / 30);
+            $(".border", cardDiv).css({"left":0, "top":0, "width":(cardWidth-2*borderWidth), "height":(cardHeight-2*borderWidth), "border-width": borderWidth+"px"});
+        }
+        $(".count", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight, "font-size": maxDimension*1.5+"%"});
+        $(".click", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight});
+    },
+
+    layoutCardInDeck: function(cardDiv, cardId, props, cardLeft, cardTop, cardWidth, cardHeight) {
         $(".img", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight});
         if (props["type"] == "card") {
             var borderWidth = Math.floor(Math.max(cardWidth, cardHeight) / 30);
@@ -170,6 +187,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
 
     finishCollection: function() {
         this.collectionContainer.layoutCards();
+        this.updateCardCounts();
     },
 
     layoutUI: function(collectionWidth, collectionHeight, deckWidth, deckHeight) {