diff --git a/frontend/assets/resources/prefabs/GameRule.prefab b/frontend/assets/resources/prefabs/GameRule.prefab
index 07fd477..b712fd2 100644
--- a/frontend/assets/resources/prefabs/GameRule.prefab
+++ b/frontend/assets/resources/prefabs/GameRule.prefab
@@ -30,14 +30,14 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 75
+        "__id__": 76
       },
       {
-        "__id__": 76
+        "__id__": 77
       }
     ],
     "_prefab": {
-      "__id__": 77
+      "__id__": 78
     },
     "_opacity": 255,
     "_color": {
@@ -2612,7 +2612,7 @@
       }
     ],
     "_prefab": {
-      "__id__": 74
+      "__id__": 75
     },
     "_opacity": 255,
     "_color": {
@@ -2808,15 +2808,21 @@
       "__id__": 68
     },
     "_enabled": true,
-    "_normalMaterial": null,
+    "_normalMaterial": {
+      "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+    },
     "_grayMaterial": null,
     "duration": 0.1,
     "zoomScale": 1.2,
-    "clickEvents": [],
+    "clickEvents": [
+      {
+        "__id__": 74
+      }
+    ],
     "_N$interactable": true,
     "_N$enableAutoGrayEffect": false,
-    "_N$transition": 2,
-    "transition": 2,
+    "_N$transition": 3,
+    "transition": 3,
     "_N$normalColor": {
       "__type__": "cc.Color",
       "r": 255,
@@ -2872,6 +2878,16 @@
     },
     "_id": ""
   },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "dd92bKVy8FJY7uq3ieoNZCZ",
+    "handler": "onModeButtonClicked",
+    "customEventData": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {
@@ -2906,6 +2922,7 @@
         "__id__": 46
       }
     ],
+    "chosenSpeciesId": 0,
     "_id": ""
   },
   {
diff --git a/frontend/assets/scenes/login.fire b/frontend/assets/scenes/login.fire
index 76ce9c0..9ae6f1e 100644
--- a/frontend/assets/scenes/login.fire
+++ b/frontend/assets/scenes/login.fire
@@ -461,7 +461,7 @@
       "array": [
         0,
         0,
-        223.42897822823446,
+        210.59754059453806,
         0,
         0,
         0,
diff --git a/frontend/assets/scripts/GameRule.js b/frontend/assets/scripts/GameRule.js
index 02cbe3e..c69cac9 100644
--- a/frontend/assets/scripts/GameRule.js
+++ b/frontend/assets/scripts/GameRule.js
@@ -14,16 +14,14 @@ cc.Class({
       type: cc.Node,
       default: []
     },
+    chosenSpeciesId: {
+      type: cc.Integer,
+      default: 0
+    },
   },
 
   // LIFE-CYCLE CALLBACKS:
-  onLoad() {
-    const modeBtnClickEventHandler = new cc.Component.EventHandler();
-    modeBtnClickEventHandler.target = this.mapNode;
-    modeBtnClickEventHandler.component = "Map";
-    modeBtnClickEventHandler.handler = "onGameRule1v1ModeClicked";
-    this.modeButton.clickEvents.push(modeBtnClickEventHandler);
-  },
+  onLoad() {},
 
   onSpeciesSelected(evt, val) {
     for (let cell of this.characterSelectCells) {
@@ -32,7 +30,12 @@ cc.Class({
         comp.chosenFlag.node.active = false;
       } else {
         comp.chosenFlag.node.active = true;
+        this.chosenSpeciesId = val;
       }
     }
   },
+
+  onModeButtonClicked(evt) {
+    this.mapNode.getComponent("Map").onGameRule1v1ModeClicked(this.chosenSpeciesId);
+  },
 });
diff --git a/frontend/assets/scripts/Map.js b/frontend/assets/scripts/Map.js
index 48cf9b6..26c12eb 100644
--- a/frontend/assets/scripts/Map.js
+++ b/frontend/assets/scripts/Map.js
@@ -1230,9 +1230,10 @@ othersForcedDownsyncRenderFrame=${JSON.stringify(othersForcedDownsyncRenderFrame
     self.enableInputControls();
   },
 
-  onGameRule1v1ModeClicked(evt, cb) {
+  onGameRule1v1ModeClicked(chosenSpeciesId) {
     const self = this;
     self.battleState = ALL_BATTLE_STATES.WAITING;
+    window.chosenSpeciesId = chosenSpeciesId; // TODO: Find a better way to pass it into "self.initAfterWSConnected"!
     window.initPersistentSessionClient(self.initAfterWSConnected, null /* Deliberately NOT passing in any `expectedRoomId`. -- YFLu */ );
     self.hideGameRuleNode();
   },
diff --git a/frontend/assets/scripts/WsSessionMgr.js b/frontend/assets/scripts/WsSessionMgr.js
index dd9eb2b..715f312 100644
--- a/frontend/assets/scripts/WsSessionMgr.js
+++ b/frontend/assets/scripts/WsSessionMgr.js
@@ -58,10 +58,21 @@ window.getBoundRoomCapacityFromPersistentStorage = function() {
   return (null == boundRoomCapacityStr ? null : parseInt(boundRoomCapacityStr));
 };
 
+window.getChosenSpeciesIdFromPersistentStorage = function() {
+  const boundRoomIdExpiresAt = parseInt(cc.sys.localStorage.getItem("boundRoomIdExpiresAt"));
+  if (!boundRoomIdExpiresAt || Date.now() >= boundRoomIdExpiresAt) {
+    window.clearBoundRoomIdInBothVolatileAndPersistentStorage();
+    return null;
+  }
+  const chosenSpeciesIdStr = cc.sys.localStorage.getItem("chosenSpeciesId");
+  return (null == chosenSpeciesIdStr ? 0 : parseInt(chosenSpeciesIdStr));
+};
+
 window.clearBoundRoomIdInBothVolatileAndPersistentStorage = function() {
   window.boundRoomId = null;
   cc.sys.localStorage.removeItem("boundRoomId");
   cc.sys.localStorage.removeItem("boundRoomCapacity");
+  cc.sys.localStorage.removeItem("chosenSpeciesId");
   cc.sys.localStorage.removeItem("boundRoomIdExpiresAt");
 };
 
@@ -84,6 +95,7 @@ window.handleHbRequirements = function(resp) {
     window.boundRoomCapacity = resp.bciFrame.boundRoomCapacity;
     cc.sys.localStorage.setItem('boundRoomId', window.boundRoomId);
     cc.sys.localStorage.setItem('boundRoomCapacity', window.boundRoomCapacity);
+    cc.sys.localStorage.setItem('chosenSpeciesId', window.chosenSpeciesId);
     cc.sys.localStorage.setItem('boundRoomIdExpiresAt', Date.now() + 10 * 60 * 1000); // Temporarily hardcoded, for `boundRoomId` only.
   }
   console.log(`Handle hb requirements #3`);
@@ -179,6 +191,13 @@ window.initPersistentSessionClient = function(onopenCb, expectedRoomId) {
     }
   }
 
+  if (null == window.chosenSpeciesId) {
+    window.chosenSpeciesId = getChosenSpeciesIdFromPersistentStorage();
+  }
+  if (null != window.chosenSpeciesId) {
+    urlToConnect = urlToConnect + "&speciesId=" + window.chosenSpeciesId;
+  }
+
   const clientSession = new WebSocket(urlToConnect);
   clientSession.binaryType = 'arraybuffer'; // Make 'event.data' of 'onmessage' an "ArrayBuffer" instead of a "Blob"
 
@@ -230,9 +249,9 @@ window.initPersistentSessionClient = function(onopenCb, expectedRoomId) {
             const peerAddrList = resp.rdf.peerUdpAddrList;
             console.log(`Got DOWNSYNC_MSG_ACT_PEER_UDP_ADDR peerAddrList=${JSON.stringify(peerAddrList)}; boundRoomCapacity=${window.boundRoomCapacity}`);
             for (let j = 0; j < 3; ++j) {
-                setTimeout(()=> {
-                    DelayNoMore.UdpSession.upsertPeerUdpAddr(peerAddrList, window.boundRoomCapacity, window.mapIns.selfPlayerInfo.JoinIndex); // In C++ impl it actually broadcasts the peer-punching message to all known peers within "window.boundRoomCapacity"
-                }, j*500);
+              setTimeout(() => {
+                DelayNoMore.UdpSession.upsertPeerUdpAddr(peerAddrList, window.boundRoomCapacity, window.mapIns.selfPlayerInfo.JoinIndex); // In C++ impl it actually broadcasts the peer-punching message to all known peers within "window.boundRoomCapacity"
+              }, j * 500);
             }
           }
           break;