diff --git a/joinmarket/src/App.js b/joinmarket/src/App.js
index ff74bc1c..881d8aea 100644
--- a/joinmarket/src/App.js
+++ b/joinmarket/src/App.js
@@ -348,7 +348,7 @@ function App() {
 
         <Route path='/payment' exact render={(props) => (
             <>
-             <Payment onPayment = {makePayment}></Payment>
+             <Payment onPayment = {makePayment} ></Payment>
             </>
           )}
         />
diff --git a/joinmarket/src/components/DisplayMixdepth.jsx b/joinmarket/src/components/DisplayMixdepth.jsx
index 07d1e889..966b5e81 100644
--- a/joinmarket/src/components/DisplayMixdepth.jsx
+++ b/joinmarket/src/components/DisplayMixdepth.jsx
@@ -8,32 +8,32 @@ const DisplayMixdepth = ({walletInfo}) => {
             <p></p>
             Mixdepth 0: {walletInfo[0]} 
             
-            <Link to="/payment?mixdepth=0">Send Funds </Link>
+            <Link to={{pathname:"/payment", state: { account_no: '0' }}}>Send Funds </Link>
               
             <Link to="/receive">Receive Funds</Link>
             <p></p>
             <p></p>
             Mixdepth 1: {walletInfo[1]}
-            <Link to="/payment">Send Funds </Link>
+            <Link to={{pathname:"/payment", state: { account_no: '1' }}}>Send Funds </Link>
               
             <Link to="/receive">Receive Funds</Link>
             <p></p>
             <p></p>
             Mixdepth 2: {walletInfo[2]}
-            <Link to="/payment">Send Funds </Link>
+            <Link to={{pathname:"/payment", state: { account_no: '2' }}}>Send Funds </Link>
               
               <Link to="/receive">Receive Funds</Link>
             <p></p>
             <p></p>
             Mixdepth 3: {walletInfo[3]}
-            <Link to="/payment">Send Funds </Link>
+            <Link to={{pathname:"/payment", state: { account_no: '3' }}}>Send Funds </Link>
               
             <Link to="/receive">Receive Funds</Link>
 
             <p></p>
             <p></p>
             Mixdepth 4: {walletInfo[4]}
-            <Link to="/payment">Send Funds </Link>
+            <Link to={{pathname:"/payment", state: { account_no: '4' }}}>Send Funds </Link>
               
             <Link to="/receive">Receive Funds</Link>
             <p></p>
diff --git a/joinmarket/src/components/Payment.jsx b/joinmarket/src/components/Payment.jsx
index dc63f8e6..c1c11742 100644
--- a/joinmarket/src/components/Payment.jsx
+++ b/joinmarket/src/components/Payment.jsx
@@ -1,10 +1,11 @@
 import React from 'react'
 import { useState } from 'react'
+import { useLocation } from "react-router-dom"
 const Payment = ({onPayment}) => {
-
+    const location = useLocation()
     const [destination, setDestination] = useState('')
     const [amount, setAmount] = useState('')
-    const [mixdepth, setMixdepth] = useState('')
+    const [mixdepth, setMixdepth] = useState(location.state.account_no)
 
     const onSubmit = (e) => {
         e.preventDefault()