diff --git a/src/App.vue b/src/App.vue
index 8ef1ee6..5bd074c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,8 @@ import { RouterLink, RouterView } from "vue-router";
           </button>
           <div class="collapse navbar-collapse" id="navbarResponsive">
               <ul class="navbar-nav ms-auto">
-                  <li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/">Withdraw</router-link></li>
-                  <li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/manage">Management</router-link></li>
+                  <!-- <li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/">Withdraw</router-link></li> -->
+                  <!-- <li class="nav-item mx-0 mx-lg-1"><router-link class="nav-link py-3 px-0 px-lg-3 rounded" to="/manage">Management</router-link></li> -->
               </ul>
           </div>
       </div>
diff --git a/src/views/FaucetView.vue b/src/views/FaucetView.vue
index 1b6bfdb..6873c7e 100644
--- a/src/views/FaucetView.vue
+++ b/src/views/FaucetView.vue
@@ -7,16 +7,26 @@ export default {
 	name: 'MyComponent',
 	data() {
 		return {
+			account: "",
 			msg: '',
 			linked: false,
-			amount: "0",
 			contract_address: "",
 			token: null,
 			token_name: "",
 			token_symbol: "",
 			token_balance: "0",
 			token_decimal: "1",
-			address: "",
+
+			transfer_address: "",
+			transfer_amount: "",
+			approve_address: "",
+			approve_amount: "",
+			approve_logs: {},
+
+			transfer_from_owner_addresss: "",
+			transfer_from_receiver_addresss: "",
+			transfer_from_amount: "",
+			transfer_from_logs: {},
 		}
 	},
 	async mounted() {
@@ -43,8 +53,9 @@ export default {
 			if (provider) {
 				this.msg = "Detect Metamask."
 				const chainId = await ethereum.request({method: 'eth_chainId'})
-				if(chainId == 1337){								// Sepolia 1337
+				if(chainId == 11155111){								// Sepolia 1337
 					const account = await ethereum.request({ method: 'eth_requestAccounts' });
+					this.account = account[0];
 					this.msg += "> Network which you connected is Sepolia. @ " + account[0]
 					this.linked = true
 				}else{
@@ -64,8 +75,7 @@ export default {
 				this.token_name = await this.token.methods.name().call();
 				this.token_symbol = await this.token.methods.symbol().call();
 
-				const account = await ethereum.request({ method: 'eth_requestAccounts' });
-				this.token_balance = await this.token.methods.balanceOf(account[0]).call();
+				this.token_balance = await this.token.methods.balanceOf(this.account).call();
 
 				let decimal = await this.token.methods.decimals().call();
 				this.token_decimal = decimal
@@ -75,6 +85,45 @@ export default {
 				this.token_name = "ERROR";
 				this.token_symbol = "ERROR"; 
 			}
+
+
+			// get approve events
+			try{
+				let events = await this.token.getPastEvents("Approval", {fromBlock: 0, toBlock: 'latest', filter: {owner: this.account}})
+				this.approve_logs = {};
+				for(let event of events){
+					this.approve_logs[event['returnValues']['spender']] = {
+						'owner': event['returnValues']['owner'],
+						'value': event['returnValues']['value'],
+					}
+				}
+				for(let event in this.approve_logs){
+					let remain = await this.token.methods.allowance(this.account, event).call();
+					this.approve_logs[event]['remain'] = remain;
+					console.log(this.approve_logs[event])
+				}
+			}catch(error){
+				this.approve_logs = {};
+			}
+
+			// get approve events
+			try{
+				let events = await this.token.getPastEvents("Approval", {fromBlock: 0, toBlock: 'latest', filter: {spender: this.account}})
+				this.transfer_from_logs = {};
+				for(let event of events){
+					this.transfer_from_logs[event['returnValues']['owner']] = {
+						'owner': event['returnValues']['owner'],
+						'value': event['returnValues']['value'],
+					}
+				}
+				for(let event in this.transfer_from_logs){
+					let remain = await this.token.methods.allowance(event, this.account).call();
+					this.transfer_from_logs[event]['remain'] = remain;
+				}
+			}catch(error){
+				this.transfer_from_logs = {};
+			}
+
 		},
 
 		async transfer() {
@@ -90,7 +139,7 @@ export default {
 					type: "uint256",
 					name: "amount"
 				}]
-			}, [this.address, web3.utils.toBN(this.amount * Math.pow(10, this.token_decimal))])
+			}, [this.transfer_address, web3.utils.toBN(this.transfer_amount)])
 			console.log(this.token.options.address)
 			const transactionParameters = {
 				from: ethereum.selectedAddress,
@@ -98,18 +147,85 @@ export default {
 				data: encodeFunctionCall,
 				value: '0x00',
 			}
-			console.log(encodeFunctionCall)
-			console.log(transactionParameters)
 
 			const txHash = await ethereum.request({
 				method: 'eth_sendTransaction',
 				params: [transactionParameters]
 			})
 
-			console.log(txHash)
-
+			this.transfer_amount = "";
+			this.transfer_address = "";
 		},
 
+
+		async approve() {
+			const web3 = new Web3()
+			const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
+				name: "approve",
+				type: "function",
+				inputs: [{
+					type: "address",
+					name: "spender"
+				},
+				{
+					type: "uint256",
+					name: "amount"
+				}]
+			}, [this.approve_address, web3.utils.toBN(this.approve_amount)])
+			console.log(this.token.options.address)
+			const transactionParameters = {
+				from: ethereum.selectedAddress,
+				to: this.token.options.address,               // smart contract's address
+				data: encodeFunctionCall,
+				value: '0x00',
+			}
+
+			const txHash = await ethereum.request({
+				method: 'eth_sendTransaction',
+				params: [transactionParameters]
+			})
+
+			this.approve_amount = "";
+			this.approve_address = "";
+		},
+
+
+		async transferFrom() {
+			const web3 = new Web3()
+			const encodeFunctionCall = web3.eth.abi.encodeFunctionCall({
+				name: "transferFrom",
+				type: "function",
+				inputs: [{
+					type: "address",
+					name: "from"
+				},
+				{
+					type: "address",
+					name: "to"
+				},
+				{
+					type: "uint256",
+					name: "amount"
+				}]
+			}, [this.transfer_from_owner_addresss, this.transfer_from_receiver_addresss, web3.utils.toBN(this.transfer_from_amount)])
+			const transactionParameters = {
+				from: ethereum.selectedAddress,
+				to: this.token.options.address,               // smart contract's address
+				data: encodeFunctionCall,
+				value: '0x00',
+			}
+
+			const txHash = await ethereum.request({
+				method: 'eth_sendTransaction',
+				params: [transactionParameters]
+			})
+
+			this.transfer_from_amount = "";
+			this.transfer_from_owner_addresss = "";
+			this.transfer_from_receiver_addresss = "";
+		},
+
+
 	}
 }
 </script>
@@ -143,6 +259,7 @@ export default {
 								<div class="col-sm-4">
 									<button class='btn btn-info' v-on:click="get_info"> GET </button>
 								</div>
+								
 							</div>
 						</div>
 					</div>
@@ -174,18 +291,135 @@ export default {
 				<div>
 					<div class="container">
 						<div class="row">
-							<div class="col-sm-8">
-								<input type='text' class="form-control" v-model="address" placeholder="Receiver's address">
+							<div class="col-sm-10">
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Receiver</label>
+									<div class="col-sm-10">
+										<input type='text' class="form-control" v-model="transfer_address" placeholder="Receiver's address">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
+									<div class="col-sm-10">
+										<input type='number' class="form-control" v-model="transfer_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
+									</div>
+								</div>
 							</div>
-							<div class="col-sm-8">
-								<input type='number' class="form-control" v-model="amount" v-bind:placeholder="'Amount (float). Decimals: '+token_decimal">
+							<div class="col-sm-2">
+								<br><br>
+								<button class='btn btn-info' v-on:click="transfer"> Transfer {{transfer_amount}} 單位 ({{transfer_amount / Math.pow(10, token_decimal)}} {{token_symbol}})</button>
 							</div>
-							<div class="col-sm-4">
-								<button class='btn btn-info' v-on:click="transfer"> Transfer {{amount}} {{token_symbol}}  ({{amount * Math.pow(10, token_decimal)}}單位)</button>
+
+						</div>
+					</div>
+				</div>
+
+				<br><br>
+				<br><br>
+
+				<h3>Approve</h3>
+				You have {{token_balance/Math.pow(10, token_decimal)}} {{token_symbol}} (<a href="#" v-on:click="update">Refresh</a>)
+				<br><br>
+				<div>
+					<div class="container">
+						<div class="row">
+							<div class="col-sm-10">
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Owner</label>
+									<div class="col-sm-10">
+										<input type='text' class="form-control" v-model="approve_address" placeholder="Spender's address">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
+									<div class="col-sm-10">
+										<input type='number' class="form-control" v-model="approve_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
+									</div>
+								</div>
+							</div>
+							<div class="col-sm-2">
+								<br><br>
+								<button class='btn btn-info' v-on:click="approve"> Approve {{approve_amount}} 單位 ({{approve_amount / Math.pow(10, token_decimal)}} {{token_symbol}})</button>
 							</div>
 						</div>
 					</div>
 				</div>
+				<br>
+				<table class="table table-hover">
+				<thead>
+					<tr>
+					<th scope="col">Spender</th>
+					<th scope="col">Value</th>
+					<th scope="col">{{token_symbol}} Token</th>
+					</tr>
+				</thead>
+				<tbody>
+					<template v-for="(event, index) of approve_logs">
+						<tr>
+							<th scope="row">{{index}}</th>
+							<td>{{event['value']}} 單位</td>
+							<td>{{event['value'] / Math.pow(10, token_decimal)}} {{token_symbol}} </td>
+						</tr>
+					</template>
+				</tbody>
+				</table>
+
+				<br><br>
+				<br><br>
+
+				<h3>TransferFrom</h3>
+				You have {{token_balance/Math.pow(10, token_decimal)}} {{token_symbol}} (<a href="#" v-on:click="update">Refresh</a>)
+				<br><br>
+				<div>
+					<div class="container">
+						<div class="row">
+							<div class="col-sm-10">
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Owner</label>
+									<div class="col-sm-10">
+										<input type='text' class="form-control" v-model="transfer_from_owner_addresss" placeholder="Owner's address">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Receiver</label>
+									<div class="col-sm-10">
+										<input type='text' class="form-control" v-model="transfer_from_receiver_addresss" placeholder="Receiver's address">
+									</div>
+								</div>
+								<div class="form-group row">
+									<label for="inputPassword" class="col-sm-2 col-form-label">Value</label>
+									<div class="col-sm-10">
+										<input type='number' class="form-control" v-model="transfer_from_amount" v-bind:placeholder="'(int) 個單位. Decimals: '+token_decimal">
+									</div>
+								</div>
+							</div>
+							<div class="col-sm-2">
+								<br><br>
+								<button class='btn btn-info' v-on:click="transferFrom"> Transfer {{transfer_from_amount}} 單位 ({{transfer_from_amount / Math.pow(10, token_decimal)}} {{token_symbol}}) (From Owner)</button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<br>
+				<table class="table table-hover">
+				<thead>
+					<tr>
+					<th scope="col">Owner</th>
+					<th scope="col">Value</th>
+					<th scope="col">{{token_symbol}} Token</th>
+					</tr>
+				</thead>
+				<tbody>
+					<template v-for="(event, index) of transfer_from_logs">
+						<tr>
+							<th scope="row">{{index}}</th>
+							<td>{{event['value']}} 單位</td>
+							<td>{{event['value'] / Math.pow(10, token_decimal)}} {{token_symbol}} </td>
+						</tr>
+					</template>
+				</tbody>
+				</table>
+
 
 			</template>