diff --git a/client/src/components/job-payments/job-payments.component.jsx b/client/src/components/job-payments/job-payments.component.jsx
index f12b81bee..2b470a36c 100644
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -14,6 +14,7 @@ import { alphaSort, dateSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
 import DataLabel from "../data-label/data-label.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
+import PaymentExpandedRowComponent from "../payment-expanded-row/payment-expanded-row.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -166,7 +167,7 @@ export function JobPayments({
           <Button
             onClick={() =>
               setCardPaymentContext({
-                actions: { refetch: refetch },
+                actions: { refetch },
                 context: { jobid: job.id, balance },
               })
             }
@@ -191,6 +192,11 @@ export function JobPayments({
         scroll={{
           x: true,
         }}
+        expandable={{
+          expandedRowRender: (record) => (
+            <PaymentExpandedRowComponent record={record} />
+          ),
+        }}
         summary={() => (
           <>
             <Table.Summary.Row>
diff --git a/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx b/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
new file mode 100644
index 000000000..58fea19bf
--- /dev/null
+++ b/client/src/components/payment-expanded-row/payment-expanded-row.component.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { useQuery } from "@apollo/client";
+import { QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID } from "../_test/payment_response.queries";
+import { Descriptions } from "antd";
+import moment from "moment";
+
+const PaymentExpandedRowComponent = ({ record }) => {
+  const { loading, error, data } = useQuery(
+    QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID,
+    {
+      variables: {
+        paymentid: record.id,
+        fetchPolicy: "network-only",
+        nextFetchPolicy: "network-only",
+      },
+    }
+  );
+
+  if (loading) return null;
+
+  if (error) return <p>Error loading data. Please Reload</p>;
+
+  const payment_response = data.payment_response[0];
+  console.log("Record", record);
+
+  return (
+    <div>
+      <Descriptions
+        title="Payment Details"
+        contentStyle={{ fontWeight: "600" }}
+        column={4}
+      >
+        <Descriptions.Item label="Payer">{record.payer}</Descriptions.Item>
+        <Descriptions.Item label="Payer Name">
+          {payment_response.response.nameOnCard}
+        </Descriptions.Item>
+        <Descriptions.Item label="Amount">{record.amount}</Descriptions.Item>
+        <Descriptions.Item label="Date of Payment">
+          {moment(record.created_at).format("YYYY-MM-DD HH:mm:ss")}
+        </Descriptions.Item>
+        <Descriptions.Item label="Transaction ID">
+          {record.transactionid}
+        </Descriptions.Item>
+        <Descriptions.Item label="Payment Reference ID">
+          {payment_response.response.paymentreferenceid}
+        </Descriptions.Item>
+        <Descriptions.Item label="Payment Type">
+          {record.type}
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+};
+
+export default PaymentExpandedRowComponent;