Merge branch 'master' into hunicus/manual-deployment-enterprise

2023-07-19 14:19:03 +09:00
parent 6cc2f20638 741571a93a
commit 2fffd8b43c
413 changed files with 46412 additions and 22243 deletions
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { AppPreloadingStrategy } from './app.preloading-strategy'
 import { StartComponent } from './components/start/start.component';
 import { TransactionComponent } from './components/transaction/transaction.component';
 import { BlockComponent } from './components/block/block.component';
+import { ClockComponent } from './components/clock/clock.component';
 import { AddressComponent } from './components/address/address.component';
 import { MasterPageComponent } from './components/master-page/master-page.component';
 import { AboutComponent } from './components/about/about.component';
@@ -14,12 +15,14 @@ import { TrademarkPolicyComponent } from './components/trademark-policy/trademar
 import { BisqMasterPageComponent } from './components/bisq-master-page/bisq-master-page.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
 import { BlocksList } from './components/blocks-list/blocks-list.component';
+import { RbfList } from './components/rbf-list/rbf-list.component';
 import { LiquidMasterPageComponent } from './components/liquid-master-page/liquid-master-page.component';
 import { AssetGroupComponent } from './components/assets/asset-group/asset-group.component';
 import { AssetsFeaturedComponent } from './components/assets/assets-featured/assets-featured.component';
 import { AssetsComponent } from './components/assets/assets.component';
 import { AssetComponent } from './components/asset/asset.component';
 import { AssetsNavComponent } from './components/assets/assets-nav/assets-nav.component';
+import { CalculatorComponent } from './components/calculator/calculator.component';

 const browserWindow = window || {};
 // @ts-ignore
@@ -56,6 +59,10 @@ let routes: Routes = [
            path: 'blocks',
            component: BlocksList,
          },
+          {
+            path: 'rbf',
+            component: RbfList,
+          },
          {
            path: 'terms-of-service',
            component: TermsOfServiceComponent
@@ -162,6 +169,10 @@ let routes: Routes = [
            path: 'blocks',
            component: BlocksList,
          },
+          {
+            path: 'rbf',
+            component: RbfList,
+          },
          {
            path: 'terms-of-service',
            component: TermsOfServiceComponent
@@ -264,6 +275,14 @@ let routes: Routes = [
        path: 'blocks',
        component: BlocksList,
      },
+      {
+        path: 'rbf',
+        component: RbfList,
+      },
+      {
+        path: 'tools/calculator',
+        component: CalculatorComponent
+      },
      {
        path: 'terms-of-service',
        component: TermsOfServiceComponent
@@ -342,6 +361,18 @@ let routes: Routes = [
      },
    ],
  },
+  {
+    path: 'clock',
+    redirectTo: 'clock/mempool/0'
+  },
+  {
+    path: 'clock/:mode',
+    redirectTo: 'clock/:mode/0'
+  },
+  {
+    path: 'clock/:mode/:index',
+    component: ClockComponent,
+  },
  {
    path: 'status',
    data: { networks: ['bitcoin', 'liquid'] },
--- a/frontend/src/app/app.constants.ts
+++ b/frontend/src/app/app.constants.ts
@@ -29,6 +29,14 @@ export const mempoolFeeColors = [
  'ba3243',
  'b92b48',
  'b9254b',
+  'b8214d',
+  'b71d4f',
+  'b61951',
+  'b41453',
+  'b30e55',
+  'b10857',
+  'b00259',
+  'ae005b',
 ];

 export const chartColors = [
@@ -69,6 +77,7 @@ export const chartColors = [
  "#3E2723",
  "#212121",
  "#263238",
+  "#801313",
 ];

 export const poolsColor = {
@@ -139,26 +148,87 @@ export const specialBlocks = {
  '0': {
    labelEvent: 'Genesis',
    labelEventCompleted: 'The Genesis of Bitcoin',
+    networks: ['mainnet', 'testnet'],
  },
  '210000': {
    labelEvent: 'Bitcoin\'s 1st Halving',
    labelEventCompleted: 'Block Subsidy has halved to 25 BTC per block',
+    networks: ['mainnet', 'testnet'],
  },
  '420000': {
    labelEvent: 'Bitcoin\'s 2nd Halving',
    labelEventCompleted: 'Block Subsidy has halved to 12.5 BTC per block',
+    networks: ['mainnet', 'testnet'],
  },
  '630000': {
    labelEvent: 'Bitcoin\'s 3rd Halving',
    labelEventCompleted: 'Block Subsidy has halved to 6.25 BTC per block',
+    networks: ['mainnet', 'testnet'],
  },
  '709632': {
    labelEvent: 'Taproot 🌱 activation',
    labelEventCompleted: 'Taproot 🌱 has been activated!',
+    networks: ['mainnet'],
  },
  '840000': {
    labelEvent: 'Bitcoin\'s 4th Halving',
    labelEventCompleted: 'Block Subsidy has halved to 3.125 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '1050000': {
+    labelEvent: 'Bitcoin\'s 5th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 1.5625 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '1260000': {
+    labelEvent: 'Bitcoin\'s 6th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.78125 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '1470000': {
+    labelEvent: 'Bitcoin\'s 7th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.390625 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '1680000': {
+    labelEvent: 'Bitcoin\'s 8th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.1953125 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '1890000': {
+    labelEvent: 'Bitcoin\'s 9th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.09765625 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '2100000': {
+    labelEvent: 'Bitcoin\'s 10th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.04882812 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '2310000': {
+    labelEvent: 'Bitcoin\'s 11th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.02441406 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '2520000': {
+    labelEvent: 'Bitcoin\'s 12th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.01220703 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '2730000': {
+    labelEvent: 'Bitcoin\'s 13th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.00610351 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '2940000': {
+    labelEvent: 'Bitcoin\'s 14th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.00305175 BTC per block',
+    networks: ['mainnet', 'testnet'],
+  },
+  '3150000': {
+    labelEvent: 'Bitcoin\'s 15th Halving',
+    labelEventCompleted: 'Block Subsidy has halved to 0.00152587 BTC per block',
+    networks: ['mainnet', 'testnet'],
  }
 };

--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
+import { BrowserModule } from '@angular/platform-browser';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -48,8 +48,7 @@ const providers = [
    AppComponent,
  ],
  imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    BrowserTransferStateModule,
+    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
--- a/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
+++ b/frontend/src/app/bisq/bisq-blocks/bisq-blocks.component.scss
@@ -1,11 +1,6 @@
 .pagination-container {
  float: none;
-  margin-bottom: 200px;
  @media(min-width: 400px){
    float: right;
  }
 }
-
-.container-xl {
-    padding-bottom: 110px;
-}
--- a/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
+++ b/frontend/src/app/bisq/bisq-main-dashboard/bisq-main-dashboard.component.html
@@ -36,7 +36,7 @@
          <h5 class="card-title">US Dollar - BTC/USD</h5>
          <div class="chart-container">
            <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">
-              <app-lightweight-charts [height]="300" [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="2"></app-lightweight-charts>      
+              <app-lightweight-charts [height]="300" [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="2"></app-lightweight-charts>
            </ng-container>
          </div>
        </div>
@@ -84,7 +84,7 @@
                    </ng-template>
                  </td>
                  <td>{{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}</td>
-                </tr> 
+                </tr>
              </tbody>
            </table>
          </div>
@@ -105,14 +105,6 @@
  </ng-container>
  </div>

-  <app-language-selector></app-language-selector>
-
-  <div class="text-small text-center mt-3">
-    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-    |
-    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-  </div>
-
 </div>

 <ng-template #loadingTmpl>
@@ -129,4 +121,4 @@

 <ng-template #loading>
  <div class="skeleton-loader shorter"></div>
-</ng-template>
+</ng-template>
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.html
@@ -15,11 +15,9 @@
      </span>
      <span class="grow"></span>
      <div class="container-buttons">
-        <button *ngIf="(latestBlock$ | async) as latestBlock" type="button" class="btn btn-sm btn-success float-right">
-          <ng-container *ngTemplateOutlet="latestBlock.height - bisqTx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - bisqTx.blockHeight + 1}"></ng-container>
-          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-        </button>
+        <div *ngIf="(latestBlock$ | async) as latestBlock">
+          <app-confirmations [chainTip]="latestBlock?.height" [height]="bisqTx.blockHeight" [hideUnconfirmed]="true" buttonClass="float-right"></app-confirmations>
+        </div>
      </div>
    </div>
    
@@ -66,9 +64,10 @@
                    {{ bisqTx.burntFee / 100 | number: '1.2-2' }} <span class="symbol">BSQ</span> <span class="fiat"><app-bsq-amount [bsq]="bisqTx.burntFee" [forceFiat]="true" [green]="true"></app-bsq-amount></span>
                </tr>
                <tr>
-                  <td i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *only-vsize i18n="transaction.fee-per-vbyte|Transaction fee">Fee per vByte</td>
+                  <td *only-weight i18n="transaction.fee-per-wu|Transaction fee">Fee per weight unit</td>
                  <td *ngIf="!isLoadingTx; else loadingTxFee">
-                    {{ tx.fee / (tx.weight / 4) | feeRounding }} <span class="symbol">sat/vB</span>
+                    <app-fee-rate [fee]="tx.fee" [weight]="tx.weight"></app-fee-rate>
                    &nbsp;
                    <app-tx-fee-rating [tx]="tx"></app-tx-fee-rating>
                  </td>
--- a/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts
+++ b/frontend/src/app/bisq/bisq-transaction/bisq-transaction.component.ts
@@ -112,7 +112,7 @@ export class BisqTransactionComponent implements OnInit, OnDestroy {
      this.error = error;
    });

-    this.latestBlock$ = this.stateService.blocks$.pipe(map((([block]) => block)));
+    this.latestBlock$ = this.stateService.blocks$.pipe(map((blocks) => blocks[0]));

    this.stateService.bsqPrice$
      .subscribe((bsqPrice) => {
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.html
@@ -70,11 +70,7 @@

    <div class="btn-container">
      <span *ngIf="showConfirmations && latestBlock$ | async as latestBlock">
-        <button type="button" class="btn btn-sm btn-success mt-2">
-          <ng-container *ngTemplateOutlet="latestBlock.height - tx.blockHeight + 1 == 1 ? confirmationSingular : confirmationPlural; context: {$implicit: latestBlock.height - tx.blockHeight + 1}"></ng-container>
-          <ng-template #confirmationSingular let-i i18n="shared.confirmation-count.singular|Transaction singular confirmation count">{{ i }} confirmation</ng-template>
-          <ng-template #confirmationPlural let-i i18n="shared.confirmation-count.plural|Transaction plural confirmation count">{{ i }} confirmations</ng-template>
-        </button>
+        <app-confirmations [chainTip]="latestBlock?.height" [height]="tx.blockHeight" [hideUnconfirmed]="true" buttonClass="mt-2"></app-confirmations>
        &nbsp;
      </span>
      <button type="button" class="btn btn-sm btn-primary mt-2" (click)="switchCurrency()">
--- a/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.ts
+++ b/frontend/src/app/bisq/bisq-transfers/bisq-transfers.component.ts
@@ -27,7 +27,7 @@ export class BisqTransfersComponent implements OnInit, OnChanges {
  }

  ngOnInit() {
-    this.latestBlock$ = this.stateService.blocks$.pipe(map(([block]) => block));
+    this.latestBlock$ = this.stateService.blocks$.pipe(map((blocks) => blocks[0]));
  }

  ngOnChanges() {
--- a/frontend/src/app/bitcoin.utils.ts
+++ b/frontend/src/app/bitcoin.utils.ts
@@ -254,3 +254,30 @@ export function selectPowerOfTen(val: number): { divider: number, unit: string }

  return selectedPowerOfTen;
 }
+
+const featureActivation = {
+  mainnet: {
+    rbf: 399701,
+    segwit: 477120,
+    taproot: 709632,
+  },
+  testnet: {
+    rbf: 720255,
+    segwit: 872730,
+    taproot: 2032291,
+  },
+  signet: {
+    rbf: 0,
+    segwit: 0,
+    taproot: 0,
+  },
+};
+
+export function isFeatureActive(network: string, height: number, feature: 'rbf' | 'segwit' | 'taproot'): boolean {
+  const activationHeight = featureActivation[network || 'mainnet']?.[feature];
+  if (activationHeight != null) {
+    return height >= activationHeight;
+  } else {
+    return false;
+  }
+}
--- a/frontend/src/app/components/about/about.component.html
+++ b/frontend/src/app/components/about/about.component.html
@@ -1,7 +1,7 @@
 <div class="container-xl about-page">

  <div class="intro">
-    <span style="margin-left: auto; margin-right: -20px; margin-bottom: -20px">&trade;</span>
+    <span style="margin-left: auto; margin-right: -20px; margin-bottom: -20px">&reg;</span>
    <img class="logo" src="/resources/mempool-logo-bigger.png" />
    <div class="version">
      v{{ packetJsonVersion }} [<a href="https://github.com/mempool/mempool/commit/{{ frontendGitCommitHash }}">{{ frontendGitCommitHash }}</a>]
@@ -13,7 +13,23 @@
    <p i18n>Our mempool and blockchain explorer for the Bitcoin community, focusing on the transaction fee market and multi-layer ecosystem, completely self-hosted without any trusted third-parties.</p>
  </div>

-  <video src="/resources/mempool-promo.mp4" poster="/resources/mempool-promo.jpg" controls loop playsinline [autoplay]="true" [muted]="true"></video>
+  <video #promoVideo (click)="unmutePromoVideo()" (touchstart)="unmutePromoVideo()" src="/resources/promo-video/mempool-promo.mp4" poster="/resources/promo-video/mempool-promo.jpg" controls loop playsinline [autoplay]="true" [muted]="true">
+    <track label="English" kind="captions" srclang="en" src="/resources/promo-video/en.vtt" [attr.default]="showSubtitles('en') ? '' : null">
+    <track label="日本語" kind="captions" srclang="ja" src="/resources/promo-video/ja.vtt" [attr.default]="showSubtitles('ja') ? '' : null">
+    <track label="中文" kind="captions" srclang="zh" src="/resources/promo-video/zh.vtt" [attr.default]="showSubtitles('zh') ? '' : null">
+    <track label="Svenska" kind="captions" srclang="sv" src="/resources/promo-video/sv.vtt" [attr.default]="showSubtitles('sv') ? '' : null">
+    <track label="Čeština" kind="captions" srclang="cs" src="/resources/promo-video/cs.vtt" [attr.default]="showSubtitles('cs') ? '' : null">
+    <track label="Suomi" kind="captions" srclang="fi" src="/resources/promo-video/fi.vtt" [attr.default]="showSubtitles('fi') ? '' : null">
+    <track label="Français" kind="captions" srclang="fr" src="/resources/promo-video/fr.vtt" [attr.default]="showSubtitles('fr') ? '' : null">
+    <track label="Deutsch" kind="captions" srclang="de" src="/resources/promo-video/de.vtt" [attr.default]="showSubtitles('de') ? '' : null">
+    <track label="Italiano" kind="captions" srclang="it" src="/resources/promo-video/it.vtt" [attr.default]="showSubtitles('it') ? '' : null">
+    <track label="Lietuvių" kind="captions" srclang="lt" src="/resources/promo-video/lt.vtt" [attr.default]="showSubtitles('lt') ? '' : null">
+    <track label="Norsk" kind="captions" srclang="nb" src="/resources/promo-video/nb.vtt" [attr.default]="showSubtitles('nb') ? '' : null">
+    <track label="فارسی" kind="captions" srclang="fa" src="/resources/promo-video/fa.vtt" [attr.default]="showSubtitles('fa') ? '' : null">
+    <track label="Polski" kind="captions" srclang="pl" src="/resources/promo-video/pl.vtt" [attr.default]="showSubtitles('pl') ? '' : null">
+    <track label="Română" kind="captions" srclang="ro" src="/resources/promo-video/ro.vtt" [attr.default]="showSubtitles('ro') ? '' : null">
+    <track label="Português" kind="captions" srclang="pt" src="/resources/promo-video/pt.vtt" [attr.default]="showSubtitles('pt') ? '' : null">
+  </video>

  <div class="enterprise-sponsor" id="enterprise-sponsors">
    <h3 i18n="about.sponsors.enterprise.withRocket">Enterprise Sponsors 🚀</h3>
@@ -91,22 +107,7 @@
        <span>Blockstream</span>
      </a>
      <a href="https://unchained.com/" target="_blank" title="Unchained">
-        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 216 216" class="image" style="enable-background:new 0 0 216 216;">
-        <style type="text/css">
-          .ucst0{fill:#002248;}
-          .ucst1{opacity:0.5;fill:#FFFFFF;}
-          .ucst2{fill:#FFFFFF;}
-          .ucst3{opacity:0.75;fill:#FFFFFF;}
-        </style>
-        <rect class="ucst0" width="216" height="216"/>
-        <g>
-          <g>
-            <path class="ucst1" d="M108,39.5V108l59.3,34.2V73.8L108,39.5z M126.9,95.4c0,2,1.1,3.8,2.8,4.8l27.9,16l0,10.8L125,108.2c-4.6-2.6-7.4-7.5-7.4-12.8l-0.1-22.7c0-1.9,0.5-3.7,1.4-5.3c0.9-1.5,2.2-2.9,3.8-3.8c3.3-1.9,7.2-1.9,10.5,0l24.5,14.2l-0.2,10.7l-29-16.8c-0.5-0.3-0.9-0.2-1.2,0c-0.3,0.2-0.6,0.5-0.6,1L126.9,95.4z"/>
-            <path class="ucst2" d="M108,39.5L48.7,73.8v68.5L108,108V39.5z M99.7,93.1c0,5.3-2.8,10.2-7.4,12.8l-19.6,11.4c-1.7,1-3.5,1.4-5.3,1.5c-1.8,0-3.6-0.5-5.2-1.4c-3.3-1.9-5.3-5.3-5.3-9.1V80l9.4-5.2l-0.1,33.5c0,0.6,0.3,0.9,0.6,1c0.3,0.2,0.7,0.3,1.2,0l19.6-11.4c1.7-1,2.8-2.8,2.8-4.8L90.3,61l9.4-5.4L99.7,93.1z"/>
-            <path class="ucst3" d="M108,108l-59.3,34.2l59.3,34.2l59.3-34.2L108,108z M133.8,152l-24.5,14.2l-9.2-5.5l29.1-16.7c0.5-0.3,0.6-0.7,0.6-1c0-0.3-0.1-0.7-0.6-1l-19.7-11.2c-1.7-1-3.8-1-5.5,0l-27.8,16.1l-9.4-5.4l32.6-18.7c4.6-2.6,10.2-2.6,14.8,0l19.7,11.2c1.7,0.9,3,2.3,3.9,3.9c0.9,1.5,1.4,3.3,1.4,5.2C139.1,146.7,137.1,150.1,133.8,152z"/>
-          </g>
-        </g>
-        </svg>
+        <svg id="Layer_1" width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156.68 156.68"><defs><style>.cls-unchained-1{fill:#fff;}</style></defs><path class="cls-unchained-1" d="m78.34,0C35.07,0,0,35.07,0,78.34s35.07,78.34,78.34,78.34,78.34-35.07,78.34-78.34S121.6,0,78.34,0ZM20.23,109.5c-4.99-9.28-7.81-19.89-7.81-31.16C12.42,41.93,41.93,12.42,78.34,12.42c33.15,0,60.58,24.46,65.23,56.32h-37.48c-45.29,0-71.19,20.05-85.85,40.76Zm58.11,34.76c-12.42,0-24.04-3.44-33.96-9.41,3.94-8.85,9.11-18.7,15.84-28.9,20.99-31.8,52.2-31.19,76.49-31.19h7.45c.06,1.18.1,2.38.1,3.58,0,36.41-29.51,65.92-65.92,65.92Z"/><path class="cls-unchained-1" d="m91.98,42.4l-3.62-1.18c-3.94-1.29-7.03-4.38-8.32-8.32l-1.18-3.63c-.13-.39-.68-.39-.81,0l-1.18,3.63c-1.29,3.94-4.38,7.03-8.32,8.32l-3.62,1.18c-.39.13-.39.68,0,.81l3.62,1.18c3.94,1.29,7.03,4.38,8.32,8.32l1.18,3.63c.13.39.68.39.81,0l1.18-3.63c1.29-3.94,4.38-7.03,8.32-8.32l3.62-1.18c.39-.13.39-.68,0-.81Z"/></svg>
        <span>Unchained</span>
      </a>
      <a href="https://gemini.com/" target="_blank" title="Gemini">
@@ -118,6 +119,18 @@
        </svg>
        <span>Gemini</span>
      </a>
+      <a href="https://bullbitcoin.com/" target="_blank" title="Bull Bitcoin">
+        <svg aria-hidden="true" class="image" viewBox="0 -5 40 40" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="#e21924">
+            <path d="M21.92 14.59a1.18 1.18 0 0 0-1.18-1.18h-1.82v2.36h1.82a1.18 1.18 0 0 0 1.18-1.18ZM21 17.07h-2v2.45h2a1.23 1.23 0 1 0 0-2.45Z"/>
+            <path d="M36.43 0 35 5.59l-8 2.64-2.43-3.61-4.74 2.05-4.74-2.05-2.43 3.61-8-2.64L3.21 0 0 7.86l7.89 5.86-5.56 4 5.56 1.12 2.69-.49v3.17l3.59 4.38.68 3.19 5 2.87 5-2.87.68-3.19 3.59-4.38v-3.17l2.7.49 5.56-1.12-5.56-4 7.89-5.86zM24.69 18.45a2.5 2.5 0 0 1-2.5 2.5h-1.11v1.56h-1.26V21h-.9v1.56h-1.27V21H15.3v-1.42h.64a.9.9 0 0 0 .9-.9V14.3a.901.901 0 0 0-.9-.91h-.64V12h2.35v-1.5h1.27V12h.9v-1.5h1.26V12h.68A2.269 2.269 0 0 1 24 14.31a2.25 2.25 0 0 1-.92 1.82 2.52 2.52 0 0 1 1.58 2.32z"/>
+          </g>
+          <defs>
+            <clipPath id="a"><path fill="#fff" d="M0 0h160v32H0z"/></clipPath>
+          </defs>
+        </svg>
+        <span>Bull Bitcoin</span>
+      </a>
      <a href="https://exodus.com/" target="_blank" title="Exodus">
        <svg width="80" height="80" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="250" cy="250" r="250" fill="#1F2033"/>
@@ -160,6 +173,21 @@
        </svg>
        <span>Exodus</span>
      </a>
+      <a href="https://www.luminex.io" target="_blank" title="Luminex">
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="66.95" height="80" viewBox="0 0 300.43 385" style="padding-top: 10px;">
+          <defs>
+            <style>
+              .lum-cls-1 {
+                fill: #f2ea25;
+              }
+            </style>
+          </defs>
+          <path class="lum-cls-1" d="m309.02,90.04c0,49.65-38.73,90.04-95.34,90.04s-95.34-40.39-95.34-90.04S153.77,0,213.69,0c56.28,0,95.34,40.39,95.34,90.04Zm-63.56,0c0-20.52-14.23-37.07-31.78-37.07s-31.78,16.55-31.78,37.07,14.23,37.07,31.78,37.07,31.78-16.55,31.78-37.07Z"/>
+          <path class="lum-cls-1" d="m311.87,372.67h-66.34l-31.84-47.76-31.84,47.76h-66.34l58.38-90.22-53.07-79.61h66.34l26.54,42.46,26.53-42.46h66.34l-53.07,79.61,58.38,90.22Z"/>
+          <rect class="lum-cls-1" width="60.69" height="372.67"/>
+        </svg>
+        <span>Luminex</span>
+      </a>
    </div>
  </div>

@@ -185,14 +213,14 @@
        <span>Umbrel</span>
      </a>
      <a href="https://github.com/rootzoll/raspiblitz" target="_blank" title="RaspiBlitz">
-        <img class="image" src="/resources/profile/raspiblitz.jpg" />
+        <img class="image" src="/resources/profile/raspiblitz.svg" />
        <span>RaspiBlitz</span>
      </a>
-      <a href="https://github.com/mynodebtc/mynode" target="_blank" title="MyNode">
-        <img class="image" src="/resources/profile/mynodebtc.jpg" />
-        <span>MyNode</span>
+      <a href="https://github.com/mynodebtc/mynode" target="_blank" title="myNode">
+        <img class="image" src="/resources/profile/mynodebtc.png" />
+        <span>myNode</span>
      </a>
-      <a href="https://github.com/RoninDojo/RoninDojo" target="_blank" title="RoninDojo">
+      <a href="https://code.samourai.io/ronindojo/RoninDojo" target="_blank" title="RoninDojo">
        <img class="image" src="/resources/profile/ronindojo.png" />
        <span>RoninDojo</span>
      </a>
@@ -204,12 +232,12 @@
        <img class="image" src="/resources/profile/nix-bitcoin.png" />
        <span>NixOS</span>
      </a>
-      <a href="https://github.com/Start9Labs/embassy-os" target="_blank" title="EmbassyOS">
+      <a href="https://github.com/Start9Labs/start-os" target="_blank" title="StartOS">
        <img class="image" src="/resources/profile/start9.png" />
-        <span>EmbassyOS</span>
+        <span>StartOS</span>
      </a>
      <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" title="BTCPay Server">
-        <img class="image" src="/resources/profile/btcpayserver.svg" />
+        <img class="image not-rounded" src="/resources/profile/btcpayserver.svg" />
        <span>BTCPay</span>
      </a>
      <a href="https://github.com/bisq-network/bisq" target="_blank" title="Bisq">
@@ -237,7 +265,7 @@
        <span>Sparrow</span>
      </a>
      <a href="https://github.com/ACINQ/phoenix" target="_blank" title="Phoenix Wallet by ACINQ">
-        <img class="image" src="/resources/profile/phoenix.jpg" />
+        <img class="image not-rounded" src="/resources/profile/phoenix.svg" />
        <span>Phoenix</span>
      </a>
      <a href="https://github.com/lnbits/lnbits-legend" target="_blank" title="LNbits">
@@ -268,6 +296,26 @@
        <img class="image" src="/resources/profile/nunchuk.svg" />
        <span>Nunchuk</span>
      </a>
+      <a href="https://github.com/bitcoin-s/bitcoin-s" target="_blank" title="bitcoin-s">
+        <img class="image" src="/resources/profile/bitcoin-s.svg" />
+        <span>bitcoin-s</span>
+      </a>
+      <a href="https://github.com/EdgeApp" target="_blank" title="Edge">
+        <img class="image not-rounded" src="/resources/profile/edge.svg" />
+        <span>Edge</span>
+      </a>
+      <a href="https://github.com/GaloyMoney" target="_blank" title="Galoy">
+        <img class="image" src="/resources/profile/galoy.svg" />
+        <span>Galoy</span>
+      </a>
+      <a href="https://github.com/BoltzExchange" target="_blank" title="Boltz">
+        <img class="image" src="/resources/profile/boltz.svg" />
+        <span>Boltz</span>
+      </a>
+      <a href="https://github.com/MutinyWallet" target="_blank" title="Mutiny">
+        <img class="image not-rounded" src="/resources/profile/mutiny.svg" />
+        <span>Mutiny</span>
+      </a>
    </div>
  </div>

@@ -363,7 +411,7 @@
      Trademark Notice<br>
    </div>
    <p>
-      The Mempool Open Source Project&trade;, mempool.space&trade;, the mempool logo&trade;, the mempool.space logos&trade;, the mempool square logo&trade;, and the mempool blocks logo&trade; are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
+      The Mempool Open Source Project&trade;, mempool.space&trade;, the mempool logo&reg;, the mempool.space logos&trade;, the mempool square logo&reg;, and the mempool blocks logo&trade; are either registered trademarks or trademarks of Mempool Space K.K in Japan, the United States, and/or other countries.
    </p>
    <p>
      While our software is available under an open source software license, the copyright license does not include an implied right or license to use our trademarks. See our <a href="https://mempool.space/trademark-policy">Trademark Policy and Guidelines</a> for more details, published on &lt;https://mempool.space/trademark-policy&gt;.
@@ -372,33 +420,14 @@

  <div class="footer-links">
    <a href="/3rdpartylicenses.txt">Third-party Licenses</a>
-    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-    <div class="social-icons">
-      <a target="_blank" href="https://github.com/mempool/mempool">
-        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
-      </a>
-      <a target="_blank" href="https://twitter.com/mempool">
-        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
-      </a>
-      <a target="_blank" href="https://matrix.to/#/#mempool:bitcoin.kyoto">
-        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="matrix" class="svg-inline--fa fa-matrix fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792"><path fill="currentColor" d="M40.467 163.152v1465.696H145.92V1664H0V128h145.92v35.152zm450.757 464.64v74.14h2.069c19.79-28.356 43.717-50.215 71.483-65.575 27.765-15.656 59.963-23.336 96-23.336 34.56 0 66.165 6.795 94.818 20.086 28.652 13.293 50.216 37.22 65.28 70.893 16.246-23.926 38.4-45.194 66.166-63.507 27.766-18.314 60.848-27.472 98.954-27.472 28.948 0 55.828 3.545 80.64 10.635 24.812 7.088 45.785 18.314 63.508 33.968 17.722 15.656 31.31 35.742 41.354 60.85 9.747 25.107 14.768 55.236 14.768 90.683v366.573h-150.35V865.28c0-18.314-.59-35.741-2.068-51.987-1.476-16.247-5.316-30.426-11.52-42.24-6.499-12.112-15.656-21.563-28.062-28.653-12.405-7.088-29.242-10.634-50.214-10.634-21.268 0-38.4 4.135-51.397 12.112-12.997 8.27-23.336 18.608-30.72 31.901-7.386 12.997-12.407 27.765-14.77 44.602-2.363 16.542-3.84 33.379-3.84 50.216v305.133H692.971v-307.2c0-16.247-.294-32.197-1.18-48.149-.591-15.95-3.84-30.424-9.157-44.011-5.317-13.293-14.178-24.223-26.585-32.197-12.406-7.976-30.425-12.112-54.646-12.112-7.088 0-16.542 1.478-28.062 4.726-11.52 3.25-23.04 9.157-33.968 18.02-10.93 8.86-20.383 21.563-28.063 38.103-7.68 16.543-11.52 38.4-11.52 65.28v317.834H349.44V627.792zm1004.309 1001.056V163.152H1390.08V128H1536v1536h-145.92v-35.152z"/></svg>
-      </a>
-      <a target="_blank" href="https://youtube.com/@mempool">
-        <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="youtube" class="svg-inline--fa fa-youtube fa-w-16 fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
-      </a>
-      <a target="_blank" href="https://bitcointv.com/c/mempool/videos" class="bitcointv">
-        <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 440 440"><path d="M225.57,2.08l-.69-.45a4.22,4.22,0,0,0-5.72,1.23L182.33,46.09a4,4,0,0,0,.88,5.81l9.38,6.38L173.48,97.49a4.22,4.22,0,0,0,2.45,4.19s3.55.7,4.53-1l41.92-40.56a3.62,3.62,0,0,0-1.51-5.1l-10.55-6.12L227.44,6.79A4.26,4.26,0,0,0,225.57,2.08Z" fill="currentColor"></path><path d="M118.52,401.83c-62.51,0-113.37-51-113.37-113.67V214.68C5.15,152,56,101,118.52,101H342.08a24.82,24.82,0,0,1,24.76,24.83V377a24.81,24.81,0,0,1-24.76,24.82Z"></path><path d="M342.08,105.18a20.65,20.65,0,0,1,20.61,20.66V377a20.66,20.66,0,0,1-20.61,20.66H118.52C58.3,397.67,9.31,348.55,9.31,288.16V214.68c0-60.38,49-109.5,109.21-109.5H342.08m0-8.34H118.52C53.62,96.84,1,149.6,1,214.68v73.48C1,353.24,53.62,406,118.52,406H342.08A29,29,0,0,0,371,377V125.84a29,29,0,0,0-28.92-29Z" fill="currentColor"></path><path fill="currentColor" d="M344.69,346.23A25.84,25.84,0,1,0,335,369.87l-10.22-10.2a11.69,11.69,0,1,1,4.77-5.12l10.31,10.28A25.84,25.84,0,0,0,344.69,346.23Z"></path><path fill="currentColor" d="M315.82,257.61a25.67,25.67,0,0,0-12.53,5.22L315,274.49a9.58,9.58,0,0,1,2.11-.73A9.72,9.72,0,1,1,309.4,283a9.4,9.4,0,0,1,.75-3.41L298.4,267.84a25.77,25.77,0,1,0,17.42-10.23Z"></path><path fill="currentColor" d="M313,214a7.76,7.76,0,1,1,1.41,10.91,7.62,7.62,0,0,1-2.19-2.69l-18.67-.14a25.94,25.94,0,1,0,.05-7l18.64.14A7.4,7.4,0,0,1,313,214Z"></path><path fill="currentColor" d="M341.2,144.08h-6.32c-1.67,0-3.61,1.87-3.61,4.29s1.94,4.29,3.61,4.29h6.32c1.67,0,3.61-1.87,3.61-4.29S342.87,144.08,341.2,144.08Z"></path><path fill="currentColor" d="M301.75,144.08h-6.44c-1.67,0-3.61,1.87-3.61,4.29s1.94,4.29,3.61,4.29h6.44c1.67,0,3.61-1.87,3.61-4.29S303.42,144.08,301.75,144.08Z"></path><path fill="currentColor" d="M321.77,144.08h-7c-1.67,0-3.62,1.87-3.62,4.29s1.95,4.29,3.62,4.29h7c1.67,0,3.62-1.87,3.62-4.29S323.44,144.08,321.77,144.08Z"></path><ellipse fill="currentColor" cx="295.97" cy="127.61" rx="4.27" ry="4.29"></ellipse><path fill="currentColor" d="M340.54,131.9a4.29,4.29,0,1,0-4.27-4.29A4.28,4.28,0,0,0,340.54,131.9Z"></path><path fill="currentColor" d="M318.26,131.9a4.29,4.29,0,1,0-4.27-4.29A4.29,4.29,0,0,0,318.26,131.9Z"></path><ellipse fill="currentColor" cx="295.97" cy="169.13" rx="4.27" ry="4.29"></ellipse><path fill="currentColor" d="M340.54,164.84a4.3,4.3,0,1,0,4.27,4.29A4.29,4.29,0,0,0,340.54,164.84Z"></path><path fill="currentColor" d="M318.26,164.84a4.3,4.3,0,1,0,4.28,4.29A4.29,4.29,0,0,0,318.26,164.84Z"></path><path d="M108.62,256.87c8.36-1,7.68-7.76,3.14-17-3.64-7.4-9.74-16.39-15.75-25.36-14.23-21.23-27.69-42.23-5.35-41.07,19.55,1,42.9,18.63,68.22,36.74,31.1,22.24,65.16,45.21,98.81,39.11a151.19,151.19,0,0,1,20-2.37V221a92,92,0,0,0-91.91-92.16H124.33A92,92,0,0,0,32.42,221v17.59c17.71,3.81,31,9.94,43.8,14.15C86.6,256.16,96.69,258.31,108.62,256.87Z"></path><path d="M273.37,310.79c-35-15.26-76.67-32.1-104-23.59-3.15,1-5,2.3-6,3.85-3.35,5.31,4.67,13.57,14.89,22.17,7.17,6,15.36,12.21,21.44,17.64,11.47,10.26,15.35,17.84-9.89,16.62-29.75-1.44-49.18-13.75-71.18-24l-.29-.14a165.84,165.84,0,0,0-22.93-8.91c-15.74-4.67-34.22-6.79-58.51-3.28A91.93,91.93,0,0,0,124.33,375h61.45A92,92,0,0,0,273.37,310.79Z"></path><path fill="currentColor" d="M257.69,249.31C224,255.41,190,232.44,158.88,210.2c-25.32-18.11-48.67-35.72-68.22-36.74C68.32,172.3,81.78,193.3,96,214.53c6,9,12.11,18,15.75,25.36,4.54,9.22,5.22,16-3.14,17-11.93,1.44-22-.71-32.4-4.13-12.8-4.21-26.09-10.34-43.8-14.15v44.26c0,1.26.14,2.48.19,3.72a91.8,91.8,0,0,0,2.9,19.62c.43,1.67.84,3.34,1.37,5,24.29-3.51,42.77-1.39,58.51,3.28a165.84,165.84,0,0,1,22.93,8.91c.39-.12.76-.26,1.14-.39l-.85.53c22,10.25,41.43,22.56,71.18,24,25.24,1.22,21.36-6.36,9.89-16.62-6.08-5.43-14.27-11.61-21.44-17.64-10.22-8.6-18.24-16.86-14.89-22.17,1-1.55,2.87-2.87,6-3.85,27.33-8.51,69,8.33,104,23.59.32-1,.56-2.05.84-3.07a92.33,92.33,0,0,0,3.48-24.87V246.94A151.19,151.19,0,0,0,257.69,249.31Z"></path><path fill="currentColor" d="M192,137a78,78,0,0,1,77.78,78v73.91a78,78,0,0,1-77.78,78H118.51a78,78,0,0,1-77.78-78V215a78,78,0,0,1,77.78-78H192m0-8.33H118.51A86.21,86.21,0,0,0,32.42,215v73.91a86.21,86.21,0,0,0,86.09,86.33H192a86.21,86.21,0,0,0,86.09-86.33V215A86.21,86.21,0,0,0,192,128.64Z"></path></svg>
-      </a>
-    </div>
-  </div>
-
-  <div class="footer-version" *ngIf="officialMempoolSpace">
-    {{ (backendInfo$ | async)?.hostname }} (v{{ (backendInfo$ | async )?.version }}) [<a href="https://github.com/mempool/mempool/commit/{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}">{{ (backendInfo$ | async )?.gitCommit | slice:0:8 }}</a>]
  </div>

+  <br>
 </div>

+
 <ng-template #loadingSponsors>
  <br>
  <div class="spinner-border text-light"></div>
 </ng-template>
+
--- a/frontend/src/app/components/about/about.component.scss
+++ b/frontend/src/app/components/about/about.component.scss
@@ -11,6 +11,12 @@
    line-height: 32px;
  }

+  .image.not-rounded {
+    border-radius: 0;
+    width: 60px;
+    height: 60px;
+  }
+
  .intro {
    margin: 25px auto 30px;
    width: 250px;
@@ -36,9 +42,11 @@

  video {
    width: 640px;
-    height: 360px;
    max-width: 90%;
    margin-top: 0;
+    @media (min-width: 768px) {
+      height: 360px;
+    }
  }

  .social-icons {
@@ -51,9 +59,13 @@
  .enterprise-sponsor,
  .community-integrations-sponsor,
  .maintainers {
-    margin-top: 68px;
+    margin-top: 30px;
    margin-bottom: 68px;
    scroll-margin: 30px;
+
+    @media (min-width: 768px) {
+      margin-top: 68px;
+    }
  }

  .maintainers {
@@ -222,6 +234,11 @@
 }

 .community-integrations-sponsor {
-  max-width: 965px;
+  max-width: 1110px;
  margin: auto;
 }
+
+.community-integrations-sponsor img.image {
+  width: 64px;
+  height: 64px;
+}
--- a/frontend/src/app/components/about/about.component.ts
+++ b/frontend/src/app/components/about/about.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
 import { WebsocketService } from '../../services/websocket.service';
 import { SeoService } from '../../services/seo.service';
 import { StateService } from '../../services/state.service';
@@ -17,6 +17,7 @@ import { DOCUMENT } from '@angular/common';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AboutComponent implements OnInit {
+  @ViewChild('promoVideo') promoVideo: ElementRef;
  backendInfo$: Observable<IBackendInfo>;
  sponsors$: Observable<any>;
  translators$: Observable<ITranslators>;
@@ -68,7 +69,7 @@ export class AboutComponent implements OnInit {
      tap(() => this.goToAnchor())
    );
  }
-  
+
  ngAfterViewInit() {
    this.goToAnchor();
  }
@@ -90,4 +91,12 @@ export class AboutComponent implements OnInit {
      this.showNavigateToSponsor = true;
    }
  }
+
+  showSubtitles(language): boolean {
+    return ( this.locale.startsWith( language ) && !this.locale.startsWith('en') );
+  }
+
+  unmutePromoVideo(): void {
+    this.promoVideo.nativeElement.muted = false;
+  }
 }
--- a/frontend/src/app/components/address/address-preview.component.html
+++ b/frontend/src/app/components/address/address-preview.component.html
@@ -3,7 +3,7 @@
    <span i18n="shared.address">Address</span>
  </app-preview-title>
  <div class="row">
-    <div class="col-md">
+    <div class="col-md table-col">
      <div class="row d-flex justify-content-between">
        <div class="title-wrapper">
          <h1 class="title"><app-truncate [text]="addressString"></app-truncate></h1>
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@@ -20,6 +20,11 @@
  margin-right: 15px;
 }

+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .table {
  font-size: 32px;
  margin-top: 48px;
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -207,7 +207,7 @@ export class AddressComponent implements OnInit, OnDestroy {
    }
    this.isLoadingTransactions = true;
    this.retryLoadMore = false;
-    this.electrsApiService.getAddressTransactionsFromHash$(this.address.address, this.lastTransactionTxId)
+    this.electrsApiService.getAddressTransactions$(this.address.address, this.lastTransactionTxId)
      .subscribe((transactions: Transaction[]) => {
        this.lastTransactionTxId = transactions[transactions.length - 1].txid;
        this.loadedConfirmedTxCount += transactions.length;
@@ -217,6 +217,10 @@ export class AddressComponent implements OnInit, OnDestroy {
      (error) => {
        this.isLoadingTransactions = false;
        this.retryLoadMore = true;
+        // In the unlikely event of the txid wasn't found in the mempool anymore and we must reload the page.
+        if (error.status === 422) {
+          window.location.reload();
+        }
      });
  }

--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.html
@@ -40,8 +40,8 @@
  </a>

  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images name="bisq" width="20" height="20" viewBox="0 0 75 75" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images>
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" name="bisq" width="20" height="20" viewBox="0 0 80 80"></app-svg-images>
    </button>
    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '/')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
@@ -82,6 +82,10 @@

 <br />

-<router-outlet></router-outlet>
+<main>
+  <router-outlet></router-outlet>
+</main>
+
+<app-global-footer *ngIf="footerVisible"></app-global-footer>

 <br>
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.scss
@@ -17,6 +17,12 @@ li.nav-item {
  padding-right: 10px;
 }

+@media (max-width: 992px) {
+  footer > .container-fluid {
+    padding-bottom: 35px;
+  }
+}
+
@media (min-width: 992px) {
  .navbar {
    padding: 0rem 2rem;
@@ -141,3 +147,18 @@ nav {
 .navbar-brand {
  margin-right: 5px;
 }
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
+}
--- a/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
+++ b/frontend/src/app/components/bisq-master-page/bisq-master-page.component.ts
@@ -17,6 +17,7 @@ export class BisqMasterPageComponent implements OnInit {
  isMobile = window.innerWidth <= 767.98;
  urlLanguage: string;
  networkPaths: { [network: string]: string };
+  footerVisible = true;

  constructor(
    private stateService: StateService,
@@ -31,6 +32,11 @@ export class BisqMasterPageComponent implements OnInit {
    this.urlLanguage = this.languageService.getLanguageForUrl();
    this.navigationService.subnetPaths.subscribe((paths) => {
      this.networkPaths = paths;
+      if (paths.mainnet.indexOf('docs') > -1) {
+        this.footerVisible = false;
+      } else {
+        this.footerVisible = true;
+      }
    });
  }

--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, NgZone, OnInit } from '@angular/core';
 import { EChartsOption } from 'echarts';
-import { Observable } from 'rxjs';
+import { Observable, Subscription, combineLatest } from 'rxjs';
 import { map, share, startWith, switchMap, tap } from 'rxjs/operators';
 import { ApiService } from '../../services/api.service';
 import { SeoService } from '../../services/seo.service';
@@ -76,10 +76,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
        }
      });

-    this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges
-      .pipe(
-        startWith(this.radioGroupForm.controls.dateSpan.value),
-        switchMap((timespan) => {
+    this.statsObservable$ = combineLatest([
+        this.radioGroupForm.get('dateSpan').valueChanges.pipe(startWith(this.radioGroupForm.controls.dateSpan.value)),
+        this.stateService.rateUnits$
+    ]).pipe(
+        switchMap(([timespan, rateUnits]) => {
          this.storageService.setValue('miningWindowPreference', timespan);
          this.timespan = timespan;
          this.isLoading = true;
@@ -135,8 +136,8 @@ export class BlockFeeRatesGraphComponent implements OnInit {

                this.prepareChartOptions({
                  legends: legends,
-                  series: series,
-                });
+                  series: series
+                }, rateUnits === 'wu');
                this.isLoading = false;
              }),
              map((response) => {
@@ -150,7 +151,7 @@ export class BlockFeeRatesGraphComponent implements OnInit {
      );
  }

-  prepareChartOptions(data) {
+  prepareChartOptions(data, weightMode) {
    this.chartOptions = {
      color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'],
      animation: false,
@@ -181,7 +182,11 @@ export class BlockFeeRatesGraphComponent implements OnInit {
          let tooltip = `<b style="color: white; margin-left: 2px">${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}</b><br>`;

          for (const rate of data.reverse()) {
-            tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
+            if (weightMode) {
+              tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1] / 4} sats/WU<br>`;
+            } else {
+              tooltip += `${rate.marker} ${rate.seriesName}: ${rate.data[1]} sats/vByte<br>`;
+            }
          }

          if (['24h', '3d'].includes(this.timespan)) {
@@ -231,9 +236,12 @@ export class BlockFeeRatesGraphComponent implements OnInit {
        axisLabel: {
          color: 'rgb(110, 112, 121)',
          formatter: (val) => {
+            if (weightMode) {
+              val /= 4;
+            }
            const selectedPowerOfTen: any = selectPowerOfTen(val);
            const newVal = Math.round(val / selectedPowerOfTen.divider);
-            return `${newVal}${selectedPowerOfTen.unit} s/vB`;
+            return `${newVal}${selectedPowerOfTen.unit} s/${weightMode ? 'WU': 'vB'}`;
          },
        },
        splitLine: {
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,18 +21,20 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
-  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
  @media (max-width: 992px) {
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
@@ -3,7 +3,7 @@
 <div class="full-container">
  <div class="card-header mb-0 mb-md-4">
    <div class="d-flex d-md-block align-items-baseline">
-      <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
+      <span i18n="mining.blocks-health">Block Health</span>
      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
      </button>
@@ -12,34 +12,34 @@
    <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
      <div class="btn-group btn-group-toggle" name="radioBasic" [class]="{'disabled': isLoading}">
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 144" [class.active]="radioGroupForm.get('dateSpan').value === '24h'">
-          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 24h
+          <input type="radio" [value]="'24h'" fragment="24h" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 24h
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 432" [class.active]="radioGroupForm.get('dateSpan').value === '3d'">
-          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 3D
+          <input type="radio" [value]="'3d'" fragment="3d" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 3D
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 1008" [class.active]="radioGroupForm.get('dateSpan').value === '1w'">
-          <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 1W
+          <input type="radio" [value]="'1w'" fragment="1w" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 1W
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 4320" [class.active]="radioGroupForm.get('dateSpan').value === '1m'">
-          <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 1M
+          <input type="radio" [value]="'1m'" fragment="1m" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 1M
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 12960" [class.active]="radioGroupForm.get('dateSpan').value === '3m'">
-          <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 3M
+          <input type="radio" [value]="'3m'" fragment="3m" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 3M
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 25920" [class.active]="radioGroupForm.get('dateSpan').value === '6m'">
-          <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 6M
+          <input type="radio" [value]="'6m'" fragment="6m" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 6M
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 52560" [class.active]="radioGroupForm.get('dateSpan').value === '1y'">
-          <input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 1Y
+          <input type="radio" [value]="'1y'" fragment="1y" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 1Y
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 105120" [class.active]="radioGroupForm.get('dateSpan').value === '2y'">
-          <input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 2Y
+          <input type="radio" [value]="'2y'" fragment="2y" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 2Y
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount >= 157680" [class.active]="radioGroupForm.get('dateSpan').value === '3y'">
-          <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> 3Y
+          <input type="radio" [value]="'3y'" fragment="3y" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> 3Y
        </label>
        <label class="btn btn-primary btn-sm" *ngIf="stats.blockCount > 157680" [class.active]="radioGroupForm.get('dateSpan').value === 'all'">
-          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" formControlName="dateSpan"> ALL
+          <input type="radio" [value]="'all'" fragment="all" [routerLink]="['/graphs/mining/block-health' | relativeUrl]" formControlName="dateSpan"> ALL
        </label>
      </div>
    </form>
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.ts
@@ -13,9 +13,9 @@ import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pi
 import { StateService } from '../../services/state.service';

@Component({
-  selector: 'app-block-prediction-graph',
-  templateUrl: './block-prediction-graph.component.html',
-  styleUrls: ['./block-prediction-graph.component.scss'],
+  selector: 'app-block-health-graph',
+  templateUrl: './block-health-graph.component.html',
+  styleUrls: ['./block-health-graph.component.scss'],
  styles: [`
    .loadingGraphs {
      position: absolute;
@@ -26,7 +26,7 @@ import { StateService } from '../../services/state.service';
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlockPredictionGraphComponent implements OnInit {
+export class BlockHealthGraphComponent implements OnInit {
  @Input() right: number | string = 45;
  @Input() left: number | string = 75;

@@ -60,7 +60,7 @@ export class BlockPredictionGraphComponent implements OnInit {
  }

  ngOnInit(): void {
-    this.seoService.setTitle($localize`:@@d7d5fcf50179ad70c938491c517efb82de2c8146:Block Prediction Accuracy`);
+    this.seoService.setTitle($localize`:@@d7d5fcf50179ad70c938491c517efb82de2c8146:Block Health`);
    this.miningWindowPreference = '24h';//this.miningService.getDefaultTimespan('24h');
    this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference });
    this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference);
@@ -80,7 +80,7 @@ export class BlockPredictionGraphComponent implements OnInit {
          this.storageService.setValue('miningWindowPreference', timespan);
          this.timespan = timespan;
          this.isLoading = true;
-          return this.apiService.getHistoricalBlockPrediction$(timespan)
+          return this.apiService.getHistoricalBlocksHealth$(timespan)
            .pipe(
              tap((response) => {
                this.prepareChartOptions(response.body);
@@ -163,7 +163,7 @@ export class BlockPredictionGraphComponent implements OnInit {
          hideOverlap: true,
          padding: [0, 5],
        },
-        data: data.map(prediction => prediction[0])
+        data: data.map(health => health[0])
      },
      yAxis: data.length === 0 ? undefined : [
        {
@@ -186,12 +186,12 @@ export class BlockPredictionGraphComponent implements OnInit {
      series: data.length === 0 ? undefined : [
        {
          zlevel: 0,
-          name: $localize`Match rate`,
-          data: data.map(prediction => ({
-            value: prediction[2],
-            block: prediction[1],
+          name: $localize`Health`,
+          data: data.map(health => ({
+            value: health[2],
+            block: health[1],
            itemStyle: {
-              color: this.getPredictionColor(prediction[2])
+              color: this.getHealthColor(health[2])
            }
          })),
          type: 'bar',
@@ -257,7 +257,7 @@ export class BlockPredictionGraphComponent implements OnInit {
    return 'rgb(' + gradient.red + ',' + gradient.green + ',' + gradient.blue + ')';
  }

-  getPredictionColor(matchRate) {
+  getHealthColor(matchRate) {
    return this.colorGradient(
      Math.pow((100 - matchRate) / 100, 0.5),
      {red: 67, green: 171, blue: 71},
@@ -294,7 +294,7 @@ export class BlockPredictionGraphComponent implements OnInit {
    download(this.chartInstance.getDataURL({
      pixelRatio: 2,
      excludeComponents: ['dataZoom'],
-    }), `block-fees-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
+    }), `block-health-${this.timespan}-${Math.round(now.getTime() / 1000)}.svg`);
    // @ts-ignore
    this.chartOptions.grid.bottom = prevBottom;
    this.chartOptions.backgroundColor = 'none';
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.html
@@ -1,15 +1,17 @@
-<div class="block-overview-graph">
-  <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
-  <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
-    <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
-    <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
-  </div>

-  <app-block-overview-tooltip
-    [tx]="selectedTx || hoverTx"
-    [cursorPosition]="tooltipPosition"
-    [clickable]="!!selectedTx"
-    [auditEnabled]="auditHighlighting"
-    [blockConversion]="blockConversion"
-  ></app-block-overview-tooltip>
+<div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'">
+  <div class="block-overview-graph">
+    <canvas class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas>
+    <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable">
+      <div *ngIf="isLoading" class="spinner-border ml-3 loading" role="status"></div>
+      <div *ngIf="!isLoading && unavailable" class="ml-3" i18n="block.not-available">not available</div>
+    </div>
+    <app-block-overview-tooltip
+      [tx]="selectedTx || hoverTx"
+      [cursorPosition]="tooltipPosition"
+      [clickable]="!!selectedTx"
+      [auditEnabled]="auditHighlighting"
+      [blockConversion]="blockConversion"
+    ></app-block-overview-tooltip>
+  </div>
 </div>
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.scss
@@ -6,8 +6,16 @@
  display: flex;
  justify-content: center;
  align-items: center;
+  grid-column: 1/-1;
 }

+.grid-align {
+  position: relative;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 75px);
+  justify-content: center;
+}

 .block-overview-canvas {
  position: absolute;
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@@ -6,6 +6,8 @@ import TxSprite from './tx-sprite';
 import TxView from './tx-view';
 import { Position } from './sprite-types';
 import { Price } from '../../services/price.service';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-block-overview-graph',
@@ -23,7 +25,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  @Input() unavailable: boolean = false;
  @Input() auditHighlighting: boolean = false;
  @Input() blockConversion: Price;
-  @Output() txClickEvent = new EventEmitter<TransactionStripped>();
+  @Output() txClickEvent = new EventEmitter<{ tx: TransactionStripped, keyModifier: boolean}>();
  @Output() txHoverEvent = new EventEmitter<string>();
  @Output() readyEvent = new EventEmitter();

@@ -43,16 +45,25 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  scene: BlockScene;
  hoverTx: TxView | void;
  selectedTx: TxView | void;
+  highlightTx: TxView | void;
  mirrorTx: TxView | void;
  tooltipPosition: Position;

  readyNextFrame = false;

+  searchText: string;
+  searchSubscription: Subscription;
+
  constructor(
    readonly ngZone: NgZone,
    readonly elRef: ElementRef,
+    private stateService: StateService,
  ) {
    this.vertexArray = new FastVertexArray(512, TxSprite.dataSize);
+    this.searchSubscription = this.stateService.searchText$.subscribe((text) => {
+      this.searchText = text;
+      this.updateSearchHighlight();
+    });
  }

  ngAfterViewInit(): void {
@@ -108,6 +119,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      this.scene.setup(transactions);
      this.readyNextFrame = true;
      this.start();
+      this.updateSearchHighlight();
    }
  }

@@ -115,6 +127,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (this.scene) {
      this.scene.enter(transactions, direction);
      this.start();
+      this.updateSearchHighlight();
    }
  }

@@ -122,6 +135,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (this.scene) {
      this.scene.exit(direction);
      this.start();
+      this.updateSearchHighlight();
    }
  }

@@ -129,13 +143,15 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (this.scene) {
      this.scene.replace(transactions || [], direction, sort);
      this.start();
+      this.updateSearchHighlight();
    }
  }

-  update(add: TransactionStripped[], remove: string[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
    if (this.scene) {
-      this.scene.update(add, remove, direction, resetLayout);
+      this.scene.update(add, remove, change, direction, resetLayout);
      this.start();
+      this.updateSearchHighlight();
    }
  }

@@ -201,7 +217,8 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
      this.start();
    } else {
      this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,
-        blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray, highlighting: this.auditHighlighting });
+        blockLimit: this.blockLimit, orientation: this.orientation, flip: this.flip, vertexArray: this.vertexArray,
+        highlighting: this.auditHighlighting });
      this.start();
    }
  }
@@ -326,7 +343,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    if (event.target === this.canvas.nativeElement && event.pointerType === 'touch') {
      this.setPreviewTx(event.offsetX, event.offsetY, true);
    } else if (event.target === this.canvas.nativeElement) {
-      this.onTxClick(event.offsetX, event.offsetY);
+      const keyMod = event.shiftKey || event.ctrlKey || event.metaKey;
+      const middleClick = event.which === 2 || event.button === 1;
+      this.onTxClick(event.offsetX, event.offsetY, keyMod || middleClick);
    }
  }

@@ -402,6 +421,19 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    }
  }

+  updateSearchHighlight(): void {
+    if (this.highlightTx && this.highlightTx.txid !== this.searchText && this.scene) {
+      this.scene.setHighlight(this.highlightTx, false);
+      this.start();
+    } else if (this.scene?.txs && this.searchText && this.searchText.length === 64) {
+      this.highlightTx = this.scene.txs[this.searchText];
+      if (this.highlightTx) {
+        this.scene.setHighlight(this.highlightTx, true);
+        this.start();
+      }
+    }
+  }
+
  setHighlightingEnabled(enabled: boolean): void {
    if (this.scene) {
      this.scene.setHighlighting(enabled);
@@ -409,12 +441,12 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
    }
  }

-  onTxClick(cssX: number, cssY: number) {
+  onTxClick(cssX: number, cssY: number, keyModifier: boolean = false) {
    const x = cssX * window.devicePixelRatio;
    const y = cssY * window.devicePixelRatio;
    const selected = this.scene.getTxAt({ x, y });
    if (selected && selected.txid) {
-      this.txClickEvent.emit(selected);
+      this.txClickEvent.emit({ tx: selected, keyModifier });
    }
  }

--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@@ -34,7 +34,7 @@ export default class BlockScene {
    this.width = width;
    this.height = height;
    this.gridSize = this.width / this.gridWidth;
-    this.unitPadding =  width / 500;
+    this.unitPadding =  Math.max(1, Math.floor(this.gridSize / 5));
    this.unitWidth = this.gridSize - (this.unitPadding * 2);

    this.dirty = true;
@@ -150,7 +150,7 @@ export default class BlockScene {
    this.updateAll(startTime, 200, direction);
  }

-  update(add: TransactionStripped[], remove: string[], direction: string = 'left', resetLayout: boolean = false): void {
+  update(add: TransactionStripped[], remove: string[], change: { txid: string, rate: number | undefined }[], direction: string = 'left', resetLayout: boolean = false): void {
    const startTime = performance.now();
    const removed = this.removeBatch(remove, startTime, direction);

@@ -172,6 +172,15 @@ export default class BlockScene {
        this.place(tx);
      });
    } else {
+      // update effective rates
+      change.forEach(tx => {
+        if (this.txs[tx.txid]) {
+          this.txs[tx.txid].feerate = tx.rate || (this.txs[tx.txid].fee / this.txs[tx.txid].vsize);
+          this.txs[tx.txid].rate = tx.rate;
+          this.txs[tx.txid].dirty = true;
+        }
+      });
+
      // try to insert new txs directly
      const remaining = [];
      add.map(tx => new TxView(tx, this)).sort(feeRateDescending).forEach(tx => {
@@ -200,6 +209,10 @@ export default class BlockScene {
    this.animateUntil = Math.max(this.animateUntil, tx.setHover(value));
  }

+  setHighlight(tx: TxView, value: boolean): void {
+    this.animateUntil = Math.max(this.animateUntil, tx.setHighlight(value));
+  }
+
  private init({ width, height, resolution, blockLimit, orientation, flip, vertexArray, highlighting }:
      { width: number, height: number, resolution: number, blockLimit: number,
        orientation: string, flip: boolean, vertexArray: FastVertexArray, highlighting: boolean }
@@ -409,7 +422,7 @@ export default class BlockScene {

  // calculates and returns the size of the tx in multiples of the grid size
  private txSize(tx: TxView): number {
-    const scale = Math.max(1, Math.round(Math.sqrt(tx.vsize / this.vbytesPerUnit)));
+    const scale = Math.max(1, Math.round(Math.sqrt(1.1 * tx.vsize / this.vbytesPerUnit)));
    return Math.min(this.gridWidth, Math.max(1, scale)); // bound between 1 and the max displayable size (just in case!)
  }

--- a/frontend/src/app/components/block-overview-graph/tx-view.ts
+++ b/frontend/src/app/components/block-overview-graph/tx-view.ts
@@ -7,6 +7,7 @@ import BlockScene from './block-scene';

 const hoverTransitionTime = 300;
 const defaultHoverColor = hexToColor('1bd8f4');
+const defaultHighlightColor = hexToColor('800080');

 const feeColors = mempoolFeeColors.map(hexToColor);
 const auditFeeColors = feeColors.map((color) => darken(desaturate(color, 0.3), 0.9));
@@ -36,15 +37,18 @@ export default class TxView implements TransactionStripped {
  vsize: number;
  value: number;
  feerate: number;
-  status?: 'found' | 'missing' | 'fresh' | 'added' | 'censored' | 'selected';
+  rate?: number;
+  status?: 'found' | 'missing' | 'sigop' | 'fresh' | 'freshcpfp' | 'added' | 'censored' | 'selected' | 'fullrbf';
  context?: 'projected' | 'actual';
  scene?: BlockScene;

  initialised: boolean;
  vertexArray: FastVertexArray;
  hover: boolean;
+  highlight: boolean;
  sprite: TxSprite;
  hoverColor: Color | void;
+  highlightColor: Color | void;

  screenPosition: Square;
  gridPosition: Square | void;
@@ -58,7 +62,8 @@ export default class TxView implements TransactionStripped {
    this.fee = tx.fee;
    this.vsize = tx.vsize;
    this.value = tx.value;
-    this.feerate = tx.fee / tx.vsize;
+    this.feerate = tx.rate || (tx.fee / tx.vsize); // sort by effective fee rate where available
+    this.rate = tx.rate;
    this.status = tx.status;
    this.initialised = false;
    this.vertexArray = scene.vertexArray;
@@ -148,8 +153,40 @@ export default class TxView implements TransactionStripped {
    } else {
      this.hover = false;
      this.hoverColor = null;
-      if (this.sprite) {
-        this.sprite.resume(hoverTransitionTime);
+      if (this.highlight) {
+        this.setHighlight(true, this.highlightColor);
+      } else {
+        if (this.sprite) {
+          this.sprite.resume(hoverTransitionTime);
+        }
+      }
+    }
+    this.dirty = false;
+    return performance.now() + hoverTransitionTime;
+  }
+
+  // Temporarily override the tx color
+  // returns minimum transition end time
+  setHighlight(highlightOn: boolean, color: Color | void = defaultHighlightColor): number {
+    if (highlightOn) {
+      this.highlight = true;
+      this.highlightColor = color;
+
+      this.sprite.update({
+        ...this.highlightColor,
+        duration: hoverTransitionTime,
+        adjust: false,
+        temp: true
+      });
+    } else {
+      this.highlight = false;
+      this.highlightColor = null;
+      if (this.hover) {
+        this.setHover(true, this.hoverColor);
+      } else {
+        if (this.sprite) {
+          this.sprite.resume(hoverTransitionTime);
+        }
      }
    }
    this.dirty = false;
@@ -157,7 +194,8 @@ export default class TxView implements TransactionStripped {
  }

  getColor(): Color {
-    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, this.feerate) < feeLvl) - 1;
+    const rate = this.fee / this.vsize; // color by simple single-tx fee rate
+    const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
    const feeLevelColor = feeColors[feeLevelIndex] || feeColors[mempoolFeeColors.length - 1];
    // Normal mode
    if (!this.scene?.highlightingEnabled) {
@@ -168,8 +206,11 @@ export default class TxView implements TransactionStripped {
      case 'censored':
        return auditColors.censored;
      case 'missing':
+      case 'sigop':
+      case 'fullrbf':
        return marginalFeeColors[feeLevelIndex] || marginalFeeColors[mempoolFeeColors.length - 1];
      case 'fresh':
+      case 'freshcpfp':
        return auditColors.missing;
      case 'added':
        return auditColors.added;
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
@@ -25,22 +25,35 @@
      <tr>
        <td class="td-width" i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
        <td>
-          {{ feeRate | feeRounding }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+          <app-fee-rate [fee]="feeRate"></app-fee-rate>
        </td>
      </tr>
-      <tr>
+      <tr *ngIf="effectiveRate && effectiveRate !== feeRate">
+        <td class="td-width" i18n="transaction.effective-fee-rate|Effective transaction fee rate">Effective fee rate</td>
+        <td>
+          <app-fee-rate [fee]="effectiveRate"></app-fee-rate>
+        </td>
+      </tr>
+      <tr *only-vsize>
        <td class="td-width" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</td>
        <td [innerHTML]="'&lrm;' + (vsize | vbytes: 2)"></td>
      </tr>
+      <tr *only-weight>
+        <td class="td-width" i18n="transaction.weight|Transaction Weight">Weight</td>
+        <td [innerHTML]="'&lrm;' + ((vsize * 4) | wuBytes: 2)"></td>
+      </tr>
      <tr *ngIf="auditEnabled && tx && tx.status && tx.status.length">
        <td class="td-width" i18n="transaction.audit-status">Audit status</td>
        <ng-container [ngSwitch]="tx?.status">
          <td *ngSwitchCase="'found'"><span class="badge badge-success" i18n="transaction.audit.match">Match</span></td>
          <td *ngSwitchCase="'censored'"><span class="badge badge-danger" i18n="transaction.audit.removed">Removed</span></td>
          <td *ngSwitchCase="'missing'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
+          <td *ngSwitchCase="'sigop'"><span class="badge badge-warning" i18n="transaction.audit.sigop">High sigop count</span></td>
          <td *ngSwitchCase="'fresh'"><span class="badge badge-warning" i18n="transaction.audit.recently-broadcasted">Recently broadcasted</span></td>
+          <td *ngSwitchCase="'freshcpfp'"><span class="badge badge-warning" i18n="transaction.audit.recently-cpfped">Recently CPFP'd</span></td>
          <td *ngSwitchCase="'added'"><span class="badge badge-warning" i18n="transaction.audit.added">Added</span></td>
          <td *ngSwitchCase="'selected'"><span class="badge badge-warning" i18n="transaction.audit.marginal">Marginal fee rate</span></td>
+          <td *ngSwitchCase="'fullrbf'"><span class="badge badge-warning" i18n="transaction.audit.fullrbf">Full RBF</span></td>
        </ng-container>
      </tr>
    </tbody>
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
@@ -20,6 +20,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
  value = 0;
  vsize = 1;
  feeRate = 0;
+  effectiveRate;

  tooltipPosition: Position = { x: 0, y: 0 };

@@ -51,6 +52,7 @@ export class BlockOverviewTooltipComponent implements OnChanges {
      this.value = tx.value || 0;
      this.vsize = tx.vsize || 1;
      this.feeRate = this.fee / this.vsize;
+      this.effectiveRate = tx.rate;
    }
  }
 }
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,17 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
-  width: 100%;
+  display: flex;
+  flex: 1;
  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -3,7 +3,7 @@
    <span i18n="shared.block-title">Block</span>
  </app-preview-title>
  <div class="row">
-    <div class="col-sm">
+    <div class="col-sm table-col">
      <div class="row">
        <div class="block-titles">
          <h1 class="title">
@@ -34,7 +34,7 @@
          </tr>
          <tr *ngIf="block?.extras?.medianFee != undefined">
            <td class="td-width" i18n="block.median-fee">Median fee</td>
-            <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></td>
+            <td>~<app-fee-rate [fee]="block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate></td>
          </tr>
          <ng-template [ngIf]="fees !== undefined">
            <tr>
@@ -71,7 +71,7 @@
      <app-block-overview-graph
        #blockGraph
        [isLoading]="false"
-        [resolution]="75"
+        [resolution]="80"
        [blockLimit]="stateService.blockVSize"
        [orientation]="'top'"
        [flip]="false"
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/frontend/src/app/components/block/block-preview.component.scss
@@ -44,11 +44,16 @@
  }
 }

+.table-col {
+  max-width: calc(100% - 470px);
+  overflow: hidden;
+}
+
 .chart-container {
  flex-grow: 0;
  flex-shrink: 0;
-  width: 470px;
-  min-width: 470px;
+  width: 480px;
+  min-width: 480px;
  padding: 0;
  margin-right: 15px;
 }
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -1,6 +1,10 @@
 <div class="container-xl" (window:resize)="onResize($event)">

  <div class="title-block" [class.time-ltr]="timeLtr" id="block">
+    <div *ngIf="block?.stale" class="alert alert-mempool" role="alert">
+      <span i18n="block.reorged|Block reorg" class="alert-text">This block does not belong to the main chain, it has been replaced by:</span>
+      <app-truncate [text]="block.canonical" [lastChars]="12" [link]="['/block/' | relativeUrl, block.canonical]" [maxWidth]="480"></app-truncate>
+    </div>
    <h1>
      <ng-container *ngIf="blockHeight == null || blockHeight > 0; else genesis" i18n="shared.block-title">Block</ng-container>
      <ng-template #genesis i18n="@@2303359202781425764">Genesis</ng-template>
@@ -23,6 +27,8 @@

    <div class="grow"></div>

+    <button *ngIf="block?.stale" type="button" class="btn btn-sm btn-danger container-button" i18n="block.stale|Stale block state">Stale</button>
+
    <button [routerLink]="['/' | relativeUrl]" class="btn btn-sm">&#10005;</button>
  </div>

@@ -41,7 +47,7 @@
              <tr>
                <td i18n="block.timestamp">Timestamp</td>
                <td>
-                  <app-timestamp [unixTime]="block.timestamp"></app-timestamp>
+                  <app-timestamp [unixTime]="block.timestamp" [precision]="1" minUnit="minute"></app-timestamp>
                </td>
              </tr>
              <tr>
@@ -63,7 +69,7 @@
                    *ngIf="blockAudit?.matchRate != null; else nullHealth"
                  >{{ blockAudit?.matchRate }}%</span>
                  <ng-template #nullHealth>
-                    <ng-container *ngIf="!isLoadingAudit; else loadingHealth">
+                    <ng-container *ngIf="!isLoadingOverview; else loadingHealth">
                      <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
                    </ng-container>
                  </ng-template>
@@ -94,7 +100,7 @@
          </tbody>
        </table>
      </div>
-      <div class="col-sm">
+      <div class="col-sm" [class.graph-col]="webGlEnabled && !showAudit">
        <table class="table table-borderless table-striped" *ngIf="!isMobile && !(webGlEnabled && !showAudit)">
          <tbody>
            <ng-container *ngTemplateOutlet="restOfTable"></ng-container>
@@ -104,7 +110,7 @@
          <app-block-overview-graph
            #blockGraphActual
            [isLoading]="isLoadingOverview"
-            [resolution]="75"
+            [resolution]="86"
            [blockLimit]="stateService.blockVSize"
            [orientation]="'top'"
            [flip]="false"
@@ -121,11 +127,11 @@
    <ng-container *ngIf="!isLoadingBlock; else loadingRest">
      <tr *ngIf="network !== 'liquid' && network !== 'liquidtestnet'">
        <td i18n="mempool-block.fee-span">Fee span</td>
-        <td><span>{{ block.extras.feeRange[1] | number:'1.0-0' }} - {{ block.extras.feeRange[block.extras.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
+        <td><app-fee-rate [fee]="block?.extras?.minFee" [showUnit]="false" rounding="1.0-0"></app-fee-rate> - <app-fee-rate [fee]="block?.extras?.maxFee" rounding="1.0-0"></app-fee-rate></td>
      </tr>
      <tr *ngIf="block?.extras?.medianFee != undefined">
        <td class="td-width" i18n="block.median-fee">Median fee</td>
-        <td>~{{ block?.extras?.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
+        <td>~<app-fee-rate [fee]="block?.extras?.medianFee" rounding="1.0-0"></app-fee-rate>
          <span class="fiat">
            <app-fiat [blockConversion]="blockConversion" [value]="block?.extras?.medianFee * 140" digitsInfo="1.2-2"
              i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes"
@@ -221,20 +227,26 @@
      <div class="col-sm">
        <h3 class="block-subtitle" *ngIf="!isMobile"><ng-container i18n="block.expected-block">Expected Block</ng-container> <span class="badge badge-pill badge-warning beta" i18n="beta">beta</span></h3>
        <div class="block-graph-wrapper">
-          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="75"
+          <app-block-overview-graph #blockGraphProjected [isLoading]="isLoadingOverview" [resolution]="86"
            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" [auditHighlighting]="showAudit"
            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="!isMobile && !showAudit"></app-block-overview-graph>
          <ng-container *ngIf="!isMobile || mode !== 'actual'; else emptyBlockInfo"></ng-container>
        </div>
+        <ng-container *ngIf="network !== 'liquid'">
+          <ng-container *ngTemplateOutlet="isMobile && mode === 'actual' ? actualDetails : expectedDetails"></ng-container>
+        </ng-container>
      </div>
      <div class="col-sm" *ngIf="!isMobile">
        <h3 class="block-subtitle actual" *ngIf="!isMobile"><ng-container i18n="block.actual-block">Actual Block</ng-container> <a class="info-link" [routerLink]="['/docs/faq' | relativeUrl ]" fragment="how-do-block-audits-work"><fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></a></h3>
        <div class="block-graph-wrapper">
-          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="75"
+          <app-block-overview-graph #blockGraphActual [isLoading]="isLoadingOverview" [resolution]="86"
            [blockLimit]="stateService.blockVSize" [orientation]="'top'" [flip]="false" [mirrorTxid]="hoverTx" mode="mined"  [auditHighlighting]="showAudit"
            (txClickEvent)="onTxClick($event)" (txHoverEvent)="onTxHover($event)" [unavailable]="isMobile && !showAudit"></app-block-overview-graph>
          <ng-container *ngTemplateOutlet="emptyBlockInfo"></ng-container>
        </div>
+        <ng-container *ngIf="network !== 'liquid'">
+          <ng-container *ngTemplateOutlet="actualDetails"></ng-container>
+        </ng-container>
      </div>
    </div>
  </div>
@@ -385,5 +397,60 @@
  </a>
 </ng-template>

+<ng-template #expectedDetails>
+  <table *ngIf="block && blockAudit && blockAudit.expectedFees != null" class="table table-borderless table-striped audit-details-table">
+    <tbody>
+      <tr>
+        <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+        <td>
+          <app-amount [satoshis]="blockAudit.expectedFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="block.weight">Weight</td>
+        <td [innerHTML]="'&lrm;' + (blockAudit.expectedWeight | wuBytes: 2)"></td>
+      </tr>
+      <tr>
+        <td i18n="mempool-block.transactions">Transactions</td>
+        <td>{{ blockAudit.template?.length || 0 }}</td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
+<ng-template #actualDetails>
+  <table *ngIf="block && blockAudit && blockAudit.expectedFees != null" class="table table-borderless table-striped audit-details-table">
+    <tbody>
+      <tr>
+        <td i18n="block.total-fees|Total fees in a block">Total fees</td>
+        <td>
+          <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+          <span *ngIf="blockAudit.feeDelta" class="difference" [class.positive]="blockAudit.feeDelta <= 0" [class.negative]="blockAudit.feeDelta > 0">
+            {{ blockAudit.feeDelta < 0 ? '+' : '' }}{{ (-blockAudit.feeDelta * 100) | amountShortener: 2 }}%
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="block.weight">Weight</td>
+        <td [innerHTML]>
+          <span [innerHTML]="'&lrm;' + (block.weight | wuBytes: 2)"></span>
+          <span *ngIf="blockAudit.weightDelta" class="difference" [class.positive]="blockAudit.weightDelta <= 0" [class.negative]="blockAudit.weightDelta > 0">
+            {{ blockAudit.weightDelta < 0 ? '+' : '' }}{{ (-blockAudit.weightDelta * 100) | amountShortener: 2 }}%
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n="mempool-block.transactions">Transactions</td>
+        <td>
+          {{ block.tx_count }}
+          <span *ngIf="blockAudit.txDelta" class="difference" [class.positive]="blockAudit.txDelta <= 0" [class.negative]="blockAudit.txDelta > 0">
+            {{ blockAudit.txDelta < 0 ? '+' : '' }}{{ (-blockAudit.txDelta * 100) | amountShortener: 2 }}%
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</ng-template>
+
 <br>
 <br>
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -1,3 +1,26 @@
+.title-block {
+  flex-wrap: wrap;
+  align-items: baseline;
+  @media (min-width: 650px) {
+    flex-direction: row;
+  }
+  h1 {
+    margin: 0rem;
+    margin-right: 15px;
+    line-height: 1;
+  }
+
+  .alert-mempool {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .container-button {
+    align-self: center;
+    margin-right: 1em;
+  }
+}
+
 .qr-wrapper {
  background-color: #FFF;
  padding: 10px;
@@ -38,6 +61,17 @@
      color: rgba(255, 255, 255, 0.4);
      margin-left: 5px;
    }
+
+    .difference {
+      margin-left: 0.5em;
+  
+      &.positive {
+        color: rgb(66, 183, 71);
+      }
+      &.negative {
+        color: rgb(183, 66, 66);
+      }
+    }
  }
 }

@@ -205,6 +239,7 @@ h1 {
 .nav-tabs {
  border-color: white;
  border-width: 1px;
+  margin-bottom: 1em;
 }

 .nav-tabs .nav-link {
@@ -252,3 +287,14 @@ h1 {
  top: 11px;
  margin-left: 10px;
 }
+
+.audit-details-table {
+  margin-top: 1.25rem;
+  @media (max-width: 767.98px) {
+    margin-top: 0.75rem;
+  }
+}
+
+.graph-col {
+  flex-grow: 1.11;
+}
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -2,9 +2,9 @@ import { Component, OnInit, OnDestroy, ViewChildren, QueryList } from '@angular/
 import { Location } from '@angular/common';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ElectrsApiService } from '../../services/electrs-api.service';
-import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith, pairwise, filter } from 'rxjs/operators';
+import { switchMap, tap, throttleTime, catchError, map, shareReplay, startWith } from 'rxjs/operators';
 import { Transaction, Vout } from '../../interfaces/electrs.interface';
-import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest } from 'rxjs';
+import { Observable, of, Subscription, asyncScheduler, EMPTY, combineLatest, forkJoin } from 'rxjs';
 import { StateService } from '../../services/state.service';
 import { SeoService } from '../../services/seo.service';
 import { WebsocketService } from '../../services/websocket.service';
@@ -14,6 +14,7 @@ import { ApiService } from '../../services/api.service';
 import { BlockOverviewGraphComponent } from '../../components/block-overview-graph/block-overview-graph.component';
 import { detectWebGL } from '../../shared/graphs.utils';
 import { PriceService, Price } from '../../services/price.service';
+import { CacheService } from '../../services/cache.service';

@Component({
  selector: 'app-block',
@@ -44,7 +45,6 @@ export class BlockComponent implements OnInit, OnDestroy {
  strippedTransactions: TransactionStripped[];
  overviewTransitionDirection: string;
  isLoadingOverview = true;
-  isLoadingAudit = true;
  error: any;
  blockSubsidy: number;
  fees: number;
@@ -73,6 +73,7 @@ export class BlockComponent implements OnInit, OnDestroy {
  auditSubscription: Subscription;
  keyNavigationSubscription: Subscription;
  blocksSubscription: Subscription;
+  cacheBlocksSubscription: Subscription;
  networkChangedSubscription: Subscription;
  queryParamsSubscription: Subscription;
  nextBlockSubscription: Subscription = undefined;
@@ -100,6 +101,7 @@ export class BlockComponent implements OnInit, OnDestroy {
    private relativeUrlPipe: RelativeUrlPipe,
    private apiService: ApiService,
    private priceService: PriceService,
+    private cacheService: CacheService,
  ) {
    this.webGlEnabled = detectWebGL();
  }
@@ -129,17 +131,27 @@ export class BlockComponent implements OnInit, OnDestroy {
        map((indicators) => indicators['blocktxs-' + this.blockHash] !== undefined ? indicators['blocktxs-' + this.blockHash] : 0)
      );

+    this.cacheBlocksSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
+      this.loadedCacheBlock(block);
+    });
+
    this.blocksSubscription = this.stateService.blocks$
-      .subscribe(([block]) => {
-        this.latestBlock = block;
-        this.latestBlocks.unshift(block);
-        this.latestBlocks = this.latestBlocks.slice(0, this.stateService.env.KEEP_BLOCKS_AMOUNT);
+      .subscribe((blocks) => {
+        this.latestBlock = blocks[0];
+        this.latestBlocks = blocks;
        this.setNextAndPreviousBlockLink();

-        if (block.id === this.blockHash) {
-          this.block = block;
-          if (block?.extras?.reward != undefined) {
-            this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
+        for (const block of blocks) {
+          if (block.id === this.blockHash) {
+            this.block = block;
+            block.extras.minFee = this.getMinBlockFee(block);
+            block.extras.maxFee = this.getMaxBlockFee(block);
+            if (block?.extras?.reward != undefined) {
+              this.fees = block.extras.reward / 100000000 - this.blockSubsidy;
+            }
+          } else if (block.height === this.block?.height) {
+            this.block.stale = true;
+            this.block.canonical = block.id;
          }
        }
      });
@@ -234,6 +246,8 @@ export class BlockComponent implements OnInit, OnDestroy {
        }
        this.updateAuditAvailableFromBlockHeight(block.height);
        this.block = block;
+        block.extras.minFee = this.getMinBlockFee(block);
+        block.extras.maxFee = this.getMaxBlockFee(block);
        this.blockHeight = block.height;
        this.lastBlockHeight = this.blockHeight;
        this.nextBlockHeight = block.height + 1;
@@ -251,6 +265,13 @@ export class BlockComponent implements OnInit, OnDestroy {
        this.transactionsError = null;
        this.isLoadingOverview = true;
        this.overviewError = null;
+
+        const cachedBlock = this.cacheService.getCachedBlock(block.height);
+        if (!cachedBlock) {
+          this.cacheService.loadBlock(block.height);
+        } else {
+          this.loadedCacheBlock(cachedBlock);
+        }
      }),
      throttleTime(300, asyncScheduler, { leading: true, trailing: true }),
      shareReplay(1)
@@ -277,134 +298,129 @@ export class BlockComponent implements OnInit, OnDestroy {
      this.isLoadingOverview = false;
    });

-    if (!this.auditSupported) {
-      this.overviewSubscription = block$.pipe(
-        startWith(null),
-        pairwise(),
-        switchMap(([prevBlock, block]) => this.apiService.getStrippedBlockTransactions$(block.id)
-          .pipe(
-            catchError((err) => {
-              this.overviewError = err;
-              return of([]);
-            }),
-            switchMap((transactions) => {
-              if (prevBlock) {
-                return of({ transactions, direction: (prevBlock.height < block.height) ? 'right' : 'left' });
-              } else {
-                return of({ transactions, direction: 'down' });
-              }
-            })
-          )
-        ),
-      )
-      .subscribe(({transactions, direction}: {transactions: TransactionStripped[], direction: string}) => {
-        this.strippedTransactions = transactions;
-        this.isLoadingOverview = false;
-        this.setupBlockGraphs();
-      },
-      (error) => {
-        this.error = error;
-        this.isLoadingOverview = false;
-      });
-    }
-
-    if (this.auditSupported) {
-      this.auditSubscription = block$.pipe(
-        startWith(null),
-        pairwise(),
-        switchMap(([prevBlock, block]) => {
-          this.isLoadingAudit = true;
-          this.blockAudit = null;
-          return this.apiService.getBlockAudit$(block.id)
+    this.overviewSubscription = block$.pipe(
+      switchMap((block) => {
+        return forkJoin([
+          this.apiService.getStrippedBlockTransactions$(block.id)
            .pipe(
              catchError((err) => {
                this.overviewError = err;
-                this.isLoadingAudit = false;
-                return of([]);
+                return of(null);
              })
-            );
-        }
-        ),
-        filter((response) => response != null),
-        map((response) => {
-          const blockAudit = response.body;
-          const inTemplate = {};
-          const inBlock = {};
-          const isAdded = {};
-          const isCensored = {};
-          const isMissing = {};
-          const isSelected = {};
-          const isFresh = {};
-          this.numMissing = 0;
-          this.numUnexpected = 0;
+            ),
+          !this.isAuditAvailableFromBlockHeight(block.height) ? of(null) : this.apiService.getBlockAudit$(block.id)
+            .pipe(
+              catchError((err) => {
+                this.overviewError = err;
+                return of(null);
+              })
+            )
+        ]);
+      })
+    )
+    .subscribe(([transactions, blockAudit]) => {      
+      if (transactions) {
+        this.strippedTransactions = transactions;
+      } else {
+        this.strippedTransactions = [];
+      }

-          if (blockAudit?.template) {
-            for (const tx of blockAudit.template) {
-              inTemplate[tx.txid] = true;
-            }
-            for (const tx of blockAudit.transactions) {
-              inBlock[tx.txid] = true;
-            }
-            for (const txid of blockAudit.addedTxs) {
-              isAdded[txid] = true;
-            }
-            for (const txid of blockAudit.missingTxs) {
-              isCensored[txid] = true;
-            }
-            for (const txid of blockAudit.freshTxs || []) {
-              isFresh[txid] = true;
-            }
-            // set transaction statuses
-            for (const tx of blockAudit.template) {
-              tx.context = 'projected';
-              if (isCensored[tx.txid]) {
-                tx.status = 'censored';
-              } else if (inBlock[tx.txid]) {
-                tx.status = 'found';
-              } else {
-                tx.status = isFresh[tx.txid] ? 'fresh' : 'missing';
-                isMissing[tx.txid] = true;
-                this.numMissing++;
-              }
-            }
-            for (const [index, tx] of blockAudit.transactions.entries()) {
-              tx.context = 'actual';
-              if (index === 0) {
-                tx.status = null;
-              } else if (isAdded[tx.txid]) {
-                tx.status = 'added';
-              } else if (inTemplate[tx.txid]) {
-                tx.status = 'found';
-              } else {
-                tx.status = 'selected';
-                isSelected[tx.txid] = true;
-                this.numUnexpected++;
-              }
-            }
-            for (const tx of blockAudit.transactions) {
-              inBlock[tx.txid] = true;
-            }
-            this.setAuditAvailable(true);
-          } else {
-            this.setAuditAvailable(false);
+      this.blockAudit = null;
+      if (transactions && blockAudit) {
+        const inTemplate = {};
+        const inBlock = {};
+        const isAdded = {};
+        const isCensored = {};
+        const isMissing = {};
+        const isSelected = {};
+        const isFresh = {};
+        const isSigop = {};
+        const isFullRbf = {};
+        this.numMissing = 0;
+        this.numUnexpected = 0;
+
+        if (blockAudit?.template) {
+          for (const tx of blockAudit.template) {
+            inTemplate[tx.txid] = true;
          }
-          return blockAudit;
-        }),
-        catchError((err) => {
-          console.log(err);
-          this.error = err;
-          this.isLoadingOverview = false;
-          this.isLoadingAudit = false;
+          for (const tx of transactions) {
+            inBlock[tx.txid] = true;
+          }
+          for (const txid of blockAudit.addedTxs) {
+            isAdded[txid] = true;
+          }
+          for (const txid of blockAudit.missingTxs) {
+            isCensored[txid] = true;
+          }
+          for (const txid of blockAudit.freshTxs || []) {
+            isFresh[txid] = true;
+          }
+          for (const txid of blockAudit.sigopTxs || []) {
+            isSigop[txid] = true;
+          }
+          for (const txid of blockAudit.fullrbfTxs || []) {
+            isFullRbf[txid] = true;
+          }
+          // set transaction statuses
+          for (const tx of blockAudit.template) {
+            tx.context = 'projected';
+            if (isCensored[tx.txid]) {
+              tx.status = 'censored';
+            } else if (inBlock[tx.txid]) {
+              tx.status = 'found';
+            } else {
+              if (isFresh[tx.txid]) {
+                if (tx.rate - (tx.fee / tx.vsize) >= 0.1) {
+                  tx.status = 'freshcpfp';
+                } else {
+                  tx.status = 'fresh';
+                }
+              } else if (isSigop[tx.txid]) {
+                tx.status = 'sigop';
+              } else if (isFullRbf[tx.txid]) {
+                tx.status = 'fullrbf';
+              } else {
+                tx.status = 'missing';
+              }
+              isMissing[tx.txid] = true;
+              this.numMissing++;
+            }
+          }
+          for (const [index, tx] of transactions.entries()) {
+            tx.context = 'actual';
+            if (index === 0) {
+              tx.status = null;
+            } else if (isAdded[tx.txid]) {
+              tx.status = 'added';
+            } else if (inTemplate[tx.txid]) {
+              tx.status = 'found';
+            } else if (isFullRbf[tx.txid]) {
+              tx.status = 'fullrbf';
+            } else {
+              tx.status = 'selected';
+              isSelected[tx.txid] = true;
+              this.numUnexpected++;
+            }
+          }
+          for (const tx of transactions) {
+            inBlock[tx.txid] = true;
+          }
+
+          blockAudit.feeDelta = blockAudit.expectedFees > 0 ? (blockAudit.expectedFees - this.block.extras.totalFees) / blockAudit.expectedFees : 0;
+          blockAudit.weightDelta = blockAudit.expectedWeight > 0 ? (blockAudit.expectedWeight - this.block.weight) / blockAudit.expectedWeight : 0;
+          blockAudit.txDelta = blockAudit.template.length > 0 ? (blockAudit.template.length - this.block.tx_count) / blockAudit.template.length : 0;
+          this.blockAudit = blockAudit;
+          this.setAuditAvailable(true);
+        } else {
          this.setAuditAvailable(false);
-          return of(null);
-        }),
-      ).subscribe((blockAudit) => {
-        this.blockAudit = blockAudit;
-        this.setupBlockGraphs();
-        this.isLoadingOverview = false;
-        this.isLoadingAudit = false;
-      });
-    }
+        }
+      } else {
+        this.setAuditAvailable(false);
+      }
+
+      this.isLoadingOverview = false;
+      this.setupBlockGraphs();
+    });

    this.networkChangedSubscription = this.stateService.networkChanged$
      .subscribe((network) => this.network = network);
@@ -465,6 +481,7 @@ export class BlockComponent implements OnInit, OnDestroy {
    this.auditSubscription?.unsubscribe();
    this.keyNavigationSubscription?.unsubscribe();
    this.blocksSubscription?.unsubscribe();
+    this.cacheBlocksSubscription?.unsubscribe();
    this.networkChangedSubscription?.unsubscribe();
    this.queryParamsSubscription?.unsubscribe();
    this.timeLtrSubscription?.unsubscribe();
@@ -612,9 +629,13 @@ export class BlockComponent implements OnInit, OnDestroy {
    });
  }

-  onTxClick(event: TransactionStripped): void {
-    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
-    this.router.navigate([url]);
+  onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
+    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
+    if (!event.keyModifier) {
+      this.router.navigate([url]);
+    } else {
+      window.open(url, '_blank');
+    }
  }

  onTxHover(txid: string): void {
@@ -635,24 +656,57 @@ export class BlockComponent implements OnInit, OnDestroy {
  }

  updateAuditAvailableFromBlockHeight(blockHeight: number): void {
-    if (!this.auditSupported) {
+    if (!this.isAuditAvailableFromBlockHeight(blockHeight)) {
      this.setAuditAvailable(false);
    }
+  }
+  
+  isAuditAvailableFromBlockHeight(blockHeight: number): boolean {
+    if (!this.auditSupported) {
+      return false;
+    }
    switch (this.stateService.network) {
      case 'testnet':
        if (blockHeight < this.stateService.env.TESTNET_BLOCK_AUDIT_START_HEIGHT) {
-          this.setAuditAvailable(false);
+          return false;
        }
        break;
      case 'signet':
        if (blockHeight < this.stateService.env.SIGNET_BLOCK_AUDIT_START_HEIGHT) {
-          this.setAuditAvailable(false);
+          return false;
        }
        break;
      default:
        if (blockHeight < this.stateService.env.MAINNET_BLOCK_AUDIT_START_HEIGHT) {
-          this.setAuditAvailable(false);
+          return false;
        }
    }
+    return true;
+  }
+
+  getMinBlockFee(block: BlockExtended): number {
+    if (block?.extras?.feeRange) {
+      // heuristic to check if feeRange is adjusted for effective rates
+      if (block.extras.medianFee === block.extras.feeRange[3]) {
+        return block.extras.feeRange[1];
+      } else {
+        return block.extras.feeRange[0];
+      }
+    }
+    return 0;
+  }
+
+  getMaxBlockFee(block: BlockExtended): number {
+    if (block?.extras?.feeRange) {
+      return block.extras.feeRange[block.extras.feeRange.length - 1];
+    }
+    return 0;
+  }
+
+  loadedCacheBlock(block: BlockExtended): void {
+    if (this.block && block.height === this.block.height && block.id !== this.block.id) {
+      this.block.stale = true;
+      this.block.canonical = block.id;
+    }
  }
 }
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -1,53 +1,60 @@
-<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr"
-  [style.left]="static ? (offset || 0) + 'px' : null"
+<div class="blocks-container blockchain-blocks-container" [class.time-ltr]="timeLtr" [class.minimal]="minimal"
+  [style.left]="static ? (offset || 0) + 'px' : null" [style.--block-size]="blockWidth+'px'"
  *ngIf="static || (loadingBlocks$ | async) === false; else loadingBlocksTemplate">
  <div *ngFor="let block of blocks; let i = index; trackBy: trackByBlocksFn">
    <ng-container *ngIf="connected && block && !block.loading && !block.placeholder; else placeholderBlock">
+      <div
+        *ngIf="minimal && spotlight < 0 && chainTip + spotlight + 1 === block.height"
+        class="spotlight-bottom"
+        [style.left]="blockStyles[i].left"
+      ></div>
      <div [attr.data-cy]="'bitcoin-block-offset-' + offset + '-index-' + i"
        class="text-center bitcoin-block mined-block blockchain-blocks-offset-{{ offset }}-index-{{ i }}"
+        [class.offscreen]="!static && count && i >= count"
        id="bitcoin-block-{{ block.height }}" [ngStyle]="blockStyles[i]"
-        [class.blink-bg]="(specialBlocks[block.height] !== undefined)">
-        <a draggable="false" [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }"
+        [class.blink-bg]="isSpecial(block.height)">
+        <a draggable="false" [routerLink]="[getHref(i, block) | relativeUrl]" [state]="{ data: { block: block } }"
          class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
-        <div [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
-          <a [routerLink]="['/block/' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
+        <div *ngIf="!minimal" [attr.data-cy]="'bitcoin-block-' + i + '-height'" class="block-height">
+          <a [routerLink]="[getHref(i, block) | relativeUrl]" [state]="{ data: { block: block } }">{{ block.height
            }}</a>
        </div>
        <div class="block-body">
-          <div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
-            ~{{ block?.extras?.medianFee | number:feeRounding }} <ng-container
-              i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
-          </div>
-          <ng-template #emptyfees>
-            <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
-              &nbsp;
+          <ng-container *ngIf="!minimal">
+            <div *ngIf="block?.extras; else emptyfees" [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
+              ~<app-fee-rate [fee]="block?.extras?.medianFee" unitClass="" rounding="1.0-0"></app-fee-rate>
            </div>
-          </ng-template>
-          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
-            *ngIf="block?.extras?.feeRange; else emptyfeespan">
-            {{ block?.extras?.feeRange?.[1] | number:feeRounding }} - {{
-            block?.extras?.feeRange[block?.extras?.feeRange?.length - 1] | number:feeRounding }} <ng-container
-              i18n="shared.sat-vbyte|sat/vB">sat/vB</ng-container>
-          </div>
-          <ng-template #emptyfeespan>
-            <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
-              &nbsp;
+            <ng-template #emptyfees>
+              <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fees">
+                &nbsp;
+              </div>
+            </ng-template>
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-fee-span'" class="fee-span"
+              *ngIf="block?.extras?.minFee != null && block?.extras?.maxFee != null; else emptyfeespan">
+              <app-fee-rate [fee]="block?.extras?.minFee" [showUnit]="false" rounding="1.0-0" unitClass=""></app-fee-rate>
+              -
+              <app-fee-rate [fee]="block?.extras?.maxFee" rounding="1.0-0" unitClass=""></app-fee-rate>
            </div>
-          </ng-template>
-          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
-            class="block-size">
-            <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-          </div>
-          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
-            class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
-          <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
-            <ng-container
-              *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
-            <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-            <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-          </div>
-          <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
-            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time></div>
+            <ng-template #emptyfeespan>
+              <div [attr.data-cy]="'bitcoin-block-offset=' + offset + '-index-' + i + '-fees'" class="fee-span">
+                &nbsp;
+              </div>
+            </ng-template>
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-total-fees'" *ngIf="showMiningInfo"
+              class="block-size">
+              <app-amount [satoshis]="block.extras?.totalFees ?? 0" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+            </div>
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + 'block-size'" *ngIf="!showMiningInfo"
+              class="block-size" [innerHTML]="'&lrm;' + (block.size | bytes: 2)"></div>
+            <div [attr.data-cy]="'bitcoin-block-' + i + '-transactions'" class="transaction-count">
+              <ng-container
+                *ngTemplateOutlet="block.tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: block.tx_count | number}"></ng-container>
+              <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+              <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+            </div>
+            <div [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-time'" class="time-difference">
+              <app-time kind="since" [time]="block.timestamp" [fastRender]="true" [precision]="1" minUnit="minute"></app-time></div>
+          </ng-container>
        </div>
        <div class="animated" [class]="showMiningInfo ? 'show' : 'hide'" *ngIf="block.extras?.pool != undefined">
          <a [attr.data-cy]="'bitcoin-block-' + offset + '-index-' + i + '-pool'" class="badge badge-primary"
@@ -79,11 +86,11 @@
 </div>

 <ng-template #loadingBlocksTemplate>
-  <div class="blocks-container" [class.time-ltr]="timeLtr">
+  <div class="blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
    <div class="flashing">
      <div *ngFor="let block of emptyBlocks; let i = index; trackBy: trackByBlocksFn">
        <div class="text-center bitcoin-block mined-block" id="bitcoin-block-{{ block.height }}"
-          [ngStyle]="emptyBlockStyles[i]"></div>
+          [ngStyle]="emptyBlockStyles[i]" [class.offscreen]="!static && count && i >= count"></div>
      </div>
    </div>
  </div>
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -1,6 +1,6 @@
 .bitcoin-block {
-  width: 125px;
-  height: 125px;
+  width: var(--block-size);
+  height: var(--block-size);
 }

 .blockLink {
@@ -22,7 +22,11 @@
 .mined-block {
  position: absolute;
  top: 0px;
-  transition: background 2s, left 2s, transform 1s;
+  transition: background 2s, left 2s, transform 1s, opacity 1s;
+}
+
+.mined-block.offscreen {
+  opacity: 0;
 }

 .mined-block.placeholder-block {
@@ -35,9 +39,11 @@
 }

 .blocks-container {
+  --block-size: 125px;
+  --block-offset: calc(0.32 * var(--block-size));
  position: absolute;
  top: 0px;
-  left: 40px;
+  left: var(--block-offset);
 }

 .block-body {
@@ -77,11 +83,11 @@

 .bitcoin-block::after {
  content: '';
-  width: 125px;
-  height: 24px;
+  width: var(--block-size);
+  height: calc(0.192 * var(--block-size));
  position:absolute;
-  top: -24px;
-  left: -20px;
+  top: calc(-0.192 * var(--block-size));
+  left: calc(-0.16 * var(--block-size));
  background-color: #232838;
  transform:skew(40deg);
  transform-origin:top;
@@ -89,11 +95,11 @@

 .bitcoin-block::before {
  content: '';
-  width: 20px;
-  height: 125px;
+  width: calc(0.16 * var(--block-size));
+  height: var(--block-size);
  position: absolute;
-  top: -12px;
-  left: -20px;
+  top: calc(-0.096 * var(--block-size));
+  left: calc(-0.16 * var(--block-size));
  background-color: #191c27;

  transform: skewY(50deg);
@@ -168,4 +174,16 @@
  .bitcoin-block {
    transform: scaleX(-1);
  }
+}
+
+.spotlight-bottom {
+  position: absolute;
+  width: calc(0.6 * var(--block-size));
+  height: calc(0.25 * var(--block-size));
+  border-left: solid calc(0.3 * var(--block-size)) transparent;
+  border-bottom: solid calc(0.3 * var(--block-size)) white;
+  border-right: solid calc(0.3 * var(--block-size)) transparent;
+  transform: translate(calc(0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
+  border-radius: 2px;
+  z-index: -1;
 }
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -20,10 +20,14 @@ interface BlockchainBlock extends BlockExtended {
 export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  @Input() static: boolean = false;
  @Input() offset: number = 0;
-  @Input() height: number = 0;
-  @Input() count: number = 8;
+  @Input() height: number = 0; // max height of blocks in chunk (dynamic blocks only)
+  @Input() count: number = 8; // number of blocks in this chunk (dynamic blocks only)
  @Input() loadingTip: boolean = false;
  @Input() connected: boolean = true;
+  @Input() minimal: boolean = false;
+  @Input() blockWidth: number = 125;
+  @Input() spotlight: number = 0;
+  @Input() getHref?: (index, block) => string = (index, block) => `/block/${block.id}`;
  
  specialBlocks = specialBlocks;
  network = '';
@@ -31,11 +35,14 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  dynamicBlocksAmount: number = 8;
  emptyBlocks: BlockExtended[] = this.mountEmptyBlocks();
  markHeight: number;
+  chainTip: number;
+  pendingMarkBlock: { animate: boolean, newBlockFromLeft: boolean };
  blocksSubscription: Subscription;
  blockPageSubscription: Subscription;
  networkSubscription: Subscription;
  tabHiddenSubscription: Subscription;
  markBlockSubscription: Subscription;
+  txConfirmedSubscription: Subscription;
  loadingBlocks$: Observable<boolean>;
  blockStyles = [];
  emptyBlockStyles = [];
@@ -50,6 +57,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  timeLtrSubscription: Subscription;
  timeLtr: boolean;

+  blockOffset: number = 155;
+  dividerBlockOffset: number = 205;
+  blockPadding: number = 30;
+
  gradientColors = {
    '': ['#9339f4', '#105fb0'],
    bisq: ['#9339f4', '#105fb0'],
@@ -94,29 +105,23 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    this.tabHiddenSubscription = this.stateService.isTabHidden$.subscribe((tabHidden) => this.tabHidden = tabHidden);
    if (!this.static) {
      this.blocksSubscription = this.stateService.blocks$
-        .subscribe(([block, txConfirmed]) => {
-          if (this.blocks.some((b) => b.height === block.height)) {
+        .subscribe((blocks) => {
+          if (!blocks?.length) {
            return;
          }
+          const latestHeight = blocks[0].height;
+          const animate = this.chainTip != null && latestHeight > this.chainTip;

-          if (this.blocks.length && block.height !== this.blocks[0].height + 1) {
-            this.blocks = [];
-            this.blocksFilled = false;
+          for (const block of blocks) {
+            block.extras.minFee = this.getMinBlockFee(block);
+            block.extras.maxFee = this.getMaxBlockFee(block);
          }

-          this.blocks.unshift(block);
-          this.blocks = this.blocks.slice(0, this.dynamicBlocksAmount);
-
-          if (txConfirmed && this.height === block.height) {
-            this.markHeight = block.height;
-            this.moveArrowToPosition(true, true);
-          } else {
-            this.moveArrowToPosition(true, false);
-          }
+          this.blocks = blocks;

          this.blockStyles = [];
-          if (this.blocksFilled) {
-            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -155 : -205)));
+          if (animate) {
+            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, i ? -this.blockOffset : -this.dividerBlockOffset)));
            setTimeout(() => {
              this.blockStyles = [];
              this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
@@ -126,11 +131,23 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
            this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
          }

-          if (this.blocks.length === this.dynamicBlocksAmount) {
-            this.blocksFilled = true;
+          this.chainTip = latestHeight;
+
+          if (this.pendingMarkBlock) {
+            this.moveArrowToPosition(this.pendingMarkBlock.animate, this.pendingMarkBlock.newBlockFromLeft);
+            this.pendingMarkBlock = null;
          }
          this.cd.markForCheck();
        });
+
+      this.txConfirmedSubscription = this.stateService.txConfirmed$.subscribe(([txid, block]) => {
+        if (txid) {
+          this.markHeight = block.height;
+          this.moveArrowToPosition(true, true);
+        } else {
+          this.moveArrowToPosition(true, false);
+        }
+      })
    } else {
      this.blockPageSubscription = this.cacheService.loadedBlocks$.subscribe((block) => {
        if (block.height <= this.height && block.height > this.height - this.count) {
@@ -149,12 +166,19 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
        this.cd.markForCheck();
      });

-      if (this.static) {
-        this.updateStaticBlocks();
-      }
+    if (this.static) {
+      this.updateStaticBlocks();
+    }
  }

  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.blockWidth && this.blockWidth) {
+      this.blockPadding = 0.24 * this.blockWidth;
+      this.blockOffset = this.blockWidth + this.blockPadding;
+      this.dividerBlockOffset = this.blockOffset + (0.4 * this.blockWidth);
+      this.blockStyles = [];
+      this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i)));
+    }
    if (this.static) {
      const animateSlide = changes.height && (changes.height.currentValue === changes.height.previousValue + 1);
      this.updateStaticBlocks(animateSlide);
@@ -168,6 +192,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    if (this.blockPageSubscription) {
      this.blockPageSubscription.unsubscribe();
    }
+    if (this.txConfirmedSubscription) {
+      this.txConfirmedSubscription.unsubscribe();
+    }
    this.networkSubscription.unsubscribe();
    this.tabHiddenSubscription.unsubscribe();
    this.markBlockSubscription.unsubscribe();
@@ -180,6 +207,9 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
      this.arrowVisible = false;
      return;
    }
+    if (this.chainTip == null) {
+      this.pendingMarkBlock = { animate, newBlockFromLeft };
+    }
    const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
    if (blockindex > -1) {
      if (!animate) {
@@ -187,14 +217,14 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
      }
      this.arrowVisible = true;
      if (newBlockFromLeft) {
-        this.arrowLeftPx = blockindex * 155 + 30 - 205;
+        this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding - this.dividerBlockOffset;
        setTimeout(() => {
          this.arrowTransition = '2s';
-          this.arrowLeftPx = blockindex * 155 + 30;
+          this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
          this.cd.markForCheck();
        }, 50);
      } else {
-        this.arrowLeftPx = blockindex * 155 + 30;
+        this.arrowLeftPx = blockindex * this.blockOffset + this.blockPadding;
        if (!animate) {
          setTimeout(() => {
            this.arrowTransition = '2s';
@@ -221,6 +251,10 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
      if (height >= 0) {
        this.cacheService.loadBlock(height);
        block = this.cacheService.getCachedBlock(height) || null;
+        if (block) {
+          block.extras.minFee = this.getMinBlockFee(block);
+          block.extras.maxFee = this.getMaxBlockFee(block);
+        }
      }
      this.blocks.push(block || {
        placeholder: height < 0,
@@ -241,7 +275,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    }
    this.blocks = this.blocks.slice(0, this.count);
    this.blockStyles = [];
-    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -155 : 0)));
+    this.blocks.forEach((b, i) => this.blockStyles.push(this.getStyleForBlock(b, i, animateSlide ? -this.blockOffset : 0)));
    this.cd.markForCheck();
    if (animateSlide) {
      // animate blocks slide right
@@ -259,12 +293,18 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  onBlockLoaded(block: BlockExtended) {
    const blockIndex = this.height - block.height;
    if (blockIndex >= 0 && blockIndex < this.blocks.length) {
+      block.extras.minFee = this.getMinBlockFee(block);
+      block.extras.maxFee = this.getMaxBlockFee(block);
      this.blocks[blockIndex] = block;
      this.blockStyles[blockIndex] = this.getStyleForBlock(block, blockIndex);
    }
    this.cd.markForCheck();
  }

+  isSpecial(height: number): boolean {
+    return this.specialBlocks[height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
+  }
+
  getStyleForBlock(block: BlockchainBlock, index: number, animateEnterFrom: number = 0) {
    if (!block || block.placeholder) {
      return this.getStyleForPlaceholderBlock(index, animateEnterFrom);
@@ -279,7 +319,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    }

    return {
-      left: addLeft + 155 * index + 'px',
+      left: addLeft + this.blockOffset * index + 'px',
      background: `repeating-linear-gradient(
        #2d3348,
        #2d3348 ${greenBackgroundHeight}%,
@@ -301,7 +341,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    const addLeft = animateEnterFrom || 0;

    return {
-      left: addLeft + (155 * index) + 'px',
+      left: addLeft + (this.blockOffset * index) + 'px',
      background: "#2d3348",
    };
  }
@@ -309,7 +349,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  getStyleForPlaceholderBlock(index: number, animateEnterFrom: number = 0) {
    const addLeft = animateEnterFrom || 0;
    return {
-      left: addLeft + (155 * index) + 'px',
+      left: addLeft + (this.blockOffset * index) + 'px',
    };
  }

@@ -317,7 +357,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    const addLeft = animateEnterFrom || 0;

    return {
-      left: addLeft + 155 * this.emptyBlocks.indexOf(block) + 'px',
+      left: addLeft + this.blockOffset * this.emptyBlocks.indexOf(block) + 'px',
      background: "#2d3348",
    };
  }
@@ -343,4 +383,23 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    }
    return emptyBlocks;
  }
+
+  getMinBlockFee(block: BlockExtended): number {
+    if (block?.extras?.feeRange) {
+      // heuristic to check if feeRange is adjusted for effective rates
+      if (block.extras.medianFee === block.extras.feeRange[3]) {
+        return block.extras.feeRange[1];
+      } else {
+        return block.extras.feeRange[0];
+      }
+    }
+    return 0;
+  }
+
+  getMaxBlockFee(block: BlockExtended): number {
+    if (block?.extras?.feeRange) {
+      return block.extras.feeRange[block.extras.feeRange.length - 1];
+    }
+    return 0;
+  }
 }
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -1,9 +1,9 @@
 <div class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.ltr-transition]="ltrTransitionEnabled" #container>
-  <div class="position-container" [ngClass]="network ? network : ''">
+  <div class="position-container" [ngClass]="network ? network : ''" [style.--divider-offset]="dividerOffset + 'px'" [style.--mempool-offset]="mempoolOffset + 'px'">
    <span>
      <div class="blocks-wrapper">
        <div class="scroll-spacer" *ngIf="minScrollWidth" [style.left]="minScrollWidth + 'px'"></div>
-        <app-mempool-blocks [hidden]="pageIndex > 0"></app-mempool-blocks>
+        <app-mempool-blocks [hidden]="pageIndex > 0" [allBlocks]="scrollableMempool" (widthChange)="onMempoolWidthChange($event)"></app-mempool-blocks>
        <app-blockchain-blocks [hidden]="pageIndex > 0"></app-blockchain-blocks>
        <ng-container *ngFor="let page of pages; trackBy: trackByPageFn">
          <app-blockchain-blocks [static]="true" [offset]="page.offset" [height]="page.height" [count]="blocksPerPage" [loadingTip]="loadingTip" [connected]="connected"></app-blockchain-blocks>
--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@@ -26,43 +26,14 @@
  position: absolute;
  left: 0;
  top: 75px;
-  transform: translateX(50vw);
+  --divider-offset: 50vw;
+  --mempool-offset: 0px;
+  transform: translateX(calc(var(--divider-offset) + var(--mempool-offset)));
 }

-.position-container.liquid, .position-container.liquidtestnet {
-  transform: translateX(420px);
-}
-
-@media (min-width: 768px) {
-  .blockchain-wrapper.time-ltr {
-    .position-container.liquid, .position-container.liquidtestnet {
-      transform: translateX(calc(100vw - 420px));
-    }
-  }
-}
-
-@media (max-width: 767.98px) {
-  .blockchain-wrapper {
-    .position-container {
-      transform: translateX(95vw);
-    }
-    .position-container.liquid, .position-container.liquidtestnet {
-      transform: translateX(50vw);
-    }
-    .position-container.loading {
-      transform: translateX(50vw);
-    }
-  }
-  .blockchain-wrapper.time-ltr {
-    .position-container {
-      transform: translateX(5vw);
-    }
-    .position-container.liquid, .position-container.liquidtestnet {
-      transform: translateX(50vw);
-    }
-    .position-container.loading {
-      transform: translateX(50vw);
-    }
+.blockchain-wrapper.time-ltr {
+  .position-container {
+    transform: translateX(calc(100vw - var(--divider-offset) - var(--mempool-offset)));
  }
 }

--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener, ChangeDetectorRef } from '@angular/core';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { StateService } from '../../services/state.service';

@@ -13,43 +13,95 @@ export class BlockchainComponent implements OnInit, OnDestroy {
  @Input() pageIndex: number;
  @Input() blocksPerPage: number = 8;
  @Input() minScrollWidth: number = 0;
+  @Input() scrollableMempool: boolean = false;
+
+  @Output() mempoolOffsetChange: EventEmitter<number> = new EventEmitter();

  network: string;
  timeLtrSubscription: Subscription;
  timeLtr: boolean = this.stateService.timeLtr.value;
  ltrTransitionEnabled = false;
+  flipping = false;
  connectionStateSubscription: Subscription;
  loadingTip: boolean = true;
  connected: boolean = true;

+  dividerOffset: number = 0;
+  mempoolOffset: number = 0;
+
  constructor(
    public stateService: StateService,
+    private cd: ChangeDetectorRef,
  ) {}

-  ngOnInit() {
+  ngOnInit(): void {
+    this.onResize();
    this.network = this.stateService.network;
    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
      this.timeLtr = !!ltr;
    });
    this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
      this.connected = (state === 2);
-    })
-    firstValueFrom(this.stateService.chainTip$).then(tip => {
+    });
+    firstValueFrom(this.stateService.chainTip$).then(() => {
      this.loadingTip = false;
    });
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    this.timeLtrSubscription.unsubscribe();
    this.connectionStateSubscription.unsubscribe();
  }

-  trackByPageFn(index: number, item: { index: number }) {
+  trackByPageFn(index: number, item: { index: number }): number {
    return item.index;
  }

-  toggleTimeDirection() {
-    this.ltrTransitionEnabled = true;
-    this.stateService.timeLtr.next(!this.timeLtr);
+  toggleTimeDirection(): void {
+    this.ltrTransitionEnabled = false;
+    const prevOffset = this.mempoolOffset;
+    this.mempoolOffset = 0;
+    this.mempoolOffsetChange.emit(0);
+    setTimeout(() => {
+      this.ltrTransitionEnabled = true;
+      this.flipping = true;
+      this.stateService.timeLtr.next(!this.timeLtr);
+      setTimeout(() => {
+        this.ltrTransitionEnabled = false;
+        this.flipping = false;
+        this.mempoolOffset = prevOffset;
+        this.mempoolOffsetChange.emit(this.mempoolOffset);
+      },  1000);
+    }, 0);
+    this.cd.markForCheck();
+  }
+
+  onMempoolWidthChange(width): void {
+    if (this.flipping) {
+      return;
+    }
+    this.mempoolOffset = Math.max(0, width - this.dividerOffset);
+    this.cd.markForCheck();
+    setTimeout(() => {
+      this.mempoolOffsetChange.emit(this.mempoolOffset);
+    }, 0);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 768) {
+      if (this.stateService.isLiquid()) {
+        this.dividerOffset = 420;
+      } else {
+        this.dividerOffset = window.innerWidth * 0.5;
+      }
+    } else {
+      if (this.stateService.isLiquid()) {
+        this.dividerOffset = window.innerWidth * 0.5;
+      } else {
+        this.dividerOffset = window.innerWidth * 0.95;
+      }
+    }
+    this.cd.markForCheck();
  }
 }
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -13,12 +13,12 @@
        <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name"
          i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
        <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
-        <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
        <th *ngIf="auditAvailable" class="health text-right" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
          i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
          i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
        <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
+        <th *ngIf="auditAvailable && !widget" class="fee-delta" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"></th>
        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
          i18n-ngbTooltip="dashboard.txs" ngbTooltip="TXs" placement="bottom" #txs [disableTooltip]="!isEllipsisActive(txs)">TXs</th>
        <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
@@ -26,7 +26,7 @@
      </thead>
      <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
        <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
-          <td class="text-left" [class]="widget ? 'widget' : ''">
+          <td class="height text-left" [class]="widget ? 'widget' : ''">
            <a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
          </td>
          <td  *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
@@ -42,26 +42,18 @@
          <td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            &lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
          </td>
-          <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
-            <app-time kind="since" [time]="block.timestamp" [fastRender]="true"></app-time>
-          </td>
          <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            <a
+              *ngIf="block?.extras?.matchRate != null; else nullHealth"
              class="health-badge badge"
-              [class.badge-success]="auditScores[block.id] >= 99"
-              [class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
-              [class.badge-danger]="auditScores[block.id] < 75"
-              [routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
+              [class.badge-success]="block.extras.matchRate >= 99"
+              [class.badge-warning]="block.extras.matchRate >= 75 && block.extras.matchRate < 99"
+              [class.badge-danger]="block.extras.matchRate < 75"
+              [routerLink]="block.extras.matchRate != null ? ['/block/' | relativeUrl, block.id] : null"
              [state]="{ data: { block: block } }"
-              *ngIf="auditScores[block.id] != null; else nullHealth"
-            >{{ auditScores[block.id] }}%</a>
+            >{{ block.extras.matchRate }}%</a>
            <ng-template #nullHealth>
-              <ng-container *ngIf="!loadingScores; else loadingHealth">
-                <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
-              </ng-container>
-            </ng-template>
-            <ng-template #loadingHealth>
-              <span class="skeleton-loader" style="max-width: 60px"></span>
+              <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
            </ng-template>
          </td>
          <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
@@ -70,6 +62,11 @@
          <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
            <app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
          </td>
+          <td *ngIf="auditAvailable" class="fee-delta" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
+            <span *ngIf="block.extras.feeDelta" class="difference" [class.positive]="block.extras.feeDelta >= 0" [class.negative]="block.extras.feeDelta < 0">
+              {{ block.extras.feeDelta > 0 ? '+' : '' }}{{ (block.extras.feeDelta * 100) | amountShortener: 2 }}%
+            </span>
+          </td>
          <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            {{ block.tx_count | number }}
          </td>
@@ -89,7 +86,6 @@
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
            <td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
-              <img width="1" height="25" style="opacity: 0">
              <span class="skeleton-loader" style="max-width: 125px"></span>
            </td>
            <td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
@@ -98,7 +94,7 @@
            <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader" style="max-width: 125px"></span>
            </td>
-            <td *ngIf="auditAvailable" class="health text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
+            <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
            <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
@@ -107,6 +103,9 @@
            <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
+            <td *ngIf="auditAvailable && !widget" class="fee-delta" [class]="indexingAvailable ? '' : 'legacy'">
+              <span class="skeleton-loader" style="max-width: 75px"></span>
+            </td>
            <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
              <span class="skeleton-loader" style="max-width: 75px"></span>
            </td>
--- a/frontend/src/app/components/blocks-list/blocks-list.component.scss
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.scss
@@ -23,6 +23,17 @@ tr, td, th {
  border: 0px;
  padding-top: 0.65rem !important;
  padding-bottom: 0.7rem !important;
+
+  .difference {
+    margin-left: 0.5em;
+
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
 }

 .clear-link {
@@ -51,7 +62,12 @@ tr, td, th {
 .pool.widget {
  width: 40%;
  padding-left: 24px;
-  @media (max-width: 376px) {
+  @media (min-width: 768px) AND (max-width: 926px) {
+    padding-left: 0px;
+    width: 60%;
+  }
+  @media (max-width: 430px) {
+    padding-left: 0px;
    width: 60%;
  }
 }
@@ -59,6 +75,10 @@ tr, td, th {
  display: inline-block;
  vertical-align: text-top;
  padding-left: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 160px;
 }

 .height {
@@ -69,13 +89,19 @@ tr, td, th {
  @media (max-width: 576px) {
    width: 10%;
  }
+  @media (min-width: 768px) AND (max-width: 926px) {
+    width: 30%;
+  }
+  @media (max-width: 430px) {
+    width: 30%;
+  }
 }
 .height.legacy {
  width: 15%;
 }

 .timestamp {
-  width: 18%;
+  width: 10%;
  @media (max-width: 1100px) {
    display: none;
  }
@@ -92,7 +118,7 @@ tr, td, th {

 .mined {
  width: 13%;
-  @media (max-width: 576px) {
+  @media (max-width: 730px) {
    display: none;
  }
 }
@@ -108,8 +134,8 @@ tr, td, th {
 }

 .txs {
-  padding-right: 40px;
-  width: 8%;
+  padding-right: 20px;
+  width: 6%;
  @media (max-width: 1100px) {
    padding-right: 10px;
  }
@@ -138,13 +164,23 @@ tr, td, th {

 .fees {
  width: 8%;
-  @media (max-width: 650px) {
+  @media (max-width: 820px) {
    display: none;
  }
 }
 .fees.widget {
  width: 20%;
 }
+.fee-delta {
+  width: 6%;
+  padding-left: 0;
+  @media (max-width: 991px) {
+    display: none;
+  }
+}
+.fee-delta.widget {
+  display: none;
+}

 .reward {
  width: 8%;
@@ -163,6 +199,16 @@ tr, td, th {
    width: 30%;
    padding-right: 0;
  }
+  @media (min-width: 768px) AND (max-width: 926px) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90px;
+  }
+  @media (max-width: 430px) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90px;
+  }
 }

 .size {
@@ -189,10 +235,10 @@ tr, td, th {

 .health {
  width: 10%;
-  @media (max-width: 1000px) {
+  @media (max-width: 1100px) {
    width: 13%;
  }
-  @media (max-width: 950px) {
+  @media (max-width: 560px) {
    display: none;
  }

@@ -202,7 +248,7 @@ tr, td, th {
 }
 .health.widget {
  width: 25%;
-  @media (max-width: 1000px) {
+  @media (max-width: 1105px) {
    display: none;
  }
  @media (max-width: 767px) {
@@ -242,4 +288,4 @@ tr, td, th {
 	vertical-align: middle;
 	max-width: 50vw;
  text-align: left;
-}
+}
--- a/frontend/src/app/components/blocks-list/blocks-list.component.ts
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input } from '@angular/core';
-import { BehaviorSubject, combineLatest, concat, Observable, timer, EMPTY, Subscription, of } from 'rxjs';
-import { catchError, delayWhen, map, retryWhen, scan, skip, switchMap, tap } from 'rxjs/operators';
+import { Component, OnInit, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { BehaviorSubject, combineLatest, Observable, timer, of } from 'rxjs';
+import { delayWhen, map, retryWhen, scan, switchMap, tap } from 'rxjs/operators';
 import { BlockExtended } from '../../interfaces/node-api.interface';
 import { ApiService } from '../../services/api.service';
 import { StateService } from '../../services/state.service';
@@ -12,19 +12,14 @@ import { WebsocketService } from '../../services/websocket.service';
  styleUrls: ['./blocks-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BlocksList implements OnInit, OnDestroy {
+export class BlocksList implements OnInit {
  @Input() widget: boolean = false;

  blocks$: Observable<BlockExtended[]> = undefined;
-  auditScores: { [hash: string]: number | void } = {};
-
-  auditScoreSubscription: Subscription;
-  latestScoreSubscription: Subscription;

  indexingAvailable = false;
  auditAvailable = false;
  isLoading = true;
-  loadingScores = true;
  fromBlockHeight = undefined;
  paginationMaxSize: number;
  page = 1;
@@ -39,6 +34,7 @@ export class BlocksList implements OnInit, OnDestroy {
    private apiService: ApiService,
    private websocketService: WebsocketService,
    public stateService: StateService,
+    private cd: ChangeDetectorRef,
  ) {
  }

@@ -65,7 +61,7 @@ export class BlocksList implements OnInit, OnDestroy {
                  this.blocksCount = blocks[0].height + 1;
                }
                this.isLoading = false;
-                this.lastBlockHeight = Math.max(...blocks.map(o => o.height))
+                this.lastBlockHeight = Math.max(...blocks.map(o => o.height));
              }),
              map(blocks => {
                if (this.indexingAvailable) {
@@ -81,17 +77,17 @@ export class BlocksList implements OnInit, OnDestroy {
                return blocks;
              }),
              retryWhen(errors => errors.pipe(delayWhen(() => timer(10000))))
-            )
+            );
        })
      ),
      this.stateService.blocks$
        .pipe(
-          switchMap((block) => {
-            if (block[0].height <= this.lastBlockHeight) {
+          switchMap((blocks) => {
+            if (blocks[0].height <= this.lastBlockHeight) {
              return [null]; // Return an empty stream so the last pipe is not executed
            }
-            this.lastBlockHeight = block[0].height;
-            return [block];
+            this.lastBlockHeight = blocks[0].height;
+            return blocks;
          })
        )
    ])
@@ -112,68 +108,25 @@ export class BlocksList implements OnInit, OnDestroy {
            acc = acc.slice(0, this.widget ? 6 : 15);
          }
          return acc;
-        }, [])
-      );
-
-    if (this.indexingAvailable && this.auditAvailable) {
-      this.auditScoreSubscription = this.fromHeightSubject.pipe(
-        switchMap((fromBlockHeight) => {
-          this.loadingScores = true;
-          return this.apiService.getBlockAuditScores$(this.page === 1 ? undefined : fromBlockHeight)
-            .pipe(
-              catchError(() => {
-                return EMPTY;
-              })
-            );
+        }, []),
+        switchMap((blocks) => {
+          blocks.forEach(block => {
+            block.extras.feeDelta = block.extras.expectedFees ? (block.extras.totalFees - block.extras.expectedFees) / block.extras.expectedFees : 0;
+          });
+          return of(blocks);
        })
-      ).subscribe((scores) => {
-        Object.values(scores).forEach(score => {
-          this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
-        });
-        this.loadingScores = false;
-      });
-
-      this.latestScoreSubscription = this.stateService.blocks$.pipe(
-        switchMap((block) => {
-          if (block[0]?.extras?.matchRate != null) {
-            return of({
-              hash: block[0].id,
-              matchRate: block[0]?.extras?.matchRate,
-            });
-          }
-          else if (block[0]?.id && this.auditScores[block[0].id] === undefined) {
-            return this.apiService.getBlockAuditScore$(block[0].id)
-              .pipe(
-                catchError(() => {
-                  return EMPTY;
-                })
-              );
-          } else {
-            return EMPTY;
-          }
-        }),
-      ).subscribe((score) => {
-        if (score && score.hash) {
-          this.auditScores[score.hash] = score?.matchRate != null ? score.matchRate : null;
-        }
-      });
-    }
+      );
  }

-  ngOnDestroy(): void {
-    this.auditScoreSubscription?.unsubscribe();
-    this.latestScoreSubscription?.unsubscribe();
-  }
-
-  pageChange(page: number) {
+  pageChange(page: number): void {
    this.fromHeightSubject.next((this.blocksCount - 1) - (page - 1) * 15);
  }

-  trackByBlock(index: number, block: BlockExtended) {
+  trackByBlock(index: number, block: BlockExtended): number {
    return block.height;
  }

-  isEllipsisActive(e) {
+  isEllipsisActive(e): boolean {
    return (e.offsetWidth < e.scrollWidth);
  }
 }
--- a/frontend/src/app/components/calculator/calculator.component.html
+++ b/frontend/src/app/components/calculator/calculator.component.html
@@ -0,0 +1,69 @@
+<div class="container-xl">
+  <div class="text-center">
+    <h2>Calculator</h2>
+  </div>
+
+  <ng-container *ngIf="price$ | async; else loading">
+
+    <div class="row justify-content-center">
+
+      <form [formGroup]="form">
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">{{ currency$ | async }}</span>
+          </div>
+          <input type="text" class="form-control" formControlName="fiat" (input)="transformInput('fiat')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('fiat').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">BTC</span>
+          </div>
+          <input type="text" class="form-control" formControlName="bitcoin" (input)="transformInput('bitcoin')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('bitcoin').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+
+        <div class="input-group input-group-lg mb-1">
+          <div class="input-group-prepend">
+            <span class="input-group-text">sats</span>
+          </div>
+          <input type="text" class="form-control" formControlName="satoshis" (input)="transformInput('satoshis')" (click)="selectAll($event)">
+          <app-clipboard [button]="true" [text]="form.get('satoshis').value" [class]="'btn btn-lg btn-secondary ml-1'"></app-clipboard>
+        </div>
+      </form>
+
+    </div>
+
+    <br>
+
+    <div class="row justify-content-center">
+      <div class="bitcoin-satoshis-text">
+        ₿
+         <span [innerHTML]="form.get('bitcoin').value | bitcoinsatoshis"></span> 
+        <span class="sats"> sats</span>
+      </div>
+    </div>
+
+    <div class="row justify-content-center">
+      <div class="fiat-text">
+        <app-fiat [value]="form.get('satoshis').value" digitsInfo="1.0-0"></app-fiat>
+      </div>
+    </div>
+
+    <div class="row justify-content-center mt-3">
+      <div class="symbol">
+        Fiat price last updated <app-time kind="since" [time]="lastFiatPrice$ | async" [fastRender]="true"></app-time>
+      </div>
+    </div>
+
+
+  </ng-container>
+
+  <ng-template #loading>
+    <div class="text-center">
+      Waiting for price feed...
+    </div>
+  </ng-template>
+
+</div>
--- a/frontend/src/app/components/calculator/calculator.component.scss
+++ b/frontend/src/app/components/calculator/calculator.component.scss
@@ -0,0 +1,30 @@
+.input-group-text {
+  width: 75px;
+}
+
+.bitcoin-satoshis-text {
+  font-size: 40px;
+}
+
+.fiat-text {
+  font-size: 24px;
+}
+
+.symbol {
+  font-style: italic;
+}
+
+@media (max-width: 767.98px) {
+  .bitcoin-satoshis-text {
+    font-size: 30px;
+  }
+}
+
+.sats {
+  font-size: 20px;
+  margin-left: 5px;
+}
+
+.row {
+  margin: auto;
+}
--- a/frontend/src/app/components/calculator/calculator.component.ts
+++ b/frontend/src/app/components/calculator/calculator.component.ts
@@ -0,0 +1,137 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { combineLatest, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { StateService } from '../../services/state.service';
+import { WebsocketService } from '../../services/websocket.service';
+
+@Component({
+  selector: 'app-calculator',
+  templateUrl: './calculator.component.html',
+  styleUrls: ['./calculator.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CalculatorComponent implements OnInit {
+  satoshis = 10000;
+  form: FormGroup;
+
+  currency$ = this.stateService.fiatCurrency$;
+  price$: Observable<number>;
+  lastFiatPrice$: Observable<number>;
+
+  constructor(
+    private stateService: StateService,
+    private formBuilder: FormBuilder,
+    private websocketService: WebsocketService,
+  ) { }
+
+  ngOnInit(): void {
+    this.form = this.formBuilder.group({
+      fiat: [0],
+      bitcoin: [0],
+      satoshis: [0],
+    });
+
+    this.lastFiatPrice$ = this.stateService.conversions$.asObservable()
+      .pipe(
+        map((conversions) => conversions.time)
+      );
+
+    let currency;
+    this.price$ = this.currency$.pipe(
+      switchMap((result) => {
+        currency = result; 
+        return this.stateService.conversions$.asObservable();
+      }),
+      map((conversions) => {
+        return conversions[currency];
+      })
+    );
+
+    combineLatest([
+      this.price$,
+      this.form.get('fiat').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = (value / price).toFixed(8);
+      const satsRate = Math.round(value / price * 100_000_000);
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('bitcoin').setValue(rate, { emitEvent: false });
+      this.form.get('satoshis').setValue(satsRate, { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('bitcoin').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = parseFloat((value * price).toFixed(8));
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('satoshis').setValue(Math.round(value * 100_000_000), { emitEvent: false } );
+    });
+
+    combineLatest([
+      this.price$,
+      this.form.get('satoshis').valueChanges
+    ]).subscribe(([price, value]) => {
+      const rate = parseFloat((value / 100_000_000 * price).toFixed(8));
+      const bitcoinRate = (value / 100_000_000).toFixed(8);
+      if (isNaN(value)) {
+        return;
+      }
+      this.form.get('fiat').setValue(rate, { emitEvent: false } );
+      this.form.get('bitcoin').setValue(bitcoinRate, { emitEvent: false });
+    });
+
+  }
+
+  transformInput(name: string): void {
+    const formControl = this.form.get(name);
+    if (!formControl.value) {
+      return formControl.setValue('', {emitEvent: false});
+    }
+    let value = formControl.value.replace(',', '.').replace(/[^0-9.]/g, '');
+    if (value === '.') {
+      value = '0';
+    }
+    let sanitizedValue = this.removeExtraDots(value);
+    if (name === 'bitcoin' && this.countDecimals(sanitizedValue) > 8) {
+      sanitizedValue = this.toFixedWithoutRounding(sanitizedValue, 8);
+    }
+    if (sanitizedValue === '') {
+      sanitizedValue = '0';
+    }
+    if (name === 'satoshis') {
+      sanitizedValue = parseFloat(sanitizedValue).toFixed(0);
+    }
+    formControl.setValue(sanitizedValue, {emitEvent: true});
+  }
+
+  removeExtraDots(str: string): string {
+    const [beforeDot, afterDot] = str.split('.', 2);
+    if (afterDot === undefined) {
+      return str;
+    }
+    const afterDotReplaced = afterDot.replace(/\./g, '');
+    return `${beforeDot}.${afterDotReplaced}`;
+  }
+
+  countDecimals(numberString: string): number {
+    const decimalPos = numberString.indexOf('.');
+    if (decimalPos === -1) return 0;
+    return numberString.length - decimalPos - 1;
+  }
+
+  toFixedWithoutRounding(numStr: string, fixed: number): string {
+    const re = new RegExp(`^-?\\d+(?:.\\d{0,${(fixed || -1)}})?`);
+    const result = numStr.match(re);
+    return result ? result[0] : numStr;
+  }
+
+  selectAll(event): void {
+    event.target.select();
+  }
+}
--- a/frontend/src/app/components/change/change.component.html
+++ b/frontend/src/app/components/change/change.component.html
@@ -1,3 +1,3 @@
 <span [style]="change >= 0 ? 'color: #42B747' : 'color: #B74242'">
-  {{ change >= 0 ? '+' : '' }}{{ change | amountShortener }}%
+  &lrm;{{ change >= 0 ? '+' : '' }}{{ change | amountShortener }}%
 </span>
--- a/frontend/src/app/components/clock-face/clock-face.component.html
+++ b/frontend/src/app/components/clock-face/clock-face.component.html
@@ -0,0 +1,42 @@
+<div class="clock-face" [style]="faceStyle">
+  <ng-content></ng-content>
+  <svg
+    class="cut-out"
+    width="384"
+    height="384"
+    viewBox="0 0 384 384"
+  >
+    <g>
+      <path
+        class="face"
+        d="M 0,0 V 384 H 384 V 0 Z M 192,15 A 177,177 0 0 1 369,192 177,177 0 0 1 192,369 177,177 0 0 1 15,192 177,177 0 0 1 192,15 Z"
+      />
+    </g>
+  </svg>
+
+  <svg
+    class="demo-dial"
+    width="384"
+    height="384"
+    viewBox="0 0 384 384"
+  >
+    <defs>
+      <pattern id="dial-gradient" patternUnits="userSpaceOnUse" width="384" height="384">
+        <image class="dial-gradient-img" href="/resources/clock/gradient.png" x="0" y="0" width="384" height="384" [style.transform]="'rotate(' + (minutes * 6) + 'deg)'" />
+      </pattern>
+    </defs>
+
+    <path *ngFor="let angle of minorTicks" class="tick minor" d="M 192,27 v 10" [style.transform]="'rotate(' + angle + 'deg)'"/>
+    <path *ngFor="let angle of majorTicks" class="tick major" d="M 192,27 v 18" [style.transform]="'rotate(' + angle + 'deg)'"/>
+
+    <ng-container *ngFor="let segment of segments; trackBy: trackBySegment">
+      <path class="block-segment" [attr.d]="segment.path" />
+      <!-- <circle class="segment-mark start" [attr.cx]="segment.start.x" [attr.cy]="segment.start.y" r="2" style="fill:green;stroke:white;stroke-width:1px;" />
+      <circle class="segment-mark end" [attr.cx]="segment.end.x" [attr.cy]="segment.end.y" r="2" style="fill:red;stroke:white;stroke-width:1px;" /> -->
+    </ng-container>
+    <!-- <polyline points="468.750,82.031 468.750,35 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" /> -->
+    <path class="tick very major" d="M 192,0 v 45" />
+    <path id="hour" class="gnomon hour" d="M 178,3 206,3 192,40 Z" [style.transform]="'rotate(' + (hours * 30) + 'deg)'" />
+    <path id="minute" class="gnomon minute" d="M 180,4 204,4 192,38 Z" [style.transform]="'rotate(' + (minutes * 6) + 'deg)'" />
+  </svg>
+</div>
--- a/frontend/src/app/components/clock-face/clock-face.component.scss
+++ b/frontend/src/app/components/clock-face/clock-face.component.scss
@@ -0,0 +1,69 @@
+.clock-face {
+  position: relative;
+  height: 84.375%;
+  margin: auto;
+  overflow: hidden;
+
+  .cut-out, .demo-dial {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+
+    .face {
+      fill: #11131f;
+    }
+  }
+
+  .gnomon {
+    transform-origin: center;
+    stroke-linejoin: round;
+
+    &.minute {
+      fill:#80C2E1;
+      stroke:#80C2E1;
+      stroke-width: 2px;
+    }
+
+    &.hour {
+      fill: #105fb0;
+      stroke: #105fb0;
+      stroke-width: 6px;
+    }
+  }
+
+  .tick {
+    transform-origin: center;
+    fill: none;
+    stroke: white;
+    stroke-width: 2px;
+    stroke-linecap: butt;
+
+    &.minor {
+      stroke-opacity: 0.5;
+    }
+
+    &.very.major {
+      stroke-width: 4px;
+    }
+  }
+
+  .block-segment {
+    fill: none;
+    stroke: url(#dial-gradient);
+    stroke-width: 18px;
+  }
+
+  .dial-segment {
+    fill: none;
+    stroke: white;
+    stroke-width: 2px;
+  }
+
+  .dial-gradient-img {
+    transform-origin: center;
+  }
+}
--- a/frontend/src/app/components/clock-face/clock-face.component.ts
+++ b/frontend/src/app/components/clock-face/clock-face.component.ts
@@ -0,0 +1,144 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Subscription, tap, timer } from 'rxjs';
+import { WebsocketService } from '../../services/websocket.service';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-clock-face',
+  templateUrl: './clock-face.component.html',
+  styleUrls: ['./clock-face.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() size: number = 300;
+
+  blocksSubscription: Subscription;
+  timeSubscription: Subscription;
+
+  faceStyle;
+  dialPath;
+  blockTimes = [];
+  segments = [];
+  hours: number = 0;
+  minutes: number = 0;
+  minorTicks: number[] = [];
+  majorTicks: number[] = [];
+
+  constructor(
+    public stateService: StateService,
+    private cd: ChangeDetectorRef
+  ) {
+    this.updateTime();
+    this.makeTicks();
+  }
+
+  ngOnInit(): void {
+    this.timeSubscription = timer(0, 250).pipe(
+      tap(() => {
+        this.updateTime();
+      })
+    ).subscribe();
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe((blocks) => {
+        this.blockTimes = blocks.map(block => [block.height, new Date(block.timestamp * 1000)]);
+        this.blockTimes = this.blockTimes.sort((a, b) => a[1].getTime() - b[1].getTime());
+        this.updateSegments();
+      });
+  }
+
+  ngOnChanges(): void {
+    this.faceStyle = {
+      width: `${this.size}px`,
+      height: `${this.size}px`,
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.timeSubscription.unsubscribe();
+  }
+
+  updateTime(): void {
+    const now = new Date();
+    const seconds = now.getSeconds() + (now.getMilliseconds() / 1000);
+    this.minutes = (now.getMinutes() + (seconds / 60)) % 60;
+    this.hours = now.getHours() + (this.minutes / 60);
+    this.updateSegments();
+  }
+
+  updateSegments(): void {
+    const now = new Date();
+    this.blockTimes = this.blockTimes.filter(time => (now.getTime() - time[1].getTime()) <= 3600000);
+    const tail = new Date(now.getTime() - 3600000);
+    const hourStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours());
+
+    const times = [
+      ['start', tail],
+      ...this.blockTimes,
+      ['end', now],
+    ];
+    const minuteTimes = times.map(time => {
+      return [time[0], (time[1].getTime() - hourStart.getTime()) / 60000];
+    });
+    this.segments = [];
+    const r = 174;
+    const cx = 192;
+    const cy = cx;
+    for (let i = 1; i < minuteTimes.length; i++) {
+      const arc = this.getArc(minuteTimes[i-1][1], minuteTimes[i][1], r, cx, cy);
+      if (arc) {
+        arc.id = minuteTimes[i][0];
+        this.segments.push(arc);
+      }
+    }
+    const arc = this.getArc(minuteTimes[0][1], minuteTimes[1][1], r, cx, cy);
+    if (arc) {
+      this.dialPath = arc.path;
+    }
+
+    this.cd.markForCheck();
+  }
+
+  getArc(startTime, endTime, r, cx, cy): any {
+    const startDegrees = (startTime + 0.2) * 6;
+      const endDegrees = (endTime - 0.2) * 6;
+      const start = this.getPointOnCircle(startDegrees, r, cx, cy);
+      const end = this.getPointOnCircle(endDegrees, r, cx, cy);
+      const arcLength = endDegrees - startDegrees;
+      // merge gaps and omit lines shorter than 1 degree
+      if (arcLength >= 1) {
+        const path = `M ${start.x} ${start.y} A ${r} ${r} 0 ${arcLength > 180 ? 1 : 0} 1 ${end.x} ${end.y}`;
+        return {
+          path,
+          start,
+          end
+        };
+      } else {
+        return null;
+      }
+  }
+
+  getPointOnCircle(deg, r, cx, cy) {
+    const modDeg = ((deg % 360) + 360) % 360;
+    const rad = (modDeg * Math.PI) / 180;
+    return {
+      x: cx + (r * Math.sin(rad)),
+      y: cy - (r * Math.cos(rad)),
+    };
+  }
+
+  makeTicks() {
+    this.minorTicks = [];
+    this.majorTicks = [];
+    for (let i = 1; i < 60; i++) {
+      if (i % 5 === 0) {
+        this.majorTicks.push(i * 6);
+      } else {
+        this.minorTicks.push(i * 6);
+      }
+    }
+  }
+
+  trackBySegment(index: number, segment) {
+    return segment.id;
+  }
+}
--- a/frontend/src/app/components/clock/clock.component.html
+++ b/frontend/src/app/components/clock/clock.component.html
@@ -0,0 +1,74 @@
+<div class="clock-wrapper" [style]="wrapperStyle">
+  <div class="clockchain-bar" [style.height]="chainHeight + 'px'">
+    <div class="clockchain">
+      <app-clockchain
+        [width]="chainWidth"
+        [height]="chainHeight"
+        [mode]="mode"
+        [index]="blockIndex"
+      ></app-clockchain>
+    </div>
+  </div>
+  <div class="clock-face">
+    <app-clock-face [size]="clockSize">
+      <div class="block-wrapper">
+        <ng-container *ngIf="blocks && blocks.length">
+          <ng-container *ngIf="mode === 'mined'; else mempoolMode;">
+            <div class="block-cube">
+              <div class="side top"></div>
+              <div class="side bottom"></div>
+              <div class="side right" [style]="blockStyle"></div>
+              <div class="side left" [style]="blockStyle"></div>
+              <div class="side front" [style]="blockStyle"></div>
+              <div class="side back" [style]="blockStyle"></div>
+            </div>
+          </ng-container>
+          <ng-template #mempoolMode>
+            <div class="block-sizer" [style]="blockSizerStyle">
+              <app-mempool-block-overview [index]="blockIndex"></app-mempool-block-overview>
+            </div>
+          </ng-template>
+          <div class="fader"></div>
+          <div class="title-wrapper">
+            <h1 class="block-height">{{ blocks[mode === 'mempool' ? 0 : blockIndex].height }}</h1>
+          </div>
+        </ng-container>
+      </div>
+    </app-clock-face>
+  </div>
+  <ng-container *ngIf="!hideStats">
+    <div class="stats top left">
+      <p class="label" i18n="clock.fiat-price">fiat price</p>
+      <p>
+        <app-fiat [value]="100000000" digitsInfo="1.2-2" colorClass="white-color"></app-fiat>
+      </p>
+    </div>
+    <div class="stats top right">
+      <p class="label" i18n="clock.priority-rate|priority fee rate">priority rate</p>
+      <p *ngIf="recommendedFees$ | async as recommendedFees;">
+        <app-fee-rate [fee]="recommendedFees.fastestFee" unitClass="" rounding="1.0-0"></app-fee-rate>
+      </p>
+    </div>
+    <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom left">
+      <p [innerHTML]="blocks[blockIndex].size | bytes: 2"></p>
+      <p class="label" i18n="clock.block-size">block size</p>
+    </div>
+    <div *ngIf="mode !== 'mempool' && blocks?.length" class="stats bottom right">
+      <p class="force-wrap">
+        <ng-container *ngTemplateOutlet="blocks[blockIndex].tx_count === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: blocks[blockIndex].tx_count | number}"></ng-container>
+        <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} <span class="label">transaction</span></ng-template>
+        <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} <span class="label">transactions</span></ng-template>
+      </p>
+    </div>
+    <ng-container *ngIf="mempoolInfo$ | async as mempoolInfo;">
+      <div *ngIf="mode === 'mempool'" class="stats bottom left">
+        <p [innerHTML]="mempoolInfo.usage | bytes: 0"></p>
+        <p class="label" i18n="dashboard.memory-usage|Memory usage">memory usage</p>
+      </div>
+      <div *ngIf="mode === 'mempool'" class="stats bottom right">
+        <p>{{ mempoolInfo.size | number }}</p>
+        <p class="label" i18n="dashboard.unconfirmed|Unconfirmed count">unconfirmed</p>
+      </div>
+    </ng-container>
+  </ng-container>
+</div>
--- a/frontend/src/app/components/clock/clock.component.scss
+++ b/frontend/src/app/components/clock/clock.component.scss
@@ -0,0 +1,191 @@
+.clock-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  --chain-height: 60px;
+  --clock-width: 300px;
+
+  .clockchain-bar, .clock-face {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  .clockchain-bar {
+    position: relative;
+    width: 100%;
+    height: 15.625%;
+    z-index: 2;
+    // overflow: hidden;
+    // background: #1d1f31;
+    // box-shadow: 0 0 15px #000;
+  }
+
+  .clock-face {
+    position: relative;
+    height: 84.375%;
+    margin: auto;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  .stats {
+    position: absolute;
+    z-index: 3;
+
+    p {
+      margin: 0;
+      font-size: calc(0.055 * var(--clock-width));
+      line-height: calc(0.05 * var(--clock-width));
+      opacity: 0.8;
+
+      &.force-wrap {
+        word-spacing: 10000px;
+      }
+
+      ::ng-deep .symbol {
+        font-size: inherit;
+        color: white;
+      }
+    }
+
+    .label {
+      font-size: calc(0.04 * var(--clock-width));
+      line-height: calc(0.05 * var(--clock-width));
+    }
+
+    &.top {
+      top: calc(var(--chain-height) + 2%);
+    }
+    &.bottom {
+      bottom: 2%;
+    }
+    &.left {
+      left: 5%;
+    }
+    &.right {
+      right: 5%;
+      text-align: end;
+      text-align: right;
+    }
+  }
+}
+
+.title-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+
+  .block-height {
+    font-size: calc(0.2 * var(--clock-width));
+    padding: 0;
+    margin: 0;
+    background: radial-gradient(rgba(0,0,0,0.5), transparent 67%);
+    padding: calc(0.05 * var(--clock-width)) calc(0.15 * var(--clock-width));
+  }
+}
+
+.block-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  .block-sizer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .fader {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: radial-gradient(transparent 0%, transparent 44%, #11131f 58%, #11131f 100%);
+  }
+
+  .block-cube {
+    --side-width: calc(0.4 * var(--clock-width));
+    --half-side: calc(0.2 * var(--clock-width));
+    --neg-half-side: calc(-0.2 * var(--clock-width));
+    transform-style: preserve-3d;
+    animation: block-spin 60s infinite linear;
+    position: absolute;
+    z-index: -1;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--side-width);
+    height: var(--side-width);
+
+    .side {
+      width: var(--side-width);
+      height: var(--side-width);
+      line-height: 100px;
+      text-align: center;
+      background: #232838;
+      display: block;
+      position: absolute;
+    }
+
+    .side.top {
+      transform: rotateX(90deg); 
+      margin-top: var(--neg-half-side);
+    }
+
+    .side.bottom {
+      background: #105fb0;
+      transform: rotateX(-90deg); 
+      margin-top: var(--half-side);
+    }
+
+    .side.right {
+      transform: rotateY(90deg); 
+      margin-left: var(--half-side);
+    }
+
+    .side.left {
+      transform: rotateY(-90deg); 
+      margin-left: var(--neg-half-side);
+    }
+
+    .side.front {
+      transform: translateZ(var(--half-side));
+    }
+
+    .side.back {
+      transform: translateZ(var(--neg-half-side));
+    }
+  }
+}
+
+@keyframes block-spin {
+  0% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);}
+  100% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-360deg);}
+}
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@@ -0,0 +1,133 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, Input, OnInit } from '@angular/core';
+import { Observable, Subscription, of, switchMap, tap } from 'rxjs';
+import { StateService } from '../../services/state.service';
+import { BlockExtended } from '../../interfaces/node-api.interface';
+import { WebsocketService } from '../../services/websocket.service';
+import { MempoolInfo, Recommendedfees } from '../../interfaces/websocket.interface';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
+import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
+
+@Component({
+  selector: 'app-clock',
+  templateUrl: './clock.component.html',
+  styleUrls: ['./clock.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockComponent implements OnInit {
+  hideStats: boolean = false;
+  mode: 'mempool' | 'mined' = 'mined';
+  blockIndex: number;
+  pageSubscription: Subscription;
+  blocksSubscription: Subscription;
+  recommendedFees$: Observable<Recommendedfees>;
+  mempoolInfo$: Observable<MempoolInfo>;
+  blocks: BlockExtended[] = [];
+  clockSize: number = 300;
+  chainWidth: number = 384;
+  chainHeight: number = 60;
+  blockStyle;
+  blockSizerStyle;
+  wrapperStyle;
+  limitWidth: number;
+  limitHeight: number;
+
+  gradientColors = {
+    '': ['#9339f4', '#105fb0'],
+    bisq: ['#9339f4', '#105fb0'],
+    liquid: ['#116761', '#183550'],
+    'liquidtestnet': ['#494a4a', '#272e46'],
+    testnet: ['#1d486f', '#183550'],
+    signet: ['#6f1d5d', '#471850'],
+  };
+
+  constructor(
+    public stateService: StateService,
+    private websocketService: WebsocketService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private relativeUrlPipe: RelativeUrlPipe,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.route.queryParams.subscribe((params) => {
+      this.hideStats = params && params.stats === 'false';
+      this.limitWidth = Number.parseInt(params.width) || null;
+      this.limitHeight = Number.parseInt(params.height) || null;
+    });
+  }
+
+  ngOnInit(): void {
+    this.resizeCanvas();
+    this.websocketService.want(['blocks', 'stats', 'mempool-blocks']);
+
+    this.blocksSubscription = this.stateService.blocks$
+      .subscribe((blocks) => {
+        this.blocks = blocks.slice(0, 16);
+        if (this.blocks[this.blockIndex]) {
+          this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]);
+          this.cd.markForCheck();
+        }
+      });
+
+    this.recommendedFees$ = this.stateService.recommendedFees$;
+    this.mempoolInfo$ = this.stateService.mempoolInfo$;
+
+    this.pageSubscription = this.route.paramMap.pipe(
+      switchMap((params: ParamMap) => {
+        const rawMode: string = params.get('mode');
+        const mode = rawMode === 'mempool' ? 'mempool' : 'mined';
+        const index: number = Number.parseInt(params.get('index'));
+        if (mode !== rawMode || index < 0 || isNaN(index)) {
+          this.router.navigate([this.relativeUrlPipe.transform('/clock'), mode, index || 0]);
+        }
+        return of({
+          mode,
+          index,
+        });
+      }),
+      tap((page: { mode: 'mempool' | 'mined', index: number }) => {
+        this.mode = page.mode;
+        this.blockIndex = page.index || 0;
+        if (this.blocks[this.blockIndex]) {
+          this.blockStyle = this.getStyleForBlock(this.blocks[this.blockIndex]);
+          this.cd.markForCheck();
+        }
+      })
+    ).subscribe();
+  }
+
+  getStyleForBlock(block: BlockExtended) {
+    const greenBackgroundHeight = 100 - (block.weight / this.stateService.env.BLOCK_WEIGHT_UNITS) * 100;
+
+    return {
+      background: `repeating-linear-gradient(
+        #2d3348,
+        #2d3348 ${greenBackgroundHeight}%,
+        ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
+        ${this.gradientColors[''][1]} 100%
+      )`,
+    };
+  }
+  
+  @HostListener('window:resize', ['$event'])
+  resizeCanvas(): void {
+    const windowWidth = this.limitWidth || window.innerWidth;
+    const windowHeight = this.limitHeight || window.innerHeight;
+    this.chainWidth = windowWidth;
+    this.chainHeight = Math.max(60, windowHeight / 8);
+    this.clockSize = Math.min(800, windowWidth, windowHeight - (1.4 * this.chainHeight));
+    const size = Math.ceil(this.clockSize / 75) * 75;
+    const margin = (this.clockSize - size) / 2;
+    this.blockSizerStyle = {
+      transform: `translate(${margin}px, ${margin}px)`,
+      width: `${size}px`,
+      height: `${size}px`,
+    };
+    this.wrapperStyle = {
+      '--clock-width': `${this.clockSize}px`,
+      '--chain-height': `${this.chainHeight}px`,
+      'width': this.limitWidth ? `${this.limitWidth}px` : undefined,
+      'height': this.limitHeight ? `${this.limitHeight}px` : undefined,
+    };
+    this.cd.markForCheck();
+  }
+}
--- a/frontend/src/app/components/clockchain/clockchain.component.html
+++ b/frontend/src/app/components/clockchain/clockchain.component.html
@@ -0,0 +1,40 @@
+<div
+  class="text-center" class="blockchain-wrapper" [class.time-ltr]="timeLtr" #container
+  [class.ltr-transition]="ltrTransitionEnabled" [style.width]="width + 'px'" [style.height]="height + 'px'"
+>
+  <div class="position-container" [ngClass]="network ? network : ''" [style.top]="(height / 3) + 'px'">
+    <span>
+      <div class="blocks-wrapper">
+        <app-mempool-blocks
+          [minimal]="true"
+          [count]="mempoolBlocks"
+          [blockWidth]="blockWidth"
+          [spotlight]="mode === 'mempool' ? index + 1 : 0"
+          [getHref]="getMempoolUrl"
+        ></app-mempool-blocks>
+        <app-blockchain-blocks
+          [minimal]="true"
+          [count]="blockchainBlocks"
+          [blockWidth]="blockWidth"
+          [spotlight]="mode === 'mined' ? -index - 1 : 0"
+          [getHref]="getMinedUrl"
+        ></app-blockchain-blocks>
+      </div>
+      <div class="divider" [style.top]="-(height / 6) + 'px'">
+        <svg
+          viewBox="0 0 2 175"
+          [style.width]="'2px'"
+          [style.height]="(5 * height / 6) + 'px'"
+        >
+          <line
+            class="divider-line"
+            x0="0"
+            x1="0"
+            y0="0"
+            y1="175px"
+          ></line>
+        </svg>
+      </div>
+    </span>
+  </div>
+</div>
--- a/frontend/src/app/components/clockchain/clockchain.component.scss
+++ b/frontend/src/app/components/clockchain/clockchain.component.scss
@@ -0,0 +1,94 @@
+.divider {
+  position: absolute;
+  left: -0.5px;
+  top: 0;
+  .divider-line {
+    stroke: white;
+    stroke-width: 4px;
+    stroke-linecap: butt;
+    stroke-dasharray: 25px 25px;
+  }
+}
+
+.blockchain-wrapper {
+  height: 100%;
+
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.position-container {
+  position: absolute;
+  left: 50%;
+  top: 0;
+}
+
+.black-background {
+  background-color: #11131f;
+  z-index: 100;
+  position: relative;
+}
+
+.scroll-spacer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.loading-block {
+  position: absolute;
+  text-align: center;
+  margin: auto;
+  width: 300px;
+  left: -150px;
+  top: 0px;
+}
+
+.time-toggle {
+  color: white;
+  font-size: 0.8rem;
+  position: absolute;
+  bottom: -1.8em;
+  left: 1px;
+  transform: translateX(-50%);
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+}
+
+.blockchain-wrapper.ltr-transition .blocks-wrapper,
+.blockchain-wrapper.ltr-transition .position-container,
+.blockchain-wrapper.ltr-transition .time-toggle {
+  transition: transform 1s;
+}
+
+.blockchain-wrapper.time-ltr {
+  .blocks-wrapper {
+    transform: scaleX(-1);
+  }
+
+  .time-toggle {
+    transform: translateX(-50%) scaleX(-1);
+  }
+}
+
+:host-context(.ltr-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: ltr;
+  }
+}
+
+:host-context(.rtl-layout) {
+  .blockchain-wrapper.time-ltr .blocks-wrapper,
+  .blockchain-wrapper .blocks-wrapper {
+    direction: rtl;
+  }
+}
--- a/frontend/src/app/components/clockchain/clockchain.component.ts
+++ b/frontend/src/app/components/clockchain/clockchain.component.ts
@@ -0,0 +1,82 @@
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
+import { firstValueFrom, Subscription } from 'rxjs';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-clockchain',
+  templateUrl: './clockchain.component.html',
+  styleUrls: ['./clockchain.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() width: number = 300;
+  @Input() height: number = 60;
+  @Input() mode: 'mempool' | 'mined';
+  @Input() index: number = 0;
+
+  mempoolBlocks: number = 3;
+  blockchainBlocks: number = 6;
+  blockWidth: number = 50;
+  dividerStyle;
+
+  network: string;
+  timeLtrSubscription: Subscription;
+  timeLtr: boolean = this.stateService.timeLtr.value;
+  ltrTransitionEnabled = false;
+  connectionStateSubscription: Subscription;
+  loadingTip: boolean = true;
+  connected: boolean = true;
+
+  constructor(
+    public stateService: StateService,
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit() {
+    this.ngOnChanges();
+
+    this.network = this.stateService.network;
+    this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
+      this.timeLtr = !!ltr;
+    });
+    this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
+      this.connected = (state === 2);
+    });
+    firstValueFrom(this.stateService.chainTip$).then(() => {
+      this.loadingTip = false;
+    });
+  }
+
+  ngOnChanges() {
+    this.blockWidth = Math.floor(7 * this.height / 12);
+    this.mempoolBlocks = Math.floor(((this.width / 2) - (this.blockWidth * 0.32)) / (1.24 * this.blockWidth));
+    this.blockchainBlocks = this.mempoolBlocks;
+    this.dividerStyle = {
+      width: '2px',
+      height: `${this.height}px`,
+    };
+    this.cd.markForCheck();
+  }
+
+  ngOnDestroy() {
+    this.timeLtrSubscription.unsubscribe();
+    this.connectionStateSubscription.unsubscribe();
+  }
+
+  trackByPageFn(index: number, item: { index: number }) {
+    return item.index;
+  }
+
+  toggleTimeDirection() {
+    this.ltrTransitionEnabled = true;
+    this.stateService.timeLtr.next(!this.timeLtr);
+  }
+
+  getMempoolUrl(index): string {
+    return `/clock/mempool/${index}`;
+  }
+
+  getMinedUrl(index): string {
+    return `/clock/block/${index}`;
+  }
+}
--- a/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html
+++ b/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html
@@ -2,18 +2,19 @@
  <table class="table latest-adjustments">
    <thead>
      <tr>
-        <th class="d-none d-md-block" i18n="block.height">Height</th>
-        <th i18n="mining.adjusted" class="text-left">Adjusted</th>
-        <th i18n="mining.difficulty" class="text-right">Difficulty</th>
-        <th i18n="mining.change" class="text-right">Change</th>
+        <th class="" i18n="block.height">Height</th>
+        <th class="date text-left" i18n="mining.adjusted">Adjusted</th>
+        <th class="text-right" i18n="mining.difficulty">Difficulty</th>
+        <th class="text-right" i18n="mining.change">Change</th>
      </tr>
    </thead>
    <tbody *ngIf="(hashrateObservable$ | async) as data">
      <tr *ngFor="let diffChange of data">
-        <td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height
-            }}</a></td>
-        <td class="text-left">
-          <app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true"></app-time>
+        <td class="">
+          <a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a>
+        </td>
+        <td class="date text-left">
+          <app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true" [precision]="1"></app-time>
        </td>
        <td class="text-right">{{ diffChange.difficultyShorten }}</td>
        <td class="text-right" [style]="diffChange.change >= 0 ? 'color: #42B747' : 'color: #B74242'">
@@ -23,8 +24,8 @@
    </tbody>
    <tbody *ngIf="isLoading">
      <tr *ngFor="let item of [1,2,3,4,5,6]">
-        <td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td>
-        <td class="text-left"><span class="skeleton-loader w-75"></span></td>
+        <td class=""><span class="skeleton-loader"></span></td>
+        <td class="date text-left"><span class="skeleton-loader w-75"></span></td>
        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
        <td class="text-right"><span class="skeleton-loader w-75"></span></td>
      </tr>
--- a/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss
+++ b/frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss
@@ -17,3 +17,12 @@
    }
  }
 }
+
+.date {
+  @media (min-width: 767px) AND (max-width: 991px) {
+    display: none;
+  }
+  @media (max-width: 500px) {
+    display: none;
+  }
+}
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.html
@@ -10,7 +10,7 @@
            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
          </div>
-          <div class="symbol"><app-time kind="until" [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time></div>
+          <div class="symbol"><app-time kind="until" [time]="epochData.estimatedRetargetDate" [fastRender]="true" [precision]="1"></app-time></div>
        </div>
        <div class="item">
          <h5 class="card-title" i18n="difficulty-box.estimate">Estimate</h5>
@@ -47,13 +47,14 @@
          </div>
        </div>
        <div class="item" *ngIf="showHalving">
-          <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
+          <h5 class="card-title" i18n="difficulty-box.next-halving" i18n-ngbTooltip="difficulty-box.next-halving"
+          ngbTooltip="Next Halving" placement="bottom" #averagefee [disableTooltip]="!isEllipsisActive(averagefee)">Next Halving</h5>
          <div class="card-text">
            <ng-container *ngTemplateOutlet="epochData.blocksUntilHalving === 1 ? blocksSingular : blocksPlural; context: {$implicit: epochData.blocksUntilHalving }"></ng-container>
            <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
            <ng-template #blocksSingular let-i i18n="shared.block">{{ i }} <span class="shared-block">block</span></ng-template>
          </div>
-          <div class="symbol"><app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="true"></app-time></div>
+          <div class="symbol"><app-time kind="until" [time]="epochData.timeUntilHalving" [fastRender]="true" [precision]="1"></app-time></div>
        </div>
      </div>
    </div>
@@ -77,7 +78,7 @@
      </div>
    </div>
    <div class="item">
-      <h5 class="card-title" i18n="difficulty-box.current-period">Current Period</h5>
+      <h5 class="card-title" i18n="difficulty-box.next-halving">Next Halving</h5>
      <div class="card-text">
        <div class="skeleton-loader"></div>
        <div class="skeleton-loader"></div>
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@@ -10,6 +10,7 @@
  .item {
    padding: 0 5px;
    width: 100%;
+    max-width: 150px;
    &:nth-child(1) {
      display: none;
      @media (min-width: 485px) {
@@ -38,6 +39,7 @@
    flex-direction: row;
  }
  .item {
+    min-width: 120px;
    max-width: 150px;
    margin: 0;
    width: -webkit-fill-available;
@@ -84,6 +86,9 @@
 .card-title {
  color: #4a68b9;
  font-size: 1rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .progress {
@@ -151,4 +156,5 @@

 .symbol {
  font-size: 13px;
+  white-space: nowrap;
 }
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.ts
@@ -38,11 +38,12 @@ export class DifficultyMiningComponent implements OnInit {
  ngOnInit(): void {
    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
    this.difficultyEpoch$ = combineLatest([
-      this.stateService.blocks$.pipe(map(([block]) => block)),
+      this.stateService.blocks$,
      this.stateService.difficultyAdjustment$,
    ])
    .pipe(
-      map(([block, da]) => {
+      map(([blocks, da]) => {
+        const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
        let colorAdjustments = '#ffffff66';
        if (da.difficultyChange > 0) {
          colorAdjustments = '#3bcc49';
@@ -63,7 +64,7 @@ export class DifficultyMiningComponent implements OnInit {
          colorPreviousAdjustments = '#ffffff66';
        }

-        const blocksUntilHalving = 210000 - (block.height % 210000);
+        const blocksUntilHalving = 210000 - (maxHeight % 210000);
        const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);

        const data = {
@@ -83,4 +84,8 @@ export class DifficultyMiningComponent implements OnInit {
      })
    );
  }
+
+  isEllipsisActive(e): boolean {
+    return (e.offsetWidth < e.scrollWidth);
+  }
 }
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@@ -37,12 +37,12 @@
        <div class="difficulty-stats">
          <div class="item">
            <div class="card-text">
-              ~<app-time [time]="epochData.timeAvg / 1000" [forceFloorOnTimeIntervals]="['minute']" [fractionDigits]="1"></app-time>
+              ~<app-time [time]="epochData.timeAvg / 1000" [fractionDigits]="1"></app-time>
            </div>
            <div class="symbol" i18n="difficulty-box.average-block-time">Average block time</div>
          </div>
          <div class="item">
-            <div *ngIf="epochData.remainingBlocks < 1870; else recentlyAdjusted" class="card-text" [ngStyle]="{'color': epochData.colorAdjustments}">
+            <div *ngIf="epochData.remainingBlocks < 1870; else recentlyAdjusted" class="card-text bigger" [ngStyle]="{'color': epochData.colorAdjustments}">
              <span *ngIf="epochData.change > 0; else arrowDownDifficulty" >
                <fa-icon class="retarget-sign" [icon]="['fas', 'caret-up']" [fixedWidth]="true"></fa-icon>
              </span>
@@ -68,7 +68,7 @@
            </div>
          </div>
          <div class="item">
-            <div class="card-text"><app-time kind="until" [time]="epochData.estimatedRetargetDate" [fastRender]="true"></app-time></div>
+            <div class="card-text"><app-time kind="until" [time]="epochData.estimatedRetargetDate" [fastRender]="true" [precision]="1"></app-time></div>
            <div class="symbol">
              {{ epochData.retargetDateString }}
            </div>
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@@ -30,9 +30,14 @@
    }
  }
  .card-text {
-    font-size: 20px;
+    font-size: 18px;
    margin: auto;
    position: relative;
+    margin-bottom: 0.2rem;
+    &.bigger {
+      font-size: 20px;
+      margin-bottom: 0;
+    }
  }
 }

@@ -46,6 +51,7 @@
    flex-direction: row;
  }
  .item {
+    min-width: 120px;
    max-width: 150px;
    margin: 0;
    width: -webkit-fill-available;
@@ -159,6 +165,7 @@

 .symbol {
  font-size: 13px;
+  white-space: nowrap;
 }

 .epoch-progress {
--- a/frontend/src/app/components/difficulty/difficulty.component.ts
+++ b/frontend/src/app/components/difficulty/difficulty.component.ts
@@ -67,11 +67,12 @@ export class DifficultyComponent implements OnInit {
  ngOnInit(): void {
    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
    this.difficultyEpoch$ = combineLatest([
-      this.stateService.blocks$.pipe(map(([block]) => block)),
+      this.stateService.blocks$,
      this.stateService.difficultyAdjustment$,
    ])
    .pipe(
-      map(([block, da]) => {
+      map(([blocks, da]) => {
+        const maxHeight = blocks.reduce((max, block) => Math.max(max, block.height), 0);
        let colorAdjustments = '#ffffff66';
        if (da.difficultyChange > 0) {
          colorAdjustments = '#3bcc49';
@@ -92,7 +93,7 @@ export class DifficultyComponent implements OnInit {
          colorPreviousAdjustments = '#ffffff66';
        }

-        const blocksUntilHalving = 210000 - (block.height % 210000);
+        const blocksUntilHalving = 210000 - (maxHeight % 210000);
        const timeUntilHalving = new Date().getTime() + (blocksUntilHalving * 600000);
        const newEpochStart = Math.floor(this.stateService.latestBlockHeight / EPOCH_BLOCK_LENGTH) * EPOCH_BLOCK_LENGTH;
        const newExpectedHeight = Math.floor(newEpochStart + da.expectedBlocks);
--- a/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
+++ b/frontend/src/app/components/fee-distribution-graph/fee-distribution-graph.component.ts
@@ -1,53 +1,140 @@
-import { OnChanges } from '@angular/core';
+import { OnChanges, OnDestroy } from '@angular/core';
 import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { TransactionStripped } from '../../interfaces/websocket.interface';
+import { StateService } from '../../services/state.service';
+import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
+import { selectPowerOfTen } from '../../bitcoin.utils';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-fee-distribution-graph',
  templateUrl: './fee-distribution-graph.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FeeDistributionGraphComponent implements OnInit, OnChanges {
-  @Input() data: any;
+export class FeeDistributionGraphComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() feeRange: number[];
+  @Input() vsize: number;
+  @Input() transactions: TransactionStripped[];
  @Input() height: number | string = 210;
  @Input() top: number | string = 20;
  @Input() right: number | string = 22;
  @Input() left: number | string = 30;
+  @Input() numSamples: number = 200;
+  @Input() numLabels: number = 10;

+  simple: boolean = false;
+  data: number[][];
+  labelInterval: number = 50;
+
+  rateUnitSub: Subscription;
+  weightMode: boolean = false;
  mempoolVsizeFeesOptions: any;
  mempoolVsizeFeesInitOptions = {
    renderer: 'svg'
  };

-  constructor() { }
+  constructor(
+    private stateService: StateService,
+    private vbytesPipe: VbytesPipe,
+  ) { }

  ngOnInit() {
+    this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
+      this.weightMode = rateUnits === 'wu';
+      if (this.data) {
+        this.mountChart();
+      }
+    });
+  }
+
+  ngOnChanges(): void {
+    this.simple = !!this.feeRange?.length;
+    this.prepareChart();
    this.mountChart();
  }

-  ngOnChanges() {
-    this.mountChart();
+  prepareChart(): void {
+    if (this.simple) {
+      this.data = this.feeRange.map((rate, index) => [index * 10, rate]);
+      this.labelInterval = 1;
+      return;
+    }
+    this.data = [];
+    if (!this.transactions?.length) {
+      return;
+    }
+    const samples = [];
+    const txs = this.transactions.map(tx => { return { vsize: tx.vsize, rate: tx.rate || (tx.fee / tx.vsize) }; }).sort((a, b) => { return b.rate - a.rate; });
+    const maxBlockVSize = this.stateService.env.BLOCK_WEIGHT_UNITS / 4;
+    const sampleInterval = maxBlockVSize / this.numSamples;
+    let cumVSize = 0;
+    let sampleIndex = 0;
+    let nextSample = 0;
+    let txIndex = 0;
+    this.labelInterval = this.numSamples / this.numLabels;
+    while (nextSample <= maxBlockVSize) {
+      if (txIndex >= txs.length) {
+        samples.push([(1 - (sampleIndex / this.numSamples)) * 100, 0]);
+        nextSample += sampleInterval;
+        sampleIndex++;
+        continue;
+      }
+
+      while (txs[txIndex] && nextSample < cumVSize + txs[txIndex].vsize) {
+        samples.push([(1 - (sampleIndex / this.numSamples)) * 100, txs[txIndex].rate]);
+        nextSample += sampleInterval;
+        sampleIndex++;
+      }
+      cumVSize += txs[txIndex].vsize;
+      txIndex++;
+    }
+    this.data = samples.reverse();
  }

-  mountChart() {
+  mountChart(): void {
    this.mempoolVsizeFeesOptions = {
      grid: {
        height: '210',
        right: '20',
        top: '22',
-        left: '30',
+        left: '40',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
+        name: '% Weight',
+        nameLocation: 'middle',
+        nameGap: 0,
+        nameTextStyle: {
+          verticalAlign: 'top',
+          padding: [30, 0, 0, 0],
+        },
+        axisLabel: {
+          interval: (index: number): boolean => { return index && (index % this.labelInterval === 0); },
+          formatter: (value: number): string => { return Number(value).toFixed(0); },
+        },
+        axisTick: {
+          interval: (index:number): boolean => { return (index % this.labelInterval === 0); },
+        },
      },
      yAxis: {
        type: 'value',
+        // name: 'Effective Fee Rate s/vb',
+        // nameLocation: 'middle',
        splitLine: {
          lineStyle: {
            type: 'dotted',
            color: '#ffffff66',
            opacity: 0.25,
          }
+        },
+        axisLabel: {
+          formatter: (value: number): string => {
+            const unitValue = this.weightMode ? value / 4 : value;
+            const selectedPowerOfTen = selectPowerOfTen(unitValue);
+            const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
+            return `${newVal}${selectedPowerOfTen.unit}`;
+          },
        }
      },
      series: [{
@@ -58,14 +145,19 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
          position: 'top',
          color: '#ffffff',
          textShadowBlur: 0,
-          formatter: (label: any) => {
-            return Math.floor(label.data);
-          },
+          formatter: (label: { data: number[] }): string => {
+            const value = label.data[1];
+            const unitValue = this.weightMode ? value / 4 : value;
+            const selectedPowerOfTen = selectPowerOfTen(unitValue);
+            const newVal = Math.round(unitValue / selectedPowerOfTen.divider);
+            return `${newVal}${selectedPowerOfTen.unit}`;
+          }
        },
+        showAllSymbol: false,
        smooth: true,
        lineStyle: {
          color: '#D81B60',
-          width: 4,
+          width: 1,
        },
        itemStyle: {
          color: '#b71c1c',
@@ -80,4 +172,8 @@ export class FeeDistributionGraphComponent implements OnInit, OnChanges {
      }]
    };
  }
+
+  ngOnDestroy(): void {
+    this.rateUnitSub.unsubscribe();
+  }
 }
--- a/frontend/src/app/components/fees-box/fees-box.component.html
+++ b/frontend/src/app/components/fees-box/fees-box.component.html
@@ -1,4 +1,4 @@
-<div class="fee-estimation-wrapper" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
+<div class="fee-estimation-wrapper" *ngIf="(isLoading$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
  <div class="d-flex">
    <div class="fee-progress-bar" [style.background]="noPriority">
      <span class="fee-label" i18n="fees-box.no-priority" i18n-ngbTooltip="Transaction feerate tooltip (economy)" ngbTooltip="Either 2x the minimum, or the Low Priority rate (whichever is lower)" placement="top">No Priority</span>
@@ -13,23 +13,23 @@
  <div class="fee-estimation-container">
    <div class="item">
      <div class="card-text">
-        <div class="fee-text">{{ recommendedFees.economyFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.economyFee * 140" ></app-fiat></span>
+        <div class="fee-text"><app-fee-rate [fee]="recommendedFees.economyFee"  rounding="1.0-0"></app-fee-rate></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.economyFee * 140" ></app-fiat></span>
      </div>
    </div>
    <div class="band-separator"></div>
    <div class="item">
      <div class="card-text">
-        <div class="fee-text">{{ recommendedFees.hourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.hourFee * 140" ></app-fiat></span>
+        <div class="fee-text"><app-fee-rate [fee]="recommendedFees.hourFee"  rounding="1.0-0"></app-fee-rate></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.hourFee * 140" ></app-fiat></span>
      </div>
    </div>
    <div class="item">
      <div class="card-text">
-        <div class="fee-text">{{ recommendedFees.halfHourFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.halfHourFee * 140" ></app-fiat></span>
+        <div class="fee-text"><app-fee-rate [fee]="recommendedFees.halfHourFee"  rounding="1.0-0"></app-fee-rate></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.halfHourFee * 140" ></app-fiat></span>
      </div>
    </div>
    <div class="item">
      <div class="card-text">
-        <div class="fee-text">{{ recommendedFees.fastestFee }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.fastestFee * 140" ></app-fiat></span>
+        <div class="fee-text"><app-fee-rate [fee]="recommendedFees.fastestFee"  rounding="1.0-0"></app-fee-rate></div> <span class="fiat"><app-fiat i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom" [value]="recommendedFees.fastestFee * 140" ></app-fiat></span>
      </div>
    </div>
  </div>
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@@ -1,9 +1,9 @@
 import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { StateService } from '../../services/state.service';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 import { Recommendedfees } from '../../interfaces/websocket.interface';
 import { feeLevels, mempoolFeeColors } from '../../app.constants';
-import { tap } from 'rxjs/operators';
+import { map, startWith, tap } from 'rxjs/operators';

@Component({
  selector: 'app-fees-box',
@@ -12,7 +12,7 @@ import { tap } from 'rxjs/operators';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeesBoxComponent implements OnInit {
-  isLoadingWebSocket$: Observable<boolean>;
+  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
  noPriority = '#2e324e';
@@ -22,7 +22,12 @@ export class FeesBoxComponent implements OnInit {
  ) { }

  ngOnInit(): void {
-    this.isLoadingWebSocket$ = this.stateService.isLoadingWebSocket$;
+    this.isLoading$ = combineLatest(
+      this.stateService.isLoadingWebSocket$.pipe(startWith(false)),
+      this.stateService.loadingIndicators$.pipe(startWith({ mempool: 0 })),
+    ).pipe(map(([socket, indicators]) => {
+      return socket || (indicators.mempool != null && indicators.mempool !== 100);
+    }));
    this.recommendedFees$ = this.stateService.recommendedFees$
      .pipe(
        tap((fees) => {
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -10,7 +10,8 @@
          <ng-template #inSync>
            <div class="progress inc-tx-progress-bar">
              <div class="progress-bar" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth, 'background-color': mempoolInfoData.progressColor}">&nbsp;</div>
-              <div class="progress-text">&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+              <div class="progress-text" *only-vsize>&lrm;{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <ng-container i18n="shared.vbytes-per-second|vB/s">vB/s</ng-container></div>
+              <div class="progress-text" *only-weight>&lrm;{{ mempoolInfoData.vBytesPerSecond * 4 | ceil | number }} <ng-container i18n="shared.weight-units-per-second|vB/s">WU/s</ng-container></div>
            </div>
          </ng-template>
        </ng-template>  
--- a/frontend/src/app/components/graphs/graphs.component.html
+++ b/frontend/src/app/components/graphs/graphs.component.html
@@ -22,7 +22,7 @@
      <a class="dropdown-item" routerLinkActive="active"
        [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" i18n="mining.block-sizes-weights">Block Sizes and Weights</a>
      <a *ngIf="stateService.env.AUDIT" class="dropdown-item" routerLinkActive="active"
-        [routerLink]="['/graphs/mining/block-prediction' | relativeUrl]" i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</a>
+        [routerLink]="['/graphs/mining/block-health' | relativeUrl]" i18n="mining.block-health">Block Health</a>
    </div>
  </div>

--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,16 +21,19 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 20px;
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts
@@ -109,6 +109,14 @@ export class HashrateChartComponent implements OnInit {
        tap((response: any) => {
          const data = response.body;

+          // always include the latest difficulty
+          if (data.difficulty.length && data.difficulty[data.difficulty.length - 1].difficulty !== data.currentDifficulty) {
+            data.difficulty.push({
+              timestamp: Date.now() / 1000,
+              difficulty: data.currentDifficulty
+            });
+          }
+
          // We generate duplicated data point so the tooltip works nicely
          const diffFixed = [];
          let diffIndex = 1;
@@ -122,6 +130,7 @@ export class HashrateChartComponent implements OnInit {
                });
                ++hashIndex;
              }
+              diffIndex++;
              break;
            }

@@ -137,6 +146,14 @@ export class HashrateChartComponent implements OnInit {
            ++diffIndex;
          }

+          while (diffIndex <= data.difficulty.length) {
+            diffFixed.push({
+              timestamp: data.difficulty[diffIndex - 1].time,
+              difficulty: data.difficulty[diffIndex - 1].difficulty
+            });
+            diffIndex++;
+          }
+
          let maResolution = 15;
          const hashrateMa = [];
          for (let i = maResolution - 1; i < data.hashrates.length; ++i) {
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@@ -4,6 +4,9 @@
  @media (min-width: 465px) {
    font-size: 20px;
  }
+  @media (min-width: 992px) {
+    height: 40px;
+  }
 }

 .main-title {
@@ -18,18 +21,20 @@
 }

 .full-container {
+  display: flex;
+  flex-direction: column;
  padding: 0px 15px;
  width: 100%;
-  min-height: 500px;
-  height: calc(100% - 150px);
-  @media (max-width: 992px) {
-    padding-bottom: 100px;
-  };
+  height: calc(100vh - 250px);
+  @media (min-width: 992px) {
+    height: calc(100vh - 150px);
+  }
 }

 .chart {
+  display: flex;
+  flex: 1;
  width: 100%;
-  height: 100%;
  padding-bottom: 20px;
  padding-right: 10px;
  @media (max-width: 992px) {
--- a/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
+++ b/frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts
@@ -1,9 +1,11 @@
-import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { Component, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
 import { EChartsOption } from 'echarts';
 import { OnChanges } from '@angular/core';
 import { StorageService } from '../../services/storage.service';
 import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/graphs.utils';
 import { formatNumber } from '@angular/common';
+import { StateService } from '../../services/state.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-incoming-transactions-graph',
@@ -18,7 +20,7 @@ import { formatNumber } from '@angular/common';
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
+export class IncomingTransactionsGraphComponent implements OnInit, OnChanges, OnDestroy {
  @Input() data: any;
  @Input() theme: string;
  @Input() height: number | string = '200';
@@ -35,14 +37,24 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
  };
  windowPreference: string;
  chartInstance: any = undefined;
+  weightMode: boolean = false;
+  rateUnitSub: Subscription;

  constructor(
    @Inject(LOCALE_ID) private locale: string,
    private storageService: StorageService,
+    private stateService: StateService,
  ) { }

  ngOnInit() {
    this.isLoading = true;
+
+    this.rateUnitSub = this.stateService.rateUnits$.subscribe(rateUnits => {
+      this.weightMode = rateUnits === 'wu';
+      if (this.data) {
+        this.mountChart();
+      }
+    });
  }

  ngOnChanges(): void {
@@ -118,7 +130,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
              itemFormatted += `<div class="item">
                <div class="indicator-container">${colorSpan(item.color)}</div>
                <div class="grow"></div>
-                <div class="value">${formatNumber(item.value[1], this.locale, '1.0-0')}<span class="symbol">vB/s</span></div>
+                <div class="value">${formatNumber(this.weightMode ? item.value[1] * 4 : item.value[1], this.locale, '1.0-0')} <span class="symbol">${this.weightMode ? 'WU' : 'vB'}/s</span></div>
              </div>`;
            }
          });
@@ -147,6 +159,9 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
        type: 'value',
        axisLabel: {
          fontSize: 11,
+          formatter: (value) => {
+            return this.weightMode ? value * 4 : value;
+          }
        },
        splitLine: {
          lineStyle: {
@@ -250,4 +265,8 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
    this.mempoolStatsChartOption.backgroundColor = 'none';
    this.chartInstance.setOption(this.mempoolStatsChartOption);
  }
+
+  ngOnDestroy(): void {
+    this.rateUnitSub.unsubscribe();
+  }
 }
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.html
@@ -44,9 +44,9 @@
    </ng-container>
  </a>

-  <div ngbDropdown (window:resize)="onResize($event)" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images [name]="network.val === '' ? 'liquid' : network.val" width="22" height="22" viewBox="0 0 125 125" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
+  <div ngbDropdown (window:resize)="onResize()" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'liquid' : network.val" width="20" height="20" viewBox="0 0 125 125"></app-svg-images>
    </button>
    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
      <a [href]="env.MEMPOOL_WEBSITE_URL + urlLanguage + (networkPaths['mainnet'] || '')" ngbDropdownItem class="mainnet"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
@@ -90,9 +90,12 @@
 </nav>
 </header>

-<br />
+<app-testnet-alert *ngIf="network.val === 'liquidtestnet'"></app-testnet-alert>

-<router-outlet></router-outlet>
+<main>
+  <router-outlet></router-outlet>
+</main>
+
+<app-global-footer *ngIf="footerVisible"></app-global-footer>

-<br>
 </ng-container>
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@@ -136,4 +136,19 @@ nav {
 }
 .navbar-dark .navbar-nav .nav-link {
  color: #f1f1f1;
+}
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
 }
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.ts
@@ -19,6 +19,7 @@ export class LiquidMasterPageComponent implements OnInit {
  network$: Observable<string>;
  urlLanguage: string;
  networkPaths: { [network: string]: string };
+  footerVisible = true;

  constructor(
    private stateService: StateService,
@@ -27,13 +28,18 @@ export class LiquidMasterPageComponent implements OnInit {
    private navigationService: NavigationService,
  ) { }

-  ngOnInit() {
+  ngOnInit(): void {
    this.env = this.stateService.env;
    this.connectionState$ = this.stateService.connectionState$;
    this.network$ = merge(of(''), this.stateService.networkChanged$);
    this.urlLanguage = this.languageService.getLanguageForUrl();
    this.navigationService.subnetPaths.subscribe((paths) => {
      this.networkPaths = paths;
+      if (paths.liquid.indexOf('docs') > -1) {
+        this.footerVisible = false;
+      } else {
+        this.footerVisible = true;
+      }
    });
  }

@@ -41,7 +47,7 @@ export class LiquidMasterPageComponent implements OnInit {
    this.navCollapsed = !this.navCollapsed;
  }

-  onResize(event: any) {
+  onResize(): void {
    this.isMobile = window.innerWidth <= 767.98;
  }
 }
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="{ val: network$ | async } as network">
 <header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]">
+  <a class="navbar-brand" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
  <ng-template [ngIf]="subdomain">
    <div class="subdomain_container">
      <img [src]="'/api/v1/enterprise/images/' + subdomain + '/logo'" class="subdomain_logo">
@@ -17,9 +17,9 @@
    </ng-container>
  </a>

-  <div (window:resize)="onResize($event)" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
-    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
-      <app-svg-images [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65" style="width: 30px; height: 30px; margin-right: 5px;"></app-svg-images>
+  <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED || env.LIQUID_TESTNET_ENABLED">
+    <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split d-flex justify-content-center align-items-center" aria-haspopup="true">
+      <app-svg-images class="d-flex justify-content-center align-items-center current-network-svg" [name]="network.val === '' ? 'bitcoin' : network.val" width="20" height="20" viewBox="0 0 65 65"></app-svg-images>
    </button>
    <div ngbDropdownMenu [ngClass]="{'dropdown-menu-right' : isMobile}">
      <a ngbDropdownItem class="mainnet" [routerLink]="networkPaths['mainnet'] || '/'"><app-svg-images name="bitcoin" width="22" height="22" viewBox="0 0 65 65" style="width: 25px; height: 25px;" class="mainnet mr-1"></app-svg-images> Mainnet</a>
@@ -62,10 +62,11 @@
 </nav>
 </header>

-<br />
+<app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>

-<router-outlet></router-outlet>
-
-<br>
+<main>
+  <router-outlet></router-outlet>
+</main>

+<app-global-footer *ngIf="footerVisible"></app-global-footer>
 </ng-container>
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -192,4 +192,19 @@ nav {
    margin: 33px 0px 0px -19px;
    font-size: 7px;
  }
+}
+
+.current-network-svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+:host-context(.rtl-layout) {
+  .current-network-svg {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    margin-right: 0px;
+  }
 }
--- a/frontend/src/app/components/master-page/master-page.component.ts
+++ b/frontend/src/app/components/master-page/master-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Env, StateService } from '../../services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { LanguageService } from '../../services/language.service';
@@ -20,6 +20,8 @@ export class MasterPageComponent implements OnInit {
  urlLanguage: string;
  subdomain = '';
  networkPaths: { [network: string]: string };
+  networkPaths$: Observable<Record<string, string>>;
+  footerVisible = true;

  constructor(
    public stateService: StateService,
@@ -28,7 +30,7 @@ export class MasterPageComponent implements OnInit {
    private navigationService: NavigationService,
  ) { }

-  ngOnInit() {
+  ngOnInit(): void {
    this.env = this.stateService.env;
    this.connectionState$ = this.stateService.connectionState$;
    this.network$ = merge(of(''), this.stateService.networkChanged$);
@@ -36,6 +38,11 @@ export class MasterPageComponent implements OnInit {
    this.subdomain = this.enterpriseService.getSubdomain();
    this.navigationService.subnetPaths.subscribe((paths) => {
      this.networkPaths = paths;
+      if (paths.mainnet.indexOf('docs') > -1) {
+        this.footerVisible = false;
+      } else {
+        this.footerVisible = true;
+      }
    });
  }

@@ -43,7 +50,11 @@ export class MasterPageComponent implements OnInit {
    this.navCollapsed = !this.navCollapsed;
  }

-  onResize(event: any) {
+  onResize(): void {
    this.isMobile = window.innerWidth <= 767.98;
  }
+
+  brandClick(e): void {
+    this.stateService.resetScroll$.next(true);
+  }
 }
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.html
@@ -1,7 +1,7 @@
 <app-block-overview-graph
  #blockGraph
  [isLoading]="isLoading$ | async"
-  [resolution]="75"
+  [resolution]="86"
  [blockLimit]="stateService.blockVSize"
  [orientation]="timeLtr ? 'right' : 'left'"
  [flip]="true"
--- a/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
+++ b/frontend/src/app/components/mempool-block-overview/mempool-block-overview.component.ts
@@ -99,7 +99,7 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
      const direction = (this.blockIndex == null || this.index < this.blockIndex) ? this.poolDirection : this.chainDirection;
      this.blockGraph.replace(delta.added, direction);
    } else {
-      this.blockGraph.update(delta.added, delta.removed, blockMined ? this.chainDirection : this.poolDirection, blockMined);
+      this.blockGraph.update(delta.added, delta.removed, delta.changed || [], blockMined ? this.chainDirection : this.poolDirection, blockMined);
    }

    this.lastBlockHeight = this.stateService.latestBlockHeight;
@@ -107,8 +107,12 @@ export class MempoolBlockOverviewComponent implements OnInit, OnDestroy, OnChang
    this.isLoading$.next(false);
  }

-  onTxClick(event: TransactionStripped): void {
-    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.txid}`);
-    this.router.navigate([url]);
+  onTxClick(event: { tx: TransactionStripped, keyModifier: boolean }): void {
+    const url = new RelativeUrlPipe(this.stateService).transform(`/tx/${event.tx.txid}`);
+    if (!event.keyModifier) {
+      this.router.navigate([url]);
+    } else {
+      window.open(url, '_blank');
+    }
  }
 }
--- a/frontend/src/app/components/mempool-block/mempool-block.component.html
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.html
@@ -14,11 +14,15 @@
          <tbody>
            <tr>
              <td i18n="mempool-block.median-fee">Median fee</td>
-              <td>~{{ mempoolBlock.medianFee | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span> <span class="fiat"><app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
+              <td>~<app-fee-rate [fee]="mempoolBlock.medianFee" rounding="1.0-0"></app-fee-rate> <span class="fiat"><app-fiat [value]="mempoolBlock.medianFee * 140" digitsInfo="1.2-2" i18n-ngbTooltip="Transaction fee tooltip" ngbTooltip="Based on average native segwit transaction of 140 vBytes" placement="bottom"></app-fiat></span></td>
            </tr>
            <tr>
              <td i18n="mempool-block.fee-span">Fee span</td>
-              <td><span class="yellow-color">{{ mempoolBlock.feeRange[0] | number:'1.0-0' }} - {{ mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1] | number:'1.0-0' }} <span class="symbol" i18n="shared.sat-vbyte|sat/vB">sat/vB</span></span></td>
+              <td><span class="yellow-color">
+                <app-fee-rate [fee]="mempoolBlock.feeRange[0]" [showUnit]="false" rounding="1.0-0"></app-fee-rate>
+                -
+                <app-fee-rate [fee]="mempoolBlock.feeRange[mempoolBlock.feeRange.length - 1]" rounding="1.0-0"></app-fee-rate>
+              </span></td>
            </tr>
            <tr>
              <td i18n="block.total-fees|Total fees in a block">Total fees</td>
@@ -39,11 +43,11 @@
            </tr>
          </tbody>
        </table>
-        <app-fee-distribution-graph *ngIf="webGlEnabled" [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
+        <app-fee-distribution-graph *ngIf="webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
      </div>
      <div class="col-md chart-container">
        <app-mempool-block-overview *ngIf="webGlEnabled" [index]="mempoolBlockIndex" (txPreviewEvent)="setTxPreview($event)"></app-mempool-block-overview>
-        <app-fee-distribution-graph *ngIf="!webGlEnabled" [data]="mempoolBlock.feeRange" ></app-fee-distribution-graph>
+        <app-fee-distribution-graph *ngIf="!webGlEnabled" [transactions]="mempoolBlockTransactions$ | async" [feeRange]="mempoolBlock.isStack ? mempoolBlock.feeRange : []" [vsize]="mempoolBlock.blockVSize" ></app-fee-distribution-graph>
      </div>
    </div>
  </div>
--- a/frontend/src/app/components/mempool-block/mempool-block.component.ts
+++ b/frontend/src/app/components/mempool-block/mempool-block.component.ts
@@ -17,6 +17,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
  network$: Observable<string>;
  mempoolBlockIndex: number;
  mempoolBlock$: Observable<MempoolBlock>;
+  mempoolBlockTransactions$: Observable<TransactionStripped[]>;
  ordinal$: BehaviorSubject<string> = new BehaviorSubject('');
  previewTx: TransactionStripped | void;
  webGlEnabled: boolean;
@@ -53,6 +54,7 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
                const ordinal = this.getOrdinal(mempoolBlocks[this.mempoolBlockIndex]);
                this.ordinal$.next(ordinal);
                this.seoService.setTitle(ordinal);
+                mempoolBlocks[this.mempoolBlockIndex].isStack = mempoolBlocks[this.mempoolBlockIndex].blockVSize > this.stateService.blockVSize;
                return mempoolBlocks[this.mempoolBlockIndex];
              })
            );
@@ -62,6 +64,8 @@ export class MempoolBlockComponent implements OnInit, OnDestroy {
        })
      );

+    this.mempoolBlockTransactions$ = this.stateService.liveMempoolBlockTransactions$.pipe(map(txMap => Object.values(txMap)));
+
    this.network$ = this.stateService.networkChanged$;
  }

--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -1,40 +1,49 @@
-<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks">
-  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" *ngIf="(difficultyAdjustments$ | async) as da;">
+<ng-container *ngIf="(loadingBlocks$ | async) === false; else loadingBlocks" [class.minimal]="minimal">
+  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'" *ngIf="(difficultyAdjustments$ | async) as da;">
    <div class="flashing">
      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolBlocks$ | async" let-i="index" [ngForTrackBy]="trackByFn">
-        <div [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
-          <a draggable="false" [routerLink]="['/mempool-block/' | relativeUrl, i]"
+        <div
+          *ngIf="minimal && spotlight > 0 && spotlight === i + 1"
+          class="spotlight-bottom"
+          [style.right]="mempoolBlockStyles[i].right"
+        ></div>
+        <div @blockEntryTrigger [@.disabled]="i > 0 || !animateEntry" [attr.data-cy]="'mempool-block-' + i" class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolBlockStyles[i]" [class.blink-bg]="projectedBlock.blink">
+          <a draggable="false" [routerLink]="[getHref(i) | relativeUrl]"
            class="blockLink" [ngClass]="{'disabled': (this.stateService.blockScrolling$ | async)}">&nbsp;</a>
          <div class="block-body">
-            <div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
-              ~{{ projectedBlock.medianFee | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-            </div>
-            <div [attr.data-cy]="'mempool-block-' + i + '-fee-span'" class="fee-span">
-              {{ projectedBlock.feeRange[0] | number:feeRounding }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:feeRounding }} <span i18n="shared.sat-vbyte|sat/vB">sat/vB</span>
-            </div>
-            <div *ngIf="showMiningInfo" class="block-size">
-              <app-amount [attr.data-cy]="'mempool-block-' + i + '-total-fees'" [satoshis]="projectedBlock.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
-            </div>
-            <div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (projectedBlock.blockSize | bytes: 2)"></div>
-            <div [attr.data-cy]="'mempool-block-' + i + '-transaction-count'" class="transaction-count">
-              <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
-              <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
-              <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
-            </div>
-            <div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
-              <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
-                <app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true"></app-time>
-              </ng-template>
-              <ng-template #timeDiffMainnet>
-                <app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true" [forceFloorOnTimeIntervals]="['hour']"></app-time>
-              </ng-template>
-            </div>
-            <ng-template #mergedBlock>
-              <div [attr.data-cy]="'mempool-block-' + i + '-blocks'" class="time-difference">
-                <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
-                <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+            <ng-container *ngIf="!minimal">
+              <div [attr.data-cy]="'mempool-block-' + i + '-fees'" class="fees">
+                ~<app-fee-rate [fee]="projectedBlock.medianFee" unitClass="" rounding="1.0-0"></app-fee-rate>
              </div>
-            </ng-template>
+              <div [attr.data-cy]="'mempool-block-' + i + '-fee-span'" class="fee-span">
+                <app-fee-rate [fee]="projectedBlock.feeRange[0]" [showUnit]="false" rounding="1.0-0" unitClass=""></app-fee-rate>
+                -
+                <app-fee-rate [fee]="projectedBlock.feeRange[projectedBlock.feeRange.length - 1]" rounding="1.0-0" unitClass=""></app-fee-rate>
+              </div>
+              <div *ngIf="showMiningInfo" class="block-size">
+                <app-amount [attr.data-cy]="'mempool-block-' + i + '-total-fees'" [satoshis]="projectedBlock.totalFees" digitsInfo="1.2-3" [noFiat]="true"></app-amount>
+              </div>
+              <div *ngIf="!showMiningInfo" class="block-size" [innerHTML]="'&lrm;' + (projectedBlock.blockSize | bytes: 2)"></div>
+              <div [attr.data-cy]="'mempool-block-' + i + '-transaction-count'" class="transaction-count">
+                <ng-container *ngTemplateOutlet="projectedBlock.nTx === 1 ? transactionsSingular : transactionsPlural; context: {$implicit: projectedBlock.nTx | number}"></ng-container>
+                <ng-template #transactionsSingular let-i i18n="shared.transaction-count.singular">{{ i }} transaction</ng-template>
+                <ng-template #transactionsPlural let-i i18n="shared.transaction-count.plural">{{ i }} transactions</ng-template>
+              </div>
+              <div [attr.data-cy]="'mempool-block-' + i + '-time'" class="time-difference" *ngIf="projectedBlock.blockVSize <= stateService.blockVSize; else mergedBlock">
+                <ng-template [ngIf]="network === 'liquid' || network === 'liquidtestnet'" [ngIfElse]="timeDiffMainnet">
+                  <app-time kind="until" [time]="(1 * i) + now + 61000" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
+                </ng-template>
+                <ng-template #timeDiffMainnet>
+                  <app-time kind="until" [time]="da.timeAvg * (i + 1) + now + da.timeOffset" [fastRender]="false" [fixedRender]="true" [precision]="1" minUnit="minute"></app-time>
+                </ng-template>
+              </div>
+              <ng-template #mergedBlock>
+                <div [attr.data-cy]="'mempool-block-' + i + '-blocks'" class="time-difference">
+                  <b>(<ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: projectedBlock.blockVSize / stateService.blockVSize | ceil }"></ng-container>)</b>
+                  <ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
+                </div>
+              </ng-template>
+            </ng-container>
          </div>
          <span class="animated-border"></span>
        </div>
@@ -45,10 +54,10 @@
 </ng-container>

 <ng-template #loadingBlocks>
-  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr">
+  <div class="mempool-blocks-container" [class.time-ltr]="timeLtr" [style.--block-size]="blockWidth+'px'">
    <div class="flashing">
      <ng-template ngFor let-projectedBlock [ngForOf]="mempoolEmptyBlocks" let-i="index" [ngForTrackBy]="trackByFn">
-        <div class="bitcoin-block text-center mempool-block" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
+        <div class="bitcoin-block text-center mempool-block" [class.hide-block]="count && i >= count" id="mempool-block-{{ i }}" [ngStyle]="mempoolEmptyBlockStyles[i]"></div>
      </ng-template>
    </div>
  </div>
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -1,7 +1,7 @@
 .bitcoin-block {
-  width: 125px;
-  height: 125px;
-  transition: background 2s, right 2s, transform 1s;
+  width: var(--block-size);
+  height: var(--block-size);
+  transition: background 2s, right 2s, transform 1s, opacity 1s;
 }

 .block-size {
@@ -14,6 +14,7 @@
  top: 0px;
  right: 0px;
  left: 0px;
+  --block-size: 125px;
 }

 .flashing {
@@ -66,11 +67,11 @@

 .bitcoin-block::after {
  content: '';
-  width: 125px;
-  height: 24px;
+  width: var(--block-size);
+  height: calc(0.192 * var(--block-size));
  position:absolute;
-  top: -24px;
-  left: -20px;
+  top: calc(-0.192 * var(--block-size));
+  left: calc(-0.16 * var(--block-size));
  background-color: #232838;
  transform:skew(40deg);
  transform-origin:top;
@@ -79,11 +80,11 @@

 .bitcoin-block::before {
  content: '';
-  width: 20px;
-  height: 125px;
+  width: calc(0.16 * var(--block-size));
+  height: var(--block-size);
  position: absolute;
-  top: -12px;
-  left: -20px;
+  top: calc(-0.096 * var(--block-size));
+  left: calc(-0.16 * var(--block-size));
  background-color: #191c27;
  z-index: -1;

@@ -100,6 +101,10 @@
  background-color: #2d2825;
 }

+.mempool-block.hide-block {
+  opacity: 0;
+}
+
 .black-background {
  background-color: #11131f;
  z-index: 100;
@@ -141,7 +146,7 @@

  .bitcoin-block::before {
    transform: skewY(-50deg);
-    left: 125px;
+    left: var(--block-size);
  }
  .block-body {
    transform: scaleX(-1);
@@ -152,4 +157,16 @@
  #arrow-up {
    transform: translateX(70px);
  }
+}
+
+.spotlight-bottom {
+  position: absolute;
+  width: calc(0.6 * var(--block-size));
+  height: calc(0.25 * var(--block-size));
+  border-left: solid calc(0.3 * var(--block-size)) transparent;
+  border-bottom: solid calc(0.3 * var(--block-size)) white;
+  border-right: solid calc(0.3 * var(--block-size)) transparent;
+  transform: translate(calc(-0.2 * var(--block-size)), calc(1.1 * var(--block-size)));
+  border-radius: 2px;
+  z-index: -1;
 }
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -1,22 +1,38 @@
-import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, Input } from '@angular/core';
-import { Subscription, Observable, fromEvent, merge, of, combineLatest, timer } from 'rxjs';
+import { Component, OnInit, OnDestroy, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
+import { Subscription, Observable, fromEvent, merge, of, combineLatest } from 'rxjs';
 import { MempoolBlock } from '../../interfaces/websocket.interface';
 import { StateService } from '../../services/state.service';
 import { Router } from '@angular/router';
-import { take, map, switchMap } from 'rxjs/operators';
+import { take, map, switchMap, tap } from 'rxjs/operators';
 import { feeLevels, mempoolFeeColors } from '../../app.constants';
 import { specialBlocks } from '../../app.constants';
 import { RelativeUrlPipe } from '../../shared/pipes/relative-url/relative-url.pipe';
 import { Location } from '@angular/common';
-import { DifficultyAdjustment } from '../../interfaces/node-api.interface';
+import { DifficultyAdjustment, MempoolPosition } from '../../interfaces/node-api.interface';
+import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-mempool-blocks',
  templateUrl: './mempool-blocks.component.html',
  styleUrls: ['./mempool-blocks.component.scss'],
+  animations: [trigger('blockEntryTrigger', [
+    transition(':enter', [
+      style({ transform: 'translateX(-155px)' }),
+      animate('2s 0s ease', style({ transform: '' })),
+    ]),
+  ])],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MempoolBlocksComponent implements OnInit, OnDestroy {
+export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
+  @Input() minimal: boolean = false;
+  @Input() blockWidth: number = 125;
+  @Input() count: number = null;
+  @Input() spotlight: number = 0;
+  @Input() getHref?: (index) => string = (index) => `/mempool-block/${index}`;
+  @Input() allBlocks: boolean = false;
+
+  @Output() widthChange: EventEmitter<number> = new EventEmitter();
+
  specialBlocks = specialBlocks;
  mempoolBlocks: MempoolBlock[] = [];
  mempoolEmptyBlocks: MempoolBlock[] = this.mountEmptyBlocks();
@@ -32,15 +48,18 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
  isLoadingWebsocketSubscription: Subscription;
  blockSubscription: Subscription;
  networkSubscription: Subscription;
+  chainTipSubscription: Subscription;
  network = '';
  now = new Date().getTime();
  timeOffset = 0;
  showMiningInfo = false;
  timeLtrSubscription: Subscription;
  timeLtr: boolean;
+  animateEntry: boolean = false;

-  blockWidth = 125;
-  blockPadding = 30;
+  blockOffset: number = 155;
+  blockPadding: number = 30;
+  containerOffset: number = 40;
  arrowVisible = false;
  tabHidden = false;
  feeRounding = '1.0-0';
@@ -49,10 +68,12 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
  transition = 'background 2s, right 2s, transform 1s';

  markIndex: number;
+  txPosition: MempoolPosition;
  txFeePerVSize: number;

  resetTransitionTimeout: number;

+  chainTip: number = -1;
  blockIndex = 1;

  constructor(
@@ -69,6 +90,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
  }

  ngOnInit() {
+    this.chainTip = this.stateService.latestBlockHeight;
+
    if (['', 'testnet', 'signet'].includes(this.stateService.network)) {
      this.enabledMiningInfoIfNeeded(this.location.path());
      this.location.onUrlChange((url) => this.enabledMiningInfoIfNeeded(url));
@@ -85,7 +108,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    this.mempoolEmptyBlocks.forEach((b) => {
      this.mempoolEmptyBlockStyles.push(this.getStyleForMempoolEmptyBlock(b.index));
    });
-    this.reduceMempoolBlocksToFitScreen(this.mempoolEmptyBlocks);
+    this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);

    this.mempoolBlocks.map(() => {
      this.updateMempoolBlockStyles();
@@ -101,7 +124,7 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    )
    .pipe(
      switchMap(() => combineLatest([
-        this.stateService.blocks$.pipe(map(([block]) => block)),
+        this.stateService.blocks$.pipe(map((blocks) => blocks[0])),
        this.stateService.mempoolBlocks$
          .pipe(
            map((mempoolBlocks) => {
@@ -116,25 +139,31 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
          mempoolBlocks.forEach((block, i) => {
            block.index = this.blockIndex + i;
            block.height = lastBlock.height + i + 1;
-            if (this.stateService.network === '') {
-              block.blink = specialBlocks[block.height] ? true : false;
-            }
+            block.blink = specialBlocks[block.height]?.networks.includes(this.stateService.network || 'mainnet') ? true : false;
          });

          const stringifiedBlocks = JSON.stringify(mempoolBlocks);
          this.mempoolBlocksFull = JSON.parse(stringifiedBlocks);
          this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(stringifiedBlocks));

+          this.now = Date.now();
+
          this.updateMempoolBlockStyles();
          this.calculateTransactionPosition();
+ 
          return this.mempoolBlocks;
+        }),
+        tap(() => {
+          this.cd.markForCheck();
+          this.widthChange.emit(this.containerOffset + this.mempoolBlocks.length * this.blockOffset);
        })
      );

    this.difficultyAdjustments$ = this.stateService.difficultyAdjustment$
      .pipe(
        map((da) => {
-          this.now = new Date().getTime();
+          this.now = Date.now();
+          this.cd.markForCheck();
          return da;
        })
      );
@@ -142,10 +171,14 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    this.markBlocksSubscription = this.stateService.markBlock$
      .subscribe((state) => {
        this.markIndex = undefined;
+        this.txPosition = undefined;
        this.txFeePerVSize = undefined;
        if (state.mempoolBlockIndex !== undefined) {
          this.markIndex = state.mempoolBlockIndex;
        }
+        if (state.mempoolPosition) {
+          this.txPosition = state.mempoolPosition;
+        }
        if (state.txFeePerVSize) {
          this.txFeePerVSize = state.txFeePerVSize;
        }
@@ -153,13 +186,29 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
        this.cd.markForCheck();
      });

-    this.blockSubscription = this.stateService.blocks$
-      .subscribe(([block]) => {
-        if (block?.extras?.matchRate >= 66 && !this.tabHidden) {
+    this.blockSubscription = this.stateService.blocks$.pipe(map((blocks) => blocks[0]))
+      .subscribe((block) => {
+        if (!block) {
+          return;
+        }
+        if (this.chainTip === -1) {
+          this.animateEntry = block.height === this.stateService.latestBlockHeight;
+        } else {
+          this.animateEntry = block.height > this.chainTip;
+        }
+
+        this.chainTip = this.stateService.latestBlockHeight;
+        if ((block?.extras?.similarity == null || block?.extras?.similarity > 0.5) && !this.tabHidden) {
          this.blockIndex++;
        }
      });

+    this.chainTipSubscription = this.stateService.chainTip$.subscribe((height) => {
+      if (this.chainTip === -1) {
+        this.chainTip = height;
+      }
+    });
+
    this.networkSubscription = this.stateService.networkChanged$
      .subscribe((network) => this.network = network);

@@ -175,8 +224,8 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
          this.router.navigate([this.relativeUrlPipe.transform('mempool-block/'), this.markIndex - 1]);
        } else {
          this.stateService.blocks$
-            .pipe(take(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT))
-            .subscribe(([block]) => {
+            .pipe(map((blocks) => blocks[0]))
+            .subscribe((block) => {
              if (this.stateService.latestBlockHeight === block.height) {
                this.router.navigate([this.relativeUrlPipe.transform('/block/'), block.id], { state: { data: { block } }});
              }
@@ -190,30 +239,79 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    });
  }

+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.blockWidth && this.blockWidth) {
+      this.blockPadding = 0.24 * this.blockWidth;
+      this.containerOffset = 0.32 * this.blockWidth;
+      this.blockOffset = this.blockWidth + this.blockPadding;
+    }
+  }
+
  ngOnDestroy() {
    this.markBlocksSubscription.unsubscribe();
    this.blockSubscription.unsubscribe();
    this.networkSubscription.unsubscribe();
    this.timeLtrSubscription.unsubscribe();
+    this.chainTipSubscription.unsubscribe();
    clearTimeout(this.resetTransitionTimeout);
  }

+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    this.animateEntry = false;
+    this.reduceEmptyBlocksToFitScreen(this.mempoolEmptyBlocks);
+  }
+
  trackByFn(index: number, block: MempoolBlock) {
-    return block.index;
+    return (block.isStack) ? `stack-${block.index}` : block.index;
+  }
+
+  reduceEmptyBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
+    const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
+    let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
+    if (!this.allBlocks) {
+      blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
+    }
+    while (blocks.length < blocksAmount) {
+      blocks.push({
+        blockSize: 0,
+        blockVSize: 0,
+        feeRange: [],
+        index: blocks.length,
+        medianFee: 0,
+        nTx: 0,
+        totalFees: 0
+      });
+    }
+    while (blocks.length > blocksAmount) {
+      blocks.pop();
+    }
+    return blocks;
  }

  reduceMempoolBlocksToFitScreen(blocks: MempoolBlock[]): MempoolBlock[] {
    const innerWidth = this.stateService.env.BASE_MODULE !== 'liquid' && window.innerWidth <= 767.98 ? window.innerWidth : window.innerWidth / 2;
-    const blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
+    let blocksAmount = this.stateService.env.MEMPOOL_BLOCKS_AMOUNT;
+    if (this.count) {
+      blocksAmount = 8;
+    } else if (!this.allBlocks) {
+      blocksAmount = Math.min(this.stateService.env.MEMPOOL_BLOCKS_AMOUNT, Math.floor(innerWidth / (this.blockWidth + this.blockPadding)));
+    }
    while (blocks.length > blocksAmount) {
      const block = blocks.pop();
-      const lastBlock = blocks[blocks.length - 1];
-      lastBlock.blockSize += block.blockSize;
-      lastBlock.blockVSize += block.blockVSize;
-      lastBlock.nTx += block.nTx;
-      lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
-      lastBlock.feeRange.sort((a, b) => a - b);
-      lastBlock.medianFee = this.median(lastBlock.feeRange);
+      if (!this.count) {
+        const lastBlock = blocks[0];
+        lastBlock.blockSize += block.blockSize;
+        lastBlock.blockVSize += block.blockVSize;
+        lastBlock.nTx += block.nTx;
+        lastBlock.feeRange = lastBlock.feeRange.concat(block.feeRange);
+        lastBlock.feeRange.sort((a, b) => a - b);
+        lastBlock.medianFee = this.median(lastBlock.feeRange);
+        lastBlock.totalFees += block.totalFees;
+      }
+    }
+    if (blocks.length) {
+      blocks[0].isStack = blocks[0].blockVSize > this.stateService.blockVSize;
    }
    return blocks;
  }
@@ -256,20 +354,20 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    });

    return {
-      'right': 40 + index * 155 + 'px',
+      'right': this.containerOffset + index * this.blockOffset + 'px',
      'background': backgroundGradients.join(',') + ')'
    };
  }

  getStyleForMempoolEmptyBlock(index: number) {
    return {
-      'right': 40 + index * 155 + 'px',
+      'right': this.containerOffset + index * this.blockOffset + 'px',
      'background': '#554b45',
    };
  }

  calculateTransactionPosition() {
-    if ((!this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
+    if ((!this.txPosition && !this.txFeePerVSize && (this.markIndex === undefined || this.markIndex === -1)) || !this.mempoolBlocks) {
      this.arrowVisible = false;
      return;
    } else if (this.markIndex > -1) {
@@ -287,33 +385,43 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {

    this.arrowVisible = true;

-    let found = false;
-    for (let txInBlockIndex = 0; txInBlockIndex < this.mempoolBlocks.length && !found; txInBlockIndex++) {
-      const block = this.mempoolBlocks[txInBlockIndex];
-      for (let i = 0; i < block.feeRange.length - 1 && !found; i++) {
-        if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
-          const feeRangeIndex = i;
-          const feeRangeChunkSize = 1 / (block.feeRange.length - 1);
+    if (this.txPosition) {
+      if (this.txPosition.block >= this.mempoolBlocks.length) {
+        this.rightPosition = ((this.mempoolBlocks.length - 1) * (this.blockWidth + this.blockPadding)) + this.blockWidth;
+      } else {
+        const positionInBlock = Math.min(1, this.txPosition.vsize / this.stateService.blockVSize) * this.blockWidth;
+        const positionOfBlock = this.txPosition.block * (this.blockWidth + this.blockPadding);
+        this.rightPosition = positionOfBlock + positionInBlock;
+      }
+    } else {
+      let found = false;
+      for (let txInBlockIndex = 0; txInBlockIndex < this.mempoolBlocks.length && !found; txInBlockIndex++) {
+        const block = this.mempoolBlocks[txInBlockIndex];
+        for (let i = 0; i < block.feeRange.length - 1 && !found; i++) {
+          if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
+            const feeRangeIndex = i;
+            const feeRangeChunkSize = 1 / (block.feeRange.length - 1);

-          const txFee = this.txFeePerVSize - block.feeRange[i];
-          const max = block.feeRange[i + 1] - block.feeRange[i];
-          const blockLocation = txFee / max;
+            const txFee = this.txFeePerVSize - block.feeRange[i];
+            const max = block.feeRange[i + 1] - block.feeRange[i];
+            const blockLocation = txFee / max;

-          const chunkPositionOffset = blockLocation * feeRangeChunkSize;
-          const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
+            const chunkPositionOffset = blockLocation * feeRangeChunkSize;
+            const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;

-          const blockedFilledPercentage = (block.blockVSize > this.stateService.blockVSize ? this.stateService.blockVSize : block.blockVSize) / this.stateService.blockVSize;
-          const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
-            + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
+            const blockedFilledPercentage = (block.blockVSize > this.stateService.blockVSize ? this.stateService.blockVSize : block.blockVSize) / this.stateService.blockVSize;
+            const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
+              + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);

-          this.rightPosition = arrowRightPosition;
+            this.rightPosition = arrowRightPosition;
+            found = true;
+          }
+        }
+        if (this.txFeePerVSize >= block.feeRange[block.feeRange.length - 1]) {
+          this.rightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding);
          found = true;
        }
      }
-      if (this.txFeePerVSize >= block.feeRange[block.feeRange.length - 1]) {
-        this.rightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding);
-        found = true;
-      }
    }
  }

@@ -333,4 +441,4 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
    }
    return emptyBlocks;
  }
-}
+}
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, Inject, LOCALE_ID, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { VbytesPipe } from '../../shared/pipes/bytes-pipe/vbytes.pipe';
+import { WuBytesPipe } from '../../shared/pipes/bytes-pipe/wubytes.pipe';
 import { formatNumber } from '@angular/common';
 import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
 import { StateService } from '../../services/state.service';
@@ -23,7 +24,7 @@ import { download, formatterXAxis, formatterXAxisLabel } from '../../shared/grap
 })
 export class MempoolGraphComponent implements OnInit, OnChanges {
  @Input() data: any[];
-  @Input() limitFee = 350;
+  @Input() filterSize = 100000;
  @Input() limitFilterFee = 1;
  @Input() height: number | string = 200;
  @Input() top: number | string = 20;
@@ -41,14 +42,18 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  };
  windowPreference: string;
  hoverIndexSerie = 0;
+  maxFee: number;
  feeLimitIndex: number;
+  maxFeeIndex: number;
  feeLevelsOrdered = [];
  chartColorsOrdered = chartColors;
  inverted: boolean;
  chartInstance: any = undefined;
+  weightMode: boolean = false;

  constructor(
    private vbytesPipe: VbytesPipe,
+    private wubytesPipe: WuBytesPipe,
    private stateService: StateService,
    private storageService: StorageService,
    @Inject(LOCALE_ID) private locale: string,
@@ -101,14 +106,20 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
  generateArray(mempoolStats: OptimizedMempoolStats[]) {
    const finalArray: number[][][] = [];
    let feesArray: number[][] = [];
-    const limitFeesTemplate = this.template === 'advanced' ? 26 : 20;
-    for (let index = limitFeesTemplate; index > -1; index--) {
+
+    let maxTier = 0;
+    for (let index = 37; index > -1; index--) {
      feesArray = [];
      mempoolStats.forEach((stats) => {
+        if (stats.vsizes[index] >= this.filterSize) {
+          maxTier = Math.max(maxTier, index);
+        }
        feesArray.push([stats.added * 1000, stats.vsizes[index] ? stats.vsizes[index] : 0]);
      });
      finalArray.push(feesArray);
    }
+    this.maxFeeIndex = maxTier;
+
    finalArray.reverse();
    return finalArray;
  }
@@ -121,7 +132,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
    const newColors = [];
    for (let index = 0; index < series.length; index++) {
      const value = series[index];
-      if (index >= this.feeLimitIndex) {
+      if (index >= this.feeLimitIndex && index <= this.maxFeeIndex) {
        newColors.push(this.chartColorsOrdered[index]);
        seriesGraph.push({
          zlevel: 0,
@@ -178,7 +189,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
        alwaysShowContent: false,
        position: (pos, params, el, elRect, size) => {
          const positions = { top: (this.template === 'advanced') ? 0 : -30 };
-          positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 60;
+          positions[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 100;
          return positions;
        },
        extraCssText: `width: ${(this.template === 'advanced') ? '275px' : '200px'};
@@ -186,10 +197,19 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
                      border: none;
                      box-shadow: none;`,
        axisPointer: {
-          type: 'line',
+          type: 'cross',
+          label: {
+            formatter: (params: any) => {
+              if (params.axisDimension === 'y') {
+                return this.vbytesPipe.transform(params.value, 2, 'vB', 'MvB', true)
+              } else {
+                return formatterXAxis(this.locale, this.windowPreference, params.value);
+              }
+            }
+          }
        },
        formatter: (params: any) => {
-          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);         
+          const axisValueLabel: string = formatterXAxis(this.locale, this.windowPreference, params[0].axisValue);
          const { totalValue, totalValueArray } = this.getTotalValues(params);
          const itemFormatted = [];
          let totalParcial = 0;
@@ -371,15 +391,24 @@ export class MempoolGraphComponent implements OnInit, OnChanges {

  orderLevels() {
    this.feeLevelsOrdered = [];
+    const maxIndex = Math.min(feeLevels.length, this.maxFeeIndex);
    for (let i = 0; i < feeLevels.length; i++) {
      if (feeLevels[i] === this.limitFilterFee) {
        this.feeLimitIndex = i;
      }
-      if (feeLevels[i] <= this.limitFee) {
+      if (feeLevels[i] <= feeLevels[this.maxFeeIndex]) {
        if (this.stateService.network === 'liquid' || this.stateService.network === 'liquidtestnet') {
-          this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1]  / 10).toFixed(1)}`);
+          if (i === maxIndex || feeLevels[i] == null) {
+            this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)}+`);
+          } else {
+            this.feeLevelsOrdered.push(`${(feeLevels[i] / 10).toFixed(1)} - ${(feeLevels[i + 1]  / 10).toFixed(1)}`);
+          }
        } else {
-          this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
+          if (i === maxIndex || feeLevels[i] == null) {
+            this.feeLevelsOrdered.push(`${feeLevels[i]}+`);
+          } else {
+            this.feeLevelsOrdered.push(`${feeLevels[i]} - ${feeLevels[i + 1]}`);
+          }
        }
      }
    }
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
@@ -73,24 +73,4 @@
    </div>

  </div>
-
-  <div class="pref-selectors">
-    <div class="selector">
-      <app-language-selector></app-language-selector>
-    </div>
-    <div class="selector">
-      <app-fiat-selector></app-fiat-selector>
-    </div>
-  </div>
-
-  <div class="terms-of-service">
-    <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-    |
-    <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-    |
-    <a [routerLink]="['/tx/push' | relativeUrl]" i18n="shared.broadcast-transaction|Broadcast Transaction">Broadcast Transaction</a>
-  </div>
-
-  <br>
-
 </div>
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@@ -1,10 +1,6 @@
 .dashboard-container {
-  padding-bottom: 60px;
  text-align: center;
  margin-top: 0.5rem;
-  @media (min-width: 992px) {
-    padding-bottom: 0px;
-  }
  .col {
    margin-bottom: 1.5rem;
  }
@@ -104,22 +100,3 @@
  text-decoration: none;
  color: inherit;
 }
-
-.terms-of-service {
-  margin-top: 1rem;
-}
-
-.pref-selectors {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  .selector {
-    margin-left: .5em;
-    margin-bottom: .5em;
-    &:first {
-      margin-left: 0;
-    }
-  }
-}
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -32,7 +32,7 @@
  </div>

  <div class="card-header" *ngIf="!widget">
-    <div class="d-flex d-md-block align-items-baseline">
+    <div class="d-flex d-md-table-cell align-items-baseline">
      <span i18n="mining.pools">Pools Ranking</span>
      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
@@ -75,7 +75,7 @@
    </form>
  </div>

-  <div [class]="!widget ? 'bottom-padding' : 'pb-0'" class="container pb-lg-0">
+  <div [class]="!widget ? '' : 'pb-0'" class="container pb-lg-0">
    <div [class]="widget ? 'chart-widget' : 'chart'" echarts [initOpts]="chartInitOptions" [options]="chartOptions"
      (chartInit)="onChartInit($event)">
    </div>
@@ -87,19 +87,20 @@
    <table *ngIf="widget === false" class="table table-borderless text-center pools-table">
      <thead>
        <tr>
-          <th class="d-none d-md-block" i18n="mining.rank">Rank</th>
+          <th class="d-none d-md-table-cell" i18n="mining.rank">Rank</th>
          <th class=""></th>
          <th class="" i18n="mining.pool-name">Pool</th>
          <th class="" *ngIf="this.miningWindowPreference === '24h'" i18n="mining.hashrate">Hashrate</th>
          <th class="" i18n="master-page.blocks">Blocks</th>
          <th *ngIf="auditAvailable" class="health text-right widget" i18n="latest-blocks.avg_health"
            i18n-ngbTooltip="latest-blocks.avg_health" ngbTooltip="Avg Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Avg Health</th>
-          <th class="d-none d-md-block" i18n="mining.empty-blocks">Empty blocks</th>
+          <th *ngIf="auditAvailable" class="d-none d-sm-table-cell" i18n="mining.fees-per-block">Avg Block Fees</th>
+          <th class="d-none d-lg-table-cell" i18n="mining.empty-blocks">Empty blocks</th>
        </tr>
      </thead>
      <tbody [attr.data-cy]="'pools-table'" *ngIf="(miningStatsObservable$ | async) as miningStats">
        <tr *ngFor="let pool of miningStats.pools">
-          <td class="d-none d-md-block">{{ pool.rank }}</td>
+          <td class="d-none d-md-table-cell">{{ pool.rank }}</td>
          <td class="text-right">
            <img width="25" height="25" src="{{ pool.logo }}" [alt]="pool.name + ' mining pool logo'" onError="this.src = '/resources/mining-pools/default.svg'">
          </td>
@@ -107,7 +108,7 @@
          <td class="" *ngIf="this.miningWindowPreference === '24h'">{{ pool.lastEstimatedHashrate }} {{
            miningStats.miningUnits.hashrateUnit }}</td>
          <td class="d-flex justify-content-center">
-            {{ pool.blockCount }}<span class="d-none d-md-block">&nbsp;({{ pool.share }}%)</span>
+            {{ pool.blockCount }}<span class="d-none d-md-table-cell">&nbsp;({{ pool.share }}%)</span>
          </td>
          <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
            <a
@@ -121,22 +122,29 @@
              <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
            </ng-template>
          </td>
-          <td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
+          <td *ngIf="auditAvailable" class="d-none d-sm-table-cell">
+            <span *ngIf="pool.avgFeeDelta != null; else nullFeeDelta" class="difference" [class.positive]="pool.avgFeeDelta >= 0" [class.negative]="pool.avgFeeDelta < 0">
+              {{ pool.avgFeeDelta > 0 ? '+' : '' }}{{ (pool.avgFeeDelta * 100) | amountShortener: 2 }}%
+            </span>
+            <ng-template #nullFeeDelta>
+              -
+            </ng-template>
+          </td>        
+          <td class="d-none d-lg-table-cell">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
        </tr>
        <tr style="border-top: 1px solid #555">
-          <td class="d-none d-md-block"></td>
+          <td class="d-none d-md-table-cell"></td>
          <td class="text-right"></td>
          <td class=""><b i18n="mining.all-miners">All miners</b></td>
          <td class="" *ngIf="this.miningWindowPreference === '24h'"><b>{{ miningStats.lastEstimatedHashrate}} {{
              miningStats.miningUnits.hashrateUnit }}</b></td>
          <td class=""><b>{{ miningStats.blockCount }}</b></td>
-          <td class="d-none d-md-block"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio
+          <td class="d-none d-md-table-cell"><b>{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio
              }}%)</b></td>
        </tr>
      </tbody>
    </table>
  </div>
-
 </div>


--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.scss
@@ -10,6 +10,7 @@
  padding: 0px 15px;
  width: 100%;
  height: calc(100% - 140px);
+  padding-bottom: 20px;
  @media (max-width: 992px) {
    height: calc(100% - 190px);
  };
@@ -33,15 +34,6 @@
  }
 }

-.bottom-padding {
-  @media (max-width: 992px) {
-    padding-bottom: 65px
-  };
-  @media (max-width: 576px) {
-    padding-bottom: 65px
-  };
-}
-
@media (max-width: 767.98px) {
  .pools-table th,
  .pools-table td {
@@ -118,4 +110,15 @@
 .disabled {
  pointer-events: none;
  opacity: 0.5;
-}
+}
+
+td {
+  .difference {
+    &.positive {
+      color: rgb(66, 183, 71);
+    }
+    &.negative {
+      color: rgb(183, 66, 66);
+    }
+  }
+}
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.ts
@@ -162,10 +162,10 @@ export class PoolRankingComponent implements OnInit {
            if (this.miningWindowPreference === '24h') {
              return `<b style="color: white">${pool.name} (${pool.share}%)</b><br>` +
                pool.lastEstimatedHashrate.toString() + ' PH/s' +
-                `<br>` + $localize`${i} blocks`;
+                `<br>` + $localize`${ i }:INTERPOLATION: blocks`;
            } else {
              return `<b style="color: white">${pool.name} (${pool.share}%)</b><br>` +
-                $localize`${i} blocks`;
+                $localize`${ i }:INTERPOLATION: blocks`;
            }
          }
        },
@@ -195,13 +195,15 @@ export class PoolRankingComponent implements OnInit {
        },
        borderColor: '#000',
        formatter: () => {
+          const percentage = totalShareOther.toFixed(2) + '%';
+          const i = totalBlockOther.toString();
          if (this.miningWindowPreference === '24h') {
-            return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
+            return `<b style="color: white">` + $localize`Other (${percentage})` + `</b><br>` +
              totalEstimatedHashrateOther.toString() + ' PH/s' +
-              `<br>` + totalBlockOther.toString() + ` blocks`;
+              `<br>` + $localize`${ i }:INTERPOLATION: blocks`;
          } else {
-            return `<b style="color: white">${'Other'} (${totalShareOther.toFixed(2)}%)</b><br>` +
-              totalBlockOther.toString() + ` blocks`;
+            return `<b style="color: white">` + $localize`Other (${percentage})` + `</b><br>` +
+              $localize`${ i }:INTERPOLATION: blocks`;
          }
        }
      },
--- a/frontend/src/app/components/pool/pool-preview.component.ts
+++ b/frontend/src/app/components/pool/pool-preview.component.ts
@@ -86,11 +86,6 @@ export class PoolPreviewComponent implements OnInit {
            regexes += regex + '", "';
          }
          poolStats.pool.regexes = regexes.slice(0, -3);
-          poolStats.pool.addresses = poolStats.pool.addresses;
-
-          if (poolStats.reportedHashrate) {
-            poolStats.luck = poolStats.estimatedHashrate / poolStats.reportedHashrate * 100;
-          }

          this.openGraphService.waitOver('pool-stats-' + this.slug);

--- a/frontend/src/app/components/pool/pool.component.html
+++ b/frontend/src/app/components/pool/pool.component.html
@@ -38,12 +38,12 @@
              <tr *ngIf="!isMobile()" class="taller-row">
                <td class="label addresses" i18n="mining.addresses">Addresses</td>
                <td *ngIf="poolStats.pool.addresses.length else nodata" style="padding-top: 25px">
-                  <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]" class="first-address">
+                  <a  class="addresses-data" [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
                    {{ poolStats.pool.addresses[0] }}
                  </a>
                  <div>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg">
-                      <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
+                      <a class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
                        [routerLink]="['/address' | relativeUrl, address]">{{
                        address }}<br></a>
                    </div>
@@ -67,13 +67,13 @@
                      [attr.aria-expanded]="!gfg" aria-controls="collapseExample">
                      <span i18n="show-all">Show all</span> ({{ poolStats.pool.addresses.length }})
                    </button>
-                    <a [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
-                      {{ poolStats.pool.addresses[0] | shortenString: 40 }}
+                    <a class="addresses-data" [routerLink]="['/address' | relativeUrl, poolStats.pool.addresses[0]]">
+                      {{ poolStats.pool.addresses[0] | shortenString: 30 }}
                    </a>
                    <div #collapse="ngbCollapse" [(ngbCollapse)]="gfg" style="width: 100%">
-                      <a *ngFor="let address of poolStats.pool.addresses | slice: 1"
+                      <a class="addresses-data" *ngFor="let address of poolStats.pool.addresses | slice: 1"
                        [routerLink]="['/address' | relativeUrl, address]">{{
-                        address | shortenString: 40 }}<br></a>
+                        address | shortenString: 30 }}<br></a>
                    </div>
                  </div>
                </td>
@@ -88,22 +88,25 @@

              <!-- Hashrate desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
-                <td class="label" i18n="mining.hashrate-24h">Hashrate (24h)</td>
                <td class="data">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.estimated">Estimated</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported</th>
-                        <th scope="col" class="block-count-title" style="width: 26%" i18n="mining.luck">Luck</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.reward">Reward</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
-                      <ng-template *ngIf="poolStats.luck; else noreported">
-                        <td>{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }}</td>
-                        <td>{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}%</td>
-                      </ng-template>
+                      <td class="text-center"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true"></app-amount></td>
+                      <td class="text-center">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
+                      <td class="text-center" *ngIf="auditAvailable; else emptyTd"><span class="health-badge badge" [class.badge-success]="poolStats.avgBlockHealth >= 99"
+                          [class.badge-warning]="poolStats.avgBlockHealth >= 75 && poolStats.avgBlockHealth < 99" [class.badge-danger]="poolStats.avgBlockHealth < 75"
+                          *ngIf="poolStats.avgBlockHealth != null; else nullHealth">{{ poolStats.avgBlockHealth }}%</span>
+                          <ng-template #nullHealth>
+                            <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+                          </ng-template>
+                      </td>
                    </tbody>
                  </table>
                </td>
@@ -111,49 +114,46 @@
              <!-- Hashrate mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
-                  <span class="label" i18n="mining.hashrate-24h">Hashrate (24h)</span>
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 33%" i18n="mining.estimated">Estimated</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported</th>
-                        <th scope="col" class="block-count-title" style="width: 30%" i18n="mining.luck">Luck</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.reward">Reward</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
-                      <ng-template *ngIf="poolStats.luck; else noreported">
-                        <td>{{ poolStats.reportedHashrate | amountShortener : 1 : 'H/s' }}</td>
-                        <td>{{ formatNumber(poolStats.luck, this.locale, '1.2-2') }}%</td>
-                      </ng-template>
+                      <td class="text-center"><app-amount [satoshis]="poolStats.totalReward" digitsInfo="1.0-0" [noFiat]="true"></app-amount></td>
+                      <td class="text-center">{{ poolStats.estimatedHashrate | amountShortener : 1 : 'H/s' }}</td>
+                      <td *ngIf="auditAvailable; else emptyTd" class="text-center"><span class="health-badge badge" [class.badge-success]="poolStats.avgBlockHealth >= 99"
+                          [class.badge-warning]="poolStats.avgBlockHealth >= 75 && poolStats.avgBlockHealth < 99" [class.badge-danger]="poolStats.avgBlockHealth < 75"
+                          *ngIf="poolStats.avgBlockHealth != null; else nullHealth">{{ poolStats.avgBlockHealth }}%</span>
+                          <ng-template #nullHealth>
+                            <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+                          </ng-template>
+                      </td>
                    </tbody>
                  </table>
                </td>
              </tr>

-              <ng-template #noreported>
-                <td>~</td>
-                <td>~</td>
-              </ng-template>
-
              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
-                <td class="label" i18n="mining.mined-blocks">Mined blocks</td>
                <td class="data">
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="24h">24h</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
-                        <th scope="col" class="block-count-title" style="width: 26%" i18n="all">All</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
-                      <td>{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
-                      <td>{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
                    </tbody>
                  </table>
@@ -162,21 +162,20 @@
              <!-- Mined blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
-                  <span class="label" i18n="mining.mined-blocks">Mined blocks</span>
                  <table class="table table-xs table-data">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 33%" i18n="24h">24h</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="1w">1w</th>
-                        <th scope="col" class="block-count-title" style="width: 30%" i18n="all">All</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['24h'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['24h'], this.locale, '1.0-0') }}%)</td>
-                      <td>{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['1w'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['1w'], this.locale, '1.0-0') }}%)</td>
-                      <td>{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
+                      <td class="text-center">{{ formatNumber(poolStats.blockCount['all'], this.locale, '1.0-0') }} ({{ formatNumber(100 *
                        poolStats.blockShare['all'], this.locale, '1.0-0') }}%)</td>
                    </tbody>
                  </table>
@@ -213,8 +212,9 @@
        <th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
        <th class="mined" i18n="latest-blocks.mined">Mined</th>
        <th class="coinbase text-left" i18n="latest-blocks.coinbasetag">Coinbase tag</th>
+        <th *ngIf="auditAvailable" class="health text-right" i18n="latest-blocks.health">Health</th>
        <th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
-        <th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
+        <th *ngIf="!auditAvailable" class="fees text-right" i18n="latest-blocks.fees">Fees</th>
        <th class="txs text-right" i18n="dashboard.txs">TXs</th>
        <th class="size" i18n="latest-blocks.size">Size</th>
      </thead>
@@ -234,10 +234,24 @@
              {{ block.extras.coinbaseRaw | hex2ascii }}
            </span>
          </td>
+          <td *ngIf="auditAvailable" class="health text-right">
+            <a
+              class="health-badge badge"
+              [class.badge-success]="block.extras.matchRate >= 99"
+              [class.badge-warning]="block.extras.matchRate >= 75 && block.extras.matchRate < 99"
+              [class.badge-danger]="block.extras.matchRate < 75"
+              [routerLink]="block.extras.matchRate != null ? ['/block/' | relativeUrl, block.id] : null"
+              [state]="{ data: { block: block } }"
+              *ngIf="block.extras.matchRate != null; else nullHealth"
+            >{{ block.extras.matchRate }}%</a>
+            <ng-template #nullHealth>
+              <span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
+            </ng-template>
+          </td>
          <td class="reward text-right">
            <app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
          </td>
-          <td class="fees text-right">
+          <td *ngIf="!auditAvailable" class="fees text-right">
            <app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2" [noFiat]="true"></app-amount>
          </td>
          <td class="txs text-right">
@@ -364,24 +378,23 @@

              <!-- Hashrate desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
-                <td class="label" i18n="mining.hashrate-24h">Hashrate (24h)</td>
                <td class="data">
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.estimated">Estimated</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported</th>
-                        <th scope="col" class="block-count-title" style="width: 26%" i18n="mining.luck">Luck</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center" *ngIf="auditAvailable">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
@@ -391,23 +404,22 @@
              <!-- Hashrate mobile -->
              <tr *ngIf="isMobile()">
                <td colspan="2">
-                  <span class="label" i18n="mining.hashrate-24h">Hashrate (24h)</span>
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 33%" i18n="mining.estimated">Estimated</th>
-                        <th scope="col" class="block-count-title" style="width: 37%" i18n="mining.reported">Reported</th>
-                        <th scope="col" class="block-count-title" style="width: 30%" i18n="mining.luck">Luck</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
+                        <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center" *ngIf="auditAvailable">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
@@ -417,24 +429,23 @@

              <!-- Mined blocks desktop -->
              <tr *ngIf="!isMobile()" class="taller-row">
-                <td class="label" i18n="mining.mined-blocks">Mined blocks</td>
                <td class="data">
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 37%">24h</th>
-                        <th scope="col" class="block-count-title" style="width: 37%">1w</th>
-                        <th scope="col" class="block-count-title" style="width: 26%" i18n="all">All</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
@@ -444,23 +455,22 @@
              <!-- Mined blocks mobile -->
              <tr *ngIf="isMobile()">
                <td colspan=2>
-                  <span class="label" i18n="mining.mined-blocks">Mined blocks</span>
                  <table class="table table-xs table-data text-center">
                    <thead>
                      <tr>
-                        <th scope="col" class="block-count-title" style="width: 33%">24h</th>
-                        <th scope="col" class="block-count-title" style="width: 37%">1w</th>
-                        <th scope="col" class="block-count-title" style="width: 30%" i18n="all">All</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
+                        <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
                      </tr>
                    </thead>
                    <tbody>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
-                      <td>
+                      <td class="text-center">
                        <div class="skeleton-loader data"></div>
                      </td>
                    </tbody>
@@ -475,4 +485,8 @@
      </div>
    </div>
  </div>
+</ng-template>
+
+<ng-template #emptyTd>
+  <td class="text-center"></td>
 </ng-template>
--- a/frontend/src/app/components/pool/pool.component.scss
+++ b/frontend/src/app/components/pool/pool.component.scss
@@ -68,6 +68,11 @@ div.scrollable {
  vertical-align: top;
  padding-top: 25px;
 }
+.addresses-data {
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 14px;
+}

 .data {
  text-align: right;
@@ -100,7 +105,7 @@ div.scrollable {
  @media (max-width: 875px) {
    padding-left: 50px;
  }
-  @media (max-width: 650px) {
+  @media (max-width: 685px) {
    display: none;
  }
 }
@@ -118,7 +123,7 @@ div.scrollable {
    padding-right: 10px;
  }
  @media (max-width: 875px) {
-    padding-right: 50px;
+    padding-right: 20px;
  }
  @media (max-width: 567px) {
    padding-right: 10px;
@@ -183,12 +188,16 @@ div.scrollable {
  }
 }

-.block-count-title {
+.data-title {
  color: #4a68b9;
  font-size: 14px;
-  text-align: left;
-  @media (max-width: 767.98px) {
-    text-align: center;
+}
+
+.clip {
+  @media (max-width: 576px) {
+    max-width: 85px;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }
 }

--- a/Show More
+++ b/Show More