diff --git a/public/package.json b/public/package.json
index adc23d4..3715c2a 100644
--- a/public/package.json
+++ b/public/package.json
@@ -16,7 +16,8 @@
   "author": "Thuan Envity",
   "dependencies": {
     "axios": "^0.19.0",
-    "bootstrap": "^4.4.0",
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.1.0",
     "core-js": "^3.3.2",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
diff --git a/public/src/api/service.api.js b/public/src/api/service.api.js
index e135777..757638d 100644
--- a/public/src/api/service.api.js
+++ b/public/src/api/service.api.js
@@ -8,17 +8,38 @@ import axios from "axios";
 const URL_SERVER = process.env.VUE_APP_URL_SERVER;
 export default {
     registerUser: async function (data) {
-        return await axios({
+        return axios({
             method: "POST",
             url: `${URL_SERVER}/auth/register`,
             data: data
         });
     },
     loginUser: async function (data) {
-        return await axios({
+        return axios({
             method: "POST",
             url: `${URL_SERVER}/auth/login`,
             data: data
         });
+    },
+    getAllUsers: async function(params){
+        return axios({
+            method: "GET",
+            url: `${URL_SERVER}/user/getAllUsers`,
+            params: params
+        });
+    },
+    getAllRooms: async function(params){
+        return axios({
+            method: "GET",
+            url: `${URL_SERVER}/room/getAllRooms`,
+            params: params
+        });
+    },
+    createRoom: async function(data){
+        return axios({
+            method: "POST",
+            url: `${URL_SERVER}/room/createRoom`,
+            data: data
+        });
     }
 }
\ No newline at end of file
diff --git a/public/src/components/auth/Login.vue b/public/src/components/auth/Login.vue
index 6a2b081..32f79f9 100644
--- a/public/src/components/auth/Login.vue
+++ b/public/src/components/auth/Login.vue
@@ -67,15 +67,18 @@
             async handleSubmit() {
                 this.errors = [];
                 if (this.username && this.password) {
-                    await api
+                    return await api
                         .loginUser({username: this.username, password: this.password})
                         .then(async res => {
-                            console.log(res);
                             if (res.status === 200) {
                                 localStorage.setItem("authToken", res.data.token);
                                 setAuthToken(res.data.token);
                                 this.$router.push({name: "Home"});
                             }
+                        })
+                        .catch(error =>{
+                            console.log(error);
+                            console.log('login fail!!!');
                         });
                 }
             }
diff --git a/public/src/components/auth/Register.vue b/public/src/components/auth/Register.vue
index d09f5d0..b4cbe50 100644
--- a/public/src/components/auth/Register.vue
+++ b/public/src/components/auth/Register.vue
@@ -56,10 +56,9 @@
             async handleSubmit() {
                 this.errors = [];
                 if (this.username && this.password) {
-                    await api
+                    return await api
                         .registerUser({username: this.username, password: this.password})
                         .then(async res => {
-                            console.log(res.status);
                             if (res.status === 200) {
                                 localStorage.setItem("authToken", res.data.token);
                                 setAuthToken(res.data.token);
diff --git a/public/src/components/room/Conservation.vue b/public/src/components/room/Conversation.vue
similarity index 79%
rename from public/src/components/room/Conservation.vue
rename to public/src/components/room/Conversation.vue
index 1bd7c10..9cd1df0 100644
--- a/public/src/components/room/Conservation.vue
+++ b/public/src/components/room/Conversation.vue
@@ -17,7 +17,21 @@
 
 <script>
     export default {
-        name: "Conservation",
+        name: "Conversation",
+        props: {
+            conversation: {
+                type: Object,
+                required: true,
+                default: function () {
+                    return {
+                        name: '',
+                        icon: '',
+                        type: 0,
+                        content: []
+                    }
+                }
+            }
+        },
         data() {
             return {
                 listMessage: []
@@ -33,7 +47,7 @@
                 });
                 if (parseInt(newPost.content)) {
                     for (let index = 0; index < parseInt(newPost.content); index++) {
-                        if (index > 5) {
+                        if (index > 10) {
                             break;
                         } else {
                             this.listMessage.push({
@@ -68,9 +82,10 @@
         border: 1px solid #cccccc;
         border-radius: 0px 20px 20px 0px;
         border-left: none;
-        padding: 10px;
-        text-align: center;
+        padding: 9.5px;
         background: #f1f1f1;
+        white-space: pre-line;
+        text-align: left;
     }
 
     .img-icon-user-conversation-right {
@@ -81,7 +96,9 @@
         float: right;
         border-radius: 20px 0px 0px 20px;
         border-right: none;
-        background: #fffce1;
+        background: #f1f1f1;
+        padding: 8px;
+        margin-top: 1px;
     }
 
     .div-content-message-right {
diff --git a/public/src/components/room/ListFriend.vue b/public/src/components/room/ListFriend.vue
index 2a31025..a36141c 100644
--- a/public/src/components/room/ListFriend.vue
+++ b/public/src/components/room/ListFriend.vue
@@ -2,7 +2,7 @@
     <div class="page list-room">
         <table class="table-full-width">
             <tbody>
-            <tr v-for="friend in listFriend" :key="friend.id">
+            <tr v-for="(friend, index) in listFriend" :key="index">
                 <td>
                     <button type="button"
                             class="btn btn-light btn-block btn-friend-in-list"
@@ -10,7 +10,7 @@
                         <img src="../../assets/icon_user.png"
                              alt="icon-room"
                              class="icon-friend-in-list"/>
-                        <span>{{ friend.user_name }}</span>
+                        <span>{{ friend.username }}</span>
                     </button>
                 </td>
             </tr>
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+    import api from '../../api/service.api';
     export default {
         name: "ListFriend",
         props: ["message"],
@@ -27,115 +28,39 @@
             return {
                 users: [],
                 errors: [],
-                listFriend: [
-                    {
-                        id: 1,
-                        user_name: "name 1",
-                        user_icon: ""
-                    },
-                    {
-                        id: 2,
-                        user_name: "name 2",
-                        user_icon: ""
-                    },
-                    {
-                        id: 3,
-                        user_name: "name 3",
-                        user_icon: ""
-                    },
-                    {
-                        id: 4,
-                        user_name: "name 4",
-                        user_icon: ""
-                    },
-                    {
-                        id: 5,
-                        user_name: "name 5",
-                        user_icon: ""
-                    },
-                    {
-                        id: 6,
-                        user_name: "name 6",
-                        user_icon: ""
-                    },
-                    {
-                        id: 7,
-                        user_name: "name 7",
-                        user_icon: ""
-                    },
-                    {
-                        id: 8,
-                        user_name: "name 8",
-                        user_icon: ""
-                    },
-                    {
-                        id: 9,
-                        user_name: "name 9",
-                        user_icon: ""
-                    },
-                    {
-                        id: 10,
-                        user_name: "name 10",
-                        user_icon: ""
-                    },
-                    {
-                        id: 11,
-                        user_name: "name 11",
-                        user_icon: ""
-                    },
-                    {
-                        id: 12,
-                        user_name: "name 12",
-                        user_icon: ""
-                    },
-                    {
-                        id: 13,
-                        user_name: "name 13",
-                        user_icon: ""
-                    },
-                    {
-                        id: 14,
-                        user_name: "name 14",
-                        user_icon: ""
-                    },
-                    {
-                        id: 15,
-                        user_name: "name 15",
-                        user_icon: ""
-                    },
-                    {
-                        id: 16,
-                        user_name: "name 16",
-                        user_icon: ""
-                    },
-                    {
-                        id: 17,
-                        user_name: "name 17",
-                        user_icon: ""
-                    },
-                    {
-                        id: 18,
-                        user_name: "name 18",
-                        user_icon: ""
-                    },
-                    {
-                        id: 19,
-                        user_name: "name 19",
-                        user_icon: ""
-                    },
-                    {
-                        id: 20,
-                        user_name: "name 20",
-                        user_icon: ""
-                    }
-                ]
+                listFriend: []
             };
         },
-        computed: {},
+        computed: {
+        },
+        mounted(){
+            this.getListFriend();
+        },
         methods: {
             chooseFriend(friend) {
-                let roomConservation = friend.id;
-                this.$emit("chooseFriend", roomConservation);
+                //call API to get content
+
+                this.$emit("chooseFriend", {
+                    type: 1,
+                    conversation: {
+                        icon: friend.social.image,
+                        name: friend.username,
+                        content: []
+                    }
+                });
+            },
+            async getListFriend(currentUser){
+                return await api
+                    .getAllUsers(currentUser)
+                    .then(async res => {
+                        if( res.status === 200 ){
+                            this.listFriend = res.data.users;
+                        }
+                    })
+                    .catch(error =>{
+                        console.log(error);
+                        console.log('GET listFriend Fail!');
+                    });
             }
         }
     };
diff --git a/public/src/components/room/ListRoom.vue b/public/src/components/room/ListRoom.vue
index 9c9eb81..0b98c1b 100644
--- a/public/src/components/room/ListRoom.vue
+++ b/public/src/components/room/ListRoom.vue
@@ -2,7 +2,7 @@
     <div class="page list-room">
         <table class="table-full-width">
             <tbody>
-            <tr v-for="room in listRoom" :key="room.id">
+            <tr v-for="(room, index) in listRoom" :key="index">
                 <td>
                     <button type="button"
                             class="btn btn-light btn-block btn-room-in-list"
@@ -10,7 +10,7 @@
                         <img src="../../assets/icon_group.png"
                              alt="icon-room"
                              class="icon-room-in-list"/>
-                        <span>{{ room.room_name }}</span>
+                        <span>{{ room.name }}</span>
                     </button>
                 </td>
             </tr>
@@ -19,6 +19,7 @@
     </div>
 </template>
 <script>
+    import api from '../../api/service.api';
     export default {
         name: "ListRoom",
         props: ["message"],
@@ -26,35 +27,39 @@
             return {
                 rooms: [],
                 errors: [],
-                listRoom: [
-                    {
-                        id: 1,
-                        room_name: "room 1",
-                        icon: ""
-                    },
-                    {
-                        id: 2,
-                        room_name: "room 2",
-                        icon: ""
-                    },
-                    {
-                        id: 3,
-                        room_name: "room 3",
-                        icon: ""
-                    },
-                    {
-                        id: 4,
-                        room_name: "room 4",
-                        icon: ""
-                    }
-                ]
+                listRoom: []
             };
         },
         computed: {},
+        mounted(){
+            this.getListRoom();
+        },
         methods: {
             chooseRoom(room) {
-                let roomConservation = room.id;
-                this.$emit("chooseRoom", roomConservation);
+                //call API to get content
+
+                this.$emit("chooseRoom", {
+                    type: 2,
+                    conversation: {
+                        icon: room.room_icon,
+                        name: room.room_name,
+                        content: []
+                    }
+                });
+            },
+            async getListRoom(currentUser){
+                return await api
+                    .getAllRooms(currentUser)
+                    .then(async res => {
+                        if( res.status === 200 ){
+                            this.listRoom = res.data.rooms;
+                            console.log(res);
+                        }
+                    })
+                    .catch(error =>{
+                        console.log(error);
+                        console.log('GET listRoom Fail!');
+                    });
             }
         }
     };
diff --git a/public/src/main.js b/public/src/main.js
index 3760845..eba6009 100644
--- a/public/src/main.js
+++ b/public/src/main.js
@@ -10,6 +10,10 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/js/dist/modal'
 import 'bootstrap/js/dist/tooltip'
 import 'bootstrap/scss/bootstrap.scss'
+import BootstrapVue from 'bootstrap-vue'
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+Vue.use(BootstrapVue);
 
 
 Vue.config.productionTip = false
diff --git a/public/src/views/About.vue b/public/src/views/About.vue
index e9ff4ae..17b9b62 100644
--- a/public/src/views/About.vue
+++ b/public/src/views/About.vue
@@ -1,8 +1,23 @@
 <template>
-    <div class="about">About</div>
+    <div class="about">
+        <div>
+            <b-button-toolbar aria-label="Toolbar with button groups and input groups" size="sm" justify>
+                <b-button-group size="sm" class="mr-1">
+                    <b-button>Save</b-button>
+                    <b-button>Cancel</b-button>
+                </b-button-group>
+                <b-input-group size="sm" prepend="$" append=".00">
+                    <b-form-input value="100" class="text-right"></b-form-input>
+                </b-input-group>
+            </b-button-toolbar>
+        </div>
+    </div>
 </template>
 <script>
     export default {
-        name: 'About'
+        name: 'About',
+        methods:{
+
+        }
     }
 </script>
\ No newline at end of file
diff --git a/public/src/views/Home.vue b/public/src/views/Home.vue
index 3835d25..2a14e53 100644
--- a/public/src/views/Home.vue
+++ b/public/src/views/Home.vue
@@ -24,11 +24,17 @@
                 <div class="list-tab">
                     <button v-for="tab in tabs"
                             :key="tab"
-                            @click="selected = tab"
-                            :class="['tab-btn', { active: selected === tab }]">
+                            @click="currentTab = tab"
+                            :class="['tab-btn', { active: currentTab === tab }]">
                     {{ tab }}</button>
                     <div id="scrollbar-list-room" class="scrollbar scrollbar-dusty-grass">
-                        <component :is="selected"></component>
+                        <keep-alive>
+                            <component :is="currentTab"
+                                       @chooseRoom="prepareForConversation"
+                                       @chooseFriend="prepareForConversation"
+                                       :ref="currentTab"
+                            ></component>
+                        </keep-alive>
                     </div>
                 </div>
             </div>
@@ -43,14 +49,21 @@
                 </div>
                 <div id="scrollbar-list-conversation"
                      class="content-conversation scrollbar scrollbar-near-moon">
-                    <Conservation ref="conversation"></Conservation>
+<!--                    <div v-if="isLoadingConversation" class="d-flex justify-content-center mb-3">-->
+<!--                        <b-spinner variant="success" label="Spinning"></b-spinner>-->
+<!--                    </div>-->
+                    <Conservation ref="conversation"
+                                  :conversation="conversation"
+                    ></Conservation>
                 </div>
                 <div id="input-message" class="input-message position-fixed">
                     <div class="input-group">
                     <textarea class="form-control custom-control textarea-send-message"
-                              rows="2"
+                              rows="1"
                               style="resize:none"
-                              v-model="post.content"></textarea>
+                              v-model="post.content"
+                              v-on:keyup.enter="sendPost"
+                    ></textarea>
                         <span class="btn-send-message">
                               <button class="btn btn-default p-0" type="button" @click="sendPost">
                                     <img src="../assets/icon_send.png"
@@ -67,7 +80,7 @@
 <script>
     import ListRoom from "../components/room/ListRoom";
     import ListFriend from "../components/room/ListFriend";
-    import Conservation from "../components/room/Conservation";
+    import Conservation from "../components/room/Conversation";
     import $ from "jquery";
 
     export default {
@@ -83,13 +96,20 @@
         data() {
             return {
                 tabs: ["ListFriend", "ListRoom"],
-                selected: "ListFriend",
+                currentTab: "ListFriend",
                 post: {
                     content: '',
                     user: 'user 0',
                     date: '2019-29-11',
                     roomId: '1'
                 },
+                conversation:{
+                    name: '',
+                    icon: '',
+                    type: 0,
+                    content: []
+                },
+                isLoadingConversation: false,
             };
         },
         methods: {
@@ -101,16 +121,30 @@
                 $("#scrollbar-list-room").css("height", heightScrollbarListRoom + "px");
                 $("#scrollbar-list-conversation").css("height", heightScrollbarListConversation + "px");
             },
-            sendPost() {
-                if (this.post.content !== '') {
-                    if (this.$refs.conversation.updateConversation(this.post)) {
-                        this.post.content = '';
-                        setTimeout(function () {
-                            $("#scrollbar-list-conversation").scrollTop(10000);
-                        }, 100);
+            sendPost(e){
+                if (e.keyCode === 13 && !e.shiftKey){
+                    if (this.post.content !== '') {
+                        if (this.$refs.conversation.updateConversation(this.post)) {
+                            this.resetPost();
+                        }
                     }
                 }
-            }
+            },
+            resetPost(){
+                this.post.content = '';
+                setTimeout(function () {
+                    $("#scrollbar-list-conversation").scrollTop(10000);
+                }, 100);
+            },
+            async prepareForConversation(data){
+                this.isLoadingConversation = true;
+                //call api using await
+                this.conversation.type = data.type;
+                this.conversation.name = data.conversation.name;
+                this.conversation.icon = data.conversation.icon;
+                this.conversation.content = data.conversation.content;
+                return false;
+            },
         }
     };
 </script>
@@ -243,6 +277,7 @@
 
     .scrollbar {
         overflow-y: scroll;
+        scroll-behavior: smooth;
     }
 
     .textarea-send-message {