diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts
new file mode 100644
index 000000000..dd5bc7664
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.page.ts
@@ -0,0 +1,144 @@
+import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Status } from 'src/app/models/chat/status.model';
+import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
+import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.page.html',
+  styleUrls: ['./messages.page.scss'],
+})
+export class MessagesPage implements OnInit, AfterViewChecked {
+  showLoader: boolean;
+
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+
+  loggedUser: any;
+
+  message = '';
+  messages:any;
+  dm:any;
+  userPresence='';
+  dmUsers:any;
+
+  
+  constructor(
+    public popoverController: PopoverController,
+    private modalController: ModalController,
+    private navParams: NavParams,
+    private chatService: ChatService,
+    private authService: AuthService,
+  ) { 
+    this.dm = this.navParams.get('dm');
+  }
+
+  ngOnInit() {
+
+    this.scrollToBottom();
+
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    
+    /* setInterval(()=>{ */
+      this.load();
+    /* }, 9000); */
+    
+  }
+  load(){
+    this.loadMessages();
+    this.getChatMembers();
+  }
+  doRefresh(ev:any){
+    this.load();
+    ev.target.complete();
+  }
+  
+  ngAfterViewChecked() {        
+    this.scrollToBottom();
+  } 
+  scrollToBottom(): void {
+    try {
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }                 
+  }
+  loadMoreMessages(ev:any){
+
+  }
+
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.dm._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadMessages(); 
+    });
+    this.message = "";
+  }
+  
+  loadMessages(){
+    this.showLoader = true;
+    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+      /* console.log(res); */
+      this.messages = res['messages'].reverse();
+      console.log(this.messages);
+      this.showLoader = false;
+    })
+  }
+  getChatMembers(){
+    this.showLoader = true;
+    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+      this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
+      console.log(res);
+      console.log(this.dmUsers);
+      this.showLoader = false;
+    });
+  }
+
+  async openMessagesOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present();
+  }
+
+  async addContacts(){
+    const modal = await this.modalController.create({
+      component: ContactsPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+}