diff --git a/nym-wallet/src/context/bonding.tsx b/nym-wallet/src/context/bonding.tsx
index bd1c439111..6f9160db5b 100644
--- a/nym-wallet/src/context/bonding.tsx
+++ b/nym-wallet/src/context/bonding.tsx
@@ -25,6 +25,8 @@ import {
   vestingUnbondMixnode,
   updateMixnode as updateMixnodeRequest,
   vestingUpdateMixnode as updateMixnodeVestingRequest,
+  getGatewayBondDetails,
+  getMixnodeBondDetails,
 } from '../requests';
 import { useGetFee } from '../hooks/useGetFee';
 import { useCheckOwnership } from '../hooks/useCheckOwnership';
@@ -165,6 +167,13 @@ export const BondingContextProvider = ({
 
   const isVesting = Boolean(ownership.vestingPledge);
 
+  useEffect(() => {
+    const init = async () => {
+      await checkOwnership();
+    };
+    init();
+  }, [checkOwnership]);
+
   useEffect(() => {
     if (feeError) {
       setError(`An error occurred while retrieving fee: ${feeError}`);
@@ -179,25 +188,34 @@ export const BondingContextProvider = ({
   };
 
   const refresh = useCallback(async () => {
-    // TODO fetch bondedMixnode and bondedGatway via tauri dedicated requests
-    /* try {
-      bounded = await fetchBondingData();
-    } catch (e: any) {
-      throw new Error(e);
-    } */
-    if (bounded && 'stake' in bounded) {
+    setLoading(true);
+    if (ownership.hasOwnership && ownership.nodeType === 'mixnode') {
+      let data;
+      try {
+        data = await getMixnodeBondDetails();
+      } catch (e: any) {
+        setError(`While fetching current bond state, an error occurred: ${e}`);
+      }
+      // TODO convert the returned data from the request to `BondedMixnode` type
       setBondedMixnode(bounded);
     }
-    if (bounded && !('stake' in bounded)) {
+    if (ownership.hasOwnership && ownership.nodeType === 'gateway') {
+      let data;
+      try {
+        data = await getGatewayBondDetails();
+      } catch (e: any) {
+        setError(`While fetching current bond state, an error occurred: ${e}`);
+      }
+      // TODO convert the returned data from the request to `BondedGateway` type
       setBondedGateway(bounded);
     }
     setLoading(false);
-  }, [network]);
+  }, [network, ownership]);
 
   useEffect(() => {
     resetState();
     refresh();
-  }, [network]);
+  }, [network, ownership]);
 
   const bondMixnode = async (data: Omit<TBondMixNodeArgs, 'fee'>, tokenPool: TokenPool) => {
     let tx: TransactionExecuteResult | undefined;
diff --git a/nym-wallet/src/pages/bonding/index.tsx b/nym-wallet/src/pages/bonding/index.tsx
index 6ddf5f4481..cbb73a061a 100644
--- a/nym-wallet/src/pages/bonding/index.tsx
+++ b/nym-wallet/src/pages/bonding/index.tsx
@@ -1,34 +1,22 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { AppContext } from 'src/context/main';
 import { Box } from '@mui/material';
 import { useBondingContext, BondingContextProvider } from '../../context';
 import { PageLayout } from '../../layouts';
 import BondingCard from './bonding';
-/* import MixnodeCard from './mixnode';
-import GatewayCard from './gateway'; */
-import { EnumRequestStatus } from '../../components';
-import { useCheckOwnership } from '../../hooks/useCheckOwnership';
+import MixnodeCard from './mixnode';
+import GatewayCard from './gateway';
 
 const Bonding = () => {
-  const [status] = useState(EnumRequestStatus.initial);
-  const { bondedMixnode, bondedGateway } = useBondingContext();
-  const { checkOwnership, ownership, isLoading } = useCheckOwnership();
-
-  useEffect(() => {
-    if (status === EnumRequestStatus.initial) {
-      const initialiseForm = async () => {
-        await checkOwnership();
-      };
-      initialiseForm();
-    }
-  }, [status, checkOwnership]);
+  const { bondedMixnode, bondedGateway, loading } = useBondingContext();
 
+  // TODO display a special UI on loading state
   return (
     <PageLayout>
       <Box display="flex" flexDirection="column" gap={2}>
-        <BondingCard />
-        {/* {bondedMixnode && <MixnodeCard mixnode={bondedMixnode} />}
-        {bondedGateway && <GatewayCard gateway={bondedGateway} />} */}
+        {!bondedMixnode && !bondedGateway && <BondingCard />}
+        {bondedMixnode && <MixnodeCard mixnode={bondedMixnode} />}
+        {bondedGateway && <GatewayCard gateway={bondedGateway} />}
       </Box>
     </PageLayout>
   );
diff --git a/nym-wallet/src/requests/queries.ts b/nym-wallet/src/requests/queries.ts
index 405e29867c..afb2144f40 100644
--- a/nym-wallet/src/requests/queries.ts
+++ b/nym-wallet/src/requests/queries.ts
@@ -6,6 +6,7 @@ import {
   InclusionProbabilityResponse,
   DecCoin,
   MixNodeBond,
+  GatewayBond,
 } from '@nymproject/types';
 import { Epoch } from 'src/types';
 import { invokeWrapper } from './wrapper';
@@ -25,6 +26,7 @@ export const getAllPendingDelegations = async () =>
   invokeWrapper<DelegationEvent[]>('get_all_pending_delegation_events');
 
 export const getMixnodeBondDetails = async () => invokeWrapper<MixNodeBond | null>('mixnode_bond_details');
+export const getGatewayBondDetails = async () => invokeWrapper<GatewayBond | null>('gateway_bond_details');
 
 export const getOperatorRewards = async (address: string) =>
   invokeWrapper<DecCoin>('get_operator_rewards', { address });