diff --git a/src/common/pages/App/index.js b/src/common/pages/App/index.js
index a518453..824151f 100644
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -42,7 +42,9 @@ import {getMobileOperatingSystem} from '../../stores/firebase';
 import Alert from "../../components/Alert";
 import EmptyComponent from '../EmptyComponent';
 import NumberFormat from 'react-number-format';
+import faker from 'faker';
 
+faker.locale = 'id_ID';
 @inject("appstate")
 @observer
 export default class App extends React.Component {
diff --git a/src/common/pages/Transaction/ItemList/index.js b/src/common/pages/Transaction/ItemList/index.js
new file mode 100644
index 0000000..3adecb3
--- /dev/null
+++ b/src/common/pages/Transaction/ItemList/index.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import {Card} from 'antd';
+import {inject, observer} from "mobx-react";
+import faker from "faker";
+
+import './style.scss';
+
+@inject("appstate")
+@observer
+export default class ItemList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  render() {
+    const {
+      data = {
+        transaction_id: '',
+        created_at: '',
+        updated_at: '',
+        deleted_at: '',
+        name: '',
+        status: '',
+        price: '',
+        voucher_code: ``,
+      }
+    } = this.props;
+
+    return(
+      <Card className={'cardContainer'}>
+        <div className={'parentContainerLeft'}>
+          <div className={'headerContainer'}>
+            <p className={'transactionCode'}>{data.transaction_id}</p>
+            <p className={'transactionDate'}>{data.updated_at}</p>
+          </div>
+          <div className={'bodyContainer'}>
+            <p className={'nameText'}>{data.name}</p>
+            <div className={'childContainer'}>
+              <p className={'childTitle'}>Price</p>
+              <p className={'childText'}>{data.price}</p>
+            </div>
+            <div className={'childContainer'}>
+              <p className={'childTitle'}>Voucher Code</p>
+              <p className={'childText'}>{data.voucher_code}</p>
+            </div>
+          </div>
+        </div>
+        <div className={'parentContainerRight'}>
+          <p className={'statusTitle'}>Status</p>
+          <p className={'statusText'}>{data.status}</p>
+        </div>
+      </Card>
+    );
+  }
+}
diff --git a/src/common/pages/Transaction/ItemList/style.scss b/src/common/pages/Transaction/ItemList/style.scss
new file mode 100644
index 0000000..c26ec20
--- /dev/null
+++ b/src/common/pages/Transaction/ItemList/style.scss
@@ -0,0 +1,3 @@
+.cardContainer{
+  margin-bottom: 15px;
+}
diff --git a/src/common/pages/Transaction/index.js b/src/common/pages/Transaction/index.js
index a2b66cd..2b0cf6b 100644
--- a/src/common/pages/Transaction/index.js
+++ b/src/common/pages/Transaction/index.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import {inject, observer} from "mobx-react";
 import { Spin, Alert, Divider } from 'antd';
-
-import './style.scss';
+import faker from 'faker';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import {FlatButton} from "material-ui";
+import './style.scss';
+import ItemList from "./ItemList";
 
 @inject("appstate")
 @observer
@@ -15,6 +16,49 @@ export default class TransactionPage extends React.Component {
   }
 
   render() {
+    const data = [
+      {
+        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
+        created_at: faker.date.past().toString(),
+        updated_at: faker.date.past().toString(),
+        deleted_at: null,
+        name: faker.commerce.productName(),
+        status: 'Transaction Success',
+        price: faker.commerce.price(),
+        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
+      },
+      {
+        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
+        created_at: faker.date.past().toString(),
+        updated_at: faker.date.past().toString(),
+        deleted_at: null,
+        name: faker.commerce.productName(),
+        status: 'Transaction Success',
+        price: faker.commerce.price(),
+        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
+      },
+      {
+        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
+        created_at: faker.date.past().toString(),
+        updated_at: faker.date.past().toString(),
+        deleted_at: null,
+        name: faker.commerce.productName(),
+        status: 'Transaction Success',
+        price: faker.commerce.price(),
+        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
+      },
+      {
+        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
+        created_at: faker.date.past().toString(),
+        updated_at: faker.date.past().toString(),
+        deleted_at: null,
+        name: faker.commerce.productName(),
+        status: 'Transaction Success',
+        price: faker.commerce.price(),
+        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
+      },
+    ];
+
     return(
       <div className={'transactionContainer'}>
         <div className={'parentContainer'}>
@@ -37,6 +81,12 @@ export default class TransactionPage extends React.Component {
             </div>
           </div>
           <Divider className={'dividerTop'} />
+
+          <div className={'listContainer'}>
+            {data.map(item => {
+              return <ItemList data={item}/>
+            })}
+          </div>
         </div>
       </div>
     )
diff --git a/src/common/pages/Vouchers/ItemCard/index.js b/src/common/pages/Vouchers/ItemCard/index.js
index 09f88f4..3f24f5c 100644
--- a/src/common/pages/Vouchers/ItemCard/index.js
+++ b/src/common/pages/Vouchers/ItemCard/index.js
@@ -31,7 +31,7 @@ export class ItemCard extends React.Component {
 
     return (
       <Card className={'itemCard'}>
-        <img className={'imageCard'} style={{height:59,width:120}} src={data.image} />
+        <img className={'imageCard'} src={data.image} />
         <p className={'titleCard'}>{data.name}</p>
       </Card>
     )
diff --git a/src/common/pages/Vouchers/style.scss b/src/common/pages/Vouchers/style.scss
index 1af819d..ef498ac 100644
--- a/src/common/pages/Vouchers/style.scss
+++ b/src/common/pages/Vouchers/style.scss
@@ -21,6 +21,7 @@
 
   .imageCard{
     width: 120px;
+    max-height: 60px;
   }
 
   .titleCard{