diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx
index ba611c4c9a..144fecf700 100644
--- a/packages/page-staking/src/Actions/Account/index.tsx
+++ b/packages/page-staking/src/Actions/Account/index.tsx
@@ -3,14 +3,15 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveBalancesAll, DeriveStakingAccount } from '@polkadot/api-derive/types';
-import { EraIndex } from '@polkadot/types/interfaces';
+import { EraIndex, SlashingSpans } from '@polkadot/types/interfaces';
 import { StakerState } from '@polkadot/react-hooks/types';
 import { SortedTargets } from '../../types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, TxButton } from '@polkadot/react-components';
+import { AddressInfo, AddressMini, AddressSmall, Button, Menu, Popup, StakingBonded, StakingRedeemable, StakingUnbonding, StatusContext, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
 
 import { useTranslation } from '../../translate';
 import BondExtra from './BondExtra';
@@ -37,8 +38,15 @@ interface Props {
 function Account ({ className = '', info: { controllerId, destination, destinationId, hexSessionIdNext, hexSessionIdQueue, isLoading, isOwnController, isOwnStash, isStashNominating, isStashValidating, nominating, sessionIds, stakingLedger, stashId }, isDisabled, next, targets, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
+  const { queueExtrinsic } = useContext(StatusContext);
   const balancesAll = useCall<DeriveBalancesAll>(api.derive.balances.all, [stashId]);
   const stakingAccount = useCall<DeriveStakingAccount>(api.derive.staking.account, [stashId]);
+  const spanCount = useCall<number>(api.query.staking.slashingSpans, [stashId], {
+    transform: (optSpans: Option<SlashingSpans>): number =>
+      optSpans.isNone
+        ? 0
+        : optSpans.unwrap().prior.length + 1
+  });
   const [isBondExtraOpen, toggleBondExtra] = useToggle();
   const [isInjectOpen, toggleInject] = useToggle();
   const [isNominateOpen, toggleNominate] = useToggle();
@@ -56,6 +64,20 @@ function Account ({ className = '', info: { controllerId, destination, destinati
     );
   }, [stakingAccount]);
 
+  const withdrawFunds = useCallback(
+    () => {
+      queueExtrinsic({
+        accountId: controllerId,
+        extrinsic: api.tx.staking.withdrawUnbonded.meta.args.length === 1
+          ? api.tx.staking.withdrawUnbonded(spanCount || 0)
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore (We are doing toHex here since we have a Vec<u8> input)
+          : api.tx.staking.withdrawUnbonded()
+      });
+    },
+    [api, controllerId, queueExtrinsic, spanCount]
+  );
+
   return (
     <tr className={className}>
       <td className='address'>
@@ -229,6 +251,12 @@ function Account ({ className = '', info: { controllerId, destination, destinati
                   >
                     {t<string>('Unbond funds')}
                   </Menu.Item>
+                  <Menu.Item
+                    disabled={!isOwnController || !stakingAccount || !stakingAccount.redeemable || !stakingAccount.redeemable.gtn(0)}
+                    onClick={withdrawFunds}
+                  >
+                    {t<string>('Withdraw unbonded funds')}
+                  </Menu.Item>
                   <Menu.Divider />
                   <Menu.Item
                     disabled={!isOwnStash}