diff --git a/public/index.svg b/public/index.svg
index 6c48eec..cab1390 100644
--- a/public/index.svg
+++ b/public/index.svg
@@ -31,4 +31,8 @@
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
   </svg>
+  <svg id="done"  viewBox="0 0 512 512">
+   <path d="M0 0h24v24H0z" fill="none"/>
+  <path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"/>
+  </svg>
 </svg>
diff --git a/src/components/RoomHeader/index.js b/src/components/RoomHeader/index.js
index 2498758..cbac705 100644
--- a/src/components/RoomHeader/index.js
+++ b/src/components/RoomHeader/index.js
@@ -2,23 +2,44 @@ import React from 'react'
 import style from './index.module.css'
 
 export const RoomHeader = ({
-  state: { room, user, sidebarOpen, userListOpen },
-  actions: { setSidebar, setUserList },
+  state: { room, user, sidebarOpen, userListOpen, inputIsOpen, roomTitle },
+  actions: { setSidebar, setUserList, setTitleEditable, updateRoom, changeInputTitle },
 }) => (
-  <header className={style.component}>
-    <button onClick={e => setSidebar(!sidebarOpen)}>
-      <svg>
-        <use xlinkHref="index.svg#menu" />
-      </svg>
-    </button>
-    <h1>{room.name && room.name.replace(user.id, '')}</h1>
-    {room.users && (
-      <div onClick={e => setUserList(!userListOpen)}>
-        <span>{room.users.length}</span>
+    <header className={style.component}>
+      <button onClick={e => setSidebar(!sidebarOpen)}>
         <svg>
-          <use xlinkHref="index.svg#members" />
+          <use xlinkHref="index.svg#menu" />
         </svg>
-      </div>
-    )}
-  </header>
-)
+      </button>
+      {
+        (room.name && !inputIsOpen) && <h1 onClick={e => setTitleEditable(!inputIsOpen, room.name)}>
+          {room.name.replace(user.id, '')}
+        </h1>
+      }
+
+      {
+        inputIsOpen &&
+        <h1>{[
+          <form >
+            <span className={style.horizontal}>
+              <input onChange={changeInputTitle} className={style.inputComponent} value={roomTitle} />
+              &nbsp;
+              <svg onClick={e => updateRoom(room.id, roomTitle)}>
+                <use xlinkHref="index.svg#done" />
+              </svg>
+            </span>
+          </form>
+        ]}</h1>
+      }
+
+
+      {room.users && (
+        <div onClick={e => setUserList(!userListOpen)}>
+          <span>{room.users.length}</span>
+          <svg>
+            <use xlinkHref="index.svg#members" />
+          </svg>
+        </div>
+      )}
+    </header>
+  )
diff --git a/src/components/RoomHeader/index.module.css b/src/components/RoomHeader/index.module.css
index 543d60e..4f91e2f 100644
--- a/src/components/RoomHeader/index.module.css
+++ b/src/components/RoomHeader/index.module.css
@@ -9,6 +9,21 @@
   /*box-shadow: 0 0 0.62rem rgba(0, 0, 0, 0.1);*/
 }
 
+.horizontal {
+  display: flex;
+  align-items: center;
+}
+
+.inputComponent {
+  padding: 12px 20px;
+  font-size: 1.38rem;
+  color: rgba(0, 0, 0, 0.62);
+  margin: auto;
+  text-align: center;
+  font-weight: bold
+  
+}
+
 .component button {
   background: transparent;
   border: 1px solid rgba(0, 0, 0, 0.1);
diff --git a/src/index.js b/src/index.js
index 4688580..7de4a25 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,21 +28,23 @@ class View extends React.Component {
     messages: {},
     typing: {},
     sidebarOpen: false,
+    inputIsOpen:false,
     userListOpen: window.innerWidth > 1000,
+    roomTitle:""
   }
 
   actions = {
     // --------------------------------------
     // UI
     // --------------------------------------
-
+    changeInputTitle:e => this.setState({roomTitle:e.target.value}),
     setSidebar: sidebarOpen => this.setState({ sidebarOpen }),
     setUserList: userListOpen => this.setState({ userListOpen }),
+    setTitleEditable:(inputIsOpen, roomTitle) => this.setState({inputIsOpen,roomTitle}),
 
     // --------------------------------------
     // User
     // --------------------------------------
-
     setUser: user => this.setState({ user }),
 
     // --------------------------------------
@@ -76,6 +78,24 @@ class View extends React.Component {
     createRoom: options =>
       this.state.user.createRoom(options).then(this.actions.joinRoom),
 
+    updateRoom:(roomId,roomName)=>{
+      
+      this.state.user.updateRoom({
+        roomId: roomId ,
+        name: roomName,
+        private: false
+      }).then(() => {
+          this.setState({
+            roomTitle:roomName
+          })
+          alert(`Room name with ${roomId} updated successfully`)
+          this.actions.setTitleEditable(!this.state.inputIsOpen)
+      })
+        .catch(err => {
+          alert(err.info.error_description)
+          this.actions.setTitleEditable(!this.state.inputIsOpen)
+      })
+    },
     createConvo: options => {
       if (options.user.id !== this.state.user.id) {
         const exists = this.state.user.rooms.find(
@@ -221,7 +241,7 @@ class View extends React.Component {
       sidebarOpen,
       userListOpen,
     } = this.state
-    const { createRoom, createConvo, removeUserFromRoom } = this.actions
+    const { createRoom, createConvo, removeUserFromRoom , updateRoom } = this.actions
 
     return (
       <main>
@@ -238,7 +258,7 @@ class View extends React.Component {
           {user.id && <CreateRoomForm submit={createRoom} />}
         </aside>
         <section>
-          <RoomHeader state={this.state} actions={this.actions} />
+          <RoomHeader state={this.state} actions={this.actions} updateRoomName={updateRoom} />
           {room.id ? (
             <row->
               <col->
diff --git a/yarn.lock b/yarn.lock
index c24f55b..2b125a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1063,9 +1063,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@pusher/chatkit@^0.7.3":
-  version "0.7.9"
-  resolved "https://registry.yarnpkg.com/@pusher/chatkit/-/chatkit-0.7.9.tgz#34587299107baf55b36b3fe1c9870ea99e90a62a"
+"@pusher/chatkit@^0.7.9":
+  version "0.7.16"
+  resolved "https://registry.yarnpkg.com/@pusher/chatkit/-/chatkit-0.7.16.tgz#a234deccc885c56ce25bf6ae59c22ba77fa2e975"
   dependencies:
     pusher-platform "^0.15.1"
     ramda "^0.25.0"