diff --git a/packages/page-parachains/src/Auctions/Auction.tsx b/packages/page-parachains/src/Auctions/Auction.tsx
index e9ee000a92..39460ec590 100644
--- a/packages/page-parachains/src/Auctions/Auction.tsx
+++ b/packages/page-parachains/src/Auctions/Auction.tsx
@@ -6,6 +6,7 @@ import type { AuctionIndex, BlockNumber, LeasePeriodOf } from '@polkadot/types/i
 import React, { useRef } from 'react';
 
 import { Table } from '@polkadot/react-components';
+import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import useWinningData from './useWinningData';
@@ -13,11 +14,12 @@ import WinBlock from './WinBlock';
 
 interface Props {
   auctionInfo: [LeasePeriodOf, BlockNumber] | null;
+  bestNumber?: BlockNumber;
   className?: string;
   numAuctions: AuctionIndex | null;
 }
 
-function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactElement<Props> {
+function Auction ({ auctionInfo, bestNumber, className, numAuctions }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const winningData = useWinningData();
 
@@ -27,6 +29,10 @@ function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
     [t('value'), 'number']
   ]);
 
+  const offset = auctionInfo && bestNumber && bestNumber.gt(auctionInfo[1])
+    ? bestNumber.sub(auctionInfo[1])
+    : BN_ZERO;
+
   return (
     <Table
       className={className}
@@ -36,11 +42,13 @@ function Auction ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
       }
       header={headerRef.current}
     >
-      {winningData?.map((value, count) => (
+      {offset && bestNumber && winningData?.map((value, count) => (
         <WinBlock
+          bestNumber={bestNumber}
           isEven={!!(count % 2)}
+          isLatest={count === 0}
           key={value.blockNumber.toString()}
-          latestBlockNumber={winningData[0].blockNumber}
+          offset={offset}
           value={value}
         />
       ))}
diff --git a/packages/page-parachains/src/Auctions/Summary.tsx b/packages/page-parachains/src/Auctions/Summary.tsx
index 340d674664..88cfa111bd 100644
--- a/packages/page-parachains/src/Auctions/Summary.tsx
+++ b/packages/page-parachains/src/Auctions/Summary.tsx
@@ -12,12 +12,14 @@ import { useTranslation } from '../translate';
 
 interface Props {
   auctionInfo: [LeasePeriodOf, BlockNumber] | null;
+  bestNumber?: BlockNumber;
   className?: string;
   numAuctions?: AuctionIndex | null;
 }
 
-function Summary ({ auctionInfo, className, numAuctions }: Props): React.ReactElement<Props> {
+function Summary ({ auctionInfo, bestNumber, className, numAuctions }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const [period, ending] = auctionInfo || [];
 
   return (
     <SummaryBox className={className}>
@@ -27,11 +29,17 @@ function Summary ({ auctionInfo, className, numAuctions }: Props): React.ReactEl
       {auctionInfo && (
         <section>
           <CardSummary label={t<string>('period')}>
-            {formatNumber(auctionInfo[0])}
-          </CardSummary>
-          <CardSummary label={t<string>('duration')}>
-            {formatNumber(auctionInfo[1])}
+            {formatNumber(period)}
           </CardSummary>
+          <CardSummary
+            label={t<string>('ending')}
+            progress={{
+              total: ending,
+              value: bestNumber,
+              withTime: true,
+              withTimeNumber: true
+            }}
+          />
         </section>
       )}
     </SummaryBox>
diff --git a/packages/page-parachains/src/Auctions/WinBlock.tsx b/packages/page-parachains/src/Auctions/WinBlock.tsx
index 8e9cd92816..3cff9adc12 100644
--- a/packages/page-parachains/src/Auctions/WinBlock.tsx
+++ b/packages/page-parachains/src/Auctions/WinBlock.tsx
@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-crowdloan authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { BlockNumber } from '@polkadot/types/interfaces';
 import type { Winning } from './types';
 
@@ -9,22 +10,26 @@ import React from 'react';
 import WinRange from './WinRange';
 
 interface Props {
+  bestNumber: BlockNumber;
   className?: string;
   isEven: boolean;
-  latestBlockNumber: BlockNumber;
+  isLatest: boolean;
+  offset: BN;
   value: Winning;
 }
 
-function WinBlock ({ className = '', isEven, latestBlockNumber, value: { blockNumber, winners } }: Props): React.ReactElement<Props> {
+function WinBlock ({ bestNumber, className = '', isEven, isLatest, offset, value: { blockNumber, winners } }: Props): React.ReactElement<Props> {
   return (
     <>
       {winners.map((value, index) => (
         <WinRange
+          bestNumber={bestNumber}
           blockNumber={blockNumber}
           className={`${className} ${isEven ? 'isEven' : 'isOdd'} ${index === (winners.length - 1) ? '' : 'noBorder'}`}
           isFirst={index === 0}
+          isLatest={isLatest}
           key={index}
-          latestBlockNumber={latestBlockNumber}
+          offset={offset}
           value={value}
         />
       ))}
diff --git a/packages/page-parachains/src/Auctions/WinRange.tsx b/packages/page-parachains/src/Auctions/WinRange.tsx
index dc0a073c7f..132f79d1af 100644
--- a/packages/page-parachains/src/Auctions/WinRange.tsx
+++ b/packages/page-parachains/src/Auctions/WinRange.tsx
@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-crowdloan authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { BlockNumber } from '@polkadot/types/interfaces';
 import type { WinnerData } from './types';
 
@@ -13,14 +14,16 @@ import { formatNumber } from '@polkadot/util';
 import { useTranslation } from '../translate';
 
 interface Props {
+  bestNumber: BlockNumber;
   blockNumber: BlockNumber;
   className?: string;
   isFirst: boolean;
-  latestBlockNumber: BlockNumber;
+  isLatest: boolean;
+  offset: BN;
   value: WinnerData;
 }
 
-function WinRanges ({ blockNumber, className = '', isFirst, latestBlockNumber, value: { accountId, paraId, range, value } }: Props): React.ReactElement<Props> {
+function WinRanges ({ bestNumber, blockNumber, className = '', isFirst, isLatest, offset, value: { accountId, paraId, range, value } }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
 
   return (
@@ -28,9 +31,9 @@ function WinRanges ({ blockNumber, className = '', isFirst, latestBlockNumber, v
       <td>
         {isFirst && (
           <h1>
-            {blockNumber.eq(latestBlockNumber)
+            {isLatest
               ? t<string>('latest')
-              : <>-{formatNumber(latestBlockNumber.sub(blockNumber))}</>
+              : <>#{formatNumber(bestNumber.sub(offset).iadd(blockNumber))}</>
             }
           </h1>
         )}
diff --git a/packages/page-parachains/src/Auctions/index.tsx b/packages/page-parachains/src/Auctions/index.tsx
index a408bc1feb..28c9a41a11 100644
--- a/packages/page-parachains/src/Auctions/index.tsx
+++ b/packages/page-parachains/src/Auctions/index.tsx
@@ -8,7 +8,7 @@ import type { ITuple } from '@polkadot/types/types';
 import React from 'react';
 
 import { Button } from '@polkadot/react-components';
-import { useApi, useCallMulti } from '@polkadot/react-hooks';
+import { useApi, useCall, useCallMulti } from '@polkadot/react-hooks';
 
 import Auction from './Auction';
 import Bid from './Bid';
@@ -36,6 +36,7 @@ const optionsMulti = {
 
 function Auctions ({ className }: Props): React.ReactElement<Props> {
   const { api } = useApi();
+  const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber);
   const { auctionInfo, numAuctions } = useCallMulti<QueryState>([
     api.query.auctions.auctionCounter,
     api.query.auctions.auctionInfo
@@ -45,6 +46,7 @@ function Auctions ({ className }: Props): React.ReactElement<Props> {
     <div className={className}>
       <Summary
         auctionInfo={auctionInfo}
+        bestNumber={bestNumber}
         numAuctions={numAuctions}
       />
       <Button.Group>
@@ -52,6 +54,7 @@ function Auctions ({ className }: Props): React.ReactElement<Props> {
       </Button.Group>
       <Auction
         auctionInfo={auctionInfo}
+        bestNumber={bestNumber}
         numAuctions={numAuctions}
       />
     </div>
diff --git a/packages/page-parachains/src/Auctions/useWinningData.ts b/packages/page-parachains/src/Auctions/useWinningData.ts
index 48f7850454..0983607ce6 100644
--- a/packages/page-parachains/src/Auctions/useWinningData.ts
+++ b/packages/page-parachains/src/Auctions/useWinningData.ts
@@ -7,7 +7,7 @@ import type { WinnerData, Winning } from './types';
 
 import { useEffect, useState } from 'react';
 
-import { useApi, useExtrinsicTrigger } from '@polkadot/react-hooks';
+import { useApi, useEventTrigger } from '@polkadot/react-hooks';
 
 const RANGES = [
   '0-0', '0-1', '0-2', '0-3',
@@ -52,7 +52,7 @@ function extractData (values: [StorageKey<[BlockNumber]>, Option<WinningData>][]
 export default function useWinningData (): Winning[] | null {
   const { api } = useApi();
   const [winning, setWinning] = useState<Winning[] | null>(null);
-  const trigger = useExtrinsicTrigger([api.tx.auctions.bid]);
+  const trigger = useEventTrigger([api.events.auctions.BidAccepted]);
 
   useEffect((): void => {
     trigger &&
diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx
index 971135c9c3..28fddb7df1 100644
--- a/packages/react-components/src/CardSummary.tsx
+++ b/packages/react-components/src/CardSummary.tsx
@@ -19,6 +19,7 @@ interface ProgressProps {
   total?: BN | UInt;
   value?: BN | UInt;
   withTime?: boolean;
+  withTimeNumber?: boolean;
 }
 
 interface Props {
@@ -65,7 +66,9 @@ function CardSummary ({ children, className = '', help, label, progress }: Props
           progress && !progress.hideValue && (
             <>
               {isTimed && (
-                <BlockToTime blocks={progress.total} />
+                progress.withTimeNumber
+                  ? formatNumber(progress.total)
+                  : <BlockToTime blocks={progress.total} />
               )}
               <div className={isTimed ? 'isSecondary' : 'isPrimary'}>
                 {!left || isUndefined(progress.total)
diff --git a/packages/react-components/src/Progress.tsx b/packages/react-components/src/Progress.tsx
index cefe657654..318d19bdb4 100644
--- a/packages/react-components/src/Progress.tsx
+++ b/packages/react-components/src/Progress.tsx
@@ -60,7 +60,9 @@ function Progress ({ className = '', isDisabled, size = 'normal', total, value }
         angle={
           angle <= 180
             ? '0'
-            : (angle - 180).toFixed(1)
+            : angle >= 360
+              ? '180'
+              : (angle - 180).toFixed(1)
         }
         type='second'
       />
diff --git a/packages/react-hooks/src/useBlockTime.ts b/packages/react-hooks/src/useBlockTime.ts
index 08bbeb62df..a1cd302c7d 100644
--- a/packages/react-hooks/src/useBlockTime.ts
+++ b/packages/react-hooks/src/useBlockTime.ts
@@ -29,7 +29,9 @@ export function useBlockTime (blocks = BN_ONE, apiOverride?: ApiPromise): Result
         a.consts.timestamp?.minimumPeriod.muln(2) ||
         DEFAULT_TIME
       );
-      const time = extractTime(blockTime.mul(blocks).toNumber());
+      const value = blockTime.mul(blocks).toNumber();
+      const prefix = value < 0 ? '+' : '';
+      const time = extractTime(Math.abs(value));
       const { days, hours, minutes, seconds } = time;
       const timeStr = [
         days ? (days > 1) ? t<string>('{{days}} days', { replace: { days } }) : t<string>('1 day') : null,
@@ -43,7 +45,7 @@ export function useBlockTime (blocks = BN_ONE, apiOverride?: ApiPromise): Result
 
       return [
         blockTime.toNumber(),
-        timeStr,
+        `${prefix}${timeStr}`,
         time
       ];
     },
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index 93d87ca76e..c23f1fa8b5 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -21,7 +21,7 @@ interface Props {
 function BlockToTime ({ api, blocks, children, className = '', isInline, label }: Props): React.ReactElement<Props> | null {
   const [, text] = useBlockTime(blocks, api);
 
-  if (blocks?.ltn(0)) {
+  if (!blocks || blocks.isZero()) {
     return null;
   }