diff --git a/client/src/components/job-at-change/schedule-event.color.component.jsx b/client/src/components/job-at-change/schedule-event.color.component.jsx
index ec5fa9892..2895e7b27 100644
--- a/client/src/components/job-at-change/schedule-event.color.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.color.component.jsx
@@ -21,7 +21,10 @@ export function ScheduleEventColor({ bodyshop, event }) {
 
   const onClick = async ({ key }) => {
     const result = await updateAppointment({
-      variables: { appid: event.id, app: { color: key } },
+      variables: {
+        appid: event.id,
+        app: { color: key === "null" ? null : key },
+      },
     });
 
     if (!!!result.errors) {
@@ -34,6 +37,13 @@ export function ScheduleEventColor({ bodyshop, event }) {
       });
     }
   };
+
+  const selectedColor =
+    event.color &&
+    bodyshop.appt_colors &&
+    bodyshop.appt_colors.filter((color) => color.color.hex === event.color)[0]
+      ?.label;
+
   const menu = (
     <Menu selectedKeys={[event.color]} onClick={onClick}>
       {bodyshop.appt_colors &&
@@ -42,11 +52,15 @@ export function ScheduleEventColor({ bodyshop, event }) {
             {color.label}
           </Menu.Item>
         ))}
+      <Menu.Divider />
+      <Menu.Item key={"null"}>{t("general.actions.clear")}</Menu.Item>
     </Menu>
   );
+  console.log(`event`, event);
   return (
     <Dropdown overlay={menu}>
       <a href=" #" onClick={(e) => e.preventDefault()}>
+        {selectedColor}
         <DownOutlined />
       </a>
     </Dropdown>
diff --git a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
index 759a56d35..828c64f2a 100644
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -134,7 +134,7 @@ export function ScheduleJobModalComponent({
         </LayoutFormRow>
         <LayoutFormRow grow>
           <Form.Item name="color" label={t("appointments.fields.color")}>
-            <Select>
+            <Select allowClear>
               {bodyshop.appt_colors &&
                 bodyshop.appt_colors.map((color) => (
                   <Select.Option
@@ -151,7 +151,7 @@ export function ScheduleJobModalComponent({
             name={"alt_transport"}
             label={t("jobs.fields.alt_transport")}
           >
-            <Select>
+            <Select allowClear>
               {bodyshop.appt_alt_transport &&
                 bodyshop.appt_alt_transport.map((alt) => (
                   <Select.Option key={alt}>{alt}</Select.Option>