diff --git a/app/components/MyOrders/index.js b/app/components/MyOrders/index.js
index 037fdf39..3a73249b 100644
--- a/app/components/MyOrders/index.js
+++ b/app/components/MyOrders/index.js
@@ -4,6 +4,7 @@ import { View, ScrollView, Text, Image } from 'react-native';
 import { Container, Header, Tab, Tabs, TabHeading, Icon, List } from 'native-base';
 import { Actions } from 'react-native-router-flux';
 import { connect } from 'react-redux';
+import CountdownCircle from 'react-native-countdown-circle';
 import { createStructuredSelector } from 'reselect';
 import PropTypes from 'prop-types';
 
diff --git a/app/components/OrderItem/index.js b/app/components/OrderItem/index.js
index 97aaba18..2997cce7 100644
--- a/app/components/OrderItem/index.js
+++ b/app/components/OrderItem/index.js
@@ -2,13 +2,15 @@ import 'intl';
 import 'intl/locale-data/jsonp/id';
 import React, { Component } from 'react';
 import { Text, Grid, Col, Button, Card, CardItem } from 'native-base';
+import Moment from 'moment';
 import PropTypes from 'prop-types';
 import { TouchableOpacity, View } from 'react-native';
 import { Actions } from 'react-native-router-flux';
 import Icon from 'react-native-vector-icons/Ionicons';
+import CountdownCircle from 'react-native-countdown-circle';
 import styles from './styles';
 import ListItem from '../ListItem';
-import { formatDate, transactionStatus, localeDate } from '../../helpers';
+import { formatDate, transactionStatus, localeDate, localeDateConvertToSecond } from '../../helpers';
 // import { PRIMARYCOLOR } from '../../constants';
 let amount = 0;
 export default class OrderItem extends Component {
@@ -112,23 +114,51 @@ export default class OrderItem extends Component {
             <Text note style={styles.orderId}>
               {localeDate(order.created_at)}
             </Text>
+            { ((localeDateConvertToSecond(order.payment.expired_at) - localeDateConvertToSecond(Moment())) > 0) ?
+              <CountdownCircle
+                seconds={localeDateConvertToSecond(order.payment.expired_at) - localeDateConvertToSecond(Moment())}
+                radius={30}
+                borderWidth={8}
+                color="#ff003f"
+                bgColor="#fff"
+                textStyle={{ fontSize: 20 }}
+                onTimeElapsed={() => console.log('Elapsed!')}
+              />
+              :
+              null
+            }
             <View style={{ flex: 1,
               flexDirection: 'row',
               justifyContent: 'space-between',
               alignItems: 'center' }}
             >
-              <View style={styles.viewText}>
-                {status ? (
-                  <View style={{ flexDirection: 'row', marginTop: 8 }}>
-                    <Text note style={[ styles.statusText, { backgroundColor: color, color: 'white' } ]}>
-                      {this.state.status.toUpperCase()}
-                    </Text>
-                    {this.ticketTypes()}
-                  </View>
-                ) : (
-                  <View />
-                )}
-              </View>
+              { ((localeDateConvertToSecond(order.payment.expired_at) - localeDateConvertToSecond(Moment())) <= 0) ?
+                (<View style={styles.viewText}>
+                  {status ? (
+                    <View style={{ flexDirection: 'row', marginTop: 8 }}>
+                      <Text note style={[ styles.statusText, { backgroundColor: 'grey', color: 'white' } ]}>
+                        EXPIRED
+                      </Text>
+                      {this.ticketTypes()}
+                    </View>
+                  ) : (
+                    <View />
+                  )}
+                </View>)
+                :
+                (<View style={styles.viewText}>
+                  {status ? (
+                    <View style={{ flexDirection: 'row', marginTop: 8 }}>
+                      <Text note style={[ styles.statusText, { backgroundColor: color, color: 'white' } ]}>
+                        {this.state.status.toUpperCase()}
+                      </Text>
+                      {this.ticketTypes()}
+                    </View>
+                  ) : (
+                    <View />
+                  )}
+                </View>)
+              }
               <Text />
             </View>
           </View>
diff --git a/app/containers/OrderDetail/index.js b/app/containers/OrderDetail/index.js
index 1d657a3f..df29be58 100644
--- a/app/containers/OrderDetail/index.js
+++ b/app/containers/OrderDetail/index.js
@@ -31,6 +31,7 @@ import {
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { Actions } from 'react-native-router-flux';
+import CountdownCircle from 'react-native-countdown-circle';
 import HeaderPoint from '../../components/Header';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ImagePicker from 'react-native-image-crop-picker';
@@ -41,13 +42,14 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 import TicketType from '../../components/TicketType';
 import TicketDetail from '../../components/TicketDetail';
-import { localeDateWithoutHour, transactionStatus, getProfileData } from '../../helpers';
+import { localeDateWithoutHour, transactionStatus, getProfileData, localeDateConvertToSecond } from '../../helpers';
 
 const Back = require('../../../assets/images/back.png');
 const logo = require('../../../assets/images/bankmandiri.png');
 
 const { width, height } = Dimensions.get('window');
 const noImage = require('./../../../assets/images/noimage.png');
+
 const url = 'https://api.devsummit.io/static/Ref_Bank.PDF';
 
 let total = 0;
@@ -61,7 +63,7 @@ class OrderDetail extends Component {
       color: '',
       modalVisible: false,
       scalesPageToFit: true,
-      userId: '',
+      userId: ''
     };
   }
 
@@ -221,6 +223,7 @@ class OrderDetail extends Component {
     const { payment, verification } = included || {};
     const { status } = this.state;
     const { isConfirming, isUpdating } = this.props;
+    console.log('landing here orderdetail', this.props.order);
     if (isUpdating || isConfirming || Object.keys(order).length === 0) {
       return (
         <Container>
@@ -250,13 +253,32 @@ class OrderDetail extends Component {
                     <Icon name="ios-checkmark-circle" color={PRIMARYCOLOR} />
                     <Text style={styles.textButton}>save</Text>
                   </Button>
-                ) : (
+                ) : (((localeDateConvertToSecond(order.included.payment.expired_at) - localeDateConvertToSecond(Moment())) < 0) ?
+                  <Text
+                    style={[ styles.statusText, { backgroundColor: 'grey' || PRIMARYCOLOR } ]}
+                  >
+                    EXPIRED
+                  </Text>
+                  :
                   <Text
                     style={[ styles.statusText, { backgroundColor: this.state.color || PRIMARYCOLOR } ]}
                   >
                     {this.state.status === 'capture' ? 'PAID' : this.state.status.toUpperCase()}
                   </Text>
                 )}
+                { ((localeDateConvertToSecond(order.included.payment.expired_at) - localeDateConvertToSecond(Moment())) > 0) ?
+                  <CountdownCircle
+                    seconds={localeDateConvertToSecond(order.included.payment.expired_at) - localeDateConvertToSecond(Moment())}
+                    radius={30}
+                    borderWidth={8}
+                    color="#ff003f"
+                    bgColor="#fff"
+                    textStyle={{ fontSize: 20 }}
+                    onTimeElapsed={() => console.log('Elapsed!')}
+                  />
+                  :
+                  null
+                }
                 <Row>
                   <Col style={{ flex: 2 }}>
                     <Text>{strings.order.orderNumber}</Text>
diff --git a/app/helpers.js b/app/helpers.js
index c678c32d..a2c64793 100644
--- a/app/helpers.js
+++ b/app/helpers.js
@@ -86,6 +86,12 @@ export const localeDate = (date) => {
     .format('YYYY-MM-DD HH:mm:ss');
 };
 
+export const localeDateConvertToSecond = (date) => {
+  return Moment.utc(date)
+    .local()
+    .diff(Moment().startOf('day'), 'seconds');
+};
+
 export const localeDateWithoutHour = (date) => {
   return Moment.utc(date)
     .locale([ 'en', 'id' ])
diff --git a/package.json b/package.json
index be920c86..b34c0f0a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "react-native-busy-indicator": "^1.1.0",
     "react-native-code-push": "^5.1.0-beta",
     "react-native-collapsible": "^0.9.0",
+    "react-native-countdown-circle": "^2.0.0",
     "react-native-document-picker": "^2.0.0",
     "react-native-facebook-account-kit": "^0.7.0",
     "react-native-fcm": "^9.3.0",