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 eca098584..90a7985c0 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/deckBuild2.html
@@ -19,6 +19,24 @@
 
         .card {
             position: absolute;
+            overflow: hidden;
+        }
+
+        .card .img {
+            position: absolute;
+        }
+
+        .card .click {
+            position: absolute;
+        }
+
+        .card .border {
+            position: absolute;
+            border: solid #000000;
+        }
+
+        .deckPart {
+            position: relative;
         }
 
     </style>
@@ -33,13 +51,16 @@
 
     <script type="text/javascript" src="js/gemp-012/inheritance.js"></script>
     <script type="text/javascript" src="js/gemp-012/common.js"></script>
+
+    <script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
+    <script type="text/javascript" src="/generic-tcg/js/jquery/jquery-sizes.js"></script>
+
     <script type="text/javascript" src="js/gemp-012/communication.js"></script>
     <script type="text/javascript" src="js/gemp-012/logging.js"></script>
     <script type="text/javascript" src="js/gemp-012/commonUi.js"></script>
     <script type="text/javascript" src="js/gemp-012/jCards.js"></script>
-    <script type="text/javascript" src="/generic-tcg/js/CardContainer.js"></script>
-    <script type="text/javascript" src="/generic-tcg/js/CardGroup.js"></script>
-    <script type="text/javascript" src="/generic-tcg/js/RowCardLayoutCardGroup.js"></script>
     <script type="text/javascript" src="js/gemp-012/cardFilter2.js"></script>
     <script type="text/javascript" src="js/gemp-012/DeckPanel.js"></script>
     <script type="text/javascript" src="js/gemp-012/deckBuildingUi2.js"></script>
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 b50442db3..786cbf874 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
@@ -7,6 +7,12 @@ var DeckPanel = Class.extend({
     fpDiv:null,
     shadowDiv:null,
 
+    ringBearerContainer:null,
+    ringContainer:null,
+    sitesContainer:null,
+    fpContainer:null,
+    shadowContainer:null,
+
     init:function (deckDiv) {
         var tabGroup = $("<ul></ul>");
         tabGroup.append("<li><a href='#ringBearer'>Ring-bearer (0)</a></li>");
@@ -16,18 +22,63 @@ var DeckPanel = Class.extend({
         tabGroup.append("<li><a href='#shadow'>Shadow (0)</a></li>");
         deckDiv.append(tabGroup);
 
-        this.ringBearerDiv = $("<div id='ringBearer'></div>");
+        this.ringBearerDiv = $("<div id='ringBearer' class='deckPart'></div>");
         deckDiv.append(this.ringBearerDiv);
-        this.ringDiv = $("<div id='ring'></div>");
+        this.ringDiv = $("<div id='ring' class='deckPart'></div>");
         deckDiv.append(this.ringDiv);
-        this.sitesDiv = $("<div id='sites'></div>");
+        this.sitesDiv = $("<div id='sites' class='deckPart'></div>");
         deckDiv.append(this.sitesDiv);
-        this.fpDiv = $("<div id='fp'></div>");
+        this.fpDiv = $("<div id='fp' class='deckPart'></div>");
         deckDiv.append(this.fpDiv);
-        this.shadowDiv = $("<div id='shadow'></div>");
+        this.shadowDiv = $("<div id='shadow' class='deckPart'></div>");
         deckDiv.append(this.shadowDiv);
 
         this.tabs = $(deckDiv).tabs();
+
+        this.ringBearerContainer = new CardContainer(this.ringBearerDiv, this.layoutCardContainer);
+        var ringBearerGroup = new RowCardLayoutCardGroup(this.ringBearerDiv,
+                function() {
+                    return true;
+                });
+        ringBearerGroup.setZIndexBase(10);
+        this.ringBearerContainer.addCardGroup("main", ringBearerGroup);
+
+        this.ringContainer = new CardContainer(this.ringDiv, this.layoutCardContainer);
+        var ringGroup = new RowCardLayoutCardGroup(this.ringDiv,
+                function() {
+                    return true;
+                });
+        ringGroup.setZIndexBase(10);
+        this.ringContainer.addCardGroup("main", ringGroup);
+
+        this.sitesContainer = new CardContainer(this.sitesDiv, this.layoutCardContainer);
+        var sitesGroup = new RowCardLayoutCardGroup(this.sitesDiv,
+                function() {
+                    return true;
+                });
+        sitesGroup.setZIndexBase(10);
+        this.sitesContainer.addCardGroup("main", sitesGroup);
+
+        this.fpContainer = new CardContainer(this.fpDiv, this.layoutCardContainer);
+        var fpGroup = new RowCardLayoutCardGroup(this.fpDiv,
+                function() {
+                    return true;
+                });
+        fpGroup.setZIndexBase(10);
+        this.fpContainer.addCardGroup("main", fpGroup);
+
+        this.shadowContainer = new CardContainer(this.shadowDiv, this.layoutCardContainer);
+        var shadowGroup = new RowCardLayoutCardGroup(this.shadowDiv,
+                function() {
+                    return true;
+                });
+        shadowGroup.setZIndexBase(10);
+        this.shadowContainer.addCardGroup("main", shadowGroup);
+    },
+
+    layoutCardContainer : function(cardGroups, left, top, width, height) {
+        var padding = 3;
+        cardGroups["main"].setLayout(left + padding, top + padding, width - 2 * padding, height - 2 * padding);
     },
 
     clearDeck: function() {
@@ -36,5 +87,27 @@ var DeckPanel = Class.extend({
 
     layoutUi: function(x, y, width, height) {
         this.tabs.css({"left": x, "top": y, "width": width, "height": height});
+
+        var border = this.tabs.border();
+
+        var innerWidth = width - border.left - border.right;
+        var innerHeight = height - border.top - border.bottom;
+
+        var resultHeight = innerHeight - $("ul", this.tabs).height();
+        resultHeight = resultHeight - 3;
+
+        this.ringBearerContainer.setLayout(0, 0, innerWidth, resultHeight);
+        this.ringContainer.setLayout(0, 0, innerWidth, resultHeight);
+        this.sitesContainer.setLayout(0, 0, innerWidth, resultHeight);
+        this.fpContainer.setLayout(0, 0, innerWidth, resultHeight);
+        this.shadowContainer.setLayout(0, 0, innerWidth, resultHeight);
+    },
+
+    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();
+
     }
 });
\ 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 52eb7f6c1..b354b6bb3 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
@@ -14,6 +14,14 @@ var GempLotrDeckBuildingUI2 = Class.extend({
 
     cardInCollectionId:0,
 
+    // Card properties:
+    // type: pack, card
+    // blueprintId: id of the blueprint as in server
+    // count: number of cards of that type
+    // contents: contents of selection pack
+    // hor: if card is horizontal
+    // image: image url
+
     init:function (filterDiv, pageDiv, collectionContentsDiv, deckDiv) {
         this.collectionContentsDiv = collectionContentsDiv;
         this.deckDiv = deckDiv;
@@ -54,6 +62,32 @@ var GempLotrDeckBuildingUI2 = Class.extend({
 
         this.collectionType = "default";
         this.cardFilter.getCollection();
+
+        $("body").click(
+            function (event) {
+                return that.clickCardFunction(event);
+            });
+    },
+
+    clickCardFunction: function(event) {
+        var tar = $(event.target);
+        if (tar.length == 1 && tar[0].tagName == "A")
+            return true;
+
+        if (tar.hasClass("clickArea")) {
+            tar = tar.parent();
+            tar = tar.parent();
+
+            var cardElem = tar.parent();
+            // 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);
+            }
+        }
+        return true;
     },
 
     layoutCollectionContainer : function(cardGroups, left, top, width, height) {
@@ -70,11 +104,10 @@ var GempLotrDeckBuildingUI2 = Class.extend({
         var props = {};
         props["blueprintId"] = blueprintId;
         props["count"] = count;
+        props["type"] = type;
 
         var card = new Card(blueprintId, "collection", "1", "player", null);
-        cardDiv = this.createCollectionCardElem(card.imageUrl);
 
-        var cardDiv;
         if (type == "pack") {
             if (blueprintId.substr(0, 3) == "(S)") {
                 props["contents"] = contents;
@@ -90,11 +123,31 @@ var GempLotrDeckBuildingUI2 = Class.extend({
             props["count"] = count-countInDeck;
             props["hor"] = card.horizontal;
         }
+        props["image"] = card.imageUrl;
+
+        var cardDiv = this.createCollectionCardElem(props);
+
         this.collectionContainer.addCard(cardDiv, ""+(this.cardInCollectionId++) , props, this.layoutCardInCollection, this.widthToHeightScaleInCollection);
     },
 
-    createCollectionCardElem: function(image) {
-        return "<img src='" + image + "' width='100%' height='100%'>";
+    createCollectionCardElem: function(props) {
+        var cardDiv = $("<div class='cardInCollection'></div>");
+        this.appendCardElemDetails(cardDiv, props);
+        return cardDiv;
+    },
+
+    createDeckCardElem: function(props) {
+        var cardDiv = $("<div class='cardInDeck'></div>");
+        this.appendCardElemDetails(cardDiv, props);
+        return cardDiv;
+    },
+
+    appendCardElemDetails: function(cardDiv, props) {
+        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) {
@@ -104,8 +157,13 @@ var GempLotrDeckBuildingUI2 = Class.extend({
             return 360/500;
     },
 
-    layoutCardInCollection: function() {
-        
+    layoutCardInCollection: 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);
+            $(".border", cardDiv).css({"left":0, "top":0, "width":(cardWidth-2*borderWidth), "height":(cardHeight-2*borderWidth), "border-width": borderWidth+"px"});
+        }
+        $(".click", cardDiv).css({"left":0, "top":0, "width":cardWidth, "height":cardHeight});
     },
 
     finishCollection: function() {