diff --git a/src/components/App.tsx b/src/components/App.tsx
index 81d2b45..cb3fbf6 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,13 +1,13 @@
 // Components
 import React, { useState } from 'react';
-import { Artifact, Network, Contract, Utxo } from 'cashscript';
+import { Artifact, Network } from 'cashscript';
 import Header from './Header'
 import Main from './Main'
 import Footer from './Footer';
 import Tab from 'react-bootstrap/Tab';
 import Tabs from 'react-bootstrap/Tabs';
 import WalletInfo from './Wallets';
-import { Wallet } from './shared';
+import { Wallet, ContractInfo } from './shared';
 import NewContract from './NewContract';
 import Contracts from './Contracts';
 import TransactionBuilder from './TransactionBuilder';
@@ -16,9 +16,7 @@ function App() {
   const [network, setNetwork] = useState<Network>('chipnet')
   const [wallets, setWallets] = useState<Wallet[]>([])
   const [artifacts, setArtifacts] = useState<Artifact[] | undefined>(undefined);
-  const [contracts, setContracts] = useState<Contract[] | undefined>(undefined)
-  const [utxos, setUtxos] = useState<Utxo[] | undefined>(undefined)
-  const [balance, setBalance] = useState<bigint | undefined>(undefined)
+  const [contracts, setContracts] = useState<ContractInfo[] | undefined>(undefined)
   const [code, setCode] = useState<string>(
 `pragma cashscript >= 0.8.0;
     
@@ -35,11 +33,22 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
     }
 }
 `);
-  const contract = contracts?.[0] // TODO: delete this
-  async function updateUtxosContract () {
-    if (!contract) return
-    setBalance(await contract.getBalance())
-    setUtxos(await contract.getUtxos())
+
+  async function updateUtxosContract (nameContract: string) {
+    const contractIndex = contracts?.findIndex(contractInfo => contractInfo.contract.name == nameContract)
+    if (contractIndex == undefined) return
+    const currentContract = contracts?.[contractIndex].contract
+    if (!currentContract) return
+    // create two separate lists (deep copies) and mutate utxos
+    // map best way to deep clone
+    const utxosList = contracts.map(contract => contract.utxos ?? [])
+    const contractsList = contracts.map(contract => contract.contract)
+    const contractUtxos = await currentContract.getUtxos();
+    utxosList[contractIndex] = contractUtxos
+    const newContracts: ContractInfo[] = contractsList.map((contract,index) =>
+      ({contract,utxos:utxosList[index]})
+    )
+    setContracts(newContracts)
   }
 
   return (
@@ -56,16 +65,16 @@ contract TransferWithTimeout(pubkey sender, pubkey recipient, int timeout) {
             <Main code={code} setCode={setCode} artifacts={artifacts} setArtifacts={setArtifacts} />
           </Tab>
           <Tab eventKey="newcontract" title="New Contract">
-            <NewContract artifacts={artifacts} network={network} setNetwork={setNetwork} utxos={utxos} balance={balance} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
+            <NewContract artifacts={artifacts} network={network} setNetwork={setNetwork} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="contracts" title="Contracts">
-            <Contracts contracts={contracts} setContracts={setContracts} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract} />
+            <Contracts contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
           </Tab>
           <Tab eventKey="wallets" title="Wallets">
             <WalletInfo network={network} wallets={wallets} setWallets={setWallets}/>
           </Tab>
           <Tab eventKey="transactionBuilder" title="TransactionBuilder">
-            <TransactionBuilder network={network} wallets={wallets} utxos={utxos} contracts={contracts} updateUtxosContract={updateUtxosContract}/>
+            <TransactionBuilder network={network} wallets={wallets} contracts={contracts} updateUtxosContract={updateUtxosContract}/>
           </Tab>
         </Tabs>
       </div>
diff --git a/src/components/ContractCreation.tsx b/src/components/ContractCreation.tsx
index 5390c0f..bb33a1f 100644
--- a/src/components/ContractCreation.tsx
+++ b/src/components/ContractCreation.tsx
@@ -1,21 +1,20 @@
 import React, { useState, useEffect } from 'react'
-import { Artifact, Contract, Argument, Network, ElectrumNetworkProvider, Utxo } from 'cashscript'
+import { Artifact, Contract, Argument, Network, ElectrumNetworkProvider } from 'cashscript'
 import { InputGroup, Form, Button } from 'react-bootstrap'
-import { readAsType } from './shared'
+import { readAsType, ContractInfo } from './shared'
 
 interface Props {
   artifact?: Artifact
-  contracts?: Contract[]
-  setContracts: (contract?: Contract[]) => void
+  contracts?: ContractInfo[]
+  setContracts: (contracts?: ContractInfo[]) => void
   network: Network
-  utxos: Utxo[] | undefined
-  balance: bigint | undefined
-  updateUtxosContract: () => void
+  updateUtxosContract: (contractName: string) => void
 }
 
 const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts, network, updateUtxosContract}) => {
   const [args, setArgs] = useState<Argument[]>([])
   const [nameContract, setNameContract] = useState<string>("");
+  const [createdContract, setCreatedContract] = useState(false);
 
   const resetInputFields = () => {
     // This code is suuper ugly but I haven't found any other way to clear the value
@@ -24,18 +23,12 @@ const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts,
       const el = document.getElementById(`constructor-arg-${i}`)
       if (el) (el as any).value = ''
     })
-
     // Set empty strings as default values
     const newArgs = artifact?.constructorInputs.map(() => '') || []
-
     setArgs(newArgs)
+    setNameContract("")
   }
 
-  useEffect(() => {
-    //updateUtxosContract()
-    setArgs([])
-  }, [artifact])
-
   const inputFields = artifact?.constructorInputs.map((input, i) => (
     <Form.Control key={`constructor-arg-${i}`} size="sm" id={`constructor-arg-${i}`}
       placeholder={`${input.type} ${input.name}`}
@@ -62,15 +55,23 @@ const ContractCreation: React.FC<Props> = ({ artifact, contracts, setContracts,
       const provider = new ElectrumNetworkProvider(network)
       const newContract = new Contract(artifact, args, { provider })
       newContract.name = nameContract
-      setContracts([newContract, ...contracts ?? []])
+      const contractInfo = {contract: newContract, utxos: undefined}
+      setContracts([contractInfo, ...contracts ?? []])
       alert("created contract!")
-      resetInputFields()
+      setCreatedContract(true)
     } catch (e: any) {
       alert(e.message)
       console.error(e.message)
     }
   }
 
+  useEffect(() => {
+    if(!createdContract) return
+    updateUtxosContract(nameContract)
+    resetInputFields()
+    setCreatedContract(false)
+ }, [createdContract]);
+
   return (
     <div style={{
       marginTop: "15px"
diff --git a/src/components/ContractFunction.tsx b/src/components/ContractFunction.tsx
index 0b08cf9..372c647 100644
--- a/src/components/ContractFunction.tsx
+++ b/src/components/ContractFunction.tsx
@@ -1,18 +1,17 @@
 import React, { useState, useEffect } from 'react'
-import { Contract, AbiFunction, Argument, Network, Recipient, SignatureTemplate, Utxo } from 'cashscript'
+import { AbiFunction, Argument, Network, Recipient, SignatureTemplate, Utxo } from 'cashscript'
 import { Form, InputGroup, Button, Card } from 'react-bootstrap'
-import { readAsType, ExplorerString, Wallet, NamedUtxo } from './shared'
+import { readAsType, ExplorerString, Wallet, NamedUtxo, ContractInfo } from './shared'
 
 interface Props {
-  contract?: Contract
+  contractInfo: ContractInfo
   abi?: AbiFunction
   network: Network
   wallets: Wallet[]
-  contractUtxos: Utxo[] | undefined
-  updateUtxosContract: () => void
+  updateUtxosContract: (contractName: string) => void
 }
 
-const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, contractUtxos, updateUtxosContract }) => {
+const ContractFunction: React.FC<Props> = ({ contractInfo, abi, network, wallets, updateUtxosContract }) => {
   const [args, setArgs] = useState<Argument[]>([])
   const [outputs, setOutputs] = useState<Recipient[]>([{ to: '', amount: 0n }])
   // transaction inputs, not the same as abi.inputs
@@ -23,6 +22,9 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, co
   const [noAutomaticChange, setNoAutomaticChange] = useState<boolean>(false)
   const [namedUtxoList, setNamedUtxoList] = useState<NamedUtxo[]>([])
 
+  const contract = contractInfo.contract
+  const contractUtxos = contractInfo.utxos
+
   useEffect(() => {
     // Set empty strings as default values
     const newArgs = abi?.inputs.map(() => '') || [];
@@ -32,7 +34,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, co
   useEffect(() => {
     if (!manualSelection) return;
     async function updateUtxos() {
-      if (contract === undefined || contractUtxos === undefined) return
+      if (contractInfo.contract === undefined || contractUtxos === undefined) return
       const namedUtxosContract: NamedUtxo[] = contractUtxos.map((utxo, index) => ({ ...utxo, name: `Contract UTXO ${index}`, isP2pkh: false }))
       let newNamedUtxoList = namedUtxosContract
       const walletUtxos = wallets.map(wallet => wallet?.utxos ?? [])
@@ -47,7 +49,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, co
       setNamedUtxoList(newNamedUtxoList);
     }
     updateUtxos()
-  }, [manualSelection, contractUtxos])
+  }, [manualSelection, contractInfo])
 
   function fillPrivKey(i: number, walletIndex: string) {
     const argsCopy = [...args];
@@ -291,7 +293,7 @@ const ContractFunction: React.FC<Props> = ({ contract, abi, network, wallets, co
 
       alert(`Transaction successfully sent: ${ExplorerString[network]}/tx/${txid}`)
       console.log(`Transaction successfully sent: ${ExplorerString[network]}/tx/${txid}`)
-      updateUtxosContract()
+      updateUtxosContract(contract.name)
     } catch (e: any) {
       alert(e.message)
       console.error(e.message)
diff --git a/src/components/ContractFunctions.tsx b/src/components/ContractFunctions.tsx
index 32526ab..ae92fae 100644
--- a/src/components/ContractFunctions.tsx
+++ b/src/components/ContractFunctions.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
-import { Contract, Network, Utxo } from 'cashscript'
+import { Network } from 'cashscript'
 import ContractFunction from './ContractFunction'
-import { Wallet } from './shared'
+import { Wallet, ContractInfo } from './shared'
 
 interface Props {
-  contract: Contract
+  contractInfo: ContractInfo
   network: Network
   wallets: Wallet[]
-  contractUtxos: Utxo[] | undefined
-  updateUtxosContract: () => void
+  updateUtxosContract: (contractName: string) => void
 }
 
-const ContractFunctions: React.FC<Props> = ({ contract, network, wallets, contractUtxos, updateUtxosContract }) => {
-  const functions = contract.artifact?.abi.map(func => (
-    <ContractFunction contract={contract} key={func.name} abi={func} network={network} wallets={wallets} contractUtxos={contractUtxos} updateUtxosContract={updateUtxosContract}/>
+const ContractFunctions: React.FC<Props> = ({ contractInfo, network, wallets, updateUtxosContract }) => {
+  const functions = contractInfo.contract.artifact?.abi.map(func => (
+    <ContractFunction contractInfo={contractInfo} key={func.name} abi={func} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract}/>
   ))
 
   return (
diff --git a/src/components/ContractInfo.tsx b/src/components/ContractInfo.tsx
deleted file mode 100644
index 7bd9faa..0000000
--- a/src/components/ContractInfo.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Artifact, Contract, Network, Utxo } from 'cashscript'
-import { ColumnFlex } from './shared'
-import ContractCreation from './ContractCreation'
-import { ElectrumClient, ElectrumTransport } from 'electrum-cash'
-
-interface Props {
-  artifact?: Artifact
-  network: Network
-  balance: bigint | undefined
-  utxos: Utxo[] | undefined
-  updateUtxosContract: () => void
-  contracts: Contract[] | undefined
-  setContracts: (contract: Contract[] | undefined) => void
-}
-
-const ContractInfo: React.FC<Props> = ({ artifact, network, contracts, setContracts, utxos, balance, updateUtxosContract }) => {
-  const [electrumClient, setElectrumClient] = useState<ElectrumClient | undefined>(undefined)
-
-  /*
-  const contract = contracts?.[0] // TODO: delete this
-
-  async function initElectrumSubscription(){
-    if(electrumClient) electrumClient?.disconnect()
-    if(!contract?.address) return
-
-    // connect to ElectrumClient for subscription
-    let electrumServerName: string= ""
-    if(network == "mainnet") electrumServerName = 'bch.imaginary.cash'
-    if(network == "chipnet")electrumServerName = 'chipnet.imaginary.cash'
-    if(network == "testnet4") electrumServerName = 'testnet4.imaginary.cash'
-    if(!electrumServerName) return // no imaginary server for  testnet3
-    
-    const newElectrumClient = new ElectrumClient('Electrum client example', '1.4.1', electrumServerName, ElectrumTransport.WSS.Port, ElectrumTransport.WSS.Scheme)
-    await newElectrumClient?.connect();
-    // subscribe to contract address
-    const refetchContractBalance = async(data:any) => {
-      if(data) updateUtxosContract()
-    }
-    await newElectrumClient?.subscribe(refetchContractBalance, 'blockchain.address.subscribe', contract.address);
-    setElectrumClient(newElectrumClient)
-  }
-
-  useEffect(() => {
-    initElectrumSubscription()
-  }, [contracts])
-  */
-
-  return (
-    <ColumnFlex>
-      <ContractCreation artifact={artifact} contracts={contracts} setContracts={setContracts} network={network} utxos={utxos} balance={balance} updateUtxosContract={updateUtxosContract}/>
-    </ColumnFlex>
-  )
-}
-
-export default ContractInfo
diff --git a/src/components/Contracts.tsx b/src/components/Contracts.tsx
index fbd8b9f..595ec87 100644
--- a/src/components/Contracts.tsx
+++ b/src/components/Contracts.tsx
@@ -1,21 +1,21 @@
 import React from 'react'
-import { Contract, Utxo } from 'cashscript'
 import CopyText from './shared/CopyText'
-import { Card } from 'react-bootstrap'
+import { Card, Button } from 'react-bootstrap'
+import { ContractInfo } from './shared'
+import InfoUtxos from './InfoUtxos'
 
 interface Props {
-  contracts: Contract[] | undefined
-  setContracts: (contract: Contract[] | undefined) => void
-  balance: bigint | undefined
-  utxos: Utxo[] | undefined
-  updateUtxosContract: () => void
+  contracts: ContractInfo[] | undefined
+  setContracts: (contract: ContractInfo[] | undefined) => void
+  updateUtxosContract: (contractName: string) => void
 }
 
-const Contracts: React.FC<Props> = ({ contracts, setContracts, utxos, balance, updateUtxosContract }) => {
+const Contracts: React.FC<Props> = ({ contracts, setContracts, updateUtxosContract }) => {
 
-  const removeContract = (contractToRemove: Contract) => {
+  const removeContract = (contractInfo: ContractInfo) => {
+    const contractToRemove = contractInfo.contract
     const contractToRemoveAddress = contractToRemove.address;
-    const newContracts = contracts?.filter(contract => contract.address !== contractToRemoveAddress)
+    const newContracts = contracts?.filter(contractInfo => contractInfo.contract.address !== contractToRemoveAddress)
     setContracts(newContracts)
   }
 
@@ -36,40 +36,45 @@ const Contracts: React.FC<Props> = ({ contracts, setContracts, utxos, balance, u
       {contracts == undefined ? <p>
         No Contracts created yet...
       </p>:null}
-      {contracts?.map(contract => (
-        <Card style={{ marginBottom: '10px' }} key={contract.address}>
+      {contracts?.map((contractInfo) => (
+        <Card style={{ marginBottom: '10px' }} key={contractInfo.contract.address}>
           <Card.Header style={{ display:"flex", justifyContent:"space-between"}}>
-            <div>{contract.name}</div>
-            <img src='./trash.svg' onClick={() => removeContract(contract)} style={{padding: "0px 6px", width: "fit-content", cursor:"pointer"}}/>
+            <div>{contractInfo.contract.name}</div>
+            <img src='./trash.svg' onClick={() => removeContract(contractInfo)} style={{padding: "0px 6px", width: "fit-content", cursor:"pointer"}}/>
           </Card.Header>
           <Card.Body>
             <div style={{ margin: '5px', width: '100%' }}>
               <strong>Contract address (p2sh32)</strong>
-              <CopyText>{contract.address}</CopyText>
+              <CopyText>{contractInfo.contract.address}</CopyText>
               <strong>Contract token address (p2sh32)</strong>
-              <CopyText>{contract.tokenAddress}</CopyText>
+              <CopyText>{contractInfo.contract.tokenAddress}</CopyText>
               <strong>Contract artifact</strong>
-              <p>{contract.artifact.contractName}</p>
+              <p>{contractInfo.contract.artifact.contractName}</p>
               <strong>Contract utxos</strong>
-              {utxos == undefined? 
+              {contractInfo?.utxos == undefined? 
                 <p>loading ...</p>:
-                (<>
-                <p>{utxos.length} {utxos.length == 1 ? "utxo" : "utxos"}</p>
-                {utxos.length ? 
-                  <details>
-                    <summary>Show utxos</summary>
-                    <div>
-                    </div>
-                </details> : null}
-                </>)
+                (<div>
+                  {contractInfo?.utxos.length} {contractInfo?.utxos.length == 1 ? "utxo" : "utxos"}
+                  <span onClick={() => {}} style={{cursor:"pointer", marginLeft:"10px"}}>
+                    <Button size='sm' onClick={() => updateUtxosContract(contractInfo.contract.name)} variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
+                  </span>
+                  {contractInfo.utxos.length ? 
+                    <details>
+                      <summary>Show utxos</summary>
+                      <div>
+                        <InfoUtxos utxos={contractInfo?.utxos}/>
+                      </div>
+                  </details> : null}
+                </div>)
               }
               <strong>Total contract balance</strong>
-              {balance == undefined? 
+              {contractInfo.utxos == undefined? 
                 <p>loading ...</p>:
-                <p>{balance.toString()} satoshis</p>
+                <p>{contractInfo.utxos?.reduce((acc, utxo) => acc + utxo.satoshis, 0n).toString()} satoshis</p>
+                
               }
               <strong>Contract size</strong>
-              <p>{contract.bytesize} bytes (max 520), {contract.opcount} opcodes (max 201)</p>
+              <p>{contractInfo.contract.bytesize} bytes (max 520), {contractInfo.contract.opcount} opcodes (max 201)</p>
             </div>
           </Card.Body>
         </Card>
diff --git a/src/components/NewContract.tsx b/src/components/NewContract.tsx
index fd1cb0f..83b77f3 100644
--- a/src/components/NewContract.tsx
+++ b/src/components/NewContract.tsx
@@ -1,20 +1,19 @@
 import React, { useState } from 'react'
-import { Artifact, Contract, Network, Utxo } from 'cashscript'
+import { Artifact, Network } from 'cashscript'
 import { Form } from 'react-bootstrap'
-import ContractInfo from './ContractInfo';
+import ContractCreation from './ContractCreation';
+import { ContractInfo } from './shared'
 
 interface Props {
   artifacts?: Artifact[]
   network: Network
   setNetwork: (network: Network) => void
-  balance: bigint | undefined
-  utxos: Utxo[] | undefined
-  updateUtxosContract: () => void
-  contracts: Contract[] | undefined
-  setContracts: (contract: Contract[] | undefined) => void
+  updateUtxosContract: (contractName: string) => void
+  contracts: ContractInfo[] | undefined
+  setContracts: (contract: ContractInfo[] | undefined) => void
 }
 
-const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contracts, setContracts, utxos, balance, updateUtxosContract }) => {
+const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contracts, setContracts, updateUtxosContract }) => {
 
   const [selectedArifact, setSelectedArtifact] = useState<Artifact | undefined>(undefined);
 
@@ -76,7 +75,7 @@ const NewContract: React.FC<Props> = ({ artifacts, network, setNetwork, contract
             <span>Select target Network:</span> {networkSelector}
           </div>
           {selectedArifact !== undefined ?
-            <ContractInfo artifact={selectedArifact} network={network} utxos={utxos} balance={balance} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
+            <ContractCreation artifact={selectedArifact} network={network} contracts={contracts} setContracts={setContracts} updateUtxosContract={updateUtxosContract} />
             : null
           }
         </>
diff --git a/src/components/TransactionBuilder.tsx b/src/components/TransactionBuilder.tsx
index 504afe0..5de8c3f 100644
--- a/src/components/TransactionBuilder.tsx
+++ b/src/components/TransactionBuilder.tsx
@@ -1,36 +1,34 @@
 import React, {useState} from 'react'
-import { Artifact, Contract, Network, Utxo } from 'cashscript'
+import { Network } from 'cashscript'
 import ContractFunctions from './ContractFunctions';
-import { Wallet } from './shared'
+import { Wallet, ContractInfo } from './shared'
 import { Form } from 'react-bootstrap'
 
 interface Props {
-  artifacts?: Artifact[]
   network: Network
   wallets: Wallet[]
-  utxos: Utxo[] | undefined
-  updateUtxosContract: () => void
-  contracts: Contract[] | undefined
+  updateUtxosContract: (contractName: string) => void
+  contracts: ContractInfo[] | undefined
 }
 
-const TransactionBuilder: React.FC<Props> = ({ network, wallets, contracts, utxos, updateUtxosContract }) => {
+const TransactionBuilder: React.FC<Props> = ({ network, wallets, contracts, updateUtxosContract }) => {
 
-  const [selectedContract, setSelectedContract] = useState<Contract | undefined>(undefined);
+  const [selectedContract, setSelectedContract] = useState<ContractInfo | undefined>(undefined);
 
   const contractSelector = (
     <Form.Control size="sm" id="artifact-selector" style={{width:"350px", display:"inline-block"}}
       as="select"
-      value={selectedContract?.address ?? "select"}
+      value={selectedContract?.contract.address ?? "select"}
       onChange={(event) => {
         const contractAddress = event.target.value
-        const newSelectedContract = contracts?.find(contract => contract?.address === contractAddress)
+        const newSelectedContract = contracts?.find(contractInfo => contractInfo.contract?.address === contractAddress)
         setSelectedContract(newSelectedContract)
       }}
     >
       <option>--- select ---</option> 
-      {contracts?.map(contract => (
-        <option key={contract.address}>
-          {contract.address}
+      {contracts?.map(contractInfo => (
+        <option key={contractInfo.contract.address}>
+          {contractInfo.contract.address}
         </option>
       ))}
     </Form.Control>
@@ -57,7 +55,7 @@ const TransactionBuilder: React.FC<Props> = ({ network, wallets, contracts, utxo
       }
       </div>
       {selectedContract !== undefined ?
-        <ContractFunctions contract={selectedContract} network={network} wallets={wallets} contractUtxos={utxos} updateUtxosContract={updateUtxosContract} />
+        <ContractFunctions contractInfo={selectedContract} network={network} wallets={wallets} updateUtxosContract={updateUtxosContract} />
         : null
       }
     </div>
diff --git a/src/components/Wallets.tsx b/src/components/Wallets.tsx
index 4197d00..87be010 100644
--- a/src/components/Wallets.tsx
+++ b/src/components/Wallets.tsx
@@ -150,9 +150,12 @@ const WalletInfo: React.FC<Props> = ({network, wallets, setWallets}) => {
         <div>
           <span>{wallet.utxos?.length} {wallet.utxos?.length == 1 ? "utxo" : "utxos"}</span>
           <span onClick={() => updateUtxosWallet(wallet,index)} style={{cursor:"pointer", marginLeft:"10px"}}>
-            (refresh wallet utxos ⭯)
+            <Button size='sm' variant='secondary' style={{padding:" 0px 2px"}}>refresh ⭯</Button>
           </span>
         </div>
+        <Card.Text><strong>Wallet Balance</strong></Card.Text>
+        <div>{wallet.utxos?.reduce((acc, utxo) => acc + utxo.satoshis, 0n).toString()} satoshis</div>
+        <strong>Private Key</strong>
         <details>
           <summary>Show Private Key</summary>
           <Card.Text><strong>WIF:</strong></Card.Text>
diff --git a/src/components/shared/index.tsx b/src/components/shared/index.tsx
index 0eef66b..6b38f1c 100644
--- a/src/components/shared/index.tsx
+++ b/src/components/shared/index.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { SignatureTemplate, Utxo } from 'cashscript';
+import { Contract, SignatureTemplate, Utxo } from 'cashscript';
 import { decodeCashAddress, decodeCashAddressFormatWithoutPrefix } from '@bitauth/libauth';
 
 export const ColumnFlex = styled.div`
@@ -22,6 +22,11 @@ export interface Wallet {
   utxos: Utxo[]
 }
 
+export interface ContractInfo {
+  contract: Contract
+  utxos: Utxo[] | undefined
+}
+
 export interface NamedUtxo extends Utxo {
   name: string;
   isP2pkh: boolean;