diff --git a/app/src/app/app.module.ts b/app/src/app/app.module.ts
index d36933b..8e5cca9 100644
--- a/app/src/app/app.module.ts
+++ b/app/src/app/app.module.ts
@@ -7,12 +7,10 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 import { InsightApp } from './app.component';
 import { PagesModule, BlocksPage, BroadcastTxPage, NodeStatusPage, VerifyMessagePage } from '../pages';
 import { BlocksService, StorageService } from '../services';
-import { TransactionComponent } from '../components/transaction/transaction';
 
 @NgModule({
   declarations: [
-    InsightApp,
-    TransactionComponent
+    InsightApp
   ],
   imports: [
     BrowserModule,
diff --git a/app/src/components/transaction-list/transaction-list.html b/app/src/components/transaction-list/transaction-list.html
index 6c5b020..69d901b 100644
--- a/app/src/components/transaction-list/transaction-list.html
+++ b/app/src/components/transaction-list/transaction-list.html
@@ -1,48 +1,5 @@
 <div>
   <div *ngFor="let tx of transactions.txs" style="border: 1px solid purple">
-    <p><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></p>
-    <div [hidden]="!tx.firstSeenTs">
-      <span translate>first seen at</span>
-      <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
-    </div>
-    <div [hidden]="!tx.blocktime && tx.firstSeenTs">
-      <span translate>mined</span>
-      <time>{{tx.time * 1000 | date:'medium'}}</time>
-    </div>
-
-    <div [hidden]="!tx.isCoinBase">
-      <div *ngFor="let vin of tx.vin">
-        <div>
-          <span translate>No Inputs (Newly Generated Coins)</span>
-        </div>
-      </div>
-
-      <div>
-        &gt;
-      </div>
-
-      <div *ngFor="let vout of tx.vout">
-        <div>
-          <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
-        </div>
-      </div>
-    </div>
-
-    <div [hidden]="tx.isCoinBase">
-      <div *ngFor="let vin of tx.vin">
-        <div><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></div>
-        <p>{{ vin.value + ' BTC' }}</p>
-      </div>
-
-      <div>
-        &gt;
-      </div>
-
-      <div *ngFor="let vout of tx.vout">
-        <div>
-          <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
-        </div>
-      </div>
-    </div>
+    <transaction [tx]="tx"></transaction>
   </div>
 </div>
diff --git a/app/src/components/transaction-list/transaction-list.module.ts b/app/src/components/transaction-list/transaction-list.module.ts
index 997d4f5..19dac1d 100644
--- a/app/src/components/transaction-list/transaction-list.module.ts
+++ b/app/src/components/transaction-list/transaction-list.module.ts
@@ -1,13 +1,15 @@
 import { NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
 import { TransactionListComponent } from './transaction-list';
+import { TransactionComponentModule } from '../transaction/transaction.module';
 
 @NgModule({
   declarations: [
     TransactionListComponent
   ],
   imports: [
-    IonicModule
+    IonicModule,
+    TransactionComponentModule
   ],
   exports: [
     TransactionListComponent
diff --git a/app/src/components/transaction-list/transaction-list.ts b/app/src/components/transaction-list/transaction-list.ts
index 0e73c07..8a8940c 100644
--- a/app/src/components/transaction-list/transaction-list.ts
+++ b/app/src/components/transaction-list/transaction-list.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { Input } from '@angular/core';
-import { NavController } from 'ionic-angular';
 import { Http } from '@angular/http';
 
 /**
@@ -20,7 +19,7 @@ export class TransactionListComponent {
   @Input() public queryValue: string;
   public transactions: any = [];
 
-  constructor(private navCtrl: NavController, private http: Http) {
+  constructor(private http: Http) {
   }
 
   private ngOnInit(): void {
@@ -43,24 +42,4 @@ export class TransactionListComponent {
       }
     );
   }
-
-  public getAddress(vout: any): string {
-    if (vout.scriptPubKey && vout.scriptPubKey.addresses) {
-      return vout.scriptPubKey.addresses[0];
-    } else {
-      return 'Unparsed address';
-    }
-  }
-
-  public goToTx(txId: string): void {
-    this.navCtrl.push('transaction', {
-      'txId': txId
-    });
-  }
-
-  public goToAddress(addrStr: string): void {
-    this.navCtrl.push('address', {
-      'addrStr': addrStr
-    });
-  }
 }
diff --git a/app/src/components/transaction/transaction.html b/app/src/components/transaction/transaction.html
index 34b405c..715f017 100644
--- a/app/src/components/transaction/transaction.html
+++ b/app/src/components/transaction/transaction.html
@@ -1,4 +1,46 @@
-<!-- Generated template for the TransactionComponent component -->
 <div>
-  {{text}}
+  <p><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></p>
+  <div [hidden]="!tx.firstSeenTs">
+    <span translate>first seen at</span>
+    <time>{{tx.firstSeenTs * 1000 | date:'medium'}}</time>
+  </div>
+  <div [hidden]="!tx.blocktime && tx.firstSeenTs">
+    <span translate>mined</span>
+    <time>{{tx.time * 1000 | date:'medium'}}</time>
+  </div>
+
+  <div [hidden]="!tx.isCoinBase">
+    <div *ngFor="let vin of tx.vin">
+      <div>
+        <span translate>No Inputs (Newly Generated Coins)</span>
+      </div>
+    </div>
+
+    <div>
+      &gt;
+    </div>
+
+    <div *ngFor="let vout of tx.vout">
+      <div>
+        <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
+      </div>
+    </div>
+  </div>
+
+  <div [hidden]="tx.isCoinBase">
+    <div *ngFor="let vin of tx.vin">
+      <div><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></div>
+      <p>{{ vin.value + ' BTC' }}</p>
+    </div>
+
+    <div>
+      &gt;
+    </div>
+
+    <div *ngFor="let vout of tx.vout">
+      <div>
+        <p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a> {{ vout.value + ' BTC' }} <span [hidden]="!vout.spentTxId">(S)</span><span [hidden]="vout.spentTxId">(U)</span></p>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/app/src/components/transaction/transaction.ts b/app/src/components/transaction/transaction.ts
index c8bd7e8..d8f2ee7 100644
--- a/app/src/components/transaction/transaction.ts
+++ b/app/src/components/transaction/transaction.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Input } from '@angular/core';
+import { NavController } from 'ionic-angular';
 
 /**
  * Generated class for the TransactionComponent component.
@@ -12,11 +14,28 @@ import { Component } from '@angular/core';
 })
 export class TransactionComponent {
 
-  text: string;
+  @Input() public tx: any = {};
 
-  constructor() {
-    console.log('Hello TransactionComponent Component');
-    this.text = 'Hello World';
+  constructor(private navCtrl: NavController) {
   }
 
+  public getAddress(vout: any): string {
+    if (vout.scriptPubKey && vout.scriptPubKey.addresses) {
+      return vout.scriptPubKey.addresses[0];
+    } else {
+      return 'Unparsed address';
+    }
+  }
+
+  public goToTx(txId: string): void {
+    this.navCtrl.push('transaction', {
+      'txId': txId
+    });
+  }
+
+  public goToAddress(addrStr: string): void {
+    this.navCtrl.push('address', {
+      'addrStr': addrStr
+    });
+  }
 }