diff --git a/src/chats/consumer.py b/src/chats/consumer.py
index f324b74..9c0d461 100644
--- a/src/chats/consumer.py
+++ b/src/chats/consumer.py
@@ -4,16 +4,16 @@
 
 class ChatConsumer(AsyncWebsocketConsumer):
     async def connect(self):
-        self.roomGroupName = "group_chat"
+        self.room_group_name = "group_chat"
         await self.channel_layer.group_add(
-            self.roomGroupName,
+            self.room_group_name,
             self.channel_name,
         )
         await self.accept()
         
     async def disconnect(self, close_code):
         await self.channel_layer.group_discard(
-            self.roomGroupName,
+            self.room_group_name,
             self.channel_name
         )
         
@@ -24,8 +24,8 @@ async def receive(self, text_data):
         time = text_data_json["time"]
         thumbnail = text_data_json["thumbnail"]
         await self.channel_layer.group_send(
-            self.roomGroupName, {
-                "type" : "sendMessage",
+            self.room_group_name, {
+                "type" : "send_message",
                 "message" : message,
                 "username" : username,
                 "time" : time,
@@ -33,7 +33,7 @@ async def receive(self, text_data):
             }
         )
         
-    async def sendMessage(self, event):
+    async def send_message(self, event):
         message = event["message"]
         username = event["username"]
         time = event["time"]
diff --git a/src/db.sqlite3 b/src/db.sqlite3
index 341c5f4..b2dcb34 100644
Binary files a/src/db.sqlite3 and b/src/db.sqlite3 differ
diff --git a/src/templates/chats/index.html b/src/templates/chats/index.html
index 7c63516..ff967d6 100644
--- a/src/templates/chats/index.html
+++ b/src/templates/chats/index.html
@@ -6,448 +6,451 @@
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 <script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
    
-    <style>
-body {
-    margin: 0;
-    padding: 0;
-    background: #eee;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start; 
-    height: 100vh;
-}
+<style>
+	body {
+		margin: 0;
+		padding: 0;
+		background: #eee;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start; 
+		height: 100vh;
+	}
 
-.container {
-    margin-top: 20px; 
-    max-width: 400px; 
-    width: 100%; 
-}
+	.container {
+		margin-top: 20px; 
+		max-width: 400px; 
+		width: 100%; 
+	}
 
-.box {
-	border-top: 3px solid #d2d6de;
-	background: #ffffff;
-    width: 100%; 
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-.box.box-primary {
-    border-top-color: #3c8dbc;
-}
+	.box {
+		border-top: 3px solid #d2d6de;
+		background: #ffffff;
+		width: 100%; 
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+	}
+	.box.box-primary {
+		border-top-color: #3c8dbc;
+	}
 
-.box.box-default {
-    border-top-color: #d2d6de;
-}
-.box.collapsed-box .box-body, .box.collapsed-box .box-footer {
-    display: none;
-}
-.box .nav-stacked>li {
-    border-bottom: 1px solid #f4f4f4;
-    margin: 0;
-}
-.box .nav-stacked>li:last-of-type {
-    border-bottom: none;
-}
-.box.height-control .box-body {
-    max-height: 300px;
-    overflow: auto;
-}
-.box .border-right {
-    border-right: 1px solid #f4f4f4;
-}
-.box .border-left {
-    border-left: 1px solid #f4f4f4;
-}
-.box.box-solid {
-    border-top: 0;
-}
-.box.box-solid>.box-header .btn.btn-default {
-    background: transparent;
-}
-.box.box-solid>.box-header .btn:hover, .box.box-solid>.box-header a:hover {
-    background: rgba(0, 0, 0, 0.1);
-}
-.box.box-solid.box-default {
-    border: 1px solid #d2d6de;
-}
-.box.box-solid.box-default>.box-header {
-    color: #444;
-    background: #d2d6de;
-    background-color: #d2d6de;
-}
-.box.box-solid.box-default>.box-header a, .box.box-solid.box-default>.box-header .btn {
-    color: #444;
-}
-.box.box-solid.box-primary {
-    border: 1px solid #3c8dbc;
-}
-.box.box-solid.box-primary>.box-header {
-    color: #fff;
-    background: #3c8dbc;
-    background-color: #3c8dbc;
-}
-.box.box-solid.box-primary>.box-header a, .box.box-solid.box-primary>.box-header .btn {
-    color: #fff;
-}
+	.box.box-default {
+		border-top-color: #d2d6de;
+	}
+	.box.collapsed-box .box-body, .box.collapsed-box .box-footer {
+		display: none;
+	}
+	.box .nav-stacked>li {
+		border-bottom: 1px solid #f4f4f4;
+		margin: 0;
+	}
+	.box .nav-stacked>li:last-of-type {
+		border-bottom: none;
+	}
+	.box.height-control .box-body {
+		max-height: 300px;
+		overflow: auto;
+	}
+	.box .border-right {
+		border-right: 1px solid #f4f4f4;
+	}
+	.box .border-left {
+		border-left: 1px solid #f4f4f4;
+	}
+	.box.box-solid {
+		border-top: 0;
+	}
+	.box.box-solid>.box-header .btn.btn-default {
+		background: transparent;
+	}
+	.box.box-solid>.box-header .btn:hover, .box.box-solid>.box-header a:hover {
+		background: rgba(0, 0, 0, 0.1);
+	}
+	.box.box-solid.box-default {
+		border: 1px solid #d2d6de;
+	}
+	.box.box-solid.box-default>.box-header {
+		color: #444;
+		background: #d2d6de;
+		background-color: #d2d6de;
+	}
+	.box.box-solid.box-default>.box-header a, .box.box-solid.box-default>.box-header .btn {
+		color: #444;
+	}
+	.box.box-solid.box-primary {
+		border: 1px solid #3c8dbc;
+	}
+	.box.box-solid.box-primary>.box-header {
+		color: #fff;
+		background: #3c8dbc;
+		background-color: #3c8dbc;
+	}
+	.box.box-solid.box-primary>.box-header a, .box.box-solid.box-primary>.box-header .btn {
+		color: #fff;
+	}
 
 
 
 
-.box.box-solid>.box-header>.box-tools .btn {
-    border: 0;
-    box-shadow: none;
-}
-.box.box-solid[class*='bg']>.box-header {
-    color: #fff;
-}
-.box .box-group>.box {
-    margin-bottom: 5px;
-}
-.box .knob-label {
-    text-align: center;
-    color: #333;
-    font-weight: 100;
-    font-size: 12px;
-    margin-bottom: 0.3em;
-}
-.box>.overlay, .overlay-wrapper>.overlay, .box>.loading-img, .overlay-wrapper>.loading-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%}
-.box .overlay, .overlay-wrapper .overlay {
-    z-index: 50;
-    background: rgba(255, 255, 255, 0.7);
-    border-radius: 3px;
-}
-.box .overlay>.fa, .overlay-wrapper .overlay>.fa {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-left: -15px;
-    margin-top: -15px;
-    color: #000;
-    font-size: 30px;
-}
-.box .overlay.dark, .overlay-wrapper .overlay.dark {
-    background: rgba(0, 0, 0, 0.5);
-}
-.box-header:before, .box-body:before, .box-footer:before, .box-header:after, .box-body:after, .box-footer:after {
-    content: " ";
-    display: table;
-}
-.box-header:after, .box-body:after, .box-footer:after {
-    clear: both;
-}
-.box-header {
-    color: #444;
-    display: block;
-    padding: 10px;
-    position: relative;
-}
-.box-header.with-border {
-    border-bottom: 1px solid #f4f4f4;
-}
-.collapsed-box .box-header.with-border {
-    border-bottom: none;
-}
-.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title {
-    display: inline-block;
-    font-size: 18px;
-    margin: 0;
-    line-height: 1;
-}
-.box-header>.fa, .box-header>.glyphicon, .box-header>.ion {
-    margin-right: 5px;
-}
-.box-header>.box-tools {
-    position: absolute;
-    right: 10px;
-    top: 5px;
-}
-.box-header>.box-tools [data-toggle="tooltip"] {
-    position: relative;
-}
-.box-header>.box-tools.pull-right .dropdown-menu {
-    right: 0;
-    left: auto;
-}
-.btn-box-tool {
-    padding: 5px;
-    font-size: 17px;
-    background: transparent;
-    color: #97a0b3;
-}
-.open .btn-box-tool, .btn-box-tool:hover {
-    color: #606c84;
-}
-.btn-box-tool.btn:active {
-    box-shadow: none;
-}
-.box-body {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    padding: 10px;
-}
-.no-header .box-body {
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-}
-.box-body>.table {
-    margin-bottom: 0;
-}
-.box-body .fc {
-    margin-top: 5px;
-}
-.box-body .full-width-chart {
-    margin: -19px;
-}
-.box-body.no-padding .full-width-chart {
-    margin: -9px;
-}
-.box-body .box-pane {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 3px;
-}
-.box-body .box-pane-right {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 0;
-}
-.box-footer {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    border-top: 1px solid #f4f4f4;
-    padding: 10px;
-    background-color: #fff;
-}
-.direct-chat .box-body {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-    position: relative;
-    overflow-x: hidden;
-    padding: 0;
-}
-.direct-chat.chat-pane-open .direct-chat-contacts {
-    -webkit-transform: translate(0,  0);
-    -ms-transform: translate(0,  0);
-    -o-transform: translate(0,  0);
-    transform: translate(0,  0);
-}
-.direct-chat-messages {
-    -webkit-transform: translate(0,  0);
-    -ms-transform: translate(0,  0);
-    -o-transform: translate(0,  0);
-    transform: translate(0,  0);
-    padding: 10px;
-    height: 250px;
-    overflow: auto;
-}
-.direct-chat-msg, .direct-chat-text {
-    display: block;
-}
-.direct-chat-msg {
-    margin-bottom: 10px;
-}
-.direct-chat-msg:before, .direct-chat-msg:after {
-    content: " ";
-    display: table;
-}
-.direct-chat-msg:after {
-    clear: both;
-}
+	.box.box-solid>.box-header>.box-tools .btn {
+		border: 0;
+		box-shadow: none;
+	}
+	.box.box-solid[class*='bg']>.box-header {
+		color: #fff;
+	}
+	.box .box-group>.box {
+		margin-bottom: 5px;
+	}
+	.box .knob-label {
+		text-align: center;
+		color: #333;
+		font-weight: 100;
+		font-size: 12px;
+		margin-bottom: 0.3em;
+	}
+	.box>.overlay, .overlay-wrapper>.overlay, .box>.loading-img, .overlay-wrapper>.loading-img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%}
+	.box .overlay, .overlay-wrapper .overlay {
+		z-index: 50;
+		background: rgba(255, 255, 255, 0.7);
+		border-radius: 3px;
+	}
+	.box .overlay>.fa, .overlay-wrapper .overlay>.fa {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-left: -15px;
+		margin-top: -15px;
+		color: #000;
+		font-size: 30px;
+	}
+	.box .overlay.dark, .overlay-wrapper .overlay.dark {
+		background: rgba(0, 0, 0, 0.5);
+	}
+	.box-header:before, .box-body:before, .box-footer:before, .box-header:after, .box-body:after, .box-footer:after {
+		content: " ";
+		display: table;
+	}
+	.box-header:after, .box-body:after, .box-footer:after {
+		clear: both;
+	}
+	.box-header {
+		color: #444;
+		display: block;
+		padding: 10px;
+		position: relative;
+	}
+	.box-header.with-border {
+		border-bottom: 1px solid #f4f4f4;
+	}
+	.collapsed-box .box-header.with-border {
+		border-bottom: none;
+	}
+	.box-header>.fa, .box-header>.glyphicon, .box-header>.ion, .box-header .box-title {
+		display: inline-block;
+		font-size: 18px;
+		margin: 0;
+		line-height: 1;
+	}
+	.box-header>.fa, .box-header>.glyphicon, .box-header>.ion {
+		margin-right: 5px;
+	}
+	.box-header>.box-tools {
+		position: absolute;
+		right: 10px;
+		top: 5px;
+	}
+	.box-header>.box-tools [data-toggle="tooltip"] {
+		position: relative;
+	}
+	.box-header>.box-tools.pull-right .dropdown-menu {
+		right: 0;
+		left: auto;
+	}
+	.btn-box-tool {
+		padding: 5px;
+		font-size: 17px;
+		background: transparent;
+		color: #97a0b3;
+	}
+	.open .btn-box-tool, .btn-box-tool:hover {
+		color: #606c84;
+	}
+	.btn-box-tool.btn:active {
+		box-shadow: none;
+	}
+	.box-body {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 3px;
+		border-bottom-left-radius: 3px;
+		padding: 10px;
+	}
+	.no-header .box-body {
+		border-top-right-radius: 3px;
+		border-top-left-radius: 3px;
+	}
+	.box-body>.table {
+		margin-bottom: 0;
+	}
+	.box-body .fc {
+		margin-top: 5px;
+	}
+	.box-body .full-width-chart {
+		margin: -19px;
+	}
+	.box-body.no-padding .full-width-chart {
+		margin: -9px;
+	}
+	.box-body .box-pane {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 3px;
+	}
+	.box-body .box-pane-right {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 3px;
+		border-bottom-left-radius: 0;
+	}
+	.box-footer {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 3px;
+		border-bottom-left-radius: 3px;
+		border-top: 1px solid #f4f4f4;
+		padding: 10px;
+		background-color: #fff;
+	}
+	.direct-chat .box-body {
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		position: relative;
+		overflow-x: hidden;
+		padding: 0;
+	}
+	.direct-chat.chat-pane-open .direct-chat-contacts {
+		-webkit-transform: translate(0,  0);
+		-ms-transform: translate(0,  0);
+		-o-transform: translate(0,  0);
+		transform: translate(0,  0);
+	}
+	.direct-chat-messages {
+		-webkit-transform: translate(0,  0);
+		-ms-transform: translate(0,  0);
+		-o-transform: translate(0,  0);
+		transform: translate(0,  0);
+		padding: 10px;
+		height: 250px;
+		overflow: auto;
+		
+	}
+	.direct-chat-msg, .direct-chat-text {
+		display: block;
+	}
+	.direct-chat-msg {
+		margin-bottom: 10px;
+	}
+	.direct-chat-msg:before, .direct-chat-msg:after {
+		content: " ";
+		display: table;
+	}
+	.direct-chat-msg:after {
+		clear: both;
+	}
 
-.direct-chat-text {
-    border-radius: 5px;
-    position: relative;
-    padding: 5px 10px;
-    background: #d2d6de;
-    border: 1px solid #d2d6de;
-    margin: 5px 0 0 50px;
-    color: #444;
-}
-.direct-chat-text:after, .direct-chat-text:before {
-    position: absolute;
-    right: 100%;
-    top: 15px;
-    border: solid transparent;
-    border-right-color: #d2d6de;
-    content: ' ';
-    height: 0;
-    width: 0;
-    pointer-events: none;
-}
-.direct-chat-text:after {
-    border-width: 5px;
-    margin-top: -5px;
-}
-.direct-chat-text:before {
-    border-width: 6px;
-    margin-top: -6px;
-}
-.right .direct-chat-text {
-    margin-right: 50px;
-    margin-left: 0;
-}
-.right .direct-chat-text:after, .right .direct-chat-text:before {
-    right: auto;
-    left: 100%;
-    border-right-color: transparent;
-    border-left-color: #d2d6de;
-}
-.direct-chat-img {
-    border-radius: 50%;
-    float: left;
-    width: 40px;
-    height: 40px;
-}
-.right .direct-chat-img {
-    float: right;
-}
-.direct-chat-info {
-    display: block;
-    margin-bottom: 2px;
-    font-size: 12px;
-}
-.direct-chat-name {
-    font-weight: 600;
-}
-.direct-chat-timestamp {
-    color: #999;
-}
+	.direct-chat-text {
+		border-radius: 5px;
+		position: relative;
+		padding: 5px 10px;
+		background: #d2d6de;
+		border: 1px solid #d2d6de;
+		margin: 5px 0 0 50px;
+		color: #444;
+		
+		
+		
+	}
+	.direct-chat-text:after, .direct-chat-text:before {
+		position: absolute;
+		right: 100%;
+		top: 15px;
+		border: solid transparent;
+		border-right-color: #d2d6de;
+		content: ' ';
+		height: 0;
+		width: 0;
+		pointer-events: none;
+	}
+	.direct-chat-text:after {
+		border-width: 5px;
+		margin-top: -5px;
+	}
+	.direct-chat-text:before {
+		border-width: 6px;
+		margin-top: -6px;
+	}
+	.right .direct-chat-text {
+		margin-right: 50px;
+		margin-left: 0;
+	}
+	.right .direct-chat-text:after, .right .direct-chat-text:before {
+		right: auto;
+		left: 100%;
+		border-right-color: transparent;
+		border-left-color: #d2d6de;
+	}
+	.direct-chat-img {
+		border-radius: 50%;
+		float: left;
+		width: 40px;
+		height: 40px;
+	}
+	.right .direct-chat-img {
+		float: right;
+	}
+	.direct-chat-info {
+		display: block;
+		margin-bottom: 2px;
+		font-size: 12px;
+	}
+	.direct-chat-name {
+		font-weight: 600;
+	}
+	.direct-chat-timestamp {
+		color: #999;
+	}
 
-.direct-chat-primary .right>.direct-chat-text {
-    background: #3c8dbc;
-    border-color: #3c8dbc;
-    color: #fff;
-}
-.direct-chat-primary .right>.direct-chat-text:after, .direct-chat-primary .right>.direct-chat-text:before {
-    border-left-color: #3c8dbc;
-}
+	.direct-chat-primary .right>.direct-chat-text {
+		background: #3c8dbc;
+		border-color: #3c8dbc;
+		color: #fff;
+	}
+	.direct-chat-primary .right>.direct-chat-text:after, .direct-chat-primary .right>.direct-chat-text:before {
+		border-left-color: #3c8dbc;
+	}
 
-}
+	}
 
 
 
 
-    </style>
+</style>
 </head>
 
 <body>
-  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
-<div class="container">
-<div class="row bootstrap snippets bootdeys">
-    <div class="col-md-12">
-      <!-- DIRECT CHAT PRIMARY -->
-      <div class="box box-primary direct-chat direct-chat-primary">
-        <div class="box-header with-border">
-          <h3 class="box-title">Chat-App</h3>
-		 
-		  <div class="box-tools pull-right">    
-					  <a href="{% url 'users:profile' %}"><button type="button" class="btn btn-box-tool" data-widget="profile"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-square" viewBox="0 0 16 16">
-					<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
-					<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
-					</svg></button></a>
-            <a href="{% url 'users:logout' %}"><button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fas fa-sign-out-alt"></i></button></a>
-          </div>
-        </div>
-        <!-- /.box-header -->
-        <div class="box-body">
-          <!-- Conversations are loaded here -->
-            <div class="direct-chat-messages" id="id_chat_item_container">
-            <!-- /.direct-chat-msg -->
+	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+	<div class="container">
+		<div class="row bootstrap snippets bootdeys">
+			<div class="col-md-12">
+			  <!-- DIRECT CHAT PRIMARY -->
+				<div class="box box-primary direct-chat direct-chat-primary">
+					<div class="box-header with-border">
+						<h3 class="box-title">Chat-App</h3>		 
+						<div class="box-tools pull-right">    
+							<a href="{% url 'users:profile' %}">
+								<button type="button" class="btn btn-box-tool" data-widget="profile">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-square" viewBox="0 0 16 16">
+									<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+									<path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1v-1c0-1-1-4-6-4s-6 3-6 4v1a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+									</svg>
+								</button>
+							</a>
+							<a href="{% url 'users:logout' %}">
+								<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fas fa-sign-out-alt"></i></button>
+							</a>
+						</div>
+					</div>
+					<!-- /.box-header -->
+					<div class="box-body">
+					  <!-- Conversations are loaded here -->
+						<div class="direct-chat-messages" id="id_chat_item_container">
+						<!-- /.direct-chat-msg -->				
+						</div>            
+					</div>          
+				</div>
+				<div class="box-footer">        
+					<div class="input-group">
+						<input type="text" name="message" placeholder="Type Message ..." class="form-control"  id="id_message_send_input">
+						<span class="input-group-btn">
+							<button type="submit" class="btn btn-primary btn-flat" id="id_message_send_button">Send</button>
+						</span>
+					</div>         
+				</div>
+				<!-- /.box-footer-->
+			</div>
+			<!--/.direct-chat -->
+		</div>
+	</div>
+	<script>
+		const chatSocket = new WebSocket("ws://" + window.location.host + "/");
+		chatSocket.onopen = function (e) {
+			console.log("The connection was set up successfully!");
+		};
+		
+		chatSocket.onclose = function (e) {
+			console.log("Something unexpected happened!");
+		};
+		
+		document.querySelector("#id_message_send_input").focus();
+		document.querySelector("#id_message_send_input").onkeyup = function (e) {
+			if (e.keyCode == 13) {
+				document.querySelector("#id_message_send_button").click();
+			}
+		};
+		
+		submitButton = document.querySelector("#id_message_send_button")
+		submitButton.addEventListener('click' , function (e) {
+			var messageInput = document.querySelector("#id_message_send_input").value;
+			var currentTime = new Date();
+			var time = currentTime.toLocaleTimeString();
+			if (messageInput) {
+				chatSocket.send(JSON.stringify({
+					message: messageInput,
+					username: "{{request.user.username}}",
+					time: time,
+					thumbnail: "{{ request.user.userprofile.thumbnail.url }}"
+				}));
+			}
+		});
+		
+		chatSocket.onmessage = function (e) {
+			const data = JSON.parse(e.data);
+			var chat = document.querySelector("#id_chat_item_container");
+			var isUser = (data.username === "{{request.user.username}}");
+			const source = isUser ? 'right':'left';
+			const name = isUser ? 'Me':data.username ;
+			const namePull = isUser ? 'pull-right':'pull-left';
+			const datePull = isUser ? 'pull-left':'pull-right';
 			
-            </div>            
-        </div>          
-        </div>
-        <!-- /.box-body -->
-        <div class="box-footer">
-         
-            <div class="input-group">
-                <input type="text" name="message" placeholder="Type Message ..." class="form-control"  id="id_message_send_input">
-                <span class="input-group-btn">
-                    <button type="submit" class="btn btn-primary btn-flat" id="id_message_send_button">Send</button>
-                </span>
-            </div>
-          
-        </div>
-        <!-- /.box-footer-->
-      </div>
-      <!--/.direct-chat -->
-    </div>
-    
-
-</div>
-</div>
- <script>
-        const chatSocket = new WebSocket("ws://" + window.location.host + "/");
-        chatSocket.onopen = function (e) {
-            console.log("The connection was set up successfully!");
-        };
-        chatSocket.onclose = function (e) {
-            console.log("Something unexpected happened!");
-        };
-        document.querySelector("#id_message_send_input").focus();
-        document.querySelector("#id_message_send_input").onkeyup = function (e) {
-            if (e.keyCode == 13) {
-                document.querySelector("#id_message_send_button").click();
-            }
-        };
-        document.querySelector("#id_message_send_button").onclick = function (e) {
-            var messageInput = document.querySelector("#id_message_send_input").value;
-            var currentTime = new Date();
-            var time = currentTime.toLocaleTimeString();
+			chat.innerHTML += 
+				'<div class="direct-chat-msg '+ source +'">'+
+					'<div class="direct-chat-info clearfix">'+
+						'<span class="direct-chat-name '+ namePull +'">'+ name +'</span>'+
+						'<span class="direct-chat-timestamp '+ datePull +'">'+ data.time +'</span>'
+					+'</div>'+
+					
+					'<img class="direct-chat-img" src="'+ data.thumbnail +'" alt="Message User Image">'+
+					'<div class="direct-chat-text">'+
+						data.message
+					+'</div>'
+				
+				+'</div>';
+				
 			
-            chatSocket.send(JSON.stringify({
-                message: messageInput,
-                username: "{{request.user.username}}",
-                time: time,
-				thumbnail: "{{ request.user.userprofile.thumbnail.url }}"
-            }));
-        };
-        chatSocket.onmessage = function (e) {
-    const data = JSON.parse(e.data);
-    var messageContainer = document.querySelector("#id_chat_item_container");
-    var div = document.createElement("div");
-    
-    // Check if the message is from the logged-in user or another user
-    var isUser = (data.username === "{{request.user.username}}");
-    
-    div.className = isUser ? "right" : "left";  // Adjust the position of the chat message
-    
-    div.innerHTML = `
-        <div class="direct-chat-msg ${isUser ? 'right' : 'left'}">
-            <div class="direct-chat-info clearfix">
-                ${isUser 
-                    ? `<span class="direct-chat-timestamp pull-left">${data.time}</span>
-                       <span class="direct-chat-name pull-right">${data.username.charAt(0).toUpperCase() + data.username.slice(1)}</span>`
-                    : `<span class="direct-chat-name pull-left">${data.username.charAt(0).toUpperCase() + data.username.slice(1)}</span>
-					 
-                       <span class="direct-chat-timestamp pull-right">${data.time}</span>`
-                }
-            </div>
-            <img class="direct-chat-img" src="${data.thumbnail}" alt="thumbnail"
-			><!-- /.direct-chat-img -->
-            <div class="direct-chat-text">
+			document.querySelector("#id_message_send_input").value = "";
 			
-               ${data.message}
-            </div>
-        </div>`;
-    
-    document.querySelector("#id_message_send_input").value = "";
-    messageContainer.appendChild(div);
-   
-    // Scroll to the bottom of the chat container
-    messageContainer.scrollTop = messageContainer.scrollHeight;
-};
+		   
+			// Scroll to the bottom of the chat container
+			messageContainer.scrollTop = messageContainer.scrollHeight;
+		};
 
-    </script>
+	</script>
 </body>
 
 </html>
\ No newline at end of file