diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
index f7484fb70..9360899e6 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.html
@@ -88,7 +88,7 @@
         <stop offset="100%" stop-color="transparent" />
       </linearGradient>
     </defs>
-    <path [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
+    <path *ngIf="hasLine" [attr.d]="middle.path" class="line middle" [style]="middle.style"/>
     <ng-container *ngFor="let input of inputs; let i = index">
       <path *ngIf="connectors && !inputData[i].coinbase && !inputData[i].pegin"
         [attr.d]="input.connectorPath"
@@ -106,7 +106,7 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
-      <path
+      <path *ngIf="!input.zeroValue"
         [attr.d]="input.path"
         class="line {{input.class}}"
         [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
@@ -116,6 +116,16 @@
         (pointerout)="onBlur($event, 'input', i);"
         (click)="onClick($event, 'input', inputData[i].index);"
       />
+      <path *ngIf="input.zeroValue"
+        [attr.d]="input.path"
+        class="line {{input.class}} zerovalue"
+        [class.highlight]="inputIndex != null && inputData[i].index === inputIndex"
+        [class.zerovalue]="input.zeroValue"
+        [style]="input.style"
+        (pointerover)="onHover($event, 'input', i);"
+        (pointerout)="onBlur($event, 'input', i);"
+        (click)="onClick($event, 'input', inputData[i].index);"
+      />
     </ng-container>
     <ng-container *ngFor="let output of outputs; let i = index">
       <path *ngIf="connectors && outspends[outputData[i].index]?.spent"
diff --git a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
index 74eb4c67b..49d97dd40 100644
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@@ -68,6 +68,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
   outspends: Outspend[] = [];
   zeroValueWidth = 60;
   zeroValueThickness = 20;
+  hasLine: boolean;
 
   outspendsSubscription: Subscription;
   refreshOutspends$: ReplaySubject<string> = new ReplaySubject();
@@ -162,7 +163,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     let truncatedInputs = this.tx.vin.map((v, i) => {
       return {
         type: 'input',
-        value: v?.prevout?.value,
+        value: v?.prevout?.value || (v?.is_coinbase && !totalValue ? 0 : undefined),
         txid: v.txid,
         vout: v.vout,
         address: v?.prevout?.scriptpubkey_address || v?.prevout?.scriptpubkey_type?.toUpperCase(),
@@ -198,6 +199,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
       path: `M ${(this.width / 2) - this.midWidth} ${(this.height / 2) + 0.5} L ${(this.width / 2) + this.midWidth} ${(this.height / 2) + 0.5}`,
       style: `stroke-width: ${this.combinedWeight + 1}; stroke: ${this.gradient[1]}`
     };
+
+    this.hasLine = this.inputs.reduce((line, put) => line || !put.zeroValue, false)
+      && this.outputs.reduce((line, put) => line || !put.zeroValue, false);
   }
 
   calcTotalValue(tx: Transaction): number {
@@ -278,6 +282,9 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
     lineParams.forEach((line, i) => {
       if (xputs[i].value === 0) {
         line.outerY = lastOuter + (this.zeroValueThickness / 2);
+        if (xputs.length === 1) {
+          line.outerY = (this.height / 2);
+        }
         lastOuter += this.zeroValueThickness + spacing;
         return;
       }