diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 1bf35685a..64e8faa9d 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -4755,6 +4755,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>jobline</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>line_desc</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx b/client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx
index 73acfd027..2f4d49c73 100644
--- a/client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx
+++ b/client/src/components/invoice-detail-edit/invoice-detail-edit.component.jsx
@@ -1,11 +1,11 @@
-import { DatePicker, Form, Input, Switch } from "antd";
+import { DatePicker, Form, Input, Switch, Tag } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyInput from "../form-items-formatted/currency-form-item.component";
-import JobSearchSelect from "../job-search-select/job-search-select.component";
-import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
-import InvoiceEnterModalLinesComponent from "../invoice-enter-modal/invoice-enter-modal.lines.component";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
+import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import InvoiceEnterModalLinesComponent from "../invoice-enter-modal/invoice-enter-modal.lines.component";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
 
 export default function InvoiceDetailEditComponent({
   form,
@@ -15,6 +15,22 @@ export default function InvoiceDetailEditComponent({
   responsibilityCenters,
 }) {
   const { t } = useTranslation();
+  const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
+  const {  getFieldsValue } = form;
+
+  const calculateTotals = () => {
+    setAmounts({
+      invoiceTotal: getFieldsValue().total || 0,
+      enteredTotal: getFieldsValue("invoicelines").invoicelines
+        ? getFieldsValue("invoicelines").invoicelines.reduce(
+            (acc, value) =>
+              acc + (value && value.actual_cost ? value.actual_cost : 0),
+            0
+          )
+        : 0,
+    });
+  };
+
   return (
     <div>
       <div style={{ display: "flex" }}>
@@ -85,18 +101,32 @@ export default function InvoiceDetailEditComponent({
       </div>
       <InvoiceEnterModalLinesComponent
         lineData={lineData}
-        discount={0.1}
+        discount={0.1} //TODO Derive the actual discount from the vendor.
         form={form}
         responsibilityCenters={responsibilityCenters}
+        calculateTotals={calculateTotals}
       />
 
       <Form.Item name="upload" label="Upload">
         <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
       </Form.Item>
+      {t("invoicelines.labels.entered")}
+      <CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
 
+      {amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
+        <Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
+      ) : (
+        <Tag color="red">
+          {t("invoicelines.labels.unreconciled")}:
+          <CurrencyFormatter>
+            {amounts.invoiceTotal - amounts.enteredTotal}
+          </CurrencyFormatter>
+        </Tag>
+      )}
       <button
         onClick={() => {
-          console.log(form.getFieldsValue());
+          //console.log(form.getFieldsValue());
+          form.resetFields();
         }}
       >
         a
diff --git a/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx b/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
index e370486e4..017e7fdfb 100644
--- a/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
+++ b/client/src/components/invoice-detail-edit/invoice-detail-edit.container.jsx
@@ -1,25 +1,19 @@
-import React, { useState, useEffect } from "react";
-import {
-  QUERY_INVOICES_BY_VENDOR,
-  QUERY_INVOICE_BY_PK,
-} from "../../graphql/invoices.queries";
-import { useQuery, useLazyQuery } from "@apollo/react-hooks";
-import queryString from "query-string";
-import { useHistory, useLocation } from "react-router-dom";
-import { Table, Input, Form } from "antd";
-import { useTranslation } from "react-i18next";
-import { alphaSort } from "../../utils/sorters";
-import AlertComponent from "../alert/alert.component";
-import { DateFormatter } from "../../utils/DateFormatter";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
-import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
-import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { useQuery } from "@apollo/react-hooks";
+import { Form } from "antd";
 import moment from "moment";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { createStructuredSelector } from "reselect";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { QUERY_INVOICE_BY_PK } from "../../graphql/invoices.queries";
 import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
 import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import AlertComponent from "../alert/alert.component";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import InvoiceDetailEditComponent from "./invoice-detail-edit.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -71,11 +65,17 @@ export function InvoiceDetailEditContainer({ bodyshop }) {
           data
             ? {
                 ...data.invoices_by_pk,
+                invoicelines: data.invoices_by_pk.invoicelines.map((i) => {
+                  return {
+                    ...i,
+                    joblineid: !!i.joblineid ? i.joblineid : "noline",
+                  };
+                }),
                 date: data.invoices_by_pk
                   ? moment(data.invoices_by_pk.date)
                   : null,
               }
-            : { invoicelines: [] }
+            : {}
         }
       >
         <InvoiceDetailEditComponent
diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
index d8999845e..d848ac8c8 100644
--- a/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
+++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx
@@ -1,11 +1,12 @@
-import { DatePicker, Form, Input, Switch } from "antd";
+import { DatePicker, Form, Input, Switch, Tag } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
-import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
 
 export default function InvoiceEnterModalComponent({
   form,
@@ -18,7 +19,20 @@ export default function InvoiceEnterModalComponent({
   const { t } = useTranslation();
 
   const [discount, setDiscount] = useState(0);
-
+  const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
+  const { getFieldsValue } = form;
+  const calculateTotals = () => {
+    setAmounts({
+      invoiceTotal: getFieldsValue().total || 0,
+      enteredTotal: getFieldsValue("invoicelines").invoicelines
+        ? getFieldsValue("invoicelines").invoicelines.reduce(
+            (acc, value) =>
+              acc + (value && value.actual_cost ? value.actual_cost : 0),
+            0
+          )
+        : 0,
+    });
+  };
   const handleVendorSelect = (props, opt) => {
     setDiscount(opt.discount);
   };
@@ -111,14 +125,13 @@ export default function InvoiceEnterModalComponent({
         discount={discount}
         form={form}
         responsibilityCenters={responsibilityCenters}
+        calculateTotals={calculateTotals}
       />
 
-      <Form.Item
-        name="upload"
-        label="Upload"
-      >
+      <Form.Item name="upload" label="Upload">
         <DocumentsUploadContainer jobId={form.getFieldValue("jobid")} />
       </Form.Item>
+
       <button
         onClick={() => {
           console.log(form.getFieldsValue());
@@ -126,6 +139,20 @@ export default function InvoiceEnterModalComponent({
       >
         a
       </button>
+
+      {t("invoicelines.labels.entered")}
+      <CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
+
+      {amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
+        <Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
+      ) : (
+        <Tag color="red">
+          {t("invoicelines.labels.unreconciled")}:
+          <CurrencyFormatter>
+            {amounts.invoiceTotal - amounts.enteredTotal}
+          </CurrencyFormatter>
+        </Tag>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
index 54ca1008d..79b3fe0a3 100644
--- a/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
+++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx
@@ -61,7 +61,14 @@ function InvoiceEnterModalContainer({
       variables: {
         invoice: [
           Object.assign({}, values, {
-            invoicelines: { data: values.invoicelines },
+            invoicelines: {
+              data: values.invoicelines.map((i) => {
+                return {
+                  ...i,
+                  joblineid: i.joblineid === "noline" ? null : i.joblineid,
+                };
+              }),
+            },
           }),
         ],
       },
diff --git a/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx b/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx
index 808f773a5..7fc1de42c 100644
--- a/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx
+++ b/client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx
@@ -1,34 +1,20 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Col, Form, Input, Row, Select, Tag } from "antd";
-import React, { useState } from "react";
+import { Button, Form, Input, Select } from "antd";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import InvoiceLineSearchSelect from "../invoice-line-search-select/invoice-line-search-select.component";
 
 export default function InvoiceEnterModalLinesComponent({
   lineData,
   discount,
   form,
   responsibilityCenters,
+  calculateTotals,
 }) {
   const { t } = useTranslation();
   const { setFieldsValue, getFieldsValue } = form;
-
-  const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
-
-  const calculateTotals = () => {
-    setAmounts({
-      invoiceTotal: getFieldsValue().total,
-      enteredTotal: getFieldsValue("invoicelines").invoicelines
-        ? getFieldsValue("invoicelines").invoicelines.reduce(
-            (acc, value) =>
-              acc + (value && value.actual_cost ? value.actual_cost : 0),
-            0
-          )
-        : 0,
-    });
-  };
-
+  console.log("calculateTotals", calculateTotals);
   return (
     <div>
       <Form.List name="invoicelines">
@@ -40,8 +26,9 @@ export default function InvoiceEnterModalLinesComponent({
                 <Form.Item required={false} key={field.key}>
                   <div style={{ display: "flex" }}>
                     <Form.Item
-                      label={t("invoicelines.fields.line_desc")}
+                      label={t("invoicelines.fields.jobline")}
                       key={`${index}joblinename`}
+                      name={[field.name, "joblineid"]}
                       rules={[
                         {
                           required: true,
@@ -49,10 +36,9 @@ export default function InvoiceEnterModalLinesComponent({
                         },
                       ]}
                     >
-                      <Select
-                        autoFocus
-                        name={`le${index}`}
-                        style={{ width: "450px" }}
+                      <InvoiceLineSearchSelect
+                        options={lineData}
+                        onBlur={null}
                         onSelect={(value, opt) => {
                           setFieldsValue({
                             invoicelines: getFieldsValue([
@@ -61,13 +47,8 @@ export default function InvoiceEnterModalLinesComponent({
                               if (idx === index) {
                                 return {
                                   ...item,
-                                  joblineid: opt.key.includes("noline")
-                                    ? null
-                                    : opt.key,
-                                  line_desc: opt.key.includes("noline")
-                                    ? ""
-                                    : opt.value,
-                                  actual_price: opt.cost ? opt.cost : 0,
+                                  line_desc: opt.line_desc,
+                                  actual_price: opt.cost,
                                   cost_center: opt.part_type
                                     ? responsibilityCenters.defaults[
                                         opt.part_type
@@ -79,59 +60,22 @@ export default function InvoiceEnterModalLinesComponent({
                             }),
                           });
                         }}
-                        showSearch
-                      >
-                        <Select.Option
-                          key={`${index}noline`}
-                          value={t("invoicelines.labels.other")}
-                          cost={0}
-                        >
-                          {t("invoicelines.labels.other")}
-                        </Select.Option>
-                        {lineData
-                          ? lineData.map((item) => (
-                              <Select.Option
-                                key={item.id}
-                                value={item.line_desc}
-                                cost={item.act_price ? item.act_price : 0}
-                                part_type={item.part_type}
-                              >
-                                <Row justify="center" align="middle">
-                                  <Col span={12}> {item.line_desc}</Col>
-                                  <Col span={8}>
-                                    <Tag color="blue">{item.oem_partno}</Tag>
-                                  </Col>
-                                  <Col span={4}>
-                                    <Tag color="green">
-                                      <CurrencyFormatter>
-                                        {item.act_price || 0}
-                                      </CurrencyFormatter>
-                                    </Tag>
-                                  </Col>
-                                </Row>
-                              </Select.Option>
-                            ))
-                          : null}
-                      </Select>
+                      />
                     </Form.Item>
 
-                    {!!getFieldsValue(["invoicelines"]).invoicelines[index] &&
-                    !getFieldsValue(["invoicelines"]).invoicelines[index]
-                      .joblineid ? (
-                      <Form.Item
-                        label={t("invoicelines.fields.line_desc")}
-                        key={`${index}line_desc`}
-                        name={[field.name, "line_desc"]}
-                        rules={[
-                          {
-                            required: true,
-                            message: t("general.validation.required"),
-                          },
-                        ]}
-                      >
-                        <Input />
-                      </Form.Item>
-                    ) : null}
+                    <Form.Item
+                      label={t("invoicelines.fields.line_desc")}
+                      key={`${index}line_desc`}
+                      name={[field.name, "line_desc"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
 
                     <Form.Item
                       label={t("invoicelines.fields.actual")}
@@ -176,7 +120,11 @@ export default function InvoiceEnterModalLinesComponent({
                         },
                       ]}
                     >
-                      <CurrencyInput onBlur={() => calculateTotals()} />
+                      <CurrencyInput
+                        onBlur={() => {
+                          calculateTotals();
+                        }}
+                      />
                     </Form.Item>
                     <Form.Item
                       label={t("invoicelines.fields.cost_center")}
@@ -195,7 +143,6 @@ export default function InvoiceEnterModalLinesComponent({
                         ))}
                       </Select>
                     </Form.Item>
-
                     <DeleteFilled
                       onClick={() => {
                         remove(field.name);
@@ -220,25 +167,6 @@ export default function InvoiceEnterModalLinesComponent({
           );
         }}
       </Form.List>
-      <Row>
-        <Col span={4}>
-          {t("invoicelines.labels.entered")}
-          <CurrencyFormatter>{amounts.enteredTotal || 0}</CurrencyFormatter>
-        </Col>
-
-        <Col span={4}>
-          {amounts.invoiceTotal - amounts.enteredTotal === 0 ? (
-            <Tag color="green">{t("invoicelines.labels.reconciled")}</Tag>
-          ) : (
-            <Tag color="red">
-              {t("invoicelines.labels.unreconciled")}:
-              <CurrencyFormatter>
-                {amounts.invoiceTotal - amounts.enteredTotal}
-              </CurrencyFormatter>
-            </Tag>
-          )}
-        </Col>
-      </Row>
     </div>
   );
 }
diff --git a/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
new file mode 100644
index 000000000..f726115e7
--- /dev/null
+++ b/client/src/components/invoice-line-search-select/invoice-line-search-select.component.jsx
@@ -0,0 +1,66 @@
+import { Select, Row, Col, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CurrencyFormatter from "../../utils/CurrencyFormatter";
+
+//To be used as a form element only.
+const { Option } = Select;
+const InvoiceLineSearchSelect = ({
+  value,
+  onChange,
+  options,
+  onBlur,
+  onSelect,
+}) => {
+  const [option, setOption] = useState(value);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      showSearch
+      autoFocus
+      value={option}
+      style={{
+        width: 450,
+      }}
+      onChange={setOption}
+      optionFilterProp="children"
+      onBlur={onBlur}
+      onSelect={onSelect}
+    >
+      <Select.Option key={null} value={"noline"} cost={0} line_desc={""}>
+        {t("invoicelines.labels.other")}
+      </Select.Option>
+      {options
+        ? options.map((item) => (
+            <Option
+              key={item.id}
+              value={item.id}
+              cost={item.act_price ? item.act_price : 0}
+              part_type={item.part_type}
+              line_desc={item.line_desc}
+            >
+              <Row justify="center" align="middle">
+                <Col span={12}>{item.line_desc}</Col>
+                <Col span={8}>
+                  <Tag color="blue">{item.oem_partno}</Tag>
+                </Col>
+                <Col span={4}>
+                  <Tag color="green">
+                    <CurrencyFormatter>{item.act_price || 0}</CurrencyFormatter>
+                  </Tag>
+                </Col>
+              </Row>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default InvoiceLineSearchSelect;
diff --git a/client/src/graphql/invoices.queries.js b/client/src/graphql/invoices.queries.js
index 73a643e0f..0c3a4c97c 100644
--- a/client/src/graphql/invoices.queries.js
+++ b/client/src/graphql/invoices.queries.js
@@ -100,6 +100,7 @@ export const QUERY_INVOICE_BY_PK = gql`
         actual_price
         actual_cost
         cost_center
+        joblineid
       }
     }
   }
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 42895c7fa..8e3958fb9 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -333,7 +333,8 @@
 				"actual": "Actual",
 				"actual_cost": "Actual Cost",
 				"cost_center": "Cost Center",
-				"line_desc": "Line Description",
+				"jobline": "Job Line",
+				"line_desc": "Invoice Line Description",
 				"retail": "Retail"
 			},
 			"labels": {
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index a7e83e405..8ab9f1c6f 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -333,6 +333,7 @@
 				"actual": "",
 				"actual_cost": "",
 				"cost_center": "",
+				"jobline": "",
 				"line_desc": "",
 				"retail": ""
 			},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 2419d027e..993cf3b86 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -333,6 +333,7 @@
 				"actual": "",
 				"actual_cost": "",
 				"cost_center": "",
+				"jobline": "",
 				"line_desc": "",
 				"retail": ""
 			},