diff --git a/frontend/src/app/components/address/address-preview.component.html b/frontend/src/app/components/address/address-preview.component.html
index 30b9c29e6..6a2d1efee 100644
--- a/frontend/src/app/components/address/address-preview.component.html
+++ b/frontend/src/app/components/address/address-preview.component.html
@@ -1,12 +1,12 @@
 <div class="box preview-box" *ngIf="address && !error">
+  <h2 class="preview-header" i18n="shared.address">Address</h2>
   <div class="row">
     <div class="col-md">
-      <div class="title-address">
-        <h1 i18n="shared.address">Address</h1>
+      <div class="row d-flex justify-content-between">
+        <div class="title-wrapper">
+          <h1 class="title truncated"><span class="first">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span></h1>
+        </div>
       </div>
-      <a [routerLink]="['/address/' | relativeUrl, addressString]" class="address-link" >
-        <span class="truncated-address">{{addressString.slice(0,-4)}}</span><span class="last-four">{{addressString.slice(-4)}}</span>
-      </a>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr *ngIf="addressInfo && addressInfo.unconfidential">
diff --git a/frontend/src/app/components/address/address-preview.component.scss b/frontend/src/app/components/address/address-preview.component.scss
index 2de368547..afa8cb4b4 100644
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@@ -1,6 +1,5 @@
-h1 {
-  font-size: 52px;
-  margin: 0;
+.title-wrapper {
+  padding: 0 15px;
 }
 
 .qr-wrapper {
@@ -23,27 +22,9 @@ h1 {
 
 .table {
   font-size: 32px;
+  margin-top: 48px;
 
   ::ng-deep .symbol {
     font-size: 24px;
   }
-}
-
-.address-link {
-  font-size: 24px;
-  margin-bottom: 0.5em;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  .truncated-address {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: calc(640px - 4em);
-    display: inline-block;
-    white-space: nowrap;
-  }
-  .last-four {
-    display: inline-block;
-    white-space: nowrap;
-  }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/block/block-preview.component.html b/frontend/src/app/components/block/block-preview.component.html
index 768bc3da3..38018bbb4 100644
--- a/frontend/src/app/components/block/block-preview.component.html
+++ b/frontend/src/app/components/block/block-preview.component.html
@@ -1,19 +1,16 @@
 <div class="box preview-box" *ngIf="!error">
+  <h2 class="preview-header" i18n="shared.block-title">Block</h2>
   <div class="row">
     <div class="col-sm">
-      <h1 class="block-title">
-        <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container>
-          <span class="next-previous-blocks">
-            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
-          </span>
-        </ng-template>
-        <ng-template [ngIf]="blockHeight" i18n="shared.block-title">Block <ng-container *ngTemplateOutlet="blockTemplateContent"></ng-container></ng-template>
-        <ng-template #blockTemplateContent>
-          <span class="next-previous-blocks">
-            <a [routerLink]="['/block/' | relativeUrl, blockHash]">{{ blockHeight }}</a>
-          </span>
-        </ng-template>
-      </h1>
+      <div class="row d-flex justify-content-between">
+        <div class="title-wrapper">
+          <h1 class="title">
+            <ng-template [ngIf]="blockHeight === 0"><ng-container i18n="@@2303359202781425764">Genesis</ng-container></ng-template>
+            <ng-template [ngIf]="blockHeight" i18n="shared.block-title">{{ blockHeight }}</ng-template>
+          </h1>
+        </div>
+      </div>
+      <a class="subtitle truncated" [routerLink]="['/block/' | relativeUrl, blockHash]"><span class="first">{{blockHash.slice(0,-4)}}</span><span class="last-four">{{blockHash.slice(-4)}}</span></a>
       <table class="table table-borderless table-striped">
         <tbody>
           <!-- <tr>
diff --git a/frontend/src/app/components/block/block-preview.component.scss b/frontend/src/app/components/block/block-preview.component.scss
index 2c1f40bc5..2d8d5f6ba 100644
--- a/frontend/src/app/components/block/block-preview.component.scss
+++ b/frontend/src/app/components/block/block-preview.component.scss
@@ -1,14 +1,10 @@
-.block-title {
-  margin-bottom: 48px;
-  font-size: 52px;
-
-  ::ng-deep .next-previous-blocks {
-    font-size: 52px;
-  }
-}
-
 .table {
   font-size: 32px;
+  margin-top: 6px;
+}
+
+.title-wrapper {
+  padding-left: 15px;
 }
 
 .chart-container {
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.html b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
index b08c991de..917a44486 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@@ -7,12 +7,12 @@
     </span>
 
     <div [ngSwitch]="network.val">
-      <span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
-      <span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
+      <span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet</span>
+      <span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
       <span *ngSwitchCase="'bisq'" class="network bisq"><app-svg-images name="bisq" width="35" height="35" viewBox="0 0 75 75" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Bisq</span>
       <span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid</span>
       <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</span>
-      <span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet <ng-template [ngIf]="(lightning$ | async)">Lightning</ng-template></span>
+      <span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
     </div>
   </header>
   <router-outlet></router-outlet>
diff --git a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
index 605c4f6d9..4dffc1699 100644
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@@ -33,4 +33,66 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  ::ng-deep .preview-header {
+    position: absolute;
+    top: -80px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    padding: 0 220px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 101;
+    line-height: 80px;
+    text-transform: capitalize;
+  }
+
+  ::ng-deep .title {
+    font-size: 52px;
+  }
+  ::ng-deep .subtitle {
+    font-size: 28px;
+  }
+
+  ::ng-deep .title, ::ng-deep .subtitle {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    display: inline-block;
+
+    &.truncated {
+      text-overflow: unset;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      .first {
+        flex-grow: 1;
+        flex-shrink: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-right: -2px;
+      }
+
+      .last-four {
+        flex-shrink: 0;
+        flex-grow: 0;
+      }
+    }
+  }
+
+  ::ng-deep .title-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin: 0;
+    width: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
 }
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.html b/frontend/src/app/components/transaction/transaction-preview.component.html
index 1708d4b47..83dd8001e 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.html
+++ b/frontend/src/app/components/transaction/transaction-preview.component.html
@@ -1,10 +1,9 @@
 <div class="box preview-box" *ngIf="tx && !error">
-
-  <div class="page-title">
-    <h1 i18n="shared.transaction">Transaction</h1>
-    <a class="tx-link" [routerLink]="['/tx/' | relativeUrl, txId]">
-      <span class="truncated">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span>
-    </a>
+  <h2 class="preview-header" i18n="shared.transaction">Transaction</h2>
+  <div class="row d-flex justify-content-between full-width-row">
+    <div class="title-wrapper">
+      <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>
+    </div>
     <div *ngIf="network !== 'liquid' && network !== 'liquidtestnet'" class="features">
       <app-tx-features [tx]="tx"></app-tx-features>
       <span *ngIf="cpfpInfo && cpfpInfo.bestDescendant" class="badge badge-primary mr-1">
@@ -15,7 +14,6 @@
       </span>
     </div>
   </div>
-
   <div class="top-data row">
     <span class="field col-sm-4 text-left">
       <ng-template [ngIf]="isLiquid && haveBlindedOutputValues(tx)" [ngIfElse]="defaultAmount" i18n="shared.confidential">Confidential</ng-template>
diff --git a/frontend/src/app/components/transaction/transaction-preview.component.scss b/frontend/src/app/components/transaction/transaction-preview.component.scss
index 7aefe0063..65c0ca75e 100644
--- a/frontend/src/app/components/transaction/transaction-preview.component.scss
+++ b/frontend/src/app/components/transaction/transaction-preview.component.scss
@@ -26,56 +26,9 @@
 	margin-top: 0px;
 }
 
-.page-title {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 2px;
-  max-width: 100%;
-
-  h1 {
-    font-size: 52px;
-    margin: 0;
-    line-height: 1;
-  }
-
-  .features {
-    font-size: 24px;
-  }
-
-  & > * {
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-
-  .tx-link {
-    flex-grow: 1;
-    flex-shrink: 1;
-    margin: 0 1em;
-    overflow: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-
-    .truncated {
-      flex-grow: 1;
-      flex-shrink: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: -2px;
-    }
-
-    .last-four {
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-  }
-
-  .features {
-    align-self: center;
-  }
+.features {
+  font-size: 24px;
+  margin-left: 1em;
 }
 
 .top-data {
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html
index a847975c2..2c4fd42c4 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.html
+++ b/frontend/src/app/lightning/channel/channel-preview.component.html
@@ -1,9 +1,9 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
+  <h2 class="preview-header" i18n="lightning.channel">lightning channel</h2>
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">
-      <span i18n="lightning.channel">Channel</span>: 
-      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]"> {{ channel.short_id }}</a>
-    </h1>
+    <div class="title-wrapper">
+      <h1 class="title">{{ channel.short_id }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
       <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
@@ -12,20 +12,11 @@
       <app-closing-type [type]="channel.closing_reason" *ngIf="channel.status === 2"></app-closing-type>
     </div>
   </div>
-  <div class="row d-flex justify-content-between full-width-row nodes">
-    <span class="node left">
-      {{ channel.node_left.alias || '?' }}
-    </span>
-    <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true" title="channel between"></fa-icon>
-    <span class="node right">
-      {{ channel.node_right.alias || '?' }}
-    </span>
-  </div>
   <div class="row">
     <div class="col-md">
+      <a class="subtitle" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
       <table class="table table-borderless table-striped">
         <tbody>
-          <tr></tr>
           <tr>
             <td i18n="channel.created">Created</td>
             <td>{{ channel.created | date:'yyyy-MM-dd HH:mm' }}</td>
@@ -61,6 +52,15 @@
       <app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo" [fitContainer]="true" [placeholder]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
     </div>
   </div>
+  <div class="row d-flex justify-content-between full-width-row nodes">
+    <span class="node left">
+      {{ channel.node_left.alias || '?' }}
+    </span>
+    <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true" title="channel between"></fa-icon>
+    <span class="node right">
+      {{ channel.node_right.alias || '?' }}
+    </span>
+  </div>
 </div>
 
 <ng-template [ngIf]="error">
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss
index e89733ff3..23a874ee8 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -1,15 +1,17 @@
-.title {
-  font-size: 52px;
-  margin: 0;
-}
-
 .table {
   font-size: 32px;
-  margin-top: 36px;
+  margin-top: 10px;
 }
 
 .badges {
   font-size: 28px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: flex-end;
 
   ::ng-deep .badge {
     margin-left: 0.5em;
@@ -23,11 +25,12 @@
 .full-width-row {
   padding-left: 15px;
   padding-right: 15px;
+  flex-wrap: nowrap;
+}
 
-  &:nth-child(even) {
-    background: #181b2d;
-    margin: 15px 0;
-  }
+.row.nodes {
+  background: #181b2d;
+  margin: 15px 0 0;
 }
 
 .nodes {
@@ -46,7 +49,7 @@
   min-width: 470px;
   padding: 0;
   background: #181b2d;
-  max-height: 470px;
+  max-height: 350px;
   overflow: hidden;
 }
 
diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html
index a94882161..b3a7141b3 100644
--- a/frontend/src/app/lightning/node/node-preview.component.html
+++ b/frontend/src/app/lightning/node/node-preview.component.html
@@ -1,15 +1,17 @@
 <div class="box preview-box" *ngIf="(node$ | async) as node">
+  <h2 class="preview-header" i18n="lightning.node">lightning node</h2>
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">
-      <span i18n="lightning.node">Node</span>:
-      <a [routerLink]="['/lightning/node' | relativeUrl, node.id]"> {{ node.alias }}</a>
-    </h1>
+    <h1 class="title"></h1>
+    <div class="title-wrapper">
+      <h1 class="title">{{ node.alias }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
     </div>
   </div>
   <div class="row">
     <div class="col-md">
+      <a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
       <table class="table table-borderless table-striped">
         <tbody>
           <tr>
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss
index c6b2ea9d7..c1775dd52 100644
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -1,15 +1,17 @@
-.title {
-  font-size: 52px;
-  margin-bottom: 0;
-}
-
 .table {
-  margin-top: 48px;
+  margin-top: 6px;
   font-size: 32px;
 }
 
 .badges {
   font-size: 28px;
+  flex-shrink: 0;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: baseline;
+  justify-content: flex-end;
 
   ::ng-deep .badge {
     margin-left: 0.5em;
@@ -20,14 +22,14 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 470px;
-  height: 390px;
+  height: 408px;
   min-width: 470px;
-  min-height: 390px;
-  max-height: 390px;
+  min-height: 408px;
+  max-height: 408px;
   padding: 0;
   background: #181b2d;
   overflow: hidden;
-  margin-top: 18px;
+  margin-top: 6px;
 }
 
 .row {
@@ -36,6 +38,7 @@
 
 .full-width-row {
   padding-left: 15px;
+  flex-wrap: nowrap;
 }
 
 ::ng-deep .symbol {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index ac0005d60..65293098d 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -89,7 +89,7 @@ body {
 
 .preview-box {
   min-height: 520px;
-  padding: 1.5rem 3rem;
+  padding: 1rem 3rem 1.5rem;
 }
 
 @media (max-width: 767.98px) {