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 b028d4964..5e699a578 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -45,11 +45,22 @@
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
         </div>
-        <div>
+        <div class="message">
           <ion-label>{{msg.msg}}</ion-label>
-          <div *ngIf="msg.attachments">
+          <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <img src="{{file.image_url}}" alt="image" >
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <div *ngIf="file.thumb_url">
+                <div class="file d-flex">
+                  <ion-thumbnail slot="start">
+                    <img src="{{file.thumb_url}}" alt="image">
+                  </ion-thumbnail>
+                  <ion-label class="file-details">
+                    <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
+                    <p *ngIf="file.text">{{file.text}}</p>
+                  </ion-label>
+                </div>
+              </div>
             </div>
           </div>
           {{last ? scrollToBottom() : ''}}
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 d1b057bfc..50f7298d0 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -167,6 +167,28 @@
         text-align: right;
         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/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts
index 976139e7e..98ff6ebe2 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.ts
+++ b/src/app/pages/chat/group-messages/group-messages.page.ts
@@ -316,6 +316,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     };
   }
 
+  viewDocument(url:string){
+    this.fileService.viewDocumentByUrl(url);
+  }
+
   async openChatOptions(ev?: any) {
     console.log(this.members);
 
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 8d6fc801b..93e2c0972 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.html
+++ b/src/app/shared/chat/group-messages/group-messages.page.html
@@ -44,7 +44,7 @@
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
         </div>
-        <div class="messages">
+        <div class="message">
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
@@ -54,7 +54,7 @@
                   <ion-thumbnail slot="start">
                     <img src="{{file.thumb_url}}" alt="image">
                   </ion-thumbnail>
-                  <ion-label>
+                  <ion-label class="file-details">
                     <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
                     <p *ngIf="file.text">{{file.text}}</p>
                   </ion-label>
diff --git a/src/app/shared/chat/group-messages/group-messages.page.scss b/src/app/shared/chat/group-messages/group-messages.page.scss
index 60395f16b..dbc4127ba 100644
--- a/src/app/shared/chat/group-messages/group-messages.page.scss
+++ b/src/app/shared/chat/group-messages/group-messages.page.scss
@@ -156,21 +156,29 @@
           float: right;
         }
       }
-      .messages{
+      .message{
         .message-attachments{
           .file{
             align-items: center;
-            .file-title{
-              color: #000;
-              text-decoration: underline;
-            }
-            .file-title:hover{
-              color: #0782c9;
+
+            .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;
+              }
             }
           }
         }
       }
- }
+    }
 
  ion-footer{
   padding-top: 7.5px;