diff --git a/src/assets/Bank.json b/src/assets/Bank.json
index 17d5bcc..2b08e11 100644
--- a/src/assets/Bank.json
+++ b/src/assets/Bank.json
@@ -1,219 +1,239 @@
 [
     {
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "SBT_addr",
-                "type": "address"
-            }
-        ],
-        "stateMutability": "nonpayable",
-        "type": "constructor"
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "SBT_addr",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "nonpayable",
+      "type": "constructor"
     },
     {
-        "inputs": [],
-        "name": "owner",
-        "outputs": [
-            {
-                "internalType": "address",
-                "name": "",
-                "type": "address"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
+      "inputs": [],
+      "name": "owner",
+      "outputs": [
+        {
+          "internalType": "address",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     },
     {
-        "inputs": [],
-        "name": "recv",
-        "outputs": [
-            {
-                "internalType": "bool",
-                "name": "",
-                "type": "bool"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
+      "inputs": [],
+      "name": "recv",
+      "outputs": [
+        {
+          "internalType": "bool",
+          "name": "",
+          "type": "bool"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     },
     {
-        "inputs": [],
-        "name": "sbt",
-        "outputs": [
-            {
-                "internalType": "contract SoulboundToken",
-                "name": "",
-                "type": "address"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
+      "inputs": [],
+      "name": "sbt",
+      "outputs": [
+        {
+          "internalType": "contract SoulboundToken",
+          "name": "",
+          "type": "address"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     },
     {
-        "stateMutability": "payable",
-        "type": "receive",
-        "payable": true
+      "stateMutability": "payable",
+      "type": "receive",
+      "payable": true
     },
     {
-        "inputs": [
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "setCredit",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "uint256",
+          "name": "number",
+          "type": "uint256"
+        }
+      ],
+      "name": "register",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "shop",
+          "type": "address"
+        },
+        {
+          "internalType": "uint256",
+          "name": "amount",
+          "type": "uint256"
+        }
+      ],
+      "name": "pay",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "repay",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        },
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "payable",
+      "type": "function",
+      "payable": true
+    },
+    {
+      "inputs": [],
+      "name": "start_recv",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [],
+      "name": "stop_recv",
+      "outputs": [],
+      "stateMutability": "nonpayable",
+      "type": "function"
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        }
+      ],
+      "name": "getCredit",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        }
+      ],
+      "name": "getArrear",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
+    },
+    {
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        }
+      ],
+      "name": "getClientOrders",
+      "outputs": [
+        {
+          "components": [
             {
-                "internalType": "address",
-                "name": "client",
-                "type": "address"
+              "internalType": "bool",
+              "name": "isFinished",
+              "type": "bool"
             },
             {
-                "internalType": "uint256",
-                "name": "amount",
-                "type": "uint256"
-            }
-        ],
-        "name": "setCredit",
-        "outputs": [],
-        "stateMutability": "nonpayable",
-        "type": "function"
-    },
-    {
-        "inputs": [
-            {
-                "internalType": "uint256",
-                "name": "number",
-                "type": "uint256"
-            }
-        ],
-        "name": "register",
-        "outputs": [],
-        "stateMutability": "nonpayable",
-        "type": "function"
-    },
-    {
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "shop",
-                "type": "address"
+              "internalType": "uint256",
+              "name": "amount",
+              "type": "uint256"
             },
             {
-                "internalType": "uint256",
-                "name": "amount",
-                "type": "uint256"
+              "internalType": "address",
+              "name": "shop",
+              "type": "address"
             }
-        ],
-        "name": "pay",
-        "outputs": [],
-        "stateMutability": "nonpayable",
-        "type": "function"
+          ],
+          "internalType": "struct Order[]",
+          "name": "",
+          "type": "tuple[]"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     },
     {
-        "inputs": [],
-        "name": "repay",
-        "outputs": [
-            {
-                "internalType": "uint256",
-                "name": "",
-                "type": "uint256"
-            },
-            {
-                "internalType": "uint256",
-                "name": "",
-                "type": "uint256"
-            }
-        ],
-        "stateMutability": "payable",
-        "type": "function",
-        "payable": true
-    },
-    {
-        "inputs": [],
-        "name": "start_recv",
-        "outputs": [],
-        "stateMutability": "nonpayable",
-        "type": "function"
-    },
-    {
-        "inputs": [],
-        "name": "stop_recv",
-        "outputs": [],
-        "stateMutability": "nonpayable",
-        "type": "function"
-    },
-    {
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "client",
-                "type": "address"
-            }
-        ],
-        "name": "getCredit",
-        "outputs": [
-            {
-                "internalType": "uint256",
-                "name": "",
-                "type": "uint256"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
-    },
-    {
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "client",
-                "type": "address"
-            }
-        ],
-        "name": "getArrear",
-        "outputs": [
-            {
-                "internalType": "uint256",
-                "name": "",
-                "type": "uint256"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
-    },
-    {
-        "inputs": [
-            {
-                "internalType": "address",
-                "name": "client",
-                "type": "address"
-            }
-        ],
-        "name": "getClientOrders",
-        "outputs": [
-            {
-                "components": [
-                    {
-                        "internalType": "bool",
-                        "name": "isFinished",
-                        "type": "bool"
-                    },
-                    {
-                        "internalType": "uint256",
-                        "name": "amount",
-                        "type": "uint256"
-                    },
-                    {
-                        "internalType": "address",
-                        "name": "shop",
-                        "type": "address"
-                    }
-                ],
-                "internalType": "struct Order[]",
-                "name": "",
-                "type": "tuple[]"
-            }
-        ],
-        "stateMutability": "view",
-        "type": "function",
-        "constant": true
+      "inputs": [
+        {
+          "internalType": "address",
+          "name": "client",
+          "type": "address"
+        }
+      ],
+      "name": "getSBTNumber",
+      "outputs": [
+        {
+          "internalType": "uint256",
+          "name": "",
+          "type": "uint256"
+        }
+      ],
+      "stateMutability": "view",
+      "type": "function",
+      "constant": true
     }
-]
\ No newline at end of file
+  ]
\ No newline at end of file
diff --git a/src/components/PageNavbar.vue b/src/components/PageNavbar.vue
index 23869a9..50212f6 100644
--- a/src/components/PageNavbar.vue
+++ b/src/components/PageNavbar.vue
@@ -1,11 +1,22 @@
 <script>
+import detectEthereumProvider from '@metamask/detect-provider'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import Web3 from 'web3'
+import Bank from '@/assets/Bank.json'
+
 export default {
+  components: { WarningModal, SuccessModal },
   name: 'PageNavbar',
   data() {
     return {
+      BankAddress: import.meta.env.VITE_BANK_ADDR,
       linked: false,
       address: '',
-      msg: "HELLO"
+      msg:'',
+      successModalStatus: false,
+      warningModalStatus: false,
+      web3: null,
     }
   },
   mounted() {
@@ -15,8 +26,52 @@ export default {
     } else {
       this.linked = true
       this.address = this.$cookies.get('address')
-      console.log(this.address)
-      console.log("Addr: "+this.address)
+    }
+  },
+  methods: {
+    async login() {
+      const provider = await detectEthereumProvider()
+      if (provider) {
+        const chainId = await window.ethereum.request({ method: 'eth_chainId' })
+        console.log(chainId)
+        if (chainId == import.meta.env.VITE_CHAIN_ID) {
+          const account = await window.ethereum.request({ method: 'eth_requestAccounts' })
+
+          // check from bank
+          this.web3 = new Web3(window.ethereum)
+          var token = new this.web3.eth.Contract(Bank, this.BankAddress)
+          var clientAddr = (await this.web3.eth.getAccounts())[0]
+          this.web3.eth.defaultAccount = clientAddr
+          var returnNumber = await token.methods.getSBTNumber(clientAddr).call({from: clientAddr})
+          if (returnNumber != 0){
+            this.$cookies.set('address', clientAddr)
+            this.$cookies.set('linked', true)
+            this.$cookies.set('SBTNumber', returnNumber)
+            this.linked = true
+            this.address = this.$cookies.get('address')
+            this.msg = '成功連接 MetaMask'
+            this.successModalStatus = true
+          } else {
+            this.msg = '您可能還沒有註冊過！'
+            this.warningModalStatus = true
+          }
+        } else {
+          this.msg = '你連接的不是 Sepolia 測試網路，目前只接受 Sepolia address'
+          this.warningModalStatus = true
+        }
+      } else {
+        this.msg = 'no Metamask'
+        this.warningModalStatus = true
+      }
+    },
+    logout () {
+      console.log('logout')
+      this.linked = false
+      this.address = ''
+      this.$cookies.remove('linked')
+      this.$cookies.remove('address')
+      this.$cookies.remove('SBTNumber')
+      this.$router.push('/')
     }
   }
 }
@@ -52,11 +107,12 @@ export default {
                 <template v-if="!linked">
                   <div class="buttons">
                     <RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
-                    <RouterLink to="/login" class="button is-info is-outlined">Log in</RouterLink>
+                    <a class="button is-info is-outlined" @click="login">Log in</a>
                   </div>
                 </template>
                 <template v-else>
-                  <button class="button is-info is-outlined is-small is-rounded">{{ 'Hello! ' + address }}</button>
+                  <RouterLink to="/client" class="button is-info is-outlined is-small is-rounded">{{ 'Hello! ' + address }}</RouterLink>
+                  <button class="button is-danger is-outlined is-small is-rounded" @click="logout">登出</button>
                 </template>
               </div>
             </div>
@@ -65,4 +121,7 @@ export default {
       </div>
     </div>
   </section>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus=false"></WarningModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus=false" link="/client" btnName="繼續"></SuccessModal>
+
 </template>
diff --git a/src/views/ClientMainView.vue b/src/views/ClientMainView.vue
index 2b32ca1..a35d38e 100644
--- a/src/views/ClientMainView.vue
+++ b/src/views/ClientMainView.vue
@@ -44,7 +44,7 @@ export default {
       console.log(`Code matched = ${decodedText}`, decodedResult);
       this.scanner.clear()
     },
-    scan() {
+    scan () {
       this.scanner = new Html5QrcodeScanner(
         "reader",
         { fps: 10, qrbox: { width: 250, height: 250 } },