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..4d5f173fa 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,16 @@
     justify-content: flex-start;
     align-items: center;
   }
+
+  ::ng-deep .preview-header {
+    position: absolute;
+    top: -80px;
+    width: 100%;
+    padding: 0 220px;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 101;
+    line-height: 80px;
+  }
 }
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html
index 364e8c9fe..bf7d5dab3 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.html
+++ b/frontend/src/app/lightning/channel/channel-preview.component.html
@@ -1,9 +1,7 @@
 <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">
-    <div class="title-container mb-0" *ngIf="!error">
-      <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
-      <h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
-    </div>
+    <h1 class="title">{{ channel.short_id }}</h1>
     <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>
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss
index e8e08d5e2..cee0f1bcb 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -1,28 +1,28 @@
-.title-container {
+.title {
+  font-size: 52px;
+  margin: 0;
   width: 0;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
-
-  h5 {
-    font-size: 28px;
-    margin-top: -4px;
-  }
-
-  h1 {
-    font-size: 52px;
-    margin-bottom: 0;
-    margin-top: -8px;
-  }
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .table {
-  margin-top: 14px;
   font-size: 32px;
+  margin-top: 36px;
 }
 
 .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;
@@ -38,7 +38,7 @@
   padding-right: 15px;
   flex-wrap: nowrap;
 
-  &:nth-child(even) {
+  &:nth-child(odd) {
     background: #181b2d;
     margin: 15px 0;
   }
@@ -47,7 +47,6 @@
 .nodes {
   font-size: 36px;
   align-items: center;
-  margin-top: 0px;
 }
 
 .between-arrow {
diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html
index 22a8095b1..4ebbf5cfd 100644
--- a/frontend/src/app/lightning/node/node-preview.component.html
+++ b/frontend/src/app/lightning/node/node-preview.component.html
@@ -1,9 +1,7 @@
 <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">
-    <div class="title-container mb-0" *ngIf="!error">
-      <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
-      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
-    </div>
+    <h1 class="title">{{ node.alias }}</h1>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
     </div>
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss
index b629bbcae..c0b86ce42 100644
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -1,28 +1,28 @@
-.title-container {
+.title {
+  font-size: 52px;
+  margin: 0;
   width: 0;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
-
-  h5 {
-    font-size: 28px;
-    margin-top: -4px;
-  }
-
-  h1 {
-    font-size: 52px;
-    margin-bottom: 0;
-    margin-top: -8px;
-  }
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .table {
-  margin-top: 26px;
+  margin-top: 48px;
   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;
@@ -33,14 +33,14 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 470px;
-  height: 386px;
+  height: 390px;
   min-width: 470px;
-  min-height: 386px;
-  max-height: 386px;
+  min-height: 390px;
+  max-height: 390px;
   padding: 0;
   background: #181b2d;
   overflow: hidden;
-  margin-top: 0;
+  margin-top: 18px;
 }
 
 .row {