diff --git a/src/components/payroll/PayrollPaymentDataUploadDialog.js b/src/components/payroll/PayrollPaymentDataUploadDialog.js
new file mode 100644
index 0000000..1264deb
--- /dev/null
+++ b/src/components/payroll/PayrollPaymentDataUploadDialog.js
@@ -0,0 +1,188 @@
+import React, { useState } from 'react';
+import { Input, Grid } from '@material-ui/core';
+import { injectIntl } from 'react-intl';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import {
+  apiHeaders,
+  baseApiUrl,
+  formatMessage,
+} from '@openimis/fe-core';
+import { withTheme, withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+const styles = (theme) => ({
+  item: theme.paper.item,
+});
+
+function PayrollPaymentDataUploadDialog({
+  intl,
+  classes,
+  payrollUuid,
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [forms, setForms] = useState({});
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setForms({});
+    setIsOpen(false);
+  };
+
+  const handleFieldChange = (formName, fieldName, value) => {
+    setForms({
+      ...forms,
+      [formName]: {
+        ...(forms[formName] ?? {}),
+        [fieldName]: value,
+      },
+    });
+  };
+
+  const onSubmit = async (values) => {
+    const fileFormat = values.file.type;
+    const formData = new FormData();
+
+    formData.append('file', values.file);
+
+    let urlImport;
+    if (fileFormat.includes('/csv')) {
+      formData.append('payroll', payrollUuid);
+      urlImport = `${baseApiUrl}/payroll/import_payment_data/`;
+    }
+
+    try {
+      const response = await fetch(urlImport, {
+        headers: apiHeaders,
+        body: formData,
+        method: 'POST',
+        credentials: 'same-origin',
+      });
+
+      await response.json();
+
+      if (response.status >= 400) {
+        handleClose();
+        return;
+      }
+      handleClose();
+    } catch (error) {
+      handleClose();
+    }
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleOpen}
+        variant="outlined"
+        color="#DFEDEF"
+        className={classes.button}
+        style={{
+          border: '0px',
+          marginTop: '6px',
+        }}
+      >
+        {formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label')}
+      </Button>
+      <Dialog
+        open={isOpen}
+        onClose={handleClose}
+        PaperProps={{
+          style: {
+            width: 600,
+            maxWidth: 1000,
+          },
+        }}
+      >
+        <form noValidate>
+          <DialogTitle
+            style={{
+              marginTop: '10px',
+            }}
+          >
+            {formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label')}
+          </DialogTitle>
+          <DialogContent>
+            <div
+              style={{ backgroundColor: '#DFEDEF', paddingLeft: '10px', paddingBottom: '10px' }}
+            >
+              <Grid item>
+                <Grid container spacing={4} direction="column">
+                  <Grid item>
+                    <Input
+                      onChange={(event) => handleFieldChange('paymentData', 'file', event.target.files[0])}
+                      required
+                      id="import-button"
+                      inputProps={{
+                        accept: '.csv, application/csv, text/csv',
+                      }}
+                      type="file"
+                    />
+                  </Grid>
+                </Grid>
+              </Grid>
+            </div>
+          </DialogContent>
+          <DialogActions
+            style={{
+              display: 'inline',
+              paddingLeft: '10px',
+              marginTop: '25px',
+              marginBottom: '15px',
+            }}
+          >
+            <div style={{ maxWidth: '1000px' }}>
+              <div style={{ float: 'left' }}>
+                <Button
+                  onClick={handleClose}
+                  variant="outlined"
+                  autoFocus
+                  style={{
+                    margin: '0 16px',
+                    marginBottom: '15px',
+                  }}
+                >
+                  Cancel
+                </Button>
+              </div>
+              <div style={{ float: 'right', paddingRight: '16px' }}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={() => onSubmit(forms.paymentData)}
+                  disabled={!(forms.paymentData?.file && payrollUuid)}
+                >
+                  {formatMessage(intl, 'payroll', 'payroll.paymentData.upload.label')}
+                </Button>
+              </div>
+            </div>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  );
+}
+
+const mapStateToProps = (state) => ({
+  rights: !!state.core && !!state.core.user && !!state.core.user.i_user ? state.core.user.i_user.rights : [],
+  confirmed: state.core.confirmed,
+});
+
+const mapDispatchToProps = (dispatch) => bindActionCreators({
+}, dispatch);
+
+export default injectIntl(
+  withTheme(
+    withStyles(styles)(
+      connect(mapStateToProps, mapDispatchToProps)(PayrollPaymentDataUploadDialog),
+    ),
+  ),
+);
diff --git a/src/pages/payroll/PayrollBillSearcher.js b/src/pages/payroll/PayrollBillSearcher.js
index 37451d3..b6deb1a 100644
--- a/src/pages/payroll/PayrollBillSearcher.js
+++ b/src/pages/payroll/PayrollBillSearcher.js
@@ -33,6 +33,7 @@ function PayrollBillSearcher({
   bills,
   billsPageInfo,
   billsTotalCount,
+  payrollUuid,
 }) {
   const history = useHistory();
   const modulesManager = useModulesManager();
@@ -44,20 +45,8 @@ function PayrollBillSearcher({
 
   const onDoubleClick = (bill) => openBill(bill);
 
-  const [payrollUuid] = useState('');
-
   const fetch = (params) => {
-    const currentPath = window.location.pathname;
-    const pathSegments = currentPath.split('/');
-    const payrollIndex = pathSegments.indexOf('payroll');
-    if (payrollIndex !== -1 && payrollIndex < pathSegments.length - 1) {
-      const uuid = pathSegments[payrollIndex + 1];
-      const index = params.findIndex((element) => element.startsWith('payrollUuid:'));
-      if (index !== -1) {
-        params[index] = `payrollUuid: "${uuid}"`;
-      }
-      fetchPayrollBills(modulesManager, params);
-    }
+    fetchPayrollBills(modulesManager, params);
   };
 
   const headers = () => {
@@ -119,6 +108,8 @@ function PayrollBillSearcher({
     ['status', true],
   ];
 
+  console.log(payrollUuid);
+
   const defaultFilters = () => ({
     isDeleted: {
       value: false,
diff --git a/src/pages/payroll/PayrollBillTabPanel.js b/src/pages/payroll/PayrollBillTabPanel.js
index b0b271e..469da84 100644
--- a/src/pages/payroll/PayrollBillTabPanel.js
+++ b/src/pages/payroll/PayrollBillTabPanel.js
@@ -20,14 +20,6 @@ function PayrollBillsTabLabel({
 }
 
 function PayrollBillsTabPanel({ value, rights, payrollUuid }) {
-  let uuidPayroll = null;
-  const currentPath = window.location.pathname;
-  const pathSegments = currentPath.split('/');
-  const payrollIndex = pathSegments.indexOf('payroll');
-  if (payrollIndex !== -1 && payrollIndex < pathSegments.length - 1) {
-    const uuid = pathSegments[payrollIndex + 1];
-    uuidPayroll = uuid;
-  }
   return (
     <PublishedComponent
       pubRef="policyHolder.TabPanel"
@@ -36,7 +28,7 @@ function PayrollBillsTabPanel({ value, rights, payrollUuid }) {
       value={value}
     >
       {
-        rights.includes(RIGHT_BILL_SEARCH) && uuidPayroll && (
+        rights.includes(RIGHT_BILL_SEARCH) && payrollUuid && (
         <PayrollBillSearcher rights={rights} payrollUuid={payrollUuid} />
         )
       }
diff --git a/src/pages/payroll/PayrollPage.js b/src/pages/payroll/PayrollPage.js
index 2fb8019..4219ea3 100644
--- a/src/pages/payroll/PayrollPage.js
+++ b/src/pages/payroll/PayrollPage.js
@@ -148,6 +148,7 @@ function PayrollPage({
         rights={rights}
         actions={actions}
         setConfirmedAction={setConfirmedAction}
+        payrollUuid={payrollUuid}
         saveTooltip={formatMessage('tooltip.save')}
       />
     </div>
diff --git a/src/pages/payroll/PayrollTab.js b/src/pages/payroll/PayrollTab.js
index 1e06a59..2ad7b22 100644
--- a/src/pages/payroll/PayrollTab.js
+++ b/src/pages/payroll/PayrollTab.js
@@ -7,6 +7,7 @@ import {
   PAYROLL_TABS_LABEL_CONTRIBUTION_KEY,
   PAYROLL_TABS_PANEL_CONTRIBUTION_KEY,
 } from '../../constants';
+import PayrollPaymentDataUploadDialog from '../../components/payroll/PayrollPaymentDataUploadDialog';
 
 const useStyles = makeStyles((theme) => ({
   paper: theme.paper.paper,
@@ -43,14 +44,26 @@ function PayrollTab({ rights, setConfirmedAction, payrollUuid }) {
   return (
     <Paper className={classes.paper}>
       <Grid container className={`${classes.tableTitle} ${classes.tabs}`}>
-        <Contributions
-          contributionKey={PAYROLL_TABS_LABEL_CONTRIBUTION_KEY}
-          rights={rights}
-          value={activeTab}
-          onChange={handleChange}
-          isSelected={isSelected}
-          tabStyle={tabStyle}
-        />
+        <div style={{ width: '100%' }}>
+          <div style={{ float: 'left' }}>
+            <Contributions
+              contributionKey={PAYROLL_TABS_LABEL_CONTRIBUTION_KEY}
+              rights={rights}
+              value={activeTab}
+              onChange={handleChange}
+              isSelected={isSelected}
+              tabStyle={tabStyle}
+            />
+          </div>
+          <div style={{ float: 'right', paddingRight: '16px' }}>
+            {payrollUuid
+                && (
+                <PayrollPaymentDataUploadDialog
+                  payrollUuid={payrollUuid}
+                />
+                )}
+          </div>
+        </div>
       </Grid>
       <Contributions
         contributionKey={PAYROLL_TABS_PANEL_CONTRIBUTION_KEY}
diff --git a/src/translations/en.json b/src/translations/en.json
index 7b22bb9..b6be22b 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -75,5 +75,7 @@
     "payroll.paymentMethod": "Payment Method",
     "payroll.tasks.update.title": "Approve Payroll Tasks",
     "payroll.tasks.reconciliation.title": "Payroll Reconciliation Tasks",
-    "payroll.payroll.includedUnpaid": "Included unpaid"
+    "payroll.payroll.includedUnpaid": "Included unpaid",
+
+    "payroll.paymentData.upload.label": "Upload Payment Data"
 }
\ No newline at end of file