diff --git a/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/MerchantResource.java b/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/MerchantResource.java
index b7d305bbf..84e3e3ac3 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/MerchantResource.java
+++ b/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/MerchantResource.java
@@ -61,7 +61,6 @@ public class MerchantResource extends AbstractResource {
         _rarities.put("19", reader.getSetRarity("19"));
     }
 
-    @Path("/list")
     @GET
     @Produces(MediaType.APPLICATION_XML)
     public Document getCollection(
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/cardFilter.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/cardFilter.js
index 9b0d9e1bd..123ef0fd2 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/cardFilter.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/cardFilter.js
@@ -1,8 +1,8 @@
 var CardFilter = Class.extend({
-    communication: null,
     clearCollectionFunc: null,
     addCardFunc: null,
     finishCollectionFunc: null,
+    getCollectionFunc: null,
 
     collectionType: null,
 
@@ -23,11 +23,8 @@ var CardFilter = Class.extend({
     sortSelect: null,
     raritySelect: null,
 
-    init: function(url, elem, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
-        this.communication = new GempLotrCommunication(url,
-                function(xhr, ajaxOptions, thrownError) {
-                });
-
+    init: function(elem, getCollectionFunc, clearCollectionFunc, addCardFunc, finishCollectionFunc) {
+        this.getCollectionFunc = getCollectionFunc;
         this.clearCollectionFunc = clearCollectionFunc;
         this.addCardFunc = addCardFunc;
         this.finishCollectionFunc = finishCollectionFunc;
@@ -37,12 +34,6 @@ var CardFilter = Class.extend({
         this.buildUi(elem);
     },
 
-    setCollectionType: function(collectionType) {
-        this.collectionType = collectionType;
-        this.start = 0;
-        this.getCollection();
-    },
-
     enableDetailFilters: function(enable) {
         $("#culture1").buttonset("option", "disabled", !enable);
         $("#culture2").buttonset("option", "disabled", !enable);
@@ -358,7 +349,7 @@ var CardFilter = Class.extend({
 
     getCollection: function() {
         var that = this;
-        this.communication.getCollection(this.collectionType, this.filter + this.calculateFullFilterPostfix(), this.start, this.count, function(xml) {
+        this.getCollectionFunc(this.filter + this.calculateFullFilterPostfix(), this.start, this.count, function(xml) {
             that.displayCollection(xml);
         });
     },
@@ -366,31 +357,30 @@ var CardFilter = Class.extend({
     displayCollection: function(xml) {
         log(xml);
         var root = xml.documentElement;
-        if (root.tagName == "collection") {
-            this.clearCollectionFunc();
 
-            var packs = root.getElementsByTagName("pack");
-            for (var i = 0; i < packs.length; i++) {
-                var packElem = packs[i];
-                var blueprintId = packElem.getAttribute("blueprintId");
-                var count = packElem.getAttribute("count");
-                this.addCardFunc("pack", blueprintId, count, null, packElem.getAttribute("contents"));
-            }
+        this.clearCollectionFunc(root.tagName);
 
-            var cards = root.getElementsByTagName("card");
-            for (var i = 0; i < cards.length; i++) {
-                var cardElem = cards[i];
-                var blueprintId = cardElem.getAttribute("blueprintId");
-                var count = cardElem.getAttribute("count");
-                this.addCardFunc("card", blueprintId, count, cardElem.getAttribute("side"), null);
-            }
-
-            this.finishCollectionFunc();
-
-            $("#previousPage").button("option", "disabled", this.start == 0);
-            var cnt = parseInt(root.getAttribute("count"));
-            $("#nextPage").button("option", "disabled", (this.start + this.count) >= cnt);
-            $("#countSlider").slider("option", "disabled", false);
+        var packs = root.getElementsByTagName("pack");
+        for (var i = 0; i < packs.length; i++) {
+            var packElem = packs[i];
+            var blueprintId = packElem.getAttribute("blueprintId");
+            var count = packElem.getAttribute("count");
+            this.addCardFunc(packElem, "pack", blueprintId, count);
         }
+
+        var cards = root.getElementsByTagName("card");
+        for (var i = 0; i < cards.length; i++) {
+            var cardElem = cards[i];
+            var blueprintId = cardElem.getAttribute("blueprintId");
+            var count = cardElem.getAttribute("count");
+            this.addCardFunc(cardElem, "card", blueprintId, count);
+        }
+
+        this.finishCollectionFunc();
+
+        $("#previousPage").button("option", "disabled", this.start == 0);
+        var cnt = parseInt(root.getAttribute("count"));
+        $("#nextPage").button("option", "disabled", (this.start + this.count) >= cnt);
+        $("#countSlider").slider("option", "disabled", false);
     }
 });
\ No newline at end of file
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/communication.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/communication.js
index 4cc691e3a..52c92f6d2 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/communication.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/communication.js
@@ -164,6 +164,21 @@ var GempLotrCommunication = Class.extend({
             dataType: "xml"
         });
     },
+    getMerchant: function(filter, start, count, callback) {
+        $.ajax({
+            type: "GET",
+            url: this.url + "/merchant",
+            cache: false,
+            data: {
+                participantId: getUrlParam("participantId"),
+                filter: filter,
+                start: start,
+                count: count},
+            success: this.deliveryCheck(callback),
+            error: this.failure,
+            dataType: "xml"
+        });
+    },
     getCollection: function(collectionType, filter, start, count, callback) {
         $.ajax({
             type: "GET",
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js
index bc2ad6aa9..cc0fdf063 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/deckBuildingUi.js
@@ -43,21 +43,29 @@ var GempLotrDeckBuildingUI = Class.extend({
 
     cardFilter: null,
 
+    collectionType: null,
+
     init: function() {
         var that = this;
 
         this.comm = new GempLotrCommunication("/gemp-lotr/server", that.processError);
 
-        this.cardFilter = new CardFilter("/gemp-lotr/server", $("#collectionDiv"),
+        this.cardFilter = new CardFilter($("#collectionDiv"),
+                function(filter, start, count, callback) {
+                    that.comm.getCollection(that.collectionType, filter, start, count, function(xml) {
+                        callback(xml);
+                    });
+                },
                 function() {
                     that.clearCollection();
                 },
-                function(type, blueprintId, count, side, contents) {
-                    that.addCardToCollection(type, blueprintId, count, side, contents);
+                function(elem, type, blueprintId, count) {
+                    that.addCardToCollection(type, blueprintId, count, elem.getAttribute("side"), elem.getAttribute("contents"));
                 },
                 function() {
                     that.finishCollection();
                 });
+        this.collectionType = "default";
 
         this.deckDiv = $("#deckDiv");
 
@@ -151,7 +159,8 @@ var GempLotrDeckBuildingUI = Class.extend({
 
         $("#collectionSelect").change(
                 function() {
-                    that.cardFilter.setCollectionType(that.getCollectionType());
+                    that.collectionType = that.getCollectionType();
+                    that.cardFilter.getCollection();
                 });
 
         this.normalCollectionDiv = $("<div></div>");
@@ -249,7 +258,7 @@ var GempLotrDeckBuildingUI = Class.extend({
         this.getCollectionTypes();
 
         this.cardFilter.setFilter("cardType:-THE_ONE_RING");
-        this.cardFilter.setCollectionType("default");
+        this.cardFilter.getCollection();
 
         this.checkDeckStatsDirty();
     },
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/merchantUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/merchantUi.js
new file mode 100644
index 000000000..11493896f
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/merchantUi.js
@@ -0,0 +1,157 @@
+var GempLotrMerchantUI = Class.extend({
+    comm: null,
+
+    cardsDiv: null,
+    cardsGroup: null,
+
+    filterDiv: null,
+    cardFilter: null,
+
+    infoDialog: null,
+
+    init: function(cardListElem, cardFilterElem) {
+        var that = this;
+
+        this.comm = new GempLotrCommunication("/gemp-lotr/server", that.processError);
+
+        this.cardFilter = new CardFilter(cardFilterElem,
+                function(filter, start, count, callback) {
+                    that.comm.getMerchant(filter, start, count, callback);
+                },
+                function() {
+                    that.clearList();
+                },
+                function(elem, type, blueprintId, count) {
+                    that.addCardToList(elem, type, blueprintId, count);
+                },
+                function() {
+                    that.finishList();
+                });
+
+        this.cardsDiv = cardListElem;
+        this.cardsGroup = new NormalCardGroup(this.cardsDiv, function(card) {
+            return true;
+        });
+
+        this.filterDiv = cardFilterElem;
+
+        this.infoDialog = $("<div></div>")
+                .dialog({
+            autoOpen: false,
+            closeOnEscape: true,
+            resizable: false,
+            title: "Card information"
+        });
+
+        var swipeOptions = {
+            threshold: 20,
+            swipeUp: function (event) {
+                that.infoDialog.prop({ scrollTop: that.infoDialog.prop("scrollHeight") });
+                return false;
+            },
+            swipeDown: function (event) {
+                that.infoDialog.prop({ scrollTop: 0 });
+                return false;
+            }
+        };
+        this.infoDialog.swipe(swipeOptions);
+
+        this.cardFilter.getCollection();
+    },
+
+    dragCardData: null,
+    dragStartX: null,
+    dragStartY: null,
+    successfulDrag: null,
+
+    dragStartCardFunction: function(event) {
+        this.successfulDrag = false;
+        var tar = $(event.target);
+        if (tar.hasClass("actionArea")) {
+            tar = tar.parent();
+            if (tar.hasClass("borderOverlay")) {
+                var selectedCardElem = tar.parent();
+                if (event.which == 1) {
+                    this.dragCardData = selectedCardElem.data("card");
+                    this.dragStartX = event.clientX;
+                    this.dragStartY = event.clientY;
+                    return false;
+                }
+            }
+        }
+        return true;
+    },
+
+    dragStopCardFunction: function(event) {
+        if (this.dragCardData != null) {
+            if (this.dragStartY - event.clientY >= 20) {
+                this.displayCardInfo(this.dragCardData);
+                this.successfulDrag = true;
+            }
+            this.dragCardData = null;
+            this.dragStartX = null;
+            this.dragStartY = null;
+            return false;
+        }
+        return true;
+    },
+
+    displayCardInfo: function(card) {
+        this.infoDialog.html("");
+        this.infoDialog.html("<div style='scroll: auto'></div>");
+        this.infoDialog.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal, card.isPack()));
+        var windowWidth = $(window).width();
+        var windowHeight = $(window).height();
+
+        var horSpace = 30;
+        var vertSpace = 45;
+
+        if (card.horizontal) {
+            // 500x360
+            this.infoDialog.dialog({width: Math.min(500 + horSpace, windowWidth), height: Math.min(360 + vertSpace, windowHeight)});
+        } else {
+            // 360x500
+            this.infoDialog.dialog({width: Math.min(360 + horSpace, windowWidth), height: Math.min(500 + vertSpace, windowHeight)});
+        }
+        this.infoDialog.dialog("open");
+    },
+
+    clearList: function() {
+        $(".card", this.cardsDiv).remove();
+    },
+
+    addCardToList: function(elem, type, blueprintId, count) {
+        if (type == "pack") {
+            var card = new Card(blueprintId, "merchant", "collection", "player");
+            card.tokens = {"count":count};
+            var cardDiv = createCardDiv(card.imageUrl, null, false, true, true);
+            cardDiv.data("card", card);
+            this.cardsDiv.append(cardDiv);
+        } else if (type == "card") {
+            var card = new Card(blueprintId, "merchant", "collection", "player");
+            card.tokens = {"count":count};
+            var cardDiv = createCardDiv(card.imageUrl, null, card.isFoil());
+            cardDiv.data("card", card);
+            this.cardsDiv.append(cardDiv);
+        }
+    },
+
+    finishList: function() {
+        this.cardsGroup.layoutCards();
+    },
+
+    layoutUI: function() {
+        var cardsGroupWidth = $(this.cardsDiv).width();
+        var cardsGroupHeight = $(this.cardsDiv).height();
+        this.cardsGroup.setBounds(0, 0, cardsGroupWidth, cardsGroupHeight);
+
+        var filterWidth = $(this.filterDiv).width();
+        var filterHeight = $(this.filterDiv).height();
+        this.cardFilter.layoutUi(0, 0, filterWidth, filterHeight);
+    },
+
+    processError: function (xhr, ajaxOptions, thrownError) {
+        if (thrownError != "abort")
+            alert("There was a problem during communication with server");
+    }
+});
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/merchant.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/merchant.html
new file mode 100644
index 000000000..2b5642ba4
--- /dev/null
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/merchant.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Gemp-LotR</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+    <meta http-equiv="pragma" content="no-cache"/>
+
+    <style type="text/css">
+        body {
+            font-size: 12px;
+        }
+
+        .borderOverlay {
+            border: 0px solid #000000;
+        }
+
+        .foilOverlay {
+            opacity: 0.2;
+        }
+
+        .selectableCard > .borderOverlay {
+            border: 2px solid #00ff00;
+            cursor: pointer;
+        }
+
+        .selectedCard > .borderOverlay {
+            border: 2px solid #00cccc;
+        }
+
+        .cardCount {
+            width: 20px;
+            height: 18px;
+            background-color: #000000;
+            color: #ffffff;
+            font-size: 120%;
+            font-weight: bolder;
+            display: table-cell;
+            text-align: center;
+            vertical-align: middle;
+            opacity: 0.7;
+        }
+
+        .ui-layout-east {
+            width: 350px;
+        }
+
+        #manageDecks {
+            color: #ffffff;
+            font-size: 180%;
+        }
+
+        #editingDeck {
+            vertical-align: top;
+            padding-left: 3px;
+        }
+
+        #deckStats {
+            color: #ffffff;
+        }
+
+        .ui-button-text-only .ui-button-text {
+            font-size: 70%;
+        }
+
+        #set {
+            width: 120px;
+        }
+
+        #cardType {
+            width: 100px;
+        }
+
+        #fullFiltering select {
+            font-size: 80%;
+        }
+
+        #fullFiltering input {
+            font-size: 80%;
+        }
+
+        #filtering select {
+            font-size: 80%;
+        }
+
+    </style>
+    <link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
+    <link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
+
+    <script type="text/javascript" src="js/jquery/jquery-1.6.2.js"></script>
+    <script type="text/javascript" src="js/jquery/jquery-ui-1.8.16.custom.min.js"></script>
+    <script type="text/javascript" src="js/jquery/jquery.cookie.js"></script>
+    <script type="text/javascript" src="js/jquery/jquery.layout.js"></script>
+    <script type="text/javascript" src="js/jquery/jquery.touchSwipe.js"></script>
+
+    <script type="text/javascript" src="js/inheritance.js"></script>
+    <script type="text/javascript" src="js/communication.js"></script>
+    <script type="text/javascript" src="js/deliveryService.js"></script>
+    <script type="text/javascript" src="js/jCardGroup.js"></script>
+    <script type="text/javascript" src="js/jCards.js"></script>
+    <script type="text/javascript" src="js/logging.js"></script>
+    <script type="text/javascript" src="js/commonUi.js"></script>
+    <script type="text/javascript" src="js/merchantUi.js"></script>
+    <script type="text/javascript" src="js/cardFilter.js"></script>
+
+    <script type="text/javascript">
+
+        // TODO: delete - Only for debugging
+        function getUrlParam(param) {
+            var search = window.location.search.substring(1);
+            if (search.indexOf('&') > -1) {
+                var params = search.split('&');
+                for (var i = 0; i < params.length; i++) {
+                    var key_value = params[i].split('=');
+                    if (key_value[0] == param) return key_value[1];
+                }
+            } else {
+                var params = search.split('=');
+                if (params[0] == param) return params[1];
+            }
+            return null;
+        }
+
+        function getMapSize(map) {
+            var size = 0, key;
+            for (key in map)
+                if (map.hasOwnProperty(key)) size++;
+            return size;
+        }
+
+        $(document).ready(
+                function() {
+                    var ui = new GempLotrMerchantUI($("#cardList"), $("#cardFilter"));
+
+                    $(window).resize(function() {
+                        layoutUi(ui);
+                    });
+
+                    layoutUi(ui);
+                });
+
+        function layoutUi(ui) {
+            var width = $(window).width();
+            var height = $(window).height();
+            if (width < 800)
+                width = 800;
+            if (height < 400)
+                height = 400;
+
+            var padding = 5;
+            var filterHeight = 160;
+
+            $("#cardFilter").css({position: "absolute", left: padding, top: padding, width: width - padding * 2, height: filterHeight});
+            $("#cardList").css({position: "absolute", left: padding, top: 2 * padding + filterHeight, width: width - padding * 2, height: height - filterHeight - padding * 3});
+            ui.layoutUI();
+        }
+    </script>
+
+</head>
+<body>
+<div id="main"
+     style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; overflow: hidden">
+    <div id="cardFilter"></div>
+    <div id="cardList"></div>
+</div>
+</body>
+</html>