diff --git a/src/views/components/SendMessage.js b/src/views/components/SendMessage.js
new file mode 100644
index 0000000..574b471
--- /dev/null
+++ b/src/views/components/SendMessage.js
@@ -0,0 +1,119 @@
+export default {
+    name: 'SendMessage',
+    data() {
+        return {
+            type: 'user',
+            phone: '',
+            text: '',
+            reply_id: '',
+            loading: false,
+        }
+    },
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        openModal() {
+            $('#modalSendMessage').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        async handleSubmit() {
+            try {
+                let response = await this.sendApi()
+                showSuccessInfo(response)
+                $('#modalSendMessage').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async sendApi() {
+            this.loading = true;
+            try {
+                const payload = {
+                    phone: this.phone_id,
+                    message: this.text,
+                }
+                if (this.reply_id !== '') {
+                    payload.reply_id = this.reply_id;
+                }
+
+                let response = await http.post(`/send/message`, payload)
+                this.handleReset();
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                } else {
+                    throw new Error(error.message);
+                }
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.phone = '';
+            this.text = '';
+            this.type = 'user';
+            this.reply_id = '';
+        },
+    },
+    template: `
+    <div class="blue card" @click="openModal()" style="cursor: pointer">
+        <div class="content">
+            <a class="ui blue right ribbon label">Send</a>
+            <div class="header">Send Message</div>
+            <div class="description">
+                Send any message to user or group
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal SendMessage  -->
+    <div class="ui small modal" id="modalSendMessage">
+        <i class="close icon"></i>
+        <div class="header">
+            Send Message
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Type</label>
+                    <select name="type" v-model="type" aria-label="type">
+                        <option value="group">Group Message</option>
+                        <option value="user">Private Message</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label>Phone / Group ID</label>
+                    <input v-model="phone" type="text" placeholder="6289..."
+                           aria-label="phone">
+                    <input :value="phone_id" disabled aria-label="whatsapp_id">
+                </div>
+                <div class="field">
+                    <label>Reply Message ID</label>
+                    <input v-model="reply_id" type="text"
+                           placeholder="Optional: 57D29F74B7FC62F57D8AC2C840279B5B/3EB0288F008D32FCD0A424"
+                           aria-label="reply_id">
+                </div>
+                <div class="field">
+                    <label>Message</label>
+                    <textarea v-model="text" placeholder="Hello this is message text"
+                              aria-label="message"></textarea>
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
+                 @click="handleSubmit">
+                Send
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/index.html b/src/views/index.html
index 2233ab2..a90d8a9 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -73,22 +73,14 @@
     </div>
 
     <div class="ui three column doubling grid cards">
-        <div class="blue card" @click="sendMessageModal()" style="cursor: pointer">
-            <div class="content">
-                <a class="ui blue right ribbon label">Send</a>
-                <div class="header">Send Message</div>
-                <div class="description">
-                    Send any message to user or group
-                </div>
-            </div>
-        </div>
-
+        <send-message></send-message>
         <send-image></send-image>
         <send-file max-file-size="{{ .MaxFileSize }}"></send-file>
+
         <send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
         <send-contact></send-contact>
-
         <send-location></send-location>
+
         <send-audio></send-audio>
         <send-poll></send-poll>
     </div>
@@ -169,49 +161,6 @@
         </div>
     </div>
 
-    <!--  Modal SendMessage  -->
-    <div class="ui small modal" id="modalSendMessage">
-        <i class="close icon"></i>
-        <div class="header">
-            Send Message
-        </div>
-        <div class="content">
-            <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="message_type" v-model="message_type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone / Group ID</label>
-                    <input v-model="message_phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="message_phone_id" disabled aria-label="whatsapp_id">
-                </div>
-                <div class="field">
-                    <label>Reply Message ID</label>
-                    <input v-model="message_reply_message_id" type="text"
-                           placeholder="Optional: 57D29F74B7FC62F57D8AC2C840279B5B/3EB0288F008D32FCD0A424"
-                           aria-label="reply_message_id">
-                </div>
-                <div class="field">
-                    <label>Message</label>
-                    <textarea v-model="message_text" type="text" placeholder="Hello this is message text"
-                              aria-label="message"></textarea>
-                </div>
-            </form>
-        </div>
-        <div class="actions">
-            <div class="ui approve positive right labeled icon button" :class="{'loading': this.message_loading}"
-                 @click="sendMessageProcess">
-                Send
-                <i class="send icon"></i>
-            </div>
-        </div>
-    </div>
-
     <!--  Modal UserGroup  -->
     <div class="ui small modal" id="modalUserGroup">
         <i class="close icon"></i>
@@ -384,6 +333,7 @@
     {{ end }}
 </script>
 <script type="module">
+    import SendMessage from "./components/SendMessage.js";
     import SendImage from "./components/SendImage.js";
     import SendFile from "./components/SendFile.js";
     import SendVideo from "./components/SendVideo.js";
@@ -516,71 +466,6 @@
         }
     }
 
-    const sendMessage = {
-        data() {
-            return {
-                message_type: 'user',
-                message_phone: '',
-                message_text: '',
-                message_reply_message_id: '',
-                message_loading: false,
-            }
-        },
-        computed: {
-            message_phone_id() {
-                return this.message_type === 'user' ? `${this.message_phone}@${this.type_user}` : `${this.message_phone}@${this.type_group}`
-            }
-        },
-        methods: {
-            sendMessageModal() {
-                $('#modalSendMessage').modal({
-                    onApprove: function () {
-                        return false;
-                    }
-                }).modal('show');
-            },
-            async sendMessageProcess() {
-                try {
-                    let response = await this.sendMessageApi()
-                    showSuccessInfo(response)
-                    $('#modalSendMessage').modal('hide');
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-            sendMessageApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        this.message_loading = true;
-                        let payload = new FormData();
-                        payload.append("phone", this.message_phone_id)
-                        payload.append("message", this.message_text)
-                        if (this.message_reply_message_id !== '') {
-                            payload.append("reply_message_id", this.message_reply_message_id)
-                        }
-                        let response = await http.post(`/send/message`, payload)
-                        this.sendMessageReset();
-                        resolve(response.data.message)
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    } finally {
-                        this.message_loading = false;
-                    }
-                })
-            },
-            sendMessageReset() {
-                this.message_phone = '';
-                this.message_text = '';
-                this.message_type = 'user';
-                this.message_reply_message_id = '';
-            },
-        }
-    }
-
     const userGroups = {
         data() {
             return {
@@ -809,7 +694,7 @@
 
     Vue.createApp({
         components: {
-            SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
+            SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
         },
         delimiters: ['[[', ']]'],
@@ -866,7 +751,6 @@
         },
         mixins: [
             login, logout, reconnect,
-            sendMessage,
             userGroups, userPrivacy, userAvatar, userInfo
         ]
     }).mount('#app')