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 75c765a4b..970798ede 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
@@ -524,7 +524,8 @@ var GempLotrDeckBuildingUI = Class.extend({
 
     displayCardInfo: function(card) {
         this.infoDialog.html("");
-        this.infoDialog.html("<div style='scroll: auto'><img src='" + card.imageUrl + "'></div>");
+        this.infoDialog.html("<div style='scroll: auto'></div>");
+        this.infoDialog.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal));
         var windowWidth = $(window).width();
         var windowHeight = $(window).height();
 
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 b3f94a88c..574dc7b57 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
@@ -449,7 +449,13 @@ var GempLotrGameUI = Class.extend({
 
     displayCard: function(card, extraSpace) {
         this.infoDialog.html("");
-        this.infoDialog.html("<div style='scroll: auto'><div style='float: left;'><img src='" + card.imageUrl + "'></div><div id='cardEffects'></div></div>");
+        this.infoDialog.html("<div style='scroll: auto'></div>");
+        var floatCardDiv = $("<div style='float: left;'></div>");
+        floatCardDiv.append(createFullCardDiv(card.imageUrl, card.foil, card.horizontal));
+        this.infoDialog.append(floatCardDiv);
+        if (extraSpace)
+            this.infoDialog.append("<div id='cardEffects'></div>");
+
         var windowWidth = $(window).width();
         var windowHeight = $(window).height();
 
@@ -485,21 +491,21 @@ var GempLotrGameUI = Class.extend({
     initializeDialogs: function() {
         this.smallDialog = $("<div></div>")
                 .dialog({
-                    autoOpen: false,
-                    closeOnEscape: false,
-                    resizable: false,
-                    width: 400,
-                    height: 200
-                });
+            autoOpen: false,
+            closeOnEscape: false,
+            resizable: false,
+            width: 400,
+            height: 200
+        });
 
         this.cardActionDialog = $("<div></div>")
                 .dialog({
-                    autoOpen: false,
-                    closeOnEscape: false,
-                    resizable: true,
-                    width: 600,
-                    height: 300
-                });
+            autoOpen: false,
+            closeOnEscape: false,
+            resizable: true,
+            width: 600,
+            height: 300
+        });
 
         var that = this;
 
@@ -514,11 +520,11 @@ var GempLotrGameUI = Class.extend({
 
         this.infoDialog = $("<div></div>")
                 .dialog({
-                    autoOpen: false,
-                    closeOnEscape: true,
-                    resizable: false,
-                    title: "Card information"
-                });
+            autoOpen: false,
+            closeOnEscape: true,
+            resizable: false,
+            title: "Card information"
+        });
 
         var swipeOptions = {
             threshold: 20,
@@ -989,12 +995,12 @@ var GempLotrGameUI = Class.extend({
 
         if (!this.replayMode) {
             this.smallDialog.dialog("option", "buttons",
-                    {
-                        "OK": function() {
-                            $(this).dialog("close");
-                            that.decisionFunction(id, $("#integerDecision").val());
-                        }
-                    });
+            {
+                "OK": function() {
+                    $(this).dialog("close");
+                    that.decisionFunction(id, $("#integerDecision").val());
+                }
+            });
         }
 
         $("#integerDecision").SpinnerControl({ type: 'range',
@@ -1030,12 +1036,12 @@ var GempLotrGameUI = Class.extend({
 
         if (!this.replayMode) {
             this.smallDialog.dialog("option", "buttons",
-                    {
-                        "OK": function() {
-                            $(this).dialog("close");
-                            that.decisionFunction(id, $("#multipleChoiceDecision").val());
-                        }
-                    });
+            {
+                "OK": function() {
+                    $(this).dialog("close");
+                    that.decisionFunction(id, $("#multipleChoiceDecision").val());
+                }
+            });
         }
 
         this.smallDialog.dialog("open");
@@ -1399,8 +1405,8 @@ var GempLotrGameUI = Class.extend({
                     $(div).find('LI.hover').removeClass('hover');
                     $(this).parent().addClass('hover');
                 }).mouseout(function() {
-                    $(div).find('LI.hover').removeClass('hover');
-                });
+            $(div).find('LI.hover').removeClass('hover');
+        });
 
         var getRidOfContextMenu = function() {
             $(div).remove();
diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCards.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCards.js
index 0b1ff2edb..70d9a8ec5 100644
--- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCards.js
+++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/jCards.js
@@ -164,6 +164,34 @@ function createCardDiv(image, text, foil, tokens) {
     return cardDiv;
 }
 
+function createFullCardDiv(image, foil, horizontal) {
+    if (horizontal) {
+        var cardDiv = $("<div style='position: relative;width:497px;height:357px;'></div>");
+        cardDiv.append("<div style='position:absolute'><img src='" + image + "' width='497' height='357'></div>");
+
+        var borderDiv = $("<div class='borderOverlay' style='position:absolute;width:465px;height:325px;border-width:16px'><img class='actionArea' src='/gemp-lotr/images/pixel.png' width='100%' height='100%'></div>");
+        cardDiv.append(borderDiv);
+
+        if (foil) {
+            var foilDiv = $("<div class='foilOverlay' style='position:absolute;width:497px;height:357px'><img src='/gemp-lotr/images/foil.gif' width='100%' height='100%'></div>");
+            cardDiv.append(foilDiv);
+        }
+    } else {
+        var cardDiv = $("<div style='position: relative;width:357px;height:497px;'></div>");
+        cardDiv.append("<div style='position:absolute'><img src='" + image + "' width='357' height='497'></div>");
+
+        var borderDiv = $("<div class='borderOverlay' style='position:absolute;width:325px;height:465px;border-width:16px'><img class='actionArea' src='/gemp-lotr/images/pixel.png' width='100%' height='100%'></div>");
+        cardDiv.append(borderDiv);
+
+        if (foil) {
+            var foilDiv = $("<div class='foilOverlay' style='position:absolute;width:357px;height:497px'><img src='/gemp-lotr/images/foil.gif' width='100%' height='100%'></div>");
+            cardDiv.append(foilDiv);
+        }
+    }
+
+    return cardDiv;
+}
+
 function createSimpleCardDiv(image) {
     var cardDiv = $("<div class='card'><img src='" + image + "' width='100%' height='100%'></div>");