diff --git a/client/src/components/job-detail-cards/job-detail-cards.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
index c3789ab46..f40ea86b5 100644
--- a/client/src/components/job-detail-cards/job-detail-cards.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.component.jsx
@@ -3,9 +3,9 @@ import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
 import AlertComponent from "../alert/alert.component";
 import { QUERY_JOB_CARD_DETAILS } from "../../graphql/jobs.queries";
-import { PageHeader, Button, Descriptions, Menu, Icon } from "antd";
+import { PageHeader, Button, Descriptions, Tag, Icon } from "antd";
 
-import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
+//import JobDetailCardsHeaderComponent from "./job-detail-cards.header.component";
 import JobDetailCardsCustomerComponent from "./job-detail-cards.customer.component";
 import JobDetailCardsVehicleComponent from "./job-detail-cards.vehicle.component";
 import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.component";
@@ -32,11 +32,12 @@ export default function JobDetailCards({ selectedJob }) {
   }
 
   if (error) return <AlertComponent message={error.message} type="error" />;
-
+  console.log("data", data);
   return (
     <PageHeader
       ghost={false}
       onBack={() => window.history.back()}
+      tags={<Tag color="blue">{data?.jobs_by_pk.job_status?.name}</Tag>}
       title={
         data?.jobs_by_pk.ro_number
           ? `${t("jobs.fields.ro_number")} ${data?.jobs_by_pk.ro_number}`
@@ -63,9 +64,7 @@ export default function JobDetailCards({ selectedJob }) {
     >
       <Descriptions size="small" column={3}>
         <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-        <Descriptions.Item label="Association">
-          <a>421421</a>
-        </Descriptions.Item>
+        <Descriptions.Item label="Association">421421</Descriptions.Item>
         <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
         <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
         <Descriptions.Item label="Remarks">
diff --git a/client/src/components/job-detail-cards/job-detail-cards.header.component.jsx b/client/src/components/job-detail-cards/job-detail-cards.header.component.jsx
deleted file mode 100644
index 71b3acc81..000000000
--- a/client/src/components/job-detail-cards/job-detail-cards.header.component.jsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Icon, Menu, Row, Col, PageHeader, Button, Descriptions } from "antd";
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-export default function JobDetailCardsHeader({ selectedJob, data }) {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <PageHeader
-        ghost={false}
-        onBack={() => window.history.back()}
-        title="Title"
-        subTitle="This is a subtitle"
-        extra={[
-          <Button key="3">Operation</Button>,
-          <Button key="2">Operation</Button>,
-          <Button key="1" type="primary">
-            Primary
-          </Button>
-        ]}
-      >
-        <Descriptions size="small" column={3}>
-          <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
-          <Descriptions.Item label="Association">
-            <a>421421</a>
-          </Descriptions.Item>
-          <Descriptions.Item label="Creation Time">
-            2017-01-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Effective Time">
-            2017-10-10
-          </Descriptions.Item>
-          <Descriptions.Item label="Remarks">
-            Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-          </Descriptions.Item>
-        </Descriptions>
-
-        The rest of the content can go heare?
-      </PageHeader>
-      <Row>
-        <Col span={4}>Name</Col>
-        <Col span={18} offset={2}>
-          <Menu mode="horizontal">
-            <Menu.Item key="images">
-              <Icon type="file-image" />
-              {t("jobs.actions.viewJobImages")}
-            </Menu.Item>
-            <Menu.Item key="printing">
-              <Icon type="printer" />
-              {t("jobs.actions.printCenter")}
-            </Menu.Item>
-            <Menu.Item key="notes">
-              <Icon type="edit" />
-              {t("jobs.actions.notes")}
-            </Menu.Item>
-            <Menu.Item key="postinvoices">
-              <Icon type="shopping-cart" />
-              {t("jobs.actions.postInvoices")}
-            </Menu.Item>
-            <Menu.Item key="receiveparts">
-              <Icon type="inbox" />
-              {t("jobs.actions.receiveParts")}
-            </Menu.Item>
-            <Menu.Item key="partstatus">
-              <Icon type="tool" />
-              {t("jobs.actions.partStatus")}
-            </Menu.Item>
-          </Menu>
-        </Col>
-      </Row>
-    </div>
-  );
-}
diff --git a/client/src/components/jobs-list/jobs-list.component.jsx b/client/src/components/jobs-list/jobs-list.component.jsx
index fb79da28a..1b2bbe07d 100644
--- a/client/src/components/jobs-list/jobs-list.component.jsx
+++ b/client/src/components/jobs-list/jobs-list.component.jsx
@@ -124,10 +124,10 @@ export default function JobsPage({
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
   };
 
-  const handleChange = event => {
-    const { value } = event.target;
-    setState({ ...state, filterinfo: { text: [value] } });
-  };
+  // const handleChange = event => {
+  //   const { value } = event.target;
+  //   setState({ ...state, filterinfo: { text: [value] } });
+  // };
 
   const handleOnRowClick = record => {
     if (record) {