diff --git a/src/views/components/AccountAvatar.js b/src/views/components/AccountAvatar.js
new file mode 100644
index 0000000..3509ecd
--- /dev/null
+++ b/src/views/components/AccountAvatar.js
@@ -0,0 +1,112 @@
+export default {
+    name: 'AccountAvatar',
+    data() {
+        return {
+            type: 'user',
+            phone: '',
+            image: null,
+            loading: false,
+            is_preview: false,
+            is_community: false,
+        }
+    },
+    computed: {
+        phone_id() {
+            return this.type === 'user' ? `${this.phone}@${window.TYPEUSER}` : `${this.phone}@${window.TYPEGROUP}`
+        }
+    },
+    methods: {
+        async openModal() {
+            this.handleReset();
+            $('#modalUserAvatar').modal('show');
+        },
+        async handleSubmit() {
+            try {
+                await this.submitApi();
+                showSuccessInfo("Avatar fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async submitApi() {
+            this.loading = true;
+            try {
+                let response = await http.get(`/user/avatar?phone=${this.phone_id}&is_preview=${this.is_preview}&is_community=${this.is_community}`)
+                this.image = response.data.results.url;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.phone = '';
+            this.image = null;
+            this.type = 'user';
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer;">
+        <div class="content">
+            <div class="header">Avatar</div>
+            <div class="description">
+                You can search someone avatar by phone
+            </div>
+        </div>
+    </div>
+
+    <!--  Modal UserAvatar  -->
+    <div class="ui small modal" id="modalUserAvatar">
+        <i class="close icon"></i>
+        <div class="header">
+            Search User Avatar
+        </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</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>Preview</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="compress" v-model="is_preview">
+                        <label>Check for small size image</label>
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label>Community</label>
+                    <div class="ui toggle checkbox">
+                        <input type="checkbox" aria-label="compress" v-model="is_community">
+                        <label>Check is it's community image</label>
+                    </div>
+                </div>
+
+                <button type="button" class="ui primary button" :class="{'loading': loading}"
+                        @click="handleSubmit">
+                    Search
+                </button>
+            </form>
+
+            <div v-if="image != null" class="center">
+                <img :src="image" alt="profile picture" style="padding-top: 10px; max-height: 200px">
+            </div>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/components/AccountGroup.js b/src/views/components/AccountGroup.js
new file mode 100644
index 0000000..8156cac
--- /dev/null
+++ b/src/views/components/AccountGroup.js
@@ -0,0 +1,115 @@
+export default {
+    name: 'AccountGroup',
+    data() {
+        return {
+            groups: []
+        }
+    },
+    methods: {
+        async openModal() {
+            try {
+                this.dtClear()
+                await this.submitApi();
+                $('#modalUserGroup').modal('show');
+                this.dtRebuild()
+                showSuccessInfo("Groups fetched")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        dtClear() {
+            $('#account_groups_table').DataTable().destroy();
+        },
+        dtRebuild() {
+            $('#account_groups_table').DataTable({
+                "pageLength": 100,
+                "reloadData": true,
+            }).draw();
+        },
+        async handleLeaveGroup(group_id) {
+            try {
+                const ok = confirm("Are you sure to leave this group?");
+                if (!ok) return;
+
+                await this.leaveGroupApi(group_id);
+                this.dtClear()
+                await this.submitApi();
+                this.dtRebuild()
+                showSuccessInfo("Group left")
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async leaveGroupApi(group_id) {
+            try {
+                let payload = new FormData();
+                payload.append("group_id", group_id)
+                await http.post(`/group/leave`, payload)
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            }
+        },
+        async submitApi() {
+            try {
+                let response = await http.get(`/user/my/groups`)
+                this.groups = response.data.results.data;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+
+            }
+        },
+        formatDate: function (value) {
+            if (!value) return ''
+            return moment(value).format('LLL');
+        }
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <div class="header">My List Groups</div>
+            <div class="description">
+                Display all groups you joined
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal AccountGroup  -->
+    <div class="ui small modal" id="modalUserGroup">
+        <i class="close icon"></i>
+        <div class="header">
+            My Group List
+        </div>
+        <div class="content">
+            <table class="ui celled table" id="account_groups_table">
+                <thead>
+                <tr>
+                    <th>Group ID</th>
+                    <th>Name</th>
+                    <th>Participants</th>
+                    <th>Created At</th>
+                    <th>Action</th>
+                </tr>
+                </thead>
+                <tbody v-if="groups != null">
+                <tr v-for="g in groups">
+                    <td>{{ g.JID.split('@')[0] }}</td>
+                    <td>{{ g.Name }}</td>
+                    <td>{{ g.Participants.length }}</td>
+                    <td>{{ formatDate(g.GroupCreated) }}</td>
+                    <td>
+                        <button class="ui red tiny button" @click="handleLeaveGroup(g.JID)">Leave</button>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    `
+}
\ No newline at end of file
diff --git a/src/views/components/AccountUserInfo.js b/src/views/components/AccountUserInfo.js
index 73fed8e..9be0786 100644
--- a/src/views/components/AccountUserInfo.js
+++ b/src/views/components/AccountUserInfo.js
@@ -25,13 +25,13 @@ export default {
         },
         async handleSubmit() {
             try {
-                await this.infoApi();
+                await this.submitApi();
                 showSuccessInfo("Info fetched")
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async infoApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let response = await http.get(`/user/info?phone=${this.phone_id}`)
diff --git a/src/views/components/MessageReact.js b/src/views/components/MessageReact.js
index 2421fd6..1c8e4d9 100644
--- a/src/views/components/MessageReact.js
+++ b/src/views/components/MessageReact.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageReaction').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id, emoji: this.emoji}
diff --git a/src/views/components/MessageRevoke.js b/src/views/components/MessageRevoke.js
index 3b0073d..cda6b1e 100644
--- a/src/views/components/MessageRevoke.js
+++ b/src/views/components/MessageRevoke.js
@@ -23,14 +23,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageRevoke').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id}
diff --git a/src/views/components/MessageUpdate.js b/src/views/components/MessageUpdate.js
index 3bb0f13..ad51904 100644
--- a/src/views/components/MessageUpdate.js
+++ b/src/views/components/MessageUpdate.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.messageApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalMessageUpdate').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async messageApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {phone: this.phone_id, message: this.new_message}
diff --git a/src/views/components/SendAudio.js b/src/views/components/SendAudio.js
index 1383c0d..0e5e3a2 100644
--- a/src/views/components/SendAudio.js
+++ b/src/views/components/SendAudio.js
@@ -22,14 +22,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalAudioSend').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();
diff --git a/src/views/components/SendContact.js b/src/views/components/SendContact.js
index e8706f6..0081691 100644
--- a/src/views/components/SendContact.js
+++ b/src/views/components/SendContact.js
@@ -25,7 +25,7 @@ export default {
         async handleSubmit() {
             try {
                 this.loading = true;
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendContact').modal('hide');
             } catch (err) {
@@ -34,7 +34,7 @@ export default {
                 this.loading = false;
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {
diff --git a/src/views/components/SendFile.js b/src/views/components/SendFile.js
index 3d2e302..b05720b 100644
--- a/src/views/components/SendFile.js
+++ b/src/views/components/SendFile.js
@@ -29,14 +29,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendFile').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();
diff --git a/src/views/components/SendImage.js b/src/views/components/SendImage.js
index 8b50908..1402fad 100644
--- a/src/views/components/SendImage.js
+++ b/src/views/components/SendImage.js
@@ -26,14 +26,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendImage').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();
diff --git a/src/views/components/SendLocation.js b/src/views/components/SendLocation.js
index 5b7653a..6d83238 100644
--- a/src/views/components/SendLocation.js
+++ b/src/views/components/SendLocation.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendLocation').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {
diff --git a/src/views/components/SendMessage.js b/src/views/components/SendMessage.js
index cc76e8f..6cdaf28 100644
--- a/src/views/components/SendMessage.js
+++ b/src/views/components/SendMessage.js
@@ -24,14 +24,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendMessage').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {
diff --git a/src/views/components/SendPoll.js b/src/views/components/SendPoll.js
index c44a673..d3b158f 100644
--- a/src/views/components/SendPoll.js
+++ b/src/views/components/SendPoll.js
@@ -26,14 +26,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 window.showSuccessInfo(response)
                 $('#modalSendPoll').modal('hide');
             } catch (err) {
                 window.showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 const payload = {
diff --git a/src/views/components/SendVideo.js b/src/views/components/SendVideo.js
index fb8bc05..a0fcf10 100644
--- a/src/views/components/SendVideo.js
+++ b/src/views/components/SendVideo.js
@@ -32,14 +32,14 @@ export default {
         },
         async handleSubmit() {
             try {
-                let response = await this.sendApi()
+                let response = await this.submitApi()
                 showSuccessInfo(response)
                 $('#modalSendVideo').modal('hide');
             } catch (err) {
                 showErrorInfo(err)
             }
         },
-        async sendApi() {
+        async submitApi() {
             this.loading = true;
             try {
                 let payload = new FormData();
diff --git a/src/views/index.html b/src/views/index.html
index 443ad44..294a361 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -100,23 +100,9 @@
     </div>
 
     <div class="ui four column doubling grid cards">
-        <div class="green card" @click="avatarModal" style="cursor: pointer;">
-            <div class="content">
-                <div class="header">Avatar</div>
-                <div class="description">
-                    You can search someone avatar by phone
-                </div>
-            </div>
-        </div>
+        <account-avatar></account-avatar>
         <account-user-info></account-user-info>
-        <div class="green card" @click="groupModal" style="cursor: pointer">
-            <div class="content">
-                <div class="header">My List Groups</div>
-                <div class="description">
-                    Display all groups you joined
-                </div>
-            </div>
-        </div>
+        <account-group></account-group>
         <div class="green card" @click="privacyModal" style="cursor: pointer">
             <div class="content">
                 <div class="header">My Privacy Setting</div>
@@ -154,38 +140,6 @@
         </div>
     </div>
 
-    <!--  Modal UserGroup  -->
-    <div class="ui small modal" id="modalUserGroup">
-        <i class="close icon"></i>
-        <div class="header">
-            My Group List
-        </div>
-        <div class="content">
-            <table class="ui celled table" id="user_groups_table">
-                <thead>
-                <tr>
-                    <th>Group ID</th>
-                    <th>Name</th>
-                    <th>Participants</th>
-                    <th>Created At</th>
-                    <th>Action</th>
-                </tr>
-                </thead>
-                <tbody v-if="data_groups != null">
-                <tr v-for="g in data_groups">
-                    <td>[[ g.JID.split('@')[0] ]]</td>
-                    <td>[[ g.Name ]]</td>
-                    <td>[[ g.Participants.length ]]</td>
-                    <td>[[ formatDate(g.GroupCreated) ]]</td>
-                    <td>
-                        <button class="ui red tiny button" @click="handleLeaveGroup(g.JID)">Leave</button>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-    </div>
-
     <!--  Modal UserPrivacy  -->
     <div class="ui small modal" id="modalUserPrivacy">
         <i class="close icon"></i>
@@ -203,57 +157,6 @@
         </div>
     </div>
 
-    <!--  Modal UserAvatar  -->
-    <div class="ui small modal" id="modalUserAvatar">
-        <i class="close icon"></i>
-        <div class="header">
-            Search User Avatar
-        </div>
-        <div class="content">
-            <form class="ui form">
-                <div class="field">
-                    <label>Type</label>
-                    <select name="avatar_type" v-model="avatar_type" aria-label="type">
-                        <option value="group">Group Message</option>
-                        <option value="user">Private Message</option>
-                    </select>
-                </div>
-                <div class="field">
-                    <label>Phone</label>
-                    <input v-model="avatar_phone" type="text" placeholder="6289..."
-                           aria-label="phone">
-                    <input :value="avatar_phone_id" disabled aria-label="whatsapp_id">
-                </div>
-
-                <div class="field">
-                    <label>Preview</label>
-                    <div class="ui toggle checkbox">
-                        <input type="checkbox" aria-label="compress" v-model="avatar_is_preview">
-                        <label>Check for small size image</label>
-                    </div>
-                </div>
-
-                <div class="field">
-                    <label>Community</label>
-                    <div class="ui toggle checkbox">
-                        <input type="checkbox" aria-label="compress" v-model="avatar_is_community">
-                        <label>Check is it's community image</label>
-                    </div>
-                </div>
-
-                <button type="button" class="ui primary button" :class="{'loading': avatar_loading}"
-                        @click="avatarProcess">
-                    Search
-                </button>
-            </form>
-
-            <div v-if="avatar_image != null" class="center">
-                <img :src="avatar_image" alt="profile picture" style="padding-top: 10px; max-height: 200px">
-            </div>
-        </div>
-    </div>
-
-
 </div>
 <script>
     window.TYPEGROUP = "g.us";
@@ -296,7 +199,9 @@
     import MessageUpdate from "./components/MessageUpdate.js";
     import MessageReact from "./components/MessageReact.js";
     import MessageRevoke from "./components/MessageRevoke.js";
+    import AccountAvatar from "./components/AccountAvatar.js";
     import AccountUserInfo from "./components/AccountUserInfo.js";
+    import AccountGroup from "./components/AccountGroup.js";
 
     const showErrorInfo = (message) => {
         $('body').toast({
@@ -419,81 +324,6 @@
         }
     }
 
-    const userGroups = {
-        data() {
-            return {
-                data_groups: []
-            }
-        },
-        methods: {
-            async groupModal() {
-                try {
-                    this.dtClear()
-                    await this.groupApi();
-                    $('#modalUserGroup').modal('show');
-                    this.dtRebuild()
-                    showSuccessInfo("Groups fetched")
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-            dtClear() {
-                $('#user_groups_table').DataTable().destroy();
-            },
-            dtRebuild() {
-                $('#user_groups_table').DataTable({
-                    "pageLength": 100,
-                    "reloadData": true,
-                }).draw();
-            },
-            async handleLeaveGroup(group_id) {
-                try {
-                    const ok = confirm("Are you sure to leave this group?");
-                    if (!ok) return;
-
-                    await this.leaveGroupApi(group_id);
-                    this.dtClear()
-                    await this.groupApi();
-                    this.dtRebuild()
-                    showSuccessInfo("Group left")
-                } catch (err) {
-                    showErrorInfo(err)
-                }
-            },
-            leaveGroupApi(group_id) {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        let payload = new FormData();
-                        payload.append("group_id", group_id)
-                        await http.post(`/group/leave`, payload)
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            },
-            groupApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        let response = await http.get(`/user/my/groups`)
-                        this.data_groups = response.data.results.data;
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            }
-        }
-    }
-
     const userPrivacy = {
         data() {
             return {
@@ -528,66 +358,11 @@
         }
     }
 
-    const userAvatar = {
-        data() {
-            return {
-                avatar_type: 'user',
-                avatar_phone: '',
-                avatar_image: null,
-                avatar_loading: false,
-                avatar_is_preview: false,
-                avatar_is_community: false,
-            }
-        },
-        computed: {
-            avatar_phone_id() {
-                return this.avatar_type === 'user' ? `${this.avatar_phone}@${this.type_user}` : `${this.avatar_phone}@${this.type_group}`
-            }
-        },
-        methods: {
-            async avatarModal() {
-                this.avatarReset();
-                $('#modalUserAvatar').modal('show');
-            },
-            async avatarProcess() {
-                try {
-                    this.avatar_loading = true;
-                    await this.avatarApi();
-                    this.avatar_loading = false;
-                    showSuccessInfo("Avatar fetched")
-                } catch (err) {
-                    this.avatar_loading = false;
-                    showErrorInfo(err)
-                }
-            },
-            avatarApi() {
-                return new Promise(async (resolve, reject) => {
-                    try {
-                        let response = await http.get(`/user/avatar?phone=${this.avatar_phone_id}&is_preview=${this.avatar_is_preview}&is_community=${this.avatar_is_community}`)
-                        this.avatar_image = response.data.results.url;
-                        resolve()
-                    } catch (error) {
-                        if (error.response) {
-                            reject(error.response.data.message)
-                        } else {
-                            reject(error.message)
-                        }
-                    }
-                })
-            },
-            avatarReset() {
-                this.avatar_phone = '';
-                this.avatar_image = null;
-                this.avatar_type = 'user';
-            }
-        }
-    }
-
     Vue.createApp({
         components: {
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
-            AccountUserInfo,
+            AccountAvatar, AccountUserInfo, AccountGroup,
         },
         delimiters: ['[[', ']]'],
         data() {
@@ -634,16 +409,9 @@
                 console.error('Your browser does not support WebSockets');
             }
         },
-        methods: {
-            formatDate: function (value) {
-                if (!value) return ''
-                const tanggal = moment(value)
-                return tanggal.format('LLL');
-            }
-        },
         mixins: [
             login, logout, reconnect,
-            userGroups, userPrivacy, userAvatar
+            userPrivacy
         ]
     }).mount('#app')
 </script>