diff --git a/public/package.json b/public/package.json
index f7872ce..c5b157b 100644
--- a/public/package.json
+++ b/public/package.json
@@ -16,9 +16,11 @@
   "author": "Thuan Envity",
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.4.0",
     "core-js": "^3.3.2",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "popper.js": "^1.16.0",
     "socket.io-client": "^2.3.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
@@ -31,6 +33,9 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
+    "jquery": "^3.4.1",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
diff --git a/public/src/App.vue b/public/src/App.vue
index b2aca22..52de933 100644
--- a/public/src/App.vue
+++ b/public/src/App.vue
@@ -32,6 +32,7 @@ export default {
     // this.socket.on("disconnect", () => {
     //   this.rooms = [];
     // });
+    document.body.style.overflowY = "hidden";
   },
   methods: {
     connect() {
@@ -52,4 +53,8 @@ export default {
   }
 };
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+  .body{
+    overflow-y: hidden;
+  }
+</style>
diff --git a/public/src/assets/icon_group.png b/public/src/assets/icon_group.png
new file mode 100644
index 0000000..4fb4930
Binary files /dev/null and b/public/src/assets/icon_group.png differ
diff --git a/public/src/assets/icon_search.png b/public/src/assets/icon_search.png
new file mode 100644
index 0000000..b1c328b
Binary files /dev/null and b/public/src/assets/icon_search.png differ
diff --git a/public/src/assets/icon_send.png b/public/src/assets/icon_send.png
new file mode 100644
index 0000000..127e78a
Binary files /dev/null and b/public/src/assets/icon_send.png differ
diff --git a/public/src/assets/icon_user.png b/public/src/assets/icon_user.png
new file mode 100644
index 0000000..9f328cb
Binary files /dev/null and b/public/src/assets/icon_user.png differ
diff --git a/public/src/components/HelloWorld.vue b/public/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/public/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/public/src/components/auth/Login.vue b/public/src/components/auth/Login.vue
index 725aaef..b67015b 100644
--- a/public/src/components/auth/Login.vue
+++ b/public/src/components/auth/Login.vue
@@ -1,48 +1,40 @@
 <template>
   <div>
-    <section>
-      <div>
-        <span>Sign In</span>
-      </div>
-      <div>
-        <form @submit.prevent="handleSubmit" class="form">
-          <span>
-            <ion-icon name="rocket" class="icon"></ion-icon>We are excited to
-            see you again!
-          </span>
-          <br />
-          <div class="form-input">
-            <input
-              type="text"
-              name="username"
-              class="form-control"
-              placeholder="Enter your username"
-              required
-            />
-            <label for="username">Username</label>
-          </div>
-
-          <div class="form-input">
-            <input
-              type="password"
-              name="password"
-              class="form-control"
-              placeholder="Enter your password"
-              pattern=".{5,15}"
-              title="Password must be between 5 and 15 characters"
-              required
-            />
-            <label for="password">Password</label>
-          </div>
-          <div class="form-input">
-            <span>Do you have an account?</span>
-            <br />
-            <router-link :to="{ name: 'Register' }">Register</router-link>
-          </div>
-          <button type="submit" class="form-submit">Login</button>
-        </form>
-      </div>
-    </section>
+    <div class="container login-container">
+        <div class="col-md-5 login-form-1">
+        <img alt="icon-user" src="./user.jpg" class="user-icon">
+          <form @submit.prevent="handleSubmit" class="form">
+            <div class="form-group">
+              <input
+                  type="text"
+                  name="username"
+                  class="form-control"
+                  placeholder="Enter your username"
+                  required
+              />
+            </div>
+            <div class="form-group">
+              <input
+                  type="password"
+                  name="password"
+                  class="form-control"
+                  placeholder="Enter your password"
+                  pattern=".{5,15}"
+                  title="Password must be between 5 and 15 characters"
+                  required
+              />
+            </div>
+            <div class="form-group">
+              <button type="submit" class="btnSubmit">Login</button>
+            </div>
+            <div class="form-group">
+              <span>Don't have an account? </span>
+              <router-link :to="{ name: 'Register' }">Sign up</router-link>
+              <span> here</span>
+            </div>
+          </form>
+        </div>
+    </div>
   </div>
 </template>
 <script>
@@ -90,3 +82,47 @@ export default {
   }
 };
 </script>
+<style lang="scss" scoped>
+  .container{
+    margin: auto;
+  }
+  .login-container{
+    margin-top: 5%;
+    margin-bottom: 5%;
+    text-align: center;
+  }
+  .login-form-1{
+    padding: 5%;
+    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
+    margin: auto;
+    margin-top: 5%;
+  }
+  .login-form-1 h3{
+    text-align: center;
+    color: #333;
+  }
+  .login-container form{
+    padding: 10%;
+  }
+  .btnSubmit
+  {
+    width: 50%;
+    border-radius: 1rem;
+    padding: 1.5%;
+    border: none;
+    cursor: pointer;
+  }
+  .login-form-1 .btnSubmit{
+    font-weight: 600;
+    color: #fff;
+    background-color: #0062cc;
+  }
+  .login-form-1 .ForgetPwd{
+    color: #0062cc;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .user-icon{
+    max-width: 150px;
+  }
+</style>
diff --git a/public/src/components/auth/Register.vue b/public/src/components/auth/Register.vue
index 61112bb..ab91978 100644
--- a/public/src/components/auth/Register.vue
+++ b/public/src/components/auth/Register.vue
@@ -1,43 +1,48 @@
 <template>
-  <div class="page login">
-    <section>
-      <div>Register Here</div>
-      <div class="section-content">
-        <p>We hope will you enjoy our application!</p>
-      </div>
-      <div>
+  <div>
+    <div class="container login-container">
+      <div class="col-md-5 login-form-1">
+        <img alt="icon-user" src="./user.jpg" class="user-icon">
         <form @submit.prevent="handleSubmit" class="form">
-          <span>We always welcome new Envity</span>
-          <br />
-          <div class="form-input-group">
+          <div class="form-group">
             <input
-              type="text"
-              name="username"
-              class=""
-              placeholder="Enter your username"
-              required
+                    type="text"
+                    name="username"
+                    class="form-control"
+                    placeholder="Enter your username"
+                    required
             />
-            <label for="username">Username</label>
           </div>
-          <div class="form-input-group">
+          <div class="form-group">
             <input
-              type="password"
-              name="password"
-              class=""
-              placeholder="Enter your password"
-              required
+                    type="password"
+                    name="password"
+                    class="form-control"
+                    placeholder="Enter your password"
+                    pattern=".{5,15}"
+                    title="Password must be between 5 and 15 characters"
+                    required
             />
-            <label for="password">Password</label>
           </div>
-          <div class="form-input-group">
-            <span>Already have an account?</span>
-            <br />
-            <router-link :to="{ name: 'Login' }">Login</router-link>
+          <div class="form-group">
+            <input
+                    type="password"
+                    name="password"
+                    class="form-control"
+                    placeholder="Confirm your password"
+                    pattern=".{5,15}"
+                    title="Password must be between 5 and 15 characters"
+                    required
+            />
           </div>
-          <button type="submit" class="form-submit">Register</button>
+          <button type="submit"  class="btnSubmit">Register</button>
         </form>
+        <div class="form-input-group">
+          <span>Already have an account? </span>
+          <router-link :to="{ name: 'Login' }">Sign in</router-link>
+        </div>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
@@ -52,6 +57,50 @@ export default {
 		errors: []
 	};
   },
-  
+
 };
 </script>
+<style lang="scss" scoped>
+  .container{
+    margin: auto;
+  }
+  .login-container{
+    margin-top: 5%;
+    margin-bottom: 5%;
+    text-align: center;
+  }
+  .login-form-1{
+    padding: 5%;
+    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
+    margin: auto;
+    margin-top: 2%;
+  }
+  .login-form-1 h3{
+    text-align: center;
+    color: #333;
+  }
+  .login-container form{
+    padding: 10%;
+  }
+  .btnSubmit
+  {
+    width: 50%;
+    border-radius: 1rem;
+    padding: 1.5%;
+    border: none;
+    cursor: pointer;
+  }
+  .login-form-1 .btnSubmit{
+    font-weight: 600;
+    color: #fff;
+    background-color: #0062cc;
+  }
+  .login-form-1 .ForgetPwd{
+    color: #0062cc;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .user-icon{
+    max-width: 150px;
+  }
+</style>
diff --git a/public/src/components/auth/user.jpg b/public/src/components/auth/user.jpg
new file mode 100644
index 0000000..84a94ef
Binary files /dev/null and b/public/src/components/auth/user.jpg differ
diff --git a/public/src/components/icon/icon_group.png b/public/src/components/icon/icon_group.png
new file mode 100644
index 0000000..4fb4930
Binary files /dev/null and b/public/src/components/icon/icon_group.png differ
diff --git a/public/src/components/icon/icon_user.png b/public/src/components/icon/icon_user.png
new file mode 100644
index 0000000..9f328cb
Binary files /dev/null and b/public/src/components/icon/icon_user.png differ
diff --git a/public/src/components/room/Conservation.vue b/public/src/components/room/Conservation.vue
new file mode 100644
index 0000000..92aa700
--- /dev/null
+++ b/public/src/components/room/Conservation.vue
@@ -0,0 +1,95 @@
+<template>
+    <div class="component-conversation">
+        <div v-for="mess in listMessage"
+             :key="mess.id"
+             class="div-content-message"
+             :class="[(mess.user === 'user 0') ? 'div-content-message-right' : '']">
+            <img src="../icon/icon_user.png"
+                 alt="icon-user-conversation"
+                 class="navbar-toggler-icon img-icon-user-conversation"
+                 :class="[(mess.user === 'user 0') ? 'img-icon-user-conversation-right' : '']">
+            <span class="span-content-message"
+                  :class="[(mess.user === 'user 0') ? 'span-content-message-right' : '']"
+            >{{ mess.content }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "Conservation",
+        data(){
+            return{
+                listMessage: [
+                    {id:1, content:'aaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:2, content:'aaaaadadadadadaa', date: '2019-29-11', user: 'user 1'},
+                    {id:3, content:'aaaafaafafaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:4, content:'aaaddddddddddddaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:5, content:'aaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:6, content:'aaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:7, content:'aafafafafafaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:8, content:'aaaafafaa', date: '2019-29-11', user: 'user 1'},
+                    {id:9, content:'afaf', date: '2019-29-11', user: 'user 0'},
+                    {id:10, content:'aaaafafaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:11, content:'aaaaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:12, content:'fa', date: '2019-29-11', user: 'user 1'},
+                    {id:13, content:'.', date: '2019-29-11', user: 'user 1'},
+                    {id:14, content:'aaaafafaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:16, content:'aaafafaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:17, content:'aaafaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:18, content:'aaaaafaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:19, content:'aaaaaadada a', date: '2019-29-11', user: 'user 0'},
+                    {id:20, content:'aaaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:21, content:'aaaaadadaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:22, content:'aaaadadadaa', date: '2019-29-11', user: 'user 1'},
+                    {id:23, content:'aaaaadadaa', date: '2019-29-11', user: 'user 1'},
+                    {id:24, content:'aaadadadadaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:25, content:'aaaadadadadadadadaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:26, content:'aaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:27, content:'aaaaadadadaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:28, content:'aaadadadadaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:29, content:'aaaaadadaa', date: '2019-29-11', user: 'user 1'},
+                    {id:30, content:'aaadadadaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:31, content:'aaaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:32, content:'aaaadadadadadaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:33, content:'aaaadadadaaaa', date: '2019-29-11', user: 'user 1'},
+                    {id:34, content:'aaaaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:35, content:'aaaadadadadadaaa', date: '2019-29-11', user: 'user 0'},
+                    {id:36, content:'aaaaaadadadadadadadadaa', date: '2019-29-11', user: 'user 0'},
+                ],
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .img-icon-user-conversation{
+        margin-right: 5px;
+        margin-top: 0px;
+    }
+    .div-content-message{
+        margin-top: 17.5px;
+        margin-bottom: 17.5px;
+        width: 100%;
+        clear: both;
+    }
+    .span-content-message{
+        border: 1px solid #cccccc;
+        border-radius: 0px 20px 20px 0px;
+        border-left: none;
+        padding: 10px;
+        text-align: center;
+        background: #f1f1f1;
+    }
+    .img-icon-user-conversation-right{
+        float: right;
+    }
+    .span-content-message-right{
+        float: right;
+        border-radius: 20px 0px 0px 20px;
+        border-right: none;
+        background: #fffce1;
+    }
+    .div-content-message-right{
+    }
+</style>
\ No newline at end of file
diff --git a/public/src/components/room/ListFriend.vue b/public/src/components/room/ListFriend.vue
new file mode 100644
index 0000000..e1a5458
--- /dev/null
+++ b/public/src/components/room/ListFriend.vue
@@ -0,0 +1,151 @@
+<template>
+    <div class="page list-room">
+        <table class="table-full-width">
+            <tbody>
+            <tr v-for="friend in listFriend" :key="friend.id">
+                <td>
+                    <button type="button" class="btn btn-light btn-block btn-friend-in-list" @click="chooseFriend(friend)">
+                        <img src="../icon/icon_user.png" alt="icon-room" class="icon-friend-in-list">
+                        <span>{{ friend.user_name }}</span>
+                    </button>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "ListFriend",
+        props: ["message"],
+        data: function() {
+            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: ''
+                    },
+                ]
+            };
+        },
+        computed: {},
+        methods: {
+            chooseFriend(friend){
+                let roomConservation = friend.id;
+                this.$emit('chooseFriend', roomConservation);
+            }
+        }
+    };
+</script>
+<style lang="scss" scoped>
+    .table-full-width{
+        width: 100%;
+    }
+    .icon-friend-in-list{
+        width: 50px;
+        height: 50px;
+        margin-right: 5%;
+    }
+    .btn-friend-in-list{
+        text-align: left;
+    }
+</style>
\ No newline at end of file
diff --git a/public/src/components/room/ListRoom.vue b/public/src/components/room/ListRoom.vue
index 607df30..10d4510 100644
--- a/public/src/components/room/ListRoom.vue
+++ b/public/src/components/room/ListRoom.vue
@@ -1,24 +1,20 @@
 <template>
   <div class="page list-room">
-    <section class="section">
-      <div>
-        <span class="section_title">Room List</span>
-      </div>
-      <div class="rooms" v-if="rooms" v-show="rooms.length !== 0">
-        <div class="rooms_detail item">
-          Total Rooms: <span> {{ rooms.length }}</span>
-        </div>
-		<div class="list-room">
-			<ul>
-				<li v-for="room in rooms" :key="room.id">{{room.name}}</li>
-			</ul>
-		</div>
-      </div>
-    </section>
+        <table class="table-full-width">
+            <tbody>
+                <tr v-for="room in listRoom" :key="room.id">
+                    <td>
+                        <button type="button" class="btn btn-light btn-block btn-room-in-list" @click="chooseRoom(room)">
+                            <img src="../icon/icon_group.png" alt="icon-room" class="icon-room-in-list">
+                            <span>{{ room.room_name }}</span>
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
   </div>
 </template>
 <script>
-import axios from "axios";
 
 export default {
   name: "ListRoom",
@@ -26,10 +22,50 @@ export default {
   data: function() {
     return {
       rooms: [],
-      errors: []
+      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: ''
+          },
+      ]
     };
   },
   computed: {},
-  methods: {}
+  methods: {
+      chooseRoom(room){
+          let roomConservation = room.id;
+          this.$emit('chooseRoom', roomConservation);
+      }
+  }
 };
 </script>
+<style lang="scss" scoped>
+    .table-full-width{
+        width: 100%;
+    }
+    .icon-room-in-list{
+        width: 50px;
+        height: 50px;
+        margin-right: 5%;
+    }
+    .btn-room-in-list{
+        text-align: left;
+    }
+</style>
diff --git a/public/src/main.js b/public/src/main.js
index 0add49e..3760845 100644
--- a/public/src/main.js
+++ b/public/src/main.js
@@ -5,6 +5,11 @@ import axios from 'axios';
 // import io from 'socket.io-client';
 import setAuthToken from './utils/authToken';
 import moment from 'moment';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/js/dist/modal'
+import 'bootstrap/js/dist/tooltip'
+import 'bootstrap/scss/bootstrap.scss'
 
 
 Vue.config.productionTip = false
diff --git a/public/src/router.js b/public/src/router.js
index c0fc978..6ab0168 100644
--- a/public/src/router.js
+++ b/public/src/router.js
@@ -7,6 +7,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Login from './components/auth/Login';
 import Register from './components/auth/Register';
+
 Vue.use(Router);
 
 const router = new Router({
@@ -36,7 +37,7 @@ const router = new Router({
         {
             path: '*',
             component: () => import('@/components/error/Error.vue')
-        }
+        },
     ]
 });
 
diff --git a/public/src/views/Home.vue b/public/src/views/Home.vue
index 59f15fd..21bc7f4 100644
--- a/public/src/views/Home.vue
+++ b/public/src/views/Home.vue
@@ -1,10 +1,184 @@
 <template>
-    <div class="home">
-        <h1>Home</h1>
+    <div class="container-fluid">
+        <div class="row content">
+            <div class="col-sm-3 sidenav list-room-and-user position-fixed">
+                <div class="content-user">
+                    <img src="../assets/icon_user.png" alt="icon-user" class="icon-user">
+                    <span>USER NAME</span>
+                </div>
+                <div class="input-group">
+                    <input type="text" class="form-control" placeholder="search rooms or friends">
+                    <span class="input-group-btn">
+                      <button class="btn btn-default p-0" type="button">
+                        <img src="../assets/icon_search.png" alt="icon-search" class="navbar-toggler-icon">
+                      </button>
+                    </span>
+                </div>
+                <hr>
+                <div class="list-tab">
+                    <button v-for="tab in tabs" :key="tab" @click="selected = tab" :class="['tab-btn', { active: selected === tab }]">
+                        {{ tab }}
+                    </button>
+                    <div id="scrollbar-list-room" class="scrollbar scrollbar-dusty-grass">
+                        <component :is="selected"></component>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-sm-9 position-absolute conversation">
+                <div id="content-group" class="content-group position-fixed">
+                    <img src="../assets/icon_group.png" alt="icon-group" class="icon-group">
+                    <span>ROOM NAME</span>
+                    <hr>
+                </div>
+                <div id="scrollbar-list-conversation" class="content-conversation scrollbar scrollbar-near-moon">
+                    <Conservation></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" style="resize:none"></textarea>
+                        <span class="btn-send-message">
+                          <button class="btn btn-default p-0" type="button">
+                            <img src="../assets/icon_send.png" alt="icon-send-message" class="navbar-toggler-icon icon-send-message">
+                          </button>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
+import ListRoom from '../components/room/ListRoom';
+import ListFriend from '../components/room/ListFriend';
+import Conservation from "../components/room/Conservation";
+import $ from 'jquery';
 export default {
-    name: 'Home'
+    name: 'Home',
+    components: {
+        ListRoom,
+        ListFriend,
+        Conservation
+    },
+    mounted() {
+        this.setScrollHeight(window.innerHeight);
+    },
+    data() {
+        return{
+            tabs: ["ListFriend", "ListRoom"],
+            selected: "ListFriend"
+        }
+    },
+    methods:{
+        setScrollHeight(screenHeight){
+            let heightScrollbarListConversation = screenHeight - $('#content-group').height() - $('#input-message').height() - 20;
+            let heightScrollbarListRoom = screenHeight - $('#scrollbar-list-room').offset().top - 20;
+            $('#scrollbar-list-room').css('height', heightScrollbarListRoom + 'px');
+            $('#scrollbar-list-conversation').css('height', heightScrollbarListConversation + 'px');
+        }
+    }
 }
 </script>
+<style lang="scss" scoped>
+    .row.content {height: 1500px}
+    .sidenav {
+        background-color: #f1f1f1;
+        height: 100%;
+    }
+    @media screen and (max-width: 767px) {
+        .sidenav {
+            height: auto;
+            padding: 15px;
+        }
+        .row.content {height: auto;}
+    }
+    .list-room-and-user{
+        min-width: 300px;
+    }
+    .navbar-toggler-icon{
+        width: 35px;
+        height: 35px;
+        margin-left: 5px;
+    }
+    .icon-group{
+        margin: 10px 10px 0px 10px;
+        width: 50px;
+        height: 50px;
+    }
+    .icon-user{
+        margin: 10px;
+        width: 50px;
+        height: 50px;
+    }
+    .tab-btn {
+        padding: 6px 10px;
+        background: #f1f1f1;
+        cursor: pointer;
+        border: 2px solid #cccccc;
+        outline: none;
+    }
+    .active {
+        border-bottom: 3px solid #f8f9fa;
+        background: #fcfcfc;
+    }
+    .tab {
+        border: 1px solid #ccc;
+        padding: 10px;
+    }
+    .conversation{
+        right: 10px;
+    }
+    .content-conversation{
+        position: relative;
+        margin-top: 80px;
+        height: 100%;
+        display: block;
+    }
+    .content-group{
+        width: 90%;
+    }
+    .input-message {
+        bottom: 2%;
+        width: 74%;
+    }
+    .icon-send-message{
+        width: 100%;
+        height: 100%;
+    }
+    .btn-send-message{
+        width: 70px;
+        height: 70px;
+    }
+    .scrollbar-near-moon::-webkit-scrollbar {
+        width: 12px;
+        background-color: #F5F5F5;
+    }
+    .scrollbar-near-moon::-webkit-scrollbar-thumb {
+        border-radius: 0px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+        background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
+        background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
+        background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
+    }
+    .scrollbar-dusty-grass::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+        background-color: #F5F5F5;
+        border-radius: 10px;
+    }
+    .scrollbar-dusty-grass::-webkit-scrollbar {
+        width: 5px;
+        background-color: #F5F5F5;
+    }
+    .scrollbar-dusty-grass::-webkit-scrollbar-thumb {
+        border-radius: 0px;
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+        background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
+        background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
+    }
+    .scrollbar{
+        overflow-y: scroll;
+    }
+    .textarea-send-message{
+        background: #f1f1f1;
+    }
+</style>