diff --git a/index.html b/index.html
index 80b3774..6cba1cf 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,14 @@
 							<p class="text-gray">始于2016年3月</p>
 							<div class="picture">
 								<img src="static/image/app.png" width="512" height="320" alt="亲戚称呼换算APP"/>
-								<a class="btn" href="vue/" target="_blank">访问手机版</a>
+							</div>
+							<div class="mobile">
+								<a class="btn" href="vue/" target="_blank">
+									<span class="name">访问手机版</span>
+									<span class="qrcode">
+										<img src="static/image/qrcode.png"/>
+									</span>
+								</a>
 							</div>
 						</div>
 						<div class="bd">
diff --git a/static/image/qrcode.png b/static/image/qrcode.png
new file mode 100644
index 0000000..23c3ccc
Binary files /dev/null and b/static/image/qrcode.png differ
diff --git a/static/image/scan.png b/static/image/scan.png
new file mode 100644
index 0000000..6fc8100
Binary files /dev/null and b/static/image/scan.png differ
diff --git a/static/style/index.css b/static/style/index.css
index 2f48ca7..5b98c14 100644
--- a/static/style/index.css
+++ b/static/style/index.css
@@ -202,7 +202,7 @@ a:hover{
 .mod-panel .hd p.text-gray{
     color: rgba(0,0,0,0.25);
 }
-.mod-panel .hd .picture{
+.mod-panel .hd .picture,.mod-panel .hd .mobile{
     position: relative;
     width: 400px;
     text-align: center;
@@ -210,7 +210,8 @@ a:hover{
 .mod-panel .hd .picture img{
     margin-left: -56px;
 }
-.mod-panel .hd .picture .btn{
+.mod-panel .hd .btn{
+    position: relative;
     display: inline-block;
     height: 36px;
     margin-top: -20px;
@@ -223,15 +224,53 @@ a:hover{
     text-align: center;
     font-size: 15px;
     color: #fff;
-    overflow: hidden;
     transition: color .2s,opacity .2s;
     font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
     outline: none;
     -webkit-appearance: none;
 }
-.mod-panel .hd .picture .btn:hover {
+.mod-panel .hd .btn span.name{
+    display: inline-block;
+    padding-right: 30px;
+    background: url('../image/scan.png') right center / 16px 16px no-repeat;
+}
+.mod-panel .hd .btn span.qrcode{
+    display: none;
+    position: absolute;
+    right: -160px;
+    top: 50%;
+    z-index:999;
+    width: 150px;
+    height: 150px;
+    padding: 5px;
+    background: #fff;
+    margin-top: -85px;
+    border: 2px solid rgba(0,0,0,0.1);
+}
+.mod-panel .hd .btn span.qrcode img{
+    width: 150px;
+    height: 150px;
+}
+.mod-panel .hd .btn span.qrcode::after{
+    position: absolute;
+    left: -8px;
+    top: 50%;
+    margin-top: -6px;
+    display: block;
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: #fff;
+    border-left: 2px solid rgba(0,0,0,0.1);
+    border-bottom: 2px solid rgba(0,0,0,0.1);
+    transform: rotate(45deg);
+}
+.mod-panel .hd .btn:hover {
     background: #207fcc;
 }
+.mod-panel .hd .btn:hover span.qrcode{
+    display: block;
+}
 .mod-panel .hd b{
 	margin: 0 3px;
 	color: #fd7474;
diff --git a/zh-HK.html b/zh-HK.html
index 6be37da..0e3e645 100644
--- a/zh-HK.html
+++ b/zh-HK.html
@@ -67,7 +67,14 @@
 							<p class="text-gray">始於2016年3月</p>
 							<div class="picture">
 								<img src="static/image/app.png" width="512" height="320" alt="親戚稱呼換算APP"/>
-								<a class="btn" href="vue/" target="_blank">訪問手機版</a>
+							</div>
+							<div class="mobile">
+								<a class="btn" href="vue/" target="_blank">
+									<span class="name">訪問手機版</span>
+									<span class="qrcode">
+										<img src="static/image/qrcode.png"/>
+									</span>
+								</a>
 							</div>
 						</div>
 						<div class="bd">