diff --git a/packages/plugin-imap-api/src/graphql/resolvers/mutations.ts b/packages/plugin-imap-api/src/graphql/resolvers/mutations.ts
index 8d272b9c1af..a367c936688 100644
--- a/packages/plugin-imap-api/src/graphql/resolvers/mutations.ts
+++ b/packages/plugin-imap-api/src/graphql/resolvers/mutations.ts
@@ -91,17 +91,7 @@ const notificationMutations = {
       }
     });
 
-    console.log(
-      'mmmmmmmmmmmmmmmmm',
-      JSON.stringify(
-        attachments.map(attach => ({
-          filename: attach.name,
-          path: attach.url
-        }))
-      )
-    );
-
-    const info = await transporter.sendMail({
+    const mailData = {
       from,
       to,
       subject: replyToMessageId ? `Re: ${subject}` : subject,
@@ -112,9 +102,23 @@ const notificationMutations = {
         filename: attach.name,
         path: attach.url
       }))
-    });
+    };
+
+    const info = await transporter.sendMail(mailData);
 
-    return info.messageId;
+    return models.Messages.create({
+      inboxIntegrationId: integration.inboxId,
+      inboxConversationId: conversationId,
+      createdAt: new Date(),
+      messageId: info.messageId,
+      inReplyTo: replyToMessageId,
+      references: mailData.references,
+      subject: mailData.subject,
+      body: mailData.html,
+      to: (mailData.to || []).map(to => ({ name: to, address: to })),
+      from: [{ name: mailData.from, address: mailData.from }],
+      attachments: mailData.attachments
+    });
   }
 };
 
diff --git a/packages/plugin-imap-ui/src/components/ConversationDetail.tsx b/packages/plugin-imap-ui/src/components/ConversationDetail.tsx
index 2caa3400538..e19d634edf3 100644
--- a/packages/plugin-imap-ui/src/components/ConversationDetail.tsx
+++ b/packages/plugin-imap-ui/src/components/ConversationDetail.tsx
@@ -18,6 +18,7 @@ class Detail extends React.Component<any> {
 
     return (
       <MailConversation
+        detailQuery={messagesQuery}
         conversation={currentConversation}
         conversationMessages={messages}
       />
diff --git a/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/Mail.tsx b/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/Mail.tsx
index 5898027a215..9df84bbdd13 100644
--- a/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/Mail.tsx
+++ b/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/Mail.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { cleanHtml } from '../../../../../settings/integrations/containers/utils';
 
 type Props = {
+  detailQuery?: any;
   message: IMessage;
   integrationId: string;
   conversationId?: string;
@@ -101,6 +102,7 @@ class Mail extends React.PureComponent<Props, State> {
     }
 
     const {
+      detailQuery,
       conversationId,
       message,
       integrationId,
@@ -112,6 +114,7 @@ class Mail extends React.PureComponent<Props, State> {
     return (
       <BoxItem>
         <MailForm
+          detailQuery={detailQuery}
           source="inbox"
           replyAll={replyAll}
           isReply={isReply}
diff --git a/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/MailConversation.tsx b/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/MailConversation.tsx
index f4137310e56..d1aafb2345f 100644
--- a/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/MailConversation.tsx
+++ b/packages/ui-inbox/src/inbox/components/conversationDetail/workarea/mail/MailConversation.tsx
@@ -4,13 +4,14 @@ import SimpleMessage from '../conversation/messages/SimpleMessage';
 import Mail from './Mail';
 
 type Props = {
+  detailQuery?: any;
   conversation: IConversation;
   conversationMessages: IMessage[];
 };
 
 class MailConversation extends React.Component<Props, {}> {
   render() {
-    const { conversation, conversationMessages } = this.props;
+    const { conversation, conversationMessages, detailQuery } = this.props;
 
     if (!conversation) {
       return null;
@@ -18,7 +19,7 @@ class MailConversation extends React.Component<Props, {}> {
 
     const messages = conversationMessages || [];
     const { integration } = conversation;
-    const { _id, kind, brandId } = integration;
+    const { _id, brandId } = integration;
 
     const length = messages.length;
 
@@ -37,6 +38,7 @@ class MailConversation extends React.Component<Props, {}> {
 
       return (
         <Mail
+          detailQuery={detailQuery}
           key={message._id}
           customerId={conversation.customerId}
           conversationId={conversation._id}
diff --git a/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx b/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx
index b4abfa680e1..48ae90075f3 100644
--- a/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx
+++ b/packages/ui-inbox/src/settings/integrations/containers/mail/MailForm.tsx
@@ -4,11 +4,6 @@ import * as compose from 'lodash.flowright';
 
 import { Alert, withProps } from '@erxes/ui/src/utils';
 import { IMail, IMessage } from '@erxes/ui-inbox/src/inbox/types';
-import {
-  defaultCustomerFields,
-  defaultMailFields,
-  defaultMessageFields
-} from './constants';
 import { mutations, queries } from '../../graphql';
 
 import { IUser } from '@erxes/ui/src/auth/types';
@@ -22,6 +17,7 @@ import { queries as messageQueries } from '@erxes/ui-inbox/src/inbox/graphql';
 import withCurrentUser from '@erxes/ui/src/auth/containers/withCurrentUser';
 
 type Props = {
+  detailQuery?: any;
   source?: 'inbox' | 'engage';
   clearOnSubmit?: boolean;
   integrationId?: string;
@@ -64,8 +60,8 @@ class MailFormContainer extends React.Component<
 
   render() {
     const {
+      detailQuery,
       source = 'engage',
-      mailData,
       integrationId,
       customerId,
       conversationId,
@@ -145,15 +141,11 @@ class MailFormContainer extends React.Component<
     const save = ({
       mutation,
       variables,
-      optimisticResponse,
-      update,
       callback
     }: {
       mutation: string;
       variables: any;
-      optimisticResponse?: any;
       callback?: () => void;
-      update?: any;
     }) => {
       return client
         .mutate({
@@ -164,11 +156,13 @@ class MailFormContainer extends React.Component<
             integrationId,
             conversationId,
             customerId
-          },
-          optimisticResponse,
-          update
+          }
         })
         .then(() => {
+          if (detailQuery) {
+            detailQuery.refetch();
+          }
+
           Alert.success('You have successfully sent a email');
 
           if (isReply && variables.shouldResolve) {
@@ -209,68 +203,9 @@ class MailFormContainer extends React.Component<
       variables: any;
       callback: () => void;
     }) => {
-      const email = mailData ? mailData.integrationEmail : '';
-
-      const imapSendMail = {
-        _id: Math.round(Math.random() * -1000000),
-        ...defaultMessageFields,
-        conversationId,
-        videoCallData: null,
-        contentType: '',
-        content: variables.body,
-        customer: {
-          ...defaultCustomerFields,
-          firstName: email,
-          primaryEmail: email
-        },
-        mailData: {
-          ...defaultMailFields,
-          bcc: [{ __typename: 'Email', email: variables.bcc }],
-          to: [{ __typename: 'Email', email: variables.to }],
-          from: [{ __typename: 'Email', email: variables.to }],
-          cc: [{ __typename: 'Email', email: variables.cc }],
-          body: variables.body,
-          subject: variables.subject,
-          attachments: variables.attachments,
-          integrationEmail: variables.from
-        }
-      };
-
       let sendEmailMutation = mutations.imapSendMail;
 
-      let optimisticResponse: any = {
-        __typename: 'Mutation',
-        imapSendMail
-      };
-
-      let update: any = store => {
-        const selector = {
-          query: gql(messageQueries.conversationMessages),
-          variables: { conversationId, limit: 10, skip: 0 }
-        };
-
-        // Read the data from our cache for this query.
-        try {
-          const data = store.readQuery(selector);
-          const messages = data.conversationMessages || [];
-
-          messages.push(imapSendMail);
-
-          // Write our data back to the cache.
-          store.writeQuery({ ...selector, data });
-
-          if (closeReply) {
-            closeReply();
-          }
-        } catch (e) {
-          Alert.error(e);
-          return;
-        }
-      };
-
       if (source === 'engage') {
-        update = undefined;
-        optimisticResponse = undefined;
         sendEmailMutation = engageMutations.sendMail;
       }
 
@@ -282,9 +217,7 @@ class MailFormContainer extends React.Component<
       return save({
         mutation: sendEmailMutation,
         variables,
-        callback,
-        optimisticResponse,
-        update
+        callback
       });
     };