diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js
index f626fad..c104283 100644
--- a/client/src/modules/GameCreationStepManager.js
+++ b/client/src/modules/GameCreationStepManager.js
@@ -728,7 +728,13 @@ function updateDeckStatus (deckManager) {
         if (document.getElementById('deck-list-placeholder')) {
             document.getElementById('deck-list-placeholder').remove();
         }
-        for (const card of deckManager.getCurrentDeck()) {
+        const sortedDeck = deckManager.getCurrentDeck().sort((a, b) => {
+            if (a.team !== b.team) {
+                return a.team === globals.ALIGNMENT.GOOD ? 1 : -1;
+            }
+            return a.role.localeCompare(b.role);
+        });
+        for (const card of sortedDeck) {
             if (card.quantity > 0) {
                 const roleEl = document.createElement('div');
                 roleEl.classList.add('deck-role');
diff --git a/client/src/views/home.html b/client/src/views/home.html
index d3efe1c..ae9cf2d 100644
--- a/client/src/views/home.html
+++ b/client/src/views/home.html
@@ -35,7 +35,7 @@
         <form id="join-form">
             <div>
                 <label for="room-code">Room Code</label>
-                <input id="room-code" type="text" placeholder="six-character code..." autocomplete="off" required/>
+                <input id="room-code" type="text" placeholder="four-character code..." autocomplete="off" required/>
             </div>
             <input id="join-button" type="submit" value="Join"/>
         </form>