diff --git a/src/js/views/payments.js b/src/js/views/payments.js
index 89641e7..886e8f8 100644
--- a/src/js/views/payments.js
+++ b/src/js/views/payments.js
@@ -130,7 +130,7 @@ export class MakePayment extends Flux.DashView {
                                                             try{
                                                                 await makeEmployeePayment(
                                                                     pay.id, 
-                                                                    "FAKE",
+                                                                    "ELECTRONIC TRANSFERENCE",
                                                                     bankaccount.id, 
                                                                     pay.employee.bank_accounts[0].id,
                                                                     );
diff --git a/src/js/views/payroll.js b/src/js/views/payroll.js
index 2b795c1..4941b3e 100644
--- a/src/js/views/payroll.js
+++ b/src/js/views/payroll.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useContext } from "react";
 import Flux from "@4geeksacademy/react-flux-dash";
 import PropTypes from 'prop-types';
-import { store, search, update, fetchSingle, searchMe, processPendingPayrollPeriods, updatePayments, createPayment, fetchAllMe, fetchTemporal, remove, create } from '../actions.js';
+import { store, search, update, fetchSingle, searchMe, processPendingPayrollPeriods, updatePayments, createPayment, fetchAllMe, fetchTemporal, remove, create, fetchPeyrollPeriodPayments } from '../actions.js';
 import { GET } from '../utils/api_wrapper';
 
 
@@ -926,7 +926,7 @@ export const PayrollPeriodDetails = ({ match, history }) => {
                                     </div>
                                     )
                                 : null}
-                                
+
                             </td>
                         </tr>
                     </tbody>
@@ -1722,6 +1722,7 @@ export class PayrollReport extends Flux.DashView {
             employer: store.getState('current_employer'),
             payrollPeriods: [],
             payments: [],
+            paymentInfo: [],
             singlePayrollPeriod: null,
         };
     }
@@ -1731,22 +1732,26 @@ export class PayrollReport extends Flux.DashView {
         this.subscribe(store, 'current_employer', (employer) => {
             this.setState({ employer });
         });
-
+        this.subscribe(store, 'payroll-period-payments', (paymentInfo) => {
+            this.setState({ paymentInfo });
+        });
+        this.subscribe(store, 'employee-payment', () => {
+            fetchPeyrollPeriodPayments(this.state.singlePayrollPeriod.id);
+        });
         const payrollPeriods = store.getState('payroll-periods');
         this.subscribe(store, 'payroll-periods', (_payrollPeriods) => {
             this.updatePayrollPeriod(_payrollPeriods);
             //if(!this.state.singlePayrollPeriod) this.getSinglePeriod(this.props.match.params.period_id, payrollPeriods);
         });
-        if (!payrollPeriods || payrollPeriods.length == 0 ) {
-            if(this.props.match.params.period_id !== undefined) fetchSingle("payroll-periods", this.props.match.params.period_id).then(_period => {
-            this.setState({singlePayrollPeriod:_period, payments: this.groupPayments(_period).filter(p => p.payments.length != 0)});
-        });
+        if (!payrollPeriods) {
+            searchMe('payroll-periods');
         }
         else {
             this.updatePayrollPeriod(payrollPeriods);
             this.getSinglePeriod(this.props.match.params.period_id, payrollPeriods);
 
         }
+
         this.removeHistoryListener = this.props.history.listen((data) => {
             const period = /\/payroll\/period\/(\d+)/gm;
             const periodMatches = period.exec(data.pathname);
@@ -1760,12 +1765,14 @@ export class PayrollReport extends Flux.DashView {
         if (!singlePeriod) return null;
 
         let groupedPayments = {};
-        singlePeriod.payments.forEach(pay => {
-            if (typeof groupedPayments[pay.employee.id] === 'undefined') {
-                groupedPayments[pay.employee.id] = { employee: pay.employee, payments: [] };
-            }
-            if (pay.status === "APPROVED") groupedPayments[pay.employee.id].payments.push(pay);
-        });
+        if(singlePeriod.payments){
+            singlePeriod.payments.forEach(pay => {
+                if (typeof groupedPayments[pay.employee.id] === 'undefined') {
+                    groupedPayments[pay.employee.id] = { employee: pay.employee, payments: [] };
+                }
+                groupedPayments[pay.employee.id].payments.push(pay);
+            });
+        }
 
         return Object.values(groupedPayments);
     }
@@ -1775,7 +1782,9 @@ export class PayrollReport extends Flux.DashView {
             if (!payrollPeriods) fetchSingle("payroll-periods", periodId);
             else {
                 const singlePayrollPeriod = payrollPeriods.find(pp => pp.id == periodId);
-                this.setState({ singlePayrollPeriod, payments: this.groupPayments(singlePayrollPeriod) });
+                this.setState({ singlePayrollPeriod, payments: this.groupPayments(singlePayrollPeriod) }, () => {
+                    fetchPeyrollPeriodPayments(this.state.singlePayrollPeriod.id);
+                });
             }
         }
     }
@@ -1794,8 +1803,6 @@ export class PayrollReport extends Flux.DashView {
 
 
     render() {
-        console.log(this.state.singlePayrollPeriod);
-        const taxesMagicNumber = 0;
         if (!this.state.employer) return "Loading...";
         else if (!this.state.employer.payroll_configured || !moment.isMoment(this.state.employer.payroll_period_starting_time)) {
             return <div className="p-1 listcontents text-center">
@@ -1807,28 +1814,18 @@ export class PayrollReport extends Flux.DashView {
         return (<div className="p-1 listcontents">
             <Theme.Consumer>
                 {({ bar }) => (<span>
-                    {(!this.state.singlePayrollPeriod) ? '' :
-                        (this.state.singlePayrollPeriod.payments.length > 0) ?
+                    {(!this.state.paymentInfo) ? '' :
+                        (this.state.paymentInfo.payments && this.state.paymentInfo.payments.length > 0) ?
                             <div>
                                 <p className="text-right">
-                                    <h2>Payments for {this.state.singlePayrollPeriod.label ? this.state.singlePayrollPeriod.label : `From ${moment(this.state.singlePayrollPeriod.starting_at).format('MM-D-YY h:mm A')} to ${moment(this.state.singlePayrollPeriod.ending_at).format('MM-D-YY h:mm A')}`}</h2>
+                                    <h2>Payments for {this.state.singlePayrollPeriod.label}</h2>
                                 </p>
                                 <div className="row mb-4 text-right">
-                                    <div className="col text-left">
-                                        <Button size="small" onClick={() => {
-                                            // res => this.props.history.push('/payroll/period/' + period.id
-                                        const period =this.state.singlePayrollPeriod;
-                                        update('payroll-periods', Object.assign(period, { status: 'OPEN' })).then(res => console.log(res))
-                                        .catch(e => Notify.error(e.message || e));
-                                        }}>Undo Period
-                                        </Button>
-                                    </div>
-
                                     <div className="col">
 
                                         <Button size="small" onClick={() => this.props.history.push('/payroll/period/' + this.state.singlePayrollPeriod.id)}>Review Timesheet</Button>
                                     </div>
-                                    <PDFDownloadLink document={<PayrollPeriodReport employer={this.state.employer} payments={this.state.payments} period={this.state.singlePayrollPeriod}/>} fileName={"JobCore" + ".pdf"}>
+                                    <PDFDownloadLink document={() => <PayrollPeriodReport employer={this.state.empoyer} payments={this.state.payments} period={this.state.singlePayrollPeriod}/>} fileName={"JobCore " + this.state.singlePayrollPeriod.label + ".pdf"}>
                                         {({ blob, url, loading, error }) => (loading ? 'Loading...' : (
                                             <div className="col">
                                                 <Button color="success" size="small" >Export to PDF</Button>
@@ -1836,7 +1833,7 @@ export class PayrollReport extends Flux.DashView {
                                         )
                                         )}
                                     </PDFDownloadLink>
-                                    
+
 
                                 </div>
 
@@ -1849,57 +1846,48 @@ export class PayrollReport extends Flux.DashView {
                                             <th scope="col">Staff</th>
                                             <th scope="col">Regular Hrs</th>
                                             <th scope="col">Over Time</th>
-                                            <th scope="col">Total Hours</th>
-                                            <th scope="col">Total Earnings</th>
+                                            <th scope="col">Earnings</th>
                                             <th scope="col">Taxes</th>
-                                            <th scope="col">Check Amount</th>
+                                            <th scope="col">Amount</th>
                                             <th scope="col"></th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        {this.state.payments.sort((a, b) =>
-                                            a.employee.user.last_name.toLowerCase() > b.employee.user.last_name.toLowerCase() ? 1 : -1
+                                        {this.state.paymentInfo.payments.sort((a, b) =>
+                                            a.employee.last_name.toLowerCase() > b.employee.last_name.toLowerCase() ? 1 : -1
                                         ).map(pay => {
-                                            const total_hours = pay.payments.filter(p => p.status === "APPROVED").reduce((total, { regular_hours, over_time }) => total + Number(regular_hours) + Number(over_time), 0);
-                                            
-                                            const total_amount = pay.payments.filter(p => p.status === "APPROVED").reduce((total, { regular_hours, over_time, hourly_rate }) => total + (Number(regular_hours) + Number(over_time))*Number(hourly_rate) , 0);
-                                            const total_reg = total_hours > 40 ? 40 * Number(pay.payments[0]['hourly_rate']) : 0;
-                                            const total_ot = total_hours > 40 ? (total_hours - 40) * Number(pay.payments[0]['hourly_rate']*1.5) : 0;
-                                            const total = pay.payments.filter(p => p.status === 'APPROVED').reduce((incoming, current) => {
-                                                return {
-                                                    overtime: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) > 40 ? parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) - 40 : 0,
-                                                    over_time: parseFloat(current.over_time) + parseFloat(incoming.over_time),
-                                                    regular_hours: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours),
-                                                    taxes: taxesMagicNumber,
-                                                    total_amount: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours) > 40 ?(
-                                                        ((((Math.round(total_amount * 100) / 100)/(Math.round(total_hours * 100) / 100))*0.5)*Math.round((total_hours - 40) * 100) / 100 + Math.round(total_amount * 100) / 100).toFixed(2)
-                                                    ): (Math.round(total_amount * 100) / 100),
-                                                    status: current.status == 'PAID' && incoming.status == 'PAID' ? 'PAID' : 'UNPAID'
-                                                };
-                                            }, { regular_hours: 0, total_amount: 0, over_time: 0, status: 'UNPAID' });
+                                            // const total = pay.filter(p => p.status === 'APPROVED').reduce((incoming, current) => {
+                                            //     return {
+                                            //         over_time: parseFloat(current.over_time) + parseFloat(incoming.over_time),
+                                            //         regular_hours: parseFloat(current.regular_hours) + parseFloat(incoming.regular_hours),
+                                            //         total_amount: parseFloat(current.total_amount) + parseFloat(incoming.total_amount),
+                                            //         status: current.status == 'PAID' && incoming.status == 'PAID' ? 'PAID' : 'UNPAID'
+                                            //     };
+                                            // }, { regular_hours: 0, total_amount: 0, over_time: 0, status: 'UNPAID' });
                                             return <tr key={pay.employee.id}>
                                                 <td>
-                                                    {pay.employee.user.last_name}, {pay.employee.user.first_name}
-                                                    <p className="m-0 p-0"><span className="badge">{total.status.toLowerCase()}</span></p>
+                                                    {pay.employee.last_name}, {pay.employee.first_name}
+                                                    <p className="m-0 p-0"><span className="badge">{pay.paid ? "paid" : "unpaid"}</span></p>
                                                 </td>
-                                                <td>{Math.round(total.regular_hours * 100) / 100}</td>
-                                                <td>{Number(total.overtime).toFixed(2)}</td>
-                                                <td>{Math.round((total.regular_hours + total.over_time) * 100) / 100}</td>
-                                                <td>${Math.round(total.total_amount * 100) / 100}</td>
-                                                <td>0</td>
-                                                <td>${Math.round((total.total_amount - taxesMagicNumber) * 100) / 100}</td>
+                                                <td>{pay.regular_hours}</td>
+                                                <td>{pay.over_time}</td>
+                                                <td>{pay.earnings}</td> 
+                                                <td>{pay.deductions}</td>
+                                                <td>{pay.amount}</td>
                                                 <td>
-                                                    <Button
-                                                        color="success"
-                                                        size="small"
-                                                        onClick={() => bar.show({
-                                                            slug: "make_payment",
-                                                            data: {
-                                                                pay: pay,
-                                                                total: total,
-                                                            }
-                                                        })}>
-                                                        Make payment
+                                                    <Button 
+                                                    color="success" 
+                                                    size="small" 
+                                                    onClick={() => bar.show({ 
+                                                        slug: "make_payment", 
+                                                        data: {
+                                                            pay: pay,
+                                                            paymentInfo: this.state.paymentInfo,
+                                                            periodId: this.state.singlePayrollPeriod.id,
+                                                            bar: bar
+                                                    } 
+                                                    })}>
+                                                        {pay.paid ? "Payment details" : "Make payment"}
                                                     </Button>
                                                 </td>
                                                 {/* <td>{Math.round((total.regular_hours + total.over_time) * 100) / 100}</td>
@@ -1917,3 +1905,4 @@ export class PayrollReport extends Flux.DashView {
         </div >);
     }
 }
+