diff --git a/src/common/pages/Vouchers/ItemCard/index.js b/src/common/pages/Vouchers/ItemCard/index.js
index 3f24f5c..d9c26c3 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'} src={data.image} />
+        <img className={'imageCard'} src={this.http.appendImagePath(data.images.logo)} />
         <p className={'titleCard'}>{data.name}</p>
       </Card>
     )
diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js
index 973abbc..793e13c 100644
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -14,10 +14,11 @@ export default class ModalVouchersComponent extends React.Component {
     super(props);
     this.props = props;
     this.state = {
-      selectedOption: '0 Points',
+      selectedOption: '0',
       hidden:'inline'
     };
     this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
   }
 
   componentDidMount() {}
@@ -47,12 +48,12 @@ export default class ModalVouchersComponent extends React.Component {
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-          background: data.background_color || '#aaa',
-          // height: 500,
+          background: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
+          // background: data.background_color || '#aaa',
           flex: 0.3
         }}>
-          <img className={'imageModal'} src={data.image} />
-          <p className={'titleModal'}>{data.name}</p>
+          <img className={'imageModal'} src={this.http.appendImagePath(data.images.logo)} />
+          <p className={'titleModal'}>{data.name} }</p>
         </div>
         <div style={{
           display: 'flex',
@@ -62,10 +63,10 @@ export default class ModalVouchersComponent extends React.Component {
         }}>
           <p className={'descriptionModal'} >{data.description}</p>
 
-          {(data.additional_information.length > 0) && <Alert className={'informationAlertModal'} message={
+          {(data.additional_data.information != null) && <Alert className={'informationAlertModal'} message={
             <div className={'informationContainerModal'}>
               <p className={'informationTitleModal'}>Information</p>
-              <p className={'informationBodyModal'}>{data.additional_information}</p>
+              <p className={'informationBodyModal'}>{data.additional_data.information}</p>
             </div>
           } type="success" />}
 
@@ -85,14 +86,14 @@ export default class ModalVouchersComponent extends React.Component {
               console.log(this.state.hidden,'onDropdownVisibleChange')
             }}
           >
-            {data.option.map((item, index) => {
-              return <Option  value={item.cost}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.value}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}>{item.cost}</span></div></Option>
+            {data.sku.map((item, index) => {
+              return <Option  value={item.price}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}>{item.price}</span></div></Option>
             })}
           </Select>
 
           <div className={'costContainerModal'}>
             <div className={'costLeftPaneModal'}>
-              <p className={'costTitleModal'}>Cost</p>
+              <p className={'costTitleModal'}>Points</p>
               <p className={'costValueModal'}>{this.state.selectedOption}</p>
             </div>
             <div className={'costRightPaneModal'}>
diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js
index 769fde5..daaad68 100644
--- a/src/common/pages/Vouchers/index.js
+++ b/src/common/pages/Vouchers/index.js
@@ -19,14 +19,25 @@ export default class VouchersComponent extends React.Component {
       isOpened: false,
       data: {
         name: '',
-        image: '',
+        background_color_1:'',
+        background_color_2:'',
+        images: {
+          logo:''
+        },
         description: '',
-        additional_information: '',
-        background_color: '',
-        option: [
+        additional_data: {
+          information:''
+        },
+        // option: [
+        //   {
+        //     value: '',
+        //     cost: ''
+        //   },
+        // ],
+        sku: [
           {
-            value: '',
-            cost: ''
+            name: '',
+            price: ''
           },
         ]
       },
@@ -198,6 +209,19 @@ export default class VouchersComponent extends React.Component {
 
             <Row gutter={10}>
               {
+                ( this.vouchersStore.list.length > 0) ?
+                this.vouchersStore.list.map((item, index) => {
+                  return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
+                    <ItemCard data={item}/>
+                  </Col>)
+                })
+                : (
+                  <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
+                )
+              }
+
+
+              {/* {
                 (data.length > 0) ?
                 data.map((item, index) => {
                   return (<Col onClick={() => this.setState({isOpened: true, data: item})} key={index} span={6}>
@@ -207,7 +231,7 @@ export default class VouchersComponent extends React.Component {
                 : (
                   <EmptyComponent type="default4" header="" content="There is no voucher in sight"/>
                 )
-              }
+              } */}
             </Row>
 
             <ModalVouchersComponent