diff --git a/public/client.js b/public/client.js
index c789a41..dec8b4e 100644
--- a/public/client.js
+++ b/public/client.js
@@ -35,7 +35,7 @@ const joinRoom = (room) => {
     });
     $(".error").hide();
     $(`#${room_id}-msg`).attr("data-joined", 1);
-    $(`#${room_id}-msg,.write`).show();
+    $(`#${room_id}-msg`).show();
 }
 
 //requests server to leave a room
@@ -50,7 +50,7 @@ function leaveRoom(room) {
     $(".error").html('<span id="error">You haven\'t joined this room yet. <a onclick="joinRoom( \'' + room + '\' )" id="joinBtn" href="#">Join</a> to see the conversation.</span>');
 
     $(`#${room_id}-msg`).attr("data-joined", 0);
-    $(`#${room_id}-msg,.write`).hide();
+    $(`#${room_id}-msg`).hide();
     $(".error").show();
 }
 
@@ -83,7 +83,7 @@ const appendUserInfo = (room_name, description) => {
 
 // Appending the content
 const appendContentInfo = (room_name, online, data_joined) => {
-    const $write = $("#write");
+    emobox = document.getElementById(`emobox`).outerHTML;
     const $contentInfo = `
                             <div class='right' id='${room_name}-msg' data-joined='${data_joined}' style='display:none;'>
                                 <div class='top'><center id='online'><span>${room_name} Room</span>&nbsp;(<a href='#' onclick='leaveRoom("${room_name}")'>Leave room</a>)</center>
@@ -94,8 +94,17 @@ const appendContentInfo = (room_name, online, data_joined) => {
                                     <span></span>
                                 </div>
                                 <div class='chat active-chat' data-chat='person1'></div>
-                                <div class="write">
-                                    ${$write.html()}
+                                <div class="input-group write">
+                                  <textarea type="text" class="textarea form-control" placeholder="Message to ${room_name}..." data-active="lobby" rows="2"></textarea>
+                                  <div class="input-group-append">
+                                    <button class="btn smiley text-primary" type="button">
+                                      <i class="far fa-smile icon"></i>
+                                      ${emobox}
+                                    </button>
+                                    <button class="btn send text-primary" type="button">
+                                      <i class="fas fa-paper-plane icon"></i>
+                                    </button>
+                                  </div>
                                 </div>
                             </div>
                         `;
@@ -201,7 +210,7 @@ socket.on('Display Message', (data) => {
     div.setAttribute("data-chat", "person1")
     username.innerText = data.user;
     timestamp.innerText = hours + ":" + mins + ":" + secs + ", " + month + " " + day;
-    userMsg.innerHTML = p;
+    userMsg.innerHTML = p.replace(/\n/g, '<br>');
     if (class_name == 'self') {
         username.classList.add("text-secondary");
         timestamp.classList.add("text-secondary");
@@ -253,7 +262,6 @@ socket.on('room created other', (data) =>{
         const { description, room_name, online, online_users } = data;
         var date = new Date();
         var room_id = convertIntoId(room_name);
-        const $write = $("#write");
         const $userInfo = `
                             <li class='person' data-chat='person1' id='${room_name}' onclick='showRoom(this)'>
                                 <span class='name'>${room_name}</span><br>
@@ -261,7 +269,7 @@ socket.on('room created other', (data) =>{
                             </li>
                         `;
         $('.people').append($userInfo);
-
+        emobox = document.getElementById(`emobox`).outerHTML;
         const $contentInfo = `
                             <div class='right' id='${room_name}-msg' data-joined='0' style='display:none;'>
                                 <div class='top'><center id='online'><span>${room_name} Room</span>&nbsp;(<a href='#' onclick='leaveRoom("${room_name}")'>Leave room</a>)</center>
@@ -272,8 +280,17 @@ socket.on('room created other', (data) =>{
                                     <span></span>
                                 </div>
                                 <div class='chat active-chat' data-chat='person1'></div>
-                                <div class="write">
-                                    ${$write.html()}
+                                <div class="input-group write">
+                                  <textarea type="text" class="textarea form-control" placeholder="Message to ${room_name}..." data-active="lobby" rows="2"></textarea>
+                                  <div class="input-group-append">
+                                    <button class="btn smiley text-primary" type="button">
+                                      <i class="far fa-smile icon"></i>
+                                      ${emobox}
+                                    </button>
+                                    <button class="btn send text-primary" type="button">
+                                      <i class="fas fa-paper-plane icon"></i>
+                                    </button>
+                                  </div>
                                 </div>
                             </div>
                         `;
@@ -294,7 +311,6 @@ socket.on('destroy room', function(data) {
     }
 
     $(".error").hide();
-    $(".write").css("display", "initial");
 
     var room_id = convertIntoId(data);
     $(`#${room_id}`).remove();
diff --git a/public/script.js b/public/script.js
index 0f4b1ba..35a13f9 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5,7 +5,8 @@ $(document).ready(function() {
 
   // event listener to dynamic element
   $("body").on("keypress", '.textarea', function(val) {
-    if (val.which == 13) {
+    if (val.which == 13 && val.shiftKey) {
+      val.preventDefault();
       sendMessage($(this).val());
       $(this).val("");
     }
@@ -15,6 +16,7 @@ $(document).ready(function() {
     const input = $(this).parents('.write').find('.textarea');
     sendMessage(input.val());
     input.val("");
+    input.focus();
   });
 
   // Prevent new room modal from closing on Enter key
@@ -57,10 +59,9 @@ const showRoom = (name) => {
   if ($(`#${room_id}-msg`).attr("data-joined") == 0) {
     $(".error").css("display", "inherit");
     $(".error").html('<span id="error">You haven\'t joined this room yet. <a onclick="joinRoom(\'' + name.id + '\')" id="joinBtn" href="#">Join</a> to see the conversation.</span>');
-    $(`#${room_id}-msg,.write`).hide();
+    $(`#${room_id}-msg`).hide();
   } else {
     $(".error").hide();
-    $(".write").css("display", "initial");
   }
 
 };
@@ -112,7 +113,7 @@ function closeSidebar() {
   toggle.className += 'fa fa-angle-right';
 }
 
-function openSidebar() { 
+function openSidebar() {
   const navbar = document.querySelector(".left");
   navbar.classList.remove('menu-closed')
   navbar.classList.add('open-menu')
@@ -125,30 +126,30 @@ function SidebarToggle() {
   const navbar = document.querySelector(".left");
   if (!navbar.classList.contains('menu-closed') && navbar.classList.contains('open-menu')) {
     closeSidebar();
-  } 
+  }
   else {
     openSidebar();
     document.body.addEventListener('click', function(event) {
       const sidebar = document.getElementsByClassName('left')[0]; //Ensuring that clicks inside the sidebar(outside lobbies) don't make the sidebar collapse
       const lobbyName = document.getElementsByClassName('person'); //In case user clicks a lobby from the sidebar, the sidebar collapse. This is a list of classes
       const addLobbyPage = document.getElementById('room'); //Ensuring that clicks on page to add lobby names doesn't make the sidebar collapse
-      for (let i=0; i<lobbyName.length; i++) { 
+      for (let i=0; i<lobbyName.length; i++) {
         if(lobbyName[i].contains(event.target)) {
-          closeSidebar(); 
+          closeSidebar();
           return;
         }
       }
-      if(!sidebar.contains(event.target) && !addLobbyPage.contains(event.target)) { 
-        closeSidebar(); 
+      if(!sidebar.contains(event.target) && !addLobbyPage.contains(event.target)) {
+        closeSidebar();
       }
-    }, false); 
+    }, false);
   }
 }
 
 function notify(data, type){
   var msgHeader;
-  var msgBody;  
-  
+  var msgBody;
+
   if(data.indexOf('|') > -1){
     var notfication = data.split('|');
     msgHeader = notfication[0];
@@ -168,7 +169,7 @@ function notify(data, type){
                         </div>
                         <div class="toast-body">${msgBody}</div>
                       </div>`;
-  
+
   $('#toast-wrapper').append(toastTemplate);
   // Init notiifications
   $('.toast').toast({delay: 3000});
@@ -176,4 +177,4 @@ function notify(data, type){
   $(`#${notficationID}`).on('hidden.bs.toast', function () {
     $(`#${notficationID}`).remove();
   });
-}
\ No newline at end of file
+}
diff --git a/public/style.css b/public/style.css
index 838a71c..70f0df9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,6 +4,11 @@
   box-sizing: border-box;
 }
 
+/* To style icons of font-awesome */
+.icon {
+  font-size: 2rem
+}
+
 li {
   list-style: none;
 }
@@ -200,84 +205,6 @@ body {
   }
 }
 
-.write {
-  z-index: 10;
-  position: absolute;
-  bottom: 16px;
-  height: 42px;
-  width: 95% !important;
-  margin-left: 1em;
-  border: 1px solid #e6e6e6;
-  background-color: #eceff1;
-  width: inherit;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  border-radius: 5px;
-}
-
-.write input {
-  font-size: 16px;
-  float: left;
-  width: -moz-calc(100% - 90px);
-  width: -webkit-calc(100% - 90px);
-  width: -o-calc(100% - 90px);
-  width: calc(100% - 90px);
-  height: 40px;
-  padding: 0 10px;
-  color: #1a1a1a;
-  border: 0;
-  outline: none;
-  background-color: transparent;
-  font-family: 'Source Sans Pro', sans-serif;
-  font-weight: 400;
-}
-
-.write-right {
-  float: right;
-}
-
-.write .write-link.smiley:before {
-  display: inline-block;
-  float: left;
-  width: 40px;
-  height: 42px;
-  content: '';
-  background-size: 30px 30px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-/* font-awesome smiley */
-.fa-smile {
-  position: absolute;
-  font-size: 32px;
-  right: 3.5rem;
-  bottom: 0.3rem;
-  color: #57585a;
-}
-
-.write .write-link.send {
-  display: inline-block;
-  float: left;
-  width: 42px;
-  height: 42px;
-  margin-left: 5px;
-  content: '';
-  background-size: 38px 38px;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-/* font-awesome send */
-.fa-paper-plane {
-  font-size: 30px;
-  margin-top: 0.3rem;
-}
-
-.write#join {
-  padding-left: 0;
-}
-
 .app-container .right .card.others {
   float: left;
 }
@@ -300,11 +227,6 @@ body {
   background-size: 40px 42px;
 }
 
-/* font-awesome class */
-.fa-plus-circle {
-  font-size: 40px;
-}
-
 #newRoom:hover, #submit:hover, #cancel:hover {
   border-color: #0b2d63;
   color: #0b2d63;
diff --git a/views/index.ejs b/views/index.ejs
index a5949f9..8c9e643 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -33,7 +33,7 @@
           <div class="card m-2">
             <div class="card-body text-center" data-toggle="modal" data-target="#newRoomModal">
               <p class="card-text mb-0">
-                <a class="text-primary" id="newRoom">
+                <a class="text-primary icon" id="newRoom">
                   <i class="fas fa-plus-circle"></i>
                 </a>
               </p>
@@ -60,16 +60,16 @@
         <div class="chat" data-chat="person1">
 
         </div>
-        <div class="write" id="write">
-          <input type="text" id="textarea" class="textarea" data-active="lobby" />
-          <div class="write-right">
-            <!-- font-awesome smiley -->
-            <a href="#" class="write-link smiley"><i class="far fa-smile"></i>
-              <ul id="emobox" class="emobox">
-              </ul>
-            </a>
-            <!-- font-awesome send -->
-            <a href="javascript:;" class="write-link send text-primary"><i class="fas fa-paper-plane"></i></a>
+        <div class="input-group write">
+          <textarea type="text" class="textarea form-control" placeholder="Message to lobby..." data-active="lobby" rows="2"></textarea>
+          <div class="input-group-append">
+            <button class="btn smiley text-primary" type="button">
+              <i class="far fa-smile icon"></i>
+              <ul id="emobox" class="emobox"></ul>
+            </button>
+            <button class="btn send text-primary" type="button">
+              <i class="fas fa-paper-plane icon"></i>
+            </button>
           </div>
         </div>
       </div>