diff --git a/gemp-lotr/gemp-lotr-web-server/src/main/java/com/gempukku/lotro/server/CollectionResource.java b/gemp-lotr/gemp-lotr-web-server/src/main/java/com/gempukku/lotro/server/CollectionResource.java
index 3ef2932e0..8a22e48d0 100644
--- a/gemp-lotr/gemp-lotr-web-server/src/main/java/com/gempukku/lotro/server/CollectionResource.java
+++ b/gemp-lotr/gemp-lotr-web-server/src/main/java/com/gempukku/lotro/server/CollectionResource.java
@@ -3,6 +3,8 @@ package com.gempukku.lotro.server;
 import com.gempukku.lotro.cards.packs.RarityReader;
 import com.gempukku.lotro.cards.packs.SetRarity;
 import com.gempukku.lotro.collection.CollectionsManager;
+import com.gempukku.lotro.common.CardType;
+import com.gempukku.lotro.common.Keyword;
 import com.gempukku.lotro.common.Side;
 import com.gempukku.lotro.db.vo.CollectionType;
 import com.gempukku.lotro.db.vo.League;
@@ -114,9 +116,9 @@ public class CollectionResource extends AbstractResource {
                     Element card = doc.createElement("card");
                     card.setAttribute("count", String.valueOf(item.getCount()));
                     card.setAttribute("blueprintId", blueprintId);
-                    Side side = _library.getLotroCardBlueprint(blueprintId).getSide();
-                    if (side != null)
-                        card.setAttribute("side", side.toString());
+                    LotroCardBlueprint blueprint = _library.getLotroCardBlueprint(blueprintId);
+                    appendCardSide(card, blueprint);
+                    appendCardGroup(card, blueprint);
                     collectionElem.appendChild(card);
                 } else {
                     Element pack = doc.createElement("pack");
@@ -140,6 +142,30 @@ public class CollectionResource extends AbstractResource {
         return doc;
     }
 
+    private void appendCardSide(Element card, LotroCardBlueprint blueprint) {
+        Side side = blueprint.getSide();
+        if (side != null)
+            card.setAttribute("side", side.toString());
+    }
+
+    private void appendCardGroup(Element card, LotroCardBlueprint blueprint) {
+        String group;
+        if (blueprint.getCardType() == CardType.THE_ONE_RING)
+            group="ring";
+        else if (blueprint.getCardType() == CardType.SITE)
+            group="site";
+        else if (blueprint.hasKeyword(Keyword.CAN_START_WITH_RING))
+            group="ringBearer";
+        else if (blueprint.getSide() == Side.FREE_PEOPLE)
+            group="fp";
+        else if (blueprint.getSide() == Side.SHADOW)
+            group="shadow";
+        else
+            group = null;
+        if (group != null)
+            card.setAttribute("group", group);
+    }
+
     @GET
     @Produces(MediaType.APPLICATION_XML)
     public Document getCollectionTypes(
@@ -205,9 +231,7 @@ public class CollectionResource extends AbstractResource {
                 Element card = doc.createElement("card");
                 card.setAttribute("count", String.valueOf(item.getCount()));
                 card.setAttribute("blueprintId", blueprintId);
-                Side side = _library.getLotroCardBlueprint(blueprintId).getSide();
-                if (side != null)
-                    card.setAttribute("side", side.toString());
+                appendCardSide(card, _library.getLotroCardBlueprint(blueprintId));
                 collectionElem.appendChild(card);
             } else {
                 Element pack = doc.createElement("pack");
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 786cbf874..2c7c060e2 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,3 +1,5 @@
+// Each card should have properties:
+// group: ring, ringBearer, site, fp, shadow
 var DeckPanel = Class.extend({
     tabs:null,
 
@@ -105,9 +107,33 @@ var DeckPanel = Class.extend({
 
     addCard: function(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc) {
         var selectedTabIndex = this.tabs.tabs('option', 'selected');
-        
-        this.ringBearerContainer.addCard(cardElem, cardId, cardProps, layoutCardFunc, widthToHeightScaleFunc);
-        this.ringBearerContainer.layoutCards();
 
+        var group = cardProps["group"];
+
+        var that = this;
+
+        var addCardToGroup = function (groupContainer, titlePrefix, tabHref) {
+            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);
+        };
+
+        if (group == "ring") {
+            addCardToGroup(this.ringContainer, "Ring", "ring");
+        } else if (group == "ringBearer") {
+            if (selectedTabIndex == 0) {
+                addCardToGroup(this.ringBearerContainer, "Ring-bearer", "ringBearer");
+            } else {
+                addCardToGroup(this.fpContainer, "Free People", "fp");
+            }
+        } else if (group == "site") {
+            addCardToGroup(this.sitesContainer, "Sites", "sites");
+        } else if (group == "fp") {
+            addCardToGroup(this.fpContainer, "Free People", "fp");
+        } else if (group == "shadow") {
+            addCardToGroup(this.shadowContainer, "Shadow", "shadow");
+        }
     }
 });
\ No newline at end of file
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 b354b6bb3..a5e983c6c 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
@@ -20,6 +20,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
     // count: number of cards of that type
     // contents: contents of selection pack
     // hor: if card is horizontal
+    // group: ring, ringBearer, site, fp, shadow
     // image: image url
 
     init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
@@ -52,7 +53,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
                     that.clearCollection();
                 },
                 function (elem, type, blueprintId, count) {
-                    that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
+                    that.addCardToCollection(type, blueprintId, count, elem.getAttribute("group"), elem.getAttribute("contents"));
                 },
                 function () {
                     that.finishCollection();
@@ -100,7 +101,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
         this.cardInCollectionId = 0;
     },
 
-    addCardToCollection: function(type, blueprintId, count, side, contents) {
+    addCardToCollection: function(type, blueprintId, count, group, contents) {
         var props = {};
         props["blueprintId"] = blueprintId;
         props["count"] = count;
@@ -124,6 +125,7 @@ var GempLotrDeckBuildingUI2 = Class.extend({
             props["hor"] = card.horizontal;
         }
         props["image"] = card.imageUrl;
+        props["group"] = group;
 
         var cardDiv = this.createCollectionCardElem(props);