diff --git a/webui-src/app/mail/mail_compose.js b/webui-src/app/mail/mail_compose.js
index 6aae886..3f2ff0f 100644
--- a/webui-src/app/mail/mail_compose.js
+++ b/webui-src/app/mail/mail_compose.js
@@ -1,11 +1,192 @@
 const m = require('mithril');
+const rs = require('rswebui');
+const widget = require('widgets');
 
+const peopleUtil = require('people/people_util');
+const util = require('mail/mail_util');
+
+const Data = {
+  Recepients: [],
+  sendTypes: ['To', 'cc', 'Bcc'],
+  // Recepients will have objects of type {type: (0 -> To, 1 -> CC, 2 -> BCC), receiverId: (id)}
+};
 const Layout = () => {
-    return{
-        view: () => [
-            m('h2', 'Compose a mail')
-        ]
-    };
+  let subject;
+  let ownId;
+  let body;
+  let identity;
+  let allUsers;
+  return {
+    oninit: async () => {
+      await peopleUtil.ownIds((data) => {
+        ownId = data;
+        for (let i = 0; i < ownId.length; i++) {
+          if (Number(ownId[i]) === 0) {
+            ownId.splice(i, 1); // workaround for id '0'
+          }
+        }
+        identity = ownId[0];
+      });
+      allUsers = peopleUtil.sortUsers(rs.userList.users);
+      //   Data.Recepients = {};
+    },
+    view: () =>
+      m('.widget', [
+        m('h3', 'Compose a mail'),
+        m('hr'),
+        m('input[type=text][placeholder=Subject]', {
+          style: { float: 'left' },
+          oninput: (e) => (subject = e.target.value),
+        }),
+
+        m(
+          'div',
+          {
+            style: {
+              display: 'block ruby',
+              float: 'right',
+              marginTop: '10px',
+              marginBottom: '10px',
+            },
+          },
+          [
+            m('label[for=idtags]', 'From: '),
+            m(
+              'select[id=idtags]',
+              {
+                value: identity,
+                onchange: (e) => {
+                  identity = ownId[e.target.selectedIndex];
+                },
+              },
+              [
+                ownId &&
+                  ownId.map((o) =>
+                    m(
+                      'option',
+                      { value: o },
+                      rs.userList.userMap[o]
+                        ? rs.userList.userMap[o].toLocaleString() + ' (' + o.slice(0, 8) + '...)'
+                        : 'No Signature'
+                    )
+                  ),
+              ]
+            ),
+          ]
+        ),
+        m(
+          'button',
+          {
+            style: { float: 'left', marginTop: '10px', marginBottom: '10px' },
+            onclick: () => {
+              Data.Recepients.push({ type: 0, receiverIndex: undefined, showRecepient: true });
+              util.popupMessageCompose(m(Layout));
+            },
+          },
+          'Add Recepient'
+        ),
+        Data.Recepients.map((rec, index) => [
+          m(
+            'rec',
+            { style: { display: rec.showRecepient ? 'block ruby' : 'none', fontSize: '0.8em' } },
+            [
+              m(
+                'select[id=typecc]',
+                {
+                  value: Data.sendTypes[Data.Recepients[index].type],
+                  onchange: (e) => {
+                    Data.Recepients[index].type = e.target.selectedIndex;
+                    console.log(Data.Recepients[index]);
+                  },
+                },
+                [Data.sendTypes && Data.sendTypes.map((o) => m('option', { value: o }, o))]
+              ),
+              allUsers &&
+                m(
+                  'select[id=id]',
+                  {
+                    value: allUsers[Data.Recepients[index].receiverIndex],
+                    onchange: (e) => {
+                      Data.Recepients[index].receiverIndex = e.target.selectedIndex;
+                      console.log(Data.Recepients[index]);
+                    },
+                  },
+                  [
+                    allUsers.map((o) =>
+                      m(
+                        'option',
+                        { value: o },
+                        o.mGroupName + ' (' + o.mGroupId.slice(0, 8) + '...)'
+                      )
+                    ),
+                  ]
+                ),
+              m(
+                'button',
+                {
+                  style: { background: '#bd0909' },
+                  onclick: () => {
+                    Data.Recepients[index].showRecepient = false;
+                    util.popupMessageCompose(m(Layout));
+                  },
+                },
+                m('i.fas.fa-times')
+              ),
+            ]
+          ),
+        ]),
+        m('textarea[rows=5][placeholder=Message]', {
+          style: { width: '100%', display: 'block' },
+          oninput: (e) => (body = e.target.value),
+          value: body,
+        }),
+
+        allUsers &&
+          m(
+            'button',
+            {
+              onclick: async () => {
+                const toList = [];
+                const ccList = [];
+                const bccList = [];
+
+                for (let i = 0; i < Data.Recepients.length; i++) {
+                  if (Data.Recepients[i].showRecepient && Data.Recepients[i].receiverIndex) {
+                    if (Data.Recepients[i].type === 0) {
+                      toList.push(allUsers[Data.Recepients[i].receiverIndex].mGroupId);
+                    } else if (Data.Recepients[i].type === 1) {
+                      ccList.push(allUsers[Data.Recepients[i].receiverIndex].mGroupId);
+                    } else if (Data.Recepients[i].type === 2) {
+                      bccList.push(allUsers[Data.Recepients[i].receiverIndex].mGroupId);
+                    }
+                  }
+                }
+                console.log(subject);
+                const res = await rs.rsJsonApiRequest('/rsMsgs/sendMail', {
+                  from: identity,
+                  subject: subject,
+                  mailBody: body,
+                  to: toList,
+                  cc: ccList,
+                  bcc: bccList,
+                });
+                if (res.body.retval) {
+                  Data.Recepients = [];
+                  m.redraw();
+                }
+                res.body.retval !== 1
+                  ? widget.popupMessage([m('h3', 'Error'), m('hr'), m('p', res.body.errorMessage)])
+                  : widget.popupMessage([
+                      m('h3', 'Success'),
+                      m('hr'),
+                      m('p', 'Mail Sent successfully'),
+                    ]);
+              },
+            },
+            'Send'
+          ),
+      ]),
+  };
 };
 
 module.exports = Layout();
diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js
index 086f187..7b066c3 100644
--- a/webui-src/app/mail/mail_util.js
+++ b/webui-src/app/mail/mail_util.js
@@ -1,5 +1,6 @@
 const m = require('mithril');
 const rs = require('rswebui');
+const widget = require('widgets');
 
 const RS_MSG_BOXMASK = 0x000f;
 
@@ -30,37 +31,34 @@ const MessageSummary = () => {
   let msgStatus = '';
   let fromUserInfo = {};
   return {
-    oninit: (v) => {
-      rs.rsJsonApiRequest(
-        '/rsMsgs/getMessage',
-        {
-          msgId: v.attrs.details.msgId,
-        },
-        (data) => {
-          details = data.msg;
-          files = details.files;
+    oninit: async (v) => {
+      const res = await rs.rsJsonApiRequest('/rsMsgs/getMessage', {
+        msgId: v.attrs.details.msgId,
+      });
+      if (res.body.retval) {
+        details = res.body.msg;
+        files = details.files;
 
-          isStarred = (details.msgflags & 0xf00) === RS_MSG_STAR;
+        isStarred = (details.msgflags & 0xf00) === RS_MSG_STAR;
 
-          const flag = details.msgflags & 0xf0;
-          if (flag === RS_MSG_NEW || flag === RS_MSG_UNREAD_BY_USER) {
-            msgStatus = 'unread';
-          } else {
-            msgStatus = 'read';
-          }
+        const flag = details.msgflags & 0xf0;
+        if (flag === RS_MSG_NEW || flag === RS_MSG_UNREAD_BY_USER) {
+          msgStatus = 'unread';
+        } else {
+          msgStatus = 'read';
         }
-      ),
+      }
+      if (details && details.rsgxsid_srcId) {
         rs.rsJsonApiRequest(
           '/rsIdentity/getIdDetails',
           {
-            id: details.rsgxsid_srcId || details.rspeerid_srcId,
+            id: details.rsgxsid_srcId,
           },
           (data) => {
             fromUserInfo = data.details;
-            // console.log(data, details.rsgxsid_srcId, details.rspeerid_srcId);
-            // console.log(fromUserInfo);
           }
         );
+      }
     },
     view: (v) =>
       m(
@@ -147,21 +145,63 @@ const MessageView = () => {
             m('i.fas.fa-arrow-left')
           ),
           m('h3', details.title),
+          details.rsgxsid_srcId &&
+            m('from', { style: { display: 'block ruby' } }, [
+              m('p', { style: { fontWeight: 'bold' } }, 'From: '),
+              // m('p', 'hello'),
+              rs.userList.userMap[details.rsgxsid_srcId],
+            ]),
+          details.rsgxsid_msgto &&
+            m('to', { style: { display: 'block ruby' } }, [
+              m('p', { style: { fontWeight: 'bold' } }, 'To: '),
+              details.rsgxsid_msgto.map((id) => m('p', rs.userList.userMap[id] + ', ')),
+            ]),
+          details.rsgxsid_msgcc &&
+            details.rsgxsid_msgcc.length > 0 &&
+            m('cc', { style: { display: 'block ruby' } }, [
+              m('p', { style: { fontWeight: 'bold' } }, 'cc: '),
+              details.rsgxsid_msgcc.map((id) => m('p', rs.userList.userMap[id] + ', ')),
+            ]),
           m('button', 'Reply'),
           m('button', 'Reply All'),
           m('button', 'Forward'),
           m(
             'button',
             {
-              onclick: () => {
-                rs.rsJsonApiRequest('/rsMsgs/MessageToTrash', {
-                  msgId: details.msgId,
-                  bTrash: true
-                }),
-                rs.rsJsonApiRequest('/rsMsgs/MessageDelete', {
-                  msgId: details.msgId,
-                });
-              },
+              onclick: () =>
+                widget.popupMessage([
+                  m('p', 'Are you sure you want to delete this mail?'),
+                  m(
+                    'button',
+                    {
+                      onclick: async () => {
+                        rs.rsJsonApiRequest('/rsMsgs/MessageToTrash', {
+                          msgId: details.msgId,
+                          bTrash: true,
+                        });
+                        const res = await rs.rsJsonApiRequest('/rsMsgs/MessageDelete', {
+                          msgId: details.msgId,
+                        });
+                        res.body.retval === false
+                          ? widget.popupMessage([
+                              m('h3', 'Error'),
+                              m('hr'),
+                              m('p', res.body.errorMessage),
+                            ])
+                          : widget.popupMessage([
+                              m('h3', 'Success'),
+                              m('hr'),
+                              m('p', 'Mail Deleted.'),
+                            ]);
+                        m.redraw();
+                        m.route.set('/mail/:tab', {
+                          tab: m.route.param().tab,
+                        });
+                      },
+                    },
+                    'Delete'
+                  ),
+                ]),
             },
             'Delete'
           ),