diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index f2e41ac2b..1cf560ecb 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -41,6 +41,7 @@ import { BlockchainComponent } from './components/blockchain/blockchain.componen
 import { FooterComponent } from './components/footer/footer.component';
 import { ExplorerComponent } from './components/explorer/explorer.component';
 import { AudioService } from './services/audio.service';
+import { FiatComponent } from './fiat/fiat.component';
 
 @NgModule({
   declarations: [
@@ -73,6 +74,7 @@ import { AudioService } from './services/audio.service';
     ExplorerComponent,
     ChartistComponent,
     FooterComponent,
+    FiatComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/components/address/address.component.html b/frontend/src/app/components/address/address.component.html
index 5f4e8c85d..498891f47 100644
--- a/frontend/src/app/components/address/address.component.html
+++ b/frontend/src/app/components/address/address.component.html
@@ -23,7 +23,7 @@
               </tr>
               <tr>
                 <td>Balance</td>
-                <td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC</td>
+                <td>{{ (receieved - sent) / 100000000 | number: '1.2-8' }} BTC (<app-fiat [value]="receieved - sent"></app-fiat>)</td>
               </tr>
             </tbody>
           </table>
diff --git a/frontend/src/app/components/address/address.component.ts b/frontend/src/app/components/address/address.component.ts
index fc4a6d0cd..bedbe08ce 100644
--- a/frontend/src/app/components/address/address.component.ts
+++ b/frontend/src/app/components/address/address.component.ts
@@ -49,6 +49,7 @@ export class AddressComponent implements OnInit, OnDestroy {
         this.error = undefined;
         this.isLoadingAddress = true;
         this.loadedConfirmedTxCount = 0;
+        this.address = null;
         this.isLoadingTransactions = true;
         this.transactions = null;
         document.body.scrollTo(0, 0);
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 241ff58f0..b2819e136 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -47,7 +47,7 @@
               </tr>
               <tr>
                 <td>Block subsidy</td>
-                <td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<span class="green-color">{{ conversions.USD * blockSubsidy | currency:'USD':'symbol':'1.0-0' }}</span>)</span></td>
+                <td>{{ blockSubsidy | number: '1.2-2' }} BTC <span *ngIf="conversions">(<app-fiat [value]="blockSubsidy"></app-fiat>)</span></td>
               </tr>
               <tr>
                 <td>Status</td>
diff --git a/frontend/src/app/components/block/block.component.ts b/frontend/src/app/components/block/block.component.ts
index 9055fba2d..65f5363a0 100644
--- a/frontend/src/app/components/block/block.component.ts
+++ b/frontend/src/app/components/block/block.component.ts
@@ -22,7 +22,6 @@ export class BlockComponent implements OnInit {
   isLoadingTransactions = true;
   error: any;
   blockSubsidy = 50;
-  conversions: any;
 
   constructor(
     private route: ActivatedRoute,
@@ -69,12 +68,6 @@ export class BlockComponent implements OnInit {
 
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
-
-    this.stateService.conversions$
-      .subscribe((conversions) => {
-        this.conversions = conversions;
-      });
-
   }
 
   setBlockSubsidy() {
diff --git a/frontend/src/app/components/transaction/transaction.component.html b/frontend/src/app/components/transaction/transaction.component.html
index 149e71d98..3f7118d2b 100644
--- a/frontend/src/app/components/transaction/transaction.component.html
+++ b/frontend/src/app/components/transaction/transaction.component.html
@@ -32,7 +32,7 @@
             <ng-template [ngIf]="tx.fee">
               <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></td>
+                <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
               </tr>
               <tr>
                 <td>Fees per vByte</td>
@@ -67,7 +67,7 @@
             </ng-template>
             <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></td>
+              <td>{{ tx.fee | number }} sats (<app-fiat [value]="tx.fee"></app-fiat>)</td>
             </tr>
             <tr>
               <td>Fees per vByte</td>
diff --git a/frontend/src/app/components/transaction/transaction.component.ts b/frontend/src/app/components/transaction/transaction.component.ts
index 1ebad8f9d..d195d96db 100644
--- a/frontend/src/app/components/transaction/transaction.component.ts
+++ b/frontend/src/app/components/transaction/transaction.component.ts
@@ -18,7 +18,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
   tx: Transaction;
   txId: string;
   isLoadingTx = true;
-  conversions: any;
   error: any = undefined;
   latestBlock: Block;
   transactionTime = -1;
@@ -66,9 +65,6 @@ export class TransactionComponent implements OnInit, OnDestroy {
       this.isLoadingTx = false;
     });
 
-    this.stateService.conversions$
-      .subscribe((conversions) => this.conversions = conversions);
-
     this.stateService.blocks$
       .subscribe((block) => this.latestBlock = block);
 
diff --git a/frontend/src/app/fiat/fiat.component.html b/frontend/src/app/fiat/fiat.component.html
new file mode 100644
index 000000000..8ec9b4bdf
--- /dev/null
+++ b/frontend/src/app/fiat/fiat.component.html
@@ -0,0 +1 @@
+<span class="green-color">{{ (conversions$ | async)?.USD * value / 100000000 | currency:'USD':'symbol':'1.2-2' }}</span>
\ No newline at end of file
diff --git a/frontend/src/app/fiat/fiat.component.scss b/frontend/src/app/fiat/fiat.component.scss
new file mode 100644
index 000000000..843bd58b6
--- /dev/null
+++ b/frontend/src/app/fiat/fiat.component.scss
@@ -0,0 +1,3 @@
+.green-color {
+  color: #3bcc49;
+}
diff --git a/frontend/src/app/fiat/fiat.component.spec.ts b/frontend/src/app/fiat/fiat.component.spec.ts
new file mode 100644
index 000000000..a7f4821dc
--- /dev/null
+++ b/frontend/src/app/fiat/fiat.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiatComponent } from './fiat.component';
+
+describe('FiatComponent', () => {
+  let component: FiatComponent;
+  let fixture: ComponentFixture<FiatComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FiatComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FiatComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/fiat/fiat.component.ts b/frontend/src/app/fiat/fiat.component.ts
new file mode 100644
index 000000000..54b3ad909
--- /dev/null
+++ b/frontend/src/app/fiat/fiat.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import { StateService } from '../services/state.service';
+
+@Component({
+  selector: 'app-fiat',
+  templateUrl: './fiat.component.html',
+  styleUrls: ['./fiat.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FiatComponent implements OnInit {
+  conversions$: Observable<any>;
+
+  @Input() value: number;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit(): void {
+    this.conversions$ = this.stateService.conversions$.asObservable();
+  }
+
+}