diff --git a/README.md b/README.md
index 221a1a9..1ba03a1 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-chat-app: chat room where useres can chat with each other in real time
\ No newline at end of file
+chat-app: chat room where users can chat with each other in real time
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 9840dee..6375bf3 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>chat</title>
+  <title>Chat Room</title>
 </head>
 
 <body>
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
index d6f5049..ecb0050 100644
--- a/frontend/src/components/Login.jsx
+++ b/frontend/src/components/Login.jsx
@@ -22,6 +22,9 @@ export default function Login() {
                 // console.log(result) //log
                 if (result.data.stat === "Success") {
                     setUser(result.data.user);
+
+                    // localStorage.setItem('user', JSON.stringify(user)); // locally storing the logged in user
+
                     navigate("/")
                     // console.log(user); //log
                     alert('login successful: ' + result.data.user) //using result.data.user instead of user because useRecoilState is a asyncronous function taking time in updating the user variable
diff --git a/frontend/src/components/MessageRoom.jsx b/frontend/src/components/MessageRoom.jsx
index 3591797..4d37ce7 100644
--- a/frontend/src/components/MessageRoom.jsx
+++ b/frontend/src/components/MessageRoom.jsx
@@ -60,8 +60,11 @@ export default function App() {
                 <div>
                     <NavbarSimple />
                 </div>
-                <div className="flex justify-around">
-                    <div>
+
+                {/* {JSON.parse(localStorage.getItem('user'))} */}
+
+                <div className="flex justify-evenly">
+                    <div className='p-3 w-72'>
                         <OnlineUsers />
                     </div>
 
@@ -87,23 +90,26 @@ export default function App() {
                             <Button onClick={sendMessage}>Send</Button>
                         </div>
                     </div>
-
                 </div>
 
                 <div className="p-5">
-                    <h3 className="font-bold  pb-2">Chat Room</h3>
+                    <h3 className="font-bold  pb-2">Messeges</h3>
                     <div className="rounded-md" style={{
                         border: '1px solid black',
                         padding: '10px'
                     }}>
-                        {data_rcv.map((msg, i) => (
-                            <div key={i}>
-                                {i + 1}.&nbsp;
-                                <span>[{formatDate(msg.createdTime)}]</span> &nbsp;
-                                <span>{msg.username}</span> : &nbsp;
-                                <span>{msg.message}</span>
-                            </div>
-                        ))}
+                        {
+                            data_rcv.length === 0 ? (<div>Fetching ... </div>)
+                                : (data_rcv.map((msg, i) => (
+                                    <div key={i}>
+                                        {i + 1}.&nbsp;
+                                        <span>[{formatDate(msg.createdTime)}]</span> &nbsp;
+                                        <span>{msg.username}</span> : &nbsp;
+                                        <span>{msg.message}</span>
+                                    </div>
+                                ))
+                                )
+                        }
                     </div>
                 </div>
 
diff --git a/frontend/src/components/OnlineUsers.jsx b/frontend/src/components/OnlineUsers.jsx
index 5bec9fb..1fea643 100644
--- a/frontend/src/components/OnlineUsers.jsx
+++ b/frontend/src/components/OnlineUsers.jsx
@@ -28,13 +28,20 @@ const OnlineUsers = React.memo(() => {
 
     return (
         <>
-            <div className="p-3 w-72">
+            <div>
                 <h3 className="font-bold pb-2">Online Users Socket Id [{Math.floor(onlineUsersList.length / 2)}]</h3>
                 <div className="rounded-md  overflow-y-auto max-h-64" style={{
                     border: '1px solid black',
                     padding: '10px'
                 }}>
-                    {memoizedUsers}
+                    {
+                        onlineUsersList.length === 0 ? (<div>Fetching ...</div>) :
+                            (
+                                <div>
+                                    {memoizedUsers}
+                                </div>
+                            )
+                    }
                 </div>
             </div>
         </>
