diff --git a/joinmarket/src/App.js b/joinmarket/src/App.js
index 6eb7b000..b0e411fe 100644
--- a/joinmarket/src/App.js
+++ b/joinmarket/src/App.js
@@ -116,6 +116,29 @@ function App() {
       
     }
 
+    const listWalletInfo = async(name)=>{
+      let authData =JSON.parse(localStorage.getItem('auth'));
+      let token = "Bearer "+authData.token
+      const res = await fetch(`/wallet/${name}/display`,{
+        method:"GET",
+        headers:{
+          'Authorization':token
+        }
+      });
+      const data = await res.json();
+      const balance = data[0].walletinfo.total_balance;
+      const mix_depths = data[0].walletinfo.accounts;
+      const wallet_info={}
+      wallet_info['balance'] = balance;
+      wallet_info[mix_depths[0].account] = mix_depths[0].account_balance
+      wallet_info[mix_depths[1].account] = mix_depths[1].account_balance
+      wallet_info[mix_depths[2].account] = mix_depths[2].account_balance
+      wallet_info[mix_depths[3].account] = mix_depths[3].account_balance
+      wallet_info[mix_depths[4].account] = mix_depths[4].account_balance
+      
+      return [wallet_info];
+    }
+
     const displayWallet = async(name)=>{
 
       let authData =JSON.parse(localStorage.getItem('auth'));
@@ -142,7 +165,7 @@ function App() {
       wallet_info[mix_depths[2].account] = mix_depths[2].account_balance
       wallet_info[mix_depths[3].account] = mix_depths[3].account_balance
       wallet_info[mix_depths[4].account] = mix_depths[4].account_balance
-      
+      console.log(wallet_info)
       return wallet_info;
       
       window.alert("Wallet Name: " + wallet_name + "\n" + "Total balance: " + balance);
@@ -343,7 +366,7 @@ function App() {
         />
         <Route path='/display' exact render={(props) => (
             <>
-             <DisplayWallet onDisplay = {DisplayWallet}></DisplayWallet>
+             <DisplayWallet listWalletInfo = {listWalletInfo}></DisplayWallet>
             </>
           )}
         />
diff --git a/joinmarket/src/components/DisplayWallet.jsx b/joinmarket/src/components/DisplayWallet.jsx
index b521a71a..ff1fadfd 100644
--- a/joinmarket/src/components/DisplayWallet.jsx
+++ b/joinmarket/src/components/DisplayWallet.jsx
@@ -1,23 +1,25 @@
 import React from 'react'
 import {useState,useEffect} from 'react'
-const DisplayWallet = ({onDisplay}) => {
+const DisplayWallet = ({listWalletInfo}) => {
     const [wallet_info,setWalletInfo] = useState([])
-
-    // const name = JSON.parse(localStorage.getItem('auth').name)
-    // console.log(name)
-    // useEffect(()=>{
-    //     const getWallets = async()=>{
-    //       const wallets = await listWallets();
-    //       console.log(wallets);
-    //       setWalletList(wallets);
-    //     }
+    useEffect(()=>{
+        //   const name = JSON.parse(localStorage.getItem('auth').name)
+          const getWalletInfo = async()=>{
+          const wallet_info = await listWalletInfo('test');
+          console.log(wallet_info);
+          setWalletInfo(wallet_info);
+        }
     
-    //     getWallets();
-    //   },[])
+        getWalletInfo();
+      },[])
     
     return (
         <div>
             Wallet Details
+            <p></p>
+            {wallet_info.map((wallet,index)=>{
+            return wallet[2]
+        })}
             
             
         </div>
diff --git a/joinmarket/src/components/Wallet.jsx b/joinmarket/src/components/Wallet.jsx
index 64ae03d7..569f2909 100644
--- a/joinmarket/src/components/Wallet.jsx
+++ b/joinmarket/src/components/Wallet.jsx
@@ -7,7 +7,7 @@ const Wallet = ({name,onUnlock,onLock,onDisplay}) => {
             <h3>{name}</h3>
             <Button onClick={()=>onUnlock(name)}>Unlock</Button>
             <Button onClick = {()=>onDisplay(name)}>Display</Button>
-            {/* <Link to="/display" className="btn btn-primary">Open</Link> */}
+            <Link to="/display" className="btn btn-primary">Open</Link>
             <Button onClick = {()=>onLock(name)}>Lock</Button>
         </div>
     )