diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html
index ec09e5028..493a39586 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -10,7 +10,7 @@
           </button>
         </div>
         <div class="middle-container" *ngIf="!showMessageOptions">
-          <div class="middle">
+          <div class="middle add-ellipsis">
             <ion-label class="title">{{roomName}}</ion-label>
           </div>
         </div>
@@ -66,14 +66,14 @@
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <ion-label class="file-details" *ngIf="msg.file">
-                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                    <div class="file-details add-ellipsis" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="cursor-pointer">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
                         <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                        {{file.title}}
                       </span>
-                    </ion-label>
+                      <ion-label class="file-title">{{file.title}}</ion-label>
+                    </div>
                   </div>
                   <div class="file-details-optional">
                     <ion-label *ngIf="msg.file">
diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss
index a348a3cb9..869649154 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -28,14 +28,21 @@
           }
 
           .middle-container{
+            display: flex;
             overflow: auto;
             height: auto;
-            width:calc(100% - 57px);
+            width:calc(100% - 47px);
             float: left;
 
+            /* white-space: nowrap;
+              overflow: hidden !important;
+              text-overflow: ellipsis !important; */
+
             .middle{
+              width: 100%;
               padding: 0!important;
               margin: 0 0 0 10px;
+              font-size: 25px;
             }
           }
           .middle-container-options{
@@ -95,13 +102,6 @@
           }
         }
 
-        .title{
-          font-size: 25px;
-          white-space: nowrap;
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
-          float: left;
-        }
         .div-icon{
           width: 40px;
           float: right;
@@ -217,28 +217,7 @@
         float: right;
       }
    }
-   .message{
-    .message-attachments{
-      .file{
-        align-items: center;
 
-        .file-details{
-          width: 100%;
-
-          .file-title{
-            color: #000;
-            text-decoration: underline;
-            white-space: nowrap;
-            overflow: hidden !important;
-            text-overflow: ellipsis !important;
-          }
-          .file-title:hover{
-            color: #0782c9;
-          }
-        }
-      }
-    }
-  }
    .online{
     color:#99e47b !important;
     }
diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index 60186cd69..dedb43f07 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -64,14 +64,14 @@
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <ion-label class="file-details" *ngIf="msg.file">
-                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                    <div class="file-details add-ellipsis" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="cursor-pointer">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
                         <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                        {{file.title}}
                       </span>
-                    </ion-label>
+                      <ion-label class="file-title">{{file.title}}</ion-label>
+                    </div>
                   </div>
                   <div class="file-details-optional">
                     <ion-label *ngIf="msg.file">
diff --git a/src/app/shared/chat/group-messages/group-messages.page.html b/src/app/shared/chat/group-messages/group-messages.page.html
index 26b7b88e3..e8a8bc4ab 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.html
+++ b/src/app/shared/chat/group-messages/group-messages.page.html
@@ -59,14 +59,14 @@
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <ion-label class="file-details" *ngIf="msg.file">
-                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                    <div class="file-details add-ellipsis" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="cursor-pointer">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
                         <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                        {{file.title}}
                       </span>
-                    </ion-label>
+                      <ion-label class="file-title">{{file.title}}</ion-label>
+                    </div>
                   </div>
                   <div class="file-details-optional">
                     <ion-label *ngIf="msg.file">
diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html
index fa24adbf2..d722ff16d 100644
--- a/src/app/shared/chat/messages/messages.page.html
+++ b/src/app/shared/chat/messages/messages.page.html
@@ -51,14 +51,15 @@
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <ion-label class="file-details" *ngIf="msg.file">
-                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                    <div class="file-details add-ellipsis" *ngIf="msg.file">
+                      <span *ngIf="msg.file.type" (click)="viewDocument(file.title_link)" class="cursor-pointer">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
+                        <fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
                         <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                        {{file.title}}
                       </span>
-                    </ion-label>
+                      <ion-label class="file-title">{{file.title}}</ion-label>
+                    </div>
                   </div>
                   <div class="file-details-optional">
                     <ion-label *ngIf="msg.file">
diff --git a/src/global.scss b/src/global.scss
index 13a3b12f4..a837a721a 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1103,6 +1103,12 @@ ngx-mat-datetime-content{
   }
 }
 
+.add-ellipsis{
+  white-space: nowrap;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
 .menuButton{
   font-size: 14px;
   width: 100%;
@@ -1119,22 +1125,29 @@ ngx-mat-datetime-content{
   background-color: #42b9fe13;
   padding: 1px;
   .file{
+    width: 100%;
+    align-items: center;
+    overflow: auto;
+    color: #000;
+
     ion-thumbnail{
       --size: 20px;
     }
     .file-details{
-      max-width: calc(100% - 20px);
+      max-width: 100%;
       padding-left: 5px;
 
+      /* .file-title{
+        padding-left: 5px;
+      } */
+
       .file-title:hover{
         color: #0782c9;
         text-decoration: underline;
       }
 
       span{
-        white-space: nowrap;
-        overflow: hidden !important;
-        text-overflow: ellipsis !important;
+        padding-right: 5px;
       }
     }
   }