diff --git a/shablon/chat.html b/shablon/chat.html
index 2816a12cb..73828bc2a 100644
--- a/shablon/chat.html
+++ b/shablon/chat.html
@@ -331,6 +331,9 @@
                             <div class="chat_alert">
                                 1
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                         <div class="person open_link" data-tab="#chat-tab-2">
                             <div class="person_name">
@@ -342,6 +345,9 @@
                             <div class="chat_alert">
                                 5
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                         <div class="person open_link" data-tab="#chat-tab-3">
                             <div class="person_name">
@@ -353,6 +359,9 @@
                             <div class="chat_alert">
                                 10
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                         <div class="person open_link" data-tab="#chat-tab-4">
                             <div class="person_name">
@@ -364,6 +373,9 @@
                             <div class="chat_alert">
                                 20
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                         <div class="person open_link" data-tab="#chat-tab-5">
                             <div class="person_name">
@@ -375,6 +387,9 @@
                             <div class="chat_alert">
                                 3
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                         <div class="person open_link" data-tab="#chat-tab-6">
                             <div class="person_name">
@@ -383,6 +398,9 @@
                             <div class="person_message">
                                 Lorem ipsum dolor sit amet, consetetur sadi...
                             </div>
+                            <div class="delete">
+                                <img src="images/svg/trash.svg" alt="delete-icon">
+                            </div>
                         </div>
                     </div>
                     <div class="chat_area">
@@ -502,7 +520,7 @@
                                     12:00 - 14.05.2021
                                 </div>
                                 <div class="message_text">
-                                    lovrpokoikvps  okoslfpokelcolrpolplpfrpflrpflprf lrpflrpflrpflrfplprl
+                                    lovrpokoikvps okoslfpokelcolrpolplpfrpflrpflprf lrpflrpflrpflrfplprl
                                 </div>
                             </div>
 
@@ -792,7 +810,7 @@
                                     12:00 - 14.05.2021
                                 </div>
                                 <div class="message_text">
-                                    jghjug hjguhjghjug hjughjgujhguj  hugjhughjug
+                                    jghjug hjguhjghjug hjughjgujhguj hugjhughjug
                                 </div>
                             </div>
 
@@ -1061,6 +1079,26 @@
     </footer>
     <!--Footer end ========================================================= -->
 
+    <!--Delete modal ========================================================= -->
+    <div class="modal" id="delete-modal">
+        <div class="modal_inner">
+            <form action="#">
+                <h2 class="modal_title">
+                    Are you sure to delete this chat ?
+                </h2>
+                <div class="modal_btn-box">
+                    <button class="reset-form" type="reset">
+                        No!
+                    </button>
+                    <button class="accept-form" type="submit">
+                        Yes!
+                    </button>
+                </div>
+            </div>
+            </form>
+    </div>
+    <!--Delete modal end ===================================================== -->
+
 
     <script src="js/jquery.js"></script>
     <script src="js/slick.js"></script>
diff --git a/shablon/css/main.css b/shablon/css/main.css
index 449375473..379dc4f37 100644
--- a/shablon/css/main.css
+++ b/shablon/css/main.css
@@ -3502,6 +3502,52 @@ li {
     background: #c9c9c9;
 }
 
+.person:hover .person_message {
+    width: calc(100% - 50px);
+}
+
+.delete {
+    cursor: pointer;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 20px;
+    height: 20px;
+    display: none;
+    z-index: 2;
+}
+
+.delete:hover {
+    animation: trash .5s linear infinite;
+}
+
+@keyframes trash {
+    0% {
+        transform: rotate(-7deg);
+    }
+
+    50% {
+        transform: rotate(7deg);
+    }
+
+    100% {
+        transform: rotate(-7deg);
+    }
+}
+
+.delete img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    -o-object-fit: contain;
+    pointer-events: none;
+}
+
+.person:hover .delete {
+    display: block;
+}
+
+
 .person:last-child {
     border-bottom: none;
 }
@@ -3516,6 +3562,12 @@ li {
     font-weight: 700;
     line-height: 1.3;
     margin-bottom: 10px;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .person_message {
@@ -3749,6 +3801,81 @@ li {
 
 /* Chat end ======================================= */
 
+/* Modal ================================ */
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+
+    display: none;
+    z-index: 20;
+}
+
+.modal.active {
+    display: block;
+}
+
+.modal_inner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    width: calc(100% - 80px);
+    max-width: 400px;
+    background: #fff;
+    border-radius: 10px;
+    padding: 30px;
+}
+
+.modal_title {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--blue);
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.modal_btn-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin: 0 -10px;
+}
+
+.modal_btn-box button {
+    width: calc(50% - 34px);
+    margin: 0 10px;
+    border: 1px solid #eeee;
+    border-radius: 5px;
+    cursor: pointer;
+    padding: 7px;
+    transition: all .1s linear;
+}
+
+.reset-form:hover {
+    background: rgba(255, 0, 0, 0.795);
+    color: #fff;
+}
+
+.accept-form:hover {
+    background: #003097c0;
+    color: #fff;
+}
+
+
+
+
+/* Modal end ================================ */
+
 
 /* Message ======================================= */
 
@@ -4796,7 +4923,6 @@ li {
     }
 }
 
-
 @media(max-width: 1000px) {
     :root {
         --item-width: calc(50% - 40px)
@@ -5824,6 +5950,19 @@ li {
     .add_post_box-item {
         width: calc(50% - 10px);
     }
+
+    /* Modal ========================= */
+    .person_message {
+        width: calc(100% - 40px);
+    }
+
+    .delete {
+        bottom: 10px;
+        right: 16px;
+        width: 16px;
+        height: 16px;
+    }
+
 }
 
 @media(max-width: 600px) {
@@ -6488,4 +6627,13 @@ li {
         height: unset;
     }
 
+    /* Modal ============================ */
+    .modal_title {
+        font-size: 18px;
+    }
+
+    .modal_btn-box button {
+        width: calc(50% - 15px);
+    }
+
 }
diff --git a/shablon/images/svg/trash.svg b/shablon/images/svg/trash.svg
new file mode 100644
index 000000000..0f56f2f5e
--- /dev/null
+++ b/shablon/images/svg/trash.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2">
+	<polyline points="3 6 5 6 21 6">
+	</polyline>
+	<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
+	</path>
+	<line x1="10" y1="11" x2="10" y2="17">
+	</line>
+	<line x1="14" y1="11" x2="14" y2="17">
+	</line>
+</svg>
diff --git a/shablon/js/main.js b/shablon/js/main.js
index 8558afa08..bfcb96881 100644
--- a/shablon/js/main.js
+++ b/shablon/js/main.js
@@ -49,6 +49,8 @@ let iti__country = document.querySelectorAll('.iti__country');
 let iti__country_list = document.querySelectorAll('.iti__country-list');
 
 
+let delete_btn = document.querySelectorAll('.delete');
+let delete_modal = document.querySelector('#delete-modal');
 
 
 //  Fixed header ====================================
@@ -126,6 +128,12 @@ window.onclick = function (e) {
         }
     }
 
+    if (delete_modal != undefined) {
+        if (delete_modal.classList.contains('active')) {
+            delete_modal.classList.remove('active');
+        }
+    }
+
     // if (iti__country_list != undefined) {
     //     if (iti__country_list.classList.contains('active') && !e.target.closest('.phone_box')) {
     //         iti__country_list.classList.remove('active');
@@ -252,6 +260,16 @@ if (phone_box != undefined) {
     })
 }
 
+if (delete_btn != undefined) {
+    delete_btn.forEach(x => {
+        x.addEventListener('click', function () {
+            sleep(2).then(() => {
+                delete_modal.classList.add('active');
+            });
+        });
+    })
+}
+
 if (iti__country != undefined) {
     iti__country.forEach(x => {
         x.addEventListener('click', function () {