diff --git a/frontend/components/common/formatters/FormatCurrency.vue b/frontend/components/common/formatters/FormatCurrency.vue
index be0dbe7d3..a355ceaf5 100644
--- a/frontend/components/common/formatters/FormatCurrency.vue
+++ b/frontend/components/common/formatters/FormatCurrency.vue
@@ -1,7 +1,7 @@
 <template>
     <span>
         <span v-if="isNotANumber">Unknown</span>
-        <span v-else> {{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" /> </span>
+        <span v-else>{{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" /> </span>
         <span class="uppercase">{{ currency }}</span>
     </span>
 </template>
diff --git a/frontend/components/common/formatters/FormatPercentage.vue b/frontend/components/common/formatters/FormatPercentage.vue
index fef05c758..38fc18e2b 100644
--- a/frontend/components/common/formatters/FormatPercentage.vue
+++ b/frontend/components/common/formatters/FormatPercentage.vue
@@ -9,7 +9,7 @@ export default Vue.extend({
     name: 'FormatPercentage',
     props: {
         value: {
-            type: Number,
+            type: [Number, String],
             required: true,
         },
     },
diff --git a/frontend/components/common/other/AnimatedArrow.vue b/frontend/components/common/other/AnimatedArrow.vue
index c3388f51d..2dd8523b1 100644
--- a/frontend/components/common/other/AnimatedArrow.vue
+++ b/frontend/components/common/other/AnimatedArrow.vue
@@ -6,7 +6,7 @@
 import Vue from 'vue';
 import UpArrow from '~/assets/icons/uparrow.svg';
 
-type ArrowDirections = 'up' | 'down' | 'left' | 'right';
+export type ArrowDirections = 'up' | 'down' | 'left' | 'right';
 
 export default Vue.extend({
     components: {
diff --git a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
index bc97080f0..6c40a22a8 100644
--- a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
+++ b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
@@ -9,31 +9,31 @@
         </TextBlock>
         <div class="flex justify-between mt-4">
             <span>Current global limit</span>
-            <span v-if="!isGlobalLimitMissing"
-                ><Explain :text="format(liquidationLimits.maximumProtocolDebtDai)"
-                    >The maximum allowed amount of DAI needed to cover the debt and liquidation incentives of all
-                    active auctions. In maker terms it is called
+            <span v-if="!isGlobalLimitMissing">
+                <Explain :text="format(liquidationLimits.maximumProtocolDebtDai)">
+                    The maximum allowed amount of DAI needed to cover the debt and liquidation incentives of all active
+                    auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#dog-hole-rad"
                         target="_blank"
                         >dog.Hole</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(liquidationLimits.currentProtocolDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of all active auctions. In
+                <Explain :text="format(liquidationLimits.currentProtocolDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of all active auctions. In
                     maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#limits-on-dai-needed-to-cover-debt-and-fees-of-active-auctions"
                         target="_blank"
                         >dog.Dirt</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(debtAndIncentives)"
-                    >The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
-                    of this auction</Explain
-                >
+                <Explain :text="format(debtAndIncentives)">
+                    The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
+                    of this auction
+                </Explain>
                 = <FormatCurrency :value="globalDifference" currency="DAI"
             /></span>
             <div v-else>
@@ -43,31 +43,31 @@
         </div>
         <div class="flex justify-between">
             <span>Current {{ collateralType }} limit</span>
-            <span v-if="!isCollateralLimitMissing"
-                ><Explain :text="format(liquidationLimits.maximumCollateralDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of active
+            <span v-if="!isCollateralLimitMissing">
+                <Explain :text="format(liquidationLimits.maximumCollateralDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of active
                     {{ collateralType }} auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#dog-ilk.hole-rad"
                         target="_blank"
                         >ilk.hole</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(liquidationLimits.currentCollateralDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of active
+                <Explain :text="format(liquidationLimits.currentCollateralDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of active
                     {{ collateralType }} auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#limits-on-dai-needed-to-cover-debt-and-fees-of-active-auctions"
                         target="_blank"
                         >ilk.dirt</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(debtAndIncentives)"
-                    >The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
-                    of this auction</Explain
-                >
+                <Explain :text="format(debtAndIncentives)">
+                    The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
+                    of this auction
+                </Explain>
                 = <FormatCurrency :value="collateralDifference" currency="DAI"
             /></span>
             <div v-else>
@@ -113,6 +113,10 @@ export default Vue.extend({
             type: Object as Vue.PropType<LiquidationLimits>,
             required: true,
         },
+        collateralType: {
+            type: String,
+            required: true,
+        },
         debtDai: {
             type: BigNumber,
             required: true,
@@ -125,10 +129,6 @@ export default Vue.extend({
             type: BigNumber,
             required: true,
         },
-        collateralType: {
-            type: String,
-            required: true,
-        },
         isRefreshing: {
             type: Boolean,
             default: false,
@@ -161,7 +161,7 @@ export default Vue.extend({
             );
         },
         currentStateAndTitle(): PanelProps {
-            if (this.isGlobalLimitMissing || this.isCollateralLimitMissing) {
+            if (this.isGlobalLimitMissing || this.isCollateralLimitMissing || !this.debtAndIncentives) {
                 return {
                     name: 'inactive',
                     title: 'Current liquidation limits are unknown',
@@ -185,6 +185,14 @@ export default Vue.extend({
             };
         },
     },
+    watch: {
+        currentStateAndTitle: {
+            immediate: true,
+            handler(newCurrentStateAndTitle) {
+                this.$emit('update:isCorrect', newCurrentStateAndTitle.name === 'correct');
+            },
+        },
+    },
     methods: {
         format(value: BigNumber): string {
             return formatToAutomaticDecimalPoints(value);
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
new file mode 100644
index 000000000..1a403eebf
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
@@ -0,0 +1,78 @@
+import { storiesOf } from '@storybook/vue';
+import faker from 'faker';
+import BigNumber from 'bignumber.js';
+import VaultLiquidationTransactionFlow from '~/components/vault/VaultLiquidationTransactionFlow';
+import {
+    generateFakeLiquidationLimits,
+    generateFakeVaultLiquidatedTransaction,
+    generateFakeVaultNotLiquidatedTransaction,
+} from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiquidationTransactionFlow },
+    data: () => ({
+        vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+        liquidationLimits: generateFakeLiquidationLimits(),
+
+        isConnectingWallet: false,
+        walletAddress: undefined,
+
+        isRefreshingLimits: false,
+        isLiquidating: false,
+    }),
+    methods: {
+        connect() {
+            this.isConnectingWallet = true;
+            setTimeout(() => {
+                this.walletAddress = faker.finance.ethereumAddress();
+                this.isConnectingWallet = false;
+            }, 1000);
+        },
+        disconnect() {
+            this.isConnectingWallet = true;
+            setTimeout(() => {
+                this.walletAddress = undefined;
+                this.isConnectingWallet = false;
+            }, 1000);
+        },
+        refreshLimits() {
+            this.isRefreshingLimits = true;
+            setTimeout(() => {
+                this.liquidationLimits = {
+                    maximumProtocolDebtDai: new BigNumber(1000000),
+                    maximumCollateralDebtDai: new BigNumber(1000000),
+                    currentProtocolDebtDai: new BigNumber(0),
+                    currentCollateralDebtDai: new BigNumber(0),
+                };
+                this.isRefreshingLimits = false;
+            }, 1000);
+        },
+        liquidate() {
+            this.isLiquidating = true;
+            setTimeout(() => {
+                this.vaultTransaction = generateFakeVaultLiquidatedTransaction();
+                this.isLiquidating = false;
+            }, 1000);
+        },
+    },
+    template: `
+        <VaultLiquidationTransactionFlow 
+          v-bind="$data" 
+          @connectWallet="connect" 
+          @disconnectWallet="disconnect"
+          @refreshLimits='refreshLimits'
+          @liquidate='liquidate'
+        />`,
+};
+
+storiesOf('Vault/VaultLiquidationTransactionFlow', module)
+    .add('Default', () => ({
+        ...common,
+    }))
+    .add('Liquidated', () => ({
+        ...common,
+        data: () => ({
+            ...common.data(),
+            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
+        }),
+    }));
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
new file mode 100644
index 000000000..f0aab696b
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <TextBlock title="Vault Liquidation transaction" />
+        <Alert v-if="wasLiquidated" show-icon type="warning">
+            <div slot="message">
+                <p>This vault has been liquidated into a collateral auction</p>
+                <div class="flex justify-end mt-2">
+                    <nuxt-link :to="auctionLink">
+                        <Button> View collateral auction {{ vaultTransaction.auctionId }} </Button>
+                    </nuxt-link>
+                </div>
+            </div>
+        </Alert>
+        <VaultLiquidationTransactionTable v-if="!wasLiquidated" class="my-4" :vault-transaction="vaultTransaction" />
+        <TextBlock class="mt-4">
+            <template v-if="wasLiquidated">
+                This vault was liquidated <TimeTill :date="vaultTransaction.liqudiationDate" /> in the transaction
+                <FormatAddress :value="vaultTransaction.transactionHash" />.
+            </template>
+            <template v-else>
+                Please note, the
+                <Explain text="transaction fee" width="350px">
+                    <TransactionFeesTable
+                        :fees="{ LiquidationFee: vaultTransaction.transactionFeeLiquidationEth }"
+                        :combined-fees-eth="vaultTransaction.transactionFeeLiquidationEth"
+                    />
+                </Explain>
+                is a suggested value based on the current gas prices on the market; the “potential net profit” is also
+                approximate, since it is extrapolated from the exchange rates and may change during the transaction. If
+                you’re executing transactions with other participants at the same time, the one who pays a higher
+                transaction fee has more chances to receive the incentive. In case your transaction will be rejected,
+                it will only result in the loss of the transaction fee.
+            </template>
+        </TextBlock>
+        <div v-if="!wasLiquidated" class="my-4">
+            <WalletConnectionCheckPanel
+                :wallet-address="walletAddress"
+                :is-loading="isConnectingWallet"
+                :is-explanations-shown="isExplanationsShown"
+                :is-correct.sync="isWalletConnected"
+                @connectWallet="$emit('connectWallet')"
+                @disconnectWallet="$emit('disconnectWallet')"
+            />
+            <VaultLiquidationLimitsCheckPanel
+                :liquidation-limits="liquidationLimits"
+                :collateral-type="vaultTransaction.collateralType"
+                :debt-dai="vaultTransaction.debtDai"
+                :incentive-relative-dai="vaultTransaction.incentiveRelativeDai"
+                :incentive-constant-dai="vaultTransaction.incentiveConstantDai"
+                :is-refreshing="isRefreshingLimits"
+                :is-explanations-shown="isExplanationsShown"
+                :is-correct.sync="areLimitsNotReached"
+                @refreshLimits="$emit('refreshLimits')"
+            />
+            <VaultLiquidationPanel
+                :vault-id="vaultTransaction.id"
+                :network="vaultTransaction.network"
+                :vault-state="vaultTransaction.state"
+                :wallet-address="walletAddress"
+                :disabled="!isWalletConnected || !areLimitsNotReached"
+                :is-liquidating="isLiquidating"
+                :is-explanations-shown="isExplanationsShown"
+                @liquidate="$emit('liquidate', $event)"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Alert, Button } from 'ant-design-vue';
+import { LiquidationLimits, VaultTransaction } from 'auctions-core/dist/src/types';
+import TransactionFeesTable from '../auction/TransactionFeesTable.vue';
+import { generateLink } from '../../helpers/generateLink';
+import TimeTill from '../common/formatters/TimeTill.vue';
+import FormatAddress from '../common/formatters/FormatAddress.vue';
+import VaultLiquidationLimitsCheckPanel from '../panels/VaultLiquidationLimitsCheckPanel.vue';
+import VaultLiquidationPanel from '../panels/VaultLiquidationPanel.vue';
+import VaultLiquidationTransactionTable from './VaultLiquidationTransactionTable.vue';
+import WalletConnectionCheckPanel from '~/components/panels/WalletConnectionCheckPanel.vue';
+import TextBlock from '~/components/common/other/TextBlock.vue';
+import Explain from '~/components/common/other/Explain.vue';
+
+export default Vue.extend({
+    components: {
+        VaultLiquidationPanel,
+        VaultLiquidationLimitsCheckPanel,
+        FormatAddress,
+        TimeTill,
+        TransactionFeesTable,
+        VaultLiquidationTransactionTable,
+        TextBlock,
+        Alert,
+        Button,
+        WalletConnectionCheckPanel,
+        Explain,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransaction>,
+            required: true,
+        },
+        liquidationLimits: {
+            type: Object as Vue.PropType<LiquidationLimits>,
+            required: true,
+        },
+        walletAddress: {
+            type: String,
+            default: null,
+        },
+        isConnectingWallet: {
+            type: Boolean,
+            default: false,
+        },
+        isRefreshingLimits: {
+            type: Boolean,
+            default: false,
+        },
+        isLiquidating: {
+            type: Boolean,
+            default: false,
+        },
+        isExplanationsShown: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            isWalletConnected: false,
+            areLimitsNotReached: false,
+        };
+    },
+    computed: {
+        auctionLink(): string | undefined {
+            if (!this.vaultTransaction || !this.vaultTransaction.auctionId) {
+                return undefined;
+            }
+            const link = generateLink(this.vaultTransaction.network, 'collateral');
+            return `${link}&auction=${encodeURIComponent(this.vaultTransaction.auctionId)}`;
+        },
+        wasLiquidated(): boolean {
+            return this.vaultTransaction.state === 'liquidated';
+        },
+    },
+});
+</script>
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.stories.js b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
new file mode 100644
index 000000000..ab7a9e24b
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/vue';
+import VaultLiquidationTransactionTable from '~/components/vault/VaultLiquidationTransactionTable';
+import { generateFakeVaultNotLiquidatedTransaction } from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiquidationTransactionTable },
+    data: () => ({
+        vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+    }),
+    template: '<VaultLiquidationTransactionTable :vaultTransaction="vaultTransaction" />',
+};
+
+storiesOf('Vault/VaultLiquidationTransactionTable', module).add('Default', () => ({
+    ...common,
+}));
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.vue b/frontend/components/vault/VaultLiquidationTransactionTable.vue
new file mode 100644
index 000000000..95b19587d
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="flex flex-col space-y-1 text-gray-700 dark:text-gray-100">
+        <div class="flex justify-between">
+            <div>Proximity to liquidation threshold</div>
+            <div>
+                <span v-if="vaultTransaction.proximityToLiquidation < 0" class="text-green-500 mr-1">
+                    (Ready for liquidation)
+                </span>
+                {{ vaultTransaction.proximityToLiquidation }}%
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Next price update</div>
+            <div class="flex items-center space-x-1">
+                <AnimatedArrow v-if="getIsPriceGoingUpOrDown" :direction="getIsPriceGoingUpOrDown" class="h-3" />
+                <span>in <TimeTill :date="vaultTransaction.nextPriceChange" /></span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Debt</div>
+            <div>
+                <FormatCurrency :value="vaultTransaction.debtDai" currency="DAI" />
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Liquidation incentive relative">
+                    The relative incentive parameter represents a reward in DAI paid to the user who liquidates the
+                    vault. It is relative to vault size. In maker terms it is called
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#clipper-chip-wad"
+                        target="_blank"
+                        >clip.chip</a
+                    >.
+                </Explain>
+                <span class="opacity-50"
+                    >(~ <format-percentage :value="incentiveRelativePercentage" /> for
+                    {{ vaultTransaction.collateralType }})</span
+                >
+            </div>
+            <div>
+                <FormatCurrency :value="vaultTransaction.incentiveRelativeDai" currency="DAI" />
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Liquidation incentive constant">
+                    The constant incentive parameter represents a reward in DAI paid to the user who liquidates the
+                    vault. It is constant for all liquidations of the same collateral type. In maker terms it is called
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#clipper-tip-rad"
+                        target="_blank"
+                    >
+                        clip.tip</a
+                    >.
+                </Explain>
+            </div>
+            <div>
+                <FormatCurrency :value="vaultTransaction.incentiveConstantDai" currency="DAI" />
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Potential gross profit</div>
+            <div>+<FormatCurrency :value="vaultTransaction.grossProfitDai" currency="DAI" /></div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                Transaction fee
+                <span class="opacity-50">
+                    (~ <FormatCurrency :value="vaultTransaction.transactionFeeLiquidationEth" currency="ETH" />)
+                </span>
+            </div>
+            <div>-<FormatCurrency :value="vaultTransaction.transactionFeeLiquidationDai" currency="DAI" /></div>
+        </div>
+        <div class="flex justify-between font-bold">
+            <div>Potential net profit</div>
+            <div>
+                <FormatCurrency :value="vaultTransaction.netProfitDai" currency="DAI" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { VaultTransactionNotLiquidated } from 'auctions-core/src/types';
+import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
+import FormatPercentage from '../common/formatters/FormatPercentage.vue';
+import TimeTill from '~/components/common/formatters/TimeTill.vue';
+import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
+import Explain from '~/components/common/other/Explain.vue';
+import AnimatedArrow, { ArrowDirections } from '~/components/common/other/AnimatedArrow.vue';
+
+export default Vue.extend({
+    components: {
+        FormatPercentage,
+        TimeTill,
+        FormatCurrency,
+        Explain,
+        AnimatedArrow,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
+            required: true,
+        },
+    },
+    computed: {
+        incentiveRelativePercentage(): string {
+            return formatToAutomaticDecimalPoints(
+                this.vaultTransaction.incentiveRelativeDai.div(this.vaultTransaction.debtDai).times(100)
+            );
+        },
+        getIsPriceGoingUpOrDown(): ArrowDirections {
+            if (!this.vaultTransaction.nextUnitPrice || !this.vaultTransaction.currentUnitPrice) {
+                return undefined;
+            }
+            if (this.vaultTransaction.nextUnitPrice.isGreaterThan(this.vaultTransaction.currentUnitPrice)) {
+                return 'up';
+            }
+            return 'down';
+        },
+    },
+});
+</script>
diff --git a/frontend/helpers/generateFakeVault.ts b/frontend/helpers/generateFakeVault.ts
index 1b006741c..cb286f7e4 100644
--- a/frontend/helpers/generateFakeVault.ts
+++ b/frontend/helpers/generateFakeVault.ts
@@ -67,7 +67,7 @@ export const generateFakeVault = function (): Vault {
 };
 
 const generateFakeVaultTransactionFees = function (): VaultTransactionFees {
-    const transactionFeeLiquidationEth = new BigNumber(faker.datatype.number(0.5));
+    const transactionFeeLiquidationEth = new BigNumber(faker.datatype.float({ max: 0.5 }));
     const transactionFeeLiquidationDai = transactionFeeLiquidationEth.multipliedBy(1600);
 
     return {
@@ -120,7 +120,7 @@ export const generateFakeVaultNotLiquidatedTransaction = function (): VaultTrans
     const incentiveConstantDai = new BigNumber(faker.finance.amount());
     const incentiveCombinedDai = incentiveRelativeDai.plus(incentiveConstantDai);
 
-    const grossProfitDai = incentiveCombinedDai.minus(fakeTransactionFees.transactionFeeLiquidationDai);
+    const netProfitDai = incentiveCombinedDai.minus(fakeTransactionFees.transactionFeeLiquidationDai);
     const debtDai = new BigNumber(faker.finance.amount());
 
     return {
@@ -134,8 +134,8 @@ export const generateFakeVaultNotLiquidatedTransaction = function (): VaultTrans
         incentiveRelativeDai,
         incentiveConstantDai,
         incentiveCombinedDai,
-        grossProfitDai,
-        netProfitDai: incentiveCombinedDai,
+        grossProfitDai: incentiveCombinedDai,
+        netProfitDai,
         debtDai,
     };
 };