diff --git a/src/comp/desktopNav.html b/src/comp/desktopNav.html
index 1a22431..43f9d7c 100644
--- a/src/comp/desktopNav.html
+++ b/src/comp/desktopNav.html
@@ -3,12 +3,33 @@
     <img src="./img/home/logo@2x.png" />
   </a>
   <nav class="nav">
-    <a href="./index.html" id="nav_index">Home</a>
-    <a href="./gameplay.html" id="nav_gameplay">GamePlay</a>
-    <a href="./nft.html" id="nav_nft">NFT</a>
-    <a href="./tokenomic.html" id="nav_tokenomic">Tokenomic</a>
-    <a href="./team.html" id="nav_team">Team</a>
-    <a href="./roadmap.html" id="nav_roadmap">Roadmap</a>
+    <ul class="main">
+      <li><a href="./index.html" id="nav_index">Home</a></li>
+      <li><a href="./gameplay.html" id="nav_gameplay">GamePlay</a></li>
+      <li><a href="./nft.html" id="nav_nft">NFT</a></li>
+      <li><a href="./tokenomic.html" id="nav_tokenomic">Tokenomic</a></li>
+      <li><a href="./team.html" id="nav_team">Team</a></li>
+      <li><a href="./roadmap.html" id="nav_roadmap">Roadmap</a></li>
+      <li class="dropdown">
+        <a href="javascript:void(0)" id="nav_activity" class="dropdown-toggle">
+          Activity
+          <span>
+            <svg t="1666610389853" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1853" width="16" height="16"><path d="M859.8528 292.9664H164.1472c-40.1408 0-60.3136 48.5376-31.8464 77.0048L480.1536 717.824c17.6128 17.6128 46.1824 17.6128 63.7952 0l347.8528-347.8528c28.3648-28.4672 8.2944-77.0048-31.9488-77.0048z" p-id="1854" fill="#ffffff"></path></svg>
+          </span>
+        </a>
+        <ul class="dropdown-menu">
+          <li>
+            <a href="./recruit.html" id="sub_act">Activity1</a>
+          </li>
+          <li>
+            <a href="./recruit.html" id="sub_act1">Activity1</a>
+          </li>
+          <li>
+            <a href="./recruit.html" id="sub_ac2">Activity1</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
   </nav>
   <a href="https://mall.cebg.games/index.html" class="market fr">
     <img src="img/home/marketplace@2x.png" />
diff --git a/src/desktop/ambassadorinfo.html b/src/desktop/ambassadorinfo.html
index 864c780..dfc92bd 100644
--- a/src/desktop/ambassadorinfo.html
+++ b/src/desktop/ambassadorinfo.html
@@ -17,31 +17,31 @@
 				<div class="amb-detail">
 					<div class="amb-de-l">
 						<div class="amb-de-l-img">
-							<img src="img/applyother/am12.jpg" width="284" height="278" />
+							<img id="info_portrait" src="img/applyother/am12.jpg" width="284" height="278" />
 						</div>
 						<div class="amb-i-3">
-							<p class="amb-i-txt">0x123456........445855</p>
+							<p class="amb-i-txt" id="info_account">0x123456........445855</p>
 						</div>
 						<div class="amb-i-4">
-							<p class="amb-i-txt">Kawabonga123@gmail.com</p>
+							<p class="amb-i-txt" id="info_email">Kawabonga123@gmail.com</p>
 						</div>
 					</div>
 					<div class="amb-de-r">
 						<div class="amb-i-5"><img src="img/applyother/am5.png" /></div>
 						<div class="amb-i-wrap">
 							<div class="amb-i-6">
-								<p class="amb-i-txt">Kawabonga</p>
+								<p class="amb-i-txt" id="info_name">Kawabonga</p>
 							</div>
 							<div class="amb-i-7">
-								<p class="amb-i-txt">Japan</p>
+								<p class="amb-i-txt" id="info_loc">Japan</p>
 							</div>
 							<div class="amb-i-8">
-								<p class="amb-i-txt">9，999，999</p>
+								<p class="amb-i-txt" id="info_commander">9，999，999</p>
 							</div>
 						</div>
 						<div class="amb-i-9"><img src="img/applyother/am9.png" /></div>
 						<div class="amb-i-10">
-							<div class="amb-i-10-scroll">
+							<div class="amb-i-10-scroll" id="info_intro">
 								He didn't write anything
 							</div>
 						</div>
@@ -58,9 +58,27 @@
 		<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
     %>
 		<script>
+			const DETAIL_URL = 'http://192.168.100.82:3000/invitation/get_amb'
 			$(function() {
+				function getUrlParam(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+        }
+				function formatAddress(address) {
+					if (address.length >= 10) {
+							return address.substring(0, 6) + '......' + address.substring(address.length - 4)
+					} else if (address.length > 0 && address.length < 10) {
+							return address
+					} else {
+							return '-'
+					}
+				}
+
 				$("#copyBtn").click(function() {
-					var _text = $(this).prev("span").text();
+					var host = location.origin;
+					var path = location.pathname.replace('ambassadorinfo', 'join');
+					var _text = `${host}${path}?amb=${account}`;
 					const input = document.createElement('input');
 					document.body.appendChild(input);
 					input.value = _text;
@@ -70,8 +88,53 @@
 						alert('复制成功')
 					}
 					document.body.removeChild(input);
-					
 				})
+				let account = getUrlParam('amb');
+				if (!account) {
+					return
+				}
+				function showInfo(data) {
+					$('#info_name').html(data.name || "-");
+					$('#info_loc').html(data.comefrom || "-");
+					$('#info_commander').html(data.commander || "-");
+					$('#info_email').html(data.email || "-");
+					$('#info_account').html(formatAddress(data.account));
+					if (data.aboutme) {
+						$('#info_intro').html(data.aboutme);	
+					}
+					if (data.headpic) {
+						$('#info_portrait').attr('src', data.headpic);
+					}
+				}
+				var fetchDatas = async () => {
+					var headers = new Headers();
+					headers.append("Content-Type", "application/json");
+					try {
+						let data = await fetch(
+							DETAIL_URL,
+							{ 
+								method: 'POST', 
+								headers,
+								mode: 'cors', 
+								cache: 'no-cache',
+								body: JSON.stringify({
+									account
+								})
+							},
+							
+						)
+						.then(res => {
+							return res.json()
+						})
+						if (!data.errcode) {
+							console.log(data.data)
+							showInfo(data.data);
+						}
+					} catch (err) {
+						console.log('error get data', err);
+					}
+				}
+				fetchDatas();
 			})
 		</script>
 	</body>
diff --git a/src/desktop/ambassadors.html b/src/desktop/ambassadors.html
index 1922272..cc83066 100644
--- a/src/desktop/ambassadors.html
+++ b/src/desktop/ambassadors.html
@@ -15,87 +15,18 @@
 			</section>
 			<section class="main-con amb-con">
 				<div class="amb-scroll" id="ambScroll">
-					<div class="amb-inner">
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
-						<div class="amb-item">
-							<a href="ambassadorinfo.html"><img src="img/applyother/am2.jpg" width="251" height="246"/></a>
-							<p>
-								<span>Kawabonga</span>
-								<span>Japan</span>
-								<span>1023</span>
-							</p>
-						</div>
+					<div class="amb-item hide" id="sample">
+						<a href="ambassadorinfo.html" class="info_href">
+							<img class="portrait" src="img/applyother/am2.jpg" width="251" height="246"/>
+						</a>
+						<p>
+							<span class="name">Kawabonga</span>
+							<span class="loc">Japan</span>
+							<span class="commander">1023</span>
+						</p>
+					</div>
+					<div class="amb-inner" id="amb_container">
+						
 					</div>
 				</div>
 			</section>
@@ -103,14 +34,40 @@
 		</section>
 		<%- include('../comp/walletModal.html') %> <%- include('../comp/jslib.html')
     %>
-		<script src="https://cdn.jsdelivr.net/npm/iscroll-custom@5.2.6/dist/iscroll-min.js" integrity="sha256-WL7uPHKr6GnT6ZIaiZYt+5/sq9LCrG8nZYMrSclPuxM=" crossorigin="anonymous"></script>
 		<script>
-			
+			const LIST_URL = 'http://192.168.100.82:3000/invitation/list_amb'
 			$(function () {
-				new IScroll("#ambScroll", {
-					mouseWheel: true,
-					scrollbars: true,
-				});
+				var showOne = (data) => {
+					let dom = $('#sample').clone();
+					if (data.headpic) {
+						$('.portrait', dom).attr('src', data.headpic);
+					}
+					$('.info_href', dom).attr('href', `ambassadorinfo.html?amb=${data.account}`)
+					$('.name', dom).replaceWith(`<span>${data.name || '-'}</span>`)
+					$('.loc', dom).replaceWith(`<span>${data.comefrom || '-'}</span>`)
+					$('.commander', dom).replaceWith(`<span>${data.commander || '-'}</span>`)
+					dom.show().appendTo('#amb_container')
+				}
+				var retry = 0;
+				var fetchDatas = async () => {
+					try {
+						let data = await fetch(
+							LIST_URL,
+							{ method: 'POST', mode: 'cors', cache: 'no-cache'}
+						)
+						.then(res => {
+							return res.json()
+						})
+						if (!data.errcode) {
+								for (let d of data.list) {
+									showOne(d);
+								}
+							}
+						} catch (err) {
+							console.log('error get data');
+						}
+				}
+				fetchDatas();
 			})
 		</script>
 	</body>
diff --git a/src/desktop/css/main.css b/src/desktop/css/main.css
index f7068ab..9b90c42 100755
--- a/src/desktop/css/main.css
+++ b/src/desktop/css/main.css
@@ -77,6 +77,38 @@ body {
 .nav a:hover::after {
 	height: 118px;
 }
+.nav .main{
+	flex-wrap: nowrap;
+  display: flex;
+}
+.dropdown{
+	position: relative;
+}
+.dropdown-menu {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 1000;
+	display: none;
+	float: left;
+	padding: 5px 0;
+	margin: 2px 0 0;
+	font-size: 14px;
+	text-align: left;
+	list-style: none;
+	background-color: #0000005d;
+	background-clip: padding-box;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0,0,0,.15);
+	border-radius: 4px;
+	-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+	flex-wrap: wrap!important;
+}
+.open .dropdown-menu {
+	display: flex;
+}
+
 
 .market {
 	margin-top: 44px;
@@ -1127,7 +1159,7 @@ span.swiper-pagination-bullet {
 	padding-top: 60px;
 }
 
-.apply-from input[type='submit'] {
+.apply-from .submit{
 	background: #fed235;
 	color: #000;
 	width: 274px;
@@ -1140,6 +1172,7 @@ span.swiper-pagination-bullet {
 	border-radius: 37px;
 	font-weight: bold;
 	cursor: pointer;
+	padding: 25px 50px;
 }
 
 .apply-from label.error {
@@ -1167,7 +1200,6 @@ span.swiper-pagination-bullet {
 }
 .amb-scroll{
 	position: relative;
-	height: 800px;
 	overflow: hidden;
 	width: 1290px;
 	margin: 0 auto;
diff --git a/src/desktop/commander_form.html b/src/desktop/join.html
similarity index 55%
rename from src/desktop/commander_form.html
rename to src/desktop/join.html
index 9c75a38..66c8da9 100644
--- a/src/desktop/commander_form.html
+++ b/src/desktop/join.html
@@ -47,7 +47,7 @@
 								</p>
 
 								<p class="tac submit-btn">
-									<input class="submit" type="submit" value="Send">
+									<span class="submit" id="submit_btn">Send</span>
 								</p>
 							</form>
 
@@ -64,8 +64,14 @@
     %>
 		<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js" integrity="sha256-JwUksNJ6/R07ZiLRoXbGeNrtlFZMFDKX4hemPiHOmCA=" crossorigin="anonymous"></script>
 		<script>
+			const FORM_URL = 'http://192.168.100.82:3000/invitation/add_commander';
 			$().ready(function() {
-				// 在键盘按下并释放及提交后验证提交表单
+				function getUrlParam(name) {
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) return unescape(r[2]); return null;
+        }
+				let ambassador = getUrlParam('amb') || '';
 				$("#signupForm").validate({
 					success:"valid",
 					rules: {
@@ -80,15 +86,101 @@
 						location: "This field cannot be empty. Please enter your country of residence."
 					},
 					submitHandler: function(form) {
-						// form.submit();
-						showSuccess();
+						postData(generateFormData());
 					}
 				});
+				$('#submit_btn').click(function() {
+					if (window.chain.logined) {
+						$('#signupForm').submit();
+					} else {
+						window.chainLogin(async function(){
+							let result = await checkJoined(window.chain.account);
+							if (result) {
+								showSuccess();
+							} else {
+								$('#signupForm').submit();
+							}
+							
+						})
+					}
+					
+				})
+				var generateFormData = () => {
+					return {
+						account: window.chain.account,
+						ambassador,
+						email: $('#email').val(),
+						name: $('#nickname').val(),
+						from: $('#location').val(),
+						bcexp: $('#ever').prop('checked')? 1: 0,
+						followcebg: $('#alr').prop('checked')? 1: 0,
+						joinedcebg: $('#dis').prop('checked')? 1: 0
+					}
+				}
+				var postData = async (formData) => {
+					var headers = new Headers();
+					headers.append("Content-Type", "application/json");
+					try {
+						let data = await fetch(
+							FORM_URL,
+							{ 
+								method: 'POST', 
+								headers,
+								mode: 'cors', 
+								cache: 'no-cache',
+								body: JSON.stringify(formData)
+							},
+						)
+						.then(res => {
+							return res.json()
+						})
+						if (!data.errcode) {
+							showSuccess();
+						}
+					} catch (err) {
+						console.log('error post data', err);
+					}
+				}
+				var checkJoined = async function(account) {
+					var headers = new Headers();
+					headers.append("Content-Type", "application/json");
+					try {
+						let data = await fetch(
+							FORM_URL,
+							{ 
+								method: 'POST', 
+								headers,
+								mode: 'cors', 
+								cache: 'no-cache',
+								body: JSON.stringify({account})
+							},
+						)
+						.then(res => {
+							return res.json()
+						})
+						if (!data.errcode) {
+							return true
+						} else {
+							return false
+						}
+					} catch (err) {
+						return false
+					}
+				}
 				function showSuccess(){
 					$('#success_tip').show()
 					$('#form_layer').hide()
 				}
-				// showSuccess();
+				async function checkStatus() {
+					if (window.chain && window.chain.logined) {
+						let result = await checkJoined(window.chain.account);
+						if (result) {
+							showSuccess();
+						}
+					}
+					
+				}
+				
 			});
 		</script>	
 	</body>
diff --git a/src/desktop/js/main.js b/src/desktop/js/main.js
index bc5bf23..3bfc8b0 100644
--- a/src/desktop/js/main.js
+++ b/src/desktop/js/main.js
@@ -10,6 +10,7 @@ var jcchain = require("./jcchain.js");
 })(jQuery);
 
 var chain = new jcchain.JCChain();
+window.chain = chain;
 var toggleLoginBtn = function () {
   if (chain.logined) {
     $("#header_loginbtn").hide();
@@ -23,15 +24,23 @@ toggleLoginBtn();
 var logSuccess = function () {
   console.log("login success");
   console.log(chain);
+  window.logincb && window.logincb();
+  window.logincb = undefined;
   toggleLoginBtn();
+  window.onChainLogined && window.onChainLogined();
+};
+window.chainLogin = function (cb) {
+  window.logincb = cb;
+  chain.login().then(logSuccess.bind(window));
 };
 $("#header_loginbtn").click(function () {
-  chain.login().then(logSuccess.bind(this));
+  window.chainLogin();
 });
 
 $("#header_logoutbtn").click(function () {
   chain.logout().then(() => {
     toggleLoginBtn();
+    window.onChainLoginOut && window.onChainLoginOut();
   });
 });
 jcchain.EventBus.$on(jcchain.SHOW_CHAIN_MODAL, function () {
@@ -39,13 +48,26 @@ jcchain.EventBus.$on(jcchain.SHOW_CHAIN_MODAL, function () {
   $("#wallet_modal").show();
 });
 $("#metamask_card").click(function () {
-  chain.selectWalletAndLogin(1).then(logSuccess.bind(this));
+  chain.selectWalletAndLogin(1).then(logSuccess.bind(window));
   $("#wallet_modal").hide();
 });
 $("#wc_card").click(function () {
-  chain.selectWalletAndLogin(2).then(logSuccess.bind(this));
+  chain.selectWalletAndLogin(2).then(logSuccess.bind(window));
   $("#wallet_modal").hide();
 });
+$(window).click(function () {
+  if ($(".dropdown").hasClass("open")) {
+    $(".dropdown").removeClass("open");
+  }
+});
+$(".dropdown-toggle").click(function (event) {
+  event.stopPropagation();
+  if (!$(this).parent().hasClass("open")) {
+    $(this).parent().addClass("open");
+  } else {
+    $(this).parent().removeClass("open");
+  }
+});
 
 $(".comingSoon").click(function () {
   $.message({ type: "default", content: "Coming Soon." });
@@ -53,3 +75,6 @@ $(".comingSoon").click(function () {
 if (window.cur) {
   $(`#nav_${cur}`).addClass("cur");
 }
+if (window.sub) {
+  $(`#sub_${sub}`).addClass("cur");
+}
diff --git a/src/desktop/recruit.html b/src/desktop/recruit.html
index ede628e..ef517c8 100644
--- a/src/desktop/recruit.html
+++ b/src/desktop/recruit.html
@@ -11,6 +11,7 @@
 		<section class="main">
 			<section class="header">
 				<img src="img/applyother/a3.png" width="100%" />
+				<script>cur = 'activity'; sub='act1'</script>
 				<%- include('../comp/desktopNav.html') %>
 			</section>
 			<section class="main-con">
@@ -18,7 +19,7 @@
 					<img src="img/applyother/a4.png" />
 				</div>
 				<div class="rec-2 tac">
-					<a href="commander_form.html"><img src="img/applyother/a5.png" /></a>
+					<a href="join.html"><img src="img/applyother/a5.png" /></a>
 				</div>
 				<div class="rec-3 tac">
 					<div class="gallery-top-wrap">