diff --git a/core/src/abis/MCD_JOIN.json b/core/src/abis/MCD_JOIN.json
new file mode 100644
index 000000000..a6c854301
--- /dev/null
+++ b/core/src/abis/MCD_JOIN.json
@@ -0,0 +1,236 @@
+[
+    {
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "vat_",
+                "type": "address"
+            },
+            {
+                "internalType": "bytes32",
+                "name": "ilk_",
+                "type": "bytes32"
+            },
+            {
+                "internalType": "address",
+                "name": "gem_",
+                "type": "address"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "constructor"
+    },
+    {
+        "anonymous": true,
+        "inputs": [
+            {
+                "indexed": true,
+                "internalType": "bytes4",
+                "name": "sig",
+                "type": "bytes4"
+            },
+            {
+                "indexed": true,
+                "internalType": "address",
+                "name": "usr",
+                "type": "address"
+            },
+            {
+                "indexed": true,
+                "internalType": "bytes32",
+                "name": "arg1",
+                "type": "bytes32"
+            },
+            {
+                "indexed": true,
+                "internalType": "bytes32",
+                "name": "arg2",
+                "type": "bytes32"
+            },
+            {
+                "indexed": false,
+                "internalType": "bytes",
+                "name": "data",
+                "type": "bytes"
+            }
+        ],
+        "name": "LogNote",
+        "type": "event"
+    },
+    {
+        "constant": false,
+        "inputs": [],
+        "name": "cage",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [],
+        "name": "dec",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "constant": false,
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "usr",
+                "type": "address"
+            }
+        ],
+        "name": "deny",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "constant": false,
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "usr",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "wad",
+                "type": "uint256"
+            }
+        ],
+        "name": "exit",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [],
+        "name": "gem",
+        "outputs": [
+            {
+                "internalType": "contract GemLike",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [],
+        "name": "ilk",
+        "outputs": [
+            {
+                "internalType": "bytes32",
+                "name": "",
+                "type": "bytes32"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "constant": false,
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "usr",
+                "type": "address"
+            },
+            {
+                "internalType": "uint256",
+                "name": "wad",
+                "type": "uint256"
+            }
+        ],
+        "name": "join",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [],
+        "name": "live",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "constant": false,
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "usr",
+                "type": "address"
+            }
+        ],
+        "name": "rely",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [],
+        "name": "vat",
+        "outputs": [
+            {
+                "internalType": "contract VatLike",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    },
+    {
+        "constant": true,
+        "inputs": [
+            {
+                "internalType": "address",
+                "name": "",
+                "type": "address"
+            }
+        ],
+        "name": "wards",
+        "outputs": [
+            {
+                "internalType": "uint256",
+                "name": "",
+                "type": "uint256"
+            }
+        ],
+        "payable": false,
+        "stateMutability": "view",
+        "type": "function"
+    }
+]
diff --git a/core/src/auctions.ts b/core/src/auctions.ts
index f20f381a8..93c99bb53 100644
--- a/core/src/auctions.ts
+++ b/core/src/auctions.ts
@@ -11,6 +11,7 @@ import {
     calculateAuctionPrice,
     calculateTransactionGrossProfit,
     calculateTransactionGrossProfitDate,
+    calculateTransactionCollateralOutcome,
 } from './price';
 import { getSupportedCollateralTypes } from './addresses';
 import getContract, { getClipperNameByCollateralType } from './contracts';
@@ -181,14 +182,14 @@ export const restartAuction = async function (
 
 export const bidWithDai = async function (
     network: string,
-    auction: Auction,
+    auction: AuctionTransaction,
     bidAmountDai: BigNumber,
     profitAddress: string,
     notifier?: Notifier
 ): Promise<string> {
     const contractName = getClipperNameByCollateralType(auction.collateralType);
     const updatedAuction = await enrichAuctionWithActualNumbers(network, auction);
-    const collateralAmount = bidAmountDai.dividedBy(updatedAuction.unitPrice);
+    const collateralAmount = calculateTransactionCollateralOutcome(bidAmountDai, updatedAuction.unitPrice, auction);
     const contractParameters = [
         convertNumberTo32Bytes(auction.index),
         collateralAmount.shiftedBy(WAD_NUMBER_OF_DIGITS).toFixed(0),
diff --git a/core/src/contracts.ts b/core/src/contracts.ts
index 756cfa13e..f510b0560 100644
--- a/core/src/contracts.ts
+++ b/core/src/contracts.ts
@@ -5,6 +5,7 @@ import { fetchContractAddressByNetwork } from './addresses';
 import MCD_DAI from './abis/MCD_DAI.json';
 import MCD_VAT from './abis/MCD_VAT.json';
 import MCD_JOIN_DAI from './abis/MCD_JOIN_DAI.json';
+import MCD_JOIN from './abis/MCD_JOIN.json';
 import MCD_CLIP_CALC from './abis/MCD_CLIP_CALC.json';
 import MCD_CLIP from './abis/MCD_CLIP.json';
 import MCD_DOG from './abis/MCD_DOG.json';
@@ -41,6 +42,9 @@ const getContractInterfaceByName = async function (contractName: string): Promis
     if (contractName === 'MCD_JOIN_DAI') {
         return MCD_JOIN_DAI;
     }
+    if (contractName.startsWith('MCD_JOIN_')) {
+        return MCD_JOIN;
+    }
     if (contractName.startsWith('MCD_CLIP_CALC_')) {
         return MCD_CLIP_CALC;
     }
diff --git a/core/src/fetch.ts b/core/src/fetch.ts
index 59e593826..7d8fe5823 100644
--- a/core/src/fetch.ts
+++ b/core/src/fetch.ts
@@ -1,9 +1,8 @@
 import type { AuctionInitialInfo, AuctionStatus } from './types';
-import { ethers } from 'ethers';
 import memoizee from 'memoizee';
 import BigNumber from './bignumber';
 import getContract, { getClipperNameByCollateralType } from './contracts';
-import { RAD, RAY, WAD } from './constants/UNITS';
+import { RAD, RAD_NUMBER_OF_DIGITS, RAY, WAD } from './constants/UNITS';
 import { getCollateralConfigByType } from './constants/COLLATERALS';
 import convertNumberTo32Bytes from './helpers/convertNumberTo32Bytes';
 
@@ -25,11 +24,10 @@ const fetchMaximumAuctionDurationInSeconds = memoizee(_fetchMaximumAuctionDurati
 });
 
 const _fetchMinimumBidDai = async function (network: string, collateralType: string): Promise<BigNumber> {
-    const dogContract = await getContract(network, 'MCD_DOG');
-    const encodedCollateralType = ethers.utils.formatBytes32String(collateralType);
-    const collateralParameters = await dogContract.ilks(encodedCollateralType);
-    const minimumBidDai = new BigNumber(collateralParameters.dirt._hex).div(RAD);
-    return minimumBidDai;
+    const contractName = getClipperNameByCollateralType(collateralType);
+    const contract = await getContract(network, contractName);
+    const minimumBidRaw = await contract.chost();
+    return new BigNumber(minimumBidRaw._hex).shiftedBy(-RAD_NUMBER_OF_DIGITS);
 };
 
 export const fetchMinimumBidDai = memoizee(_fetchMinimumBidDai, {
diff --git a/core/src/price.ts b/core/src/price.ts
index 672e46fcd..e1e67c395 100644
--- a/core/src/price.ts
+++ b/core/src/price.ts
@@ -1,4 +1,4 @@
-import type { Auction } from './types';
+import type { Auction, AuctionTransaction } from './types';
 import BigNumber from './bignumber';
 import { addSeconds } from 'date-fns';
 
@@ -54,6 +54,44 @@ export const calculateTransactionGrossProfit = function (auction: Auction): BigN
     return totalMarketPriceLimitedByDebt.minus(auction.debtDAI);
 };
 
+export const calculateTransactionCollateralOutcome = function (
+    bidAmountDai: BigNumber,
+    unitPrice: BigNumber,
+    auction: AuctionTransaction
+): BigNumber {
+    // Based on the clipper contract logic
+    // https://github.com/makerdao/dss/blob/60690042965500992490f695cf259256cc94c140/src/clip.sol#L357-L380
+    const collateralToBuyForTheBid = bidAmountDai.dividedBy(unitPrice);
+    const potentialOutcomeCollateralAmount = BigNumber.minimum(collateralToBuyForTheBid, auction.collateralAmount); // slice
+    const potentialOutcomeTotalPrice = potentialOutcomeCollateralAmount.multipliedBy(unitPrice); // owe
+    if (
+        // if owe > tab
+        potentialOutcomeTotalPrice.isGreaterThan(auction.debtDAI)
+    ) {
+        return auction.debtDAI.dividedBy(unitPrice); // return tab / price
+    } else if (
+        // if owe < tab && slice < lot
+        potentialOutcomeTotalPrice.isLessThan(auction.debtDAI) &&
+        potentialOutcomeCollateralAmount.isLessThan(auction.collateralAmount)
+    ) {
+        if (
+            // if tab - owe < _chost
+            auction.debtDAI.minus(potentialOutcomeTotalPrice).isLessThan(auction.minimumBidDai)
+        ) {
+            if (
+                // if tab > _chost
+                auction.debtDAI.isLessThanOrEqualTo(auction.minimumBidDai)
+            ) {
+                // shouldn't be possible to left less than minimumBidDai
+                return new BigNumber(NaN);
+            }
+            // tab - _chost / price
+            return auction.debtDAI.minus(auction.minimumBidDai).dividedBy(unitPrice);
+        }
+    }
+    return potentialOutcomeCollateralAmount;
+};
+
 export const calculateTransactionGrossProfitDate = function (auction: Auction, currentDate: Date): Date | undefined {
     if (
         auction.secondsBetweenPriceDrops === undefined ||
diff --git a/core/src/wallet.ts b/core/src/wallet.ts
index ac62947cd..e1948c631 100644
--- a/core/src/wallet.ts
+++ b/core/src/wallet.ts
@@ -1,7 +1,8 @@
 import type { Notifier, WalletBalances } from './types';
+import { ethers } from 'ethers';
 import getProvider from './provider';
 import BigNumber from './bignumber';
-import getContract from './contracts';
+import getContract, { getJoinNameByCollateralType } from './contracts';
 import executeTransaction from './execute';
 import {
     DAI_NUMBER_OF_DIGITS,
@@ -31,6 +32,17 @@ export const fetchVATbalanceDAI = async function (network: string, walletAddress
     return walletVatDAI.decimalPlaces(WAD_NUMBER_OF_DIGITS, BigNumber.ROUND_DOWN);
 };
 
+export const fetchCollateralVatBalance = async function (
+    network: string,
+    walletAddress: string,
+    collateralType: string
+): Promise<BigNumber> {
+    const contract = await getContract(network, 'MCD_VAT');
+    const encodedCollateralType = ethers.utils.formatBytes32String(collateralType);
+    const wadAmount = await contract.gem(encodedCollateralType, walletAddress);
+    return new BigNumber(wadAmount._hex).shiftedBy(-WAD_NUMBER_OF_DIGITS);
+};
+
 export const fetchWalletBalances = async function (network: string, walletAddress: string): Promise<WalletBalances> {
     return {
         walletETH: await fetchBalanceETH(network, walletAddress),
@@ -59,3 +71,16 @@ export const withdrawFromVAT = async function (
     const wadAmount = amount.shiftedBy(WAD_NUMBER_OF_DIGITS).toFixed(0, BigNumber.ROUND_DOWN);
     await executeTransaction(network, 'MCD_JOIN_DAI', 'exit', [walletAddress, wadAmount], notifier, true);
 };
+
+export const withdrawCollateralFromVat = async function (
+    network: string,
+    walletAddress: string,
+    collateralType: string,
+    amount: BigNumber | undefined,
+    notifier?: Notifier
+): Promise<void> {
+    const withdrawalAmount = amount || (await fetchCollateralVatBalance(network, walletAddress, collateralType));
+    const withdrawalAmountWad = withdrawalAmount.shiftedBy(WAD_NUMBER_OF_DIGITS).toFixed(0, BigNumber.ROUND_DOWN);
+    const contractName = getJoinNameByCollateralType(collateralType);
+    await executeTransaction(network, contractName, 'exit', [walletAddress, withdrawalAmountWad], notifier, true);
+};
diff --git a/frontend/components/MainFlow.vue b/frontend/components/MainFlow.vue
index b18329c27..f84712892 100644
--- a/frontend/components/MainFlow.vue
+++ b/frontend/components/MainFlow.vue
@@ -69,6 +69,10 @@
                     :wallet-address="walletAddress"
                     :wallet-dai="walletDai"
                     :wallet-vat-dai="walletVatDai"
+                    :collateral-vat-balance="collateralVatBalance"
+                    :is-fetching-collateral-vat-balance="isFetchingCollateralVatBalance"
+                    @fetchCollateralVatBalance="$emit('fetchCollateralVatBalance', $event)"
+                    @withdrawAllCollateralFromVat="$emit('withdrawAllCollateralFromVat', $event)"
                     @connect="$emit('connect')"
                     @disconnect="$emit('disconnect')"
                     @manageVat="$emit('manageVat')"
@@ -154,6 +158,14 @@ export default Vue.extend({
             type: Object as Vue.PropType<BigNumber>,
             default: null,
         },
+        collateralVatBalanceStore: {
+            type: Object as Vue.PropType<Record<string, BigNumber | undefined>>,
+            default: undefined,
+        },
+        isFetchingCollateralVatBalance: {
+            type: Boolean,
+            default: false,
+        },
         isExplanationsShown: {
             type: Boolean,
             default: true,
@@ -176,6 +188,12 @@ export default Vue.extend({
         isStagingEnvironment(): boolean {
             return !!process.env.STAGING_BANNER_URL;
         },
+        collateralVatBalance(): BigNumber | undefined {
+            if (!this.collateralVatBalanceStore || !this.selectedAuction) {
+                return;
+            }
+            return this.collateralVatBalanceStore[this.selectedAuction.collateralType];
+        },
     },
     watch: {
         selectedAuctionId: {
diff --git a/frontend/components/common/BaseValueInput.vue b/frontend/components/common/BaseValueInput.vue
index 9479f903c..2a3543616 100644
--- a/frontend/components/common/BaseValueInput.vue
+++ b/frontend/components/common/BaseValueInput.vue
@@ -74,7 +74,10 @@ export default Vue.extend({
     },
     watch: {
         inputText(_newInputText: string, oldInputText: string) {
-            if (this.errorMessage || !this.inputTextParsed) {
+            if (!this.inputTextParsed) {
+                return;
+            }
+            if (this.errorMessage) {
                 this.$emit('update:inputValue', new BigNumber(NaN));
                 return;
             }
diff --git a/frontend/components/transaction/AuthorisationBlock.vue b/frontend/components/transaction/AuthorisationBlock.vue
index 66d926f69..b3d8ce7c6 100644
--- a/frontend/components/transaction/AuthorisationBlock.vue
+++ b/frontend/components/transaction/AuthorisationBlock.vue
@@ -49,11 +49,9 @@
             >
                 Authorize DAI Transactions
             </base-button>
-            <Tooltip v-else title="Already authorized for this wallet" placement="top">
-                <div class="w-full md:w-80">
-                    <base-button type="primary" class="w-full" disabled> Authorize DAI Transactions </base-button>
-                </div>
-            </Tooltip>
+            <base-button v-else type="primary" class="w-full md:w-80" disabled>
+                DAI Transactions Authorized
+            </base-button>
         </div>
         <TextBlock v-if="isExplanationsShown">
             <div>
@@ -94,22 +92,15 @@
             >
                 Authorizing...
             </base-button>
-
-            <Tooltip v-else title="Already authorized for this wallet" placement="top">
-                <div class="w-full md:w-80">
-                    <base-button type="primary" class="w-full" disabled>
-                        Authorize
-                        <format-currency class="px-1" :currency="auctionTransaction.collateralType" /> Transactions
-                    </base-button>
-                </div>
-            </Tooltip>
+            <base-button v-else type="primary" class="w-full md:w-80" disabled>
+                <format-currency class="px-1" :currency="auctionTransaction.collateralType" /> Transactions Authorized
+            </base-button>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { Tooltip } from 'ant-design-vue';
 import TextBlock from '~/components/common/TextBlock.vue';
 import BaseButton from '~/components/common/BaseButton.vue';
 import FormatCurrency from '~/components/utils/FormatCurrency.vue';
@@ -122,7 +113,6 @@ export default Vue.extend({
         TextBlock,
         BaseButton,
         FormatCurrency,
-        Tooltip,
     },
     props: {
         disabled: {
diff --git a/frontend/components/transaction/BidTransaction.vue b/frontend/components/transaction/BidTransaction.vue
index 355d17c6e..6f99f67c5 100644
--- a/frontend/components/transaction/BidTransaction.vue
+++ b/frontend/components/transaction/BidTransaction.vue
@@ -10,8 +10,8 @@
         <BidTransactionTable
             class="mt-4 mb-6"
             :auction-transaction="auctionTransaction"
+            :amount-to-receive="amountToReceive"
             @inputBidAmount="inputBidAmount = $event"
-            @amountToReceive="amountToReceive = $event"
         />
         <WalletBlock
             class="mb-6 lg:mb-0"
@@ -44,28 +44,45 @@
             @authorizeCollateral="$emit('authorizeCollateral', auctionTransaction.collateralType)"
         />
         <BidBlock
+            class="mb-6 lg:mb-0"
             :auction-transaction="auctionTransaction"
             :transaction-bid-amount="transactionBidAmount"
             :amount-to-receive="amountToReceive"
             :disabled="
-                !auctionTransaction.isActive || !isWalletAuthorized || !isCollateralAuthorised || !isEnoughDeposited
+                !auctionTransaction.isActive ||
+                auctionTransaction.isFinished ||
+                !isWalletAuthorized ||
+                !isCollateralAuthorised ||
+                !isEnoughDeposited
             "
             :is-loading="isExecuting"
             :is-explanations-shown="isExplanationsShown"
             @bidWithDai="$emit('bidWithDai', { id: auctionTransaction.id, bidAmountDai: transactionBidAmount })"
         />
+        <WithdrawCollateralBlock
+            :collateral-type="auctionTransaction.collateralType"
+            :collateral-vat-balance="collateralVatBalance"
+            :is-withdrawing="isDepositingOrWithdrawing"
+            :is-fetching="isFetchingCollateralVatBalance"
+            :is-explanations-shown="isExplanationsShown"
+            @fetchCollateralVatBalance="$emit('fetchCollateralVatBalance', $event)"
+            @withdrawAllCollateralFromVat="$emit('withdrawAllCollateralFromVat', $event)"
+        />
     </div>
 </template>
 
 <script lang="ts">
+import type { AuctionTransaction } from 'auctions-core/src/types';
 import Vue from 'vue';
 import { Alert } from 'ant-design-vue';
 import BigNumber from 'bignumber.js';
+import { calculateTransactionCollateralOutcome } from 'auctions-core/src/price';
 import AuthorisationBlock from './AuthorisationBlock.vue';
 import BidTransactionTable from './BidTransactionTable.vue';
 import WalletBlock from './WalletBlock.vue';
 import DepositBlock from './DepositBlock.vue';
 import BidBlock from './BidBlock.vue';
+import WithdrawCollateralBlock from './WithdrawCollateralBlock.vue';
 import TextBlock from '~/components/common/TextBlock.vue';
 
 export default Vue.extend({
@@ -76,6 +93,7 @@ export default Vue.extend({
         WalletBlock,
         DepositBlock,
         BidBlock,
+        WithdrawCollateralBlock,
         Alert,
     },
     props: {
@@ -119,6 +137,14 @@ export default Vue.extend({
             type: Object as Vue.PropType<BigNumber>,
             default: null,
         },
+        collateralVatBalance: {
+            type: Object as Vue.PropType<BigNumber>,
+            default: undefined,
+        },
+        isFetchingCollateralVatBalance: {
+            type: Boolean,
+            default: false,
+        },
         isExplanationsShown: {
             type: Boolean,
             default: true,
@@ -127,7 +153,6 @@ export default Vue.extend({
     data() {
         return {
             inputBidAmount: undefined as BigNumber | undefined,
-            amountToReceive: undefined as BigNumber | undefined,
         };
     },
     computed: {
@@ -141,8 +166,14 @@ export default Vue.extend({
             return this.walletVatDai?.isGreaterThanOrEqualTo(this.transactionBidAmount);
         },
         transactionBidAmount(): BigNumber {
-            const output = this.inputBidAmount || this.auctionTransaction?.totalPrice || new BigNumber(NaN);
-            return output;
+            return this.inputBidAmount || this.auctionTransaction?.debtDAI || new BigNumber(NaN);
+        },
+        amountToReceive(): BigNumber {
+            return calculateTransactionCollateralOutcome(
+                this.transactionBidAmount,
+                this.auctionTransaction.approximateUnitPrice,
+                this.auctionTransaction
+            );
         },
     },
 });
diff --git a/frontend/components/transaction/BidTransactionTable.stories.js b/frontend/components/transaction/BidTransactionTable.stories.js
index fb263fb4a..46c10bf0d 100644
--- a/frontend/components/transaction/BidTransactionTable.stories.js
+++ b/frontend/components/transaction/BidTransactionTable.stories.js
@@ -1,4 +1,5 @@
 import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
 import faker from 'faker';
 import BigNumber from 'bignumber.js';
 import BidTransactionTable from './BidTransactionTable';
@@ -7,6 +8,11 @@ import { generateFakeAuctionTransaction } from '~/helpers/generateFakeAuction';
 const fakeAuction = generateFakeAuctionTransaction();
 
 const common = {
+    template: `<BidTransactionTable
+        :auctionTransaction="auctionTransaction"
+        :amountToReceive="amountToReceive"
+        @inputBidAmount="inputBidAmount"
+    />`,
     components: { BidTransactionTable },
     data() {
         return {
@@ -15,14 +21,17 @@ const common = {
                 isFinished: false,
                 isActive: true,
             },
+            amountToReceive: new BigNumber(NaN),
         };
     },
+    methods: {
+        inputBidAmount: action('inputBidAmount'),
+    },
 };
 
 storiesOf('Transaction/BidTransactionTable', module)
     .add('Default', () => ({
         ...common,
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }))
     .add('Finished', () => ({
         ...common,
@@ -33,9 +42,9 @@ storiesOf('Transaction/BidTransactionTable', module)
                     isFinished: true,
                     totalPrice: null,
                 },
+                amountToReceive: new BigNumber(NaN),
             };
         },
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }))
     .add('Inactive', () => ({
         ...common,
@@ -47,9 +56,9 @@ storiesOf('Transaction/BidTransactionTable', module)
                     isFinished: false,
                     totalPrice: null,
                 },
+                amountToReceive: new BigNumber(NaN),
             };
         },
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }))
     .add('Total < Minimum x 2', () => ({
         ...common,
@@ -62,9 +71,9 @@ storiesOf('Transaction/BidTransactionTable', module)
                     totalPrice: new BigNumber(faker.finance.amount(60, 99)),
                     minimumBidDai: new BigNumber(faker.finance.amount(50, 60)),
                 },
+                amountToReceive: new BigNumber(NaN),
             };
         },
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }))
     .add('Decreasing Price', () => ({
         ...common,
@@ -75,6 +84,7 @@ storiesOf('Transaction/BidTransactionTable', module)
                     isActive: true,
                     isFinished: false,
                 },
+                amountToReceive: new BigNumber(NaN),
             };
         },
         created() {
@@ -82,7 +92,6 @@ storiesOf('Transaction/BidTransactionTable', module)
                 this.auctionTransaction.totalPrice = this.auctionTransaction.totalPrice.multipliedBy(0.99);
             }, 5000);
         },
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }))
     .add('Decreasing Into Disabled Input', () => ({
         ...common,
@@ -95,6 +104,7 @@ storiesOf('Transaction/BidTransactionTable', module)
                     totalPrice: new BigNumber(faker.finance.amount(50, 51)),
                     minimumBidDai: new BigNumber(faker.finance.amount(25, 25)),
                 },
+                amountToReceive: new BigNumber(NaN),
             };
         },
         created() {
@@ -102,5 +112,4 @@ storiesOf('Transaction/BidTransactionTable', module)
                 this.auctionTransaction.totalPrice = this.auctionTransaction.totalPrice.multipliedBy(0.99);
             }, 5000);
         },
-        template: '<BidTransactionTable :auctionTransaction="auctionTransaction" />',
     }));
diff --git a/frontend/components/transaction/BidTransactionTable.vue b/frontend/components/transaction/BidTransactionTable.vue
index 4e9928434..056fe3ee7 100644
--- a/frontend/components/transaction/BidTransactionTable.vue
+++ b/frontend/components/transaction/BidTransactionTable.vue
@@ -50,37 +50,33 @@
             </div>
         </div>
         <div class="flex justify-between">
-            <span v-if="!isActive || !auctionTransaction.totalPrice || !isTooSmallToPartiallyTake">Total price</span>
-            <button v-else class="ClickableText" @click="settransactionBidAmount(undefined)">
-                Buy all collateral
-            </button>
+            <span v-if="!isActive || !auctionTransaction.debtDAI || isTooSmallToPartiallyTake">Auction debt</span>
+            <button v-else class="ClickableText" @click="setTransactionBidAmount(undefined)">Set maximum bid</button>
             <button
                 class="ClickableText"
-                :disabled="!isActive || !auctionTransaction.totalPrice || !isTooSmallToPartiallyTake"
-                @click="settransactionBidAmount(undefined)"
+                :disabled="!isActive || !auctionTransaction.debtDAI || isTooSmallToPartiallyTake"
+                @click="setTransactionBidAmount(undefined)"
             >
                 <format-currency
-                    v-if="auctionTransaction.totalPrice && isActive"
-                    :value="auctionTransaction.totalPrice"
+                    v-if="auctionTransaction.debtDAI && isActive"
+                    :value="auctionTransaction.debtDAI"
                     currency="DAI"
                 />
                 <span v-else class="opacity-50">Unknown</span>
             </button>
         </div>
         <div class="flex justify-between">
-            <span v-if="!isActive || !auctionTransaction.minimumBidDai || !isTooSmallToPartiallyTake"
-                >Minimum bid</span
-            >
-            <button v-else class="ClickableText" @click="settransactionBidAmount(auctionTransaction.minimumBidDai)">
+            <span v-if="!isActive || !auctionTransaction.minimumBidDai || isTooSmallToPartiallyTake">Minimum bid</span>
+            <button v-else class="ClickableText" @click="setTransactionBidAmount(auctionTransaction.minimumBidDai)">
                 Set minimum bid
             </button>
             <button
                 class="ClickableText"
-                :disabled="!isActive || !auctionTransaction.minimumBidDai || !isTooSmallToPartiallyTake"
-                @click="settransactionBidAmount(auctionTransaction.minimumBidDai)"
+                :disabled="!isActive || !auctionTransaction.minimumBidDai || isTooSmallToPartiallyTake"
+                @click="setTransactionBidAmount(auctionTransaction.minimumBidDai)"
             >
                 <format-currency
-                    v-if="auctionTransaction.minimumBidDai && isActive"
+                    v-if="auctionTransaction.minimumBidDai"
                     :value="auctionTransaction.minimumBidDai"
                     currency="DAI"
                 />
@@ -90,20 +86,13 @@
         <div class="flex justify-between items-center">
             <div>The amount to bid</div>
             <div class="flex w-1/2 items-center space-x-2 justify-end -mr-1">
-                <div v-if="transactionBidAmount">
-                    <button
-                        class="text-primary hover:text-primary-light whitespace-nowrap"
-                        @click="settransactionBidAmount(undefined)"
-                    >
-                        Reset To Total
-                    </button>
-                </div>
                 <div class="w-full flex-shrink-0">
                     <bid-input
                         :transaction-bid-amount.sync="transactionBidAmount"
                         :minimum-bid-dai="auctionTransaction.minimumBidDai"
-                        :total-price="auctionTransaction.totalPrice"
-                        :disabled="auctionTransaction.isFinished || !auctionTransaction.isActive"
+                        :debt-dai="auctionTransaction.debtDAI"
+                        :disabled="!isActive || isTooSmallToPartiallyTake"
+                        :is-too-small-to-partially-take="isTooSmallToPartiallyTake"
                     />
                 </div>
             </div>
@@ -146,6 +135,10 @@ export default Vue.extend({
             type: Object as Vue.PropType<AuctionTransaction>,
             required: true,
         },
+        amountToReceive: {
+            type: Object as Vue.PropType<BigNumber>,
+            required: true,
+        },
     },
     data() {
         return {
@@ -153,12 +146,6 @@ export default Vue.extend({
         };
     },
     computed: {
-        amountToReceive(): BigNumber | undefined {
-            if (!this.transactionBidAmount || !this.auctionTransaction.approximateUnitPrice) {
-                return this.auctionTransaction.collateralAmount;
-            }
-            return this.transactionBidAmount.dividedBy(this.auctionTransaction.approximateUnitPrice);
-        },
         isActive(): boolean {
             return this.auctionTransaction.isActive && !this.auctionTransaction.isFinished;
         },
@@ -166,9 +153,7 @@ export default Vue.extend({
             return !!this.transactionBidAmount?.isNaN();
         },
         isTooSmallToPartiallyTake(): boolean {
-            return this.auctionTransaction.totalPrice.isGreaterThanOrEqualTo(
-                this.auctionTransaction.minimumBidDai.multipliedBy(2)
-            );
+            return this.auctionTransaction.debtDAI.isLessThan(this.auctionTransaction.minimumBidDai.multipliedBy(2));
         },
     },
     watch: {
@@ -178,15 +163,9 @@ export default Vue.extend({
                 this.$emit('inputBidAmount', transactionBidAmount);
             },
         },
-        amountToReceive: {
-            immediate: true,
-            handler(amountToReceive) {
-                this.$emit('amountToReceive', amountToReceive);
-            },
-        },
     },
     methods: {
-        settransactionBidAmount(value: BigNumber | undefined) {
+        setTransactionBidAmount(value: BigNumber | undefined) {
             if (this.isActive) {
                 this.transactionBidAmount = value;
             }
diff --git a/frontend/components/transaction/DepositBlock.vue b/frontend/components/transaction/DepositBlock.vue
index f154650d6..9d6a0ac4f 100644
--- a/frontend/components/transaction/DepositBlock.vue
+++ b/frontend/components/transaction/DepositBlock.vue
@@ -48,7 +48,7 @@
                 class="w-full md:w-80"
                 @click="$emit('manageVat')"
             >
-                Manage DAI in VAT
+                Deposit more DAI in VAT
             </BaseButton>
         </div>
     </div>
diff --git a/frontend/components/transaction/SwapTransaction.vue b/frontend/components/transaction/SwapTransaction.vue
index 20705a78b..f1e3d8121 100644
--- a/frontend/components/transaction/SwapTransaction.vue
+++ b/frontend/components/transaction/SwapTransaction.vue
@@ -62,7 +62,7 @@
             :is-explanations-shown="isExplanationsShown"
             :collateral-type="auctionTransaction.collateralType"
             :transaction-fee="auctionTransaction.biddingTransactionFeeETH"
-            :transaction-profit="auctionTransaction.transactionGrossProfit"
+            :transaction-gross-profit="auctionTransaction.transactionGrossProfit"
             @execute="$emit('execute', { id: auctionTransaction.id, alternativeDestinationAddress: $event })"
         />
     </div>
diff --git a/frontend/components/transaction/TransactionMessage.vue b/frontend/components/transaction/TransactionMessage.vue
index c07581e47..744a83d54 100644
--- a/frontend/components/transaction/TransactionMessage.vue
+++ b/frontend/components/transaction/TransactionMessage.vue
@@ -16,8 +16,7 @@
                 price
                 <a href="https://ethgasstation.info/" target="_blank"> here </a> </Explain
             >. The amount can be edited by the participant to influence the speed of the transaction.
-            <div v-if="showDifferentWalletInfo">
-                <br />
+            <div v-if="showDifferentWalletInfo" class="mt-2">
                 By default, the profit from a successful bidding will be sent to the same wallet which executed the
                 transaction. However, you can provide a different address which will receive the transaction profit.
             </div>
diff --git a/frontend/components/transaction/WithdrawCollateralBlock.vue b/frontend/components/transaction/WithdrawCollateralBlock.vue
new file mode 100644
index 000000000..ce9a84f60
--- /dev/null
+++ b/frontend/components/transaction/WithdrawCollateralBlock.vue
@@ -0,0 +1,88 @@
+<template>
+    <div v-if="!!collateralSymbol" class="WithdrawCollateralBlock">
+        <TextBlock v-if="isExplanationsShown" :title="blockTitle">
+            After participating in the auction, the collateral will end up in your VAT account. One more transaction is
+            required to move it to your wallet.
+        </TextBlock>
+        <div class="flex flex-row gap-5 mt-3">
+            <BaseButton
+                class="w-full md:w-80"
+                :is-loading="isFetching"
+                :disabled="isWithdrawing"
+                @click="$emit('fetchCollateralVatBalance', collateralType)"
+            >
+                Refresh {{ collateralSymbol }} balance in VAT
+            </BaseButton>
+            <BaseButton
+                class="w-full md:w-80"
+                type="primary"
+                :disabled="disabled || !hasCollateralToWithdraw || isFetching"
+                :is-loading="isWithdrawing"
+                @click="$emit('withdrawAllCollateralFromVat', collateralType)"
+            >
+                <span v-if="hasCollateralToWithdraw">
+                    Withdraw <FormatCurrency :value="collateralVatBalance" :currency="collateralSymbol" />
+                </span>
+                <span v-else> Nothing to withdraw yet </span>
+            </BaseButton>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import TextBlock from '~/components/common/TextBlock.vue';
+import BaseButton from '~/components/common/BaseButton.vue';
+import FormatCurrency from '~/components/utils/FormatCurrency.vue';
+import { getCollateralConfigByType } from '~/../core/src/constants/COLLATERALS';
+
+export default Vue.extend({
+    components: {
+        TextBlock,
+        BaseButton,
+        FormatCurrency,
+    },
+    props: {
+        collateralType: {
+            type: String,
+            required: true,
+        },
+        collateralVatBalance: {
+            type: Object as Vue.PropType<BigNumber>,
+            default: undefined,
+        },
+        isWithdrawing: {
+            type: Boolean,
+            default: false,
+        },
+        isFetching: {
+            type: Boolean,
+            default: false,
+        },
+        isExplanationsShown: {
+            type: Boolean,
+            default: true,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        collateralSymbol(): string {
+            try {
+                const collateral = getCollateralConfigByType(this.collateralType);
+                return collateral.symbol;
+            } catch {
+                return '';
+            }
+        },
+        blockTitle(): string {
+            return `Withdraw ${this.collateralSymbol} from the VAT`;
+        },
+        hasCollateralToWithdraw(): boolean {
+            return this.collateralVatBalance?.isGreaterThan(0) ?? false;
+        },
+    },
+});
+</script>
diff --git a/frontend/components/utils/BidInput.vue b/frontend/components/utils/BidInput.vue
index 9a1fde4c5..5b2baa21d 100644
--- a/frontend/components/utils/BidInput.vue
+++ b/frontend/components/utils/BidInput.vue
@@ -1,49 +1,71 @@
 <template>
-    <BaseValueInput
-        :input-value="transactionBidAmount"
-        :max-value="totalPrice"
-        :min-value="minimumBidDai"
-        :disabled="!disabled"
-        :validator="validator"
-        @update:inputValue="$emit('update:transactionBidAmount', $event)"
-    />
+    <Tooltip :title="tooltipText" placement="topLeft">
+        <BaseValueInput
+            :input-value="transactionBidAmount"
+            :max-value="debtDai"
+            :min-value="minimumBidDai"
+            :disabled="disabled"
+            :validator="validator"
+            @update:inputValue="$emit('update:transactionBidAmount', $event)"
+        />
+    </Tooltip>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import { Tooltip } from 'ant-design-vue';
 import BigNumber from 'bignumber.js';
 import BaseValueInput from '~/components/common/BaseValueInput.vue';
 
 export default Vue.extend({
     components: {
+        Tooltip,
         BaseValueInput,
     },
     props: {
-        totalPrice: {
-            type: Object as Vue.PropType<BigNumber>,
-            default: null,
-        },
         minimumBidDai: {
-            type: Object as Vue.PropType<BigNumber>,
-            required: true,
+            type: Object as Vue.PropType<BigNumber | undefined>,
+            default: undefined,
+        },
+        debtDai: {
+            type: Object as Vue.PropType<BigNumber | undefined>,
+            default: undefined,
         },
         transactionBidAmount: {
-            type: Object as Vue.PropType<BigNumber> | undefined,
+            type: Object as Vue.PropType<BigNumber | undefined>,
             default: undefined,
         },
+        isTooSmallToPartiallyTake: {
+            type: Boolean,
+            default: false,
+        },
         disabled: {
             type: Boolean,
             default: false,
         },
     },
+    computed: {
+        tooltipText(): string {
+            if (this.isTooSmallToPartiallyTake) {
+                return `Not possible to change the amount since the leftover will be smaller than minimum`;
+            }
+            return '';
+        },
+    },
     methods: {
-        validator(currentValue: BigNumber, minValue: BigNumber, maxValue: BigNumber) {
+        validator(
+            currentValue: BigNumber | undefined,
+            minValue: BigNumber | undefined,
+            maxValue: BigNumber | undefined
+        ) {
             if (!currentValue || !minValue || !maxValue) {
                 return;
             }
             const bidTopLimit = maxValue?.minus(minValue);
             if (currentValue?.isGreaterThan(bidTopLimit) || currentValue?.isLessThan(minValue)) {
-                throw new Error(`The value can only be between ${minValue.toFixed(2)} and ${bidTopLimit.toFixed(2)}`);
+                throw new Error(
+                    `The value can only be between ${minValue.toFixed(2)} and ${bidTopLimit.toFixed(2)} or the maximum`
+                );
             }
             if (maxValue?.isLessThan(minValue.multipliedBy(2))) {
                 throw new Error('The value can not be changed since the leftover part will be too small');
diff --git a/frontend/components/utils/FormatCurrency.vue b/frontend/components/utils/FormatCurrency.vue
index cbac86f0a..242bf144d 100644
--- a/frontend/components/utils/FormatCurrency.vue
+++ b/frontend/components/utils/FormatCurrency.vue
@@ -1,6 +1,6 @@
 <template>
     <span>
-        <span v-if="isNotANumber">NaN</span>
+        <span v-if="isNotANumber">Unknown</span>
         <span v-else> {{ sign }}<animated-number :value="value" :decimal-places="2" /> </span>
         <span class="uppercase">{{ currency }}</span>
     </span>
diff --git a/frontend/containers/AuctionsContainer.vue b/frontend/containers/AuctionsContainer.vue
index 1473cf66f..a0a7a787e 100644
--- a/frontend/containers/AuctionsContainer.vue
+++ b/frontend/containers/AuctionsContainer.vue
@@ -17,6 +17,10 @@
             :take-event-storage="takeEvents"
             :wallet-dai="walletDai"
             :wallet-vat-dai="walletVatDai"
+            :collateral-vat-balance-store="collateralVatBalanceStore"
+            :is-fetching-collateral-vat-balance="isFetchingCollateralVatBalance"
+            @fetchCollateralVatBalance="fetchCollateralVatBalance"
+            @withdrawAllCollateralFromVat="withdrawAllCollateralFromVat"
             @manageVat="openWalletModal"
             @connect="openSelectWalletModal"
             @disconnect="disconnect"
@@ -53,6 +57,8 @@ export default Vue.extend({
             walletAddress: 'getAddress',
             walletBalances: 'walletBalances',
             isDepositingOrWithdrawing: 'isDepositingOrWithdrawing',
+            isFetchingCollateralVatBalance: 'isFetchingCollateralVatBalance',
+            collateralVatBalanceStore: 'collateralVatBalanceStore',
         }),
         ...mapGetters('authorizations', {
             isAuthorizing: 'isAuthorizationLoading',
@@ -102,25 +108,12 @@ export default Vue.extend({
     watch: {
         fetchedSelectedAuctionId: {
             immediate: true,
-            handler(fetchedSelectedAuctionId) {
-                if (!fetchedSelectedAuctionId) {
-                    return;
-                }
-                this.fetchWalletBalances();
-                this.fetchWalletAuthorizationStatus();
-                this.fetchCollateralAuthorizationStatus(this.selectedAuction.collateralType);
+            handler(): void {
+                this.fetchRelatedData();
             },
         },
-        walletAddress(newWalletAddress) {
-            if (!newWalletAddress) {
-                return;
-            }
-
-            this.fetchWalletBalances();
-            this.fetchWalletAuthorizationStatus();
-            if (this.selectedAuction) {
-                this.fetchCollateralAuthorizationStatus(this.selectedAuction.collateralType);
-            }
+        walletAddress(): void {
+            this.fetchRelatedData();
         },
     },
     methods: {
@@ -131,7 +124,7 @@ export default Vue.extend({
             'fetchCollateralAuthorizationStatus',
         ]),
         ...mapActions('auctions', ['bidWithCallee', 'bidWithDai', 'restart', 'fetchTakeEventsByAuctionId']),
-        ...mapActions('wallet', ['fetchWalletBalances']),
+        ...mapActions('wallet', ['fetchWalletBalances', 'fetchCollateralVatBalance', 'withdrawAllCollateralFromVat']),
         openSelectWalletModal(): void {
             if (!this.hasAcceptedTerms) {
                 this.$store.commit('modals/setTermsModal', true);
@@ -148,6 +141,15 @@ export default Vue.extend({
         restartAuction(auctionId: string): void {
             this.restart(auctionId);
         },
+        fetchRelatedData(): void {
+            if (!this.fetchedSelectedAuctionId || !this.walletAddress) {
+                return;
+            }
+            this.fetchWalletBalances();
+            this.fetchWalletAuthorizationStatus();
+            this.fetchCollateralAuthorizationStatus(this.selectedAuction.collateralType);
+            this.fetchCollateralVatBalance(this.selectedAuction.collateralType);
+        },
     },
 });
 </script>
diff --git a/frontend/store/auctions.ts b/frontend/store/auctions.ts
index 30b6ca551..d7ed9e84e 100644
--- a/frontend/store/auctions.ts
+++ b/frontend/store/auctions.ts
@@ -230,6 +230,7 @@ export const actions = {
                 notifier
             );
             await dispatch('wallet/fetchWalletBalances', undefined, { root: true });
+            await dispatch('wallet/fetchCollateralVatBalance', auction.collateralType, { root: true });
             await dispatch('fetch');
         } catch (error) {
             console.error('Bidding error', error);
diff --git a/frontend/store/wallet.ts b/frontend/store/wallet.ts
index 49646f646..815602a8a 100644
--- a/frontend/store/wallet.ts
+++ b/frontend/store/wallet.ts
@@ -2,7 +2,13 @@ import type { WalletBalances } from 'auctions-core/src/types';
 import { ActionContext } from 'vuex';
 import { message } from 'ant-design-vue';
 import BigNumber from 'bignumber.js';
-import { fetchWalletBalances, depositToVAT, withdrawFromVAT } from 'auctions-core/src/wallet';
+import {
+    fetchWalletBalances,
+    depositToVAT,
+    withdrawFromVAT,
+    fetchCollateralVatBalance,
+    withdrawCollateralFromVat,
+} from 'auctions-core/src/wallet';
 import getWallet, { WALLETS } from '~/lib/wallet';
 import notifier from '~/lib/notifier';
 import { getContractAddressByName } from '~/../core/src/contracts';
@@ -15,6 +21,8 @@ interface State {
     isFetchingBalances: boolean;
     isDepositingOrWithdrawing: boolean;
     tokenAddressDai: string | undefined;
+    isFetchingCollateralVatBalance: boolean;
+    collateralVatBalanceStore: Record<string, BigNumber | undefined>;
 }
 
 export const state = (): State => ({
@@ -25,6 +33,8 @@ export const state = (): State => ({
     isFetchingBalances: false,
     isDepositingOrWithdrawing: false,
     tokenAddressDai: undefined,
+    isFetchingCollateralVatBalance: false,
+    collateralVatBalanceStore: {},
 });
 
 export const getters = {
@@ -52,6 +62,12 @@ export const getters = {
     tokenAddressDai(state: State) {
         return state.tokenAddressDai;
     },
+    isFetchingCollateralVatBalance(state: State) {
+        return state.isFetchingCollateralVatBalance;
+    },
+    collateralVatBalanceStore(state: State) {
+        return state.collateralVatBalanceStore;
+    },
 };
 
 export const mutations = {
@@ -79,6 +95,15 @@ export const mutations = {
     setTokenAddressDai(state: State, tokenAddressDai: string): void {
         state.tokenAddressDai = tokenAddressDai;
     },
+    setIsFetchingCollateralVatBalance(state: State, isFetchingCollateralVatBalance: boolean): void {
+        state.isFetchingCollateralVatBalance = isFetchingCollateralVatBalance;
+    },
+    setCollateralVatBalance(
+        state: State,
+        { collateralType, balance }: { collateralType: string; balance: BigNumber }
+    ): void {
+        state.collateralVatBalanceStore[collateralType] = balance;
+    },
 };
 
 export const actions = {
@@ -191,4 +216,40 @@ export const actions = {
             message.error(`Error while fetching tokenAddressDai: ${error.message}`);
         }
     },
+    async fetchCollateralVatBalance(
+        { commit, getters, rootGetters }: ActionContext<State, State>,
+        collateralType: string
+    ): Promise<void> {
+        const network = rootGetters['network/getMakerNetwork'];
+        const walletAddress = getters.getAddress;
+        if (!walletAddress) {
+            commit('setCollateralVatBalance', { collateralType, balance: undefined });
+            return;
+        }
+        commit('setIsFetchingCollateralVatBalance', true);
+        try {
+            const collateralVatBalance = await fetchCollateralVatBalance(network, walletAddress, collateralType);
+            commit('setCollateralVatBalance', { collateralType, balance: collateralVatBalance });
+        } catch (error) {
+            commit('setCollateralVatBalance', { collateralType, balance: undefined });
+            message.error(`Error while fetching "${collateralType}" collateral vat balance: ${error.message}`);
+        } finally {
+            commit('setIsFetchingCollateralVatBalance', false);
+        }
+    },
+    async withdrawAllCollateralFromVat(
+        { commit, dispatch, getters, rootGetters }: ActionContext<State, State>,
+        collateralType: string
+    ): Promise<void> {
+        const network = rootGetters['network/getMakerNetwork'];
+        commit('setIsDepositingOrWithdrawing', true);
+        try {
+            await withdrawCollateralFromVat(network, getters.getAddress, collateralType, undefined, notifier);
+            await dispatch('fetchCollateralVatBalance', collateralType);
+        } catch (error) {
+            message.error(`Error while withdrawing "${collateralType}" collateral from VAT: ${error.message}`);
+        } finally {
+            commit('setIsDepositingOrWithdrawing', false);
+        }
+    },
 };