diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/game.html b/gemp-lotr/gemp-lotr-async/src/main/web/game.html
index fd68dd212..6222a5e19 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/game.html
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/game.html
@@ -49,36 +49,12 @@
     <script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
     
     <!-- Audio file downloaded from https://material.io/design/sound/sound-resources.html -->
-    <audio id="awaitAction" src="/gemp-lotr/awaiting_decision.mp3" type="audio/mpeg" preload="metadata"></audio>
-
-
-<script type="text/javascript">
-    var ui;
-    var communication;
-
-    $(document).ready(
-            function () {
-                var replay = getUrlParam("replayId");
-
-                ui = new GempLotrGameUI("/gemp-lotr-server", replay != null);
-
-                $(window).resize(function () {
-                    ui.windowResized();
-                });
-
-                ui.layoutUI(true);
-
-                if (replay == null)
-                    ui.startGameSession();
-                else
-                    ui.startReplaySession(replay);
-            });
-</script>
+    <audio id="awaitAction" src="/gemp-lotr/src/assets/awaiting_decision.mp3" type="audio/mpeg" preload="metadata"></audio>
 
+    <link rel="stylesheet" type="text/css" href="src/Game/index.css">
+    <script type="text/javascript" src="src/Game/game.js"></script>
 </head>
 <body>
-<div id="main"
-     style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; overflow: hidden">
-</div>
+    <div id="main"></div>
 </body>
 </html>
diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/merchant.html b/gemp-lotr/gemp-lotr-async/src/main/web/merchant.html
index 96f83d5f4..50b878d32 100644
--- a/gemp-lotr/gemp-lotr-async/src/main/web/merchant.html
+++ b/gemp-lotr/gemp-lotr-async/src/main/web/merchant.html
@@ -48,40 +48,13 @@
     <script type="text/javascript" src="js/gemp-022/gameAnimations.js"></script>
     <script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
 
-    <script type="text/javascript">
+    <link rel="stylesheet" type="text/css" href="src/Merchant/index.css">
+    <script type="text/javascript" src="src/Merchant/merchant.js"></script>
 
-        $(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="main">
     <div id="cardFilter"></div>
     <div id="cardList"></div>
 </div>
