diff --git a/client/src/components/production-list-columns/production-list-columns.data.js b/client/src/components/production-list-columns/production-list-columns.data.js
index 2a5c4d1e0..d8d6e6bfd 100644
--- a/client/src/components/production-list-columns/production-list-columns.data.js
+++ b/client/src/components/production-list-columns/production-list-columns.data.js
@@ -10,6 +10,7 @@ import ProductionListColumnAlert from "./production-list-columns.alert.component
 import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
 import ProductionListColumnPaintPriority from "./production-list-columns.paintpriority.component";
 import ProductionListColumnNote from "./production-list-columns.productionnote.component";
+import ProductionListDate from "./production-list-columns.date.component";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
 
@@ -78,16 +79,7 @@ const r = [
     ellipsis: true,
     sorter: (a, b) => a.scheduled_completion - b.scheduled_completion,
     render: (text, record) => (
-      <DateFormatter
-        className={
-          !!record.scheduled_completion &&
-          new Date(record.scheduled_completion) - Now < OneCalendarDay
-            ? "production-completion-1"
-            : ""
-        }
-      >
-        {record.scheduled_completion}
-      </DateFormatter>
+      <ProductionListDate record={record} field="scheduled_completion" />
     ),
   },
   {
@@ -97,7 +89,7 @@ const r = [
     ellipsis: true,
     sorter: (a, b) => a.scheduled_delivery - b.scheduled_delivery,
     render: (text, record) => (
-      <DateFormatter>{record.scheduled_delivery}</DateFormatter>
+      <ProductionListDate record={record} field="scheduled_delivery" />
     ),
   },
   {
diff --git a/client/src/components/production-list-columns/production-list-columns.date.component.jsx b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
new file mode 100644
index 000000000..b455d2f5c
--- /dev/null
+++ b/client/src/components/production-list-columns/production-list-columns.date.component.jsx
@@ -0,0 +1,64 @@
+import { ExclamationCircleFilled } from "@ant-design/icons";
+import { DatePicker, Dropdown, Menu } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@apollo/react-hooks";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { logImEXEvent } from "../../firebase/firebase.utils";
+import { DateFormatter } from "../../utils/DateFormatter";
+import moment from "moment";
+
+const OneCalendarDay = 60 * 60 * 24 * 1000;
+const Now = new Date();
+
+export default function ProductionListDate({ record, field }) {
+  const { t } = useTranslation();
+
+  const [updateAlert] = useMutation(UPDATE_JOB);
+
+  const handleChange = (date) => {
+    logImEXEvent("production_toggle_alert");
+    //e.stopPropagation();
+    updateAlert({
+      variables: {
+        jobId: record.id,
+        job: {
+          [field]: date,
+        },
+      },
+    }).then(() => {
+      if (record.refetch) record.refetch();
+    });
+  };
+  console.log("record[field]", record[field]);
+
+  return (
+    <div>
+      <Dropdown
+        trigger={["click"]}
+        overlay={
+          <div onClick={(e) => e.stopPropagation()}>
+            <DatePicker
+              onClick={(e) => e.stopPropagation()}
+              value={moment(record[field]) || null}
+              onChange={handleChange}
+            />
+          </div>
+        }
+      >
+        <div>
+          <DateFormatter
+            bordered={false}
+            className={
+              !!record[field] && new Date(record[field]) - Now < OneCalendarDay
+                ? "production-completion-1"
+                : ""
+            }
+          >
+            {record[field]}
+          </DateFormatter>
+        </div>
+      </Dropdown>
+    </div>
+  );
+}