diff --git a/src/templates/chats/index.html b/src/templates/chats/index.html
index 254bf9d..73dc490 100644
--- a/src/templates/chats/index.html
+++ b/src/templates/chats/index.html
@@ -1,680 +1,339 @@
-  <!DOCTYPE html>
+<!DOCTYPE html>
 <html>
-
 <head>
-<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
- <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>
-   
-<<<<<<< HEAD
-<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%; 
-	}
-
-	.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-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;
+	<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
+	
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			background: #eee;
+			display: flex;
+			justify-content: center;
+			align-items: flex-start; 
+			height: 100vh;
+		}
 		
-	}
-	.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;
+		.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.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;
+		}
 		
-	}
-	.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;
-	}
-
-	}
-
-
-
-=======
-    <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%; 
-	}
-	
-	.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-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-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;
-	}
-	
-	}
->>>>>>> 4672896add2d6c7aca8fd7ce615677b3cbe64a50
+		
+		
+		
+		.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-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>
-<<<<<<< HEAD
-	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+<body>	
 	<div class="container">
 		<div class="row bootstrap snippets bootdeys">
 			<div class="col-md-12">
@@ -685,14 +344,20 @@ <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">
+									<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>
+								<button type="button" class="btn btn-box-tool" data-widget="remove">
+									<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
+									<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0z"/>
+									<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708z"/>
+									
+									</svg>
+								</button>
 							</a>
 						</div>
 					</div>
@@ -717,7 +382,8 @@ <h3 class="box-title">Chat-App</h3>
 			<!--/.direct-chat -->
 		</div>
 	</div>
-	<script>
+	<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
+	<script>		
 		const chatSocket = new WebSocket("ws://" + window.location.host + "/");
 		chatSocket.onopen = function (e) {
 			console.log("The connection was set up successfully!");
@@ -757,30 +423,6 @@ <h3 class="box-title">Chat-App</h3>
 			const name = isUser ? 'Me':data.username ;
 			const namePull = isUser ? 'pull-right':'pull-left';
 			const datePull = isUser ? 'pull-left':'pull-right';
-=======
-  <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 -->
->>>>>>> 4672896add2d6c7aca8fd7ce615677b3cbe64a50
 			
 			chat.innerHTML += 
 				'<div class="direct-chat-msg '+ source +'">'+
@@ -803,74 +445,7 @@ <h3 class="box-title">Chat-App</h3>
 			// Scroll to the bottom of the chat container
 			messageContainer.scrollTop = messageContainer.scrollHeight;
 		};
-
-<<<<<<< HEAD
+		
 	</script>
-=======
-</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();
-			
-            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">
-            <div class="direct-chat-text">			
-               ${data.message}
-            </div>
-        </div>`;
-    
-    document.querySelector("#id_message_send_input").value = "";
-    messageContainer.appendChild(div);
-   
-    
-    messageContainer.scrollTop = messageContainer.scrollHeight;
-};
-
-    </script>
->>>>>>> 4672896add2d6c7aca8fd7ce615677b3cbe64a50
 </body>
-
 </html>
diff --git a/src/templates/users/profile.html b/src/templates/users/profile.html
index 8cd1582..b46bade 100644
--- a/src/templates/users/profile.html
+++ b/src/templates/users/profile.html
@@ -7,82 +7,82 @@
     <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;
-}
-
-.container {
-    margin-top: 20px; 
-    max-width: 400px; 
-    width: 100%;
-}
-
-.box {
-    background: #ffffff;
-    border-radius: 5px;
-    border-top: 3px solid #3c8dbc;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.box-header.with-border {
-    border-bottom: 1px solid #f4f4f4;
-    padding: 10px;
-    position: relative;
-}
-
-.box-title {
-    font-size: 18px;
-    margin: 0;
-    font-weight: bold;
-}
-
-.box-tools {
-    position: absolute;
-    right: 10px;
-    top: 5px;
-}
-
-.btn-box-tool {
-    background: transparent;
-    border: none;
-    color: #555;
-    padding: 5px;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.btn-box-tool:hover {
-    color: #333;
-}
-
-.box-body {
-    padding: 20px;
-}
-
-.btn-container {
-    text-align: center;
-    margin-top: 20px;
-}
-
-.btn-primary {
-    background-color: #3c8dbc;
-    border-color: #367fa9;
-    color: white;
-    padding: 10px 20px;
-    border-radius: 4px;
-}
-
-.btn-primary:hover {
-    background-color: #357ca5;
-    border-color: #285e8e;
-}
+		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%;
+		}
+
+		.box {
+			background: #ffffff;
+			border-radius: 5px;
+			border-top: 3px solid #3c8dbc;
+			margin-bottom: 20px;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		}
+
+		.box-header.with-border {
+			border-bottom: 1px solid #f4f4f4;
+			padding: 10px;
+			position: relative;
+		}
+
+		.box-title {
+			font-size: 18px;
+			margin: 0;
+			font-weight: bold;
+		}
+
+		.box-tools {
+			position: absolute;
+			right: 10px;
+			top: 5px;
+		}
+
+		.btn-box-tool {
+			background: transparent;
+			border: none;
+			color: #555;
+			padding: 5px;
+			font-size: 16px;
+			cursor: pointer;
+		}
+
+		.btn-box-tool:hover {
+			color: #333;
+		}
+
+		.box-body {
+			padding: 20px;
+		}
+
+		.btn-container {
+			text-align: center;
+			margin-top: 20px;
+		}
+
+		.btn-primary {
+			background-color: #3c8dbc;
+			border-color: #367fa9;
+			color: white;
+			padding: 10px 20px;
+			border-radius: 4px;
+		}
+
+		.btn-primary:hover {
+			background-color: #357ca5;
+			border-color: #285e8e;
+		}
 
     </style>
 </head>
@@ -91,7 +91,6 @@
     <div class="container">
     <div class="row bootstrap snippets bootdeys">
         <div class="col-md-12">
-            >
             <div class="box box-primary direct-chat direct-chat-primary">
                 <div class="box-header with-border">
                     <h3 class="box-title">Edit Profile</h3>                    
