diff --git a/public/css/custom.css b/public/css/custom.css
new file mode 100644
index 0000000..713a6f6
--- /dev/null
+++ b/public/css/custom.css
@@ -0,0 +1,9 @@
+.avatar .username {
+  display: none;
+}
+.avatar:hover .username {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  float: left;
+}
diff --git a/public/index.html b/public/index.html
index 29939c5..0d5c4d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" type="text/css" href="css/custom.css" />
 
     <title>app</title>
   </head>
diff --git a/src/components/SingleMessage.js b/src/components/SingleMessage.js
index 4585cec..eef2304 100644
--- a/src/components/SingleMessage.js
+++ b/src/components/SingleMessage.js
@@ -5,18 +5,29 @@ const SingleMessage = props => {
 
   if (user.socketId === socketId)
     return (
-      <ListGroup.Item className="my-2 bg-dark text-white">
-        <div className="float-right">{text}</div>
+      <ListGroup.Item className="my-2">
+        <div className="p-2 bg-dark text-white float-right">
+          {text}
+          <div className="time_date">00:00 AM | July 14</div>
+        </div>
       </ListGroup.Item>
     )
   return (
     <ListGroup.Item className="my-2">
-      <Image
-        className={`mx-2`}
-        style={{ height: '24px' }}
-        src={user.userImage}
-      />
-      {user.socketId}: {text}
+      <div className="avatar float-left">
+        <Image
+          className="m-3"
+          style={{ height: '24px' }}
+          src={user.userImage}
+        />
+        <span className="username p-2 bg-white border border-secondary">
+          {user.socketId}
+        </span>
+      </div>
+      <div className="p-2 bg-light text-dark float-left">
+        {text}
+        <div className="time_date">00:00 AM | July 14</div>
+      </div>
     </ListGroup.Item>
   )
 }