diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 9e17a7c64..2c681059e 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <h1 style="float: left;">Address</h1>
-  <a [routerLink]="['/address/', addressString]" style="line-height: 55px; margin-left: 10px;">{{ addressString }}</a>
+  <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
   <app-clipboard [text]="addressString"></app-clipboard>
   <br>
 
diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index 063666de1..89eecb4ca 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -36,7 +36,7 @@ export class AddressComponent implements OnInit {
     .subscribe((address) => {
       this.address = address;
       this.isLoadingAddress = false;
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });
       this.getAddressTransactions(address.address);
     },
     (error) => {
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index de34b56db..ec7bfccf6 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -43,7 +43,7 @@
             <tbody>
               <tr>
                 <td>Hash</td>
-                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}" >{{ block.id | shortenString : 32 }}</a></td>
+                <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 32 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
               </tr>
               <tr>
                 <td>Previous Block</td>
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index ada1b97d2..d724ac292 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -1,7 +1,7 @@
 .title-block {
   color: #FFF;
   padding-left: 10px;
-  padding-top: 13px;
+  padding-top: 20px;
   padding-bottom: 3px;
   border-top: 5px solid #FFF;
 }
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 7351aab0d..aaa18fc1a 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -57,7 +57,7 @@ export class BlockComponent implements OnInit {
       this.blockHeight = block.height;
       this.isLoadingBlock = false;
       this.getBlockTransactions(block.id);
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });
     },
     (error) => {
       this.error = error;
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 89c4f4512..d9dedd870 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -56,7 +56,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
     const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
     if (blockindex !== -1) {
       this.arrowVisible = true;
-      this.arrowLeftPx = blockindex * 150 + 30;
+      this.arrowLeftPx = blockindex * 155 + 30;
     }
   }
 
diff --git a/frontend/src/app/components/blockchain/blockchain.component.html b/frontend/src/app/components/blockchain/blockchain.component.html
index 22eb19710..de335bec9 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.html
+++ b/frontend/src/app/components/blockchain/blockchain.component.html
@@ -5,7 +5,7 @@
 </div>
 <div class="text-center" class="blockchain-wrapper">
   <div class="position-container" [ngStyle]="{'top': position === 'top' ? '75px' : 'calc(50% - 60px)'}">
-    <app-mempool-blocks></app-mempool-blocks>
+    <app-mempool-blocks [txFeePerVSize]="txFeePerVSize"></app-mempool-blocks>
     <app-blockchain-blocks [markHeight]="markHeight"></app-blockchain-blocks>
 
     <div id="divider" *ngIf="!isLoading"></div>
diff --git a/frontend/src/app/components/blockchain/blockchain.component.ts b/frontend/src/app/components/blockchain/blockchain.component.ts
index f47953ff5..93066801f 100644
--- a/frontend/src/app/components/blockchain/blockchain.component.ts
+++ b/frontend/src/app/components/blockchain/blockchain.component.ts
@@ -11,6 +11,7 @@ import { StateService } from 'src/app/services/state.service';
 export class BlockchainComponent implements OnInit, OnDestroy {
   @Input() position: 'middle' | 'top' = 'middle';
   @Input() markHeight: number;
+  @Input() txFeePerVSize: number;
 
   txTrackingSubscription: Subscription;
   blocksSubscription: Subscription;
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 5ecbc53db..61539749a 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -17,4 +17,5 @@
       <span class="animated-border"></span>
     </div>
   </div>
+  <div *ngIf="arrowVisible" id="arrow-up" [ngStyle]="{'right': rightPosition + 75 + 'px' }"></div>
 </div>
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index ccc4410f5..cfeee3ae7 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -100,3 +100,15 @@
   z-index: 100;
   position: relative;
 }
+
+#arrow-up {
+  position: relative;
+  right: 75px;
+  top: 140px;
+  transition: 1s;
+  width: 0; 
+  height: 0; 
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 35px solid #FFF;
+}
\ No newline at end of file
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
index fffc654ef..d4f79385a 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, EventEmitter, Output, OnChanges } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { MempoolBlock } from 'src/app/interfaces/websocket.interface';
 import { StateService } from 'src/app/services/state.service';
@@ -8,16 +8,17 @@ import { StateService } from 'src/app/services/state.service';
   templateUrl: './mempool-blocks.component.html',
   styleUrls: ['./mempool-blocks.component.scss']
 })
-export class MempoolBlocksComponent implements OnInit, OnDestroy {
+export class MempoolBlocksComponent implements OnInit, OnChanges, OnDestroy {
   mempoolBlocks: MempoolBlock[];
   mempoolBlocksSubscription: Subscription;
 
   blockWidth = 125;
-  blockMarginLeft = 20;
+  blockPadding = 30;
+  arrowVisible = false;
+
+  rightPosition = 0;
 
   @Input() txFeePerVSize: number;
-  @Output() rightPosition: EventEmitter<number> = new EventEmitter<number>(true);
-  @Output() blockDepth: EventEmitter<number> = new EventEmitter<number>(true);
 
   constructor(
     private stateService: StateService,
@@ -31,6 +32,10 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
       });
   }
 
+  ngOnChanges() {
+    this.calculateTransactionPosition();
+  }
+
   ngOnDestroy() {
     this.mempoolBlocksSubscription.unsubscribe();
   }
@@ -49,10 +54,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
   }
 
   calculateTransactionPosition() {
-    if (!this.txFeePerVSize) {
+    if (!this.txFeePerVSize || !this.mempoolBlocks) {
+      this.arrowVisible = false;
       return;
     }
 
+    this.arrowVisible = true;
+
     for (const block of this.mempoolBlocks) {
       for (let i = 0; i < block.feeRange.length - 1; i++) {
         if (this.txFeePerVSize < block.feeRange[i + 1] && this.txFeePerVSize >= block.feeRange[i]) {
@@ -68,12 +76,11 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
           const feePosition = feeRangeChunkSize * feeRangeIndex + chunkPositionOffset;
 
           const blockedFilledPercentage = (block.blockVSize > 1000000 ? 1000000 : block.blockVSize) / 1000000;
-
-          const arrowRightPosition = txInBlockIndex * (this.blockMarginLeft + this.blockWidth)
+          console.log(txInBlockIndex);
+          const arrowRightPosition = txInBlockIndex * (this.blockWidth + this.blockPadding)
             + ((1 - feePosition) * blockedFilledPercentage * this.blockWidth);
 
-          this.rightPosition.next(arrowRightPosition);
-          this.blockDepth.next(txInBlockIndex);
+          this.rightPosition = arrowRightPosition;
           break;
         }
       }
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 4cbbfb1cc..afd2dd616 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -1,11 +1,18 @@
 <div class="container">
 
-  <app-blockchain position="top" [markHeight]="tx?.status?.block_height"></app-blockchain>
+  <app-blockchain position="top" [txFeePerVSize]="tx?.status?.block_height ? 0 : tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
 
   <div class="title-block">
     <h1 style="float: left;">Transaction</h1>
-    <a [routerLink]="['/tx/', txId]" style="line-height: 55px; margin-left: 10px;">{{ txId }}</a>
+    <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
     <app-clipboard [text]="txId"></app-clipboard>
+   
+    <ng-template [ngIf]="tx?.status?.confirmed" [ngIfElse]="unconfirmedBtn">
+      <button *ngIf="latestBlock" type="button" class="btn btn-sm btn-success float-right mr-2" style="margin-top: 0.75rem;">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
+    </ng-template>
+    <ng-template #unconfirmedBtn>
+      <button type="button" class="btn btn-sm btn-danger float-right  mr-2" style="margin-top: 0.75rem;">Unconfirmed</button>
+    </ng-template>
   </div>
 
   <br>
@@ -18,14 +25,6 @@
         
         <table class="table table-borderless table-striped">
           <tbody>
-            <tr>
-              <td>Status</td>
-              <td class="adjust-btn-padding">
-                <ng-template [ngIf]="latestBlock">
-                  <button type="button" class="btn btn-sm btn-success">{{ latestBlock.height - tx.status.block_height + 1 }} confirmation<ng-container *ngIf="latestBlock.height - tx.status.block_height + 1 > 1">s</ng-container></button>
-                </ng-template>
-              </td>
-            </tr>
             <tr>
               <td>Included in block</td>
               <td><a [routerLink]="['/block/', tx.status.block_hash]" [state]="{ data: { blockHeight: tx.status.block_height } }">#{{ tx.status.block_height }}</a> at {{ tx.status.block_time * 1000 | date:'yyyy-MM-dd HH:mm' }} <i>(<app-time-since [time]="tx.status.block_time"></app-time-since> ago)</i></td>
@@ -55,14 +54,12 @@
         <table class="table table-borderless table-striped">
           <tbody>
             <tr>
-              <td>Status</td>
-              <td class="adjust-btn-padding">
-                <button type="button" class="btn btn-sm btn-danger">Unconfirmed</button>
-              </td>
+              <td>Fees</td>
+              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span></td>
             </tr>
             <tr>
-              <td>Fees</td>
-              <td>{{ tx.fee | number }} sats <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * tx.fee / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>)</span> {{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
+              <td>Fees per vByte</td>
+              <td>{{ tx.fee / (tx.weight / 4) | number : '1.2-2' }} sat/vB</td>
             </tr>
           </tbody>
         </table>
diff --git a/frontend/src/app/components/transaction/transaction.component.scss b/frontend/src/app/components/transaction/transaction.component.scss
index 0c333589d..5fec140ea 100644
--- a/frontend/src/app/components/transaction/transaction.component.scss
+++ b/frontend/src/app/components/transaction/transaction.component.scss
@@ -14,7 +14,7 @@
 .title-block {
   color: #FFF;
   padding-left: 10px;
-  padding-top: 13px;
+  padding-top: 20px;
   padding-bottom: 3px;
   border-top: 5px solid #FFF;
 }
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 08b0f2142..08e3d182a 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -48,7 +48,7 @@ export class TransactionComponent implements OnInit, OnDestroy {
     .subscribe((tx: Transaction) => {
       this.tx = tx;
       this.isLoadingTx = false;
-      window.scrollTo(0, 0);
+      document.body.scrollTo({ top: 0, behavior: 'smooth' });
 
       if (!tx.status.confirmed) {
         this.websocketService.startTrackTransaction(tx.txid);