diff --git a/src/common/pages/Wallet/Modal/index.js b/src/common/pages/Wallet/Modal/index.js
new file mode 100644
index 0000000..c69a0e5
--- /dev/null
+++ b/src/common/pages/Wallet/Modal/index.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import { Modal, Input, Alert, Select } from 'antd';
+import './style.scss';
+import { Route } from 'react-router-dom'
+import {LINKS} from "../../../routes";
+
+const Option = Select.Option;
+@inject('appstate')
+@observer
+export default class ModalTopupComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      selectedOption: '0 Points',
+      inputCode1: '',
+      inputCode2: '',
+      inputCode3: '',
+      inputCode4: '',
+    };
+    this.defaultState = Object.assign({}, this.state);
+  }
+
+  componentDidMount() {}
+
+  render() {
+    const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Redeem your code'} = this.props;
+
+    return (
+      <Modal
+        title={title}
+        visible={isVisible}
+        onOk={onOk}
+        onCancel={onCancel}
+        bodyStyle={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        }}
+      >
+        <div className={'modalContainer'}>
+          <Input value={this.state.inputCode1} maxLength={4} ref={e => this.inputCode1 = e} onChange={(e) => {
+            this.setState({inputCode1: e.target.value})
+            if(e.target.value.length === 4){
+              this.inputCode2.focus();
+            }
+          }} className={'inputCode'} placeholder="XXXX" />
+          <p className={'stripeText'}>-</p>
+          <Input value={this.state.inputCode2} maxLength={4} ref={e => this.inputCode2 = e} onChange={(e) => {
+            this.setState({inputCode2: e.target.value})
+            if(e.target.value.length === 4){
+              this.inputCode3.focus();
+            }
+
+            if(e.target.value.length === 0){
+              this.inputCode1.focus();
+            }
+          }} className={'inputCode'} placeholder="XXXX" />
+          <p className={'stripeText'}>-</p>
+          <Input value={this.state.inputCode3} maxLength={4} ref={e => this.inputCode3 = e} onChange={(e) => {
+            this.setState({inputCode3: e.target.value})
+            if(e.target.value.length === 4){
+              this.inputCode4.focus();
+            }
+
+            if(e.target.value.length === 0){
+              this.inputCode2.focus();
+            }
+          }} className={'inputCode'} placeholder="XXXX" />
+          <p className={'stripeText'}>-</p>
+          <Input value={this.state.inputCode4} maxLength={4} ref={e => this.inputCode4 = e} onChange={(e) => {
+            this.setState({inputCode4: e.target.value})
+            if(e.target.value.length === 0){
+              this.inputCode3.focus();
+            }
+          }} className={'inputCode'} placeholder="XXXX" />
+        </div>
+      </Modal>
+    )
+  }
+}
diff --git a/src/common/pages/Wallet/Modal/style.scss b/src/common/pages/Wallet/Modal/style.scss
new file mode 100644
index 0000000..bf2b2d1
--- /dev/null
+++ b/src/common/pages/Wallet/Modal/style.scss
@@ -0,0 +1,15 @@
+.modalContainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .stripeText{
+    margin-top: 12px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  .inputCode{
+    text-align: center;
+  }
+}
diff --git a/src/common/pages/Wallet/index.js b/src/common/pages/Wallet/index.js
index 99d3b7b..5471c88 100644
--- a/src/common/pages/Wallet/index.js
+++ b/src/common/pages/Wallet/index.js
@@ -31,6 +31,7 @@ import Loader from 'react-loader-advanced';
 import './style.scss';
 import {DIALOG} from "../../stores/global_ui";
 import faker from 'faker';
+import ModalTopupComponent from "./Modal";
 
 @inject('appstate')
 @observer
@@ -44,6 +45,7 @@ export default class WalletComponent extends React.Component {
       slideIndex: 0,
       filteredInfo: null,
       sortedInfo: null,
+      modalTopup: false,
     };
     this.defaultState = Object.assign({}, this.state);
     this.http = props.appstate.http;
@@ -60,6 +62,10 @@ export default class WalletComponent extends React.Component {
     // this.authStore.getWallet();
   }
 
+  setModalTopup = (bool) => {
+    this.setState({modalTopup: bool});
+  };
+
   render() {
     const voucher = <NumberFormat value={(500000).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>;
     const points = <NumberFormat value={15000} displayType={'text'} thousandSeparator={true}/>;
@@ -207,7 +213,7 @@ export default class WalletComponent extends React.Component {
                         className="ToolbarGroupLastButton"
                         icon={<UnarchiveIcon/>}
                         label="Top Up"
-                        // onClick={() => this.globalUI.showDialog(DIALOG.WALLET.WITHDRAW)}
+                        onClick={() => this.setModalTopup(true)}
                         primary={true}/>
                     </div>
                   }
@@ -283,8 +289,7 @@ export default class WalletComponent extends React.Component {
               </div>
             </Card></div>
         </div>
-
-
+        <ModalTopupComponent onOk={() => this.setModalTopup(false)} onCancel={() => this.setModalTopup(false)} isVisible={this.state.modalTopup} />
       </div>
     )
   }