diff --git a/frontend/src/containers/orders/components/OrderDocuments.jsx b/frontend/src/containers/orders/components/OrderDocuments.jsx
index 1b42f47..3e49821 100644
--- a/frontend/src/containers/orders/components/OrderDocuments.jsx
+++ b/frontend/src/containers/orders/components/OrderDocuments.jsx
@@ -5,16 +5,14 @@ import {orderTexts} from '../../../constants/ordersConstants';
 
 class OrderDocuments extends Component {
     render() {
-        const {orderInfo} = this.props;
+        const {orderDocumentsBundle} = this.props;
 
         return (
             <div id="order-documents" className="order-documents">
                 {
-                    orderInfo.packages.map(orderPackage => <OrderDocumentsGroup key={'order-package-' + orderPackage.id} documentsGroup={orderPackage} />)
-                }
-                {
-                    orderInfo.orderDocuments && <OrderDocumentsGroup key={'order-package-0'} documentsGroup={{documents: orderInfo.documents, packageName: orderTexts.labels.OTHER_DOCS}} />
+                    orderDocumentsBundle.map(bundle => <OrderDocumentsGroup key={'order-package-' + bundle.package.name} packageName={bundle.package.name} packageID={bundle.package.id} documents={bundle.documents} />)
                 }
+                
             </div>
         );
     }
diff --git a/frontend/src/containers/orders/components/OrderDocumentsGroup.jsx b/frontend/src/containers/orders/components/OrderDocumentsGroup.jsx
index cd11fb0..6f6ed24 100644
--- a/frontend/src/containers/orders/components/OrderDocumentsGroup.jsx
+++ b/frontend/src/containers/orders/components/OrderDocumentsGroup.jsx
@@ -40,39 +40,39 @@ class OrderDocumentsGroup extends Component {
     }
 
     getDocumentText(document) {
-        const name = document.documentName + '.' + document.extension;
+        const name = document.name + '.' + document.extension;
 
         return name.length > 9 ? name.substring(0, 10) + '...' : name;
     }
 
-    downloadDocument(document){
-        const fileUrl = `${API_SERVER}/utils/api/downloadFile?idDocument=${document.idDocument}&fileName=${document.documentName}.${document.extension}&fileType=${document.documentTypeName}`
-        const fileName = document.documentName + '.' + document.extension;
+    downloadDocument(document, packageID){
+        const fileUrl = `${API_SERVER}/wp-json/wiaas/download-package-file?document_id=${document.id}&package_id=${packageID}`
+        const fileName = document.name + '.' + document.extension;
         fileHandler.download(fileUrl, fileName);
     }
 
     render() {
-        const {documentsGroup} = this.props;
+        const {documents, packageName, packageID} = this.props;
 
         return (
              <div>
                  {
-                     documentsGroup.documents &&
-                     documentsGroup.documents.length > 0 &&
-                     <WiaasBox mainTitle={documentsGroup.packageName}>
+                     documents &&
+                     documents.length > 0 &&
+                     <WiaasBox mainTitle={packageName}>
                          {
-                             documentsGroup.documents.map(document => <a id={'document-' + document.idDocument}  key={'order-document-' + document.idDocument}>
-                             <div onClick={() => {this.downloadDocument(document)}} className="document-link-big">
+                             documents.map(document => <a id={'document-' + document.id}  key={'order-document-' + document.id}>
+                             <div onClick={() => {this.downloadDocument(document, packageID)}} className="document-link-big">
                                      <i className={'fa fa-4x fa-' + this.getDocumentIcon(document.extension)} aria-hidden="true"></i>
                                      <div>
                                          {this.getDocumentText(document)}
                                          <Tooltip placement="bottom"
                                              delay={{ show: 0, hide: 0}}
                                              container="order-documents"
-                                             isOpen={this.state[document.idDocument]}
-                                             target={'document-' + document.idDocument}
-                                             toggle={()=>this.toggle(document.idDocument)}>
-                                             {document.documentName} ({document.extension})
+                                             isOpen={this.state[document.id]}
+                                             target={'document-' + document.id}
+                                             toggle={()=>this.toggle(document.id)}>
+                                             {document.name} ({document.extension})
                                          </Tooltip>
                                      </div>
                              </div></a>)