diff --git a/config.xml b/config.xml
index 1866aeb25..984e37afb 100644
--- a/config.xml
+++ b/config.xml
@@ -1,10 +1,12 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
-    <name>MyApp</name>
+<widget id="com.gpr.gabinetedigital" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
+    <name>gabinete digital</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />
     <access origin="*" />
+    <allow-navigation href="http://*/*" />
+    <allow-navigation href="https://*/*" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-intent href="tel:*" />
@@ -92,7 +94,6 @@
         <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
         <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
     </platform>
-    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
     <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
     <plugin name="cordova-plugin-device" spec="2.0.2" />
     <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
@@ -141,4 +142,6 @@
     <mfp:languagePreferences>en</mfp:languagePreferences>
     <mfp:APIproxyURL>/adapters/MobileAPIProxy</mfp:APIproxyURL>
     <mfp:SDKProtocolVersion>2</mfp:SDKProtocolVersion>
+    <allow-navigation href="http://localhost:8100" sessionid="9714472a" />
+    <allow-navigation href="http://localhost:8101" sessionid="4721f88c" />
 </widget>
diff --git a/package-lock.json b/package-lock.json
index 0ce176e83..331c84bd0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -592,9 +592,9 @@
       }
     },
     "@angular/language-service": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.2.tgz",
-      "integrity": "sha512-H09s5pivJq8lip206NrNJ0cXLge9CfthtT3tY+OGXn5Xiyvjxs+dOkVytoGauHE3mdge/Wn/rxoGmm/oYKejNQ==",
+      "version": "11.2.6",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-11.2.6.tgz",
+      "integrity": "sha512-jzIutEzUbfBZxLWftpi5oXusL3rwbe2P/6HnNd8NUeBos9+G859R7hCsstAQ61XPn41a2/Fbl+YOwYhdjoBQrw==",
       "dev": true
     },
     "@angular/platform-browser": {
@@ -2055,6 +2055,14 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/http": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/http/-/http-5.31.1.tgz",
+      "integrity": "sha512-J9pLHycF6ndpqIYsyZEVjEnz33jbTWnE5vbq+Lpytd6KO/jE/Lyuy8z0wTzVkKYI1bKpgC+Q0XuBt2UgyEuPdA==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/in-app-browser": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/in-app-browser/-/in-app-browser-5.31.1.tgz",
@@ -2071,6 +2079,30 @@
         "@types/cordova": "^0.0.34"
       }
     },
+    "@ionic-native/splash-screen": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/splash-screen/-/splash-screen-5.31.1.tgz",
+      "integrity": "sha512-Hcy1cMjWLnFE0TrIhpcNwld39dFipOQE63XpKuEhSJXfix1hibrC+0Nc3jEn0zBJUbbAHVJph6s9dohUxRycqg==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
+    "@ionic-native/sqlite": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/sqlite/-/sqlite-5.31.1.tgz",
+      "integrity": "sha512-X26n+6mvqyv94ADG67lHOmDj/Ha+ZVbHztwsWzbvBqmnmgck9y+mo8ndC47UKIXRA/8lwoGMyAtJAfE81eT3mg==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
+    "@ionic-native/sqlite-porter": {
+      "version": "5.31.1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/sqlite-porter/-/sqlite-porter-5.31.1.tgz",
+      "integrity": "sha512-dBIp0f85Qn6KRymOg5dZxlfZTiyMDXRYiO1Eg44UxIsNZx7qchZg63wMRWyZmdnFWMfvYjAbkJ3NKiumqR1z3w==",
+      "requires": {
+        "@types/cordova": "^0.0.34"
+      }
+    },
     "@ionic-native/status-bar": {
       "version": "5.31.1",
       "resolved": "https://registry.npmjs.org/@ionic-native/status-bar/-/status-bar-5.31.1.tgz",
@@ -4223,6 +4255,16 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -5687,11 +5729,6 @@
       "integrity": "sha512-Jb3V72btxf3XHpkPQsGdyc8N6tVBYn1vsxSFj43fIz9vonJDUThYPCJJHqk6PX6N4dJw6I4FjxkpfCR4LDYMlw==",
       "dev": true
     },
-    "cordova-plugin-file": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/cordova-plugin-file/-/cordova-plugin-file-6.0.2.tgz",
-      "integrity": "sha512-m7cughw327CjONN/qjzsTpSesLaeybksQh420/gRuSXJX5Zt9NfgsSbqqKDon6jnQ9Mm7h7imgyO2uJ34XMBtA=="
-    },
     "cordova-plugin-filepath": {
       "version": "1.5.8",
       "resolved": "https://registry.npmjs.org/cordova-plugin-filepath/-/cordova-plugin-filepath-1.5.8.tgz",
@@ -7706,6 +7743,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -10691,6 +10735,13 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -16806,7 +16857,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
@@ -17433,7 +17488,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/package.json b/package.json
index f84ffef2b..5c27470eb 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,12 @@
     "@ionic-native/core": "^5.0.7",
     "@ionic-native/file": "^5.30.0",
     "@ionic-native/file-path": "^5.30.0",
+    "@ionic-native/http": "^5.31.1",
     "@ionic-native/in-app-browser": "^5.28.0",
     "@ionic-native/ionic-webview": "^5.30.0",
+    "@ionic-native/splash-screen": "^5.31.1",
+    "@ionic-native/sqlite": "^5.31.1",
+    "@ionic-native/sqlite-porter": "^5.31.1",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic-native/wheel-selector": "^5.31.1",
     "@ionic/angular": "^5.5.4",
@@ -41,7 +45,6 @@
     "angular-calendar": "^0.28.22",
     "angular-tag-cloud-module": "^5.2.2",
     "cordova-plugin-camera": "^5.0.1",
-    "cordova-plugin-file": "^6.0.2",
     "cordova-plugin-filepath": "^1.5.8",
     "cordova-plugin-mfp-push": "^8.0.2020072705",
     "cordova-plugin-okhttp": "^2.0.0",
@@ -66,7 +69,7 @@
     "@angular/cli": "11.2.1",
     "@angular/compiler": "~11.2.2",
     "@angular/compiler-cli": "^11.2.2",
-    "@angular/language-service": "~11.2.2",
+    "@angular/language-service": "^11.2.6",
     "@ionic/angular-toolkit": "^3.0.0",
     "@ionic/lab": "3.1.7",
     "@types/jasmine": "~3.6.0",
@@ -83,7 +86,7 @@
     "cordova-plugin-ionic-webview": "^4.2.1",
     "cordova-plugin-splashscreen": "^5.0.2",
     "cordova-plugin-statusbar": "^2.4.2",
-    "cordova-plugin-whitelist": "^1.3.3",
+    "cordova-plugin-whitelist": "^1.3.4",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
@@ -99,7 +102,6 @@
   "description": "An Ionic project",
   "cordova": {
     "plugins": {
-      "cordova-plugin-whitelist": {},
       "cordova-plugin-statusbar": {},
       "cordova-plugin-device": {},
       "cordova-plugin-splashscreen": {},
@@ -126,4 +128,4 @@
     "url": "git+https://Kayaya@bitbucket.org/equilibriumito/gabinete-digital.git"
   },
   "license": "ISC"
-}
\ No newline at end of file
+}
diff --git a/resources/android/icon/drawable-hdpi-icon.png b/resources/android/icon/drawable-hdpi-icon.png
index 3f84fc1b2..05d953939 100644
Binary files a/resources/android/icon/drawable-hdpi-icon.png and b/resources/android/icon/drawable-hdpi-icon.png differ
diff --git a/resources/android/icon/drawable-ldpi-icon.png b/resources/android/icon/drawable-ldpi-icon.png
index 3de9b4f79..74a5391bc 100644
Binary files a/resources/android/icon/drawable-ldpi-icon.png and b/resources/android/icon/drawable-ldpi-icon.png differ
diff --git a/resources/android/icon/drawable-mdpi-icon.png b/resources/android/icon/drawable-mdpi-icon.png
index 4b455d317..c34391965 100644
Binary files a/resources/android/icon/drawable-mdpi-icon.png and b/resources/android/icon/drawable-mdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xhdpi-icon.png b/resources/android/icon/drawable-xhdpi-icon.png
index fe47ccce8..1d76d5249 100644
Binary files a/resources/android/icon/drawable-xhdpi-icon.png and b/resources/android/icon/drawable-xhdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xxhdpi-icon.png b/resources/android/icon/drawable-xxhdpi-icon.png
index 391b4af13..7fb3bb824 100644
Binary files a/resources/android/icon/drawable-xxhdpi-icon.png and b/resources/android/icon/drawable-xxhdpi-icon.png differ
diff --git a/resources/android/icon/drawable-xxxhdpi-icon.png b/resources/android/icon/drawable-xxxhdpi-icon.png
index 09e50b7b3..97f8b550b 100644
Binary files a/resources/android/icon/drawable-xxxhdpi-icon.png and b/resources/android/icon/drawable-xxxhdpi-icon.png differ
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0193e8f4b..2d637573b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { ChatPage } from './pages/chat/chat.page';
+import { MessagesPage } from './pages/chat/messages/messages.page';
 
 const routes: Routes = [
   {
@@ -9,81 +11,35 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
-  },
-  {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  },
-  {
-    path: 'chat',
-    loadChildren: () => import('./pages/chat/chat.module').then( m => m.ChatPageModule)
-  },
-  {
-    path: 'publications',
-    loadChildren: () => import('./pages/publications/publications.module').then( m => m.PublicationsPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header',
-    loadChildren: () => import('./shared/header/header.module').then( m => m.HeaderPageModule)
-  },
-  {
-    path: 'header-pr',
-    loadChildren: () => import('./shared/header-pr/header-pr.module').then( m => m.HeaderPrPageModule)
-  },
-  {
-    path: 'btn-seguinte',
-    loadChildren: () => import('./shared/btn-seguinte/btn-seguinte.module').then( m => m.BtnSeguintePageModule)
-  },
-  {
-    path: 'btn-modal-dismiss',
-    loadChildren: () => import('./shared/btn-modal-dismiss/btn-modal-dismiss.module').then( m => m.BtnModalDismissPageModule)
-  },
-  {
-    path: 'chat-popover',
-    loadChildren: () => import('./shared/popover/chat-popover/chat-popover.module').then( m => m.ChatPopoverPageModule)
-  },
-  {
-    path: 'chat-options-popover',
-    loadChildren: () => import('./shared/popover/chat-options-popover/chat-options-popover.module').then( m => m.ChatOptionsPopoverPageModule)
   },
  {
-    path: 'messages-options',
-    loadChildren: () => import('./shared/popover/messages-options/messages-options.module').then( m => m.MessagesOptionsPageModule)
+    path: 'empty-chat',
+    loadChildren: () => import('./shared/chat/empty-chat/empty-chat.module').then( m => m.EmptyChatPageModule)
   },
   {
-    path: 'group-duration',
-    loadChildren: () => import('./shared/popover/group-duration/group-duration.module').then( m => m.GroupDurationPageModule)
+    path: 'btn-criar',
+    loadChildren: () => import('./shared/buttons/btn-criar/btn-criar.module').then( m => m.BtnCriarPageModule)
   },
   {
-    path: 'header-no-search',
-    loadChildren: () => import('./shared/headers/header-no-search/header-no-search.module').then( m => m.HeaderNoSearchPageModule)
+    path: 'btn-adicionar',
+    loadChildren: () => import('./shared/buttons/btn-adicionar/btn-adicionar.module').then( m => m.BtnAdicionarPageModule)
+  },
+  {
+    path: 'empty-container',
+    loadChildren: () => import('./shared/empty-container/empty-container.module').then( m => m.EmptyContainerPageModule)
+  },
+  {
+    path: 'events-to-approve',
+    loadChildren: () => import('./shared/gabinete-digital/events-to-approve/events-to-approve.module').then( m => m.EventsToApprovePageModule)
+  },
+  {
+    path: 'expedients',
+    loadChildren: () => import('./shared/gabinete-digital/expedients/expedients.module').then( m => m.ExpedientsPageModule)
   },
 
-
-
  /*  {
-    path: 'cal-modal',
-    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
-  }, */
-  /* {
-    path: 'events',
-    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
-  }, */
-
-  /* 
-  {
-    path: 'gabinete-digital-menu',
-    loadChildren: () => import('./pages/gabinete-digital-menu/gabinete-digital-menu.module').then( m => m.GabineteDigitalMenuPageModule)
-  },
-
-
-  {
-    path: 'view-event',
-    loadChildren: () => import('./pages/view-event/view-event.module').then( m => m.ViewEventPageModule)
-  }, */
+    path: 'chat',
+    component: ChatPage
+  } */
 
 ];
 @NgModule({
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7788d3f35..5dab677c6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 import { Platform } from '@ionic/angular';
-/* import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+/* import { SplashScreen } from '@ionic-native/splash-screen/ngx'; */
 import { StatusBar } from '@ionic-native/status-bar/ngx';
- */
+
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
@@ -12,16 +12,16 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 export class AppComponent {
   constructor(
     private platform: Platform,
-   /*  private splashScreen: SplashScreen,
-    private statusBar: StatusBar */
+    /* private splashScreen: SplashScreen, */
+    private statusBar: StatusBar
   ) {
     this.initializeApp();
   }
 
   initializeApp() {
     this.platform.ready().then(() => {
-      /* this.statusBar.styleDefault();
-      this.splashScreen.hide(); */
+      this.statusBar.styleDefault();
+      /* this.splashScreen.hide(); */
     });
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 83bd08cfa..a1681cb40 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,8 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
-/* import { SplashScreen } from '@ionic-native/splash-screen/ngx';
-import { StatusBar } from '@ionic-native/status-bar/ngx'; */
+// import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -13,12 +13,11 @@ import { HttpClientModule } from '@angular/common/http';
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
 
-import { File } from '@ionic-native/File/ngx';
+//import { File } from '@ionic-native/File/ngx';
 import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { Camera } from '@ionic-native/camera/ngx';
 import { IonicStorageModule } from '@ionic/storage';
-import { PipesModule } from './pipes/pipes.module';
 //
 
 import { CommonModule } from '@angular/common';
@@ -28,11 +27,12 @@ import { FormsModule } from '@angular/forms';
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MessagesPage } from './pages/chat/messages/messages.page';
 
 
 @NgModule({
-  declarations: [AppComponent],
-  entryComponents: [],
+  declarations: [AppComponent,MessagesPage,],
+  entryComponents: [MessagesPage],
   imports: [BrowserModule, 
     CommonModule,
     FormsModule,
@@ -43,17 +43,16 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     IonicModule.forRoot(),
     IonicStorageModule.forRoot(),
     AppRoutingModule, 
-    PipesModule,
-    HttpClientModule, 
+    HttpClientModule,
     ],
   providers: [
-    /* StatusBar,
-    SplashScreen, */
+    StatusBar,
+    //SplashScreen,
     HttpClientModule,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     InAppBrowser,
     Camera,
-    File,
+    //File,
     WebView,
     FilePath,
   ],
diff --git a/src/app/components/calendar/calendar.component.html b/src/app/components/calendar/calendar.component.html
deleted file mode 100644
index a23ca3d0c..000000000
--- a/src/app/components/calendar/calendar.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div class="container">
-</div>
diff --git a/src/app/components/calendar/calendar.component.scss b/src/app/components/calendar/calendar.component.scss
deleted file mode 100644
index ef8de7ae7..000000000
--- a/src/app/components/calendar/calendar.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: "Quicksand", sans-serif;
-  }
-  
-  html {
-    font-size: 62.5%;
-  }
-  
-  .container {
-    width: 100%;
-    height: 100vh;
-    background-color: #12121f;
-    color: #eee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
\ No newline at end of file
diff --git a/src/app/components/calendar/calendar.component.ts b/src/app/components/calendar/calendar.component.ts
deleted file mode 100644
index f2a841df3..000000000
--- a/src/app/components/calendar/calendar.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrls: ['./calendar.component.scss'],
-})
-export class CalendarComponent implements OnInit {
-
-  date = new Date();
-  months = [
-    "Janeiro",
-    "Fevereiro",
-    "Março",
-    "Abril",
-    "Maio",
-    "Junho",
-    "Julho",
-    "Agosto",
-    "Setembro",
-    "Outubro",
-    "Novembro",
-    "Dezembro",
-  ];
-  weekdays = [
-    "Domingo", 
-    "Segunda-feira", 
-    "Terça-feira", 
-    "Quarta-feira", 
-    "Quinta-feira", 
-    "Sexta-feira", 
-    "Sábado"
-  ];
-  currentMonth = this.months[this.date.getMonth()];
-  customDate = this.weekdays[this.date.getDay()]+ ", "  + this.date.getDate() +" de "  + ( this.months[this.date.getMonth()]);
-  
-  constructor() { }
-
-  ngOnInit() {
-  }
-}
diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
deleted file mode 100644
index b415ba1d4..000000000
--- a/src/app/components/components.module.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-import { CalendarComponent } from './calendar/calendar.component';
-
-
-
-
-
diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 203119606..5226aa346 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -1,6 +1,8 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeGuard } from '../guards/home.guard';
+import { GroupMessagesPage } from '../pages/chat/group-messages/group-messages.page';
+import { MessagesPage } from '../pages/chat/messages/messages.page';
 import { UserDataResolver } from '../resolvers/userData.resolver';
 
 import { HomePage } from './home.page';
@@ -65,7 +67,15 @@ const routes: Routes = [
           {
             path:':eventId/:caller',
             loadChildren: ()=> import('../pages/events/event-detail/event-detail.module').then(m => m.EventDetailPageModule),
-          }
+          },
+          {
+            path: 'eventId/:caller',
+            loadChildren: () => import('../pages/agenda/view-event/view-event.module').then( m => m.ViewEventPageModule)
+          },
+          {
+            path: 'edit-event',
+            loadChildren: () => import('../pages/agenda/edit-event/edit-event.module').then( m => m.EditEventPageModule)
+          },
         ]
       },
       {
@@ -150,7 +160,42 @@ const routes: Routes = [
           {
             path:'',
             loadChildren: ()=> import('../pages/chat/chat.module').then(m => m.ChatPageModule)
-          }
+          },
+          {
+            path:'messages',
+            children: [
+              {
+                path:'',
+                loadChildren: ()=> import('../pages/chat/messages/messages.module').then(m => m.MessagesPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../shared/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
+              },
+              {
+                path:'contacts',
+                loadChildren: ()=> import('../pages/chat/messages/contacts/contacts.module').then(m => m.ContactsPageModule)
+              },
+            ]
+          },
+          {
+            path:'group-messages',
+            children:[
+              {
+                path:'',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-messages.module').then(m => m.GroupMessagesPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../shared/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+              {
+                path:'group-contacts',
+                loadChildren: ()=> import('../pages/chat/group-messages/group-contacts/group-contacts.module').then(m => m.GroupContactsPageModule)
+              },
+            ]
+          },
+
         ]
       },
     ]
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 3d3c833b0..6af927624 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -1,33 +1,30 @@
-
-
 <ion-tabs class="tab">
-    <ion-tab-bar class="bottoms" slot="bottom">
-      <ion-tab-button tab="events">
-        <!-- <ion-icon name="home"></ion-icon> -->
-        <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
-        <ion-badge color="danger">{{totalEvent}}</ion-badge>
-        <ion-label>Início</ion-label>
-      </ion-tab-button>
-  
-      <ion-tab-button tab="agenda">
-        <!-- <ion-icon name="calendar"></ion-icon> -->
-        <ion-icon  class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
-        <ion-label>Agenda</ion-label>
-      </ion-tab-button>
-      <ion-tab-button tab="gabinete-digital">
-          <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
-          <ion-badge color="danger">{{totalExpediente}}</ion-badge>
-          <ion-label>Gabinete</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="publications">
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
-          <ion-label>Ações</ion-label>
-        </ion-tab-button>
-        <ion-tab-button tab="chat">
-          <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
-          <ion-label>Chat</ion-label>
-        </ion-tab-button>
-    </ion-tab-bar> 
-  
-  </ion-tabs>
+  <ion-tab-bar class="bottoms" slot="bottom">
+    <ion-tab-button tab="events">
+      <!-- <ion-icon name="home"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-home.svg"></ion-icon>
+      <ion-badge color="danger">{{totalEvent}}</ion-badge>
+      <ion-label>Início</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="agenda">
+      <!-- <ion-icon name="calendar"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-calendar.svg"></ion-icon>
+      <ion-label>Agenda</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="gabinete-digital">
+      <!-- <ion-icon name="file-tray-stacked"></ion-icon> -->
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-gabinete-inactive.svg"></ion-icon>
+      <ion-badge color="danger">{{totalExpediente}}</ion-badge>
+      <ion-label>Gabinete</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="publications">
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-actions.svg"></ion-icon>
+      <ion-label>Acções</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="chat">
+      <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
+      <ion-label>Chat</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+</ion-tabs>
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index 57a1ccc35..8b6ee1ac6 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -1,7 +1,7 @@
 
 ion-tab-bar{
-    --background: #f9f9f9;
-    --color: #061b52;
+  --background: #f9f9f9;
+  --color: #061b52;
 }
 
 // Badge
@@ -33,4 +33,12 @@ ion-badge {/*  */
     display: flex;
     justify-content: space-around;
   }
+}
+
+
+@media only screen and (min-width: 1366px) {
+
+  ion-tabs.tab .bottoms{
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 06a959355..c04ee6542 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -2,20 +2,11 @@
 ///<reference path="../../../plugins/cordova-plugin-mfp-push/typings/mfppush.d.ts" />
 import { Component, OnInit, NgZone } from '@angular/core';
 import { EventsService } from '../services/events.service';
-import { formatDate } from '@angular/common';
 import { Event } from '../models/event.model';
 import { ProcessesService } from '../services/processes.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { ModalController } from '@ionic/angular';
-import { PublicationDetailPage } from '../../app/pages/publications/view-publications/publication-detail/publication-detail.page';
-import { ViewPublicationsPage } from '../../app/pages/publications/view-publications/view-publications.page';
-import { ExpedienteDetailPage } from '../../app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page'
-import { ViewEventPage } from '../../app/pages/agenda/view-event/view-event.page'
-import { ApproveEventModalPage } from '../../app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
-
 /* import { Plugins, PushNotification, PushNotificationToken, PushNotificationActionPerformed, Modals } from '@capacitor/core'; */
 import { Router } from '@angular/router';
-import { MethodCall } from '@angular/compiler';
 
 /* const { PushNotifications, LocalNotifications, LocalNotificationAction } = Plugins; */
 
@@ -33,7 +24,13 @@ export class HomePage implements OnInit {
   totalExpediente = 0;
   profile: string;
 
-  constructor(private zone: NgZone,private eventService: EventsService, private processesbackend: ProcessesService, private router: Router, private modalController: ModalController,) { }
+  constructor(private zone: NgZone,private eventService: EventsService, private processesbackend: ProcessesService, private router: Router, private modalController: ModalController) {
+    
+    router.events.subscribe((val) => {
+      document.querySelectorAll('ion-modal').forEach((e)=>e.remove())
+    });
+    
+  }
 
   ngOnInit() {
     this.mobileFirstTest()
@@ -61,7 +58,8 @@ export class HomePage implements OnInit {
     this.processesbackend.GetTasksList("Expediente", true).subscribe(result => {
       this.totalExpediente = result;
     });
-
+    
+/*
     PushNotifications.addListener('registrationError', (error: any) => {
       alert('Error on registration: ' + JSON.stringify(error));
     });
@@ -188,7 +186,7 @@ export class HomePage implements OnInit {
 
   }
 
-   async openApproveModal(eventSerialNumber){
+  /*  async openApproveModal(eventSerialNumber){
     const modal = await this.modalController.create({
       component: ApproveEventModalPage,
       componentProps:{
@@ -200,9 +198,9 @@ export class HomePage implements OnInit {
 
     await modal.present();
     modal.onDidDismiss();
-  } 
+  }  */
 
-  async viewEventDetail(eventId:any) {
+ /*  async viewEventDetail(eventId:any) {
     console.log(this.profile);
     
     const modal = await this.modalController.create({
@@ -215,7 +213,7 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
+  } */
 
   /* async viewExpedientDetail(serialNumber:any) {
     console.log(this.profile);
@@ -256,7 +254,7 @@ export class HomePage implements OnInit {
 
 
 
-  async viewPublicationDetail(folderId) {
+ /*  async viewPublicationDetail(folderId) {
     const modal = await this.modalController.create({
       component: PublicationDetailPage,
       componentProps: {
@@ -267,15 +265,13 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
-
-  async viewPublications(folderId) {
-
+  } */
 
+  /* async viewPublications(folderId) {
     const modal = await this.modalController.create({
       component: ViewPublicationsPage,
-      /* enterAnimation,
-      leaveAnimation, */
+      enterAnimation,
+      leaveAnimation,
       componentProps: {
         item: folderId,
       },
@@ -284,6 +280,9 @@ export class HomePage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
+  } */
+
+
+
 
 }
diff --git a/src/app/models/participant.model.ts b/src/app/models/participant.model.ts
index f2b96575b..f8e12bd1d 100644
--- a/src/app/models/participant.model.ts
+++ b/src/app/models/participant.model.ts
@@ -1,5 +1,5 @@
 export class Participant{
-    UserId: string;
+    UserEmail: string;
     UserType: string;
 
     /* Deadline: Date; */
diff --git a/src/app/models/user.model.ts b/src/app/models/user.model.ts
index a4bcde816..a2ee351ba 100644
--- a/src/app/models/user.model.ts
+++ b/src/app/models/user.model.ts
@@ -2,5 +2,6 @@ export class User {
     username: string;
     password: string;
     domainName: string;
-    BasicAuthKey: string 
+    BasicAuthKey: string; 
+    UserId?: number;
   }
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.module.ts b/src/app/pages/agenda/agenda.module.ts
index a72bd12bd..f0e7dabda 100644
--- a/src/app/pages/agenda/agenda.module.ts
+++ b/src/app/pages/agenda/agenda.module.ts
@@ -7,20 +7,26 @@ import { IonicModule } from '@ionic/angular';
 import { AgendaPageRoutingModule } from './agenda-routing.module';
 
 import { AgendaPage } from './agenda.page';
-
-
 import { NgCalendarModule } from 'ionic2-calendar';
 import { CalModalPageModule } from '../cal-modal/cal-modal.module';
 
 import { registerLocaleData } from '@angular/common';
 import localeDe from '@angular/common/locales/pt';
-import { CalendarComponent } from 'src/app/components/calendar/calendar.component';
 import { SharedModule } from 'src/app/shared/shared.module';
-registerLocaleData(localeDe);
+import { NewEventPage } from "src/app/shared/agenda/new-event/new-event.component"
+import { EditEventComponent } from 'src/app/shared/agenda/edit-event/edit-event.component';
+import { ViewEventPage } from 'src/app/shared/agenda/view-event/view-event.page';
+import { EventListComponent } from "src/app/shared/agenda/event-list/event-list.component";
+import { ApproveEventComponent } from "src/app/shared/agenda/approve-event/approve-event.component";
+import { AttendeesPage } from 'src/app/shared/event/attendees/attendees.page';
+import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
 
 
+registerLocaleData(localeDe);
+
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
+import { EventsToApprovePage } from 'src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page';
 @NgModule({
   imports: [
     CommonModule,
@@ -36,7 +42,20 @@ import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
     NgCalendarModule,
     CalModalPageModule,
   ],
-  declarations: [AgendaPage, CalendarComponent],
+  declarations: [
+    AgendaPage, 
+    NewEventPage,
+    EditEventComponent,
+    ViewEventPage,
+    EventListComponent,
+    ApproveEventComponent,
+    AttendeesPage,
+    AttendeeModalPage,
+    EventsToApprovePage,
+  ],
+  entryComponents: [
+    EventsToApprovePage,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
     { provide: LOCALE_ID, useValue: 'pt-PT'}
diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 5cb9cdebe..60edf220b 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -1,277 +1,395 @@
-<ion-header>
-  <app-header></app-header>
+<ion-header class="ion-no-border bg-blue">
+  <app-header class="bg-blue"></app-header>
 </ion-header>
-<ion-header>
-  <div class="bg-blue">
-  <div class="main-content">
-  <!-- Toolbar -->
-    <div>
-      <!--  Calendar is here -->
-      <div [ngSwitch]="segment">
-        <div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
 
-          <ion-row class="ion-justify-content-between calendar-tool-tip">
-            <ion-row class="ion-align-items-center">
-              <!-- Move back one screen of the slides -->
+<ion-content id="timeline-conteiner agenda-container" class="timeline bg-blue">
+
+  <div class="d-flex bg-blue container-wrapper">
+    
+    <div class="calendar-timeline d-flex flex-column height-100 bg-blue">
+      <div class="calendar-wrapper">
+        
+        <div class="main-content">
+        <!-- Toolbar -->
+        <ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+        <div>
+          <!--  Calendar is here -->
+          <div [ngSwitch]="segment">
+            <div class="calendar-container" *ngSwitchCase="'Combinado'" [style.height]="calendarHeight">
+      
+              <ion-row class="ion-justify-content-between calendar-tool-tip">
+                <ion-row class="ion-align-items-center">
+                  <!-- Move back one screen of the slides -->
+                  
+                  <div (click)="back()" class="arrow">
+                    <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
+                  </div>
+      
+                  <!-- Move forward one screen of the slides -->
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+      <!--               <div class="drop-down">
+                    <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+                    <div class="drop-down-container">
+                      <ul>
+                        <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
+                      </ul>
+                    </div>
+                  </div> -->
+                  <!-- Move forward one screen of the slides -->
+                  <div (click)="next()" class="arrow">
+                    <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
+                  </div>
+      
+                </ion-row>
+                <ion-row class="ion-align-items-center">
+                  <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
+                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
+                  <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
+                  <ion-icon (click)="clearContact();openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
+                </ion-row> 
+              </ion-row> 
               
-              <div (click)="back()" class="arrow">
-                <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
-              </div>
-
-              <!-- Move forward one screen of the slides -->
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-<!--               <div class="drop-down">
-                <ion-icon  slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-                <div class="drop-down-container">
-                  <ul>
-                    <li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
-                  </ul>
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar  
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+      
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
+                   
+                  <div class="day">
+                    {{ view.dates[row*7+col].label }}
+                  </div>  
+                   
                 </div>
-              </div> -->
-              <!-- Move forward one screen of the slides -->
-              <div (click)="next()" class="arrow">
-                <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
-              </div>
-
+              </ng-template>
+            </div>
+            <div class="calendar-container" *ngSwitchCase="'Pessoal'">
+              <ion-row>
+                <!-- Move back one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="back()">
+                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+                <!-- The title of the calendar in the middle -->
+                <ion-col size="8" class="ion-text-center">
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+                </ion-col>
+            
+                <!-- Move forward one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="next()">
+                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+              </ion-row>
+            
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+      
+              <calendar 
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+              <!-- (onTimeSelected)="onTimeSelected($event)" -->
+        
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [class.with-event]="view.dates[row*7+col].events.length">
+                  {{view.dates[row*7+col].label}}
+                  <div class="indicator-container">
+                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+                  </div>
+                </div>
+              </ng-template> 
+        
+            </div>
+            <div class="calendar-container" *ngSwitchCase="'Oficial'">
+              <ion-row>
+                <!-- Move back one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="back()">
+                    <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+                <!-- The title of the calendar in the middle -->
+                <ion-col size="8" class="ion-text-center">
+                  <h2 class="capitaliseText">{{ viewTitle }}</h2>
+                </ion-col>
+            
+                <!-- Move forward one screen of the slides -->
+                <ion-col size="2">
+                  <ion-button fill="clear" (click)="next()">
+                    <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+                  </ion-button>
+                </ion-col>
+              </ion-row>
+              
+      
+              <table class="custom-calendar-header">
+                <thead>
+                  <th>S</th>
+                  <th>T</th>
+                  <th>Q</th>
+                  <th>Q</th>
+                  <th>S</th>
+                  <th>S</th>
+                  <th>D</th>
+                </thead>
+              </table>
+              
+              <calendar 
+                class="calendar-component"
+                [eventSource]="eventSource"
+                [calendarMode]="calendar.mode"
+                [currentDate]="calendar.currentDate"
+                (onEventSelected)="onEventSelected($event)"
+                (onTitleChanged)="onViewTitleChanged($event)"
+                (onRangeChanged)="onRangeChanged($event)"
+                (onCurrentDateChanged)="onCurrentChanged($event)"
+                queryMode="remote"
+                startHour="6"
+                endHour="20"
+                step="30"
+                startingDayMonth="1"
+                noEventsLabel="Sem Eventos"
+                allDayLabel="Todo o dia"
+                [monthviewDisplayEventTemplate]="template"
+              >
+              </calendar>
+        
+              <!-- Adding a customized ng-template -->
+              <ng-template #template let-view="view" let-row="row" let-col="col">
+                <div [class.with-event]="view.dates[row*7+col].events.length">
+                  {{view.dates[row*7+col].label}}
+                  <div class="indicator-container">
+                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+                  </div>
+                </div>
+              </ng-template> 
+        
+            </div>
+          </div>
+      
+          <div class="calendar-border">
+            
+          </div>
+      
+      
+          <!-- Calendar currente date -->
+          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien pb-5">
+            <ion-row class="timeline-date align-center">
+              <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
+              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='333px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
+            </ion-row>
+            <ion-row class="timeline-date align-center">
+              <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
+            </ion-row>
+            <ion-row class="filter ion-align-items-center">
+              <div class="filter-name">{{timelineFilterState}}</div>
+              <!-- Icon -->
+              <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+              <!-- List -->
+              <ul *ngIf="showTimelineFilterState">
+                <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
+                <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
+                <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
+              </ul>
             </ion-row>
-            <ion-row class="ion-align-items-center">
-              <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
-              <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
-              <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
-              <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
-            </ion-row> 
-          </ion-row> 
-          
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar  
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
-              {{ view.dates[row*7+col].label }} 
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
-              </div>
-            </div>
-          </ng-template>
-        </div>
-        <div class="calendar-container" *ngSwitchCase="'Pessoal'">
-          <ion-row>
-            <!-- Move back one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="back()">
-                <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-            <!-- The title of the calendar in the middle -->
-            <ion-col size="8" class="ion-text-center">
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-            </ion-col>
-        
-            <!-- Move forward one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="next()">
-                <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-          </ion-row>
-        
-
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-
-          <calendar 
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-          <!-- (onTimeSelected)="onTimeSelected($event)" -->
-    
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [class.with-event]="view.dates[row*7+col].events.length">
-              {{view.dates[row*7+col].label}}
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
-              </div>
-            </div>
-          </ng-template> 
-    
-        </div>
-        <div class="calendar-container" *ngSwitchCase="'Oficial'">
-          <ion-row>
-            <!-- Move back one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="back()">
-                <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
-            <!-- The title of the calendar in the middle -->
-            <ion-col size="8" class="ion-text-center">
-              <h2 class="capitaliseText">{{ viewTitle }}</h2>
-            </ion-col>
-        
-            <!-- Move forward one screen of the slides -->
-            <ion-col size="2">
-              <ion-button fill="clear" (click)="next()">
-                <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
-              </ion-button>
-            </ion-col>
           </ion-row>
           
-
-          <table class="custom-calendar-header">
-            <thead>
-              <th>S</th>
-              <th>T</th>
-              <th>Q</th>
-              <th>Q</th>
-              <th>S</th>
-              <th>S</th>
-              <th>D</th>
-            </thead>
-          </table>
-          
-          <calendar 
-            class="calendar-component"
-            [eventSource]="eventSource"
-            [calendarMode]="calendar.mode"
-            [currentDate]="calendar.currentDate"
-            (onEventSelected)="onEventSelected($event)"
-            (onTitleChanged)="onViewTitleChanged($event)"
-            (onRangeChanged)="onRangeChanged($event)"
-            (onCurrentDateChanged)="onCurrentChanged($event)"
-            queryMode="remote"
-            startHour="6"
-            endHour="20"
-            step="30"
-            startingDayMonth="1"
-            noEventsLabel="Sem Eventos"
-            allDayLabel="Todo o dia"
-            [monthviewDisplayEventTemplate]="template"
-          >
-          </calendar>
-    
-          <!-- Adding a customized ng-template -->
-          <ng-template #template let-view="view" let-row="row" let-col="col">
-            <div [class.with-event]="view.dates[row*7+col].events.length">
-              {{view.dates[row*7+col].label}}
-              <div class="indicator-container">
-                <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
+          <div class="pb-5  d-none d-md-flex">
+            <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+              <div>Própria</div>
+            </div>
+            <div class="flex-grow-1 text-black">
+              <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+                <div>Presidente da República</div>
               </div>
             </div>
-          </ng-template> 
-    
+          </div>
+
         </div>
+        </div>
+
       </div>
+      <div class="timeline-wrapper flex-grow-1" >
+          <!-- Progress bar -->
+        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+          <ion-refresher-content>
+          </ion-refresher-content>
+        </ion-refresher>
+
+        <!-- Timeline -->
+        <div>
+          <div class="timeline-container d-flex" >
+            
+            <div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1  d-md-none" *ngIf="showTimeline">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+  
+            <div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" *ngIf="showTimelineMD">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelineMD"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
+            <div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" *ngIf="showTimelinePR">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelinePR"
+                (eventClicked)="clearContact();eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
+          </div>
+        </div>
 
-      <div class="calendar-border">
-        
       </div>
-
-
-      <!-- Calendar currente date -->
-      <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
-        
-        <ion-row class="timeline-date align-center">
-          <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
-          <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
-          <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
-        </ion-row>
-        <ion-row class="filter ion-align-items-center">
-          <div class="filter-name">{{timelineFilterState}}</div>
-          <!-- Icon -->
-          <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-          <!-- List -->
-          <ul *ngIf="showTimelineFilterState">
-            <li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
-            <li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
-            <li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
-          </ul>
-        </ion-row>
-      </ion-row>
     </div>
-  </div>
-</div>
-</ion-header>
-<ion-content class="timeline">
 
-  <!-- Progress bar -->
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-    <ion-refresher-content>
-    </ion-refresher-content>
-  </ion-refresher>
+    <div class="event-details  bg-blue ">
 
-  <!-- Timeline -->
-  <div class="timeline-container"  *ngIf="showTimeline">
-    <mwl-demo-utils-calendar-header class="timeline" 
-      [(view)]="view" 
-      [(viewDate)]="viewDate"
-      [dayStartHour]="0"
-      [dayEndHour]="23">
-    </mwl-demo-utils-calendar-header>
-    
-    <div [ngSwitch]="view">
-      <mwl-calendar-day-view
-        *ngSwitchCase="'day'"
-        [viewDate]="viewDate"
-        [events]="events"
-        (eventClicked)="eventClicked($event)"
+      <div *ngIf="(
+        mobileComponent.showAddNewEvent == false &&
+        mobileComponent.showEditEvent == false &&
+        mobileComponent.showEventDetails == false &&
+        mobileComponent.showEventList == false &&
+        mobileComponent.showEventToApprove == false &&
+        mobileComponent.showAttendees == false &&
+        mobileComponent.showAttendeeModal == false
+        )
+        "
+        class="text-black nothing-to-show">
+          Nenhum evento selecionado
+      </div>
+      
+      <!-- New -->
+      <app-new-event  *ngIf="mobileComponent.showAddNewEvent"
+        [profile]="profile"
+        [selectedSegment]=segment
+        [selectedDate]="eventSelectedDate"
+        (onAddEvent)="openAddEventDismiss($event)"
+        (openAttendeesComponent)="openAttendeesComponent($event)"
+        (cloneAllmobileComponent)="cloneAllmobileComponent()"
+        [eventAttendees]="contacts"
+        (clearContact)="clearContact()"
+        (setContact)="setContact($event)"
+        
+      ></app-new-event>
+      <!-- Edit -->
+      <app-edit-event  *ngIf="mobileComponent.showEditEvent"
+        [profile]="profile"
+        [selectedSegment]="segment"
+        [postEvent]="postEvent"
+        (clearContact)="clearContact()"
+        (openAttendeesComponent)="openAttendeesComponent($event)"
+        (setContact)="setContact($event)"
+        (closeComponent)="closeComponentEditEventOrAdd()"
+      ></app-edit-event>
+
+      <!-- View -->
+      <app-view-event *ngIf="mobileComponent.showEventDetails"
+        [profile]="profile"
+        [eventId]="selectedEventId"
+        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
+        [eventAttendees]="contacts"
+      ></app-view-event>
+
+      
+      <app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
+        [profile]="profile"
+        (approveEventDismiss) = "approveEventDismiss($event)"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
       >
-      </mwl-calendar-day-view>
+      </app-event-list>
+
+      <app-approve-event  class="d-flex flex-column" *ngIf="mobileComponent.showEventToApprove" [class.transparent]="mobileComponent.transparentEventToApprove"
+        [serialNumber] = "eventToaprove.serialNumber"
+        (cloneAllmobileComponent)="viewEventDetailDismiss($event)"
+        (closeEventToApprove)="closeEventToApprove()"
+        (AproveEventEditEvent)="AproveEventEditEvent($event)"
+        [eventAttendees]="contacts"
+      >
+      </app-approve-event>
+    
+      <app-attendee-modal
+        class="d-flex flex-column height-100"
+        *ngIf="mobileComponent.showAttendees"
+        [eventAttendees]="contacts"
+        (closeComponent)="GoBackEditOrAdd()"
+        (setContact)="setContact($event)"
+      >
+      </app-attendee-modal>
+
     </div>
+
   </div>
+  
 </ion-content>
\ No newline at end of file
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index ff8f853c4..0f61d69fc 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -464,19 +464,144 @@ td.monthview-primary-with-event {
 
 .timeline-header{
   z-index: 1000000;
-  position: absolute;
   width: 100%;
   background-color: white;
 }
 
 
 .timeline-container{
-  margin-top: 67px;
+  
 }
 
+.calendar-timeline{
+
+  height: 100%;
+  background-color: white;
+  border-top-left-radius: 25px;
+}
 
 .calendar-border{
   background: #ebebeb;
   margin: 13px 20px;
   height: 2px;
-}
\ No newline at end of file
+}
+
+
+.calendar-progress-bar{
+  position: absolute;
+  width: 100%;
+  margin-left: 10px;
+}
+
+
+.agenda-container{
+  overflow: hidden;
+}
+
+.container-wrapper{
+  height: 100%;
+  .calendar-timeline{
+    border-top-right-radius: 24px;
+    width: calc(100%);
+
+    .calendar-wrapper{
+      width: 100%;
+    }
+
+    .timeline-wrapper{
+      width: 100%;
+      overflow: scroll;
+      overflow-x: hidden; 
+    }
+  }
+}
+
+.event-details{
+  width: 100%;
+  background: white;
+  border-top-right-radius: 25px;
+}
+
+
+.event-details{
+  // width: 411px;
+  display: none;
+}
+
+
+@media only screen and (min-width: 1024px) {
+  .container-wrapper{
+    height: 100%;
+    
+    .calendar-timeline{
+      border-top-right-radius: 0px;
+      width: calc(100% - 40%);
+      border-right: 1px solid #d8d8d8;
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      flex-wrap: unset;
+    }
+  }
+  .event-details{
+    display: block;
+  }
+}
+
+
+
+
+
+app-view-event{
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap-reverse;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+app-edit-event{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  z-index: 1000;
+}
+
+app-new-event{
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  z-index: 1000;
+}
+
+app-event-list{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-wrap: wrap-reverse;
+  z-index: 1000;
+}
+
+app-approve-event{
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  z-index: 1000;
+}
+
+.transparent{
+  position: absolute;
+  z-index: 0;
+  opacity: 0;
+}
+
+.nothing-to-show{
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index e077f644e..f56b25a47 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Inject, LOCALE_ID } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, LOCALE_ID, Input } from '@angular/core';
 import { CalendarComponent } from 'ionic2-calendar';
 import { AlertController, ModalController } from '@ionic/angular';
 import { formatDate } from '@angular/common';
@@ -7,9 +7,10 @@ import { EventsService } from 'src/app/services/events.service';
 import { Event } from '../../models/event.model';
 import { Router, NavigationEnd } from '@angular/router';
 import { AlertService } from 'src/app/services/alert.service';
-import { NewEventPage } from './new-event/new-event.page';
-import { ViewEventPage } from './view-event/view-event.page';
-import { momentG }  from 'src/plugin/momentG'
+import { momentG }  from 'src/plugin/momentG';
+import { DomSanitizer } from "@angular/platform-browser";
+import { EventPerson } from 'src/app/models/eventperson.model';
+
 
 // showTimeline
 import { setHours, setMinutes } from 'date-fns';
@@ -21,6 +22,8 @@ import {
 } from 'angular-calendar';
 import { CustomDateFormatter } from './custom-date-formatter.provider';
 import { EventListPage } from '../gabinete-digital/event-list/event-list.page';
+import { ViewEventPage } from './view-event/view-event.page';
+import { NewEventPage } from './new-event/new-event.page';
 
 @Component({
   selector: 'app-agenda',
@@ -47,6 +50,8 @@ export class AgendaPage implements OnInit {
 
   timelineDate: string;
 
+  contacts:  EventPerson[]
+
   setView(view: CalendarView) {
     this.view = view;
   }
@@ -55,28 +60,18 @@ export class AgendaPage implements OnInit {
   showCalendar: boolean;
   calendarHeight: string;
 
-  // timeline
-  monthList = [
-    { name: 'Janeiro', id: 'Jan' },
-    { name: 'Fevereiro', id: 'Feb' },
-    { name: 'Março', id: 'Mar' },
-    { name: 'Abril', id: 'Apr' },
-    { name: 'Maio', id: 'May' },
-    { name: 'Junho', id: 'June' },
-    { name: 'Julho', id: 'July' },
-    { name: 'Agosto', id: 'Aug' },
-    { name: 'Setembro', id: 'Sept' },
-    { name: 'Outubro', id: 'Oct' },
-    { name: 'Novembro', id: 'Nov' },
-    { name: 'Dezembro', id: 'Dec' }
-  ]
-
   // for timeline
   events: CalendarEvent[] = [];
+  TimelinePR:  CalendarEvent[] = [];
+  TimelineMD: CalendarEvent[] = [];
+
+  showTimelinePR = false;
+  showTimelineMD = false;
+  
   // timeline filter
   timelineFilterState: string = 'Todos';
   showTimelineFilterState: boolean;
-  showTimeline: boolean;
+  showTimeline=true;
   
   /* List of events of our calendar */
   eventSource = [];
@@ -95,35 +90,67 @@ export class AgendaPage implements OnInit {
   rangeStartDate: Date;
   rangeEndDate: Date;
 
+  selectedEvent: Event;
+  selectedEventId: string | number;
+  postEvent: any;
+
   @ViewChild(CalendarComponent) myCal: CalendarComponent;
 
-  segment:string;
-  profile:string;
+  segment:  "Combinado" |  "Pessoal" | "Oficial";
+  timelineSedment : "Combinado" |  "Pessoal" | "Oficial";
+  
+  profile:'mdgpr' | 'pr';
 
   eventsList: Event[];
   eventsListPessoal: Event[];
   eventsListOficial: Event[];
 
+  // this will make  toggle add event and.
+  showEventEditOrOpen:  "edit" | "add" | "" = ""
+
   prEventList: Event[];
-  mdEventList: Event[];
+  mdEventList: Event[]
 
   showLoader: boolean;
 
   startTime: Date;
   endTime: Date;
 
+  mobileComponent = {
+    showAddNewEvent: false,
+    showEditEvent: false,
+    showEventDetails: false,
+    showEventList: false,
+    transparentEventList: false,
+    transparentEventToApprove: false,
+    showEventToApprove: false,
+    showAttendees: false,
+    showAttendeeModal: false
+  }
 
+  eventToaprove: any = {
+    back: false,
+    serialNumber: "",
+    saveData: {}
+  }
 
-  constructor( 
+  /**
+   * @description determinant if edit or add event component is open
+   */
+  IsEvent: "edit" | "add" | "view";
+  viewingEventObject: { event: CalendarEvent };
+
+  constructor(
     private alertCtrl: AlertController,
     @Inject(LOCALE_ID) private locale: string,
     private modalCtrl: ModalController,
     private eventService: EventsService,
     private router: Router,
-    private alertCrontroller: AlertService
+    private alertController: AlertService,
+    private sanitizer: DomSanitizer
     ) {
 
-      this.calendarHeight = "347px";
+      this.calendarHeight = "333px";
       this.showCalendar = true;
       this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
 
@@ -131,7 +158,7 @@ export class AgendaPage implements OnInit {
       this.showTimelineFilterState = false;
       this.showTimeline = false;
 
-    }
+  }
 
   ngOnInit() {
     this.profile = "mdgpr";
@@ -140,40 +167,71 @@ export class AgendaPage implements OnInit {
 
     this.router.events.forEach((event) => {
       if(event instanceof NavigationEnd && event.url == "/home/agenda") {
-        if (this.segment == null)
-        {
-          this.segment = "Combinada";
+        if (this.segment == null){
+          this.segment = "Combinado";
         }
-        else
-        {
+        else{
           this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
         }
       }
     });
+
+
+    window.onresize = (event) => {
+      // if not table remove all component
+      if( window.innerWidth <= 1024){
+        console.log('mobile')
+        this.cloneAllmobileComponent();
+      }
+    };
+
   }
 
   //Go to the next view of the calendar month/week/day
   next(){
     this.myCal.slideNext();
+    this.centralizeTimeline(500);
   }
   //Go to the previous view of the calendar
   back(){
     this.myCal.slidePrev();
+    this.centralizeTimeline(500);
   }
   //Shows the title of your view
   onViewTitleChanged(title){
     this.viewTitle = title;
   }
 
-  // Show information of the event for timeline
+  // show information about the clicked event in timeline
   eventClicked({ event }: { event: CalendarEvent }): void {
-    console.log('Event clicked', event);
+  /*     console.log('Event clicked', event); */
+
+    this.IsEvent= "view";
     
+    this.viewingEventObject = {event};
+
     this.eventSelectedDate =  event.start;
-    this.viewEventDetail(event.id);
-    /* this.router.navigate(["/home/agenda", event.id, 'agenda']); */
+    this.selectedEventId = event.id;
+
+    // this.viewEventDetail(event.id);
+
+    this.cloneAllmobileComponent();
+
+    
+    this.showEventEditOrOpen = 'edit';
+
+    if( window.innerWidth <= 1024){
+      this.viewEventDetail(event.id)
+      //this.router.navigate(["/home/agenda", event.id, 'agenda']);
+    } else {
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showEventDetails = true;
+    }
+
   }
 
+
   //Show information of the event
   async onEventSelected(ev: { event: Event}){
     this.viewEventDetail(ev.event.EventId);
@@ -182,7 +240,7 @@ export class AgendaPage implements OnInit {
 
   onCurrentChanged = (ev: Date) => {
     // timeline change date
-    this.timelineDate = new Date(ev).toLocaleString();
+    this.timelineDate = momentG(new Date(ev),'dd MMMM yyyy'); 
     this.viewDate = new Date(ev);
     // calendar change date
     this.eventSelectedDate = new Date(ev);
@@ -198,10 +256,10 @@ export class AgendaPage implements OnInit {
     this.onCurrentChanged(newDate); */
   }
 
-  /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
-        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
-        this.eventSelectedDate2 = ev.selectedTime;
-    }; */
+  onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
+    console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
+    this.eventSelectedDate2 = ev.selectedTime;
+  }; 
 
   onRangeChanged (ev: { startTime: Date, endTime: Date }) {
     this.rangeStartDate = ev.startTime;
@@ -218,7 +276,7 @@ export class AgendaPage implements OnInit {
         profile: this.profile,
         eventSelectedDate: this.eventSelectedDate,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'cal-modal  modal-desktop',
       backdropDismiss: false
     });
 
@@ -245,27 +303,27 @@ export class AgendaPage implements OnInit {
 
   // for calendar
   currentDayEventDisplayBorder(day: any, id: any){
-
+    
     const events = day[id].events;
+
     if (events.length == 0) {
-      return "";
-    } else if (events.length >= 1) {
       
-      /** @description store all event type */
-      let eventType = {};
-      let eventTypeNum: number;
+      return "";
+
+    } else if (events.length >= 1) {
+    
+      let classs = [];
 
       events.forEach(element => {
-        eventType[element.calendarName] = 1;
+
+        const profile_ = element.profile == 'md'? 'mdgpr': 'pr';
+        const eventtype = element.event.CalendarName;
+
+        classs.push(`calendar-event-border calendar-${profile_}-event-type-${eventtype}`);
+
       });
 
-      eventTypeNum = (Object.keys(eventType)).length
-
-      if (eventTypeNum == 2) { 
-        return ` calendar-event-border calendar-${this.profile}-event-type-both`;
-      } else {
-        return ` calendar-event-border calendar-${this.profile}-event-type-`+(Object.keys(eventType))[0];
-      }
+      return classs.join(' ');
     }
 
     return "";
@@ -276,24 +334,28 @@ export class AgendaPage implements OnInit {
     // auto scroll timeline
     setTimeout(() => {
       const timelineMarker = document.querySelector('.cal-current-time-marker');
-      const timelineContainer = document.querySelectorAll('ion-content')[2];
-      const shadowRoot = timelineContainer.shadowRoot;
+      const scrollContainer = document.querySelector('.timeline-wrapper');
 
-      const scrollContainer = shadowRoot.querySelector('main');
-
-      scrollContainer.scrollTop = timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60);
+      try {
+        scrollContainer.scroll({
+          top: timelineMarker['offsetTop'] - ((scrollContainer['offsetHeight']/2) - 60),
+          left: 0, 
+          behavior: 'smooth' 
+        })
+      } catch (error) {
+        //
+      }
       
     }, timeout);
   }
 
   // for timeline
   timelineIsCurrentDate(): Boolean {
-    return true;
-    //return formatDate(new Date(),'dd MMMM yyyy', 'pt') == formatDate(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
+    return momentG(new Date(),'dd MMMM yyyy', 'pt') == momentG(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
   }
 
   // for timeline
-  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number): string{
+  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number, profile: string): string{
     
     const startHours = parseInt(startTimeWisthS.split(':')[0]);
     const startMinutos = parseInt(startTimeWisthS.split(':')[1]);
@@ -303,16 +365,20 @@ export class AgendaPage implements OnInit {
 
     let top = '0';
     
+    console.log('startMinutos', startMinutos);
+
     if(startHours < endHours){
       if (startMinutos != 0 ){
-        top = `${ Math.abs((startMinutos - 60)) }`
+        top = `${ Math.abs((startMinutos)) }`
       }
     }
 
+    const profile_ = profile == 'md'? 'mdgpr': 'pr';
+    
     return `
-      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${this.profile}-box-${calendarName} calendar-top${top}">
+      <div class=" overflow-hidden timeline-box timeline-box-event-${eventIndex} timeline-${profile_}-box-${calendarName} calendar-top${top}">
         <div>
-          <span class="timeline-start-time">${startTimeWisthS}</span><span class="timeline-location">${eventlocation}</span>
+          <span class="timeline-start-time">${startHours.toString().padStart(2, '0')}:${startMinutos.toString().padStart(2, '0')}</span><span class="timeline-location">${eventlocation}</span>
         </div>
         <div class="timeline-event-discription">
           ${subject}
@@ -325,15 +391,62 @@ export class AgendaPage implements OnInit {
   timelineBoxCorrectHeight(timeout){
 
     setTimeout(()=>{
-      this.eventSource.forEach((el, eventIndex)=>{ 
 
-        const startEvent =  new Date(el.startTime);
-        const endEvent = new Date(el.endTime);
+      if(window.innerWidth <= 1024){
+        this.events.forEach((el:any, eventIndex)=>{ 
+        
+          const startEvent =  new Date(el.startTime| el.start);
+          const endEvent = new Date(el.endTime | el.end);
+  
+          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
+          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
+          
+          document.querySelectorAll('.ss-timeline .timeline-box').forEach(ele => {
+            
+            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
+  
+              ele.setAttribute('style',`height:${minutes}px`);
+  
+            }
+  
+          });
+  
+        });
+      } else {
+        this.TimelineMD.forEach((el:any, eventIndex)=>{ 
+        
+          const startEvent =  new Date(el.startTime| el.start);
+          const endEvent = new Date(el.endTime | el.end);
+  
+          var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
+          // const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
+          
+          document.querySelectorAll('.fs-timeline .timeline-box').forEach(ele => {
+            
+            if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
+  
+              ele.setAttribute('style',`height:${minutes}px`);
+  
+            }
+  
+          });
+  
+        });
+      }
+
+
+    },timeout)
+
+    setTimeout(()=>{
+      this.TimelinePR.forEach((el, eventIndex)=>{ 
+
+        const startEvent =  new Date(el['startTime']);
+        const endEvent = new Date(el['endTime']);
 
         var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
         const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
         
-        document.querySelectorAll('.timeline-box').forEach(ele => {
+        document.querySelectorAll('.sd-timeline .timeline-box').forEach(ele => {
           
           if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
             ele.setAttribute('style',`height:${minutes}px`);
@@ -345,15 +458,20 @@ export class AgendaPage implements OnInit {
   }
 
   // for timeline
-
-  timelineFilter(calendarName){
+  timelineFilter(calendarName, eventsList, profile){
 
     this.timelineFilterState = calendarName;
 
     // remove all event
-    this.events = [];
+    let events = [];
 
-    this.eventsList.forEach((element, eventIndex) => {
+    this.showTimelineFilterState = false;
+
+    if( profile =='md'){
+      console.log('eventsList: ', eventsList);
+    }
+
+    eventsList.forEach((element, eventIndex) => {
       
       // timeline start
       const startHours =  new Date(element.StartDate).getHours().toLocaleString();
@@ -362,68 +480,149 @@ export class AgendaPage implements OnInit {
       const startHoursOtherFormate =  new Date(element.StartDate).getHours().toLocaleString()+':'+new Date(element.StartDate).getMinutes().toLocaleString();
       const EndHoursOtherFormate = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');
 
-      if (element.CalendarName == calendarName) {
-        this.events.push({
-          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
-          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
-          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
-          color: {
-            primary: 'white',
-            secondary: 'white'
-          },
-          id: element.EventId
-        });
-      } else if (calendarName == 'Todos'){
-        this.events.push({
-          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
-          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
-          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
-          color: {
-            primary: 'white',
-            secondary: 'white'
-          },
-          id: element.EventId
-        });
+      if( profile =='md' && eventIndex==3){
+        console.log('mdEvent:', element,eventIndex);
       }
-      
+
+      events.push({
+        title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex, profile),
+        start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
+        end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
+        color: {
+          primary: '#0000',
+          secondary: '#0000'
+        },
+        id: element.EventId,
+        index: eventIndex,
+        profile: profile
+      });
+
     });
 
-    this.onCurrentChanged(this.eventSelectedDate);
-    //
-    this.showTimelineFilterState = false;
+    // this.onCurrentChanged(this.eventSelectedDate);
+
+    return events;
   }
   
   loadRangeEvents(startTime: Date, endTime: Date){
 
-    this.showTimeline = false;
     this.showLoader = true;
 
-    switch (this.segment)
-    {
-      case "Combinada":
-        //Inicializa o array eventSource
-        this.eventSource=[];
-        
+    if(window.innerWidth < 1024){
+      
+      this.showTimeline = false;
 
-        if(this.profile == "mdgpr"){
-           this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
-            response => {
-              this.eventsList = response;
-              // loop
-              this.eventsList.forEach((element, eventIndex) => {
+      switch (this.segment) {
+        case "Combinado":
+          //Inicializa o array eventSource
+          this.eventSource=[];
+          
+  
+          if(this.profile == "mdgpr"){
+             this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
+              response => {
+                
+                this.eventSource=[];
+  
+                this.eventsList = response;
+                // loop
+                this.eventsList.forEach((element, eventIndex) => {
+  
+                  this.eventSource.push({
+                    title: element.Subject,
+                    startTime: new Date(element.StartDate),
+                    endTime: new Date(element.EndDate),
+                    allDay: false,
+                    event: element,
+                    calendarName: element.CalendarName,
+                    profile: 'md'
+                  });
+                });
+                
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
 
+                this.events = list;
+                this.TimelineMD = list;
+                
+                this.myCal.update();
+                this.myCal.loadEvents();
+  
+                this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
+               
+              });
+      
+          }
+          else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
+              response => {
+                
+                // calendar
+                this.eventSource=[];
+  
+                this.eventsList = response;
+
+                 // calendar
+                this.eventsList.forEach((element, eventIndex) => {
+                  this.eventSource.push({
+                    title: element.Subject,
+                    startTime: new Date(element.StartDate),
+                    endTime: new Date(element.EndDate),
+                    allDay: false,
+                    event: element,
+                    calendarName: element.CalendarName,
+                    profile: 'pr'
+                  });
+  
+                });
+  
+                                
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+
+                this.events = list;
+
+                this.TimelinePR = list;
+
+                this.myCal.update();
+                this.myCal.loadEvents();
+                this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
+  
+              });
+          }
+        break;
+  
+        case "Pessoal":
+          //Inicializa o array eventSource
+          this.eventSource=[];
+          if(this.profile == "mdgpr"){
+            this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+                
+              this.eventSource=[];
+              this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
+              this.eventsListPessoal.forEach(element => {
+                
                 this.eventSource.push({
                   title: element.Subject,
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
                   event: element,
-                  calendarName: element.CalendarName
+                  profile: 'md'
                 });
               });
 
-              // this.timelineFilter(this.timelineFilterState);
-              
+              const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+              this.events = list;
+              this.TimelineMD = list;
+
               this.myCal.update();
               this.myCal.loadEvents();
 
@@ -432,45 +631,13 @@ export class AgendaPage implements OnInit {
 
               this.timelineBoxCorrectHeight(500);
               this.centralizeTimeline(500);
-             
             });
-    
-        }
-        else{
-          this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
-            response => {
-              this.eventsList = response;
-              this.eventsList.forEach((element, eventIndex) => {
-                this.eventSource.push({
-                  title: element.Subject,
-                  startTime: new Date(element.StartDate),
-                  endTime: new Date(element.EndDate),
-                  allDay: false,
-                  event: element,
-                  calendarName: element.CalendarName
-                });
-
-              });
-
-              // this.timelineFilter(this.timelineFilterState);
-
-              this.myCal.update();
-              this.myCal.loadEvents();
-              this.showLoader = false;
-              this.showTimeline = true;
-
-              this.timelineBoxCorrectHeight(500);
-              this.centralizeTimeline(500);
-
-            });
-        }
-      break;
-
-      case "Pessoal":
-        //Inicializa o array eventSource
-        this.eventSource=[];
-        if(this.profile == "mdgpr"){
-          this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+  
+          }
+          else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+              this.eventSource=[];
+  
               this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
               this.eventsListPessoal.forEach(element => {
                 this.eventSource.push({
@@ -478,38 +645,52 @@ export class AgendaPage implements OnInit {
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                  event: element
+                  event: element,
+                  profile: 'pr'
                 });
               });
               this.myCal.update();
               this.myCal.loadEvents();
               this.showLoader = false;
             });
-        }
-        else{
-          this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
-            this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
-            this.eventsListPessoal.forEach(element => {
-              this.eventSource.push({
-                title: element.Subject,
-                startTime: new Date(element.StartDate),
-                endTime: new Date(element.EndDate),
-                allDay: false,
-                event: element
-              });
-            });
-            this.myCal.update();
-            this.myCal.loadEvents();
-            this.showLoader = false;
-          });
-        }
-        break;
+          }
+          break;
+  
+        case "Oficial":
+          //Inicializa o array eventSource
+          this.eventSource=[];
+          if(this.profile == "mdgpr"){
+            this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
+              this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
+                this.eventsListOficial.forEach(element => {
+                  this.eventSource.push({
+                    title: element.Subject,
+                    startTime: new Date(element.StartDate),
+                    endTime: new Date(element.EndDate),
+                    allDay: false,
+                    event: element,
+                    profile: 'pr'
+                  });
+                });
 
-      case "Oficial":
-        //Inicializa o array eventSource
-        this.eventSource=[];
-        if(this.profile == "mdgpr"){
-          this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+                const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+
+                this.events = list;
+                this.TimelinePR = list;
+
+                this.myCal.update();
+                this.myCal.loadEvents();
+  
+                this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
+              });
+          }else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
               this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
               this.eventsListOficial.forEach(element => {
                 this.eventSource.push({
@@ -517,38 +698,105 @@ export class AgendaPage implements OnInit {
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                  event: element
+                  event: element,
+                  profile: 'pr'
                 });
               });
               this.myCal.update();
               this.myCal.loadEvents();
               this.showLoader = false;
             });
-        }else{
-          this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
-            this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
-            this.eventsListOficial.forEach(element => {
-              this.eventSource.push({
-                title: element.Subject,
-                startTime: new Date(element.StartDate),
-                endTime: new Date(element.EndDate),
-                allDay: false,
-                event: element
-              });
-            });
-            this.myCal.update();
-            this.myCal.loadEvents();
-            this.showLoader = false;
-          });
-        }
-        break;
+          }
+          break;
+  
+      } 
+    } else {
+      
+      this.showTimelinePR = false;
+      this.showTimelineMD = false;
+
+       // calendar
+      this.eventSource=[];
+      
+      this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
+         response => {
+           
+          this.TimelineMD = [];
+
+          this.eventsList = response;
+           // loop
+          this.eventsList.forEach((element, eventIndex) => {
+
+            // calendar
+            this.eventSource.push({
+              index: eventIndex,
+              title: element.Subject,
+              startTime: new Date(element.StartDate),
+              endTime: new Date(element.EndDate),
+              allDay: false,
+              event: element,
+              calendarName: element.CalendarName,
+              profile: 'md'
+            });
+          });
+
+          const MDEventList = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+          this.events = MDEventList;
+          this.TimelineMD = MDEventList;
+
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelineMD = true;
+
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+          
+      });
+ 
+      this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
+        response => {
+          
+          this.TimelinePR = [];
+
+          this.eventsList = response;
+          this.eventsList.forEach((element, eventIndex) => {
+
+             // calendar
+            this.eventSource.push({
+              index: eventIndex,
+              title: element.Subject,
+              startTime: new Date(element.StartDate),
+              endTime: new Date(element.EndDate),
+              allDay: false,
+              event: element,
+              calendarName: element.CalendarName,
+              profile:'pr'
+            });
+
+          });
+
+          this.TimelinePR = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+          
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelinePR = true;
+          
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+
+          this.showLoader = false;
+      });
+     
+    }
 
-    } 
   }
 
   actions(){
 
-  } 
+  }
 
   doRefresh(ev: any){
     this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
@@ -557,8 +805,9 @@ export class AgendaPage implements OnInit {
     }, 250)
   }
   showAlert(){
-    this.alertCrontroller.presentAlert("Funcionalidade em desenvolvimento.");
+    this.alertController.presentAlert("Funcionalidade em desenvolvimento.");
   }
+
   changeProfile(){
 
     if(this.profile == "mdgpr"){
@@ -578,35 +827,62 @@ export class AgendaPage implements OnInit {
   }
 
   async openAddEvent() {
-    const modal = await this.modalCtrl.create({
-      component: NewEventPage,
-      componentProps:{
-        segment: this.segment,
-        profile: this.profile,
-        eventSelectedDate: this.eventSelectedDate
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((data) => {
-      let postEvent: Event = data['data'];
-      if (postEvent.Subject != null)
-      {
-        this.eventSource.push({
-          title: postEvent.Subject,
-          startTime: new Date(postEvent.StartDate),
-          endTime: new Date(postEvent.EndDate),
-          allDay: false,
-          event: postEvent
-        });
-        this.myCal.update();
-        this.myCal.loadEvents();
-        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
-      }
-    });
+
+    await this.cloneAllmobileComponent();
+
+    this.showEventEditOrOpen = 'add';
+    this.IsEvent = 'add';
+
+    if( window.innerWidth <= 1024){
+      const modal = await this.modalCtrl.create({
+        component: NewEventPage,
+        componentProps:{
+          segment: this.segment,
+          profile: this.profile,
+          eventSelectedDate: this.eventSelectedDate
+        },
+        cssClass: 'modal  modal-desktop',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then((data) => {
+        if(data){
+          
+        }
+        this.openAddEventDismiss(data['data'])
+      });
+    } else {
+      this.mobileComponent.showAddNewEvent = true;
+    }
   }
 
+
+  openEditEvent(){
+    this.showEventEditOrOpen = 'edit';
+
+  }
+
+  openAddEventDismiss(data){
+
+    let postEvent: Event = data;
+    if (postEvent.Subject != null)
+    {
+      this.eventSource.push({
+        title: postEvent.Subject,
+        startTime: new Date(postEvent.StartDate),
+        endTime: new Date(postEvent.EndDate),
+        allDay: false,
+        event: postEvent
+      });
+      this.myCal.update();
+      this.myCal.loadEvents();
+      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+    }
+
+    this.cloneAllmobileComponent();
+  }
+
+  // open component
   async viewEventDetail(eventId:any) {
     console.log(this.profile);
     
@@ -615,27 +891,166 @@ export class AgendaPage implements OnInit {
       componentProps:{
         eventId: eventId
       },
-      cssClass: 'modal',
+      cssClass: 'modal  modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
       if(res){
-        console.log(res);
-        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+        this.viewEventDetailDismiss(res);
       }
     });
   }
 
+  // open component
+  async viewEventDetailDismiss(data){
+    
+    await this.cloneAllmobileComponent()
+
+    if (data.type == 'edit'){
+      
+      this.selectedEvent = data.event;
+      this.postEvent = data.event;
+
+      console.log(this.selectedEvent);
+
+      console.log(this.postEvent);
+
+      this.mobileComponent.showEditEvent = true;
+
+    }
+
+    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+  }
+
   async viewEventsToApprove(){
-    const modal = await this.modalCtrl.create({
-      component: EventListPage,
-      componentProps:{
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  } 
+    await this.cloneAllmobileComponent()
+
+    if( window.innerWidth <= 1024){
+      const modal = await this.modalCtrl.create({
+        component: EventListPage,
+        componentProps:{
+        },
+        cssClass: 'modal  modal-desktop',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    } else {
+      // hide all components
+      this.cloneAllmobileComponent();
+      this.mobileComponent.showEventList = true;
+    }
+
+  }
+
+  approveEventDismiss({saveData, serialNumber, action}){
+    
+    console.log(saveData);
+
+    if(action == 'Aprovar'){
+      this.eventToaprove = {
+        back: true,
+        saveData: saveData,
+        serialNumber:serialNumber
+      }
+      // this.mobileComponent.showEventList = false;
+      this.mobileComponent.transparentEventList = true;
+      this.mobileComponent.showEventToApprove = true;
+    }
+  }
+
+  closeEventToApprove(){
+    if (this.eventToaprove.back ==true && this.mobileComponent.showEventList ==true){
+      this.mobileComponent.transparentEventList = false;
+      this.mobileComponent.showEventToApprove = false;
+      this.eventToaprove.back = false;
+    }
+    else {
+      this.mobileComponent.showEventToApprove = false;
+      this.mobileComponent.showEventList = false;
+    }
+    
+  }
+
+  async cloneAllmobileComponent(){
+
+    this.mobileComponent.showAddNewEvent = false;
+    this.mobileComponent.showEditEvent = false;
+    this.mobileComponent.showEventDetails = false;
+    this.mobileComponent.showEventList = false;
+    this.mobileComponent.showEventToApprove = false;
+    this.mobileComponent.showAttendees = false;
+    this.mobileComponent.showAttendeeModal = false;
+
+    this.closeEventToApprove();
+  }
+
+  async AproveEventEditEvent(data){
+    console.log(data)
+    this.postEvent =data;
+    this.mobileComponent.transparentEventToApprove= true;
+    this.mobileComponent.showAddNewEvent = true;
+  }
+
+  // open component
+  async openAttendeesComponent(data){
+
+
+    if(Array.isArray(data)){
+      if(data.length >= 1){
+       
+        console.log('save!!!',data.length);
+        console.log(data);
+        this.contacts = data ;
+      }
+    }
+    
+    this.cloneAllmobileComponent();
+    this.mobileComponent.showAttendees = true;
+
+  }
+
+  async clearContact(){
+    this.contacts = [];
+  }
+
+  async setContact(data:EventPerson[]){
+    this.contacts = data;
+  }
+
+  async openAttendeeModal(){
+    this.cloneAllmobileComponent();
+    this.mobileComponent.showAttendeeModal = true;
+  }
+
+
+  async GoBackEditOrAdd(){
+    
+
+    if(this.showEventEditOrOpen == "edit"){
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showEditEvent = true;
+    } else if(this.showEventEditOrOpen == "add") {
+      this.cloneAllmobileComponent();
+
+      this.mobileComponent.showAddNewEvent = true;
+    } else {
+      // do Nothings
+    }
+
+  }
+
+ // 
+  async closeComponentEditEventOrAdd(){
+
+    if(this.IsEvent ='edit') {
+      this.eventClicked(this.viewingEventObject);
+    } else if (this.IsEvent = 'add') {
+      this.cloneAllmobileComponent();
+    }
+
+  }
+
 }
\ No newline at end of file
diff --git a/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.html b/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.html
new file mode 100644
index 000000000..dc6432e93
--- /dev/null
+++ b/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.html
@@ -0,0 +1,105 @@
+<ion-header class="ion-no-border">
+  <div class="header-content">
+    <div class="header-icon-left">
+      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+    <div class="header-title">
+      <label>""{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+    </div>
+    <div class="header-icon-right">
+      <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+    </div>
+  </div>
+</ion-header>
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Ações</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="approveTask(loadedEvent.serialNumber)">
+        <ion-icon name="checkmark-sharp"></ion-icon>
+        <ion-label>Aprovar</ion-label>
+      </ion-item>
+      <ion-item (click)="emendTask(loadedEvent.serialNumber)">
+        <ion-icon name="create-outline"></ion-icon>
+        <ion-label>Emendar</ion-label>
+      </ion-item>
+      <ion-item (click)="rejectTask(loadedEvent.serialNumber)">
+        <ion-icon name="close-sharp"></ion-icon>
+        <ion-label>Rejeitar</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-content id="main-content">
+  <div class="upper-content">
+    <div class="content-location">
+      <div class="location-detail">
+        <ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
+      </div>
+      <div class="button-calendar-type">
+        <ion-button  class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
+      </div>
+    </div>
+    <div class="content-details">
+      <ion-label>
+        <p>{{customDate}}</p>
+        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+        <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
+        <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
+      </ion-label>
+    </div>
+  </div>
+  <div class="middle-content">
+    <ion-item>
+      <h5>Intervenientes</h5>
+      <ion-label>
+        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
+      </ion-label>
+    </ion-item>
+    <h5>Detalhes</h5>
+    <ion-item>
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
+    </ion-item>
+  </div>
+
+  <div *ngIf="loadedAttachments" class="bottom-content">
+    <ion-list>
+      <h5>Documentos Anexados</h5>
+      <ion-item>
+      <ion-label>
+        <p class="attach-title-item">Receita por Natureza</p>
+        <p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
+      </ion-label>
+    </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <div class="buttons">
+    <ion-item lines="none">
+      <p>
+        <ion-button class="button-edit-event" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</ion-button>
+      </p>
+      <p>
+       <ion-menu-button autoHide="false">
+        <ion-icon  (click)="openMenu()" name="ellipsis-vertical-outline"></ion-icon>
+      </ion-menu-button>
+      </p>
+      <p>
+        <ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
+      </p>
+    </ion-item>
+    <ion-item hidden>
+      <p>
+        <ion-button class="button-reject" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</ion-button>
+      </p>
+    </ion-item>
+  </div>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.ts b/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.ts
new file mode 100644
index 000000000..b8fa2eef2
--- /dev/null
+++ b/src/app/pages/agenda/approve-event-modal/approve-event-modal.page.ts
@@ -0,0 +1,148 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Event } from 'src/app/models/event.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { EmendMessageModalPage } from '../emend-message-modal/emend-message-modal.page';
+import { EventActionsPopoverPage } from '../event-actions-popover/event-actions-popover.page';
+
+@Component({
+  selector: 'app-approve-event-modal',
+  templateUrl: './approve-event-modal.page.html',
+  /* styleUrls: ['./approve-event-modal.page.scss'], */
+})
+export class ApproveEventModalPage implements OnInit {
+  event: Event;
+  loadedEvent:any;
+  loadedAttachments:any;
+  serialNumber:string;
+  customDate:any;
+  today:any;
+  
+  months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+  days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+
+  
+  constructor(
+    private router:Router,
+    private modalController: ModalController,
+    private navParams: NavParams,
+    private processes:ProcessesService,
+    private attachmentsService: AttachmentsService,
+    private popoverController: PopoverController,
+    private menu: MenuController,
+    private alertService: AlertService,
+    )
+    {
+      this.serialNumber = this.navParams.get('serialNumber');
+     }
+
+  ngOnInit() {
+    this.getTask();
+    this.getAttachments();
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss(null);
+      }
+    };
+  }
+
+  notImplemented(){
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  }
+
+  close(){
+    /* this.router.navigate(['/home/gabinete-digital/event-list']); */
+    this.modalController.dismiss(null);
+  }
+
+  getTask(){
+    this.processes.GetTask(this.serialNumber).subscribe(res => {
+      console.log(res);
+      this.loadedEvent = res;
+      this.today = new Date(res.workflowInstanceDataFields.StartDate);
+      console.log(new Date(this.today));
+      this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+      
+    })
+  }
+  approveTask(serialNumber:string){
+    let body = { "serialNumber": serialNumber, "action": "Aprovar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+
+  emendTask(serialNumber:string){
+    /* console.log('Emendar'); */
+    this.menu.close();
+    this.openEmendMessageModal(serialNumber);
+    this.modalController.dismiss(null);
+  }
+
+  rejectTask(serialNumber:string){
+  
+    let body = { "serialNumber": serialNumber, "action": "Rejeitar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+  getAttachments(){
+    this.attachmentsService.getAttachmentsBySerial(this.serialNumber).subscribe(res=>{
+      this.loadedAttachments = res;
+      console.log(res);
+    });
+  }
+
+  async openOptions(ev:any) {
+    const popover = await this.popoverController.create({
+      component: EventActionsPopoverPage,
+      cssClass: 'event-actions-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  openMenu() {
+    this.menu.open();
+ }
+ async openEmendMessageModal(serialNumber:string) {
+  const modal = await this.modalController.create({
+    component: EmendMessageModalPage,
+    componentProps:{
+      
+    },
+    cssClass: 'emend-message-modal',
+    backdropDismiss: false
+  });
+
+  await modal.present();
+
+  modal.onDidDismiss().then(res => {
+    if(res.data !== ''){
+      let body = { "serialNumber": serialNumber, 
+       "action": "Emendar",
+       "dataFields": {
+       "ReviewerComments": res.data,
+       }
+      }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    }
+    else{
+      this.alertService.presentAlert('Operação cancelada!');
+    }
+  });
+}
+  
+}
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.html b/src/app/pages/agenda/edit-event/edit-event.page.html
index ef7471556..5d46eb719 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.html
+++ b/src/app/pages/agenda/edit-event/edit-event.page.html
@@ -1,225 +1,223 @@
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="middle">
-          <ion-label class="title">Editar Evento</ion-label>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
-
 <ion-content>
   <div class="main-content">
-    <div class="ion-item-container">
-      <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
-    </div>
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <ion-header>
+        <div class="title-content">
+          <div class="middle">
+            <ion-label class="title">Editar Evento</ion-label>
+          </div>
         </div>
+      </ion-header>
       </div>
-      <!-- Error messages -->
-      <!-- <span class="error ion-padding" >
-        Campo obrigatório
-      </span> -->
-  
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select disabled  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
+      <ion-item-sliding>
 
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]"
-          selectedText="{{postEvent.Categories[0]}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
-          </ion-select>
-        </div>
+      <div class="ion-item-container width-100">
+        <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
       </div>
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            displayFormat="D MMM YYYY H:mm"
-            minuteValues="0,15,30,45"
-            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-            min="2018" 
-            max="2022" 
-          >
-          </ion-datetime>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select placeholder="Selecione repetição" 
-          [(ngModel)]="postEvent.IsRecurring"
-          selectedText="{{isRecurring}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-        </div>
-        <div (click)="openAttendees()" class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Ver ou editar participantes</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <!-- <span class="error ion-padding" >
+          Campo obrigatório
+        </span> -->
+    
+      </div>
+    
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select disabled  placeholder="Selecione agenda"
+            selectedText="{{postEvent.CalendarName}}" 
+            [(ngModel)]="postEvent.CalendarName" 
+            interface="action-sheet" Cancel-text="Cancelar" 
+            required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </div>
-    </div>
-    
-    <div hidden class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Com conhecimento</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class">
+            <ion-select  placeholder="Selecione tipo" 
+            [(ngModel)]="postEvent.Categories[0]"
+            selectedText="{{postEvent.Categories[0]}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <ion-select-option value="Reunião">Reunião</ion-select-option>
+              <ion-select-option value="Viagem">Viagem</ion-select-option>
+              <ion-select-option value="Conferência">Conferência</ion-select-option>
+              <ion-select-option value="Encontro">Encontro</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </div>
-    </div>
     
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class width-100">
+            <ion-datetime 
+              placeholder="Início"
+              [(ngModel)]="postEvent.StartDate"
+              displayFormat="D MMM YYYY H:mm"
+              minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              min="2018" 
+              max="2022" 
+            >
+            </ion-datetime>
+            <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+          </div>
         </div>
       </div>
-    </div>
-    
-    <div hidden class="ion-item-container-no-border">
-      <ion-label>
-        <div class="attach-icon">
-          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-datetime 
+              placeholder="Fim"
+              [(ngModel)]="postEvent.EndDate"
+              displayFormat="D MMM YYYY H:mm"
+              minuteValues="0,15,30,45"
+              monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+              min="2018" 
+              max="2022" 
+            >
+            </ion-datetime>
+            <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+          </div>
+        </div>
+      </div>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Selecione repetição" 
+            [(ngModel)]="postEvent.IsRecurring"
+            selectedText="{{isRecurring}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <ion-select-option value="false">Não se repete</ion-select-option>
+              <ion-select-option value="true">Repete</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+      
+      <div class="width-100">
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar Destinatários</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar CC</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="attach-document">
-          <ion-label>Anexar Documentos</ion-label>
-        </div> 
-      </ion-label>
     </div>
-    
-    <div hidden>
-      <ion-item>
-        <ion-label>Documentos Anexados</ion-label>
-      </ion-item>
-      <ion-list>
-        <ion-item>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height width-100">
+            <ion-textarea placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text" rows="6" cols="20"></ion-textarea>
+          </div>
+        </div>
+      </div>
+      
+      <div hidden class="ion-item-container-no-border">
         <ion-label>
-          <h4 class="attach-title-item">Text</h4>
-          <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
         </ion-label>
-      </ion-item>
-      </ion-list>
-    </div> 
+      </div>
+      
+      <div hidden>
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item>
+          <ion-label>
+            <h4 class="attach-title-item">Text</h4>
+            <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+      </ion-item-sliding>
+    </div>
+    
+    <div class="aside-right flex-column height-100">
+      
+    </div>
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
-    <ion-buttons slot="start">
-      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
-        <ion-label>Cancelar</ion-label>
-      </ion-button>
-    </ion-buttons>
-    <ion-title></ion-title>
-    <ion-buttons slot="end">
-      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
-        <ion-label>Gravar</ion-label>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
+<ion-footer>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="save()">Gravar</button>
+  </div>
 </ion-footer>
\ No newline at end of file
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.scss b/src/app/pages/agenda/edit-event/edit-event.page.scss
index 1515a515b..f3440bae6 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.scss
+++ b/src/app/pages/agenda/edit-event/edit-event.page.scss
@@ -1,24 +1,18 @@
-ion-content{
-    --background:transparent;
-}
-.header-toolbar{
-   --background:transparent;
-   --opacity: 1;
+
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+  border-left: 1px solid #d8d8d8 !important;
 }
   .main-header{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -26,8 +20,6 @@ ion-content{
        .middle{
         padding: 0!important;
         float: left;
-        width: 221px;
-        margin: 2.5px 0 0 5px;
       }
     }
 
@@ -36,17 +28,7 @@ ion-content{
     }
 
   }
-  .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
-    font-family: Roboto;
-    margin: 0 auto;
-    background-color: #fff;
-    overflow:auto;
-    padding: 15px 20px 0 20px;
-
     .ion-item-container{
-        width: 360px;
         margin: 15px auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -60,10 +42,10 @@ ion-content{
       }
       .container-div{
         margin-bottom: 15px;
+        float: left;
         overflow: auto;
       }
       .ion-item-class-2{
-        width: 360px;
         margin: 0px auto;
       }
       .ion-icon-class{
@@ -78,7 +60,7 @@ ion-content{
         margin-left: 0;
       }
       .ion-input-class{
-        width: 315px;
+        width: calc(100% - 45px);
         height: 45px;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -87,12 +69,13 @@ ion-content{
         float: left;
       }
       .ion-input-class-no-height{
+        width: calc(100% - 45px);
         border: 1px solid #ebebeb;
         border-radius: 5px;
         overflow: auto;
       }
       .list-people{
-        width: 256px;
+        //width: 256px;
         float: left;
       
       }
@@ -174,4 +157,11 @@ ion-content{
         color:red;
       }
 
-  }
\ No newline at end of file
+  
+  .buttons{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    overflow: auto;
+  }
+  
\ No newline at end of file
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.ts b/src/app/pages/agenda/edit-event/edit-event.page.ts
index 1191e66de..0a3bb35e6 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.ts
+++ b/src/app/pages/agenda/edit-event/edit-event.page.ts
@@ -1,7 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { AlertController, ModalController, NavParams } from '@ionic/angular';
-import { AuthConnstants } from 'src/app/config/auth-constants';
-import { Attachment } from 'src/app/models/attachment.model';
 import { EventBody } from 'src/app/models/eventbody.model';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { AlertService } from 'src/app/services/alert.service';
@@ -50,6 +48,13 @@ export class EditEventPage implements OnInit {
   ngOnInit() {
     console.log(this.profile);
     console.log(this.postEvent);
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 800){
+        this.modalController.dismiss();
+      }
+    };
     
   }
   close(){
diff --git a/src/app/pages/agenda/new-event/new-event.page.html b/src/app/pages/agenda/new-event/new-event.page.html
index ba216ec40..85fdc97a4 100644
--- a/src/app/pages/agenda/new-event/new-event.page.html
+++ b/src/app/pages/agenda/new-event/new-event.page.html
@@ -171,8 +171,10 @@
         <div class="ion-icon-class">
           <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
         </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+        <div class="ion-input-class-no-height flex-grow-1">
+          
+          <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
+          
         </div>
       </div>
     </div>
@@ -203,8 +205,8 @@
     </div> 
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
+<ion-footer class="ion-no-border d-flex justify-center">
+  <ion-toolbar class="btn-div ">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>
diff --git a/src/app/pages/agenda/new-event/new-event.page.scss b/src/app/pages/agenda/new-event/new-event.page.scss
index b3bfead35..2d1ca8abb 100644
--- a/src/app/pages/agenda/new-event/new-event.page.scss
+++ b/src/app/pages/agenda/new-event/new-event.page.scss
@@ -18,10 +18,9 @@ ion-content{
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
+      padding: 0px 20px;
       margin: 0px auto;
       overflow: auto;
-      padding: 0 !important;
       background: #fff;
        .middle{
         padding: 0!important;
diff --git a/src/app/pages/agenda/new-event/new-event.page.ts b/src/app/pages/agenda/new-event/new-event.page.ts
index ae9794f3d..df72417e4 100644
--- a/src/app/pages/agenda/new-event/new-event.page.ts
+++ b/src/app/pages/agenda/new-event/new-event.page.ts
@@ -87,6 +87,15 @@ export class NewEventPage implements OnInit {
         HasAttachments: false,
       };
     }
+
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
   }
   close(){
     this.modalController.dismiss();
diff --git a/src/app/pages/agenda/view-event/view-event.page.html b/src/app/pages/agenda/view-event/view-event.page.html
index 835c8736e..448628f3f 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -1,4 +1,4 @@
-<ion-header  class="ion-no-border">
+<!-- <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
@@ -15,56 +15,75 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-  <div class="main-content">
-    <div class="upper-content">
-      <div class="content-location">
-        <div class="location-detail">
-          <ion-label >{{loadedEvent.Location}}</ion-label>
-        </div>
-        <div class="button-{{profile}}-{{loadedEvent.CalendarName}}">
-          <ion-button  class="button-{{profile}}-{{loadedEvent.CalendarName}}" slot="end">{{loadedEvent.CalendarName}}</ion-button>
-        </div>
-      </div>
-      <div class="content-details">
-        <ion-label>
-          <p>{{customDate}}</p>
-          <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
-          <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
-          <p *ngIf="loadedEvent.IsRecurring">Repete</p>
-        </ion-label>
-      </div>
-    </div>
-    <div class="middle-content">
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Intervenientes</h3>
-          <div *ngFor="let attendee of loadedEvent.Attendees">
-            <p>{{attendee.Name}}</p>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <div class="title-content">
+          <div class="left">
+            <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
           </div>
-        </ion-label>
-      </ion-item>
-      <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label>
-          <h3>Detalhes</h3>
-          <p>{{loadedEvent.Body.Text}}</p>
-        </ion-label>
-      </ion-item>
-    </div>
-  
-    <div *ngIf="loadedAttachments" class="bottom-content">
-      <ion-list>
-        <h3>Documentos Anexados</h3>
+          <div class="middle">
+            <ion-label class="title">{{loadedEvent.Subject}}</ion-label>
+          </div>
+          <div class="div-icon">
+            <ion-icon class="edit" (click)="editEvent()" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
+            <ion-icon class="delete" (click)="deleteEvent()" name="trash-sharp"></ion-icon> 
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-location">
+          <p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
+        </div>
+        <div class="content-details">
+          <ion-label>
+            <p>{{customDate}}</p>
+            <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
+            <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
+            <p *ngIf="loadedEvent.IsRecurring">Repete</p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="middle-content">
+        <div *ngIf="loadedEvent.Attendees">
+        <h5>Intervenientes</h5>
         <ion-item class="ion-no-margin ion-no-padding">
-        <ion-label *ngFor="let attach of loadedAttachments"
-        (click)="viewDocument()">
-          <p class="attach-title-item">{{attach.SourceName}}</p>
-          <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
-        </ion-label>
-      </ion-item>
-      </ion-list>
+          <ion-label>
+            <div *ngFor="let attendee of loadedEvent.Attendees">
+              <p>{{attendee.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+      </div>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <textarea disabled class="width-100" [innerHTML]="loadedEvent.Body.Text" rows="6"></textarea>
+        </ion-item>
+      </div>
+    
+      <div *ngIf="loadedAttachments" class="bottom-content">
+        <ion-list>
+          <h3>Documentos Anexados</h3>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label *ngFor="let attach of loadedAttachments"
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{attach.SourceName}}</p>
+            <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button (click)="editEvent()" full class="btn-ok" shape="round" >Editar</button>
+        <div class="solid"></div>
+        <button (click)="deleteEvent()" full class="btn-delete" shape="round" >Eliminar</button>
+      </div>
     </div>
   </div>    
 </ion-content>
\ No newline at end of file
diff --git a/src/app/pages/agenda/view-event/view-event.page.scss b/src/app/pages/agenda/view-event/view-event.page.scss
index e1adb2189..54eaf645b 100644
--- a/src/app/pages/agenda/view-event/view-event.page.scss
+++ b/src/app/pages/agenda/view-event/view-event.page.scss
@@ -1,9 +1,9 @@
 ion-content{
     --background:transparent;
-    --padding-top:0px;
+    /* --padding-top:0px;
     --padding-start: 20px;
     --padding-end: 20px;
-    font-size: 18px;
+    font-size: 18px; */
 }
 ion-menu{
     --height: 225px;
@@ -13,22 +13,15 @@ ion-menu{
    --opacity: 1;
 }
   .main-header{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 0px 0px 0px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
-      padding: 0 !important;
       background: #fff;
 
       .left{
@@ -38,10 +31,10 @@ ion-menu{
         overflow: hidden;
       }
       .middle{
-          width: 230px;
+          //width: 230px;
           padding: 0!important;
           float: left;
-          margin: 2.5px 0 0 0;
+          //margin: 2.5px 0 0 0;
         }
       .header-icon-right{
         width: 45px;
@@ -75,13 +68,16 @@ ion-menu{
 
   }
   .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
     margin: 0 auto;
     background-color: #fff;
     overflow:auto;
-    padding: 15px 0px 0 0px;
+
+    .content{
+      padding: 30px 20px 0 20px !important;
+      margin: 0;
+      float: left;
+    }
 
     .upper-content{
         margin-left: 50px;
@@ -93,6 +89,14 @@ ion-menu{
           margin: 0 auto;
           padding: 0;
           overflow: auto;
+          
+          .label{
+            border-radius: 20px;
+            background: #ffb703;
+            float: right;
+            padding: 5px 13.5px 5px 13.5px;
+            color: #fff;
+        }
         }
       
         .location-detail{
@@ -147,6 +151,10 @@ ion-menu{
             font-size: 16px;
         }
       }
+      .line{
+        margin-top: 15px;
+        border-top: 1px solid #d8d8d8;
+      }
       .middle-conten{
         .middle-content h3, .middle-content p{
           font-size: 16px;
@@ -189,4 +197,45 @@ ion-menu{
         font-size: 13px;
         }
     }
+  }
+  .aside-right{
+    padding: 30px 20px 0 20px !important;
+  
+    .arrow-right{
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 20px;
+     
+      .arrow-right-icon{
+          width: 37px;
+          float: right;
+          font-size: 35px;
+          overflow: hidden;
+      }
+    }
+    .buttons{
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+  
+      .btn-ok, .btn-cancel, .btn-delete{
+        height: auto !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        padding: 15px !important;
+      }
+    }
+    .solid {
+      display: block;
+      width: 90%;
+      border-top: 1px solid #ebebeb;
+      margin: 0 auto !important;
+      margin-bottom: 10px !important;
+    }
+  }
+  textarea{
+    border:none;
+    --background:#fff !important;
   }
\ No newline at end of file
diff --git a/src/app/pages/agenda/view-event/view-event.page.ts b/src/app/pages/agenda/view-event/view-event.page.ts
index d63990cdb..ed5b2dc28 100644
--- a/src/app/pages/agenda/view-event/view-event.page.ts
+++ b/src/app/pages/agenda/view-event/view-event.page.ts
@@ -55,6 +55,14 @@ export class ViewEventPage implements OnInit {
     /* console.log(this.eventId); */
     this.loadEvent();
     this.getAttachments();
+
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth >= 1024){
+        this.modalController.dismiss(this.isEventEdited);
+      }
+    };
     
   }
   close(){
@@ -95,8 +103,13 @@ export class ViewEventPage implements OnInit {
   }
 
   async editEvent() {
-    /* this.close(); */
-    console.log(this.profile);
+
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     
     const modal = await this.modalController.create({
       component: EditEventPage,
@@ -104,8 +117,7 @@ export class ViewEventPage implements OnInit {
         event: this.loadedEvent,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res) => {
@@ -120,12 +132,12 @@ export class ViewEventPage implements OnInit {
       }
     });
   }
+
+
   viewDocument(){
     const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
     const browser = this.iab.create(url,"_blank");
     browser.show();
   }
 
-
-
 }
diff --git a/src/app/pages/chat/chat-routing.module.ts b/src/app/pages/chat/chat-routing.module.ts
index 7e318d35b..5a2dc637f 100644
--- a/src/app/pages/chat/chat-routing.module.ts
+++ b/src/app/pages/chat/chat-routing.module.ts
@@ -1,13 +1,16 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { ChatPage } from './chat.page';
-
-const routes: Routes = [
-  {
-    path: '',
-    component: ChatPage
-  },
  {
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ChatPage } from './chat.page';
+import { GroupMessagesPage } from './group-messages/group-messages.page';
+import { MessagesPage } from './messages/messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ChatPage,
+  },
+  {
     path: 'conversation',
     loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
   },
@@ -25,17 +28,23 @@ const routes: Routes = [
   },
   {
     path: 'messages',
+    outlet:'message',
     loadChildren: () => import('./messages/messages.module').then( m => m.MessagesPageModule)
   },
   {
     path: 'edit-group',
     loadChildren: () => import('./edit-group/edit-group.module').then( m => m.EditGroupPageModule)
+  },
+  {
+    path: 'test',
+    outlet:'test',
+    loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
   }
 
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class ChatPageRoutingModule {}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChatPageRoutingModule {}
diff --git a/src/app/pages/chat/chat.module.ts b/src/app/pages/chat/chat.module.ts
index d4f756504..fb3ceaaeb 100644
--- a/src/app/pages/chat/chat.module.ts
+++ b/src/app/pages/chat/chat.module.ts
@@ -8,6 +8,14 @@ import { ChatPageRoutingModule } from './chat-routing.module';
 
 import { ChatPage } from './chat.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { RouterModule } from '@angular/router';
+import { GroupMessagesPage } from 'src/app/shared/chat/group-messages/group-messages.page';
+import { MessagesPage } from 'src/app/shared/chat/messages/messages.page';
+import { EmptyChatPage } from 'src/app/shared/chat/empty-chat/empty-chat.page';
+import { ContactsPage } from 'src/app/shared/chat/messages/contacts/contacts.page';
+import { NewGroupPage } from 'src/app/shared/chat/new-group/new-group.page';
+import { GroupContactsPage } from 'src/app/shared/chat/group-messages/group-contacts/group-contacts.page';
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -15,9 +23,27 @@ import { SharedModule } from 'src/app/shared/shared.module';
     FormsModule,
     IonicModule,
     SharedModule,
+    PipesModule,
     ChatPageRoutingModule,
+    RouterModule,
   ],
-  declarations: [ChatPage],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  declarations: [
+    ChatPage,
+    MessagesPage,
+    ContactsPage,
+    GroupMessagesPage,
+    NewGroupPage,
+    GroupContactsPage,
+    EmptyChatPage,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  entryComponents: [
+    MessagesPage,
+    ContactsPage, 
+    GroupMessagesPage,
+    NewGroupPage,
+    GroupContactsPage,
+    EmptyChatPage,
+  ]
 })
 export class ChatPageModule {}
diff --git a/src/app/pages/chat/chat.page.html b/src/app/pages/chat/chat.page.html
index ba44667da..427672943 100644
--- a/src/app/pages/chat/chat.page.html
+++ b/src/app/pages/chat/chat.page.html
@@ -1,95 +1,100 @@
-<ion-header>
-  <!-- <app-header></app-header> -->
-  <app-header-no-search></app-header-no-search>
-</ion-header>
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="bg-blue">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="div-title">
-          <ion-label class="title">Chat</ion-label>
-        </div>
-        <div class="div-icon">
-          <ion-icon slot="end" (click)="newGroup()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
-          <ion-icon slot="end" (click)="selectContact()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <app-header></app-header>
 </ion-header>
 
-<ion-content>
+<ion-content class="height-100">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content">
-  <ion-toolbar >
-    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
-      <ion-segment-button value="Contactos">
-        Conversas
-      </ion-segment-button>
-      <ion-segment-button value="Grupos">
-        Grupos
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-  </ion-refresher>
-  <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'Contactos'">
-      <ion-item-group>
-        <ion-item-sliding>
-            <div *ngFor="let dm of userDirectMessages" class="item">
-              <div class="item-icon">
-                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
-              </div>
-              <div (click)="openMessages(dm)" class="item-content">
-                <div class="item-title-time">
-                  <div class="item-title">
-                    <ion-label *ngFor="let user of dm.usernames">
-                      <span *ngIf="user !=loggedUser.me.username">
-                      {{user}}
-                    </span>
-                    </ion-label>
-                  </div>
-                  <div class="item-date">{{dm._updatedAt | date: 'HH:mm'}}</div>
-                </div>
-                <div class="item-description">
-                  <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
-                </div>
-              </div>
+  <div class="main-content d-flex height-100">
+      <!-- Aside left -->
+      <div class="aside-wrapper d-flex flex-column pt-25">
+       <!--  <p class="text-center mt-0 aside-title px-20">Chat</p> -->
+          <div class="title-content">
+            <div class="div-title">
+              <ion-label class="title">Chat</ion-label>
             </div>
-        </ion-item-sliding>
-      </ion-item-group>
-    </ion-list>
-    <ion-list *ngSwitchCase="'Grupos'" >
-      <ion-item-group>
-        <ion-item-sliding>
-            <div *ngFor="let group of allGroups" class="item">
-              <div class="item-icon">
-                <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
-              </div>
-              <div (click)="openGroupMessages(group)" class="item-content">
-                <div class="item-title-time">
-                  <div class="item-title">
-                    <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
+            <div class="div-icon">
+              <ion-icon slot="end" (click)="openNewGroupPage()" src="assets/images/icons-chat-new-group.svg" ></ion-icon>
+              <ion-icon slot="end" (click)="openContactsPage()" src="assets/images/icons-chat-new-conversation.svg"></ion-icon>
+            </div>
+          </div>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
+            <ion-segment-button value="Contactos">
+              Conversas
+            </ion-segment-button>
+            <ion-segment-button value="Grupos">
+              Grupos
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <div class="overflow-y-auto d-flex flex-wrap">
+        <div class="width-100" [ngSwitch]="segment">
+          <ion-list *ngSwitchCase="'Contactos'">
+            <ion-item-group>
+              <ion-item-sliding>
+                  <div class="item width-100" *ngFor="let dm of userDirectMessages">
+                    <div class="item-icon">
+                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-chat-40.svg"></ion-icon>
+                    </div>
+                    <div (click)="openMessagesPage(dm._id)" class="item-content"><!-- (click)="openMessages(dm)" -->
+                      <div class="item-title-time">
+                        <div class="item-title">
+                          <ion-label *ngFor="let user of dm.usernames">
+                            <span *ngIf="user !=loggedUser.me.username">
+                            {{user}}
+                          </span>
+                          </ion-label>
+                        </div>
+                        <div class="item-date">{{dm._updatedAt | date: 'HH:mm'}}</div>
+                      </div>
+                      <div class="item-description">
+                        <ion-label *ngIf="dm.lastMessage">{{dm.lastMessage.msg}}</ion-label>
+                      </div>
+                    </div>
                   </div>
-                  <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
-                </div>
-                <div class="item-description" *ngIf="group.lastMessage">
-                  <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
-                </div>
-              </div>
-            </div>   
-        </ion-item-sliding>
-      </ion-item-group>
-      
-    </ion-list>
+              </ion-item-sliding>
+            </ion-item-group>
+          </ion-list>
+          <ion-list *ngSwitchCase="'Grupos'" >
+            <ion-item-group>
+              <ion-item-sliding>
+                  <div *ngFor="let group of allGroups" class="item">
+                    <div class="item-icon">
+                      <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
+                    </div>
+                    <div (click)="openGroupMessagesPage(group._id)" class="item-content">
+                      <div class="item-title-time">
+                        <div class="item-title">
+                          <ion-label>{{group.name.split('-').join(' ')}}</ion-label>
+                        </div>
+                        <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
+                      </div>
+                      <div class="item-description" *ngIf="group.lastMessage">
+                        <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
+                      </div>
+                    </div>
+                  </div>   
+              </ion-item-sliding>
+            </ion-item-group>
+            
+          </ion-list>
+        </div>
+        </div>
+      </div>
+      <!-- Aside right -->
+      <div class="aside-content d-none flex-column height-100">
+        <app-empty-chat [texto]="emptyTextDescription" class="d-flex height-100 flex-column" *ngIf="showEmptyComponent" #messagecontainer></app-empty-chat>
+        <app-messages class="d-flex height-100 flex-column" [roomId]="roomId" *ngIf="showMessages" #messagecontainer></app-messages>
+        <app-contacts (openMessage)="openMessagesPage($event)" *ngIf="showContacts" class="d-flex height-100 flex-column"></app-contacts>
+        <app-new-group (addGroupMessage)="openGroupContactsPage($event)" *ngIf="showNewGroup" class="d-flex height-100 flex-column"></app-new-group>
+        <app-group-contacts (openGroupMessage)="openGroupMessagesPage($event)" [roomId]="groupRoomId" class="d-flex height-100 flex-column" *ngIf="showGroupContacts"></app-group-contacts>
+        <app-group-messages (openGroupContacts)="openGroupContactsPage($event)" *ngIf="showGroupMessages" class="d-flex height-100 flex-column" [roomId]="roomId" #messagecontainer></app-group-messages>
+      </div>
   </div>
-</div>
 </ion-content>
 
 
diff --git a/src/app/pages/chat/chat.page.scss b/src/app/pages/chat/chat.page.scss
index 2d381ea85..90dfdab01 100644
--- a/src/app/pages/chat/chat.page.scss
+++ b/src/app/pages/chat/chat.page.scss
@@ -1,50 +1,50 @@
+ion-content{
+   --background: transparent;
+ }
+ :host{
+  background: #0782c9;
+  }
 
-.main-header{
-  width: 100%; /* 400px */
-  height: 100%;
-  font-family: Roboto;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-  background-color: #fff;
-  overflow:hidden;
-  padding: 30px 20px 0px 20px;
-  color:#000;
-  transform: translate3d(0, 1px, 0);
-  
   .title-content{
-    width: 360px;
-    margin: 0px auto;
-    overflow: auto;
+    width: 100%;
+    margin-bottom: 15px;
     padding: 0 !important;
     background: #fff;
+
+    .div-title{
+      padding: 0!important;
+      float: left;
+    }
+    .title{
+      font-size: 25px;
+    }
+    .div-icon{
+      width: 60%;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
   }
-  .div-title{
-    padding: 0!important;
-    float: left;
-  }
-  .title{
-    font-size: 25px;
-  }
-  .div-icon{
-    width: 112px;
-    float: right;
-    font-size: 35px;
-    overflow: auto;
-    padding: 1px;
-  }
-  .div-icon ion-icon{
-    float: right;
-    padding-left: 20px;
-  }
-}
+  
+
 .main-content{
-  width: 100%; /* 400px */
-  height: 100%;
   font-family: Roboto;
   margin: 0 auto;
   background-color: #fff;
-  overflow:auto;
-  padding: 15px 20px 0 20px;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+
+  overflow: auto;
+
+  .aside-wrapper{
+    margin: 0 !important;
+    padding: 30px 20px 0 20px !important;
+  }
 
   .iconschatnew-group{
     width: 30px;
@@ -58,6 +58,7 @@
     object-fit: contain;
     margin: 0 5px 0 5px;
   }
+
 }
 
 .item{
@@ -102,3 +103,34 @@
     color: #000;
   }
 }
+@media only screen and (min-width: 1024px) {
+  .main-content{
+   
+
+    .aside-wrapper{
+      width: 35%;
+      border-right: 1px solid #d8d8d8;
+      .aside-title{
+        font-size: 25px;
+      }
+    }
+    /* .aside{
+      width: 340px;
+    } */
+    .aside-content{
+      width: 65%;
+      display: flex !important;
+      background-color: white;
+    }
+    .item{
+      .item-icon{
+        width: 10%;
+      }
+      .item-content{
+        width: 90%;
+      }
+    }
+    
+  }
+
+}
diff --git a/src/app/pages/chat/chat.page.ts b/src/app/pages/chat/chat.page.ts
index 6c1e9e12e..9f4690cb8 100644
--- a/src/app/pages/chat/chat.page.ts
+++ b/src/app/pages/chat/chat.page.ts
@@ -1,5 +1,14 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { 
+  Component, 
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ComponentFactory,
+  Output
+} from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -9,6 +18,7 @@ import { ContactsPage } from './messages/contacts/contacts.page';
 import { MessagesPage } from './messages/messages.page';
 import { NewGroupPage } from './new-group/new-group.page';
 import { NewchatPage } from './newchat/newchat.page';
+import { Storage } from '@ionic/storage';
 
 @Component({
   selector: 'app-chat',
@@ -24,7 +34,7 @@ export class ChatPage implements OnInit {
   X_User_Id:any;
   X_Auth_Token:any;
   
-  loggedUser: any;
+  private loggedUser: any;
   /* Set segment variable */
   segment:string;
   allGroups: any[];
@@ -37,28 +47,125 @@ export class ChatPage implements OnInit {
   result:any;
   dmUsers:any;
 
+  desktopComponent: any = {
+    showMessages: false,
+    showGroupMessages: false,
+  }
+
+  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
+  //@ViewChild('groupMessages') child:GroupMessagesPage;
+  componentRef: any;
+
+  roomId:any;
+  groupRoomId:any;
+  showEmptyComponent=true;
+  showMessages=false;
+  showContacts=false;
+  showNewGroup=false;
+  showGroupMessages=false;
+  showGroupContacts=false;
+  emptyTextDescription = 'Sem conversa selecionada';
+
+  @Output() getRoomInfo;
+
+
   constructor(
     private http:HttpClient,
     private chatService: ChatService,
     private modalController: ModalController,
     private authService: AuthService,
+    private storage:Storage,
+    private resolver: ComponentFactoryResolver,
 
     ) { 
       this.headers = new HttpHeaders();
-      this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
-      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ');
+      /* this.headers = this.headers.set('X-User-Id', 'GqjNWiLrGEHRna7Zn');
+      this.headers = this.headers.set('X-Auth-Token', 'SJwIgtlqfloPK696fpc2VBvyDluipuIHKB_0Q6-9ycJ'); */
     }
-
   ngOnInit() {
     this.segment = "Contactos";
+
     this.authService.userData$.subscribe((res:any)=>{
       this.loggedUser=res;
       console.log(this.loggedUser);
-      
+      this.load();
     });
-    this.load();
+    this.storage.get('userDataKey').then(val=> {
+      let t = JSON.parse(unescape(atob(val)));
+      this.loggedUser=t;
+      //this.load();
+    })
+
+    console.log(this.roomId);
+    
   }
-  
+  closeAllDesktopComponents() {
+    this.showMessages=false;
+    this.showContacts=false;
+    this.showNewGroup=false;
+    this.showGroupMessages=false;
+    this.showEmptyComponent=false;
+    this.showGroupContacts=false;
+    console.log('All components closed!');
+  }
+  openGroupContactsPage(data){
+    console.log(data);
+    this.groupRoomId = data;
+    console.log(this.groupRoomId);
+    this.closeAllDesktopComponents();
+    if(window.innerWidth <= 1024){
+
+    }
+    else{
+      this.showGroupContacts = true;
+    }
+  }
+  openMessagesPage(rid) {
+    if( window.innerWidth <= 1024){
+      this.openMessagesModal(rid);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showEmptyComponent = false;
+      this.roomId = rid;
+      this.showMessages=true;
+    }
+  }
+  openContactsPage() {
+    console.log('OK');
+    this.closeAllDesktopComponents();
+    
+    if( window.innerWidth <= 1024){
+      this.selectContact();
+    }
+    else{
+      console.log('here');
+      this.showContacts=true;
+    }
+  }
+  openNewGroupPage() {
+    if( window.innerWidth <= 1024){
+      this.newGroup();
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showNewGroup=true;
+    }
+  }
+  openGroupMessagesPage(data) {
+    console.log('HERE');
+    
+    if( window.innerWidth <= 1024){
+      this.openGroupMessagesModal(data);
+    }
+    else{
+      this.closeAllDesktopComponents();
+      this.showEmptyComponent = false;
+      this.roomId = data;
+      this.showGroupMessages=true;
+    }
+  }
+
   onSegmentChange(){
     this.load();
   }
@@ -154,29 +261,44 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  async openMessages(dm:any){
-    console.log(dm);
+  async openMessagesModal(roomId:any){
+    this.closeAllDesktopComponents();
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'chat-mobile-modal-to-Desktop'
+    }
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: MessagesPage,
-      cssClass: 'group-messages',
+      cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        dm: dm,
+        roomId: roomId,
       },
     });
     await modal.present();
     modal.onDidDismiss();
   }
-  async openGroupMessages(room:any){
-    console.log(room);
+
+  async openGroupMessagesModal(roomId:any){
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'chat-mobile-modal-to-Desktop'
+    }
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: GroupMessagesPage,
-      cssClass: 'group-messages',
+      cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        room: room,
+        roomId: roomId,
       },
     });
     await modal.present();
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
index f63a629a8..7b473c119 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html
@@ -36,7 +36,7 @@
         <div class="members-checkbox">
           <ion-checkbox checked color="primary"></ion-checkbox>
           <p>{{user.name}}</p>
-          <ion-icon name="ellipse"></ion-icon>
+          <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
         </div>
       </ion-list>
     </div>
@@ -50,7 +50,7 @@
       <div *virtualItem="let user" class="item-checkbox">
         <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
          <p>{{user.name}}</p>
-        <ion-icon name="ellipse"></ion-icon>
+        <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
       </div>
       
     </ion-virtual-scroll>
diff --git a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
index 829026a52..b6e007730 100644
--- a/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
+++ b/src/app/pages/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -136,6 +136,21 @@
        color:#99e47b;
        margin-left: 10px;
      }
+     .online{
+      color:#99e47b !important;
+      }
+    .offline{
+      color:#cbced1 !important;
+      }
+    .away{
+      color:#ffd21f !important;
+      }
+      .invisible{
+        color:#cbced1 !important;
+      }
+      .busy{
+        color:#f5455c !important;
+      }
    }
  
  
\ No newline at end of file
diff --git a/src/app/pages/chat/group-messages/group-messages.module.ts b/src/app/pages/chat/group-messages/group-messages.module.ts
index 204590b92..89e729973 100644
--- a/src/app/pages/chat/group-messages/group-messages.module.ts
+++ b/src/app/pages/chat/group-messages/group-messages.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,6 +14,7 @@ import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modul
 @NgModule({
   imports: [
     CommonModule,
+    BrowserModule,
     FormsModule,
     IonicModule,
     SharedModule,
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 0f69171a8..24581eacf 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.html
+++ b/src/app/pages/chat/group-messages/group-messages.page.html
@@ -50,7 +50,7 @@
     </div>
   </div>
 
-</ion-content>
+<!-- </ion-content>
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -66,11 +66,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
+</ion-footer> -->
+
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
 </ion-footer>
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 08390cfcc..f1acc3533 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.scss
+++ b/src/app/pages/chat/group-messages/group-messages.page.scss
@@ -137,38 +137,57 @@
         float: right;
       }
    }
+   .online{
+    color:#99e47b !important;
+    }
+  .offline{
+    color:#cbced1 !important;
+    }
+  .away{
+    color:#ffd21f !important;
+    }
+    .invisible{
+      color:#cbced1 !important;
+    }
+    .busy{
+      color:#f5455c !important;
+    }
  }
 
  ion-footer{
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
+ }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
 
-  .chat-icon-options{
-    display:block !important;
-    font-size: 25px;
-    float: right !important;
-    margin-top: 10px;
-  }
-
-  .chat-icon-send{
-    font-size: 45px;
-    margin: 0 auto;
-    margin-top: 4px;
-  }
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
 
   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
 
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
- }
\ No newline at end of file
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+   }
+ }
+ 
+}
\ No newline at end of file
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 7c2a62965..e983b0948 100644
--- a/src/app/pages/chat/group-messages/group-messages.page.ts
+++ b/src/app/pages/chat/group-messages/group-messages.page.ts
@@ -26,6 +26,8 @@ export class GroupMessagesPage implements OnInit {
   members:any;
   contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
+  roomId: string;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -36,8 +38,7 @@ export class GroupMessagesPage implements OnInit {
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -45,27 +46,40 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
+    this.getRoomInfo();
   }
-  load(){
+
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.roomName = this.room.name.split('-').join(' ');
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
+
+
+  /* load(){
     this.getGroupContacts();
     this.loadGroupMessages();
-  }
+  } */
 
   close(){
     this.modalController.dismiss();
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
 
-  getGroupContacts(){
+  getGroupContacts(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,18 +87,18 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
       });
     }
   }
-  loadGroupMessages(){
+  loadGroupMessages(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
@@ -93,7 +107,7 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
@@ -104,12 +118,12 @@ export class GroupMessagesPage implements OnInit {
     let body = {
       "message": 
       { 
-        "rid": this.room._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
     this.chatService.sendMessage(body).subscribe(res=> {
-      this.loadGroupMessages(); 
+      this.getRoomInfo();
     });
     this.message = "";
   }
@@ -131,7 +145,7 @@ export class GroupMessagesPage implements OnInit {
         this.roomName = res.data.name.split('-').join(' ');
         console.log(this.roomName);
         
-        this.load();
+        this.getRoomInfo();
         /* this.modalController.dismiss(); */
       };
       
@@ -167,7 +181,7 @@ export class GroupMessagesPage implements OnInit {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.load();
+      this.getRoomInfo();
     });
   }
 
diff --git a/src/app/pages/chat/messages/messages.module.ts b/src/app/pages/chat/messages/messages.module.ts
index c933f79fe..57d7b6f77 100644
--- a/src/app/pages/chat/messages/messages.module.ts
+++ b/src/app/pages/chat/messages/messages.module.ts
@@ -8,6 +8,7 @@ import { MessagesPageRoutingModule } from './messages-routing.module';
 
 import { MessagesPage } from './messages.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
 
 @NgModule({
   imports: [
@@ -17,6 +18,6 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     MessagesPageRoutingModule
   ],
-  declarations: [MessagesPage]
+  declarations: [MessagesPage, SharedModule]
 })
 export class MessagesPageModule {}
diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html
index e8f28dce2..c8802c92d 100644
--- a/src/app/pages/chat/messages/messages.page.html
+++ b/src/app/pages/chat/messages/messages.page.html
@@ -2,7 +2,9 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="left">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
           <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
@@ -30,21 +32,6 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
-      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
-
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll> -->
-    <!-- <div class="incoming">
-      <div class="title">
-        <ion-label>Secretário Assuntos sociais</ion-label>
-        <span class="time">14:23</span>
-      </div>
-      <div>
-        <img src='assets/images/1.jpg' tappable>
-        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
-      </div>
-    </div> -->
     <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
       <div class="title">
         <ion-label>{{msg.u.name}}</ion-label>
@@ -57,7 +44,8 @@
   </div>
 
 </ion-content>
-<ion-footer>
+
+<!-- <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
       <ion-col size="1">
@@ -72,11 +60,27 @@
         </ion-item>
       </ion-col>
       <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
         <ion-label>
           <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>
   </ion-toolbar>
-</ion-footer>
+</ion-footer> -->
+
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-70">
+      <ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/pages/chat/messages/messages.page.scss b/src/app/pages/chat/messages/messages.page.scss
index 72515a71d..1a67bbcda 100644
--- a/src/app/pages/chat/messages/messages.page.scss
+++ b/src/app/pages/chat/messages/messages.page.scss
@@ -21,6 +21,12 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
+          .left{
+            width: 37px;
+            float: left;
+            font-size: 35px;
+            overflow: hidden;
+          }
            .middle{
             padding: 0!important;
             float: left;
@@ -144,39 +150,43 @@
  }
 
  ion-footer{
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
-
-  .chat-icon-options{
-    display:block !important;
-    font-size: 25px;
-    float: right !important;
-    margin-top: 10px;
-  }
-
-  .chat-icon-send{
-    font-size: 45px;
-    margin: 0 auto;
-    margin-top: 4px;
-  }
-
-   .type-message{
-    display: flex;
-    border: 1px solid #ebebeb;
-    border-radius: 25px;
-    padding-left: 15px;
-    align-items: center;
-    overflow: auto;
-
-    ion-textarea{
-      margin: 0 !important;
-      align-self: center;
-    }
-  }
-  
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
  }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
+
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
+
+  .type-message{
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
+
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+     overflow: auto;
+   }
+ }
+ 
+}
 
  .text-color-blue{
     font-size: 15px;
@@ -219,5 +229,4 @@ display: block;
   display: block;
  float: left;
  padding-left: 10px;
-}
- 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/pages/chat/messages/messages.page.ts b/src/app/pages/chat/messages/messages.page.ts
index 98ddb095e..e41b7d421 100644
--- a/src/app/pages/chat/messages/messages.page.ts
+++ b/src/app/pages/chat/messages/messages.page.ts
@@ -1,11 +1,11 @@
 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';
-import { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
   selector: 'app-messages',
@@ -21,9 +21,9 @@ export class MessagesPage implements OnInit, AfterViewChecked {
 
   message = '';
   messages:any;
-  dm:any;
   userPresence='';
   dmUsers:any;
+  roomId:string;
 
   
   constructor(
@@ -33,7 +33,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     private chatService: ChatService,
     private authService: AuthService,
   ) { 
-    this.dm = this.navParams.get('dm');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -50,6 +50,9 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     /* }, 9000); */
     
   }
+  close(){
+    this.modalController.dismiss();
+  }
   load(){
     this.loadMessages();
     this.getChatMembers();
@@ -76,7 +79,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     let body = {
       "message": 
       { 
-        "rid": this.dm._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
@@ -88,7 +91,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   loadMessages(){
     this.showLoader = true;
-    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
       /* console.log(res); */
       this.messages = res['messages'].reverse();
       console.log(this.messages);
@@ -97,7 +100,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   }
   getChatMembers(){
     this.showLoader = true;
-    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res=> {
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
       console.log(this.dmUsers);
@@ -109,7 +112,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     const popover = await this.popoverController.create({
       component: MessagesOptionsPage,
       componentProps: {
-        roomId: this.dm._id,
+        roomId: this.roomId,
       },
       cssClass: 'messages-options',
       event: ev,
@@ -141,4 +144,4 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     return await popover.present();
   }
 
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/chat/test/test-routing.module.ts b/src/app/pages/chat/test/test-routing.module.ts
new file mode 100644
index 000000000..7f8abfd58
--- /dev/null
+++ b/src/app/pages/chat/test/test-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TestPage } from './test.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TestPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TestPageRoutingModule {}
diff --git a/src/app/pages/chat/test/test.module.ts b/src/app/pages/chat/test/test.module.ts
new file mode 100644
index 000000000..c094c137f
--- /dev/null
+++ b/src/app/pages/chat/test/test.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TestPageRoutingModule } from './test-routing.module';
+
+import { TestPage } from './test.page';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TestPageRoutingModule
+  ],
+  declarations: [TestPage]
+})
+export class TestPageModule {}
diff --git a/src/app/pages/chat/test/test.page.html b/src/app/pages/chat/test/test.page.html
new file mode 100644
index 000000000..3475567a4
--- /dev/null
+++ b/src/app/pages/chat/test/test.page.html
@@ -0,0 +1,32 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>test</ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <div *ngFor="let member of members">{{member}}</div>
+
+</ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
+          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/pages/chat/test/test.page.scss b/src/app/pages/chat/test/test.page.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/pages/chat/test/test.page.spec.ts b/src/app/pages/chat/test/test.page.spec.ts
new file mode 100644
index 000000000..d721f93a1
--- /dev/null
+++ b/src/app/pages/chat/test/test.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { TestPage } from './test.page';
+
+describe('TestPage', () => {
+  let component: TestPage;
+  let fixture: ComponentFixture<TestPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/chat/test/test.page.ts b/src/app/pages/chat/test/test.page.ts
new file mode 100644
index 000000000..51293585d
--- /dev/null
+++ b/src/app/pages/chat/test/test.page.ts
@@ -0,0 +1,200 @@
+import { Component, OnInit } from '@angular/core';
+import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+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 { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.page.html',
+  styleUrls: ['./test.page.scss'],
+})
+export class TestPage implements OnInit {
+
+  showLoader: boolean;
+  isGroupCreated:boolean;
+  loggedUser: any;
+  message:any;
+  messages:any;
+  
+
+  room:any;
+  roomName:any;
+  members:any;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  constructor(
+    private menu: MenuController,
+    private modalController: ModalController,
+    private actionSheetController: ActionSheetController,
+    public popoverController: PopoverController,
+    private chatService: ChatService,
+    private navParams: NavParams,
+    private authService: AuthService,
+  ) {
+    this.isGroupCreated = true;
+    this.room = this.navParams.get('room');
+    this.roomName = this.room.name.split('-').join(' ');
+  }
+
+  ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    this.load();
+  }
+  load(){
+    this.getGroupContacts();
+    this.loadGroupMessages();
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  doRefresh(ev:any){
+    this.load();
+    ev.target.complete();
+  }
+
+  getGroupContacts(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+  }
+  loadGroupMessages(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        let msgOnly = res['messages'].filter(data => data.t != 'au');
+        this.messages = msgOnly.reverse();
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.messages = res['messages'].reverse();
+      });
+    }
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.room._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadGroupMessages(); 
+    });
+    this.message = "";
+  }
+
+  async openOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatPopoverPage,
+      cssClass: 'chat-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    await popover.present();
+    popover.onDidDismiss().then(res=>{
+      console.log(res);
+      if(res.data){
+        this.roomName = res.data.name.split('-').join(' ');
+        console.log(this.roomName);
+        
+        this.load();
+        /* this.modalController.dismiss(); */
+      };
+      
+    });
+  }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    console.log(this.members);
+  
+    const modal = await this.modalController.create({
+      component: GroupContactsPage,
+      componentProps: {
+        isCreated: this.isGroupCreated,
+        room: this.room,
+        members: this.members,
+        name: this.room.name,
+      }, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(()=>{
+      this.load();
+    });
+  }
+
+  /* async actionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Sair do grupo',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Alterar nome do grupo1',
+        handler: () => {
+          console.log('Alterar nome do grupo');
+          this.openChangeGroupName()
+        }
+      }, {
+        text: 'Apagar o grupo',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, 
+      ]
+    });
+    await actionSheet.present();
+  }
+ */
+
+}
+
diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html
index a21ed4f54..9e42d1831 100644
--- a/src/app/pages/events/events.page.html
+++ b/src/app/pages/events/events.page.html
@@ -7,12 +7,13 @@
       <p class="time ion-text-center">{{customDate}}</p>
     </ion-label>
     <ion-label>
-      <p class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
+      <p *ngIf="totalEvent==1" class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> evento agendado para hoje</p>
+      <p *ngIf="totalEvent!=1"class="event-number p-small ion-text-center"> <strong>{{totalEvent}}</strong> eventos agendados para hoje</p>
     </ion-label>
   
     <div class="next-meeting">
       <div class="meeting-time">{{currentHoursMinutes | date: 'HH:mm'}}</div>
-      <div class="meeting-description"> "{{currentEvent}}"</div>
+      <div *ngIf="currentEvent" class="meeting-description"> "{{currentEvent}}"</div>
     </div>
   </ion-toolbar>
 </ion-header>
@@ -55,9 +56,10 @@
           
         </div>
         <div class="content">
-          <ul>
-            <li *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)">
+          <ion-list>
+            <ion-item lines="none" *ngFor="let event of eventsList"
+            (click)="viewEventDetail(event.EventId)"
+            >
             <div class="d-flex  content-{{profile}}-{{event.CalendarName}}">
               <div class="schedule-time">
                 <div class="time-start">{{event.StartDate | date: 'HH:mm'}}</div>
@@ -68,9 +70,9 @@
                 <div class="description">{{event.Subject}}</div>
               </div>
             </div>
-            </li>
+            </ion-item>
 
-          </ul>
+          </ion-list>
           <!-- 
           <div class="resume">
             <div class="title">
@@ -93,29 +95,27 @@
           class="icon-next" 
           slot="end" 
           src="assets/images/icons-arrow-circle-arrow-right.svg"
-          (click)="openExpedientList()"
+          (click)="viewExpedientListPage()"
           ></ion-icon>
           
         </div>
         <div class="content">
-          <ul>
-            <li *ngFor = "let task of expedientList"
+          <ion-list>
+            <ion-item lines="none" *ngFor = "let task of expedientList"
             (click)="viewExpedientDetail(task.serialNumber)">
-           <!--  [routerLink]="['/home/gabinete-digital/expediente']" -->
-            >
-            <div class="d-flex">
+            <div class="item-exp d-flex">
               <div class="schedule-date">
                 <div class="time-end">{{task.taskStartDate | date: 'dd-MM-yy'}}</div>
                 <div class="time-start">{{task.taskStartDate | date: 'HH:mm'}}</div>
               </div>
               <div class="schedule-details pointer">
-                <div class="description">{{ task.workflowInstanceFolio }}</div>
+                <div class="description">{{ task.workflowInstanceDataFields.Subject }}</div>
                 <div class="location">{{ task.workflowInstanceDataFields.Sender }}</div>
               </div>
             </div>
-            </li>
+            </ion-item >
 
-          </ul>
+          </ion-list>
         </div>
       </div>
     </div>
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss
index 747464596..27d455055 100644
--- a/src/app/pages/events/events.page.scss
+++ b/src/app/pages/events/events.page.scss
@@ -364,17 +364,21 @@ ion-toolbar{
     }
   }
   .content{
-    ul{
+    .item-exp{
+      overflow: auto;
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    ion-list{
       padding: 0px;
       margin: 0px;
       .d-flex{
         width: 100%;
-        height: 40px;
         display: flex;
         justify-content: space-between;
         align-items: center;
       }
-      li{
+      ion-item{
         padding-bottom: 5px;
         margin-top: 5px;
         border-bottom: 1px solid #ebebeb;
@@ -427,7 +431,7 @@ ion-toolbar{
           background-color: #f05d5e;
         }
       }
-      li:last-child{
+      ion-item:last-child{
         border-bottom: unset !important;
         padding-bottom: unset !important;
       }
@@ -462,6 +466,7 @@ ion-toolbar{
   cursor: pointer;
 }
 
+
 @media only screen and (min-width: 804px) {
 
   .schedule:first-child {
diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts
index 4d434cedd..3b8fb1834 100644
--- a/src/app/pages/events/events.page.ts
+++ b/src/app/pages/events/events.page.ts
@@ -1,14 +1,12 @@
-import { Component, OnInit, LOCALE_ID } from '@angular/core';
+import { Component, OnInit, LOCALE_ID, EventEmitter, Output } from '@angular/core';
 
 import { Event } from '../../models/event.model';
 import { EventsService } from 'src/app/services/events.service';
-import { Router } from '@angular/router';
+import { NavigationExtras, Router } from '@angular/router';
 import { ActivatedRoute, NavigationEnd } from '@angular/router';
-import { formatDate } from '@angular/common';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { StorageService } from 'src/app/services/storage.service';
-import { AuthConnstants } from 'src/app/config/auth-constants';
 import { ModalController } from '@ionic/angular';
 import { EventDetailPage } from './event-detail/event-detail.page';
 import { EventDetailModalPage } from './event-detail-modal/event-detail-modal.page';
@@ -17,6 +15,8 @@ import { DailyWorkTask } from '../../models/dailyworktask.model';
 import { ViewEventPage } from '../agenda/view-event/view-event.page';
 import { ExpedientePage } from '../gabinete-digital/expediente/expediente.page';
 import { ExpedienteDetailPage } from '../gabinete-digital/expediente/expediente-detail/expediente-detail.page';
+import { GabineteDigitalPage } from '../gabinete-digital/gabinete-digital.page';
+import { EditEventPage } from '../agenda/edit-event/edit-event.page';
 
 @Component({
   selector: 'app-events',
@@ -60,14 +60,17 @@ export class EventsPage implements OnInit {
   taskslist:DailyWorkTask[];
   expedientList:any;
 
+  @Output() openExpedientListPage:EventEmitter<any> = new EventEmitter<any>();
+
   constructor(private eventService: EventsService, 
     private router: Router, 
     private storageService:StorageService,
     public activatedRoute: ActivatedRoute,
     private alertController: AlertService,
-    private modalController: ModalController,
     private authService: AuthService,
-    private processes:ProcessesService) {
+    private processes:ProcessesService,
+    /* private gabineteService: GabineteDigitalPage, */
+    private modalController:ModalController) {
       this.prEventList = null;
 
       // list
@@ -75,17 +78,12 @@ export class EventsPage implements OnInit {
       
      }
 
-
-  swipe(){
-    console.log('!!!!');
-  }
-
   ngOnInit() {
     //Inicializar segment
     this.segment = "Combinada";
     //Initialize profile as mdgpr
     this.profile = "mdgpr";
-    console.log(this.profile);
+   /*  console.log(this.profile); */
 
     /* this.storageService.get(AuthConnstants.USER).then(res=>{
       console.log(res);
@@ -115,6 +113,7 @@ export class EventsPage implements OnInit {
   }
 
   RefreshEvents(){
+    this.currentEvent = "";
     this.showLoader = true;
 
     let date = new Date();
@@ -246,8 +245,7 @@ export class EventsPage implements OnInit {
     return await modal.present();
   }
 
-  LoadList()
-  {
+  LoadList(){
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
       this.expedientList = result.reverse();
       console.log(this.expedientList);
@@ -261,6 +259,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewEventDetail(eventId:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     console.log(this.profile);
     
     const modal = await this.modalController.create({
@@ -269,8 +273,7 @@ export class EventsPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
@@ -282,6 +285,12 @@ export class EventsPage implements OnInit {
   }
 
   async viewExpedientDetail(serialNumber:any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     /* console.log(this.profile);
     console.log(serialNumber); */
     
@@ -291,8 +300,7 @@ export class EventsPage implements OnInit {
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res)=>{
@@ -303,21 +311,39 @@ export class EventsPage implements OnInit {
     });
   }
 
+  viewExpedientListPage(){
+    if( window.innerWidth <= 1024){
+      this.openExpedientList();
+    }
+    else{
+      console.log('ttt');
+      let navigationExtras: NavigationExtras = {
+        queryParams: {
+            "show": true,
+        }
+      };
+      this.router.navigate(['/home/gabinete-digital'], navigationExtras);
+    }
+  }
+
   async openExpedientList(){
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop'
+    }
     const modal = await this.modalController.create({
       component: ExpedientePage,
       componentProps:{
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss();
   }
 
   
-  
-  
 }
 
diff --git a/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.ts b/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.ts
index 089f8d110..59a8fbe75 100644
--- a/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.ts
+++ b/src/app/pages/gabinete-digital/discart-expedient-modal/discart-expedient-modal.page.ts
@@ -10,6 +10,8 @@ import { ProcessesService } from 'src/app/services/processes.service';
 })
 export class DiscartExpedientModalPage implements OnInit {
   serialNumber:string;
+  folderId:string;
+  action:string;
   constructor(
     private modalController: ModalController,
     private processes:ProcessesService,
@@ -17,6 +19,8 @@ export class DiscartExpedientModalPage implements OnInit {
     private navParams: NavParams,
   ) { 
     this.serialNumber = this.navParams.get('serialNumber');
+    this.folderId = this.navParams.get('folderId');
+    this.action = this.navParams.get('action');
    }
 
   ngOnInit() {
@@ -24,15 +28,28 @@ export class DiscartExpedientModalPage implements OnInit {
     
   }
   close(){
+    console.log(this.folderId);
+    console.log('FOLDER');
+
+    if(this.action != 'discart'){
+      this.processes.UpdateTaskStatus(this.folderId).subscribe(res=>{
+        console.log(res);
+      });
+    }
     this.modalController.dismiss();
   }
-  /* notDelete(){
-
-  } */
+  
   save(){
-    let body = { "serialNumber": this.serialNumber, "action": "Task Completed" }
-    console.log(body);
-    this.processes.PostTaskAction(body);
+    if(this.action != 'discart'){
+      let body = { "serialNumber": this.serialNumber, "action": "Tratado" }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+    }
+    else{
+      let body = { "serialNumber": this.serialNumber, "action": "Passivo" }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+    }
     this.router.navigate(['/home/gabinete-digital/expediente']);
     this.modalController.dismiss();
   }
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
index a0e503485..65598f61e 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
+++ b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.html
@@ -1,9 +1,9 @@
 <ion-header class="ion-no-border">
-  <div class="header-content">
+  <div class="header-content  mx-20 d-flex justify-start">
     <div class="header-icon-left">
       <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
     </div>
-    <div class="header-title">
+    <div class="header-title flex-md-grow-1">
       <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
     </div>
     <div class="header-icon-right">
@@ -48,24 +48,20 @@
     <div class="content-details">
       <ion-label>
         <p>{{customDate}}</p>
-        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+        <p>das {{loadedEvent.workflowInstanceDataFields.StartDate}} às {{loadedEvent.workflowInstanceDataFields.EndDate}}</p>
         <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
         <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
       </ion-label>
     </div>
   </div>
   <div class="middle-content">
+    <h5>Intervenientes</h5>
     <ion-item>
-      <ion-label>
-        <h3>Intervenientes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
-      </ion-label>
+      <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
     </ion-item>
+    <h5>Detalhes</h5>
     <ion-item>
-      <ion-label>
-        <h3>Detalhes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
     </ion-item>
   </div>
 
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
index e2bd9995d..1e8379f6c 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
+++ b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.scss
@@ -8,7 +8,6 @@ ion-menu{
   --height: 225px;
 }
 .header-content{
-  width: 360px;
   overflow: auto;
   margin: 25px auto;
 }
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts
index 15ca40eef..d88b2a1ef 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts
+++ b/src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page.ts
@@ -51,6 +51,8 @@ export class ApproveEventModalPage implements OnInit {
   ngOnInit() {
     this.getTask();
     this.getAttachments();
+
+    
   }
 
 
diff --git a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
index f12204c56..23aa99595 100644
--- a/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
+++ b/src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html
@@ -54,18 +54,17 @@
       </ion-label>
     </div>
   </div>
+  <div class="line"></div>
   <div class="middle-content" *ngIf="loadedEvent">
+    <h5>Intervenientes</h5>
     <ion-item>
       <ion-label>
-        <h3>Intervenientes</h3>
         <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
       </ion-label>
     </ion-item>
-    <ion-item>
-      <ion-label>
-        <h3>Detalhes</h3>
-        <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
-      </ion-label>
+    <h5>Detalhes</h5>
+    <ion-item> 
+      <p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
     </ion-item>
   </div>
 
diff --git a/src/app/pages/gabinete-digital/event-list/event-list.page.html b/src/app/pages/gabinete-digital/event-list/event-list.page.html
index 4b7f5b757..d43507fdc 100644
--- a/src/app/pages/gabinete-digital/event-list/event-list.page.html
+++ b/src/app/pages/gabinete-digital/event-list/event-list.page.html
@@ -6,16 +6,8 @@
     <div class="header-title">
       <label>Eventos para Aprovação</label>
     </div>
-  
-  <!-- <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button (click) ="close()"></ion-back-button>
-    </ion-buttons>
-    <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
-    <ion-title>Eventos para Aprovação</ion-title>
-  </ion-toolbar> -->
   <ion-toolbar>
-    <ion-segment [(ngModel)]="segment">
+    <ion-segment [(ngModel)]="profile">
       <ion-segment-button value="MDGPR">
         Seu calendário
       </ion-segment-button>
@@ -33,7 +25,7 @@
      <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="segment"> 
+  <div [ngSwitch]="profile"> 
     <ion-list *ngSwitchCase="'MDGPR'">
       <div *ngIf="eventsMDGPRList">
         <ion-list>
@@ -41,7 +33,7 @@
             <ion-item class="Rectangle" lines="none" 
               *ngFor="let event of eventsMDGPRList" (click)="openApproveModal(event.serialNumber)">
               
-              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}}">
+              <div class="content-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
                 <div class="approve-event-time">
                   <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
                   <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
@@ -62,7 +54,7 @@
         <ion-item-sliding>
           <ion-item class="Rectangle" lines="none" 
               *ngFor="let event of eventsPRList" (click)="openApproveModal(event.serialNumber)">
-              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}}">
+              <div class="content-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
                 <div class="approve-event-time">
                   <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
                   <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
diff --git a/src/app/pages/gabinete-digital/event-list/event-list.page.scss b/src/app/pages/gabinete-digital/event-list/event-list.page.scss
index f36fe4665..b5dbc6081 100644
--- a/src/app/pages/gabinete-digital/event-list/event-list.page.scss
+++ b/src/app/pages/gabinete-digital/event-list/event-list.page.scss
@@ -1,8 +1,11 @@
+
+:host{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+}
 .header-content{
-  width: 360px;
+  margin: 0 !important;
   overflow: auto;
-  margin: 0 auto;
-  padding-top: 25px;
 }
 .header-icon-left{
   width: 36px;
@@ -11,10 +14,10 @@
   float: left;
 }
 .header-title{
-  width: 300px;
+  //width: 300px;
   font-family: Roboto;
   font-size: 25px;
-  margin: 0 5px 0 5px;
+  //margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
   float: left;
@@ -23,7 +26,7 @@ ion-item-sliding{
   margin-top: 5px;
 }
 .Rectangle {
-  width: 360px;
+  //width: 360px;
   border-radius: 15px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
   border: solid 1px #e9e9e9;
@@ -33,26 +36,24 @@ ion-item-sliding{
   margin-bottom: 10px;
   overflow: auto;
 }
-.content-mdgpr-Oficial{
-  width: 340px;
+.content-pr-Oficial{
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #99e47b;
   overflow: auto;
 }
-.content-mdgpr-Pessoal{
-  width: 340px;
+.content-pr-Pessoal{
+  background-color: var(--white);
   border-radius: 5px;
   border-right: 5px solid #958bfc;
   overflow: auto;
 }
-.content-pr-Oficial{
-  width: 340px;
+.content-mdgpr-Oficial{
   border-radius: 5px;
   border-right: 5px solid #ffb703;
   overflow: auto;
 }
-.content-pr-Pessoal{
-  width: 340px;
+.content-mdgpr-Pessoal{
   border-radius: 5px;
   border-right: 5px solid #f05d5e;
   overflow: auto;
@@ -79,7 +80,7 @@ ion-item-sliding{
   margin-left: 10px;
 }
 .approve-event-detail p{
-  width: 250px;
+  //width: 250px;
   font-family: Roboto;
   font-size: 13px;
   font-weight: normal;
@@ -92,7 +93,7 @@ ion-item-sliding{
   padding: 0;
 }
 .approve-event-detail h3{
-  width: 250px;
+  //width: 250px;
   font-family: Roboto;
   font-size: 15px;
   font-weight: bold;
diff --git a/src/app/pages/gabinete-digital/event-list/event-list.page.ts b/src/app/pages/gabinete-digital/event-list/event-list.page.ts
index 161b1771e..c3fb15702 100644
--- a/src/app/pages/gabinete-digital/event-list/event-list.page.ts
+++ b/src/app/pages/gabinete-digital/event-list/event-list.page.ts
@@ -13,7 +13,7 @@ import { NavigationEnd, Router } from '@angular/router';
   styleUrls: ['./event-list.page.scss'],
 })
 export class EventListPage implements OnInit {
-  segment:string;
+  profile:string;
   showLoader: boolean;
   eventsPRList: any;
   eventsMDGPRList: any;
@@ -29,11 +29,12 @@ export class EventListPage implements OnInit {
     private router: Router,
     private navParams: NavParams,
     ) { }
-S
+
   ngOnInit() {
-    this.segment = this.navParams.get('segment');
+    this.profile = this.navParams.get('profile');
     /* console.log(this.navParams.get('md')); */
-    console.log(this.segment);
+    console.log(this.profile);
+    
     this.LoadToApproveEvents();
     
 
@@ -42,6 +43,14 @@ S
         this.LoadToApproveEvents();
       }
     });
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth <= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
   }
 
   LoadToApproveEvents(){
@@ -56,13 +65,22 @@ S
       this.eventsMDGPRList = res;
     });
   }
+
+
   async openApproveModal(eventSerialNumber){
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'cal-modal  modal modal-desktop'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
     const modal = await this.modalController.create({
       component: ApproveEventModalPage,
       componentProps:{
         serialNumber: eventSerialNumber,
       },
-      cssClass: 'cal-modal',
+      cssClass: 'event-list',
       backdropDismiss: false
     });
 
@@ -70,6 +88,7 @@ S
 
     modal.onDidDismiss();
   }
+
   doRefresh(event) {
     this.LoadToApproveEvents();
     console.log('refresh');
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
index 5df27b85f..bd36576bc 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.html
@@ -1,194 +1,198 @@
-<ion-header class="ion-no-border">
+<!-- <ion-header class="ion-no-border">
   <div class="header-content">
     <div class="header-title">
       <label>Convocar Reunião</label>
     </div>
   </div>
-</ion-header>
+</ion-header> -->
 
-<ion-content>
-    <div class="ion-item-container">
-      <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
-    </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="header-content">
+        <div class="header-title">
+          <label>Convocar Reunião</label>
+        </div>
       </div>
-      <div class="ion-input-class">
-        <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.Subject"></ion-input>
+      </div>
+
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postData.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <span class="error ion-padding" *ngIf="formLocationSatus">
+          Campo obrigatório
+        </span>
+
+      </div>
+
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Início"
+            [(ngModel)]="postData.StartDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+        </div>
       </div>
     </div>
-    <!-- Error messages -->
-    <span class="error ion-padding" *ngIf="formLocationSatus">
-      Campo obrigatório
-    </span>
 
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select [(ngModel)]="postData.CalendarName" placeholder="Selecione repetição" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="Oficial">Oficial</ion-select-option>
-          <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-        </ion-select>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-datetime 
+            placeholder="Fim"
+            [(ngModel)]="postData.EndDate" 
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+            value="2020-11-19T11:06Z">
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Início"
-        [(ngModel)]="postData.StartDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-datetime 
-        placeholder="Fim"
-        [(ngModel)]="postData.EndDate" 
-        displayFormat="D MMM YYYY H:mm"
-        minuteValues="0,15,30,45"
-        monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
-        min="2018" 
-        max="2022" 
-        value="2020-11-19T11:06Z">
-      </ion-datetime>
-      <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class">
-      <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
-        <ion-select-option value="false">Não se repete</ion-select-option>
-        <ion-select-option value="true">Repete</ion-select-option>
-        <!-- <ion-select-option value="true">Semanal</ion-select-option>
-        <ion-select-option value="true">Diário</ion-select-option>
-        <ion-select-option value="true">Anual</ion-select-option> -->
-      </ion-select>
-    </div>
-  </div>
-</div>
-
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-            <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-select [(ngModel)]="postData.IsRecurring" placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+            <ion-select-option value="false">Não se repete</ion-select-option>
+            <ion-select-option value="true">Repete</ion-select-option>
+            <!-- <ion-select-option value="true">Semanal</ion-select-option>
+            <ion-select-option value="true">Diário</ion-select-option>
+            <ion-select-option value="true">Anual</ion-select-option> -->
+          </ion-select>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-    </div>
-    <div class="ion-input-class-no-height">
-      <div class="list-people">
-        <ion-item lines="none">
-          <ion-list>
-            <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-            <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-          </ion-list>
-        </ion-item>
-      </div>
-      <div class="add-people">
-        <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-</div>
 
-<div class="container-div">
-  <div class="ion-item-class-2">
-    <div class="ion-icon-class">
-      <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
     </div>
-    <div class="ion-input-class">
-      <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+
+    <div class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-input [(ngModel)]="postData.Body.Text" placeholder="Detalhes"></ion-input>
+        </div>
+      </div>
+    </div>
+
+    <div hidden class="ion-item-container-no-border">
+      <ion-label>
+        <div class="attach-icon">
+          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+        </div>
+        <div class="attach-document">
+          <ion-label>Anexar Documentos</ion-label>
+        </div> 
+      </ion-label>
+    </div>
+
+    <div *ngIf="loadedAttachments">
+      <ion-item>
+        <ion-label>Documentos Anexados</ion-label>
+      </ion-item>
+      <ion-list>
+        <ion-item *ngFor="let attachment of loadedAttachments">
+        <ion-label>
+          <h4 class="attach-title-item">{{attachment.Description}}</h4>
+          <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div>
+    </div>
+    <div class="aside-right flex-column height-100">
     </div>
   </div>
-</div>
-
-<div hidden class="ion-item-container-no-border">
-  <ion-label>
-    <div class="attach-icon">
-      <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
-    </div>
-    <div class="attach-document">
-      <ion-label>Anexar Documentos</ion-label>
-    </div> 
-  </ion-label>
-</div>
-
-<div *ngIf="loadedAttachments">
-  <ion-item>
-    <ion-label>Documentos Anexados</ion-label>
-  </ion-item>
-  <ion-list>
-    <ion-item *ngFor="let attachment of loadedAttachments">
-    <ion-label>
-      <h4 class="attach-title-item">{{attachment.Description}}</h4>
-      <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-    </ion-label>
-  </ion-item>
-  </ion-list>
-</div>
-
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>
 
diff --git a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
index 213236ce7..5dd6dbf71 100644
--- a/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page.scss
@@ -1,111 +1,106 @@
-.header-content{
-  width: 360px;
-  overflow: auto;
-  margin: 25px auto;
-}
-.header-title{
-  width: 264px;
-  font-family: Roboto;
-  font-size: 25px;
-  margin: 0 5px 0 5px;
-  padding: 0;
-  color:#000;
-  float: left;
-}
-ion-content{
-  --padding-top: 0px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 10px;
-}
-.ion-item-container-no-border{
-  width: 100%;
-  margin: 0px auto;
-  padding: 0 !important;
-  overflow: auto;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .header-content{
+    overflow: auto;
+  }
+  .header-title{
+    font-family: Roboto;
+    font-size: 25px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+    
+  }
+  .ion-item-container-no-border{
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: hidden;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 5px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    width: 100%;
+    font-size: 15px;
+    color:#0d89d1;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
   float: right;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.attach-document{
-  font-size: 15px;
-  color: #0d89d1;
-  margin: 5px 5px 5px 10px;
-  padding: 5px;
-  float: left;
-}
-.attach-icon{
-  width: 37px;
-  font-size: 35px;
-  float: left;
-}
-.attach-title-item{
-  width: 100%;
-  font-size: 15px;
-  color:#0d89d1;
-}
-/* SPAN */
-.span-left{
-  float: left;
-  font-size: 15x;
-}
-.span-right{
-text-align: right;
-float: right;
-font-size: 13px;
+  font-size: 13px;
+  }
 }
 .container-footer{
     margin:0 auto;
@@ -145,4 +140,10 @@ font-size: 13px;
 }
 .span-color{
   color:red;
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
 }
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
index bbc46ea81..44ccda859 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.module.ts
@@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular';
 import { ExpedientTaskModalPageRoutingModule } from './expedient-task-modal-routing.module';
 
 import { ExpedientTaskModalPage } from './expedient-task-modal.page';
+import { AttendeeModalPage } from 'src/app/shared/event/attendee-modal/attendee-modal.page';
 
 @NgModule({
   imports: [
@@ -15,6 +16,9 @@ import { ExpedientTaskModalPage } from './expedient-task-modal.page';
     IonicModule,
     ExpedientTaskModalPageRoutingModule
   ],
-  declarations: [ExpedientTaskModalPage]
+  declarations: [
+    ExpedientTaskModalPage,
+    AttendeeModalPage
+  ]
 })
 export class ExpedientTaskModalPageModule {}
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
index 9a5c970e9..7bd587cd5 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.html
@@ -1,127 +1,132 @@
-<ion-content>
-  <ion-item  lines="none">
-    <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
-  </ion-item>
-  <div class="ion-item-container">
-    <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
-  </div>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <ion-item  lines="none">
+        <ion-label class="title">{{modalTitle[taskType]}}</ion-label>
+      </ion-item>
+      <div class="ion-item-container width-100">
+        <ion-input placeholder="Assunto" [(ngModel)]="postData.DispatchFolder.Subject"></ion-input>
+      </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option value="99999861">Normal</ion-select-option>
-          <ion-select-option value="99999862">Urgente</ion-select-option>
-          <ion-select-option value="99999863">Muito Urgente</ion-select-option>
-          <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class">
-        <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
-          <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
-        </ion-select>
-      </div>
-    </div>
-  </div>
-
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
-              <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input class="add-border" placeholder="Descrição" [(ngModel)]="postData.DispatchFolder.Message"></ion-input>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div class="container-div">
-    <div class="ion-item-class-2">
-      <div class="ion-icon-class">
-        <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-      </div>
-      <div class="ion-input-class-no-height">
-        <div class="list-people">
-          <ion-item lines="none">
-            <ion-list>
-              <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
-              <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
-            </ion-list>
-          </ion-item>
-        </div>
-        <div class="add-people">
-          <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Prazo" [(ngModel)]="postData.Priority" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option value="99999861">Normal</ion-select-option>
+              <ion-select-option value="99999862">Urgente</ion-select-option>
+              <ion-select-option value="99999863">Muito Urgente</ion-select-option>
+              <ion-select-option value="99999864">Urgentíssimo</ion-select-option>
+            </ion-select>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-
-  <div hidden class="ion-item-container-no-border">
-    <ion-label>
-      <div class="attach-icon">
-        <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Tipo" [(ngModel)]="postData.SubjectTypeId" interface="action-sheet" Cancel-text="Cancelar" required>
+              <ion-select-option *ngFor="let type of subjectTypes" value="{{type.Code}}">{{type.Description}}</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
       </div>
-      <div class="attach-document">
-        <ion-label>Anexar Documentos</ion-label>
-      </div> 
-    </ion-label>
-  </div>
 
-  <div *ngIf="loadedAttachments">
-    <ion-item>
-      <ion-label>Documentos Anexados</ion-label>
-    </ion-item>
-    <ion-list>
-      <ion-item *ngFor="let attachment of loadedAttachments">
-      <ion-label>
-        <h4 class="attach-title-item">{{attachment.Description}}</h4>
-        <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
-      </ion-label>
-    </ion-item>
-    </ion-list>
-  </div>
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipants" class="list-people-title">Adicionar intervenientes</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipants">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipants()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
 
+      <div class="container-div">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class-no-height">
+            <div class="list-people">
+              <ion-item lines="none">
+                <ion-list>
+                  <ion-label *ngIf="!taskParticipantsCc" class="list-people-title">Com conhecimento</ion-label>
+                  <ion-label *ngFor="let participant of taskParticipantsCc">{{participant.Name}}</ion-label>
+                </ion-list>
+              </ion-item>
+            </div>
+            <div class="add-people">
+              <ion-icon (click)="addParticipantsCc()" slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div hidden class="ion-item-container-no-border">
+        <ion-label>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
+        </ion-label>
+      </div>
+
+      <div *ngIf="loadedAttachments">
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item *ngFor="let attachment of loadedAttachments">
+          <ion-label>
+            <h4 class="attach-title-item">{{attachment.Description}}</h4>
+            <p><span class="span-left">{{attachment.Stakeholders}}</span><span class="span-right"> {{ attachment.CreateDate | date: 'dd/MM/yyyy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+
+    <app-attendee-modal
+      class="aside-right d-flex flex-column height-100"
+      [eventAttendees]="contacts"
+      (closeComponent)="closeComponent()"
+      (setContact)="setContact($event)"
+    ></app-attendee-modal>
+
+  </div>
 </ion-content>
 <ion-footer>
-  <ion-toolbar>
-    <ion-item lines="none">
-      <p>
-        <ion-button class="button-cancel" shape="round" (click)="cancelTask()">Cancelar</ion-button>
-      </p>
-      <p>
-        <ion-button class="button-save" shape="round" (click)="saveTask()">Gravar</ion-button>
-      </p>
-    </ion-item>
-  </ion-toolbar>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="cancelTask()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="saveTask()">Gravar</button>
+  </div>
 </ion-footer>
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
index 4fb4b7370..024b06845 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.scss
@@ -1,111 +1,112 @@
-ion-content{
-  --padding-top: 20px;
-  --padding-start: 15px;
-  --padding-end: 20px;
-}
-.title{
-  font-family: Roboto;
-  font-size: 25px;
-  font-weight: normal;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  color: #000000;
-  margin: 8px 0 8px 0px;
-}
-.container-div{
-  margin-bottom: 15px;
-  overflow: auto;
-}
-.ion-item-container{
-  width: 360px;
-  margin: 15px auto;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-}
-.ion-item-container-no-border{
-  width: 360px;
-  margin: 15px auto;
-}
-.ion-item-class-2{
-  width: 360px;
-  margin: 0px auto;
-}
-.ion-icon-class{
-  width: 45px;
-  height: 45px;
-  float: left;
-  padding: 10px;
-  font-size: 25px;
-}
-ion-select{
-  padding-left: 5px;
-  margin-left: 0;
-}
-.ion-input-class{
-  width: 315px;
-  height: 45px;
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  padding-left: 5px;
-  padding-right: 10px;
-  float: left;
-}
-.ion-input-class-no-height{
-  border: 1px solid #ebebeb;
-  border-radius: 5px;
-  overflow: auto;
-}
-.list-people{
-  width: 256px;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
   float: left;
 
-}
-.add-people{
-  width: 45px;
+  .title{
+    font-family: Roboto;
+    font-size: 25px;
+    font-weight: normal;
+    font-stretch: normal;
+    font-style: normal;
+    line-height: normal;
+    letter-spacing: normal;
+    color: #000000;
+    //margin: 8px 0 8px 0px;
+  }
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    //width: 360px;
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+  }
+  .ion-item-container-no-border{
+    //width: 360px;
+    //margin: 15px auto;
+  }
+  .ion-item-class-2{
+    //width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  ion-select{
+    padding-left: 5px;
+    margin-left: 0;
+  }
+  .ion-input-class{
+    width: calc(100% - 45px);
+    height: 45px;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .list-people{
+    width: 256px;
+    float: left;
+
+  }
+  .add-people{
+    width: 45px;
+    float: right;
+    overflow: auto;
+    font-size: 25px;
+    padding: 10px;
+  }
+  .list-people-title{
+    /* font-size: 13px; */
+    color: #797979;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+  }
+
+  .attach-title-item{
+    width: 100%;
+    font-size: 15px;
+    color:#0d89d1;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
   float: right;
-  overflow: auto;
-  font-size: 25px;
-  padding: 10px;
-}
-.list-people-title{
-  /* font-size: 13px; */
-  color: #797979;
-}
-.attach-document{
-  font-size: 15px;
-  color: #0d89d1;
-}
-
-.attach-title-item{
-  width: 100%;
-  font-size: 15px;
-  color:#0d89d1;
-}
-/* SPAN */
-.span-left{
-  float: left;
-  font-size: 15x;
-}
-.span-right{
-text-align: right;
-float: right;
-font-size: 13px;
+  font-size: 13px;
+  }
 }
 .container-footer{
-    margin:0 auto;
-    overflow: auto;
-}
-.button-cancel {
-    width: 170px;
-    height: 44px;
-    border-radius: 22.5px;
-    --background: #e0e9ee;
-    --color: #061b52;
-    margin:10px;
-  }
+      margin:0 auto;
+      overflow: auto;
+  .button-cancel {
+      width: 170px;
+      height: 44px;
+      border-radius: 22.5px;
+      --background: #e0e9ee;
+      --color: #061b52;
+      margin:10px;
+    }
   .button-save {
     width: 170px;
     height: 44px;
@@ -113,4 +114,11 @@ font-size: 13px;
     --background: #42b9fe;
     --color:#ffffff;
     margin:10px;
-  }
\ No newline at end of file
+  }
+}
+.buttons{
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  overflow: auto;
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
index 6d2b48927..a7bda9ddf 100644
--- a/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page.ts
@@ -7,7 +7,6 @@ import { Participant } from 'src/app/models/participant.model';
 import { Folder } from 'src/app/models/folder.model';
 import { AuthService } from 'src/app/services/auth.service';
 import { ProcessesService } from 'src/app/services/processes.service';
-import { StorageService } from 'src/app/services/storage.service';
 import { AddParticipantsCcModalPage } from '../add-participants-cc-modal/add-participants-cc-modal.page';
 import { AddParticipantsModalPage } from '../add-participants-modal/add-participants-modal.page';
 import { environment } from 'src/environments/environment';
@@ -40,14 +39,19 @@ export class ExpedientTaskModalPage implements OnInit {
   dispatchFolder: Folder;
   participants: Participant[];
 
+  contacts= [];
+  // trigger hide and show for attendee component
+  showAttendees= false;
+
+  adding: "intervenient" | "CC"
+
   constructor(
     private modalController: ModalController,
     private router:Router,
     private processes:ProcessesService,
     private attachmentsService: AttachmentsService,
     private navParams: NavParams,
-    private authService: AuthService,
-    ) {
+    private authService: AuthService) {
       this.user = environment.defaultuser +'@'+ environment.domain;
       this.task = this.navParams.get('task');
       this.taskType = this.navParams.get('taskAction');
@@ -69,22 +73,14 @@ export class ExpedientTaskModalPage implements OnInit {
       /* By Default TypeDeadline should be 'Economia' */
       this.postData.SubjectTypeId = '99999844';
       /* Initialize 'Subject' with the title of the expedient */
-      this.postData.DispatchFolder.Subject = this.task.workflowInstanceFolio;
-     }
+      this.postData.DispatchFolder.Subject = this.task.workflowInstanceDataFields.Subject;
+  }
 
   ngOnInit() {
     this.taskDate = new Date(this.task.taskStartDate);
-    /* this.authService.userData$.subscribe((res:any)=>{
-      console.log(res);
-    });
-    console.log(this.user); */ 
-    console.log(this.task)
-    
-    console.log(this.task.serialNumber);
-    this.getAttachments();
 
-    console.log(this.getSubjectType());
-  
+    this.getAttachments();
+    this.getSubjectType();
   }
 
   close(){
@@ -101,7 +97,7 @@ export class ExpedientTaskModalPage implements OnInit {
     });
   }
   saveTask(){
-    console.log(this.taskType);
+   /* console.log(this.taskType); */
     
     switch (this.taskType)
     {
@@ -155,63 +151,78 @@ export class ExpedientTaskModalPage implements OnInit {
   }
  
   async addParticipants(){
-    const modal = await this.modalController.create({
-      component: AddParticipantsModalPage,
-       componentProps: {
-        eventPersons: this.participants
-      },
-      cssClass: 'add-participants-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((res) => {
-      this.taskParticipants = res.data;
-      let newattendees: EventPerson[] = res['data'];
-      if(newattendees!= null){
-        newattendees.forEach(newattendee => {
-        let att = {
-          'UserId': newattendee.EmailAddress,
-          'UserType': 'I',
-        };
-        if(this.participants == null){
-          this.participants = new Array();
-        }
-        this.participants.push(att);
+
+    this.adding = "intervenient";
+    this.contacts =  this.taskParticipants;
+
+    if(window.innerWidth <=1024){
+      const modal = await this.modalController.create({
+        component: AddParticipantsModalPage,
+         componentProps: {
+          eventPersons: this.participants
+        },
+        cssClass: 'add-participants-modal',
+        backdropDismiss: false
       });
-      }
-      this.postData.UsersSelected = this.participants;
-      console.log(this.postData);
-    });
+      await modal.present();
+      modal.onDidDismiss().then((res) => {
+        this.taskParticipants = res.data;
+        let newattendees: EventPerson[] = res['data'];
+        if(newattendees!= null){
+          newattendees.forEach(newattendee => {
+          let att = {
+            'UserEmail': newattendee.EmailAddress,
+            'UserType': 'I',
+          };
+          if(this.participants == null){
+            this.participants = new Array();
+          }
+          this.participants.push(att);
+        });
+        }
+        this.postData.UsersSelected = this.participants;
+        console.log(this.postData);
+      });
+    } else {
+
+    }
   }
   
   async addParticipantsCc(){
-    const modal = await this.modalController.create({
-      component: AddParticipantsCcModalPage,
-       componentProps: {
-         eventPersons: this.participants
-      },
-      cssClass: 'add-participants-cc-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then((res) => {
-      this.taskParticipantsCc = res.data;
-      let newattendees: EventPerson[] = res['data'];
-      if(newattendees!= null){
-        newattendees.forEach(newattendee => {
-        let att = {
-          'UserId': newattendee.EmailAddress,
-          'UserType': 'CC',
-        };
-        if(this.participants == null){
-          this.participants = new Array();
-        }
-        this.participants.push(att);
+
+    this.adding = "CC";
+    this.contacts = this.taskParticipantsCc;
+
+    if(window.innerWidth <=1024){
+      const modal = await this.modalController.create({
+        component: AddParticipantsCcModalPage,
+         componentProps: {
+           eventPersons: this.participants
+        },
+        cssClass: 'add-participants-cc-modal',
+        backdropDismiss: false
       });
-      }
-      this.postData.UsersSelected = this.participants;
-      console.log(this.postData);
-    });
+      await modal.present();
+      modal.onDidDismiss().then((res) => {
+        this.taskParticipantsCc = res.data;
+        let newattendees: EventPerson[] = res['data'];
+        if(newattendees!= null){
+          newattendees.forEach(newattendee => {
+          let att = {
+            'UserEmail': newattendee.EmailAddress,
+            'UserType': 'CC',
+          };
+          if(this.participants == null){
+            this.participants = new Array();
+          }
+          this.participants.push(att);
+        });
+        }
+        this.postData.UsersSelected = this.participants;
+        console.log(this.postData);
+      });
+    }
+
   }
 
   async distartExpedientModal(){
@@ -220,6 +231,8 @@ export class ExpedientTaskModalPage implements OnInit {
       component: DiscartExpedientModalPage,
        componentProps: {
         serialNumber: this.task.serialNumber,
+        folderId: this.task.workflowInstanceDataFields.FolderID,
+        action: 'complete',
       },
       cssClass: 'discart-expedient-modal',
       backdropDismiss: false
@@ -229,4 +242,22 @@ export class ExpedientTaskModalPage implements OnInit {
     modal.onDidDismiss();
   }
 
+  async setContact(data:EventPerson[]){
+
+    if(this.adding == "intervenient"){
+      console.log('intervenient')
+      this.contacts = data;
+      this.taskParticipants = data;
+    } else if (this.adding == "CC") {
+      
+      console.log('CCCC')
+      this.taskParticipantsCc = data;
+    }
+    
+  }
+
+  async closeComponent(){
+    this.showAttendees = false;
+  }
+
 }
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
index 0cc58df91..a7d6b17b7 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
@@ -1,10 +1,10 @@
-<ion-header  class="ion-no-border">
+<!-- <ion-header hidden  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="title-content">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">Detalhes do Expediente</ion-label>
+          <ion-label class="title">{{ task.Folio}}</ion-label>
         </div>
         <div class="div-icon">
             <ion-menu-button autoHide="false">
@@ -14,19 +14,6 @@
       </div>
     </div>
   </ion-toolbar>
-</ion-header>
-<!-- <ion-header>
-  <ion-toolbar class="bg-blue">
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="/expediente"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Expediente</ion-title>
-    <ion-buttons slot="end">
-      <ion-menu-button autoHide="false">
-        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
-      </ion-menu-button>
-    </ion-buttons>
-  </ion-toolbar>
 </ion-header> -->
 
 <ion-menu autoHide="false" side="end" content-id="main-content">
@@ -68,172 +55,152 @@
   <ion-menu-button></ion-menu-button>
 </div>
 
-<ion-content  padding>
-  <div *ngIf="task">
-  <h3 class="h3-event-title">Detalhes do Expediente</h3>
-  <ion-item-group>
-    <ion-item>
-      <ion-label position="stacked">Assunto</ion-label>
-      <ion-input disabled="true">{{ task.Folio }}</ion-input>
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Remetentes</ion-label>
-      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
-    </ion-item>
-    <ion-item>
-      <ion-label position="stacked">Data</ion-label>
-      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
-    </ion-item>
-    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
-      <ion-icon name="attach" slot="start"></ion-icon>
-      Ver documento
-    </ion-button>
-  </ion-item-group>
-    <div *ngIf="eventsList">
-      <h3 class="h3-event-title">Eventos Associados</h3>
-    <!-- <ion-list>
-        <ion-item-sliding>
-          <ion-item lines="none" 
-          *ngFor="let event of eventsList"
-          [routerLink]="['/home/gabinete-digital/expediente/events/', event.EventId, 'gabinete-digital/expediente/' + serialnumber]">
-            <div class="div-item-{{event.CalendarName}}">
-              <div class="div-up">
-                <div class="div-icon">
-                  <ion-icon slot="start" name="reader"></ion-icon>
-                </div>
-                <div class="div-content-{{event.CalendarName}}">
-                  <h3 class="capitalizeText">{{event.Subject}}</h3>
-                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
-                </div>
-              </div>
-              <div class="div-botton">
-                <div class="div-botton-left">
-                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
-                </div>
-                <div class="div-botton-middle">
-                  <p class="item-list-small capitalizeText">{{event.Location}}</p>
-                </div>
-                <div *ngIf="event.HasAttachments" class="div-botton-right">
-                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
-                </div>
-              </div>
-            </div>
-          </ion-item>
-        </ion-item-sliding>
-    </ion-list> -->
-
-    <ion-list>
-      <div *ngIf="eventsList">
-        <ion-item-sliding>
-          <ion-item 
-            class="Rectangle" lines="none" 
-            *ngFor="let event of eventsList"
-            (click)="viewEventDetail(event.EventId)"
-          >
-              <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
-              <div class="content-{{profile}}-{{event.CalendarName}}">
-                <div class="approve-event-time">
-                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
-                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
-                </div>
-                <div class="approve-event-detail">
-                  <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
-                  <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
-                  <h3>{{event.Subject}}</h3>
-                </div>
-              </div>
-            </ion-item>
-        </ion-item-sliding>
+<ion-content>
+  <div class="main-content d-flex">
+    <div class="content d-flex flex-column" *ngIf="task">
+      <div class="main-header">
+        <div class="title-content">
+          <app-btn-modal-dismiss></app-btn-modal-dismiss>
+          <div class="middle">
+            <ion-label class="title">{{ task.Folio}}</ion-label>
+          </div>
+          <div class="div-icon">
+              <ion-menu-button autoHide="false">
+                <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+              </ion-menu-button>
+          </div>
+        </div>
+      </div>
+      <div class="upper-content">
+        <div class="content-details">
+          <ion-label>
+            <p><span class="date">Sexta, 14 de Abril</span><span class="label">Expediente</span></p>
+            <p><span class="color-red">Muitíssimo urgente</span></p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="middle-content">
+        <h5 *ngIf="intervenientes">Intervenientes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <div *ngFor="let interveniente of intervenientes">
+              <p>{{interveniente.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <h5 *ngIf="cc">Com conhecimento</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <div *ngFor="let c of cc">
+              <p>{{c.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+            <p [innerHTML]="task.Note"></p>
+        </ion-item>
+      </div>
+      <div class="bottom-content width-100">
+        <ion-list>
+          <h5>Documentos Anexados</h5>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label
+          (click)="viewDocument()">
+            <p class="attach-title-item">{{ task.Folio }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
+            <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd/MM/yy' }}</span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
       </div>
-    </ion-list>
 
+      <div *ngIf="eventsList">
+        <h3 class="h3-event-title">Eventos Associados</h3>
+        <ion-list>
+          <div *ngIf="eventsList">
+            <ion-item-sliding>
+              <ion-item 
+                class="Rectangle" lines="none" 
+                *ngFor="let event of eventsList"
+                (click)="viewEventDetail(event.EventId)"
+              >
+                  <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
+                  <div class="content-{{profile}}-{{event.CalendarName}}">
+                    <div class="approve-event-time">
+                      <p>{{event.StartDate | date: 'hh:mm'}}</p>
+                      <p>{{event.EndDate | date: 'hh:mm'}}</p>
+                    </div>
+                    <div class="approve-event-detail">
+                      <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
+                      <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
+                      <h3>{{event.Subject}}</h3>
+                    </div>
+                  </div>
+                </ion-item>
+            </ion-item-sliding>
+          </div>
+        </ion-list>
+      </div>
 
-  </div>
-  <!-- <div *ngIf="!eventsList"> 
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
+    </div>
+    <div class="aside-right flex-column height-100">
+      <div class="buttons">
+        <button (click)="openExpedientActionsModal('0',fulltask)" class="btn-ok" shape="round" >Efectuar Despacho</button>
+        <button (click)="distartExpedientModal(fulltask)" class="btn-cancel" shape="round" >Descartar</button>
+        <div class="solid"></div>
+        <button (click)="openExpedientActionsModal('1',fulltask)" class="btn-cancel" shape="round" >Solicitar Parecer</button>
+        <button (click)="openExpedientActionsModal('2',fulltask)" class="btn-cancel" shape="round" >Pedido de Deferimento</button>
+        <button (click)="openBookMeetingModal(task)" class="btn-cancel" shape="round" >Marcar Reunião</button>
+        <button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
+        <div class="solid"></div>
+        <button class="btn-cancel" shape="round" >Executar</button>
+        <button class="btn-cancel" shape="round" >Delegar</button>
+        <button class="btn-cancel" shape="round" >Arquivar</button>
+      </div>
+    </div>
+
+    <div *ngIf="!task">
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </ion-label>
+        </ion-list-header>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+          </ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-label>
+            <h3>
+              <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+            </h3>
+            <p>
+              <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+            </p>
+          </ion-label>
+        </ion-item>
+        <ion-button color="medium" shape="round" expand="block">
+          <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
           <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-thumbnail slot="start">
-          <ion-skeleton-text animated></ion-skeleton-text>
-        </ion-thumbnail>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-          <p>
-            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-     
-    </ion-list>
-  </div> -->
-
-  
-</div>
-  <div *ngIf="!task">
-    <ion-list>
-      <ion-list-header>
-        <ion-label>
-          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-        </ion-label>
-      </ion-list-header>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
-        </ion-label>
-      </ion-item>
-      <ion-item>
-        <ion-label>
-          <h3>
-            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-          </h3>
-          <p>
-            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
-          </p>
-        </ion-label>
-      </ion-item>
-      <ion-button color="medium" shape="round" expand="block">
-        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
-        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
-      </ion-button>
-    </ion-list>
+        </ion-button>
+      </ion-list>
+    </div>
   </div>
 </ion-content>
 
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
index b906a9f52..860c052db 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
@@ -1,72 +1,77 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
-
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
-        
-        .header-top{
-          width: 360px;
-          margin: 0px auto;
-          overflow: auto;
-          padding: 0 !important;
-          background: #fff;
-           .middle{
-            padding: 0!important;
-            float: left;
-            width: 280px;
-            margin: 2.5px 0 0 5px;
-            display: flex;
-            align-items: center;
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+}
+.color-red{
+  font-weight: 500;
+  color:#d30a0a !important;
+}
+.btn-size{
+  font-size: 18px !important;
+}
+.main-header{
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:auto;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+    .header-top{
+      width: 360px;
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+      .middle{
+        padding: 0!important;
+        float: left;
+        width: 280px;
+        margin: 2.5px 0 0 5px;
+        display: flex;
+        align-items: center;
             
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: 25px;
-            color: #0782c9;
-            margin: 5px 0 0 0;
-          }
         }
-        .header-bottom{
-          width: 310px;
-          overflow: auto;
-          margin: 0 auto;
+        .right{
+          padding: 0!important;
+          float: right;
+          font-size: 25px;
+          color: #0782c9;
+          margin: 5px 0 0 0;
+        }
+      }
+      .header-bottom{
+         width: 310px;
+        overflow: auto;
+        margin: 0 auto;
 
-          .header-bottom-icon{
-            width: 30px;
-            font-size: 25px;
-            float: left;
-            padding: 2px;
-
-          }
-          .header-bottom-contacts{
-            width: 275px;
-            font-size: 15px;
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
+        .header-bottom-icon{
+          width: 30px;
+          font-size: 25px;
+          float: left;
+          padding: 2px;
+        }
+        .header-bottom-contacts{
+          width: 275px;
+          font-size: 15px;
+          color: #797979;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          float: left;
             padding: 5px;
-            margin: 1px;
-          }
+          margin: 1px;
         }
+      }
     
         .title{
           font-size: 25px;
           overflow: auto;
           float: left;
+          padding-top: 4px;
+          padding-left: 5px;
         }
         .div-icon{
           width: 40px;
@@ -75,8 +80,7 @@
           overflow: auto;
           padding: 1px;
         }
-    }
- }
+}
 ion-item-group{
     margin: 15px;
 }
@@ -85,141 +89,148 @@ ion-button{
     width: 80%;
     margin: 20px auto;
 }
-.h3-event-title{
-    padding: 15px 0 0px 25px;
-    font-weight: bold;
+
+
+.upper-content{
+  font-family: Roboto;
+  margin-left: 41px;
+  overflow: auto;
+  font-size: 18px;
+
+  .label{
+      border-radius: 20px;
+      background: #ffb703;
+      float: right;
+      padding: 5px 13.5px 5px 13.5px;
+      color: #fff;
+  }
+
+  .button-calendar-type ion-button{
+    height: 25px;
+  }
+  .content-details{
+    font-size: 17px;
+    .date{
+      color: #797979;
+    }
+  }
+}
+.middle-conten{
+ .middle-content p{
+    font-size: 16px;
+  }
+}
+.bottom-content{
+  //width: 360px;
+  margin: 0 auto;
+  
+  .bottom-content h3{
+    font-size: 16px;
+    margin: 0 0 0 10px;
+  }
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 5px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attach-title-item{
+    font-size: 18px;
+    width: 100%;
+    color:#0d89d1;
+    padding-bottom: 5px;
+  }
+  /* SPAN */
+  .span-left{
+    float: left;
+    font-size: 15x;
+  }
+  .span-right{
+  text-align: right;
+  float: right;
+  font-size: 13px;
+  }
+}
+.aside-right{
+  padding: 30px 20px 0 20px !important;
+
+  .arrow-right{
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+   
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+  }
+  .buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .btn-ok, .btn-cancel, .btn-delete{
+      height: auto !important;
+      font-size: 16px !important;
+      font-weight: 600 !important;
+      width: 100% !important;
+      margin-bottom: 10px !important;
+      padding: 15px !important;
+    }
+  }
+  .solid {
+    display: block;
+    width: 90%;
+    border-top: 1px solid #ebebeb;
+    margin: 0 auto !important;
+    margin-bottom: 10px !important;
+  }
 }
 
-//DIV
-.div-item-Oficial{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cab0dc; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+@media only screen and (max-width: 800px) {
+  .content{
+    width: 100% !important;
   }
-  .div-item-Pessoal{
-    width: 100%;
-    overflow: auto;
-    border-bottom: 1px solid #ccc;
-    margin: 10px 0 5px 0;
-    /* background: #cbeecb; */
-    /* border-radius: 20px; */
-    /* padding: 10px; */
-    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
-  }
-  .div-up{
-    width: 100%;
-    overflow: auto;
-  }
-  .div-up h3{
-    margin: 0;
-    padding: 0;
-    font-size: 17px;
-    width: 100%;
+  .aside-right{
+    display: none;
   }
+}
+@media only screen and (min-width: 801px) {
   .div-icon{
-    width: 10%;
-    font-size: 22px;
-    float: left;
-    color: #808080;
+    display: none;
   }
-  .div-icon ion-icon{
-    display: block;
-    margin: 0 auto;
-  
+  .content{
+    width: 65%;
+    border-right: 1px solid #d8d8d8;
   }
-  .div-content-Oficial{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cab0dc;
-    padding: 0 0 0 12px;
+
+  .aside-right{
+    width: 35%;
   }
-  .div-content-Pessoal{
-    width: 85%;
-    float: left;
-    border-left: 4px solid #cbeecb;
-    padding: 0 0 0 12px;
+}
+
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
   }
-  .div-content-Oficial h3, .div-content-Pessoal h3{
-    font-size: 14pt;
-    /* border: 1px solid red; */
+  .aside-right{
+    width: 30%;
   }
-  .div-content-Oficial p, .div-content-Pessoal p{
-    font-size: 12pt;
-    color: rgb(94, 92, 92);
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-  .div-botton{
-    width: 100%;
-    overflow: auto;
-    margin: 10px 0 5px 0;
-  }
-  .div-botton-left{
-    width: 10%;
-    float: left;
-  }
-  .ion-icon-location{
-    text-align: center;
-    display: block;
-    color: #000;
-    font-size: 16px;
-    margin: 0 auto;
-  }
-  .div-botton-middle{
+}
+
+@media only screen and (min-width: 1140px){
+  .content{
     width: 75%;
-    float: left;
-    margin-top: 0.5px;
   }
-  .div-botton-middle p{
-    padding: 0;
-    margin: 0;
+  .aside-right{
+    width: 25%;
   }
-  .div-botton-right{
-    width: 10%;
-    float: left;
-    margin: 0;
-    padding: 0;
-  }
-  .ion-icon-attach{
-    color: #666666;
-    font-size: 20px;
-  }
-/* TOGGLE BUTTON */
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 90px;
-    height: 34px;
-    float: right;
-    margin:20px 20px 0 0;
-  }
-  .div-top-header{
-    width: 400px;
-    margin: 6px auto;
-    background-color: #0782c9;
-    overflow: auto;
-  }
-  .div-search{
-    font-size: 45px;
-    float: left;
-    margin: 0 0 0 10px
-  }
-  .div-logo{
-    background: transparent;
-    width: 150px;
-    margin: 2.5px 0 2.5px 71px;
-    float: left;
-  }
-  .div-logo img{
-    width: 100%;
-  }
-  .div-profile{
-    font-size: 45px;
-    float: right;
-    margin-right: 10px;
-  }
\ No newline at end of file
+}
diff --git a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
index 0fbbb6da2..41995b9e0 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts
@@ -13,6 +13,7 @@ import { ExpedientTaskModalPage } from '../expedient-task-modal/expedient-task-m
 import { BookMeetingModalPage } from '../book-meeting-modal/book-meeting-modal.page';
 import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
 import { momentG }  from 'src/plugin/momentG'
+import { DiscartExpedientModalPage } from '../../discart-expedient-modal/discart-expedient-modal.page';
 
 @Component({
   selector: 'app-expediente-detail',
@@ -26,6 +27,8 @@ export class ExpedienteDetailPage implements OnInit {
   eventsList: Event[];
   serialnumber: string;
   profile: string;
+  intervenientes: any;
+  cc: any;
 
   constructor(private activateRoute: ActivatedRoute,
     private processes: ProcessesService,
@@ -62,14 +65,28 @@ export class ExpedienteDetailPage implements OnInit {
     this.processes.GetTask(serial).subscribe(res => {
       this.task = {
         "SerialNumber": res.serialNumber,
-        "Folio": res.workflowInstanceFolio,
+        "Folio": res.workflowInstanceDataFields.Subject,
         "Senders": res.originator.email,
         "CreateDate": momentG(new Date(res.taskStartDate),'yyyy-MM-dd HH:mm:ss'),
         "DocumentURL": res.workflowInstanceDataFields.ViewerRequest,
         "Remetente": res.workflowInstanceDataFields.Sender,
+        "Note": res.workflowInstanceDataFields.Note,
+        "FolderId": res.workflowInstanceDataFields.FolderID,
+        "FsId": res.workflowInstanceDataFields.FsId,
+        "DocId": res.workflowInstanceDataFields.DocId,
       }
       this.fulltask = res;
       console.log(res);
+      this.processes.GetTaskParticipants(this.task.FolderId).subscribe(users=>{
+        this.intervenientes = users.filter(user=>{
+          return user.Type == 'I';
+        });
+        this.cc = users.filter(user=>{
+          return user.Type == 'CC';
+        });
+        console.log(users);
+        
+      })
 
     });
   }
@@ -92,9 +109,13 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   viewDocument(){
-    const url: string = this.task.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
-    const browser = this.iab.create(url,"_parent");
-    browser.show();
+    this.processes.GetDocumentUrl(this.task.DocId, this.task.FsId).subscribe(res=>{
+      console.log(res);
+      const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+      const browser = this.iab.create(url,"_blank");
+      browser.show();
+      
+    });
   }
 
   openMenu() {
@@ -102,33 +123,60 @@ export class ExpedienteDetailPage implements OnInit {
   }
 
   async openExpedientActionsModal(taskAction: any, task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: ExpedientTaskModalPage,
       componentProps: {
         taskAction: taskAction,
         task: task,
       },
-      cssClass: 'expedient-task-modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss();
   }
 
   discartExpedient() {
-    let body = { "serialNumber": this.serialnumber, "action": "Task Completed" }
+    /* let body = { "serialNumber": this.serialnumber, "action": "Passivo" }
     console.log(body);
     this.processes.PostTaskAction(body);
-    this.router.navigate(['/home/gabinete-digital/expediente']);
+    this.router.navigate(['/home/gabinete-digital/expediente']); */
+  }
+
+  async distartExpedientModal(task: any){
+    const modal = await this.modalController.create({
+      component: DiscartExpedientModalPage,
+       componentProps: {
+        serialNumber: task.serialNumber,
+        folderId: task.workflowInstanceDataFields.FolderID,
+        action: 'discart',
+      },
+      cssClass: 'discart-expedient-modal',
+      backdropDismiss: false
+    });
+    
+    await modal.present();
+    modal.onDidDismiss();
   }
 
   async openBookMeetingModal(task: any) {
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'book-meeting-modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     const modal = await this.modalController.create({
       component: BookMeetingModalPage,
       componentProps: {
         task: task,
       },
-      cssClass: 'book-meeting-modal',
+      cssClass: classs,
       backdropDismiss: false
     });
     await modal.present();
@@ -144,7 +192,7 @@ export class ExpedienteDetailPage implements OnInit {
         eventId: eventId,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: 'modal modal-desktop',
       backdropDismiss: false
     });
     await modal.present();
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.html b/src/app/pages/gabinete-digital/expediente/expediente.page.html
index 91feec0b9..cf321bb06 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.html
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.html
@@ -1,14 +1,8 @@
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
-        <div class="middle">
-          <ion-label class="title">Gabinete Digital</ion-label>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
+<ion-header class="ion-no-border">
+  <app-btn-modal-dismiss></app-btn-modal-dismiss>
+  <div class="title">
+    <ion-label >Correspondência</ion-label>
+  </div>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="expediente">
@@ -20,7 +14,6 @@
     </ion-segment>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
   <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-refresher-content
@@ -31,29 +24,15 @@
       </ion-refresher-content>
     </ion-refresher>
   
-  <div [ngSwitch]="segment" *ngIf="taskslist">
+  <div class="width-100" [ngSwitch]="segment" *ngIf="taskslist">
     <ion-list *ngSwitchCase="'expediente'">
-      <ion-item-group>
-        <ion-item-sliding>
-          <!-- <ion-item lines="none" *ngFor = "let task of taskslist" >
-            <div class="div-content-expediente">
-              <ion-item lines="none"  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]">
-                <ion-icon slot="end" name="calendar"></ion-icon>
-                 <h3>{{ task.Folio }}</h3>
-              </ion-item>
-              <p><span class="span-left">{{task.Remetente}}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-              <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
-            </div>
-          </ion-item> -->
-
-          <ion-item 
-          class="expediente" 
-          lines="none"  
+      <ion-item 
+          class="expediente ion-no-padding"  
           *ngFor = "let task of taskslist"
           (click)="viewExpedientDetail(task.SerialNumber)"
           >
           <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
-            <div class="Rectangle">
+            <div class="item width-100">
               <div class="exp-top-detail">
                 <div class="exp-date">
                   <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
@@ -71,10 +50,6 @@
               </div>
             </div>
           </ion-item>
-
-
-        </ion-item-sliding>
-      </ion-item-group>
     </ion-list>
     <ion-list *ngSwitchCase="'pendentes'">
       <ion-item-group>
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.scss b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
index 467df29ea..653bf936c 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.scss
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.scss
@@ -1,83 +1,15 @@
 @import '~src/function.scss';
-.header-toolbar{
-    --background:transparent;
-    --opacity: 1;
-
-    .main-header{
-        width: 100%; /* 400px */
-        height: 100%;
-        font-family: Roboto;
-        border-top-left-radius: 25px;
-        border-top-right-radius: 25px;
-        background-color: #fff;
-        overflow:hidden;
-        padding: 30px 20px 0px 20px;
-        color:#000;
-        transform: translate3d(0, 1px, 0);
-        
-        .header-top{
-          width: 360px;
-          margin: 0px auto;
-          overflow: auto;
-          padding: 0 !important;
-          background: #fff;
-           .middle{
-            padding: 0!important;
-            float: left;
-            width: 280px;
-            margin: 2.5px 0 0 5px;
-            display: flex;
-            align-items: center;
-            
-          }
-          .right{
-            padding: 0!important;
-            float: right;
-            font-size: 25px;
-            color: #0782c9;
-            margin: 5px 0 0 0;
-          }
-        }
-        .header-bottom{
-          width: 310px;
-          overflow: auto;
-          margin: 0 auto;
-
-          .header-bottom-icon{
-            width: 30px;
-            font-size: 25px;
-            float: left;
-            padding: 2px;
-
-          }
-          .header-bottom-contacts{
-            width: 275px;
-            font-size: 15px;
-            color: #797979;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            float: left;
-            padding: 5px;
-            margin: 1px;
-          }
-        }
-    
-        .title{
-          font-size: 25px;
-          overflow: auto;
-          float: left;
-        }
-        .div-icon{
-          width: 40px;
-          float: right;
-          font-size: 35px;
-          overflow: auto;
-          padding: 1px;
-        }
-    }
- }
 /* CONTENT */
+:host{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+}
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+  }
 .item-list-small{
     font-size: 11px;
     overflow: auto;
@@ -95,6 +27,16 @@
 ion-item{
   --background: none;
 }
+.item {
+    //border-radius: 15px;
+    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    //Sborder: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    //padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
 .div-content-expediente{
   width: 100%;
   float: left;
@@ -152,7 +94,7 @@ ion-item{
   padding-top: 10px;
 }
 .exp-list-item{
-  width: 368px;
+  //width: 368px;
   overflow: auto;
   /* border-bottom: 1px solid gray; */
   margin: 10px auto;
@@ -174,7 +116,7 @@ ion-item{
   float: left;
 }
 .exp-remetente{
-  width: 200px;
+  //width: 200px;
   font-family: Roboto;
   font-size: 13px;
   font-weight: normal;
@@ -193,7 +135,6 @@ ion-item{
   color: #42b9fe;
 }
 .exp-bottom-detail{
-  width: 100px;
   float: left;
   font-family: Roboto;
   font-size: 16px;
@@ -224,5 +165,4 @@ ion-item{
   font-size: 45px;
   float: right;
   margin-right: 10px;
-}
-
+}
\ No newline at end of file
diff --git a/src/app/pages/gabinete-digital/expediente/expediente.page.ts b/src/app/pages/gabinete-digital/expediente/expediente.page.ts
index 2ea7f6a3f..f6e8608f5 100644
--- a/src/app/pages/gabinete-digital/expediente/expediente.page.ts
+++ b/src/app/pages/gabinete-digital/expediente/expediente.page.ts
@@ -38,14 +38,13 @@ export class ExpedientePage implements OnInit {
     this.LoadList();
   }
 
-  LoadList()
-  {
+  LoadList(){
     this.processes.GetTasksList("Expediente", false).subscribe(result => {
       this.taskslist = new Array();
       result.forEach(element => {
         let task: DailyWorkTask = {
           "SerialNumber": element.serialNumber,
-          "Folio": element.workflowInstanceFolio,
+          "Folio": element.workflowInstanceDataFields.Subject,
           "Senders": element.originator.email,
           "CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
           "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
@@ -66,14 +65,21 @@ export class ExpedientePage implements OnInit {
 
   async viewExpedientDetail(serialNumber:any) {
     console.log(this.profile);
-    
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal modal-desktop'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
     const modal = await this.modalController.create({
       component: ExpedienteDetailPage,
       componentProps:{
         serialNumber: serialNumber,
         profile: this.profile,
       },
-      cssClass: 'modal',
+      cssClass: classs,
       backdropDismiss: false
     });
     await modal.present();
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.module.ts b/src/app/pages/gabinete-digital/gabinete-digital.module.ts
index 0a466bead..6eca51583 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.module.ts
+++ b/src/app/pages/gabinete-digital/gabinete-digital.module.ts
@@ -8,6 +8,13 @@ import { GabineteDigitalPageRoutingModule } from './gabinete-digital-routing.mod
 
 import { GabineteDigitalPage } from './gabinete-digital.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+
+import { EventListComponent } from 'src/app/shared/agenda/event-list/event-list.component';
+import { EmptyContainerPage } from 'src/app/shared/empty-container/empty-container.page';
+import { EventsToApprovePage } from 'src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page';
+import { ExpedientePage } from 'src/app/shared/gabinete-digital/expediente/expediente.page';
+import { ExpedientsPage } from 'src/app/shared/gabinete-digital/expedients/expedients.page';
+
 /* import { ComponentsModule } from 'src/app/components/components.module'; */
 
 @NgModule({
@@ -18,7 +25,20 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     GabineteDigitalPageRoutingModule
   ],
-  declarations: [GabineteDigitalPage],
+  declarations: [
+    GabineteDigitalPage,
+    EventListComponent,
+    EmptyContainerPage,
+    EventsToApprovePage,
+    ExpedientePage,
+    ExpedientsPage,
+  ],
+  entryComponents: [
+    EmptyContainerPage,
+    EventsToApprovePage,
+    ExpedientePage,
+    ExpedientsPage,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GabineteDigitalPageModule {}
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index d4d8b8d8a..d29307cc4 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -1,121 +1,78 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <app-header></app-header>
 </ion-header>
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="bg-blue">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="div-title">
-          <ion-label class="title">Gabinete Digital</ion-label>
-        </div>
-        <div hidden class="div-icon">
-          <ion-icon slot="end" src='assets/images/icons-add.svg'></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
-<!-- <ion-header class="ion-no-border">
-  <ion-toolbar class="ion-no-border" class="bg-blue">
-    <div class="div-top-header">
-    <div class="div-search">
-      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
-    </div>
-    <div class="div-logo">
-      <img src='assets/images/logo-no-bg.png' alt='logo'>
-    </div>
-    <div class="div-profile">
-      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
-    </div>
-  </div>
-</ion-toolbar>
-</ion-header> -->
 
-<ion-content>
+<ion-content class="height-100">
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="main-content">
-    <div class="exp-card" (click)="openEventsToApproveList('MDGPR')">
-      <div class="exp-card-icon">
-        <ion-icon src="assets/images/icons-agenda.svg"></ion-icon>
+  <div class="main-content d-flex height-100">
+
+      <!-- Aside left -->
+      <div class="aside-wrapper d-flex flex-column pt-25 justify-center width-md-40 ">
+        <p class="text-center mt-0 aside-title px-20">Gabinete Digital</p>
+        <div class="aside overflow-y-auto d-flex d-md-block  flex-wrap justify-center width-100 px-20">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApprovePage('MDGPR')">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Eventos para Aprovação</p>
+            <p class="text-center exp-card-content">{{count_ev_md+count_ev_pr}} <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="openExpedientListPage()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Correspondencia</p>
+            <p class="text-center exp-card-content">{{count_exp_dailywork}} <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-pendente.svg"></ion-icon>
+            </div>
+      
+            <p class="text-center exp-card-title ">Pendentes</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-parecer.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Pedidos de Parecer</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Pedidos de Deferimento</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-despacho.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Despachos</p>
+            <p class="text-center exp-card-content"> <span class="number">-</span> <span class="title1">Documentos</span></p>
+          </div>
+          <div class="exp-card d-flex flex-column justify-center" (click)="notImplemented()">
+            <div class="d-flex justify-center">
+              <ion-icon  src="assets/images/icons-expediente-diploma.svg"></ion-icon>
+            </div>
+            <p class="text-center exp-card-title ">Diplomas por Validar</p>
+            <p class="text-center exp-card-content"><span class="number">-</span> <span class="title1">Documentos</span> </p>
+          </div>
+        </div>
       </div>
-      <div class="exp-card-title">
-        <p>Eventos para Aprovação</p>
+
+      <!-- Aside right -->
+      <div class="aside-content d-none flex-column height-100">
+        <app-empty-container [texto]="emptyTextDescription" *ngIf="showEmptyContainer" class="d-flex height-100 flex-column"></app-empty-container>
+        <app-events-to-approve [profile]="'MDGPR'" *ngIf="showEventsToApprove" class="d-flex height-100 flex-column"></app-events-to-approve>
+        <app-expedients (openExpedientDetail)="openExpedientPage($event)" [profile]="profile" class="d-flex height-100 flex-column" *ngIf="showExpedients"></app-expedients>
+        <app-expediente (openExpedientList)="openExpedientListPage()" [profile]="profile" [serialNumber]="serialNumber" class="d-flex height-100 flex-column" *ngIf="showExpedientDetail"></app-expediente>
       </div>
-      <div class="exp-card-content">
-        <p>{{count_ev_md+count_ev_pr}} Documentos</p>
-      </div>
-    </div>
-  <div class="exp-card"
-  (click)="openExpedientList()"
-  >
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-correspondencia.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p>Correspondencia</p>
-    </div>
-    <div class="exp-card-content">
-      <p>{{count_exp_dailywork}} Documentos</p>
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-expediente-pendente.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p>Pendentes</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-expediente-parecer.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p >Pedidos de Parecer</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-expediente-deferimento.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p >Pedidos de Deferimento</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-expediente-despacho.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p>Despachos</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </div>
-  </div>
-  <div class="exp-card" (click)="notImplemented()">
-    <div class="exp-card-icon">
-      <ion-icon src="assets/images/icons-expediente-diploma.svg"></ion-icon>
-    </div>
-    <div class="exp-card-title">
-      <p >Diplomas por Validar</p>
-    </div>
-    <div class="exp-card-content">
-      <p>- Documentos</p>
-    </div>
-  </div>
   </div>
 </ion-content>
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index 5273c3948..16aecaf24 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -65,44 +65,6 @@ ion-content{
   }
 }
 
-.main-header{
-  width: 100%; /* 400px */
-  height: 100%;
-  font-family: Roboto;
-  border-top-left-radius: 25px;
-  border-top-right-radius: 25px;
-  background-color: #ecf8ff;
-  overflow:hidden;
-  padding: 30px 20px 0px 20px;
-  color:#000;
-  transform: translate3d(0, 1px, 0);
-  
-  .title-content{
-    width: 360px;
-    margin: 0px auto;
-    overflow: hidden;
-    padding: 0 !important;
-    background: #ecf8ff;
-  }
-  .div-title{
-    padding: 0!important;
-    float: left;
-  }
-  .title{
-    font-size: 25px;
-  }
-  .div-icon{
-    width: 40px;
-    float: right;
-    font-size: 35px;
-    overflow: auto;
-    padding: 1px;
-  }
-  .div-icon ion-icon{
-    float: right;
-    padding-left: 20px;
-  }
-}
 
 /* NEW CSS */
 .main-content{
@@ -110,12 +72,16 @@ ion-content{
   height: 100%;
   font-family: Roboto;
   margin: 0 auto;
-  background:#ecf8ff;;
+  background:#ecf8ff;
   overflow:auto;
-  padding: 25px 15px 15px 15px;
+
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  .aside{
+
+  }
 }
 .title-content{
-  width: 360px;
   height: auto;
   margin: 0 auto;
   overflow: hidden;
@@ -130,7 +96,6 @@ ion-content{
   font-size: 25px;
 }
 .div-icon{
-  width: 40px;
   float: right;
   font-size: 35px;
   overflow: auto;
@@ -142,17 +107,16 @@ ion-content{
   padding: 30px 5px 30px 5px;
   border-radius: 15px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
-  border: solid 1px #e9e9e9;
+  //border: solid 1px #e9e9e9;
   /* --background-color: #ffffff !important; */
   background-color: #ffffff !important;
   float: left;
 }
 .exp-card-icon{
-  width: 55px;
   margin: 0 auto;
 }
 .exp-card ion-icon{
-  font-size: 54px;
+  font-size: 48px;
 }
 .exp-card-title{
   font-size: 15px;
@@ -181,14 +145,76 @@ ion-content{
   letter-spacing: normal;
   text-align: center;
 }
-.header-title{
-  width: 300px;
-  font-family: Roboto;
-  font-size: 25px;
-  margin: 0 5px 0 25px;
-  padding: 0;
-  color:#ffffff;
-  float: left;
+
+
+
+
+@media only screen and (min-width: 801px) {
+
+  .main-content{
+    .aside-wrapper{
+      width: 35%;
+      justify-content: flex-start !important;
+      border-right: 1px solid #d8d8d8;
+      .aside-title{
+        font-family: Roboto;
+        font-size: 25px;
+        text-align: left;
+      }
+    }
+    .aside-content{
+      width: 65%;
+      display: flex !important;
+      background-color: white;
+    }
+  }
+
+  .exp-card{
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    margin-bottom: 15px;
+    flex-direction: row !important;
+    width: 100%;
+    padding: 10px 17px 10px 17px;
+    height: unset !important;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+
+    .exp-card-title{
+      flex: 1;
+      text-align: left;
+      margin-top: 0px !important;
+    }
+    .exp-card-content{
+      margin: 0 !important;
+    }
+    .exp-card-content .title1{
+      display: none;
+      margin-top: 0px !important;
+    }
+    .exp-card-content .number{
+      //display: none;
+      margin-top: 0px !important;
+    }
+  } 
+}
+@media only screen and (min-width: 1024px){
+  .content{
+    width: 70%;
+  }
+  .aside-right{
+    width: 30%;
+  }
+}
+@media only screen and (min-width: 1140px) {
+  .div-icon{
+    display: none;
+  }
+  .content{
+    width: 75%;
+    border-right: 1px solid #d8d8d8;
+  }
+  .aside-right{
+    width: 25%;
+  }
 }
-
-
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.ts b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
index ea64b937a..61dd1cfc3 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.ts
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.ts
@@ -5,6 +5,7 @@ import { EventsService } from 'src/app/services/events.service';
 import { ModalController } from '@ionic/angular';
 import { EventListPage } from './event-list/event-list.page';
 import { ExpedientePage } from './expediente/expediente.page';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-gabinete-digital',
@@ -17,14 +18,6 @@ export class GabineteDigitalPage implements OnInit {
   showLoader: boolean;
   public profile:string;
 
-  constructor(
-    private processesbackend:ProcessesService,
-    private modalController: ModalController,
-    private eventService: EventsService,
-    private alertService: AlertService) { 
-      
-    }
-
   count_exp_dailywork=0;  
   count_exp_pp : string;
   count_exp_pd : string;
@@ -34,9 +27,72 @@ export class GabineteDigitalPage implements OnInit {
   count_ev_pr=0;
   count_ev_md=0;
 
+
+  desktopComponent: any = {
+    showEventList: false,
+    showExpediente : false
+  }
+  showEventsToApprove = false;
+  showEmptyContainer = true;
+  showExpedients = false;
+  showExpedientDetail = false;
+  emptyTextDescription = 'Sem opção selecionada';
+
+  serialNumber:string;
+
+  constructor(
+    private processesbackend:ProcessesService,
+    private modalController: ModalController,
+    private alertService: AlertService,
+    private route: ActivatedRoute,
+    ) { 
+
+      window.onresize = (event) => {
+        // if not mobile remove all component
+        if( window.innerWidth <= 1024){
+          this.modalController.dismiss();
+        }
+        this.adjastModalHeight();
+      };
+
+      this.adjastModalHeight();
+
+      this.route.queryParams.subscribe(params => {
+        if(params["show"]){
+          this.openExpedientListPage();
+        } 
+      });
+      
+    }
+
+    adjastModalHeight(){
+      setTimeout(() => {
+        if( window.innerWidth <= 1366){
+
+          document.querySelectorAll('.gabinete-digital-mobile-modal-to-Desktop').forEach(e=>{
+            console.log('adjast width')
+            e.setAttribute('style',`height:${window.innerHeight - (74 + 57)}px`)
+          })
+        } else  if( window.innerWidth >= 1366){
+          document.querySelectorAll('.gabinete-digital-mobile-modal-to-Desktop').forEach(e=>{
+            console.log('adjast width')
+            e.setAttribute('style',`height:${window.innerHeight - (74)}px`)
+          })
+        }
+      }, 200);
+
+
+    }
+
+  closeAllDesktopComponent(){
+    this.desktopComponent = {
+      showEventList: false,
+      showExpediente: false
+    }
+  }  
   ngOnInit() {
     //Initialize profile as mdgpr
-    this.profile = "mdgpr";
+    this.profile = "MDGPR";
     this.LoadCounts();
     /* this.eventService.getAllMdEvents.subscribe(res=>{
       console.log(res);
@@ -48,6 +104,15 @@ this.processesbackend.GetActionsList().subscribe(res=>{
   console.log(res);
   
 });
+
+  }
+
+  closeAllDesktopComponents(){
+    this.showEmptyContainer = false;
+    this.showEventsToApprove = false;
+    this.showExpedients = false;
+    this.showExpedients = false;
+    this.showExpedientDetail = false;
   }
 
   LoadCounts() {
@@ -82,31 +147,93 @@ this.processesbackend.GetActionsList().subscribe(res=>{
   notImplemented(){
     this.alertService.presentAlert('Funcionalidade em desenvolvimento');
   }
-  
-  async openEventsToApproveList(segment:any){
-    const modal = await this.modalController.create({
-      component: EventListPage,
-      componentProps:{
-        segment: segment,
-      },
-      cssClass: 'expedient-task-modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  }
 
+  openEventsToApprovePage(profile:any){
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      this.openEventsToApproveList(profile);
+    }
+    else{
+      this.showEventsToApprove = true;
+    }
+  }
+  
+  async openEventsToApproveList(profile:any){
+    
+    this.closeAllDesktopComponent();
+
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
+    //if( window.innerWidth <= 1024){
+      this.adjastModalHeight();
+      const modal = await this.modalController.create({
+        component: EventListPage,
+        componentProps:{
+          profile: profile,
+        },
+        cssClass: classs,
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    //} else {
+      //this.desktopComponent.showEventList = true;
+    //}
+
+  }
+  openExpedientListPage(){
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      this.openExpedientList();
+    }
+    else{
+      this.showExpedients = true;
+    }
+  }
+  openExpedientPage(data){
+    console.log(data);
+    
+    this.closeAllDesktopComponents();
+    if( window.innerWidth <= 1024){
+      //this.openExpedientList();
+    }
+    else{
+      this.serialNumber = data;
+      this.showExpedientDetail = true;
+    }
+  }
   async openExpedientList(){
-    const modal = await this.modalController.create({
-      component: ExpedientePage,
-      componentProps:{
-        profile: this.profile,
-      },
-      cssClass: 'modal',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
+    
+    this.closeAllDesktopComponent();
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal'
+    } else  {
+      classs = 'gabinete-digital-mobile-modal-to-Desktop'
+    }
+
+    //if( window.innerWidth <= 1024){
+      this.adjastModalHeight();
+      const modal = await this.modalController.create({
+        component: ExpedientePage,
+        componentProps:{
+          profile: this.profile,
+        },
+        cssClass: classs,
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+    //} else {
+      console.log('show desktop modal')
+      //this.desktopComponent.showExpediente = true;
+    //}
+
   }
 
 }
diff --git a/src/app/pages/login/login.page.ts b/src/app/pages/login/login.page.ts
index c82285dbf..697c9f9e7 100644
--- a/src/app/pages/login/login.page.ts
+++ b/src/app/pages/login/login.page.ts
@@ -44,7 +44,7 @@ export class LoginPage implements OnInit {
 
   }
   //Function to validade the login inputs
-  validateInput() {
+  validateInput(){
     return (
       this.username.trim().length > 0
       && this.password.trim().length > 0
@@ -70,7 +70,7 @@ export class LoginPage implements OnInit {
     }
     this.authService.loginChat(postData).subscribe((res: any) => {
       console.log(res.data);
-      //this.storageService.store(AuthConnstants.AUTH, res.data);
+      this.storageService.store(AuthConnstants.AUTH, res.data);
       console.log('Login to Rocket chat OK');
     }, (error: any) => {
       console.log('Network error');
diff --git a/src/app/pages/publications/new-action/new-action.page.html b/src/app/pages/publications/new-action/new-action.page.html
index 8df1b933a..1fb650f72 100644
--- a/src/app/pages/publications/new-action/new-action.page.html
+++ b/src/app/pages/publications/new-action/new-action.page.html
@@ -87,13 +87,10 @@
     </div>
   </div>
   </div>
-
-  
-
 </ion-content>
 
 <ion-footer class="ion-no-border">
-  <ion-toolbar class="footer-toolbar">
+  <ion-toolbar class="footer-toolbar width-100">
     <ion-buttons slot="start">
       <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
         <ion-label>Cancelar</ion-label>
diff --git a/src/app/pages/publications/new-publication/new-publication.page.ts b/src/app/pages/publications/new-publication/new-publication.page.ts
index 729e8206c..502a47b0c 100644
--- a/src/app/pages/publications/new-publication/new-publication.page.ts
+++ b/src/app/pages/publications/new-publication/new-publication.page.ts
@@ -53,7 +53,7 @@ export class NewPublicationPage implements OnInit {
     private publications: PublicationsService,
     private camera: Camera,
     ) {
-     
+      
       this.publicationType = this.navParams.get('publicationType');
       this.folderId = this.navParams.get('folderId');
       this.publicationTitle = 'Nova Publicação';
diff --git a/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts b/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts
new file mode 100644
index 000000000..d1ed32f55
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PublicationDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PublicationDetailPageRoutingModule {}
diff --git a/src/app/pages/publications/publication-detail/publication-detail.module.ts b/src/app/pages/publications/publication-detail/publication-detail.module.ts
new file mode 100644
index 000000000..116453af2
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationDetailPageRoutingModule
+  ],
+  declarations: [PublicationDetailPage]
+})
+export class PublicationDetailPageModule {}
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/publication-detail/publication-detail.page.html
new file mode 100644
index 000000000..0d08d53cd
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail.page.html
@@ -0,0 +1,84 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="ion-no-border bg-blue">
+    <div class="div-top-header">
+    <div class="div-search">
+      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile">
+      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
+</ion-toolbar>
+
+</ion-header>
+<ion-content>
+  <div class="content-top"></div>
+  <div class="content-container">
+    <div *ngIf="publication.Title != ''">
+    <div class="title-content">
+      <div class="back-icon">
+        <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div>
+      <div class="div-title">
+        <ion-label class="title"> {{publication.Title}}</ion-label>
+        <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
+      </div>
+    </div>
+    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+    <div class="post-item">
+      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      </div>
+      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
+        <img src="/assets/icon/icon-no-image.svg" alt="image">
+      </div>
+      <div class="post-description">
+        <p>{{publication.Message}}</p>
+      </div>
+    </div>
+  </div>
+    <div *ngIf="publication.Title == ''">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
+          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
+        </div>
+      </div>
+      <div class="post-item">
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-description">
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+        </div>
+      </div>
+
+    </div>
+  </div>     
+</ion-content>
+<ion-footer>
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
+        <ion-label>Eliminar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
+        <ion-label>Editar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.scss b/src/app/pages/publications/publication-detail/publication-detail.page.scss
new file mode 100644
index 000000000..dd3f55ae5
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail.page.scss
@@ -0,0 +1,94 @@
+
+  ion-content{
+    --background: transparent;
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    border-width: 0 !important;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .content-top{
+    width: 344px;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .back-icon{
+    width: auto;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+  }
+  .div-title{
+      width: 270px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .post-img{
+    width: 100%;
+    height: 400px;
+    margin: 0 auto;
+    border-radius: 0px!important;
+    overflow: hidden;
+}
+.post-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.post-description{
+  width: 360px;
+  margin: 0 auto;
+  margin-bottom: 35px;
+}
\ No newline at end of file
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts b/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts
new file mode 100644
index 000000000..8a3f20488
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+describe('PublicationDetailPage', () => {
+  let component: PublicationDetailPage;
+  let fixture: ComponentFixture<PublicationDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PublicationDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PublicationDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.ts b/src/app/pages/publications/publication-detail/publication-detail.page.ts
new file mode 100644
index 000000000..52aace972
--- /dev/null
+++ b/src/app/pages/publications/publication-detail/publication-detail.page.ts
@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { ImageModalPage } from '../gallery/image-modal/image-modal.page';
+import { NewPublicationPage } from '../new-publication/new-publication.page';
+
+
+@Component({
+  selector: 'app-publication-detail',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+  showLoader: boolean;
+  publicationId: string;
+  folderId: string;
+  publication: Publication;
+
+  constructor(
+    private modalController: ModalController,
+    private navParams:NavParams,
+    private publications:PublicationsService,
+    ) { 
+      this.publicationId = this.navParams.get('publicationId');
+      /* this.folderId = this.navParams.get('folderIdId'); */
+      this.publication = {
+        DateIndex: null,
+        DocumentId: '',
+        ProcessId:'',
+        Title:'',
+        Message: '',
+        /* image: null, */
+        DatePublication: null,
+        FileBase64: '',
+        OriginalFileName: '',
+        FileExtension: '',
+      };
+    }
+
+  ngOnInit() {
+    /* console.log(this.publication.FileBase64); */
+    this.getPublicationDetail();
+  }
+  doRefresh(event) {
+    this.getPublicationDetail();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  getPublicationDetail(){
+    this.showLoader = true;
+    console.log(this.publicationId);
+    /* console.log(this.folderId); */
+    this.publications.GetPublicationById(this.publicationId).subscribe(res=>{
+      console.log(res);
+      /* this.publication = res; */
+      this.publication = {
+        DateIndex: res.DateIndex,
+        DocumentId: res.DocumentId,
+        ProcessId:res.ProcessId,
+        Title:res.Title,
+        Message: res.Message,
+        DatePublication: res.DatePublication,
+        FileBase64: "data:image/jpg;base64," + res.FileBase64,
+        OriginalFileName: res.OriginalFileName,
+        FileExtension: 'jpeg',
+      }
+      this.showLoader = false;
+    });
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  deletePost(){
+    this.publications.DeletePublication(this.folderId, this.publicationId).then(res =>{
+      console.log(res);
+      
+    });
+    this.close();
+  }
+
+  async editPost(publicationType:any) {
+    console.log(this.publication);
+    const modal = await this.modalController.create({
+      component: NewPublicationPage,
+      componentProps:{
+        publicationType: publicationType,
+        publication: this.publication,
+      },
+      cssClass: 'new-publication',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then(()=>{
+      setTimeout(() => {
+        this.getPublicationDetail();
+    }, 5000);
+    });
+  }
+
+  openPreview(imageUrl:string){
+    this.modalController.create({
+      component: ImageModalPage,
+      componentProps: {
+        imageUrl:imageUrl,
+      }
+    }).then(modal => modal.present());
+  }
+
+}
diff --git a/src/app/pages/publications/publications.module.ts b/src/app/pages/publications/publications.module.ts
index 65ba82f1c..6c1a454e8 100644
--- a/src/app/pages/publications/publications.module.ts
+++ b/src/app/pages/publications/publications.module.ts
@@ -8,6 +8,11 @@ import { PublicationsPageRoutingModule } from './publications-routing.module';
 
 import { PublicationsPage } from './publications.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
+import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
+import { PublicationDetailPage } from 'src/app/shared/publication/view-publications/publication-detail/publication-detail.page';
+import { NewActionPage } from 'src/app/shared/publication/new-action/new-action.page';
+
 
 @NgModule({
   imports: [
@@ -17,6 +22,12 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     PublicationsPageRoutingModule
   ],
-  declarations: [PublicationsPage]
+  declarations: [
+    PublicationsPage,
+    ViewPublicationsPage,
+    NewPublicationPage,
+    PublicationDetailPage,
+    NewActionPage
+  ]
 })
 export class PublicationsPageModule {}
diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html
index a9f782b08..039073d1e 100644
--- a/src/app/pages/publications/publications.page.html
+++ b/src/app/pages/publications/publications.page.html
@@ -1,56 +1,117 @@
-<ion-header>
+<ion-header class="ion-no-border">
   <app-header></app-header>
 </ion-header>
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="bg-blue">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="div-title">
-          <ion-label class="title">Ações Presidenciais</ion-label>
-        </div>
-        <div class="div-icon">
-          <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
-        </div>
-      </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
 
 <ion-content>
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-      <ion-refresher-content>
-      </ion-refresher-content>
-    </ion-refresher>
-  <div class="main-content">
-    <div class="item" 
-    *ngFor="let viagem of publicationsTravelFolderList"
-    
-    (click)="viewPublications(viagem.ProcessId)">
-      <div class="item-icon">
-        <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
-      </div>
-      <div class="item-content">
-        <ion-label>
-          <p class="item-content-date">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
-          <p class="item-content-title">{{viagem.Description}}</p>
-          <p class="item-content-detail">{{viagem.Detail}}</p>
-        </ion-label>
-      </div>
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+
+  <!-- Main container -->
+  <div class="main-content d-flex  height-100 background-white overflow-hidden border-t-radius ">
+    <!-- Left -->
+    <div class="aside-left app-default-padding d-flex flex-grow-1 flex-column aside max-width-md-35">
+      <!-- Header -->
+      <ion-toolbar >
+        <div class="main-header">
+          <div class="title-content">
+            <div class="div-title">
+              <ion-label class="title">Acções Presidenciais</ion-label>
+            </div>
+            <div class="div-icon">
+              <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
+            </div>
+          </div>
+        </div>
+      </ion-toolbar>
+      <!-- Content -->
+  
+      <div class="main-content overflow-auto-y">
+        <div class="item d-flex" 
+          *ngFor="let viagem of publicationsTravelFolderList"
+          (click)="viewPublications(viagem.ProcessId)">
+          <div class="item-icon">
+            <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
+          </div>
+          <div class="item-content">
+              <p class="item-content-date my-5">De {{viagem.DateBegin}} a {{viagem.DateEnd}}</p>
+              <p class="item-content-title my-10">{{viagem.Description}}</p>
+              <p class="item-content-detail my-5">{{viagem.Detail}}</p>
+          </div>
+        </div>
+        <div class="item width-100"
+          *ngFor="let evento of publicationsEventFolderList"
+          (click)="viewPublications(evento)">
+          <div class="item-icon2">
+            <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
+          </div>
+          <div class="item-content">
+            <ion-label>
+              <p class="item-content-date">{{evento.DateBegin}}</p>
+              <p class="item-content-title">{{evento.Description}}</p>
+            </ion-label>
+          </div>
+        </div>
+      </div>  
     </div>
-    <div class="item"
-    
-    *ngFor="let evento of publicationsEventFolderList"
-    (click)="viewPublications(evento)">
-      <div class="item-icon2">
-        <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
-      </div>
-      <div class="item-content">
-        <ion-label>
-          <p class="item-content-date">{{evento.DateBegin}}</p>
-          <p class="item-content-title">{{evento.Description}}</p>
-        </ion-label>
-      </div>
+
+    <!-- Right -->
+    <div class="content d-none d-md-flex flex-grow-1 flex-column max-width-65 max-width-md-60">
+
+      <div class="width-100 height-100 d-flex align-center justify-center" 
+        *ngIf="(
+          desktopComponent.showViewPublication == false &&
+          desktopComponent.showAddNewPublication == false &&
+          desktopComponent.showPublicationDetail == false &&
+          desktopComponent.showAddActions == false
+        )"><div>Nenhuma ação presidencial selecionada</div></div>
+     
+      <!-- View Publication -->
+      <app-view-publications 
+        *ngIf="desktopComponent.showViewPublication"
+        [folderId]="folderId"
+        class="height-100 d-flex flex-column overflow-hidden flex-grow-1"
+        (addNewPublication)="addNewPublication($event)"
+        (openPublicationDetails)="openPublicationDetails($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+      >
+      </app-view-publications>
+
+      <app-new-publication 
+        *ngIf="desktopComponent.showAddNewPublication"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        [folderId]="folderId"
+        [publicationType]="publicationType"
+        [publication]="publication"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+      >
+      </app-new-publication>
+
+      <app-publication-detail-shared
+        *ngIf="desktopComponent.showPublicationDetail"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        [publicationId]="publicationId"
+        (addNewPublication)="addNewPublication($event)"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+        (goBacktoPublicationDetails)="goBacktoPublicationDetails($event)"
+        (goBackToViewPublications)="goBackToViewPublications($event)"
+      ></app-publication-detail-shared>
+
+      <app-new-action
+        *ngIf="desktopComponent.showAddActions"
+        class="height-100 d-flex flex-column overflow-hidden background-white flex-grow-1"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
+      ></app-new-action>
+
     </div>
-  </div>    
+
+  </div>
+
+  
 </ion-content>
diff --git a/src/app/pages/publications/publications.page.scss b/src/app/pages/publications/publications.page.scss
index a93051499..c89235c30 100644
--- a/src/app/pages/publications/publications.page.scss
+++ b/src/app/pages/publications/publications.page.scss
@@ -11,8 +11,8 @@ ion-toolbar{
   --padding-right: 0px !important;
   --padding-end: 0px !important;
 }
+
 .div-top-header{
-    width: 400px;
     margin: 0 auto;
     background-color: #0782c9;
     overflow: auto;
@@ -48,16 +48,12 @@ ion-toolbar{
     width: 100%; /* 400px */
     height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
-    padding: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -83,19 +79,20 @@ ion-toolbar{
     }
   }
   .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
     font-family: Roboto;
-    margin: 0 auto;
     background-color: #fff;
     overflow:auto;
-    padding: 15px 20px 0 20px;
+    .aside-left{
+      border-right: 1px solid #d8d8d8;
+    }
+    .content{
+      //border: 1px solid red;
+    }
   }
   .item{
-    width: 360px;
     padding: 0 0px 0 0px;
-    overflow: auto;
     margin: 0px auto;
+    border-bottom: 1px solid #ebebeb;
   }
   .item-icon{
     margin-top: 28px;
@@ -113,7 +110,6 @@ ion-toolbar{
     color: #061b52;
   }
   .item-content{
-    width: 305px;
     float: left;
     padding: 15px 0 15px 10px;
   }
@@ -124,7 +120,6 @@ ion-toolbar{
   .item-content-title{
     color: #0d89d1;
     font-size: 15px;
-    padding: 5px 0 5px 0;
   }
   .item-content-detail{
     color: #000000;
diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts
index 2366fcaab..c565c6809 100644
--- a/src/app/pages/publications/publications.page.ts
+++ b/src/app/pages/publications/publications.page.ts
@@ -31,6 +31,22 @@ export class PublicationsPage implements OnInit {
   months: string[];
   days:string[];
 
+
+  desktopComponent: any = {
+    showViewPublication: false,
+    showAddNewPublication: false,
+    showPublicationDetail: false,
+    showAddActions: false
+  }
+
+  folderId: string;
+  // data set from child component
+  publicationType: any;
+  publicationId: string;
+
+  // from publication details
+  publication: object;
+
   constructor(
     private router: Router, 
     private modalController: ModalController,
@@ -89,24 +105,33 @@ export class PublicationsPage implements OnInit {
   }
 
   async AddPublicationFolder(item:any) {
-    const modal = await this.modalController.create({
-      component: NewActionPage,
-      componentProps:{
-        item: item,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      this.doRefresh();
-    });
+    
+    this.closeDesktopComponent();
+    if(window.innerWidth <= 1024){
+
+      const modal = await this.modalController.create({
+        component: NewActionPage,
+        componentProps:{
+          item: item,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh();
+      });
+    } else {
+      this.desktopComponent.showAddActions = true;
+    }
+    
+
   }
 
   async viewPublications(folderId: string) {
     console.log('FOLDER', folderId)
 
-   /*  const enterAnimation = (baseEl: any) => {
+    const enterAnimation = (baseEl: any) => {
       const backdropAnimation = this.animationController.create()
         .addElement(baseEl.querySelector('ion-backdrop')!)
         .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
@@ -128,22 +153,92 @@ export class PublicationsPage implements OnInit {
     const leaveAnimation = (baseEl: any) => {
       return enterAnimation(baseEl).direction('reverse');
     }
- */
+ 
 
+    this.closeDesktopComponent();
+
+    // OpenModal
+    if( window.innerWidth <= 1024){
+      /* let item =  this.publicationFolderList; */
+      const modal = await this.modalController.create({
+        component: ViewPublicationsPage,
+        enterAnimation,
+        leaveAnimation,
+        componentProps:{
+          folderId:folderId,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+
+    } else {
+      // open angular component
+      this.folderId = folderId
+      this.desktopComponent.showViewPublication = true; 
+    }
 
-    /* let item =  this.publicationFolderList; */
-    const modal = await this.modalController.create({
-      component: ViewPublicationsPage,
-      /* enterAnimation,
-      leaveAnimation, */
-      componentProps:{
-        folderId:folderId,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
   }
 
-}
+  // called from publications details 
+  // Emittter
+  goBackToViewPublications(){
+
+    this.closeDesktopComponent();
+    this.desktopComponent.showViewPublication = true;
+  }
+
+  // called from publications details
+  // Emitters
+  goBackToPubications(){
+    this.closeDesktopComponent();
+    this.desktopComponent.showViewPublication = true;
+  }
+
+  // called from edit publication (Emitters only)
+  // Emitters
+  async goBacktoPublicationDetails(){
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;
+
+  }
+
+  // add new publication or edit publicaton
+  async addNewPublication({publicationType, folderId, publication}){
+
+    this.closeDesktopComponent();
+
+    // propr to add new publication
+    this.publicationType = publicationType;
+    // edit publication will send null
+    if (folderId != undefined) {
+      this.folderId = folderId;
+    }
+    
+    this.publication = publication;
+    
+    this.desktopComponent.showAddNewPublication = true;
+  }
+
+  async openPublicationDetails(publicationId: string){
+    
+    this.publicationId = publicationId;
+    
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;
+
+  }
+  
+
+  async closeDesktopComponent (xx?: any){
+
+    this.desktopComponent = {
+      showViewPublication: false,
+      showAddNewPublication: false,
+      showPublicationDetail: false,
+      showAddActions: false,
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/pages/publications/view-publications/view-publications.page.scss b/src/app/pages/publications/view-publications/view-publications.page.scss
index b10468d37..2da9c7ab9 100644
--- a/src/app/pages/publications/view-publications/view-publications.page.scss
+++ b/src/app/pages/publications/view-publications/view-publications.page.scss
@@ -136,7 +136,7 @@
   }
   .post-img{
       width: 100%;
-      height: 400px;
+      //height: 400px;
       margin: 0 auto;
       border-radius: 0px!important;
       overflow: hidden;
diff --git a/src/app/pages/search/organic-entity/organic-entity.page.html b/src/app/pages/search/organic-entity/organic-entity.page.html
index a8e579e8c..e683c99ce 100644
--- a/src/app/pages/search/organic-entity/organic-entity.page.html
+++ b/src/app/pages/search/organic-entity/organic-entity.page.html
@@ -1,14 +1,23 @@
 <ion-header class="main-header">
 
-  <div class="icon" (click)="close()">
-    <ion-icon name="chevron-back" slot="start"></ion-icon>
-  </div>
 
-  <ion-toolbar>
-    <ion-title>Entidade Orgânica</ion-title>
-  </ion-toolbar>
 </ion-header>
 
+
+<ion-toolbar class="main-header d-flex">
+    <div class="d-flex align-center">
+      <div class="icon" (click)="close()">
+      <ion-icon style="font-size:35px;" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+
+    <div>
+      <ion-title>Entidade Orgânica</ion-title>
+    </div>
+
+  </div>
+</ion-toolbar>
+
+
 <ion-content>
   <div class="main-container">
     <div class="input-text d-flex ion-align-items-center">
diff --git a/src/app/pages/search/organic-entity/organic-entity.page.scss b/src/app/pages/search/organic-entity/organic-entity.page.scss
index 1623ab266..45c90a641 100644
--- a/src/app/pages/search/organic-entity/organic-entity.page.scss
+++ b/src/app/pages/search/organic-entity/organic-entity.page.scss
@@ -26,7 +26,7 @@
       margin: 0px;
       padding-top: 10px;
       li{    
-        padding-top: 5px;
+        padding-top: 10px;
         padding-bottom: 10px;
         margin: 0px;
         padding-bottom: 10px;
diff --git a/src/app/pages/search/organic-entity/organic-entity.page.ts b/src/app/pages/search/organic-entity/organic-entity.page.ts
index 1d891a57f..a5e429bbe 100644
--- a/src/app/pages/search/organic-entity/organic-entity.page.ts
+++ b/src/app/pages/search/organic-entity/organic-entity.page.ts
@@ -50,10 +50,10 @@ export class OrganicEntityPage implements OnInit {
   }
 
   selectOrganicEntidy(selectedOraganicEntit: string){
-    this.close(selectedOraganicEntit)
+    this.modalController.dismiss(selectedOraganicEntit);
   }
 
-  close(username: string){
-    this.modalController.dismiss(username);
+  close(){
+    this.modalController.dismiss();
   }
 }
diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
index b772518b1..2955e13d4 100644
--- a/src/app/pages/search/search.page.html
+++ b/src/app/pages/search/search.page.html
@@ -1,137 +1,163 @@
 
 <!-- HEADER-->
-<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
+<ion-header class="ion-no-border header-main  d-md-flex flex-md-row-reverse">
   <ion-progress-bar type="indeterminate" class="loader" *ngIf="showLoader"></ion-progress-bar>
-  <ion-form>
-    <div class="d-flex search-input-container ion-justify-content-between" >
-      <div class="icon" (click)="basicSearch()">
-        <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
-      </div>
-      <div class="input-text d-flex ion-align-items-center">
-        <ion-input [(ngModel)]='searchSubject' class="search-input" type="search" placeholder="Pesquisar"></ion-input>
-      </div>
-      <div class="icon" (click)="clearSearchInput()">
-        <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+  <div class="d-flex ion-justify-content-between">
+    
+    <ion-form class="d-md-none">
+      <div class="d-flex search-input-container ion-justify-content-between" >
+        <div class="icon" (click)="basicSearch()">
+          <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
+        </div>
+        <div class="input-text d-flex ion-align-items-center">
+          <ion-input [(ngModel)]='searchSubject' class="search-input" type="search" placeholder="Pesquisar"></ion-input>
+        </div>
+        <div class="icon" (click)="clearSearchInput()">
+          <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
       </div>
+    </ion-form>
+    <!-- search -->
+    <div *ngIf="!showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(true)">
+      <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
     </div>
-  </ion-form>
-  <!--  search -->
-  <div *ngIf="!showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(true)">
-    <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
-  </div>
-  <div *ngIf="showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(false)" >
-    <ion-icon src="assets/images/advance-search-show-modal.svg"  class="icon" slot="end"></ion-icon>
+    <div *ngIf="showAdvanceSearch" class="icon-z icon-most-searched-word-open align-md-baseline" (click)="showHideAdvanceSearch(false)" >
+      <ion-icon src="assets/images/advance-search-show-modal.svg"  class="icon" slot="end"></ion-icon>
+    </div>
+  
+    <div class="profile">
+      <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
+    </div>
+  </div>  
+
+  <!-- Search drop down -->
+  <div class="advance-search pa-0 pt-10  flex-md-grow-1" *ngIf="showAdvanceSearch">
+    <!--  -->
+    <li class="d-flex date-container ion-justify-content-between">
+      <div class="icon-mer icon">
+        <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
+      </div>
+      <div class="input-container d-flex ion-align-items-center">
+        <ion-datetime [(ngModel)]='searchDocumentDate'  placeholder="Data" display-timezone="utc"></ion-datetime>
+        <div class="icon" (click)="clearInputDocumentDate()">
+          <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+      </div>
+    </li>
+    <!-- Sender -->
+    <li class="d-flex date-container ion-justify-content-between">
+      <div class="icon-mer icon">
+        <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
+      </div>
+      <div class="input-container d-flex ion-align-items-center">
+        <ion-input [(ngModel)]='searchSender' class="search-input" (click)="openAdvanceSearchSelection()" type="search" placeholder="Remetentes"></ion-input>
+        <div class="icon" (click)="clearInputRemetente()" >
+          <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+      </div>
+    </li>
+    <!-- Organic entity -->
+    <li class="d-flex date-container ion-justify-content-between">
+      <div class="icon-mer icon">
+        <ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
+      </div>
+      <div class="input-container d-flex ion-align-items-center">
+        <ion-input [(ngModel)]='searchOrganicEntiry'  class="search-input" type="search" placeholder="Entidade Orgânica" (click)="openOrganicEntitySelection()"></ion-input>
+        <div class="icon" (click)="clearInputOrganicEntity()" >
+          <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+      </div>
+    </li>
   </div>
 
-  <div class="profile">
-    <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
+  <!-- search result categories-->
+  <div class="options flex-md-grow-1 " *ngIf="showDocuments"
+    style="border-bottom: 1px solid #f3f3f3;"
+  >
+    <div class="container ">
+      <div class="d-flex width-100">
+        <!-- SLIDE -->
+        <ion-slides class="slide width-100" pager="false" [options]="slideOpts">
+          <ion-slide *ngFor="let category of searchCategories; index as i;">
+            <div [ngClass]="{'active-category': category.Active}" class="button" (click)="filterDocList(category.Name)" (click)="activeCategoty(i)" >
+              <p>{{ category.Name }}</p>
+              <ion-label class="label">{{ category.Qtd }}</ion-label>
+            </div>
+          </ion-slide>
+        </ion-slides>
+      </div>
+
+      <button class="icon-z icon-most-searched-word-open " ion-button icon-only >
+        <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
+      </button>
+    </div>
   </div>
+
 </ion-header>
 
 <ion-content class="main-content">
 
-    <!-- Search drop down -->
-    <div class="advance-search" *ngIf="showAdvanceSearch">
-      <!--  -->
-      <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon-mer icon">
-          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
-        </div>
-        <div class="input-container d-flex ion-align-items-center">
-          <ion-datetime [(ngModel)]='searchDocumentDate' display-timezone="utc"></ion-datetime>
-          <div class="icon" (click)="clearInputDocumentDate()">
-            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-          </div>
-        </div>
-      </li>
-      <!-- Sender -->
-      <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon-mer icon">
-          <ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
-        </div>
-        <div class="input-container d-flex ion-align-items-center">
-          <ion-input [(ngModel)]='searchSender' class="search-input" (click)="openAdvanceSearchSelection()" type="search" placeholder="Remetentes"></ion-input>
-          <div class="icon" (click)="clearInputRemetente()" >
-            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-          </div>
-        </div>
-      </li>
-      <!-- Organic entity -->
-      <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon-mer icon">
-          <ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
-        </div>
-        <div class="input-container d-flex ion-align-items-center">
-          <ion-input [(ngModel)]='searchOrganicEntiry'  class="search-input" type="search" placeholder="Entidade Orgânica" (click)="openOrganicEntitySelection()"></ion-input>
-          <div class="icon" (click)="clearInputOrganicEntity()" >
-            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
-          </div>
-        </div>
-      </li>
-    </div>
+    <div class="height-100">
+      <div class="d-flex seach-wrapper height-100 flex-row justify-space-between">
 
-    <!-- search result categories-->
-    <div class="options" *ngIf="showDocuments">
-      <div class="container ion-justify-content-between ion-align-items-center">
-        <div class="d-flex ion-justify-content-center ion-text-center">
-          <!-- SLIDE -->
-          <ion-slides class="slide" pager="false" [options]="slideOpts">
-            <ion-slide *ngFor="let category of searchCategories; index as i;">
-              <div class="button" (click)="filterDocList(category.Name)" (click)="activeCategoty(i)" ><!-- [ngClass]="{'active-category': category.Active}" -->
-                <p>{{ category.Name }}</p>
-                <ion-label class="label">{{ category.Qtd }}</ion-label>
+        <div class="d-flex height-100 overflow-y-auto flex-1"  *ngIf="!showDocuments || windowWidth >= 1024"
+          style="border-right: 1px solid #ddd7d7;">
+  
+          <!-- most searched word-->
+          <div class="most-searched-words d-md-flex flex-md-column">
+            <p class="title ion-text-center">Assunto mais pesquisado</p>
+            <div class="most-searched-word-container height-100 overflow-y-auto">
+            </div>
+          </div>
+        </div>
+        
+        <div class=" height-100 overflow-y-auto flex-1"  *ngIf="showDocuments">      
+          <div>
+  
+            <!-- search result document-->
+            <div class="search-result" >
+              <div class="header">
+                <div class="d-flex ion-justify-content-between ion-align-items-center">
+                  <div class="d-flex sort-by ion-justify-content-center">
+                    <p>
+                      <span class="order">Order por:</span>
+                      <span *ngIf="ordinance == 'recent'" class="order-labal">Mais Recente</span>
+                      <span *ngIf="ordinance == 'old'" class="order-labal">Mais Antigo</span>
+                    </p>
+                  </div>
+                  <div>
+                    <ion-icon *ngIf="ordinance == 'old'" (click)="reorderList('recent')" src="assets/images/icons-arrow-arrow-up.svg"></ion-icon>
+                    <ion-icon *ngIf="ordinance == 'recent'" (click)="reorderList('old')" src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
+                  </div>
+                </div>
               </div>
-            </ion-slide>
-          </ion-slides>
-        </div>
-
-        <button class="icon-z icon-most-searched-word-open" ion-button icon-only >
-          <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
-        </button>
-      </div>
-    </div>
-
-    <div class="d-flex ion-wrap word-searh-result-container">      
-      <!-- most searched word-->
-      <div class="most-searched-words" *ngIf="!showDocuments">
-        <p class="title ion-text-center">Palavras mais pesquisadas</p>
-        <div class="most-searched-word-container">
-        </div>
-      </div>
-      
-      <!-- search result document-->
-      <div class="search-result" *ngIf="showDocuments">
-        <div class="header">
-          <div class="d-flex ion-justify-content-between ion-align-items-center">
-            <div class="d-flex sort-by ion-justify-content-center">
-              <p>
-                <span class="order">Order por:</span>
-                <span *ngIf="ordinance == 'recent'" class="order-labal">Mais Recente</span>
-                <span *ngIf="ordinance == 'old'" class="order-labal">Mais Antigo</span>
-              </p>
-            </div>
-            <div>
-              <ion-icon *ngIf="ordinance == 'old'" (click)="reorderList('recent')" src="assets/images/icons-arrow-arrow-up.svg"></ion-icon>
-              <ion-icon *ngIf="ordinance == 'recent'" (click)="reorderList('old')" src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
+              <ul>
+                <li *ngFor="let searchDocument of showSearchDocuments" (click)="viewDetail(searchDocument.Id)" class="d-flex">
+                  <div class="icon">
+                    <ion-icon *ngIf="itemIcons() == '/home/gabinete-digital' "
+                      src="assets/images/icons-search-document.svg"></ion-icon>
+                    <ion-icon *ngIf="itemIcons() == '/home/agenda' "
+                      src="assets/images/icons-default-agenda.svg"></ion-icon> 
+                    <ion-icon *ngIf="itemIcons() == '/home/publications' "
+                      src="assets/images/icons-viagem.svg"></ion-icon>
+                  </div>
+                  <div class="content ion-align-items-center">
+                    <p class="result-name">{{ searchDocument.Assunto}}</p>
+                    <div class="d-flex ion-justify-content-between ">
+                      <span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
+                      <span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
+                    </div>
+                  </div>
+                </li>
+              </ul>
             </div>
+  
           </div>
+          
         </div>
-        <ul>
-          <li *ngFor="let searchDocument of showSearchDocuments" class="d-flex">
-            <div class="icon">
-              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
-            </div>
-            <div class="content ion-align-items-center">
-              <p class="result-name">{{ searchDocument.Assunto}}</p>
-              <div class="d-flex ion-justify-content-between ">
-                <span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
-                <span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
-              </div>
-            </div>
-          </li>
-        </ul>
+        
       </div>
-
     </div>
 
+
 </ion-content>
\ No newline at end of file
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss
index 5b92e2f08..79a489d33 100644
--- a/src/app/pages/search/search.page.scss
+++ b/src/app/pages/search/search.page.scss
@@ -47,12 +47,8 @@ ion-slide{
 .options{
   margin-top: 10px;
   .container{
-    display: flex;
     .d-flex{
-      display: flex;
-      flex-wrap: wrap;
       width: 100%;
-      flex-wrap: wrap;
       .button{
         min-width: 116px;
         border: solid 1px #e9e9e9;
@@ -114,141 +110,99 @@ ion-slide{
   display: flex;
 }
 
-// document
-.word-searh-result-container{
-  display: flex;
-  flex-wrap: wrap;
-  // search result
-  .search-result{
-    width: 100%;
-    border-bottom: unset;
-    padding: 0px 20px;
 
-    .header{
+// search result
+.search-result{
+  width: 100%;
+  border-bottom: unset;
+  padding: 0px 20px;
+
+  .header{
+   /*  border-top: 1px solid #ebebeb; */
+    .sort-by{
+      width: 100%;
+      .order{
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: 300;
+        color:#797979
+      }
+      .order-labal{
+        font-family: Roboto;
+        font-size: 15px;
+        color: #0d89d1;
+        margin-left: 20px;
+      }
+    }
+    ion-icon{
+      font-size: 25px;
+    }
+  }
+  ul{
+    padding: 0px;
+    margin: 0px;
+    li{
+      padding-top: 8px;
+      padding-bottom: 8px;
       border-top: 1px solid #ebebeb;
-      .sort-by{
+      display: flex;
+      align-items: center;
+      .icon{
+        font-size: 35px;
+        align-items: center;
+        display: flex;
+      }
+      .content{
         width: 100%;
-        .order{
-          font-family: Roboto;
-          font-size: 13px;
-          font-weight: 300;
-          color:#797979
-        }
-        .order-labal{
+        margin-left: 10px;
+        p{
+          margin: 0px;
+          width: 100%;
           font-family: Roboto;
           font-size: 15px;
           color: #0d89d1;
-          margin-left: 20px;
+          line-height: 1.67;
         }
-      }
-      ion-icon{
-        font-size: 25px;
-      }
-    }
-    ul{
-      padding: 0px;
-      margin: 0px;
-      li{
-        padding-top: 8px;
-        padding-bottom: 8px;
-        border-top: 1px solid #ebebeb;
-        display: flex;
-        align-items: center;
-        .icon{
-          font-size: 35px;
-          align-items: center;
-          display: flex;
+        span{
+          font-family: Roboto;
+          font-size: 13px;
+          font-weight: 300;
+          color: #797979;
         }
-        .content{
-          width: 100%;
-          margin-left: 10px;
-          p{
-            margin: 0px;
-            width: 100%;
-            font-family: Roboto;
-            font-size: 15px;
-            color: #0d89d1;
-            line-height: 1.67;
-          }
-          span{
-            font-family: Roboto;
-            font-size: 13px;
-            font-weight: 300;
-            color: #797979;
-          }
-          span.documente-date{
+        span.documente-date{
 
-          }
-          span.organic-entity{
-            width: 100%;
-          }
+        }
+        span.organic-entity{
+          width: 100%;
         }
       }
     }
   }
-  // most searched word
-  .most-searched-words{
+}
+// most searched word
+.most-searched-words{
+  width: 100% !important;
+  //min-width: 441px;
+  p.title{
     width: 100%;
-    p.title{
-      width: 100%;
-      height: 24px;
-      font-family: Roboto;
-      font-size: 20px;
-      text-align: center;
-      color: black;
-    }
+    height: 24px;
+    font-family: Roboto;
+    font-size: 20px;
+    text-align: center;
+    color: black;
+  }
 
-    .most-searched-word-container{
-      width: 441px;
-      height: 400px;
-    }
+  .most-searched-word-container{
+    height: 400px;
   }
 }
 
 
 
-
 @media only screen and (min-width: 1024px) {
-
-
-//  .header-main {
-//    background-color: #0782c9;
-//    .profile{
-//      display: inline-block;
-//    }
-//    .icon-most-searched-word-open{
-//      display: none !important;
-//    }
-//  }
-
-//  .options{
-//    .container{
-//      border-bottom: 1px solid #ebebeb;
-//      .icon{
-//        display: flex;
-//      }
-//    }
-//    padding: 0px 20px;
-//  }
-
-      
-
-//  .search-result{
-//    border-left: 1px solid #d8d8d8;
-//    .header{
-//      border-top: unset !important;
-//    }
-//  }
-
-//  .most-searched-words{
-//    width: 400px !important;
-//  }
-
-//  .word-searh-result-container{
-//    flex-wrap: wrap;
-//  }
-  
-
+  .advance-search{
+    max-width: 47%;
+  }
 }
 
 
@@ -297,4 +251,4 @@ ion-slide{
 
 .swiper-container{
   width: 100%;
-} 
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts
index 3d8d77d8f..b394d7491 100644
--- a/src/app/pages/search/search.page.ts
+++ b/src/app/pages/search/search.page.ts
@@ -1,17 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { ProcessesService } from 'src/app/services/processes.service';
 import { SearchService } from "../../services/search.service";
 import { SearchCategory } from "src/app/models/search-category";
 import { SearchDocument } from "src/app/models/search-document";
 import { formatDate } from '@angular/common';
-import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
 import { SenderPage } from 'src/app/pages/search/sender/sender.page';
 import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page';
-import  WordCloud from 'src/plugin/wordcloud2.js'
-import { TopSearch } from 'src/app/models/top-search';
-
-import { NgModel } from '@angular/forms';
+import  WordCloud from 'src/plugin/wordcloud2.js';
+import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
+import { PublicationDetailPage } from '../publications/view-publications/publication-detail/publication-detail.page';
 @Component({
   selector: 'app-search',
   templateUrl: './search.page.html',
@@ -37,47 +34,99 @@ export class SearchPage implements OnInit {
 
   showLoader: boolean;
 
-  height: number = 411;
-  width: number = 411;
-
-  data: CloudData[] = [
-    {text: 'Docents', weight: 0.1,  color: '#ffaaee'},
-    {text: '1232', weight: 0.2, tooltip: 'display a tooltip'},
-    {text: 'Dcuments', weight: 0.1,  color: '#ffaaee'},
-    {text: 'Cat', weight: 0.3,  color: '#ffaaee'},
-    {text: 'Dogs', weight: 0.1, tooltip: 'display a tooltip'},
-    {text: 'cars', weight: 0.2,  color: '#ffaaee'},
-  ];
- 
   // See http://idangero.us/swiper/api/ for valid options.
   slideOpts = {
-    slidesPerView: 3,
+    slidesPerView: parseInt(`${window.innerWidth/147}`, 10),
     initialSlide: 0,
     speed: 400,
   }
 
+  loadedAttachments:any;
 
   list = []
 
+  windowWidth: number;
+
   constructor(private modalController: ModalController,
-    private search: SearchService) {
+    private search: SearchService,
+    private modalCtrl: ModalController,) {
       this.ordinance = "recent";
     }
 
   ngOnInit() {
 
-    this.search.mostSeachWord("10").subscribe(res=>{
+    this.wordCloud();
 
-      let list = []
+    window.onresize = (event) => {
+      this.windowWidth = window.innerWidth
+      this.loadWordCloud()
+    };
 
-      res.forEach(element => {
-        list.push(Object.values(element))
+    this.windowWidth = window.innerWidth
+
+    window['dynamicSearch'] = (search:string) =>{
+      this.searchSubject = search;
+    }
+
+    window['searchTriger'] = () =>{
+      this.basicSearch();
+    }
+
+  }
+
+  wordCloud(){
+
+    this.search.mostSeachWord("15").subscribe(res=>{
+
+      const container = document.querySelector('.seach-wrapper');
+
+      // container.setAttribute('style',`width: ${window.innerWidth}px`);
+
+      const highest= res[0].Hits;
+      const lowest = res[res.length-1].Hits;
+      const range =  highest - lowest;
+      const perPercent = range / 100;
+      let list = [];
+
+      // minimum font sixe
+      // Editable -----------------------------------
+      const minimumSize = 9;
+      // Editable ------------------------------------
+      // 64
+      const maximum = 64;
+
+      res.forEach(e => {
+        const array: any =  Object.values(e);
+        
+        array[1] = (((array[1] - lowest) / perPercent) * (maximum - minimumSize)/ 100 ) + minimumSize;
+        list.push(array)
       });
 
       this.list = list
-      
+
+      console.log(this.list)
+
       const elem = document.documentElement.querySelector('.most-searched-word-container');
 
+      setTimeout(()=>{
+        WordCloud(
+          elem,
+          { 
+            list: this.list,
+            Family: 'Times, serif',
+            gridSize: 15
+          },
+        );
+      },300)
+
+    });
+  }
+
+
+  loadWordCloud(){
+
+    setTimeout(()=>{
+      const elem = document.documentElement.querySelector('.most-searched-word-container');
 
       WordCloud(
         elem,
@@ -88,7 +137,7 @@ export class SearchPage implements OnInit {
         },
       );
 
-    });
+    },100);
 
   }
 
@@ -114,16 +163,13 @@ export class SearchPage implements OnInit {
     });
   }
 
-
   /**
    * @description Basic search
    */
    basicSearch(){
 
-    
     if(window.location.pathname  == '/home/agenda'){
       
-      console.log('aplication type 0');
 
       this.showLoader = true;
 
@@ -150,11 +196,11 @@ export class SearchPage implements OnInit {
         }
         
         this.showLoader = false;
+        this.loadWordCloud();
+
       });
     } else if (window.location.pathname  =='/home/gabinete-digital'){
 
-      console.log('aplication type 8,361');
-      
       this.showLoader = true;
 
       this.search.basicSearch(this.searchSubject, this.searchDocumentDate, this.searchSender
@@ -178,7 +224,8 @@ export class SearchPage implements OnInit {
         } else {
           this.showDocuments = false
         }
-      
+        
+        this.loadWordCloud();
       });
 
       this.search.basicSearch(this.searchSubject, this.searchDocumentDate, this.searchSender
@@ -204,13 +251,12 @@ export class SearchPage implements OnInit {
         }
         
         this.showLoader = false;
+        this.loadWordCloud();
       });
     } else if (window.location.pathname  == '/home/publications'){
       
       this.showLoader = true;
 
-      console.log('aplication type 386');
-
       this.search.basicSearch(this.searchSubject, this.searchDocumentDate, this.searchSender
         ,this.searchOrganicEntiry, this.searchDocTypeId, '386').subscribe(res=>{
         console.log(res);
@@ -234,9 +280,9 @@ export class SearchPage implements OnInit {
         }
         
         this.showLoader = false;
+        this.loadWordCloud();
       });
     }
-
      
    }
 
@@ -245,6 +291,13 @@ export class SearchPage implements OnInit {
     */
    clearSearchInput(){
     this.searchSubject = ""
+
+    this.searchCategories = [];
+    this.searchDocuments = [];
+    this.showDocuments = false;
+
+    this.wordCloud();
+
    }
 
   /**
@@ -257,14 +310,19 @@ export class SearchPage implements OnInit {
     return formatDate(date, 'dd/MM/yyyy', 'pt');
   }
 
-
   activeCategoty(i){
 
-    this.searchCategories.forEach((e) => {
-      e['Active'] = false;
+    this.searchCategories.forEach((e, j) => {
+      if(i != j){
+        e['Active'] = false;
+      } 
     })
 
-    this.searchCategories[i]['Active'] = true;
+    if (this.searchCategories[i]['Active']){
+      this.searchCategories[i]['Active'] = false;
+    } else {
+      this.searchCategories[i]['Active'] = true
+    }
   }
 
   clearInputRemetente(){
@@ -288,9 +346,16 @@ export class SearchPage implements OnInit {
 
   async openAdvanceSearchSelection() {
 
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal modal-desktop'
+    } else  {
+      classs = 'search-desktop-modal search-submodal'
+    }
+
     const modal = await this.modalController.create({
       component: SenderPage,
-      cssClass: 'sender',
+      cssClass: classs,
       componentProps: {
       }
     });
@@ -306,9 +371,17 @@ export class SearchPage implements OnInit {
 
   async openOrganicEntitySelection(){
 
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal modal-desktop'
+    } else  {
+      classs = 'search-desktop-modal search-submodal'
+    }
+
+
     const modal = await this.modalController.create({
       component: OrganicEntityPage,
-      cssClass: 'organicEnity',
+      cssClass: classs,
       componentProps: {
       }
     });
@@ -334,4 +407,54 @@ export class SearchPage implements OnInit {
 
     this.showCategory = categoryName;
   }
-}
\ No newline at end of file
+
+
+  itemIcons(): string{
+    return window.location.pathname
+  }
+
+  viewDocument(){
+    const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    // const browser = this.iab.create(url,"_blank");
+    // browser.show();
+  }
+
+
+  async viewDetail(id:any) {
+    
+    if(window.location.pathname  == '/home/agenda'){
+
+      const modal = await this.modalCtrl.create({
+        component: ViewEventPage,
+        componentProps:{
+          eventId: id
+        },
+        cssClass: 'modal modal-desktop',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then((res)=>{});
+      
+    } else if(window.location.pathname == '/home/publications'){
+        
+      this.viewPublicationDetail(id);
+    }
+
+  }
+
+  async viewPublicationDetail(publicationId:string) {
+    const modal = await this.modalController.create({
+      component: PublicationDetailPage,
+      componentProps:{
+        publicationId: publicationId,
+      },
+      cssClass: 'publication-detail modal modal-desktop ',
+      backdropDismiss: false
+    });
+    
+    await modal.present();
+    modal.onDidDismiss().then(()=>{});
+
+  }
+  
+}
diff --git a/src/app/pages/search/sender/sender.page.html b/src/app/pages/search/sender/sender.page.html
index 928716704..50117aa85 100644
--- a/src/app/pages/search/sender/sender.page.html
+++ b/src/app/pages/search/sender/sender.page.html
@@ -1,13 +1,15 @@
-<ion-header class="main-header">
 
-  <div class="icon" (click)="close()">
-    <ion-icon name="chevron-back" slot="start"></ion-icon>
+<ion-toolbar class="main-header d-flex">
+    <div class="d-flex align-center">
+      <div class="icon" (click)="close()">
+      <ion-icon style="font-size:35px;" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+
+    <div>
+      <ion-title>Remetentes</ion-title>
+    </div>
   </div>
-
-  <ion-toolbar>
-    <ion-title>Remetentes</ion-title>
-  </ion-toolbar>
-</ion-header>
+</ion-toolbar>
 
 <ion-content>
   <div class="main-container">
diff --git a/src/app/pages/search/sender/sender.page.scss b/src/app/pages/search/sender/sender.page.scss
index abda67839..27b075310 100644
--- a/src/app/pages/search/sender/sender.page.scss
+++ b/src/app/pages/search/sender/sender.page.scss
@@ -27,7 +27,7 @@
     margin: 0px;
     padding-top: 10px;
     li{    
-      padding-top: 5px;
+      padding-top: 10px;
       padding-bottom: 10px;
       margin: 0px;
       padding-bottom: 10px;
diff --git a/src/app/pages/search/sender/sender.page.ts b/src/app/pages/search/sender/sender.page.ts
index 975c17e44..3a316bdc3 100644
--- a/src/app/pages/search/sender/sender.page.ts
+++ b/src/app/pages/search/sender/sender.page.ts
@@ -32,7 +32,7 @@ export class SenderPage implements OnInit {
     });
   }
   
-  filterContact(){
+  filterContact(event?:any){
 
     const findPerson = this.sender.toLowerCase();
     const persons = this.contacts.filter((person) => {
@@ -52,7 +52,7 @@ export class SenderPage implements OnInit {
     this.close(this.selectedUser);
   }
 
-  close(username: string){
+  close(username?: string){
     this.modalController.dismiss(username);
   }
 
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 6ff36b53d..94299b82b 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -23,13 +23,20 @@ export class AuthService {
     private router:Router
     ) { 
       this.headers = new HttpHeaders();
-    }
 
+      //if(!environment.production){
+        if (localStorage.getItem("user") != null) {
+          this.ValidatedUser = JSON.parse(localStorage.getItem('user'));
+        }
+      //}
+
+    }
     public ValidatedUser:User;
 
     async login(user: User): Promise<boolean> {
       user.BasicAuthKey = 'Basic ' + btoa(user.username + '@' + user.domainName + ':' + user.password); //conversão em base64 das credenciais inseridas
 
+
       const options = { headers: {'Authorization': user.BasicAuthKey }};
       this.headers = this.headers.set('Authorization',user.BasicAuthKey);
       this.opts = {
@@ -42,17 +49,16 @@ export class AuthService {
 
       result = await this.http.get<boolean>(service, options).toPromise();
       response = await this.http.post<any>(environment.apiURL + "UserAuthentication/Login", '', this.opts).toPromise();
-      /* this.http.post(environment.apiURL + "UserAuthentication/Login", '', this.opts).subscribe(res=>{
-        this.storageService.store(AuthConnstants.USER, res);
-        this.ValidatedUser = user;
-        response = user;
-        console.log(user);
-      }); */
-  
+
       if (result)
         {
           this.ValidatedUser = user;
-          //this.storageService.store(AuthConnstants.USER, response);
+
+          //if(!environment.production){
+            localStorage.setItem('user', JSON.stringify(Object.assign(user, response) ) );
+          //}
+
+          this.storageService.store(AuthConnstants.USER, response);
         }
       return result;
     }
@@ -70,9 +76,9 @@ export class AuthService {
 
     //Get user data from RocketChat | global object
     getUserData(){
-      /* this.storageService.get(AuthConnstants.AUTH).then(res=>{
+      this.storageService.get(AuthConnstants.AUTH).then(res=>{
         this.userData$.next(res);
-      }); */
+      });
     }
     //Get user Id | global object
     getUserId(){
diff --git a/src/app/services/chat.service.ts b/src/app/services/chat.service.ts
index 64d026274..6d68c7b70 100644
--- a/src/app/services/chat.service.ts
+++ b/src/app/services/chat.service.ts
@@ -67,6 +67,16 @@ export class ChatService {
     getAllRooms(){
       return this.http.get(environment.apiChatUrl+'rooms.get', this.options);
     }
+    getRoomInfo(roomId:any){
+      let params = new HttpParams();
+      params = params.set("roomId", roomId);
+      let opts = { 
+        headers: this.headers, 
+        params: params 
+      }
+      return this.http.get(environment.apiChatUrl+'rooms.info', opts);
+      
+    }
     customsRooms(params:any){
       let opts = { 
         headers: this.headers, 
@@ -87,6 +97,7 @@ export class ChatService {
 
     //Load messages from roomId
     getAllDirectMessages(){
+      console.log(this.options);
       return this.http.get(environment.apiChatUrl+'im.list', this.options);
     }
     //Load messages from roomId
diff --git a/src/app/services/database.service.spec.ts b/src/app/services/database.service.spec.ts
new file mode 100644
index 000000000..1b3f513b1
--- /dev/null
+++ b/src/app/services/database.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatabaseService } from './database.service';
+
+describe('DatabaseService', () => {
+  let service: DatabaseService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DatabaseService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/database.service.ts b/src/app/services/database.service.ts
new file mode 100644
index 000000000..6b7d033f7
--- /dev/null
+++ b/src/app/services/database.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DatabaseService {
+
+  constructor() { }
+}
diff --git a/src/app/services/events.service.ts b/src/app/services/events.service.ts
index e0be9c7e9..2f4b88c16 100644
--- a/src/app/services/events.service.ts
+++ b/src/app/services/events.service.ts
@@ -192,7 +192,7 @@ export class EventsService {
     return this.http.delete(`${puturl}`, options)
   }
   postExpedientEvent(docId:any, body:any, sharedagenda:string, serialNumber:any){
-    const geturl = environment.apiURL + 'calendar/' + ((sharedagenda != '') ? sharedagenda : 'CreateEventExpediente');
+    const geturl = environment.apiURL + 'calendar/' + ((sharedagenda != '') ? sharedagenda : 'CreateEventExpediente')+'/event';
     let params = new HttpParams();
 
     params = params.set("DocId", docId);
diff --git a/src/app/services/processes.service.ts b/src/app/services/processes.service.ts
index dbc919389..48750b8b0 100644
--- a/src/app/services/processes.service.ts
+++ b/src/app/services/processes.service.ts
@@ -37,8 +37,7 @@ export class ProcessesService {
     return this.http.get<any>(`${geturl}`, options);
   }
 
-  GetTask(serialnumber:string): Observable<any>
-  {
+  GetTask(serialnumber:string): Observable<any>{
     const geturl = environment.apiURL + 'Tasks/FindTask';
     let params = new HttpParams();
 
@@ -50,6 +49,20 @@ export class ProcessesService {
     };
     return this.http.get<any>(`${geturl}`, options);
   }
+
+  GetTaskParticipants(folderId:string): Observable<any>{
+    const geturl = environment.apiURL + 'Processes/GetUsersInDispash';
+    let params = new HttpParams();
+
+    params = params.set("folderId", folderId);
+    
+    let options = { 
+      headers: this.headers, 
+      params: params 
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
   FindTaskDocId(serialnumber:string): Observable<any>
   {
     const geturl = environment.apiURL + 'Tasks/FindExpedienteDocId';
@@ -107,6 +120,33 @@ export class ProcessesService {
       console.log(res);
     });
   }
+
+  UpdateTaskStatus(FolderId:string): Observable<any>{
+    const geturl = environment.apiURL + 'Tasks/UpdateTaskStatus';
+    let params = new HttpParams();
+
+    params = params.set("FolderId", FolderId);
+    
+    let options = { 
+      headers: this.headers, 
+      params: params 
+    };
+    return this.http.post<any>(`${geturl}`,'', options);
+  }
+
+  GetDocumentUrl(DocId:string, FsId:string): Observable<any>{
+    const geturl = environment.apiURL + 'ecm/document/viewrequestshort';
+    let params = new HttpParams();
+
+    params = params.set("DocId", DocId);
+    params = params.set("applicationid", FsId);
+    
+    let options = { 
+      headers: this.headers, 
+      params: params 
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
   
   postDespatcho(body:any){
     const geturl = environment.apiURL + 'Processes/CreateDispatch';
diff --git a/src/app/services/search.service.ts b/src/app/services/search.service.ts
index 6393c1071..0f0cda70b 100644
--- a/src/app/services/search.service.ts
+++ b/src/app/services/search.service.ts
@@ -17,8 +17,6 @@ export class SearchService {
   loggeduser: User;
   headers: HttpHeaders;
 
-
-
   categories= Array;
 
   // setup
@@ -55,15 +53,18 @@ export class SearchService {
 
   mostSeachWord(size:string):Observable<any>{
     // Endpoint
-    const geturl = environment.apiURL + 'search/top';
+
+    let UserId = (this.loggeduser.UserId).toString();
+
+    const geturl = environment.apiURL + 'Processes/GetHitsByUserId';
     // store params
     let params = new HttpParams();
     // set https params
 
+    params = params.set("userId", UserId);
     params = params.set("size", size);
 
-
-    const options = { 
+    const options = {
       headers: this.headers, 
       params: params 
     };
diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts
index e65b0037a..ddf454338 100644
--- a/src/app/services/storage.service.ts
+++ b/src/app/services/storage.service.ts
@@ -1,21 +1,24 @@
 import { Injectable } from '@angular/core';
+import { Storage } from '@ionic/storage';
 /* import { Plugins } from '@capacitor/core';
 const { Storage } = Plugins; */
 @Injectable({
   providedIn: 'root'
   })
   export class StorageService {
-  constructor() {}
+  constructor(private storage:Storage,) {}
 
-  /* // Store the value
-  async store(storageKey: string, value: any) {
-  const encryptedValue = btoa(escape(JSON.stringify(value)));
-  await Storage.set({
-  key: storageKey,
-  value: encryptedValue
-  });
+  // Store the value
+  async store(key: string, value: any){
+    const encryptedValue = btoa(escape(JSON.stringify(value)));
+    await this.storage.set(key, encryptedValue);
   }
-
+  // Get the value
+  async get(key: string) {
+    const ret = await this.storage.get(key).then((val) => { return val; });
+    return JSON.parse(unescape(atob(ret)));
+  }
+/* 
   // Get the value
   async get(storageKey: string) {
   const ret = await Storage.get({ key: storageKey });
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.html b/src/app/shared/agenda/approve-event/approve-event.component.html
new file mode 100644
index 000000000..8f9862116
--- /dev/null
+++ b/src/app/shared/agenda/approve-event/approve-event.component.html
@@ -0,0 +1,114 @@
+<!-- <ion-header hidden class="ion-no-border px-20">
+  <div class="header-content d-flex justify-space-between">
+    <div class="header-icon-left">
+      <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+    </div>
+    <div class="header-title flex-grow-1">
+      <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+    </div>
+    <div class="header-icon-right display-none-{{showAside}}">
+      <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+    </div>
+  </div>
+</ion-header> -->
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Ações</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="approveTask(loadedEvent.serialNumber)">
+        <ion-icon name="checkmark-sharp"></ion-icon>
+        <ion-label>Aprovar</ion-label>
+      </ion-item>
+      <ion-item (click)="emendTask(loadedEvent.serialNumber)">
+        <ion-icon name="create-outline"></ion-icon>
+        <ion-label>Emendar</ion-label>
+      </ion-item>
+      <ion-item (click)="rejectTask(loadedEvent.serialNumber)">
+        <ion-icon name="close-sharp"></ion-icon>
+        <ion-label>Rejeitar</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-content id="main-content">
+  <div class="main-content d-flex height-100">
+    <div class="content">
+      <div class="header-content width-100 d-flex justify-space-between">
+        <div class="header-icon-left">
+          <ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
+        </div>
+        <div class="header-title flex-grow-1">
+          <label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
+        </div>
+        <div class="header-icon-right display-none-{{showAside}}">
+          <ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
+        </div>
+      </div>
+      <div class="upper-content d-flex flex-column">
+        <div class="content-location">
+          <p>
+            <span class="location">{{loadedEvent.workflowInstanceDataFields.Location}}</span>
+            <span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}">{{loadedEvent.workflowInstanceDataFields.Agenda}}</span>
+          </p>
+        </div>
+        <div class="content-details">
+          <ion-label>
+            <p>{{customDate}}</p>
+            <p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+            <p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
+            <p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
+          </ion-label>
+        </div>
+      </div>
+      <div class="line"></div>
+      <div class="middle-content">
+        <h5>Intervenientes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
+          </ion-label>
+        </ion-item>
+        <h5>Detalhes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+            <p [innerHTML]="loadedEvent.workflowInstanceDataFields.Body"></p>
+        </ion-item>
+      </div>
+
+      <div *ngIf="loadedAttachments" class="bottom-content">
+        <ion-list>
+          <h3>Documentos Anexados</h3>
+          <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <p class="attach-title-item">Receita por Natureza</p>
+            <p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div *ngIf="showAside" class="aside-right flex-column height-100">
+      <div class="aside-buttons">
+        <button hidden full class="btn-ok" shape="round" >Editar evento</button>
+        <button (click)="approveTask(loadedEvent.serialNumber)" full class="btn-ok" shape="round" >Aprovar</button>
+        <button (click)="emendTask(loadedEvent.serialNumber)" class="btn-cancel" shape="round" >Emendar</button>
+        <div class="solid"></div>
+        <button (click)="rejectTask(loadedEvent.serialNumber)" full class="btn-delete" shape="round" >Rejeitar</button>
+      </div>
+    </div>
+  </div>
+</ion-content>
+<ion-footer class="display-none-{{showAside}}">
+    <div class="buttons">
+      <button class="btn-cancel" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</button>
+      <ion-menu-button autoHide="false">
+        <ion-icon  (click)="openMenu()" name="ellipsis-vertical-outline"></ion-icon>
+      </ion-menu-button>
+      <button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
+      <button hidden class="btn-delete" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</button>
+    </div>
+</ion-footer>
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.scss b/src/app/shared/agenda/approve-event/approve-event.component.scss
new file mode 100644
index 000000000..571ff7c8a
--- /dev/null
+++ b/src/app/shared/agenda/approve-event/approve-event.component.scss
@@ -0,0 +1,211 @@
+  ion-menu{
+    --height: 225px;
+  }
+  .display-none-true{
+    display: none;
+    border: 1px solid red;
+  }
+  .header-content{
+    //margin: 25px auto;
+  }
+  .header-icon-left{
+    width: 36px;
+    font-size: 33px;
+    color: #42b9fe;
+    float: left;
+  }
+  .header-title{
+    font-family: Roboto;
+    font-size: 25px;
+    margin: 0 5px 0 5px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+  .header-icon-right{
+    width: 45px;
+    font-size: 45px;
+    float: left;
+  }
+
+  .content{
+    padding: 30px 20px 0 20px !important;
+    overflow: auto;
+    width: 100%;
+    border-right: 1px solid #d8d8d8;
+
+    .upper-content{
+      margin-left: 40px;
+      font-size: 18px;
+    
+      .content-location{
+        margin-top: 0px !important;
+        width: 100%;
+        padding: 0;
+      }
+
+      .location{
+        float: left;
+      }
+      .event-type-Oficial{
+        font-family: Roboto;
+        border-radius: 20px;
+        background: #fec077;
+        float: right !important;
+        padding: 5px 13.5px 5px 13.5px;
+        color: #fff;
+      }
+      .event-type-Pessoal{
+        font-family: Roboto;
+        border-radius: 20px;
+        background: #f05d5e;
+        float: right !important;
+        padding: 5px 13.5px 5px 13.5px;
+        color: #fff;
+      }
+      .button-edit-event {
+          width: 140px;
+          height: 44px;
+          border-radius: 22.5px;
+          --background: #e0e9ee;
+          --color:#061b52;
+      }
+      .content-details p{
+          font-size: 16px;
+      }
+    }
+    .middle-conten{
+      .middle-content h3, .middle-content p{
+        font-size: 16px;
+      }
+    }
+    
+    .bottom-content{
+      width: 360px;
+      margin: 0 auto;
+      
+      .bottom-content h3{
+        font-size: 16px;
+        margin: 0 0 0 10px;
+      }
+      .attach-document{
+        font-size: 15px;
+        color: #0d89d1;
+        margin: 5px 5px 5px 10px;
+        padding: 5px;
+        float: left;
+      }
+      .attach-icon{
+        width: 37px;
+        font-size: 35px;
+        float: left;
+      }
+      .attach-title-item{
+        width: 100%;
+        font-size: 15px;
+        color:#0d89d1;
+      }
+      /* SPAN */
+      .span-left{
+        float: left;
+        font-size: 15x;
+      }
+      .span-right{
+      text-align: right;
+      float: right;
+      font-size: 13px;
+      }
+    }
+}
+  .aside-right{
+    overflow: auto;
+    padding: 30px 20px 0 20px !important;
+  
+    .arrow-right{
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 20px;
+     
+      /* .arrow-right-icon{
+          width: 37px;
+          float: right;
+          font-size: 35px;
+          overflow: hidden;
+      } */
+    }
+    .aside-buttons{
+      width: 100% !important;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+  
+      .btn-ok, .btn-cancel, .btn-delete{
+        height: auto !important;
+        font-size: 16px !important;
+        font-weight: 600 !important;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        padding: 15px !important;
+      }
+    }
+    .solid {
+      display: block;
+      width: 90%;
+      border-top: 1px solid #ebebeb;
+      margin: 0 auto !important;
+      margin-bottom: 10px !important;
+    }
+  }
+
+
+  .buttons{
+    display: flex;
+    justify-content: space-between;
+    overflow: auto;
+  
+  
+  .button-options {
+      height: 44px;
+      --color: #42b9fe;
+      /* opacity: 0; */
+  }
+  .button-approve {
+    width: 140px;
+    height: 44px;
+    border-radius: 22.5px;
+    --background: #42b9fe;
+  }
+  .button-reject {
+    width: 140px;
+    height: 44px;
+    --color: #d30a0a;
+    border-radius: 22.5px;
+    --background: #ffe0e0;
+  }
+}
+
+
+
+
+ /*  @media only screen and (max-width: 1140px) {
+    .content{
+      width: 100%;
+    }
+    .aside-right{
+      display: none;
+    }
+  } */
+  /* @media only screen and (min-width: 1140px) {
+    .div-icon{
+      display: none;
+    }
+    .content{
+      //width: 75%;
+      border-right: 1px solid #d8d8d8;
+    }
+  
+    .aside-right{
+      width: 25%;
+    }
+  } */
+  
\ No newline at end of file
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.spec.ts b/src/app/shared/agenda/approve-event/approve-event.component.spec.ts
new file mode 100644
index 000000000..961d67648
--- /dev/null
+++ b/src/app/shared/agenda/approve-event/approve-event.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ApproveEventComponent } from './approve-event.component';
+
+describe('ApproveEventComponent', () => {
+  let component: ApproveEventComponent;
+  let fixture: ComponentFixture<ApproveEventComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApproveEventComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ApproveEventComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/agenda/approve-event/approve-event.component.ts b/src/app/shared/agenda/approve-event/approve-event.component.ts
new file mode 100644
index 000000000..d581aead1
--- /dev/null
+++ b/src/app/shared/agenda/approve-event/approve-event.component.ts
@@ -0,0 +1,153 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Event } from 'src/app/models/event.model';
+import { AlertService } from 'src/app/services/alert.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { EmendMessageModalPage } from 'src/app/pages/agenda/emend-message-modal/emend-message-modal.page';
+import { EventActionsPopoverPage } from 'src/app/pages/agenda/event-actions-popover/event-actions-popover.page';
+
+
+@Component({
+  selector: 'app-approve-event',
+  templateUrl: './approve-event.component.html',
+  styleUrls: ['./approve-event.component.scss'],
+})
+export class ApproveEventComponent implements OnInit {
+
+  event: Event;
+  loadedEvent:any;
+  loadedAttachments:any;
+  customDate:any;
+  today:any;
+  show: boolean = false;
+  
+  months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+  days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+
+  @Input() serialNumber:string;
+  @Input() showAside:boolean;
+
+  @Output() approveEventDismiss = new EventEmitter<any>();
+  @Output() closeEventToApprove = new EventEmitter<any>();
+  @Output() AproveEventEditEvent = new EventEmitter<any>();
+
+  constructor(
+    private router:Router,
+    private modalController: ModalController,
+    private processes:ProcessesService,
+    private attachmentsService: AttachmentsService,
+    private popoverController: PopoverController,
+    private menu: MenuController,
+    private alertService: AlertService
+  ) { }
+
+  ngOnInit() {
+    this.getTask();
+    this.getAttachments();
+    console.log(this.showAside);
+    
+  }
+
+  notImplemented(){
+    this.alertService.presentAlert('Funcionalidade em desenvolvimento');
+  }
+
+  close(){
+    /* this.router.navigate(['/home/gabinete-digital/event-list']); */
+    this.closeEventToApprove.emit();
+    this.modalController.dismiss();
+  }
+
+  getTask(){
+    this.processes.GetTask(this.serialNumber).subscribe(res => {
+      console.log(res);
+      this.loadedEvent = res;
+      this.today = new Date(res.workflowInstanceDataFields.StartDate);
+      console.log(new Date(this.today));
+      this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+      
+    })
+  }
+  approveTask(serialNumber:string){
+
+    this.approveEventDismiss.emit({ 
+      "serialNumber": serialNumber,
+      "action": "Aprovar", 
+      "saveData": {
+        loadedEvent: this.loadedEvent,
+        today: this.today,
+        customDate: this.customDate
+      }
+    });
+  }
+
+  emendTask(serialNumber:string){
+    /* console.log('Emendar'); */
+    this.menu.close();
+    this.openEmendMessageModal(serialNumber);
+    this.modalController.dismiss(null);
+  }
+
+  rejectTask(serialNumber:string){
+  
+    let body = { "serialNumber": serialNumber, "action": "Rejeitar" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.alertService.presentAlert('Operação realizada com sucesso!');
+    this.router.navigate(['/home/gabinete-digital/event-list']);
+    this.modalController.dismiss(null);
+  }
+  
+  getAttachments(){
+    this.attachmentsService.getAttachmentsBySerial(this.serialNumber).subscribe(res=>{
+      this.loadedAttachments = res;
+      console.log(res);
+    });
+  }
+
+  async openOptions(ev:any) {
+    const popover = await this.popoverController.create({
+      component: EventActionsPopoverPage,
+      cssClass: 'event-actions-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+  
+  openMenu() {
+    this.menu.open();
+  }
+  async openEmendMessageModal(serialNumber:string) {
+    const modal = await this.modalController.create({
+      component: EmendMessageModalPage,
+      componentProps:{
+      },
+      cssClass: 'emend-message-modal',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(res => {
+      if(res.data !== ''){
+        let body = { "serialNumber": serialNumber, 
+        "action": "Emendar",
+        "dataFields": {
+        "ReviewerComments": res.data,
+        }
+        }
+      console.log(body);
+      this.processes.PostTaskAction(body);
+      this.router.navigate(['/home/gabinete-digital/event-list']);
+      this.alertService.presentAlert('Operação realizada com sucesso!');
+      }
+      else{
+        this.alertService.presentAlert('Operação cancelada!');
+      }
+    });
+  }
+
+}
diff --git a/src/app/shared/agenda/edit-event/edit-event.component.html b/src/app/shared/agenda/edit-event/edit-event.component.html
new file mode 100644
index 000000000..8f5e704f3
--- /dev/null
+++ b/src/app/shared/agenda/edit-event/edit-event.component.html
@@ -0,0 +1,226 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="middle">
+          <ion-label class="title">Editar Evento</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content">
+    <div class="ion-item-container">
+      <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
+    </div>
+    <div class="container-div">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+        </div>
+      </div>
+      <!-- Error messages -->
+      <!-- <span class="error ion-padding" >
+        Campo obrigatório
+      </span> -->
+  
+      
+    </div>
+  
+    <div class="container-div">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select disabled  placeholder="Selecione agenda"
+          selectedText="{{postEvent.CalendarName}}" 
+          [(ngModel)]="postEvent.CalendarName" 
+          interface="action-sheet" Cancel-text="Cancelar" 
+          required>
+            <ion-select-option value="Oficial">Oficial</ion-select-option>
+            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select  placeholder="Selecione tipo" 
+          [(ngModel)]="postEvent.Categories[0]"
+          selectedText="{{postEvent.Categories[0]}}" 
+          interface="action-sheet" 
+          Cancel-text="Cancelar" required>
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+  
+    <div class="container-div">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            placeholder="Início"
+            [(ngModel)]="postEvent.StartDate"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+          >
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            placeholder="Fim"
+            [(ngModel)]="postEvent.EndDate"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+          >
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div d-flex">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select placeholder="Selecione repetição" 
+          [(ngModel)]="postEvent.IsRecurring"
+          selectedText="{{isRecurring}}" 
+          interface="action-sheet" 
+          Cancel-text="Cancelar" required>
+            <ion-select-option value="false">Não se repete</ion-select-option>
+            <ion-select-option value="true">Repete</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div d-flex">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+        </div>
+        <div (click)="openAttendees()" class="ion-input-class d-flex flex-grow-1 width-100 overflow-hidden ">
+          <div class="list-people flex-grow-1">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label class="list-people-title">Ver ou editar participantes</ion-label>
+                <ion-label hidden >Text</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="d-flex justify-center align-center font-35">
+            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div hidden class="container-div d-flex">
+      <div class="ion-item-class-2 width-100 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class d-flex flex-grow-1 width-100 overflow-hidden">
+          <div class="list-people flex-grow-1">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label class="list-people-title">Com conhecimento</ion-label>
+                <ion-label hidden >Text</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="d-flex justify-center align-center font-35">
+            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height width-100">
+          <ion-textarea [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" rows="6" cols="20"></ion-textarea>
+        </div>
+      </div>
+    </div>
+    
+    <div hidden class="ion-item-container-no-border">
+      <ion-label>
+        <div class="attach-icon">
+          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+        </div>
+        <div class="attach-document">
+          <ion-label>Anexar Documentos</ion-label>
+        </div> 
+      </ion-label>
+    </div>
+    
+    <div hidden>
+      <ion-item>
+        <ion-label>Documentos Anexados</ion-label>
+      </ion-item>
+      <ion-list>
+        <ion-item>
+        <ion-label>
+          <h4 class="attach-title-item">Text</h4>
+          <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div> 
+  </div>    
+</ion-content>
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="width-100 d-flex justify-space-between px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-title></ion-title>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/agenda/edit-event/edit-event.component.scss b/src/app/shared/agenda/edit-event/edit-event.component.scss
new file mode 100644
index 000000000..dc20d1e33
--- /dev/null
+++ b/src/app/shared/agenda/edit-event/edit-event.component.scss
@@ -0,0 +1,170 @@
+ion-content{
+    --background:transparent;
+}
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+}
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+    
+    .title-content{
+      margin: 0px auto;
+      padding: 0 !important;
+      background: #fff;
+       .middle{
+        padding: 0!important;
+        float: left;
+        margin: 2.5px 0 0 5px;
+      }
+    }
+
+    .title{
+      font-size: 25px;
+    }
+
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 15px 20px 0 20px;
+
+    .ion-item-container{
+
+        margin: 15px auto;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 10px;
+      }
+      .ion-item-container-no-border{
+        width: 100%;
+        margin: 0px auto;
+        padding: 0 !important;
+      }
+      .container-div{
+        margin-bottom: 15px;
+      }
+      .ion-item-class-2{
+        margin: 0px auto;
+      }
+      .ion-icon-class{
+        width: 45px;
+        height: 45px;
+        float: left;
+        padding: 10px;
+        font-size: 25px;
+      }
+      ion-select{
+        padding-left: 5px;
+        margin-left: 0;
+      }
+      .ion-input-class{
+
+        height: 45px;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 5px;
+        padding-right: 10px;
+        float: left;
+      }
+      .ion-input-class-no-height{
+        height: auto !important;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        margin-bottom: 15px;
+        overflow: auto;
+      }
+      .list-people{
+
+        float: left;
+      
+      }
+      .add-people{
+        width: 45px;
+        float: right;
+        font-size: 25px;
+        padding: 10px;
+      }
+      .list-people-title{
+        /* font-size: 13px; */
+        color: #797979;
+      }
+      .attach-document{
+        font-size: 15px;
+        color: #0d89d1;
+        margin: 5px 5px 5px 10px;
+        padding: 5px;
+        float: left;
+      }
+      .attach-icon{
+        width: 37px;
+        font-size: 35px;
+        float: left;
+      }
+      .attach-title-item{
+        width: 100%;
+        font-size: 15px;
+        color:#0d89d1;
+      }
+      /* SPAN */
+      .span-left{
+        float: left;
+        font-size: 15x;
+      }
+      .span-right{
+      text-align: right;
+      float: right;
+      font-size: 13px;
+      }
+      .container-footer{
+          margin:0 auto;
+      }
+      .button-cancel {
+          width: 170px;
+          height: 44px;
+          border-radius: 22.5px;
+          --background: #e0e9ee;
+          --color: #061b52;
+          margin:10px;
+        }
+        .button-save {
+          width: 170px;
+          height: 44px;
+          border-radius: 22.5px;
+          --background: #42b9fe;
+          --color:#ffffff;
+          margin:10px;
+        }
+      
+      .text-input{
+        width: 100%;
+        border: 1px solid #ebebeb;
+        margin: 0px 15px 15px 0px;
+        padding: 0 !important;
+        border-radius: 5px;
+      }
+      
+      /* Error Messages */
+      .error{
+        color:red;
+        font-size: 12px;
+        font-weight: bold;
+        padding-bottom: 20px;
+      }
+      .span-color{
+        color:red;
+      }
+
+  }
\ No newline at end of file
diff --git a/src/app/shared/agenda/edit-event/edit-event.component.spec.ts b/src/app/shared/agenda/edit-event/edit-event.component.spec.ts
new file mode 100644
index 000000000..f0db40f8a
--- /dev/null
+++ b/src/app/shared/agenda/edit-event/edit-event.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EditEventComponent } from './edit-event.component';
+
+describe('EditEventComponent', () => {
+  let component: EditEventComponent;
+  let fixture: ComponentFixture<EditEventComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditEventComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditEventComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/agenda/edit-event/edit-event.component.ts b/src/app/shared/agenda/edit-event/edit-event.component.ts
new file mode 100644
index 000000000..0da22289c
--- /dev/null
+++ b/src/app/shared/agenda/edit-event/edit-event.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { EventsService } from 'src/app/services/events.service';
+import { Event } from 'src/app/models/event.model';
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-edit-event',
+  templateUrl: './edit-event.component.html',
+  styleUrls: ['./edit-event.component.scss'],
+})
+export class EditEventComponent implements OnInit {
+
+  stEvent: Event;
+  isRecurring:string;
+  isEventEdited: boolean;
+  loadedEvent: Event;
+  eventBody: EventBody;
+  segment:string = "true";
+  eventAttendees: EventPerson[];
+  minDate: string;
+
+  @Input() profile:string;
+  @Input() selectedSegment: string;
+  @Input() postEvent: any;
+  @Output() clearContact = new EventEmitter<any>();
+
+
+  @Output() openAttendeesComponent = new EventEmitter<any>();
+  @Output() closeComponent = new EventEmitter<any>();
+
+  constructor(
+    private modalController: ModalController,
+    private eventsService: EventsService,
+    public alertController: AlertController,
+  ) { 
+   
+
+  }
+
+  ngOnInit() {
+    let innerHtml :string = this.postEvent.Body.Text;
+    this.postEvent.Body.Text = innerHtml;
+    console.log(this.postEvent);
+    
+    this.isEventEdited = false;
+
+    if(this.postEvent.IsRecurring == false){
+      this.isRecurring = "Não se repete";
+    }
+    else{
+      this.isRecurring = "Repete";
+    }
+  }
+  
+  close(){
+    console.log('!!!!!!!!!!!!!!!!! close')
+    this.closeComponent.emit();
+    this.clearContact.emit();
+  }
+  save(){
+    this.eventsService.editEvent(this.postEvent, 2, 3).subscribe(async () => {
+      const alert = await this.alertController.create({
+        cssClass: 'my-custom-class',
+        header: 'Evento actualizado',
+        buttons: ['OK']
+      });
+      await alert.present();
+    });
+
+
+    this.closeComponent.emit();
+    this.clearContact.emit();
+  }
+
+  async openAttendees()
+  {
+
+    this.openAttendeesComponent.emit();
+    
+    this.clearContact.emit();
+}
+
+}
diff --git a/src/app/shared/agenda/event-list/event-list.component.html b/src/app/shared/agenda/event-list/event-list.component.html
new file mode 100644
index 000000000..4eba898ba
--- /dev/null
+++ b/src/app/shared/agenda/event-list/event-list.component.html
@@ -0,0 +1,68 @@
+<ion-header class="ion-no-border">
+  <div class="header-content">
+    <div class="header-title">
+      <label>Eventos para Aprovação</label>
+    </div>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="profile">
+      <ion-segment-button value="MDGPR">
+        Seu calendário
+      </ion-segment-button>
+      <ion-segment-button value="PR">
+        Presidente da República
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</div>
+</ion-header>
+
+<ion-content>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+     <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="main-content" [ngSwitch]="profile" *ngIf="eventsMDGPRList">
+    <!--  <div class="header-content width-100"> -->
+      
+   <!-- </div> --> 
+     <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
+       <ion-item 
+         class="item ion-no-padding width-100" 
+         *ngFor="let event of eventsMDGPRList" 
+         (click)="openApproveModal(event.serialNumber)">
+         <div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+             <div class="approve-event-time">
+                 <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                 <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+               </div>
+               <div class="approve-event-detail">
+                 <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                 <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                 <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+               </div>
+           </div>
+       </ion-item>
+     </ion-list>
+     <ion-list class="width-100" *ngSwitchCase="'PR'">
+       <div class="width-100" *ngIf="eventsPRList">
+           <ion-item
+             class=" ion-no-padding width-100"
+             *ngFor="let event of eventsPRList"
+             (click)="openApproveModal(event.serialNumber)">
+             <div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+                 <div class="approve-event-time">
+                   <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                   <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                 </div>
+                 <div class="approve-event-detail">
+                   <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                   <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                   <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                 </div>
+               </div>
+             </ion-item>
+       </div>
+     </ion-list>
+   </div>
+</ion-content>
diff --git a/src/app/shared/agenda/event-list/event-list.component.scss b/src/app/shared/agenda/event-list/event-list.component.scss
new file mode 100644
index 000000000..90dbde141
--- /dev/null
+++ b/src/app/shared/agenda/event-list/event-list.component.scss
@@ -0,0 +1,96 @@
+:host{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+}
+.header-content{
+    overflow: auto;
+    margin: 0 auto;
+  }
+  .header-icon-left{
+    font-size: 33px;
+    color: #42b9fe;
+    float: left;
+  }
+  .header-title{
+    font-family: Roboto;
+    font-size: 25px;
+    padding: 0;
+    color:#000;
+    float: left;
+  }
+  .main-content{
+    margin-top: 20px;
+    .item{
+      --inner-padding-end: 0 !important;
+      --inner-padding-top: 10px;
+      --inner-padding-bottom:10px;
+    }
+    .event-pr-Oficial{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #99e47b;
+      overflow: auto;
+    }
+    .event-pr-Pessoal{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #958bfc;
+      overflow: auto;
+    }
+    .event-mdgpr-Oficial{
+      border-radius: 5px;
+      border-right: 5px solid #ffb703;
+      overflow: auto;
+    }
+    .event-mdgpr-Pessoal{
+      border-radius: 5px;
+      border-right: 5px solid #f05d5e;
+      overflow: auto;
+    }
+    .approve-event-time{
+      float: left;
+    }
+    .approve-event-time p{
+      width: 33px;
+      font-family: Roboto;
+      font-size: 13px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: var(--Antartic-grey);
+      margin: 0;
+      padding-bottom: 10px;
+    }
+    .approve-event-detail{
+      float: left;
+      margin-left: 10px;
+    }
+    .approve-event-detail p{
+      //width: 250px;
+      font-family: Roboto;
+      font-size: 13px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: var(--black);
+      margin: 0;
+      padding-bottom: 10px;
+    }
+    .approve-event-detail h3{
+      width: 250px;
+      font-family: Roboto;
+      font-size: 15px;
+      font-weight: bold;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #0d89d1;
+      margin: 0;
+      padding: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/agenda/event-list/event-list.component.spec.ts b/src/app/shared/agenda/event-list/event-list.component.spec.ts
new file mode 100644
index 000000000..e054b909d
--- /dev/null
+++ b/src/app/shared/agenda/event-list/event-list.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventListComponent } from './event-list.component';
+
+describe('EventListComponent', () => {
+  let component: EventListComponent;
+  let fixture: ComponentFixture<EventListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventListComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/agenda/event-list/event-list.component.ts b/src/app/shared/agenda/event-list/event-list.component.ts
new file mode 100644
index 000000000..ba845ab01
--- /dev/null
+++ b/src/app/shared/agenda/event-list/event-list.component.ts
@@ -0,0 +1,97 @@
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { Event } from 'src/app/models/event.model';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { ModalController, NavParams } from '@ionic/angular';
+import { ApproveEventModalPage } from 'src/app/pages/agenda/approve-event-modal/approve-event-modal.page';
+import { NavigationEnd, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-event-list',
+  templateUrl: './event-list.component.html',
+  styleUrls: ['./event-list.component.scss'],
+})
+export class EventListComponent implements OnInit {
+
+  showLoader: boolean;
+  eventsPRList: any;
+  eventsMDGPRList: any;
+  eventPerson: EventPerson;
+  eventBody: EventBody;
+  categories: string[];
+  serialnumber:string;
+
+  @Input() profile:string;
+  @Output() cloneAllmobileComponent = new EventEmitter<any>();
+  @Output() approveEventDismiss = new EventEmitter<any>();
+
+
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    private router: Router,
+    ) { }
+
+    ngOnInit() {
+
+      /* console.log(this.profile); */
+
+      if(this.profile == "mdgpr"){
+        this.profile = 'MDGPR'
+      } else {
+        this.profile = 'PR'
+      }
+
+      this.LoadToApproveEvents();
+  
+      this.router.events.forEach((event) => {
+        if(event instanceof NavigationEnd && event.url == this.router.url) {
+          this.LoadToApproveEvents();
+        }
+      });
+    }
+
+    LoadToApproveEvents(){
+      this.showLoader = true;
+      
+      this.processes.GetToApprovedEvents('PR','false').subscribe(res=>{
+        this.showLoader = false;
+        this.eventsPRList = res;
+      });
+      this.processes.GetToApprovedEvents('MDGPR','false').subscribe(res=>{
+        this.showLoader = false;
+        this.eventsMDGPRList = res;
+      });
+    }
+    async openApproveModal(eventSerialNumber, data){
+
+      let a =this.eventsMDGPRList.filter((elem)=>{
+        console.log(eventSerialNumber," ",elem.serialNumber)
+        return eventSerialNumber == elem.serialNumber
+      });
+
+      console.log(a);
+
+      this.approveEventDismiss.emit({ 
+        "serialNumber": eventSerialNumber,
+        "action": "Aprovar", 
+        "saveData": data
+      });
+
+    }
+    doRefresh(event) {
+      this.LoadToApproveEvents();
+      console.log('refresh');
+      setTimeout(() => {
+         event.target.complete();
+       }, 2000);
+    }
+    close(){
+      console.log('close')
+      this.cloneAllmobileComponent.emit();
+    }
+
+  }
+  
\ No newline at end of file
diff --git a/src/app/shared/agenda/new-event/new-event.component.html b/src/app/shared/agenda/new-event/new-event.component.html
new file mode 100644
index 000000000..ba1953a6c
--- /dev/null
+++ b/src/app/shared/agenda/new-event/new-event.component.html
@@ -0,0 +1,224 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="middle">
+          <ion-label class="title">Novo Evento</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content">
+    <div class="ion-item-container">
+      <ion-input type="text"  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
+    </div>
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-input type="text" placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+        </div>
+      </div>
+      <!-- Error messages -->
+      <!-- <span class="error ion-padding" >
+        Campo obrigatório
+      </span> -->
+  
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select  placeholder="Selecione agenda"
+          selectedText="{{postEvent.CalendarName}}" 
+          [(ngModel)]="postEvent.CalendarName" 
+          interface="action-sheet" Cancel-text="Cancelar" 
+          required>
+            <ion-select-option value="Oficial">Oficial</ion-select-option>
+            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select  placeholder="Selecione tipo" 
+          [(ngModel)]="postEvent.Categories[0]" 
+          interface="action-sheet" 
+          Cancel-text="Cancelar" required>
+            <ion-select-option value="Reunião">Reunião</ion-select-option>
+            <ion-select-option value="Viagem">Viagem</ion-select-option>
+            <ion-select-option value="Conferência">Conferência</ion-select-option>
+            <ion-select-option value="Encontro">Encontro</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+  
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            placeholder="Início"
+            [(ngModel)]="postEvent.StartDate"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+          >
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            placeholder="Fim"
+            [(ngModel)]="postEvent.EndDate"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022" 
+          >
+          </ion-datetime>
+          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-select placeholder="Selecione repetição" value="false" interface="action-sheet" Cancel-text="Cancelar" required>
+            <ion-select-option value="false">Não se repete</ion-select-option>
+            <ion-select-option value="true">Repete</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+        </div>
+        <div  class="ion-input-class-no-height flex-grow-1">
+          
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label *ngIf="eventAttendees.length ==0" class="list-people-title">Adicionar intervenientes</ion-label>
+                <ion-label *ngFor="let participant of eventAttendees">{{participant.Name}}</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+
+          <div class="add-people" (click)="openAttendees()">
+            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div hidden class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1-no-height">
+          <div class="list-people">
+            <ion-item lines="none">
+              <ion-list>
+                <ion-label class="list-people-title">Com conhecimento</ion-label>
+                <ion-label hidden >Text</ion-label>
+              </ion-list>
+            </ion-item>
+          </div>
+          <div class="add-people">
+            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class-no-height flex-grow-1">
+          
+          <ion-textarea  [(ngModel)]="postEvent.Body.Text"  placeholder="Detalhes" ></ion-textarea>
+          
+        </div>
+      </div>
+    </div>
+    
+    <div hidden class="ion-item-container-no-border">
+      <ion-label>
+        <div class="attach-icon">
+          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+        </div>
+        <div class="attach-document">
+          <ion-label>Anexar Documentos</ion-label>
+        </div> 
+      </ion-label>
+    </div>
+    
+    <div hidden>
+      <ion-item>
+        <ion-label>Documentos Anexados</ion-label>
+      </ion-item>
+      <ion-list>
+        <ion-item>
+        <ion-label>
+          <h4 class="attach-title-item">Text</h4>
+          <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div> 
+  </div>    
+</ion-content>
+<ion-footer class="ion-no-border px-20">
+  <ion-toolbar class="d-flex justify-space-between">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-title></ion-title>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/agenda/new-event/new-event.component.scss b/src/app/shared/agenda/new-event/new-event.component.scss
new file mode 100644
index 000000000..9cdd3e022
--- /dev/null
+++ b/src/app/shared/agenda/new-event/new-event.component.scss
@@ -0,0 +1,179 @@
+ion-content{
+  --background:transparent;
+}
+.header-toolbar{
+ --background:transparent;
+ --opacity: 1;
+}
+.main-header{
+  width: 100%; /* 400px */
+  height: 100%;
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:hidden;
+  padding: 30px 20px 0px 20px;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+  
+  .title-content{
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+    background: #fff;
+     .middle{
+      padding: 0!important;
+      float: left;
+      width: 221px;
+      margin: 2.5px 0 0 5px;
+    }
+  }
+
+  .title{
+    font-size: 25px;
+  }
+
+}
+.main-content{
+  width: 100%; /* 400px */
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  overflow:auto;
+  padding: 15px 20px 0 20px;
+
+  .ion-item-container{
+      margin: 15px auto;
+      border: 1px solid #ebebeb;
+      border-radius: 5px;
+      padding-left: 10px;
+    }
+    .ion-item-container-no-border{
+      width: 100%;
+      margin: 0px auto;
+      padding: 0 !important;
+      overflow: auto;
+    }
+    .container-div{
+      margin-bottom: 15px;
+    }
+    .ion-item-class-2{
+      margin: 0px auto;
+    }
+    .ion-icon-class{
+      width: 45px;
+      height: 45px;
+      float: left;
+      padding: 10px;
+      font-size: 25px;
+    }
+    ion-select{
+      padding-left: 5px;
+      margin-left: 0;
+    }
+    .ion-input-class{
+      height: 45px;
+      border: 1px solid #ebebeb;
+      border-radius: 5px;
+      padding-left: 5px;
+      padding-right: 10px;
+      float: left;
+    }
+    .ion-input-class-no-height{
+      border: 1px solid #ebebeb;
+      border-radius: 5px;
+      overflow: auto;
+    }
+    .list-people{
+      width: 256px;
+      float: left;
+    
+    }
+    .add-people{
+      width: 45px;
+      float: right;
+      overflow: auto;
+      font-size: 25px;
+      padding: 10px;
+    }
+    .list-people-title{
+      /* font-size: 13px; */
+      color: #797979;
+    }
+    .attach-document{
+      font-size: 15px;
+      color: #0d89d1;
+      margin: 5px 5px 5px 10px;
+      padding: 5px;
+      float: left;
+    }
+    .attach-icon{
+      width: 37px;
+      font-size: 35px;
+      float: left;
+    }
+    .attach-title-item{
+      width: 100%;
+      font-size: 15px;
+      color:#0d89d1;
+    }
+    /* SPAN */
+    .span-left{
+      float: left;
+      font-size: 15x;
+    }
+    .span-right{
+    text-align: right;
+    float: right;
+    font-size: 13px;
+    }
+    .container-footer{
+        margin:0 auto;
+        overflow: auto;
+    }
+    .button-cancel {
+        width: 170px;
+        height: 44px;
+        border-radius: 22.5px;
+        --background: #e0e9ee;
+        --color: #061b52;
+        margin:10px;
+      }
+      .button-save {
+        width: 170px;
+        height: 44px;
+        border-radius: 22.5px;
+        --background: #42b9fe;
+        --color:#ffffff;
+        margin:10px;
+      }
+    
+    .text-input{
+      width: 100%;
+      border: 1px solid #ebebeb;
+      margin: 0px 15px 15px 0px;
+      padding: 0 !important;
+      border-radius: 5px;
+    }
+    
+    /* Error Messages */
+    .error{
+      color:red;
+      font-size: 12px;
+      font-weight: bold;
+      padding-bottom: 20px;
+    }
+    .span-color{
+      color:red;
+    }
+
+}
+
+
+.container-div{
+  ion-textarea{
+    height: 81px;
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/calendar/calendar.component.spec.ts b/src/app/shared/agenda/new-event/new-event.component.spec.ts
similarity index 59%
rename from src/app/components/calendar/calendar.component.spec.ts
rename to src/app/shared/agenda/new-event/new-event.component.spec.ts
index de2551126..2930af086 100644
--- a/src/app/components/calendar/calendar.component.spec.ts
+++ b/src/app/shared/agenda/new-event/new-event.component.spec.ts
@@ -1,19 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 
-import { CalendarComponent } from './calendar.component';
+import { NewEventPage } from './new-event.component';
 
-describe('CalendarComponent', () => {
-  let component: CalendarComponent;
-  let fixture: ComponentFixture<CalendarComponent>;
+describe('NewEventPage', () => {
+  let component: NewEventPage;
+  let fixture: ComponentFixture<NewEventPage>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CalendarComponent ],
+      declarations: [ NewEventPage ],
       imports: [IonicModule.forRoot()]
     }).compileComponents();
 
-    fixture = TestBed.createComponent(CalendarComponent);
+    fixture = TestBed.createComponent(NewEventPage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   }));
diff --git a/src/app/shared/agenda/new-event/new-event.component.ts b/src/app/shared/agenda/new-event/new-event.component.ts
new file mode 100644
index 000000000..aa44eb056
--- /dev/null
+++ b/src/app/shared/agenda/new-event/new-event.component.ts
@@ -0,0 +1,164 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { EventsService } from 'src/app/services/events.service';
+import { Event } from 'src/app/models/event.model';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-new-event',
+  templateUrl: './new-event.component.html',
+  styleUrls: ['./new-event.component.scss'],
+})
+
+export class NewEventPage implements OnInit {
+
+  postEvent: Event;
+  eventBody: EventBody;
+  segment:string = "true";
+  
+  @Input() profile:string;
+  @Input() selectedSegment: string;
+  @Input() selectedDate: Date;
+  @Input() eventAttendees: EventPerson[];
+
+  @Output() onAddEvent = new EventEmitter<any>();
+  @Output() openAttendeesComponent = new EventEmitter<any>();
+  @Output() clearContact = new EventEmitter<any>();
+  @Output() GoBackEditOrAdd  = new EventEmitter<any>();
+  @Output() cloneAllmobileComponent = new EventEmitter<any>();
+
+  minDate: string;
+
+  constructor(
+    private modalController: ModalController,
+    private eventService: EventsService, 
+  ) {}
+
+  ngOnInit() {
+
+    if(!this.restoreTemporaryData()){
+
+      this.postEvent = new Event();
+      this.eventBody = { BodyType : "1", Text : ""};
+      this.postEvent.Body = this.eventBody;  
+
+     /*  console.log(this.profile); */
+  
+      let selectedStartdDate = this.selectedDate;
+      let selectedEndDate = new Date(this.selectedDate);
+      /* Set + 30minutes to seleted datetime */
+      selectedEndDate.setMinutes(this.selectedDate.getMinutes() + 30) ;    
+      this.minDate = this.selectedDate.toString();
+      
+      if(this.selectedSegment != "Combinada"){
+        this.postEvent ={
+          EventId: '',
+          Subject: '',
+          Body: this.eventBody,
+          Location: '',
+          CalendarId: '',
+          CalendarName: this.selectedSegment,
+          StartDate: selectedStartdDate,
+          EndDate: new Date(selectedEndDate),
+          EventType: 'Reunião',
+          Attendees: null,
+          IsMeeting: false,
+          IsRecurring: false,
+          AppointmentState: 0,
+          TimeZone: '',
+          Organizer: '',
+          Categories: ['Reunião'],
+          HasAttachments: false,
+        };
+      }
+      else{
+        this.postEvent ={
+          EventId: '',
+          Subject: '',
+          Body: this.eventBody,
+          Location: '',
+          CalendarId: '',
+          CalendarName: 'Oficial',
+          StartDate: selectedStartdDate,
+          EndDate: new Date(selectedEndDate),
+          EventType: 'Reunião',
+          Attendees: null,
+          IsMeeting: false,
+          IsRecurring: false,
+          AppointmentState: 0,
+          TimeZone: '',
+          Organizer: '',
+          Categories: ['Reunião'],
+          HasAttachments: false,
+        };
+      }
+
+      
+    }
+
+  }
+
+  close(){
+
+    this.deleteTemporaryData();
+
+    this.cloneAllmobileComponent.emit();
+    this.clearContact.emit();
+  }
+
+  save(){
+    
+    this.postEvent.Attendees = this.eventAttendees;
+    
+    if(this.profile=='mdgpr'){
+      this.eventService.postEventMd(this.postEvent, this.postEvent.CalendarName).subscribe();
+    }
+    else if(this.profile=='pr'){
+      this.eventService.postEventPr(this.postEvent, this.postEvent.CalendarName).subscribe();
+    }
+    
+    this.deleteTemporaryData();
+
+    this.onAddEvent.emit(this.postEvent);
+    this.GoBackEditOrAdd.emit();
+  }
+
+  async openAttendees(){
+
+    this.saveTemporaryData();
+    this.openAttendeesComponent.emit();
+  }
+
+  saveTemporaryData(){
+    
+    window['temp.path:/home/agenda/new-event.component.ts'] = {
+      postEvent: this.postEvent,
+      eventBody: this.eventBody,
+      segment: this.segment
+    }
+  }
+
+
+  restoreTemporaryData(): boolean{
+    
+    const restoredData =  window['temp.path:/home/agenda/new-event.component.ts']
+
+    if(JSON.stringify(restoredData) != "{}" && undefined != restoredData){
+      console.log('restore1111', restoredData)
+      this.postEvent = restoredData.postEvent
+      this.eventBody = restoredData.eventBody
+      this.segment = restoredData.segment
+
+      return true;
+    } else {
+      return false;
+    }
+    
+  }
+
+  deleteTemporaryData(){
+    window['temp.path:/home/agenda/new-event.component.ts'] = {}
+  }
+
+}
diff --git a/src/app/shared/agenda/view-event/view-event-routing.module.ts b/src/app/shared/agenda/view-event/view-event-routing.module.ts
new file mode 100644
index 000000000..37a7a0172
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewEventPage } from './view-event.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ViewEventPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewEventPageRoutingModule {}
diff --git a/src/app/shared/agenda/view-event/view-event.module.ts b/src/app/shared/agenda/view-event/view-event.module.ts
new file mode 100644
index 000000000..b2e97a22b
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewEventPageRoutingModule } from './view-event-routing.module';
+
+import { ViewEventPage } from './view-event.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    ViewEventPageRoutingModule
+  ],
+  declarations: [ViewEventPage]
+})
+export class ViewEventPageModule {}
diff --git a/src/app/shared/agenda/view-event/view-event.page.html b/src/app/shared/agenda/view-event/view-event.page.html
new file mode 100644
index 000000000..4790b191d
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event.page.html
@@ -0,0 +1,68 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header px-20">
+      <div class="title-content d-flex"  >
+        <div class="left">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="middle flex-grow-1">
+          <ion-label class="title">{{loadedEvent.Subject}}</ion-label>
+        </div>
+        <div class="div-icon">
+          <ion-icon class="edit" (click)="editEvent()" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
+          <ion-icon class="delete" (click)="deleteEvent()" name="trash-sharp"></ion-icon> 
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content">
+    <div class="upper-content">
+      <div class="content-location">
+        <p><span class="date">{{loadedEvent.Location}}</span><span class="label">{{loadedEvent.CalendarName}}</span></p>
+      </div>
+      <div class="content-details">
+        <ion-label>
+          <p>{{customDate}}</p>
+          <p>das {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
+          <p *ngIf="!loadedEvent.IsRecurring">(Não se repete)</p>
+          <p *ngIf="loadedEvent.IsRecurring">Repete</p>
+        </ion-label>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="middle-content">
+      <div *ngIf="loadedEvent.Attendees">
+        <h5>Intervenientes</h5>
+        <ion-item class="ion-no-margin ion-no-padding">
+          <ion-label>
+            <div *ngFor="let attendee of loadedEvent.Attendees">
+              <p>{{attendee.Name}}</p>
+            </div>
+          </ion-label>
+        </ion-item>
+      </div>
+      <h5>Detalhes</h5>
+      <ion-item lines="none" class="ion-no-margin ion-no-padding">
+          <ion-textarea [innerHTML]="loadedEvent.Body.Text"></ion-textarea>
+      </ion-item>
+    </div>
+    <div class="line"></div>
+  
+    <div *ngIf="loadedAttachments" class="bottom-content">
+      <ion-list>
+        <h3>Documentos Anexados</h3>
+        <ion-item lines="none" class="ion-no-margin ion-no-padding">
+        <ion-label *ngFor="let attach of loadedAttachments"
+        (click)="viewDocument()">
+          <p class="attach-title-item">{{attach.SourceName}}</p>
+          <p><span class="span-left">{{attach.Stakeholders}}</span><span class="span-right">{{ attach.CreateDate | date: 'dd-MM-yy' }}</span></p>
+        </ion-label>
+      </ion-item>
+      </ion-list>
+    </div>
+    <!-- <div class="line"></div> -->
+  </div>    
+</ion-content>
\ No newline at end of file
diff --git a/src/app/shared/agenda/view-event/view-event.page.scss b/src/app/shared/agenda/view-event/view-event.page.scss
new file mode 100644
index 000000000..316f0026a
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event.page.scss
@@ -0,0 +1,171 @@
+ion-content{
+    --background:transparent;
+    --padding-top:0px;
+    --padding-start: 20px;
+    --padding-end: 20px;
+    font-size: 18px;
+}
+ion-menu{
+    --height: 225px;
+  }
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+}
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 0px 0px 0px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+    
+    .title-content{
+      margin: 0px auto;
+      padding: 0 !important;
+      background: #fff;
+
+      .left{
+        width: 37px;
+        float: left;
+        font-size: 35px;
+        overflow: hidden;
+      }
+      .middle{
+          width: 230px;
+          padding: 0!important;
+          float: left;
+          margin: 2.5px 0 0 0;
+        }
+      .header-icon-right{
+        width: 45px;
+        font-size: 45px;
+        float: right;
+        overflow: auto;
+      }
+      .div-icon{
+        width: 92px;
+        float: right;
+        overflow: auto;
+        padding: 1px;
+      }
+      .div-icon .edit{
+        font-size: 35px;
+        float: left;
+      }
+      .div-icon .delete{
+        padding: 7px;
+        font-size: 21px;
+        color:#fff;
+        background: #d30606;
+        border-radius: 20px;
+        margin-left: 10px;
+      }
+    }
+
+    .title{
+      font-size: 25px;
+    }
+
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    padding: 15px 0px 0 0px;
+
+    .upper-content{
+        margin-left: 50px;
+        font-size: 18px;
+      
+        .content-location{
+          width: 100%;
+          margin: 0 auto;
+          padding: 0;
+          overflow: auto;
+
+          .date{
+            float: left;
+          }
+          
+          .label{
+            border-radius: 20px;
+            background: #ffb703;
+            float: right !important;
+            padding: 5px 13.5px 5px 13.5px;
+            color: #fff;
+        }
+        }
+      
+        .location-detail{
+          font-weight: 700;
+          font-size: 18px;
+          float: left;
+          margin: 5px 5px 5px 0px;
+        }
+        
+        .button-calendar-type ion-button{
+          height: 25px;
+        }
+        .button-edit-event {
+            width: 140px;
+            height: 44px;
+            border-radius: 22.5px;
+            --background: #e0e9ee;
+            --color:#061b52;
+        }
+        .content-details p{
+            font-size: 16px;
+        }
+      }
+      .line{
+        margin-top: 15px;
+        border-top: 1px solid #d8d8d8;
+      }
+      .middle-conten{
+        .middle-content h3, .middle-content p{
+          font-size: 16px;
+        }
+      }
+      
+      .bottom-content{
+        margin: 0 auto;
+        
+        .bottom-content h3{
+          font-size: 16px;
+          margin: 0 0 0 10px;
+        }
+        .attach-document{
+          font-size: 15px;
+          color: #0d89d1;
+          margin: 5px 5px 5px 10px;
+          padding: 5px;
+          float: left;
+        }
+        .attach-icon{
+          width: 37px;
+          font-size: 35px;
+          float: left;
+        }
+        .attach-title-item{
+          width: 100%;
+          font-size: 15px;
+          color:#0d89d1;
+        }
+        /* SPAN */
+        .span-left{
+          float: left;
+          font-size: 15x;
+        }
+        .span-right{
+        text-align: right;
+        float: right;
+        font-size: 13px;
+        }
+    }
+  }
\ No newline at end of file
diff --git a/src/app/shared/agenda/view-event/view-event.page.spec.ts b/src/app/shared/agenda/view-event/view-event.page.spec.ts
new file mode 100644
index 000000000..d13628ede
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ViewEventPage } from './view-event.page';
+
+describe('ViewEventPage', () => {
+  let component: ViewEventPage;
+  let fixture: ComponentFixture<ViewEventPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewEventPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewEventPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/agenda/view-event/view-event.page.ts b/src/app/shared/agenda/view-event/view-event.page.ts
new file mode 100644
index 000000000..c742ad4c1
--- /dev/null
+++ b/src/app/shared/agenda/view-event/view-event.page.ts
@@ -0,0 +1,118 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AlertController, ModalController, NavParams } from '@ionic/angular';
+import { Attachment } from 'src/app/models/attachment.model';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { EventsService } from 'src/app/services/events.service';
+import { Event } from 'src/app/models/event.model';
+import { EditEventPage } from 'src/app/pages/agenda/edit-event/edit-event.page';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+
+@Component({
+  selector: 'app-view-event',
+  templateUrl: './view-event.page.html',
+  styleUrls: ['./view-event.page.scss'],
+})
+export class ViewEventPage implements OnInit {
+
+  loadedEvent: Event;
+  isEventEdited: boolean;
+  eventBody: EventBody;
+  loadedAttachments:any;
+  loadedEventAttachments: Attachment[];
+  pageId: string;
+  showLoader: boolean;
+
+  minDate: Date;
+
+  customDate:any;
+  today:any;
+  
+  months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+  days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+  
+  @Input() profile:string;
+  @Input() eventId: string;
+
+  @Output() viewEventDetailDismiss = new EventEmitter<any>();
+
+
+  constructor(
+    private eventsService: EventsService,
+    private attachmentsService: AttachmentsService,
+    public alertController: AlertController,
+    private iab: InAppBrowser,
+  ) 
+  {
+    this.isEventEdited = false;
+    this.loadedEvent = new Event();
+    this.eventBody = { BodyType : "1", Text : ""};
+    this.loadedEvent.Body = this.eventBody;
+  }
+
+  ngOnInit() {
+    /* console.log(this.eventId); */
+    this.loadEvent();
+    this.getAttachments();
+    
+  }
+  
+  ngOnChanges(changes: any): void {
+    this.loadEvent();
+    this.getAttachments();
+  }
+
+  close(){
+    console.log(this.isEventEdited);
+    
+    this.viewEventDetailDismiss.emit({
+      type: 'close'
+    })
+  }
+
+  loadEvent(){
+    this.eventsService.getEvent(this.eventId).subscribe(res => {
+      this.loadedEvent = res;
+
+      console.log(res);
+      
+      this.today = new Date(res.StartDate);
+      console.log(new Date(this.today));
+      this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
+    });
+  }
+  deleteEvent(){
+    this.eventsService.deleteEvent(this.loadedEvent.EventId, 0).subscribe(async () => 
+      {
+        const alert = await this.alertController.create({
+          cssClass: 'my-custom-class',
+          header: 'Evento removido',
+          buttons: ['OK']
+        });
+    
+        await alert.present();
+        this.close();
+      });  
+  }
+
+  getAttachments(){
+    this.attachmentsService.getAttachmentsById(this.eventId).subscribe(res=>{
+      this.loadedAttachments = res;
+      console.log(res);
+    });
+  }
+
+  async editEvent() {
+
+    this.viewEventDetailDismiss.emit({
+      type: 'edit',
+      event: this.loadedEvent
+    })
+  }
+  viewDocument(){
+    const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_blank");
+    browser.show();
+  }
+
+}
diff --git a/src/app/shared/btn-seguinte/btn-seguinte.page.html b/src/app/shared/btn-seguinte/btn-seguinte.page.html
index 2ecf0814d..526d8f40c 100644
--- a/src/app/shared/btn-seguinte/btn-seguinte.page.html
+++ b/src/app/shared/btn-seguinte/btn-seguinte.page.html
@@ -1,3 +1,3 @@
 <div class="right">
   <ion-label>Seguinte</ion-label>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/btn-seguinte/btn-seguinte.page.scss b/src/app/shared/btn-seguinte/btn-seguinte.page.scss
index fef7141e5..bc35e6d03 100644
--- a/src/app/shared/btn-seguinte/btn-seguinte.page.scss
+++ b/src/app/shared/btn-seguinte/btn-seguinte.page.scss
@@ -1,7 +1,7 @@
 .right{
-    padding: 0!important;
-    float: right;
-    font-size: 15px;
-    color: #0782c9;
-    margin: 8px 0 0 5px;
-  }
\ No newline at end of file
+  padding: 0!important;
+  float: right;
+  font-size: 15px;
+  color: #0782c9;
+  margin: 8px 0 0 5px;
+}
\ No newline at end of file
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar-routing.module.ts b/src/app/shared/buttons/btn-adicionar/btn-adicionar-routing.module.ts
new file mode 100644
index 000000000..b6f074394
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BtnAdicionarPage } from './btn-adicionar.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BtnAdicionarPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BtnAdicionarPageRoutingModule {}
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar.module.ts b/src/app/shared/buttons/btn-adicionar/btn-adicionar.module.ts
new file mode 100644
index 000000000..42e7d2a67
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BtnAdicionarPageRoutingModule } from './btn-adicionar-routing.module';
+
+import { BtnAdicionarPage } from './btn-adicionar.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BtnAdicionarPageRoutingModule
+  ],
+  declarations: [BtnAdicionarPage]
+})
+export class BtnAdicionarPageModule {}
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.html b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.html
new file mode 100644
index 000000000..e53e30f5d
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.html
@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Adicionar</ion-label>
+</div>
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.scss b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.scss
new file mode 100644
index 000000000..b7b93819b
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.scss
@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }
\ No newline at end of file
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.spec.ts b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.spec.ts
new file mode 100644
index 000000000..43026a2ac
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnAdicionarPage } from './btn-adicionar.page';
+
+describe('BtnAdicionarPage', () => {
+  let component: BtnAdicionarPage;
+  let fixture: ComponentFixture<BtnAdicionarPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnAdicionarPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnAdicionarPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.ts b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.ts
new file mode 100644
index 000000000..55d0d768f
--- /dev/null
+++ b/src/app/shared/buttons/btn-adicionar/btn-adicionar.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-adicionar',
+  templateUrl: './btn-adicionar.page.html',
+  styleUrls: ['./btn-adicionar.page.scss'],
+})
+export class BtnAdicionarPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/buttons/btn-criar/btn-criar-routing.module.ts b/src/app/shared/buttons/btn-criar/btn-criar-routing.module.ts
new file mode 100644
index 000000000..83df1196f
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BtnCriarPage } from './btn-criar.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: BtnCriarPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BtnCriarPageRoutingModule {}
diff --git a/src/app/shared/buttons/btn-criar/btn-criar.module.ts b/src/app/shared/buttons/btn-criar/btn-criar.module.ts
new file mode 100644
index 000000000..311f914d5
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { BtnCriarPageRoutingModule } from './btn-criar-routing.module';
+
+import { BtnCriarPage } from './btn-criar.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    BtnCriarPageRoutingModule
+  ],
+  declarations: [BtnCriarPage]
+})
+export class BtnCriarPageModule {}
diff --git a/src/app/shared/buttons/btn-criar/btn-criar.page.html b/src/app/shared/buttons/btn-criar/btn-criar.page.html
new file mode 100644
index 000000000..cf6ccee57
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar.page.html
@@ -0,0 +1,3 @@
+<div class="right">
+  <ion-label>Criar grupo</ion-label>
+</div>
diff --git a/src/app/shared/buttons/btn-criar/btn-criar.page.scss b/src/app/shared/buttons/btn-criar/btn-criar.page.scss
new file mode 100644
index 000000000..b7b93819b
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar.page.scss
@@ -0,0 +1,7 @@
+.right{
+    padding: 0!important;
+    float: right;
+    font-size: 15px;
+    color: #0782c9;
+    margin: 8px 5px 0 5px;
+  }
\ No newline at end of file
diff --git a/src/app/shared/buttons/btn-criar/btn-criar.page.spec.ts b/src/app/shared/buttons/btn-criar/btn-criar.page.spec.ts
new file mode 100644
index 000000000..ce36f9653
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnCriarPage } from './btn-criar.page';
+
+describe('BtnCriarPage', () => {
+  let component: BtnCriarPage;
+  let fixture: ComponentFixture<BtnCriarPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnCriarPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnCriarPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/buttons/btn-criar/btn-criar.page.ts b/src/app/shared/buttons/btn-criar/btn-criar.page.ts
new file mode 100644
index 000000000..6afea0c23
--- /dev/null
+++ b/src/app/shared/buttons/btn-criar/btn-criar.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-criar',
+  templateUrl: './btn-criar.page.html',
+  styleUrls: ['./btn-criar.page.scss'],
+})
+export class BtnCriarPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/chat/empty-chat/empty-chat-routing.module.ts b/src/app/shared/chat/empty-chat/empty-chat-routing.module.ts
new file mode 100644
index 000000000..f35c9faa0
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EmptyChatPage } from './empty-chat.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmptyChatPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EmptyChatPageRoutingModule {}
diff --git a/src/app/shared/chat/empty-chat/empty-chat.module.ts b/src/app/shared/chat/empty-chat/empty-chat.module.ts
new file mode 100644
index 000000000..bf6038f1c
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EmptyChatPageRoutingModule } from './empty-chat-routing.module';
+
+import { EmptyChatPage } from './empty-chat.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EmptyChatPageRoutingModule
+  ],
+  declarations: [EmptyChatPage]
+})
+export class EmptyChatPageModule {}
diff --git a/src/app/shared/chat/empty-chat/empty-chat.page.html b/src/app/shared/chat/empty-chat/empty-chat.page.html
new file mode 100644
index 000000000..1d2bf5d00
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat.page.html
@@ -0,0 +1,5 @@
+<ion-content>
+  <div class="center height-100">
+    <p>{{texto}}</p>
+  </div>
+</ion-content>
diff --git a/src/app/shared/chat/empty-chat/empty-chat.page.scss b/src/app/shared/chat/empty-chat/empty-chat.page.scss
new file mode 100644
index 000000000..6483b8c01
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat.page.scss
@@ -0,0 +1,5 @@
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
\ No newline at end of file
diff --git a/src/app/shared/chat/empty-chat/empty-chat.page.spec.ts b/src/app/shared/chat/empty-chat/empty-chat.page.spec.ts
new file mode 100644
index 000000000..361635c9e
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EmptyChatPage } from './empty-chat.page';
+
+describe('EmptyChatPage', () => {
+  let component: EmptyChatPage;
+  let fixture: ComponentFixture<EmptyChatPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmptyChatPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EmptyChatPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/empty-chat/empty-chat.page.ts b/src/app/shared/chat/empty-chat/empty-chat.page.ts
new file mode 100644
index 000000000..c22d2189c
--- /dev/null
+++ b/src/app/shared/chat/empty-chat/empty-chat.page.ts
@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-chat',
+  templateUrl: './empty-chat.page.html',
+  styleUrls: ['./empty-chat.page.scss'],
+})
+export class EmptyChatPage implements OnInit {
+  @Input() texto:string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts
new file mode 100644
index 000000000..c998741ed
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupContactsPageRoutingModule {}
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts
new file mode 100644
index 000000000..1828ecb73
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
+
+import { GroupContactsPage } from './group-contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { PipesModule } from 'src/app/pipes/pipes.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    PipesModule,
+    GroupContactsPageRoutingModule
+  ],
+  declarations: [GroupContactsPage]
+})
+export class GroupContactsPageModule {}
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
new file mode 100644
index 000000000..c0f241913
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.html
@@ -0,0 +1,56 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header width-100">
+      <div class="title-content width-100">
+        <div class="back-icon">
+          <ion-icon (click)="openGroupMessagesPage()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Contactos</ion-label>
+        </div>
+        <app-btn-adicionar (click)="updateGroup()"></app-btn-adicionar>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="width-100">
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+    
+  <div class="main-content width-100">
+    <div class="members" *ngIf="members">
+      <ion-label class="members-label">Contactos selecção:</ion-label>
+      <ion-list class="members-list" *ngFor="let user of members">
+        <div class="members-checkbox">
+          <ion-checkbox checked color="primary"></ion-checkbox>
+          <p>{{user.name}}</p>
+          <ion-icon  class="{{user.status}}" name="ellipse"></ion-icon>
+        </div>
+      </ion-list>
+    </div>
+
+    <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div *virtualItem="let user" class="item-checkbox">
+        <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
+        <ion-label>{{user.name}}</ion-label>
+        <div class="icon"><ion-icon class="{{user.status}}" name="ellipse"></ion-icon></div>
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
new file mode 100644
index 000000000..b681605ce
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.scss
@@ -0,0 +1,154 @@
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .main-header{
+     height: 100%;
+     font-family: Roboto;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+     
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: 35px;
+       overflow: auto;
+         
+       }
+     .div-title{
+         width: 221px;
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: 25px;
+     }
+   }
+ }
+ .toolbar-search{
+   --padding-top:0 !important;
+   --padding-bottom:0 !important;
+   --padding-start:0 !important;
+   --padding-end:0 !important;
+   
+   .search{
+     border: 1px solid #ebebeb;
+     margin: 5px 20px 5px 20px;
+     border-radius: 5px;
+   }
+   .search ion-searchbar{
+     width: 100%;
+     margin: 0 !important;
+     padding: 0 !important;
+     --border-radius: 5px;
+     --box-shadow: none;
+     overflow: hidden;
+     --icon-color:#0d89d1;
+   }
+ }
+
+ ion-content{
+   --background:transparent;
+ }
+
+ .main-content{
+   //width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   padding: 0 0 0 0;
+   overflow:auto;
+
+   .members{
+     padding: 15px 20px 0 20px !important;
+
+     .members-list{
+      margin: 0 !important;
+      padding: 0 !important;
+     }
+   }
+
+    .members-label{
+      //margin: 10px 20px 10px 20px !important;
+      /* font-size: 15px; */
+      font-weight: bold;
+    }
+
+    .members-checkbox{
+      display: flex;
+      //margin: 0px 20px 0px 20px !important;
+      overflow: auto;
+      align-items: center;
+
+    }
+    
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
+  
+    }
+ 
+     .item-checkbox{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+     }
+ 
+     .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
+         --border-color: #0d89d1;
+         --background-checked:#0d89d1;
+         float: left;
+     }
+ 
+     .item-checkbox ion-label, .members-checkbox p{
+         padding-left: 10px;
+         font-size: 15px;
+         color: #0d89d1;
+         float: left;
+         flex-grow: 1;
+     }
+     .icon, .members-checkbox ion-icon{
+       font-size: 10px;
+     }
+     .online{
+      color:#99e47b !important;
+    }
+   .offline{
+     color:#cbced1 !important;
+    }
+   .away{
+    color:#ffd21f !important;
+    }
+    .invisible{
+      color:#cbced1 !important;
+    }
+    .busy{
+      color:#f5455c !important;
+    }
+   }
+ 
+ 
\ No newline at end of file
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts
new file mode 100644
index 000000000..dde2043a8
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+describe('GroupContactsPage', () => {
+  let component: GroupContactsPage;
+  let fixture: ComponentFixture<GroupContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
new file mode 100644
index 000000000..3b6091d09
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-contacts/group-contacts.page.ts
@@ -0,0 +1,282 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import * as _ from 'lodash';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { NewGroupPage } from '../../new-group/new-group.page';
+import { GroupMessagesPage } from '../group-messages.page';
+
+@Component({
+  selector: 'app-group-contacts',
+  templateUrl: './group-contacts.page.html',
+  styleUrls: ['./group-contacts.page.scss'],
+})
+export class GroupContactsPage implements OnInit {
+  showLoader: boolean;
+  loggedUser: any;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+  listContacts: any[];
+  contacts: any;
+  textSearch:string;
+  room:any;
+  members:any;
+  dm:any;
+  isGroupCreated:boolean;
+  groupName:string;
+  selectedUserList:any;
+
+  @Input() roomId:string;
+  @Output() openGroupMessage:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+    private chatService: ChatService,
+    private authService: AuthService,
+    //private navParams: NavParams,
+  ) 
+  {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    });     
+    this.textSearch="";
+    this.dm=null;
+    this.room=null;
+    /* this.isGroupCreated = this.navParams.get('isCreated');
+    this.groupName = this.navParams.get('name');
+    this.room = this.navParams.get('room');
+    this.members = this.navParams.get('members'); */
+  }
+
+  ngOnInit() {
+    //this.getRoomInfo();
+    //this.loadUsers();
+    console.log(this.roomId);
+    this.getChatInfo(); 
+    //console.log(this.isGroupCreated);
+  }
+
+  getChatInfo(){
+    console.log('HERE');
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      console.log('HERE 2');
+      console.log(room['room']);
+      this.getGroupContacts(room['room']);
+    });
+  }
+
+  getGroupContacts(room:any){
+    this.showLoader = true;
+    if(room.t === 'p'){
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+        this.members = res['members'];
+        this.loadUsers1(this.members);
+        this.showLoader = false;
+      });
+    }
+    else{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+        this.members = res['members'];
+        this.loadUsers1(this.members);
+        this.showLoader = false;
+      });
+    }
+  }
+
+  updateGroup(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.addContacts(this.room);
+      this.showLoader = false;
+      this.openGroupMessage.emit(this.room._id);
+    });
+  }
+  openGroupMessagesPage(){
+    this.showLoader = true;
+    this.openGroupMessage.emit(this.roomId)
+    this.showLoader = false;
+  }
+
+  loadUsers1(members:any){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+
+
+
+      if(members){
+        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
+      }
+      else{
+        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      }
+      
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(this.users);
+      
+      this.showLoader = false;
+    });
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+
+
+
+      if(this.members){
+        this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
+      }
+      else{
+        this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      }
+      
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(this.users);
+      
+      this.showLoader = false;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    if(recordIndex == 0){
+      return record.name[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name[0];
+    let first_current = record.name[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+
+  }
+
+  async close(){
+    this.modalController.dismiss();
+    if(this.isGroupCreated){
+      console.log('go to conversa'); 
+    }
+    else{
+      this.modalController.dismiss();
+      console.log('go to new group page');
+      const modal = await this.modalController.create({
+        component: NewGroupPage,
+        componentProps: {
+          name:this.groupName,
+          duration:'',
+        },
+        cssClass: 'new-group',
+        backdropDismiss: false,
+      });
+      await modal.present();
+
+    }
+
+  }
+  onChange(event){
+    this.textSearch = event.detail.value;
+  }
+
+  clicked(){
+    console.log('clicked');
+  }
+
+  selectedContact(user:any){
+  /*   this.groupName = this.room.name; */
+    user.isChecked = !user.isChecked;
+  }
+
+  addContacts(room:any){
+    console.log(room);
+    this.selectedUserList = this.users.filter(function(contact) {
+      return contact.isChecked == true;
+    });
+    console.log( this.selectedUserList);
+    this.selectedUserList.forEach(user=>{
+      let body ={
+        "roomId":room._id,
+        "userId":user._id,
+      }
+      this.chatService.addUserToGroup(body).subscribe(res=>{
+        console.log(res['success']);
+      }); 
+    });
+  }
+
+  /* createGroup(){
+    console.log(this.groupName);
+    if(!this.isGroupCreated){
+      let body = { "name":this.groupName, }
+      this.chatService.addGroup(body).subscribe(res=>{
+        console.log('group created');
+        console.log(res['group']);
+        this.addContacts(res['group']);
+        this.openGroupMessages(res['group']);
+        
+      });
+      
+    }
+    else{
+      this.addContacts(this.room);
+      this.close(); 
+    } 
+  } */
+
+  async newGroup(){
+    this.close();
+    const modal = await this.modalController.create({
+      component: NewGroupPage,
+      cssClass: 'new-group',
+      backdropDismiss: false,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async openGroupMessages(room:any){
+    this.close();
+    const modal = await this.modalController.create({
+      component: GroupMessagesPage,
+      componentProps: {
+        room: room,
+      }, 
+      cssClass: 'group-messages',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+}
diff --git a/src/app/shared/chat/group-messages/group-messages-routing.module.ts b/src/app/shared/chat/group-messages/group-messages-routing.module.ts
new file mode 100644
index 000000000..708ec8d8f
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupMessagesPage } from './group-messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupMessagesPage
+  },
  {
+    path: 'group-contacts',
+    loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupMessagesPageRoutingModule {}
diff --git a/src/app/shared/chat/group-messages/group-messages.module.ts b/src/app/shared/chat/group-messages/group-messages.module.ts
new file mode 100644
index 000000000..204590b92
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupMessagesPageRoutingModule } from './group-messages-routing.module';
+
+import { GroupMessagesPage } from './group-messages.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { PopoverModule } from 'src/app/shared/popover/chat-popover/popover.modules';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    PopoverModule,
+    GroupMessagesPageRoutingModule
+  ],
+  declarations: [GroupMessagesPage]
+})
+export class GroupMessagesPageModule {}
diff --git a/src/app/shared/chat/group-messages/group-messages.page.html b/src/app/shared/chat/group-messages/group-messages.page.html
new file mode 100644
index 000000000..789262d29
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages.page.html
@@ -0,0 +1,71 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="header-top">
+        <div class="middle">
+          <ion-label class="title">{{room.name.split('-').join(' ')}}</ion-label>
+        </div>
+        <div class="right">
+          <ion-icon  (click)="openGroupMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
+        </div>  
+      </div>
+      <div (click)="openGroupContactsPage()" class="header-bottom">
+        <div class="header-bottom-icon">
+          <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
+        </div>
+        <div class="header-bottom-contacts">
+          <ion-label *ngFor="let member of members" >
+            {{member.name}},
+          </ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="welcome-text">
+    <ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
+    <ion-label>A conversa original mantêm-se como chat individual</ion-label>
+  </div>
+  <div class="messages">
+    <div class="container-width-100" *ngFor="let msg of messages">
+      <div *ngIf="msg.t != 'r'" class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
+        <div class="title">
+          <ion-label>{{msg.u.name}}</ion-label>
+          <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
+        </div>
+        <div>
+          <ion-label>{{msg.msg}}</ion-label>
+        </div>
+      </div>
+      <div *ngIf="msg.t == 'r'" class="info-text">
+        <ion-label>Alterou o assunto de para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
+      </div>
+    </div>
+  </div>
+
+</ion-content>
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openSendGroupMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
+</ion-footer>
+
diff --git a/src/app/shared/chat/group-messages/group-messages.page.scss b/src/app/shared/chat/group-messages/group-messages.page.scss
new file mode 100644
index 000000000..517a2659c
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages.page.scss
@@ -0,0 +1,175 @@
+ @import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%;
+        height: 100%;
+        overflow:auto;
+        padding: 30px 20px 0px 20px;
+        color:#000;
+        //transform: translate3d(0, 1px, 0);
+        
+        .header-top{
+          //width: 360px;
+          margin: 0px auto;
+          overflow: auto;
+          padding: 0 !important;
+          background: #fff;
+           .middle{
+            padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2.5px 0 0 5px;
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 95%;
+          overflow: auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+        .div-icon ion-icon{
+          float: right;
+          padding-left: 20px;
+        } 
+    }
+ }
+ ion-content{
+   .welcome-text{
+    /* width: 322px; */
+     //width: em(422px);
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+   .info-text{
+    /* width: 322px; */
+    width: em(422px);
+    background: #fef4c5;
+    text-align: center;
+    font-size: 13px;
+    color: #262420;
+    padding: 10px;
+    margin: 10px auto;
+    line-height: 1.2rem;
+    /* margin: 15px 0px 15px 0px; */
+    border-radius: 8px;
+   }
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    .incoming-true, .incoming-false{
+       padding: 15px 20px;
+       border-radius: 10px;
+      }
+      .incoming-true{
+        margin: 10px 75px 10px 20px;
+        background: #ebebeb;
+        float: left;
+      }
+      .container-width-100{
+        width: 100%;
+        overflow: auto;
+      }
+    }
+     .incoming-false{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+      display: inline;
+      color: #0782c9;
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        margin-left: 10px;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+  padding-top: 7.5px;
+  padding-bottom: 7.5px;
+ .container{
+   justify-content: center;
+   justify-content: space-evenly;
+   
+ }
+ 
+ .chat-icon-options{
+   display:block !important;
+   font-size: 25px;
+   float: right !important;
+   margin-top: 10px;
+ }
+
+ .chat-icon-send{
+   font-size: 45px;
+   margin: 0 auto;
+   margin-top: 4px;
+ }
+
+  .type-message{
+   display: flex;
+   border: 1px solid #ebebeb;
+   border-radius: 25px;
+   padding-left: 15px;
+   align-items: center;
+   overflow: auto;
+
+   ion-textarea{
+     margin: 0 !important;
+     align-self: center;
+   }
+ }
+ 
+}
diff --git a/src/app/shared/chat/group-messages/group-messages.page.spec.ts b/src/app/shared/chat/group-messages/group-messages.page.spec.ts
new file mode 100644
index 000000000..62c380096
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupMessagesPage } from './group-messages.page';
+
+describe('GroupMessagesPage', () => {
+  let component: GroupMessagesPage;
+  let fixture: ComponentFixture<GroupMessagesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupMessagesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupMessagesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts
new file mode 100644
index 000000000..3f5445438
--- /dev/null
+++ b/src/app/shared/chat/group-messages/group-messages.page.ts
@@ -0,0 +1,320 @@
+import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter} from '@angular/core';
+import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+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 { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+import { NewGroupPage } from '../new-group/new-group.page';
+import { GroupContactsPage } from './group-contacts/group-contacts.page';
+
+@Component({
+  selector: 'app-group-messages',
+  templateUrl: './group-messages.page.html',
+  styleUrls: ['./group-messages.page.scss'],
+})
+export class GroupMessagesPage implements OnInit, OnChanges {
+  showLoader: boolean;
+  isGroupCreated:boolean;
+  loggedUser: any;
+  message:any;
+  messages:any;
+  
+
+  room:any;
+  members:any;
+
+  @Input() roomId:string;
+  @Output() openGroupContacts:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private menu: MenuController,
+    private modalController: ModalController,
+    private actionSheetController: ActionSheetController,
+    public popoverController: PopoverController,
+    private chatService: ChatService,
+    private authService: AuthService,
+    private animationController: AnimationController,
+  ) {
+    this.isGroupCreated = true;
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.getRoomInfo();
+  }
+
+  ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    this.getRoomInfo();
+    console.log(this.roomId);
+  }
+
+  openGroupContactsPage(){
+    this.openGroupContacts.emit(this.roomId);
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  doRefresh(ev:any){
+    this.getRoomInfo();
+    ev.target.complete();
+  }
+  get watch(){
+    this.getRoomInfo();
+    console.log('here watching');
+    
+    return this.roomId;
+  }
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
+
+  getGroupContacts(room:any){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(room.t === 'p'){
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+  }
+  loadGroupMessages(room:any){
+    console.log('here'+room.t);
+    
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(room.t === 'p'){
+      console.log('private');
+      
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
+        console.log(res);
+        let msgOnly = res['messages'].filter(data => data.t != 'au');
+        this.messages = msgOnly.reverse();
+        console.log(res);
+        
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
+        console.log(res);
+        this.messages = res['messages'].reverse();
+      });
+    }
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.roomId, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+     /*  this.loadGroupMessages(); */ 
+     this.getRoomInfo();
+    });
+    this.message = "";
+  }
+  async openGroupMessagesOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    /* const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present(); */
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ChatPopoverPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
+  openSendGroupMessageOptions(ev: any){
+    if(window.innerWidth <= 1024){
+      console.log('mobile');
+      this.openChatOptions(ev);
+    }
+    else{
+      console.log('desktop');
+      this._openChatOptions();
+    }
+  }
+
+
+  async openOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatPopoverPage,
+      cssClass: 'chat-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    await popover.present();
+    popover.onDidDismiss().then(res=>{
+      console.log(res);
+      if(res.data){
+        this.getRoomInfo();
+        //this.modalController.dismiss(); 
+      };
+      
+    });
+  }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    console.log(this.members);
+  
+    const modal = await this.modalController.create({
+      component: GroupContactsPage,
+      componentProps: {
+        isCreated: this.isGroupCreated,
+        room: this.room,
+        members: this.members,
+        name: this.room.name,
+      }, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(()=>{
+      this.getRoomInfo();
+    });
+  }
+
+  /* async actionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Sair do grupo',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Alterar nome do grupo1',
+        handler: () => {
+          console.log('Alterar nome do grupo');
+          this.openChangeGroupName()
+        }
+      }, {
+        text: 'Apagar o grupo',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, 
+      ]
+    });
+    await actionSheet.present();
+  }
+ */
+
+  async _openChatOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ChatOptionsPopoverPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
+}
+
diff --git a/src/app/shared/chat/messages/contacts/contacts-routing.module.ts b/src/app/shared/chat/messages/contacts/contacts-routing.module.ts
new file mode 100644
index 000000000..fb8c7a5ea
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactsPage } from './contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ContactsPageRoutingModule {}
diff --git a/src/app/shared/chat/messages/contacts/contacts.module.ts b/src/app/shared/chat/messages/contacts/contacts.module.ts
new file mode 100644
index 000000000..b90d8af4e
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPageRoutingModule } from './contacts-routing.module';
+
+import { ContactsPage } from './contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+import { FilterPipe } from 'src/app/pipes/filter.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    ContactsPageRoutingModule
+  ],
+  exports: [FilterPipe],
+  declarations: [ContactsPage, FilterPipe]
+})
+export class ContactsPageModule {}
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.html b/src/app/shared/chat/messages/contacts/contacts.page.html
new file mode 100644
index 000000000..6c44e43f2
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts.page.html
@@ -0,0 +1,48 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Nova Conversa</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar debounce="500" (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+
+  <div class="main-content">
+    
+    <ion-virtual-scroll [items]="users| filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div (click)="openMessagesPage(user.username)" *virtualItem="let user" class="item-user">
+         <p>{{user.name}}</p>
+         <span class="icon">
+          <ion-icon class="{{user.status}}" slot="end" name="ellipse"></ion-icon>
+         </span>
+        
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.scss b/src/app/shared/chat/messages/contacts/contacts.page.scss
new file mode 100644
index 000000000..24392c458
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts.page.scss
@@ -0,0 +1,135 @@
+
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+ 
+   .main-header{
+     width: 100%;
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+ 
+     .div-icon{
+       width: 40px;
+       float: right;
+       font-size: 35px;
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+     
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: 35px;
+       overflow: auto;
+         
+       }
+     .div-title{
+         width: 221px;
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: 25px;
+     }
+   }
+ }
+ .toolbar-search{
+   --padding-top:0 !important;
+   --padding-bottom:0 !important;
+   --padding-start:0 !important;
+   --padding-end:0 !important;
+   
+   .search{
+     border: 1px solid #ebebeb;
+     margin: 5px 20px 5px 20px;
+     border-radius: 5px;
+     height: auto;
+     padding: 0 !important;
+   }
+   .search ion-searchbar{
+     /* border: 1px solid green; */
+     width: 100%;
+     margin: 0 !important;
+     padding: 0 !important;
+     --border-radius: 5px;
+     --box-shadow: none;
+     overflow: hidden;
+     --icon-color:#0d89d1;
+   }
+ 
+ }
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+  width: 100%;
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 0 0 0 0;
+  overflow:auto;
+ 
+     .item-divider{
+       background: #ebebeb;
+       font-size: 15px;
+       margin: 10px 0 10px 0;
+       padding:5px 0 5px 20px;
+  
+     }
+ 
+     .item-user{
+       display: flex;
+       margin: 10px 20px 10px 20px !important;
+       overflow: auto;
+       align-items: center;
+     }
+ 
+     .item-user p{
+        display: block;
+        margin: 0 !important;
+        width: 90%;
+        font-size: 15px;
+        color: #0d89d1;
+        float: left;
+     }
+     .item-user .icon{
+        width: 10%;
+        font-size: 10px;
+        display: block;
+        text-align: right;
+        overflow: auto;
+      }
+      .online{
+        color:#99e47b;
+      }
+     .offline{
+       color:#cbced1;
+      }
+     .away{
+      color:#ffd21f;
+      }
+      .invisible{
+        color:#cbced1;
+      }
+      .busy{
+        color:#f5455c;
+      }
+   }
\ No newline at end of file
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.spec.ts b/src/app/shared/chat/messages/contacts/contacts.page.spec.ts
new file mode 100644
index 000000000..8f263232b
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPage } from './contacts.page';
+
+describe('ContactsPage', () => {
+  let component: ContactsPage;
+  let fixture: ComponentFixture<ContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/messages/contacts/contacts.page.ts b/src/app/shared/chat/messages/contacts/contacts.page.ts
new file mode 100644
index 000000000..68df0176b
--- /dev/null
+++ b/src/app/shared/chat/messages/contacts/contacts.page.ts
@@ -0,0 +1,172 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { GroupMessagesPage } from '../../group-messages/group-messages.page';
+import { MessagesPage } from '../messages.page';
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.page.html',
+  styleUrls: ['./contacts.page.scss'],
+})
+export class ContactsPage implements OnInit {
+  showLoader: boolean;
+  loggedUser: any;
+  users = [];
+
+  headers: HttpHeaders;
+  options:any;
+  contacts:any;
+  textSearch:string;
+  room:any;
+  dm:any;
+
+  @Output() openMessage:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+    private chatService: ChatService,
+    private authService: AuthService,
+  ) 
+  {  
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+    });
+    this.textSearch="";
+    this.dm=null;
+    this.room=null;
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+  }
+
+  onChange(event){
+    this.textSearch = event.detail.value;
+  }
+
+  openMessagesPage(username:string){
+    if( window.innerWidth <= 1024){
+      this.createRoom(username);
+    }
+    else{
+      let body = {
+        username: username,
+      }
+      this.chatService.createRoom(body).subscribe(res => {
+        console.log(res);
+        this.room = res['room'];
+        this.openMessage.emit(this.room._id);
+      });
+    }
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    this.chatService.getAllUsers().subscribe((res:any)=>{
+      console.log(res.users);
+      //this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      this.contacts = res.users.filter(data => data.username != this.loggedUser.me.username);
+      this.users = this.contacts.sort((a,b) => {
+        if(a.name < b.name){
+          return -1;
+        }
+        if(a.name > b.name){
+          return 1;
+        }
+        return 0;
+      });
+      this.showLoader = false;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    if(recordIndex == 0){
+      return record.name[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name[0];
+    let first_current = record.name[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+  
+  clicked(){
+    console.log('clicked');
+  }
+
+  createRoom(username:string){
+    let body = {
+      username: username,
+    }
+    this.chatService.createRoom(body).subscribe(res => {
+      console.log(res);
+      this.room = res['room'];
+      this.getDirectMessage(this.room._id);
+    });
+  }
+  getDirectMessage(roomId:any){
+    console.log(roomId);
+    
+    this.chatService.getAllDirectMessages().subscribe(res=>{
+      let result = res['ims'].filter(data => data._id == roomId);
+      this.dm = result[0];
+      console.log(this.dm);
+      this.openModal(this.dm);
+    });
+  }
+  async openModal(dm:any){
+    this.close();
+    console.log(dm);
+    
+    const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+      componentProps: {
+        dm: dm,
+      },
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async openMessages(username:string){
+    /* this.close(); */
+
+    let dm:any;
+    //Create new room
+     this.createRoom(username);
+    //Get direct messages (dm)
+    /* this.getDirectMessage(this.room._id); */
+    console.log(this.dm);
+    
+      
+    /* const modal = await this.modalController.create({
+      component: MessagesPage,
+      cssClass: 'group-messages',
+      backdropDismiss: false,
+      componentProps: {
+        dm: dm,
+      },
+    });
+    await modal.present();
+    modal.onDidDismiss(); */
+  }
+
+}
diff --git a/src/app/shared/chat/messages/messages-routing.module.ts b/src/app/shared/chat/messages/messages-routing.module.ts
new file mode 100644
index 000000000..c00bd5ccb
--- /dev/null
+++ b/src/app/shared/chat/messages/messages-routing.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MessagesPage } from './messages.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MessagesPage
+  },
  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class MessagesPageRoutingModule {}
diff --git a/src/app/shared/chat/messages/messages.module.ts b/src/app/shared/chat/messages/messages.module.ts
new file mode 100644
index 000000000..4c0daa3e8
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPageRoutingModule } from './messages-routing.module';
+
+import { MessagesPage } from './messages.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    MessagesPageRoutingModule
+  ],
+  declarations: [MessagesPage],
+  exports: [MessagesPage]
+})
+export class MessagesPageModule {}
diff --git a/src/app/shared/chat/messages/messages.page.html b/src/app/shared/chat/messages/messages.page.html
new file mode 100644
index 000000000..9ac6880fb
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.page.html
@@ -0,0 +1,64 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="header-top">
+        <div class="middle" *ngFor="let users of dmUsers">
+          <ion-label class="title">{{users.name}}</ion-label>
+          <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
+        </div>
+        <div class="right">
+          <ion-icon  (click)="_openMessagesOptions()" src="assets/images/icons-menu.svg"></ion-icon>
+        </div>  
+      </div>
+      <div hidden class="header-bottom" (click)="addContacts()">
+        <div class="header-bottom-icon">
+          <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
+        </div>
+        <div class="header-bottom-contacts">
+          <ion-label class="text-color-blue">Adicionar contacto</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="messages" #scrollMe>
+    <div class="container-width-100" *ngFor="let msg of messages">
+      <div class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
+        <div class="title">
+          <ion-label>{{msg.u.name}}</ion-label>
+          <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
+        </div>
+        <div>
+          <ion-label>{{msg.msg}}</ion-label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</ion-content>
+
+
+<ion-footer>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openSendMessageOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
+</ion-footer>
+
diff --git a/src/app/shared/chat/messages/messages.page.scss b/src/app/shared/chat/messages/messages.page.scss
new file mode 100644
index 000000000..547b63b8f
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.page.scss
@@ -0,0 +1,235 @@
+@import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        background-color: #fff;
+        overflow:hidden;
+        //padding: 0px 20px 0px 20px;
+        color:#000;
+        transform: translate3d(0, 1px, 0);
+        padding: 30px 20px 0 20px !important;
+        
+        .header-top{
+          width: 100%;
+          overflow: auto;
+          //padding: 0 !important;
+          background: #fff;
+           .middle{
+            //padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2px 0 0 5px;
+            display: flex;
+            align-items: center;
+            
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 95%;
+          overflow: auto;
+         
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+          overflow: auto;
+          float: left;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+        .div-icon ion-icon{
+          float: right;
+          padding-left: 20px;
+        } 
+    }
+ }
+ ion-content{
+   width: 100%;
+   height: 100%;
+   padding: 30px 20px 0 20px !important;
+   .welcome-text{
+    /* width: 322px; */
+    /*  width: em(422px); */
+    width: 100%;
+     background: #ebebeb;
+     text-align: center;
+     font-size: 13px;
+     color: #797979;
+     padding: 10px;
+     margin: 0 auto;
+     line-height: 1.2rem;
+     //margin: 20px 39px 25px;
+     border-radius: 8px;
+   }
+
+   .messages{
+    font-size: 13px;
+    font-family: Roboto;
+    overflow: auto;
+
+    //set scroll do bottom
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
+
+    .container-width-100{
+      width: 100%;
+      overflow: auto;
+    }
+    
+
+    .incoming-true, .incoming-false{
+       padding: 15px 20px;
+       border-radius: 10px;
+    }
+
+     .incoming-true{
+      margin: 10px 75px 10px 20px;
+       background: #ebebeb;
+       float: left;
+       }
+     }
+     .incoming-false{
+      margin: 10px 20px 10px 75px;
+       background: #e4f4fe;
+       float: right;
+     }
+     .title{
+         display: inline;
+      color: #0782c9;
+      font-weight: bold;
+      margin-bottom: 5px;
+
+      .time{
+        color: #797979;
+        text-align: right;
+        margin-left: 10px;
+        float: right;
+      }
+   }
+ }
+
+ ion-footer{
+   padding-top: 7.5px;
+   padding-bottom: 7.5px;
+  .container{
+    justify-content: center;
+    justify-content: space-evenly;
+    
+  }
+  
+  .chat-icon-options{
+    display:block !important;
+    font-size: 25px;
+    float: right !important;
+    margin-top: 10px;
+  }
+
+  .chat-icon-send{
+    font-size: 45px;
+    margin: 0 auto;
+    margin-top: 4px;
+  }
+
+   .type-message{
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    padding-left: 15px;
+    align-items: center;
+    overflow: auto;
+
+    ion-textarea{
+      margin: 0 !important;
+      align-self: center;
+    }
+  }
+  
+ }
+
+ .text-color-blue{
+    font-size: 15px;
+    color: #0782c9;
+    font-weight: 500;
+    letter-spacing: normal;
+ }
+ .user-status-online{
+    display: block;
+    float: left;
+    color:#99e47b;
+    padding-left: 10px;
+ }
+ .online{
+  display: block;
+  float: left;
+  color:#99e47b;
+  padding-left: 10px;
+}
+.offline{
+ color:#cbced1;
+ display: block;
+ float: left;
+ padding-left: 10px;
+}
+.away{
+color:#ffd21f;
+display: block;
+ float: left;
+ padding-left: 10px;
+}
+.invisible{
+  color:#cbced1;
+  display: block;
+ float: left;
+ padding-left: 10px;
+}
+.busy{
+  color:#f5455c;
+  display: block;
+ float: left;
+ padding-left: 10px;
+}
+ 
+ 
\ No newline at end of file
diff --git a/src/app/shared/chat/messages/messages.page.spec.ts b/src/app/shared/chat/messages/messages.page.spec.ts
new file mode 100644
index 000000000..826962a23
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessagesPage } from './messages.page';
+
+describe('MessagesPage', () => {
+  let component: MessagesPage;
+  let fixture: ComponentFixture<MessagesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessagesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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..034a50225
--- /dev/null
+++ b/src/app/shared/chat/messages/messages.page.ts
@@ -0,0 +1,275 @@
+import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
+import { AnimationController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Status } from 'src/app/models/chat/status.model';
+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';
+import { ProfileComponent } from '../../headers/header-no-search/profile/profile.component';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
+
+@Component({
+  selector: 'app-messages',
+  templateUrl: './messages.page.html',
+  styleUrls: ['./messages.page.scss'],
+})
+export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
+  showLoader: boolean;
+
+  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+
+  loggedUser: any;
+
+  message = '';
+  messages:any;
+  dm:any;
+  userPresence='';
+  dmUsers:any;
+
+  @Input() roomId:string;
+  
+  constructor(
+    public popoverController: PopoverController,
+    private modalController: ModalController,
+    /* private navParams: NavParams, */
+    private chatService: ChatService,
+    private authService: AuthService,
+    private animationController: AnimationController,
+  ) { 
+   /*  this.dm = this.navParams.get('dm'); */
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(this.roomId);
+    this.load();
+    
+    //throw new Error('Method not implemented.');
+  }
+
+  ngOnInit() {
+
+    this.scrollToBottom();
+
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    
+    /* setInterval(()=>{ */
+      this.load();
+    /* }, 9000); */
+    console.log(this.roomId);
+    
+    
+  }
+  load(){
+    this.loadMessages();
+    this.getChatMembers();
+  }
+
+
+  doRefresh(ev:any){
+    this.load();
+    ev.target.complete();
+  }
+  
+  ngAfterViewChecked() {        
+    this.scrollToBottom();
+    console.log(this.roomId);
+  } 
+  scrollToBottom(): void {
+    try {
+        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+    } catch(err) { }                 
+  }
+  loadMoreMessages(ev:any){
+
+  }
+
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.roomId, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadMessages(); 
+    });
+    this.message = "";
+  }
+  
+  loadMessages(){
+    this.showLoader = true;
+    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
+      /* console.log(res); */
+      this.messages = res['messages'].reverse();
+      console.log(this.messages);
+      this.showLoader = false;
+    })
+  }
+  getChatMembers(){
+    console.log(this.roomId);
+    
+    this.showLoader = true;
+    this.chatService.getMembers(this.roomId).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();
+  }
+
+  openSendMessageOptions(ev:any){
+    if(window.innerWidth <= 1024){
+      console.log('mobile');
+      this.openChatOptions(ev);
+    }
+    else{
+      console.log('desktop');
+      this._openChatOptions();
+    }
+  }
+
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+
+
+  async _openMessagesOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    /* const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present(); */
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: MessagesOptionsPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
+  
+
+  async _openChatOptions() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    /* const popover = await this.popoverController.create({
+      component: MessagesOptionsPage,
+      componentProps: {
+        roomId: this.dm._id,
+      },
+      cssClass: 'messages-options',
+      event: ev,
+      translucent: true,
+    });
+    return await popover.present(); */
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ChatOptionsPopoverPage,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+        roomId: this.roomId,
+      }
+    });
+    return await modal.present();
+  }
+
+
+}
+
diff --git a/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts b/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts
new file mode 100644
index 000000000..fb8c7a5ea
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContactsPage } from './contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ContactsPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/contacts/contacts.module.ts b/src/app/shared/chat/new-group/contacts/contacts.module.ts
new file mode 100644
index 000000000..13749fd57
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPageRoutingModule } from './contacts-routing.module';
+
+import { ContactsPage } from './contacts.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    ContactsPageRoutingModule
+  ],
+  declarations: [ContactsPage]
+})
+export class ContactsPageModule {}
diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.html b/src/app/shared/chat/new-group/contacts/contacts.page.html
new file mode 100644
index 000000000..5120198ad
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts.page.html
@@ -0,0 +1,53 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Contactos</ion-label>
+        </div>
+        <app-btn-seguinte (click)="groupMessages()"></app-btn-seguinte>
+      </div>
+    </div>
+  </ion-toolbar>
+  <ion-toolbar class="toolbar-search">
+    <div class="search">
+      <ion-searchbar (ionChange)="onChange($event)" placeholder="Pesquisar por cantacto" ></ion-searchbar>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+  <div class="main-content">
+    
+    <!-- <ion-list>
+      <ion-item *ngFor="let user of searchedItem">
+        {{user.name}}
+      </ion-item>
+    </ion-list> -->
+
+    <ion-virtual-scroll [items]="users" approxItemHeight="70px" [headerFn]="separateLetter">
+  
+      <div class="item-divider" *virtualHeader="let header">
+        <ion-label>{{header}}</ion-label>
+      </div>
+
+      <div *virtualItem="let user" class="item-checkbox">
+        <ion-checkbox color="primary"></ion-checkbox>
+         <p>{{user.first}} {{user.last}}</p>
+        <ion-icon name="ellipse"></ion-icon>
+      </div>
+      
+    </ion-virtual-scroll>
+    
+  </div>    
+</ion-content>
+
+
diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.scss b/src/app/shared/chat/new-group/contacts/contacts.page.scss
new file mode 100644
index 000000000..c97008f82
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts.page.scss
@@ -0,0 +1,127 @@
+
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+
+    .div-icon{
+      width: 40px;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
+      .title-content{
+        width: 360px;
+        margin: 0px auto;
+        overflow: auto;
+        padding: 0 !important;
+      }
+    
+    .back-icon{
+      width: 37px;
+      float: left;
+      font-size: 35px;
+      overflow: auto;
+        
+      }
+    .div-title{
+        width: 221px;
+        padding: 0!important;
+        float: left;
+        margin: 2.5px 0 0 5px;
+    }
+    .title{
+        font-size: 25px;
+    }
+  }
+}
+.toolbar-search{
+  --padding-top:0 !important;
+  --padding-bottom:0 !important;
+  --padding-start:0 !important;
+  --padding-end:0 !important;
+  
+  .search{
+    border: 1px solid #ebebeb;
+    margin: 5px 20px 5px 20px;
+    border-radius: 5px;
+  }
+  .search ion-searchbar{
+    /* border: 1px solid green; */
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    --border-radius: 5px;
+    --box-shadow: none;
+    overflow: auto;
+    --icon-color:#0d89d1;
+  }
+
+}
+ion-content{
+  --background:transparent;
+}
+.main-content{
+  width: 100%;
+  height: 100%;
+  font-family: Roboto;
+  margin: 0 auto;
+  background-color: #fff;
+  overflow:auto;
+  padding: 0 0 0 0;
+
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
+ 
+    }
+
+    .item-checkbox{
+      display: flex;
+      margin: 10px 20px 10px 20px !important;
+      overflow: auto;
+      align-items: center;
+
+    }
+
+    .item-checkbox ion-checkbox{
+        --border-color: #0d89d1;
+        --background-checked:#0d89d1;
+        float: left;
+    }
+
+    .item-checkbox p{
+        display: block;
+        margin: 0 !important;
+        width: 330px;
+        padding-left: 10px;
+        font-size: 15px;
+        color: #0d89d1;
+        float: left;
+    }
+    .item-checkbox ion-icon{
+      font-size: 10px;
+      float: left;
+      color:#99e47b;
+      margin-left: 10px;
+    }
+  }
+
diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts b/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts
new file mode 100644
index 000000000..8f263232b
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ContactsPage } from './contacts.page';
+
+describe('ContactsPage', () => {
+  let component: ContactsPage;
+  let fixture: ComponentFixture<ContactsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/new-group/contacts/contacts.page.ts b/src/app/shared/chat/new-group/contacts/contacts.page.ts
new file mode 100644
index 000000000..b2d114651
--- /dev/null
+++ b/src/app/shared/chat/new-group/contacts/contacts.page.ts
@@ -0,0 +1,152 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { GroupMessagesPage } from '../../group-messages/group-messages.page';
+
+@Component({
+  selector: 'app-contacts',
+  templateUrl: './contacts.page.html',
+  styleUrls: ['./contacts.page.scss'],
+})
+export class ContactsPage implements OnInit {
+  showLoader: boolean;
+  users = [];
+
+  contact: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  headers: HttpHeaders;
+  options:any;
+
+  contacts: Contact[] = [
+    {
+      first: 'Ana',
+      last: 'Manuel',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Abdullah',
+      last: 'Hill',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Batur',
+      last: 'Oymen',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Bianca',
+      last: 'Costa',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Zaya',
+      last: 'Mary',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    },
+    {
+      first: 'Tiago',
+      last: 'Kayaya',
+      url: 'https://randomuser.me/api/portraits/med/women/54.jpg',
+    }
+];
+
+  constructor(
+    private modalController: ModalController,
+    private http: HttpClient,
+  ) 
+  { 
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Access-Control-Allow-Origin' , '*');
+    this.headers = this.headers.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
+    this.headers = this.headers.set('Accept','application/json');
+    this.headers = this.headers.set('content-type','application/json');
+        
+    
+  }
+
+  ngOnInit() {
+    this.loadUsers();
+
+  }
+
+  loadUsers(){
+    this.options = { 
+      headers: this.headers,
+    };
+    /* this.http.get('https://randomuser.me/api/?results=100', this.options)
+    .subscribe(res => {
+      this.users = res['results'].sort((a,b) => {
+        if(a.name.first < b.name.first){
+          return -1;
+        }
+        if(a.name.first > b.name.first){
+          return 1;
+        }
+        return 0;
+      });
+      console.log(res);
+      console.log(this.users);
+    }); */
+    this.users = this.contacts.sort((a,b) => {
+      if(a.first < b.first){
+        return -1;
+      }
+      if(a.first > b.first){
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  separateLetter(record, recordIndex, records){
+    /* if(recordIndex == 0){
+      return record.name.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].name.first[0];
+    let first_current = record.name.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null; */
+    if(recordIndex == 0){
+      return record.first[0];
+    }
+
+    let first_prev = records[recordIndex - 1].first[0];
+    let first_current = record.first[0];
+
+    if(first_prev != first_current){
+      return first_current;
+    }
+    return null;
+  }
+
+  doRefresh(event){
+
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+  onChange(event){
+
+  }
+  clicked(){
+    console.log('clicked');
+    
+  }
+  async groupMessages(){
+    const modal = await this.modalController.create({
+      component: GroupMessagesPage,
+      componentProps: {}, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss();
+  }
+
+}
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts b/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts
new file mode 100644
index 000000000..d88c349d7
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-chat/group-chat-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupChatPage } from './group-chat.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupChatPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupChatPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.module.ts b/src/app/shared/chat/new-group/group-chat/group-chat.module.ts
new file mode 100644
index 000000000..a86458890
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-chat/group-chat.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupChatPageRoutingModule } from './group-chat-routing.module';
+
+import { GroupChatPage } from './group-chat.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    GroupChatPageRoutingModule
+  ],
+  declarations: [GroupChatPage]
+})
+export class GroupChatPageModule {}
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.html b/src/app/shared/chat/new-group/group-chat/group-chat.page.html
new file mode 100644
index 000000000..4dfad122a
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.html
@@ -0,0 +1,17 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <app-btn-modal-dismiss></app-btn-modal-dismiss>
+        <div class="middle">
+          <ion-label class="title">Novo Grupo</ion-label>
+        </div>
+        <app-btn-seguinte></app-btn-seguinte>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.scss b/src/app/shared/chat/new-group/group-chat/group-chat.page.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts b/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts
new file mode 100644
index 000000000..641898e82
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupChatPage } from './group-chat.page';
+
+describe('GroupChatPage', () => {
+  let component: GroupChatPage;
+  let fixture: ComponentFixture<GroupChatPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupChatPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupChatPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/new-group/group-chat/group-chat.page.ts b/src/app/shared/chat/new-group/group-chat/group-chat.page.ts
new file mode 100644
index 000000000..c34b5eec7
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-chat/group-chat.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-group-chat',
+  templateUrl: './group-chat.page.html',
+  styleUrls: ['./group-chat.page.scss'],
+})
+export class GroupChatPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts
new file mode 100644
index 000000000..c998741ed
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GroupContactsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GroupContactsPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.module.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.module.ts
new file mode 100644
index 000000000..2946bd28c
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPageRoutingModule } from './group-contacts-routing.module';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GroupContactsPageRoutingModule
+  ],
+  declarations: [GroupContactsPage]
+})
+export class GroupContactsPageModule {}
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html
new file mode 100644
index 000000000..7cca9b8cf
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.html
@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>group-contacts</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.scss b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts
new file mode 100644
index 000000000..5d3e2033f
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupContactsPage } from './group-contacts.page';
+
+describe('GroupContactsPage', () => {
+  let component: GroupContactsPage;
+  let fixture: ComponentFixture<GroupContactsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupContactsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GroupContactsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts
new file mode 100644
index 000000000..7cb431b9a
--- /dev/null
+++ b/src/app/shared/chat/new-group/group-contacts/group-contacts.page.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-group-contacts',
+  templateUrl: './group-contacts.page.html',
+  styleUrls: ['./group-contacts.page.scss'],
+})
+export class GroupContactsPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/chat/new-group/new-group-routing.module.ts b/src/app/shared/chat/new-group/new-group-routing.module.ts
new file mode 100644
index 000000000..8d2201158
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group-routing.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewGroupPage } from './new-group.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewGroupPage
+  },
+  {
+    path: 'contacts',
+    loadChildren: () => import('./contacts/contacts.module').then( m => m.ContactsPageModule)
+  },
+  {
+    path: 'group-chat',
+    loadChildren: () => import('./group-chat/group-chat.module').then( m => m.GroupChatPageModule)
+  },
  {
+    path: 'group-contacts',
+    loadChildren: () => import('./group-contacts/group-contacts.module').then( m => m.GroupContactsPageModule)
+  }
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewGroupPageRoutingModule {}
diff --git a/src/app/shared/chat/new-group/new-group.module.ts b/src/app/shared/chat/new-group/new-group.module.ts
new file mode 100644
index 000000000..97006324c
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NewGroupPageRoutingModule } from './new-group-routing.module';
+
+import { NewGroupPage } from './new-group.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    NewGroupPageRoutingModule
+  ],
+  declarations: [NewGroupPage]
+})
+export class NewGroupPageModule {}
diff --git a/src/app/shared/chat/new-group/new-group.page.html b/src/app/shared/chat/new-group/new-group.page.html
new file mode 100644
index 000000000..02dc25311
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group.page.html
@@ -0,0 +1,36 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <div class="middle">
+          <ion-label class="title">Novo Grupo</ion-label>
+        </div>
+        <app-btn-criar *ngIf="groupName" (click)="createGroup()"></app-btn-criar> <!-- addContacts -->
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content width-100">
+    <div class="item-container">
+      <ion-input [(ngModel)]="groupName" placeholder="Título"></ion-input>
+    </div>
+    <div *ngIf="false" class="item-container-no-border">
+      <ion-checkbox (ionChange)="_ionChange($event)" color="primary"></ion-checkbox>
+      <ion-label>Grupo Ultra-secreto</ion-label>
+    </div>
+
+    <div *ngIf="showDuration" class="container-div">
+      <div class="ion-item-class-2">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-duration.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class">
+          <ion-input (click)="showPicker()" [(ngModel)]="displayDuration" placeholder="Duração"></ion-input>
+        </div>
+      </div>
+    </div>
+    
+  </div>    
+</ion-content>
diff --git a/src/app/shared/chat/new-group/new-group.page.scss b/src/app/shared/chat/new-group/new-group.page.scss
new file mode 100644
index 000000000..025d3aedd
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group.page.scss
@@ -0,0 +1,153 @@
+ion-content{
+    --background:transparent;
+}
+.header-toolbar{
+   --background:transparent;
+   --opacity: 1;
+}
+.div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+
+    .div-search{
+      font-size: 45px;
+      float: left;
+      margin: 0 0 0 10px
+    }
+    .div-logo{
+      background: transparent;
+      width: 140px;
+      margin: 5px 0 0px 71px;
+      float: left;
+    }
+    .div-logo img{
+      width: 100%;
+    }
+    .div-profile{
+      font-size: 45px;
+      float: right;
+      margin-right: 10px;
+    }
+    
+  }
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 30px 20px 0px 20px;
+    color:#000;
+    transform: translate3d(0, 1px, 0);
+    
+    .title-content{
+      //width: 360px;
+      margin: 0px auto;
+      overflow: auto;
+      padding: 0 !important;
+      background: #fff;
+
+      .left{
+        width: 37px;
+        float: left;
+        font-size: 35px;
+        overflow: auto;
+       }
+       .middle{
+        padding: 0!important;
+        float: left;
+        width: 221px;
+        //margin: 2.5px 0 0 5px;
+      }
+      .right{
+        padding: 0!important;
+        float: right;
+        font-size: 15px;
+        color: #0782c9;
+        margin: 8px 0 0 5px;
+      }
+    }
+
+    .title{
+      font-size: 25px;
+    }
+    .div-icon{
+      width: 40px;
+      float: right;
+      font-size: 35px;
+      overflow: auto;
+      padding: 1px;
+    }
+    .div-icon ion-icon{
+      float: right;
+      padding-left: 20px;
+    }
+    
+ 
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 15px 20px 0 20px;
+
+    .item-container{
+        //width: 360px;
+        margin: 15px auto;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 10px;
+      }
+
+      .item-container-no-border{
+        display: flex;
+        //width: 360px;
+        margin: 25px auto;
+        border-radius: 5px;
+        align-items: center;
+      }
+
+      .item-container-no-border ion-label{
+          padding-left: 10px;
+          font-size: 12px;
+          color: #000;
+      }
+  }
+
+  .container-div{
+    width: 100%;
+    margin-bottom: 15px;
+    overflow: auto;
+
+    .ion-item-class-2{
+        width: 100%;
+        margin: 0px auto;
+
+        .ion-icon-class{
+            width: 5%;
+            height: 45px;
+            float: left;
+            padding: 10px;
+            font-size: 25px;
+          }
+      }
+      .ion-input-class{
+        width: 93%;
+        height: 45px;
+        border: 1px solid #ebebeb;
+        border-radius: 5px;
+        padding-left: 5px;
+        padding-right: 10px;
+        margin-left: 2%;
+        float: left;
+      }
+  }
diff --git a/src/app/shared/chat/new-group/new-group.page.spec.ts b/src/app/shared/chat/new-group/new-group.page.spec.ts
new file mode 100644
index 000000000..2cb166ecd
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewGroupPage } from './new-group.page';
+
+describe('NewGroupPage', () => {
+  let component: NewGroupPage;
+  let fixture: ComponentFixture<NewGroupPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewGroupPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewGroupPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/chat/new-group/new-group.page.ts b/src/app/shared/chat/new-group/new-group.page.ts
new file mode 100644
index 000000000..160e0e21e
--- /dev/null
+++ b/src/app/shared/chat/new-group/new-group.page.ts
@@ -0,0 +1,204 @@
+import { analyzeAndValidateNgModules } from '@angular/compiler';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ModalController, NavParams, PickerController, PopoverController } from '@ionic/angular';
+import { ChatService } from 'src/app/services/chat.service';
+import { GroupDurationPage } from 'src/app/shared/popover/group-duration/group-duration.page';
+import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
+
+@Component({
+  selector: 'app-new-group',
+  templateUrl: './new-group.page.html',
+  styleUrls: ['./new-group.page.scss'],
+})
+export class NewGroupPage implements OnInit {
+  isGroupCreated:boolean;
+  showLoader: boolean;
+  displayDuration: any;
+  showDuration: boolean;
+  selectedDuration = ['','',''];
+  //groupName:string;
+
+  @Input() groupName:string;
+  @Output() addGroupMessage:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private pickerController: PickerController,
+    private popoverController: PopoverController,
+    private modalController: ModalController,
+    private chatService: ChatService,
+    //private navParams: NavParams,
+  ) 
+  { 
+    this.isGroupCreated = false;
+    //this.groupName = this.navParams.get('name');
+  }
+
+  ngOnInit() {
+
+  }
+  _ionChange(event){
+    this.showDuration = event.detail.checked;
+  }
+  close(){
+    //this.modalController.dismiss();
+    console.log('close');
+    this.addGroupMessage.emit();
+  }
+  
+  createGroup(){
+    let name = this.groupName.split(' ').join('-');
+    let body = { "name":name, }
+    this.chatService.addGroup(body).subscribe(res=>{
+      console.log('group created');
+      console.log(res['group']);
+      this.addGroupMessage.emit(res['group']._id);
+    });
+  }
+
+  async addContacts(){
+    this.close();
+
+    let name = this.groupName.split(' ').join('-');
+    console.log(name);
+    
+    const modal = await this.modalController.create({
+      component: GroupContactsPage,
+      componentProps: {
+        isCreated:this.isGroupCreated,
+        name: name,
+        duration:'',
+      }, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+    modal.onDidDismiss();
+  }
+  
+  async setDuration(ev: any) {
+    const popover = await this.popoverController.create({
+      component: GroupDurationPage,
+      cssClass: 'group-duration',
+      event: ev,
+      translucent: true
+    });
+    return await popover.present();
+  }
+
+  async showPicker(){
+    const picker = await this.pickerController.create({
+      cssClass: '',
+      buttons: [
+          { 
+            text: 'Cancelar', role: 'cancel', cssClass: 'btn-cancel'
+          },
+          { 
+            text: 'Ok', 
+            cssClass: 'btn-cancel',
+            handler:(value:any)=>{
+              console.log('button done pressed');
+              this.selectedDuration = [
+                value.days.value,
+                value.hours.value,
+                value.minutes.value,
+              ]
+              console.log(this.selectedDuration);
+              if(value.days.value != null && value.hours.value != null && value.minutes.value != null){
+                if(value.days.value > 0){
+                  if(value.days.value == 1){
+                    if(value.hours.value == 1){
+                      this.displayDuration = value.days.value  + " day " +  
+                      value.hours.value + " hora " +
+                      value.minutes.value + " minutos";
+                    }
+                    else{
+                      this.displayDuration = value.days.value  + " days " + 
+                      value.hours.value + " horas " +
+                      value.minutes.value + " minutos";
+                    }
+                  }
+                  else{
+                    if(value.hours.value == 1){
+                      this.displayDuration = value.days.value  + " days " +  
+                      value.hours.value + " hora " +
+                      value.minutes.value + " minutos";
+                    }
+                    else{
+                      this.displayDuration = value.days.value  + " days " + 
+                      value.hours.value + " horas " +
+                      value.minutes.value + " minutos";
+                    }
+                  }
+                }
+                else{
+                  if(value.hours.value == 1){
+                    this.displayDuration = value.hours.value + " hora " +
+                    value.minutes.value + " minutos";
+                  }
+                  else{
+                    this.displayDuration = value.hours.value + " horas " +
+                    value.minutes.value + " minutos";
+                  }
+                }
+              } 
+            },
+        },
+      ],
+      columns: [
+        {
+          name: 'days',
+          prefix: 'Dias',
+          options: [
+            { text: '0', value: 0 },
+            { text: '1', value: 1 },
+            { text: '2', value: 2 },
+            { text: '3', value: 3 },
+            { text: '4', value: 4 },
+          ]
+        },
+        {
+          name: 'hours',
+          prefix: 'Horas',
+          options: [
+            { text: '0', value: 0 },
+            { text: '1', value: 1 },
+            { text: '2', value: 2 },
+            { text: '3', value: 3 },
+            { text: '4', value: 4 },
+            { text: '5', value: 5 },
+            { text: '6', value: 6 },
+            { text: '7', value: 7 },
+            { text: '8', value: 8 },
+          ]
+        },
+        {
+          name: 'minutes',
+          prefix: 'Minutos',
+          selectedIndex: 3,
+          options: [
+            { text: '0', value: 0 },
+            { text: '5', value: 5 },
+            { text: '10', value: 10 },
+            { text: '15', value: 15 },
+            { text: '20', value: 20 },
+            { text: '25', value: 25 },
+            { text: '30', value: 30 },
+            { text: '35', value: 35 },
+            { text: '45', value: 45 },
+            { text: '50', value: 50 },
+            { text: '55', value: 55 },
+          ]
+        }
+      ]
+    });
+    await picker.present();
+    picker.onDidDismiss().then(async data =>{
+      let day = await picker.getColumn('days');
+      let hour = await picker.getColumn('hours'); 
+      let minutes = await picker.getColumn('minutes');
+    });
+
+  }
+
+}
diff --git a/src/app/shared/empty-container/empty-container-routing.module.ts b/src/app/shared/empty-container/empty-container-routing.module.ts
new file mode 100644
index 000000000..74342e513
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EmptyContainerPage } from './empty-container.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmptyContainerPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EmptyContainerPageRoutingModule {}
diff --git a/src/app/shared/empty-container/empty-container.module.ts b/src/app/shared/empty-container/empty-container.module.ts
new file mode 100644
index 000000000..ccf4cef7a
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EmptyContainerPageRoutingModule } from './empty-container-routing.module';
+
+import { EmptyContainerPage } from './empty-container.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EmptyContainerPageRoutingModule
+  ],
+  declarations: [EmptyContainerPage]
+})
+export class EmptyContainerPageModule {}
diff --git a/src/app/shared/empty-container/empty-container.page.html b/src/app/shared/empty-container/empty-container.page.html
new file mode 100644
index 000000000..1d2bf5d00
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container.page.html
@@ -0,0 +1,5 @@
+<ion-content>
+  <div class="center height-100">
+    <p>{{texto}}</p>
+  </div>
+</ion-content>
diff --git a/src/app/shared/empty-container/empty-container.page.scss b/src/app/shared/empty-container/empty-container.page.scss
new file mode 100644
index 000000000..6483b8c01
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container.page.scss
@@ -0,0 +1,5 @@
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
\ No newline at end of file
diff --git a/src/app/shared/empty-container/empty-container.page.spec.ts b/src/app/shared/empty-container/empty-container.page.spec.ts
new file mode 100644
index 000000000..a45f31369
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EmptyContainerPage } from './empty-container.page';
+
+describe('EmptyContainerPage', () => {
+  let component: EmptyContainerPage;
+  let fixture: ComponentFixture<EmptyContainerPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmptyContainerPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EmptyContainerPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/empty-container/empty-container.page.ts b/src/app/shared/empty-container/empty-container.page.ts
new file mode 100644
index 000000000..e3a933416
--- /dev/null
+++ b/src/app/shared/empty-container/empty-container.page.ts
@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-container',
+  templateUrl: './empty-container.page.html',
+  styleUrls: ['./empty-container.page.scss'],
+})
+export class EmptyContainerPage implements OnInit {
+  @Input() texto:string;
+  
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared/event/attendee-modal/attendee-modal-routing.module.ts b/src/app/shared/event/attendee-modal/attendee-modal-routing.module.ts
new file mode 100644
index 000000000..384a9efd2
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AttendeeModalPage } from './attendee-modal.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AttendeeModalPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AttendeeModalPageRoutingModule {}
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.module.ts b/src/app/shared/event/attendee-modal/attendee-modal.module.ts
new file mode 100644
index 000000000..e97fd7610
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeeModalPageRoutingModule } from './attendee-modal-routing.module';
+
+import { AttendeeModalPage } from './attendee-modal.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AttendeeModalPageRoutingModule
+  ],
+  declarations: [AttendeeModalPage]
+})
+export class AttendeeModalPageModule {}
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.html b/src/app/shared/event/attendee-modal/attendee-modal.page.html
new file mode 100644
index 000000000..99f6943e6
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.html
@@ -0,0 +1,66 @@
+<ion-header class="ion-no-border px-20">
+  <ion-toolbar class="px-10">
+    <ion-title class="pa-0">Adicionar intervenientes</ion-title>
+  </ion-toolbar>
+  <ion-searchbar class="attendee-search-bar" (ionChange)="onChange($event)" placeholder="Insira email para adicionar destinatário"></ion-searchbar><!-- [(ngModel)]="searchCountryString" -->
+  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+</ion-header>
+
+<ion-content class="height-100 ">
+  
+  <ion-item-group class="d-flex flex-column height-100">
+    <ion-list lines="none"  class="flex-grow-1 overflow-y-auto height-100" >
+      <ion-item-sliding class="px-20">
+        <div *ngFor="let attendee of contacts;">
+          <ion-item (click)="selectContact(attendee)" *ngIf="filterSearchList(attendee)" >
+            <div class="pr-10">
+              <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+            </div>
+            <ion-label>
+              <h3>{{ attendee.Name }}</h3>
+              <p>{{ attendee.EmailAddress }}</p>
+            </ion-label>
+          </ion-item>
+        </div>
+
+      </ion-item-sliding>
+    </ion-list>
+    <hr/>
+    <div  class="px-20 font-15 pt-20" style="border-top:1px solid #ebebeb;font-weight: 500;" *ngIf="selectedContact.length >= 1">Destinatário</div> 
+    <ion-list lines="none" *ngIf="selectedContact.length >= 1" class="flex-grow-1 overflow-y-auto height-100 pb-0" >
+      <ion-item-sliding class="px-20"> 
+        <ion-item *ngFor="let attendee of selectedContact;" class="d-flex">
+          <div class="pr-10">
+            <ion-icon class="font-35" src="assets/images/icons-userprofile.svg"></ion-icon>
+          </div>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>
+          <div style="color:red" (click)="remove(attendee)">
+            X
+          </div>
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </ion-item-group>
+
+</ion-content>
+
+<!-- Hide footer in gabinete-digital -->
+<ion-footer class="ion-no-border" *ngIf="currentPath != '/home/gabinete-digital' ">
+  <ion-toolbar class="width-100 d-flex justify-space-between px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+        <ion-icon name="close" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+        <ion-icon name="checkmark" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.scss b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
new file mode 100644
index 000000000..b8645df58
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.scss
@@ -0,0 +1,9 @@
+ion-item-group{
+
+  }
+ion-searchbar{
+    --border-radius: 20px;
+}
+.item-inner{
+  border-style: unset !important;
+  }
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.spec.ts b/src/app/shared/event/attendee-modal/attendee-modal.page.spec.ts
new file mode 100644
index 000000000..f247abe63
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeeModalPage } from './attendee-modal.page';
+
+describe('AttendeeModalPage', () => {
+  let component: AttendeeModalPage;
+  let fixture: ComponentFixture<AttendeeModalPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttendeeModalPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttendeeModalPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/event/attendee-modal/attendee-modal.page.ts b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
new file mode 100644
index 000000000..60743606b
--- /dev/null
+++ b/src/app/shared/event/attendee-modal/attendee-modal.page.ts
@@ -0,0 +1,118 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { ContactsService } from 'src/app/services/contacts.service';
+import { EventPerson } from 'src/app/models/eventperson.model';
+
+@Component({
+  selector: 'app-attendee-modal',
+  templateUrl: './attendee-modal.page.html',
+  styleUrls: ['./attendee-modal.page.scss'],
+})
+export class AttendeeModalPage implements OnInit {
+
+  // Defined by the API
+  contacts: EventPerson[];
+  showLoader: boolean = false;
+  selectedContact: EventPerson[] =[];
+  eventPersons: EventPerson[];
+
+  @Input() eventAttendees: EventPerson[];
+
+  constructor(private modalCtrl: ModalController, private contactsService: ContactsService) { }
+
+  @Output() closeComponent = new EventEmitter<any>();
+  @Output() setContact = new EventEmitter<any>();
+  
+  currentPath = window.location.pathname;
+
+  ngOnInit() {
+    this.fetchContacts("");
+    this.selectedContact = this.eventAttendees;
+  }
+  
+  ngOnChanges(){
+    console.log('change !!!')
+  }
+
+  save(){
+    // set data to agenda component
+    this.setContact.emit(this.selectedContact);
+    this.closeComponent.emit();
+  }
+
+  setContactWithClose(){
+    if(this.currentPath == '/home/gabinete-digital'){
+      this.setContact.emit(this.selectedContact);
+    } 
+  }
+
+  close(){
+    // this.modalCtrl.dismiss(null);
+    this.selectedContact = [];
+    this.closeComponent.emit();
+  }
+
+  onChange(evt: any) {
+    this.fetchContacts(evt.detail.value);
+  }
+
+
+  filterSearchList(itm: EventPerson): boolean {
+    const result = this.selectedContact.find((contact, index)=>{
+       
+      if(contact.Name == itm.Name && contact.EmailAddress == itm.EmailAddress){
+        index = index;
+        return contact;
+      }
+    });
+
+    return undefined == result;
+  }
+
+  remove(itm: EventPerson){
+
+    this.selectedContact = this.selectedContact.filter((contact, index) =>{
+
+      if(contact.Name != itm.Name && contact.EmailAddress != itm.EmailAddress){
+        return contact;
+      }
+      return false;
+
+    });
+
+    // run only in gabinete digital
+    this.setContactWithClose();
+  
+  }
+
+  async selectContact(itm: EventPerson){
+
+    this.selectedContact.push(itm);
+
+    // run only in gabinete digital
+    this.setContactWithClose();
+  }
+
+  async fetchContacts(filter: string) {
+    this.showLoader = true;
+
+    this.contactsService.getContacts(filter).subscribe(result =>
+      {
+        if (this.eventPersons != null)
+        {
+          this.eventPersons.forEach(attendee => {
+            const index: number = result.findIndex((cont) => {
+              return cont.EmailAddress == attendee.EmailAddress
+            });
+  
+            result.splice(index, 1);
+          });
+        }
+
+        this.contacts = result;
+        this.showLoader = false;
+      }
+    );
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/event/attendees/attendees-routing.module.ts b/src/app/shared/event/attendees/attendees-routing.module.ts
new file mode 100644
index 000000000..9f8738216
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees-routing.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AttendeesPage } from './attendees.page';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AttendeesPageRoutingModule {}
diff --git a/src/app/shared/event/attendees/attendees.module.ts b/src/app/shared/event/attendees/attendees.module.ts
new file mode 100644
index 000000000..63a655038
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeesPageRoutingModule } from './attendees-routing.module';
+
+import { AttendeesPage } from './attendees.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    AttendeesPageRoutingModule
+  ],
+  declarations: [AttendeesPage]
+})
+export class AttendeesPageModule {}
diff --git a/src/app/shared/event/attendees/attendees.page.html b/src/app/shared/event/attendees/attendees.page.html
new file mode 100644
index 000000000..4a71dcbc8
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees.page.html
@@ -0,0 +1,57 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>Participantes</ion-title>
+  </ion-toolbar>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="segment">
+      <ion-segment-button value="true">
+        Intervenientes
+      </ion-segment-button>
+      <ion-segment-button value="false">
+        Com Conhecimento
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-item-group>
+    <ion-button class="btn-ok-no-width" fill="clear" color="#fff" shape="round" (click)="addAttendees()" expand="block">
+      <ion-label>Adicionar participantes</ion-label>
+    </ion-button>
+  </ion-item-group>
+  <ion-item-group [ngSwitch]="segment" *ngFor="let attendee of eventAttendees">
+    <ion-list *ngSwitchCase="attendee.IsRequired.toString()">
+      <ion-item-sliding>
+        <ion-item-options side="end">
+          <ion-item-option color="danger" (click)="removeAttendee(attendee)">Apagar</ion-item-option>
+        </ion-item-options>
+        <ion-item lines="none">
+          <ion-icon slot="start" name="person"></ion-icon>
+          <ion-label>
+            <h3>{{ attendee.Name }}</h3>
+            <p>{{ attendee.EmailAddress }}</p>
+          </ion-label>       
+        </ion-item>
+      </ion-item-sliding>
+    </ion-list>
+  </ion-item-group>
+</ion-content>
+
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="width-100 d-flex justify-space-between px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+        <ion-icon name="close" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title></ion-title>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>OK</ion-label>
+        <ion-icon name="checkmark" slot="start"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/event/attendees/attendees.page.scss b/src/app/shared/event/attendees/attendees.page.scss
new file mode 100644
index 000000000..30cc9ce83
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees.page.scss
@@ -0,0 +1,6 @@
+ion-item-group{
+    margin: 15px;
+}
+ion-item{
+    border-bottom:1px solid #ccc;
+}
diff --git a/src/app/shared/event/attendees/attendees.page.spec.ts b/src/app/shared/event/attendees/attendees.page.spec.ts
new file mode 100644
index 000000000..d2cb216ae
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { AttendeesPage } from './attendees.page';
+
+describe('AttendeesPage', () => {
+  let component: AttendeesPage;
+  let fixture: ComponentFixture<AttendeesPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AttendeesPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AttendeesPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/event/attendees/attendees.page.ts b/src/app/shared/event/attendees/attendees.page.ts
new file mode 100644
index 000000000..64a8dce6d
--- /dev/null
+++ b/src/app/shared/event/attendees/attendees.page.ts
@@ -0,0 +1,93 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { EventsService } from 'src/app/services/events.service';
+import { ModalController, NavController } from '@ionic/angular';
+// import { AttendeeModalPage } from '../attendee-modal/attendee-modal.page';
+
+@Component({
+  selector: 'app-attendees',
+  templateUrl: './attendees.page.html',
+  styleUrls: ['./attendees.page.scss'],
+})
+export class AttendeesPage implements OnInit {
+
+  
+  segment:string = "true";
+  shouldShowCancel:boolean = true;
+
+  searchCountryString = ''; // initialize your searchCountryString string empty
+
+  @Output() openAttendeeModal = new EventEmitter<any>();
+  @Output() openAddEvent  = new EventEmitter<any>();
+  @Input() eventAttendees: EventPerson[];
+  @Output() GoBackEditOrAdd = new EventEmitter<any>();
+
+  
+  constructor(private eventService: EventsService, private modalCtrl: ModalController, 
+    private navCtrl: NavController) { 
+  }
+
+
+  ngOnInit() {
+  }
+
+  save(){
+    this.GoBackEditOrAdd.emit();
+    //this.openAddEvent.emit();
+    // this.modalCtrl.dismiss(this.eventAttendees);
+  }
+
+  close(){
+    this.GoBackEditOrAdd.emit();
+    // this.modalCtrl.dismiss(null);
+    //this.openAddEvent.emit();
+  }
+
+  removeAttendee(attendee: EventPerson)
+  {
+    let index: number = this.eventAttendees.findIndex((att) => {
+      return att.EmailAddress == attendee.EmailAddress
+    });
+
+    this.eventAttendees.splice(index, 1);
+  }
+  
+  async addAttendees() {
+  
+    console.log('Event Intervenient');
+    this.openAttendeeModal.emit();
+
+  /*     const modal = await this.modalCtrl.create({
+      component: AttendeeModalPage,
+      componentProps: {
+        eventPersons: this.eventAttendees
+      },
+      cssClass: 'attendee-modal',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then((data) => {
+      let newattendees: EventPerson[] = data['data'];
+      
+      if (newattendees != null)
+      {
+        newattendees.forEach(newattendee => {
+          let att = {
+            "EmailAddress": newattendee.EmailAddress,
+            "Name": newattendee.Name,
+            "IsRequired": (this.segment == "true")
+          };
+          if (this.eventAttendees == null)
+          {
+            this.eventAttendees = new Array();
+          }
+          this.eventAttendees.push(att);
+        });
+      }
+    }); */
+    
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve-routing.module.ts b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve-routing.module.ts
new file mode 100644
index 000000000..8b740ddb4
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventsToApprovePage } from './events-to-approve.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventsToApprovePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventsToApprovePageRoutingModule {}
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.module.ts b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.module.ts
new file mode 100644
index 000000000..4d4108c91
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EventsToApprovePageRoutingModule } from './events-to-approve-routing.module';
+
+import { EventsToApprovePage } from './events-to-approve.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventsToApprovePageRoutingModule
+  ],
+  declarations: [EventsToApprovePage]
+})
+export class EventsToApprovePageModule {}
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
new file mode 100644
index 000000000..77933ac48
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
@@ -0,0 +1,63 @@
+<ion-content>
+  <div class="title width-100">
+    <label>Eventos para Aprovação</label>
+    <ion-toolbar>
+      <ion-segment [(ngModel)]="profile">
+        <ion-segment-button value="MDGPR">
+          Seu calendário
+        </ion-segment-button>
+        <ion-segment-button value="PR">
+          Presidente da República
+        </ion-segment-button>
+      </ion-segment>
+    </ion-toolbar>
+   </div>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+     <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="main-content" [ngSwitch]="profile" *ngIf="eventsMDGPRList">
+   <!--  <div class="header-content width-100"> -->
+     
+  <!-- </div> --> 
+    <ion-list class="width-100" *ngSwitchCase="'MDGPR'" >
+      <ion-item 
+        class="item ion-no-padding width-100" 
+        *ngFor="let event of eventsMDGPRList" 
+        (click)="openApproveModal(event.serialNumber)">
+        <div class="event-mdgpr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+            <div class="approve-event-time">
+                <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+              </div>
+              <div class="approve-event-detail">
+                <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+              </div>
+          </div>
+      </ion-item>
+    </ion-list>
+    <ion-list class="width-100" *ngSwitchCase="'PR'">
+      <div class="width-100" *ngIf="eventsPRList">
+          <ion-item
+            class=" ion-no-padding width-100"
+            *ngFor="let event of eventsPRList"
+            (click)="openApproveModal(event.serialNumber)">
+            <div class="item event-pr-{{event.workflowInstanceDataFields.Agenda}} width-100">
+                <div class="approve-event-time">
+                  <p>{{event.workflowInstanceDataFields.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate != event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }} - {{ event.workflowInstanceDataFields.EndDate | date: 'dd/M/yy'}}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <p *ngIf="event.workflowInstanceDataFields.StartDate == event.workflowInstanceDataFields.EndDate">{{event.workflowInstanceDataFields.StartDate | date: 'd/M/yy' }}  |  {{event.workflowInstanceDataFields.Location}}</p>
+                  <h3>{{event.workflowInstanceDataFields.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+      </div>
+    </ion-list>
+  </div>
+</ion-content>
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
new file mode 100644
index 000000000..7727a9871
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.scss
@@ -0,0 +1,90 @@
+:host{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+}
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+  }
+  ion-item-sliding{
+    margin-top: 5px;
+  }
+  .main-content{
+    margin-top: 20px;
+    .item{
+      --inner-padding-end: 0 !important;
+      --inner-padding-top: 10px;
+      --inner-padding-bottom:10px;
+    }
+    .event-pr-Oficial{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #99e47b;
+      overflow: auto;
+    }
+    .event-pr-Pessoal{
+      background-color: var(--white);
+      border-radius: 5px;
+      border-right: 5px solid #958bfc;
+      overflow: auto;
+    }
+    .event-mdgpr-Oficial{
+      border-radius: 5px;
+      border-right: 5px solid #ffb703;
+      overflow: auto;
+    }
+    .event-mdgpr-Pessoal{
+      border-radius: 5px;
+      border-right: 5px solid #f05d5e;
+      overflow: auto;
+    }
+    .approve-event-time{
+      float: left;
+    }
+    .approve-event-time p{
+      width: 33px;
+      font-family: Roboto;
+      font-size: 13px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: var(--Antartic-grey);
+      margin: 0;
+      padding-bottom: 10px;
+    }
+    .approve-event-detail{
+      float: left;
+      margin-left: 10px;
+    }
+    .approve-event-detail p{
+      //width: 250px;
+      font-family: Roboto;
+      font-size: 13px;
+      font-weight: normal;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: var(--black);
+      margin: 0;
+      padding-bottom: 10px;
+    }
+    .approve-event-detail h3{
+      width: 250px;
+      font-family: Roboto;
+      font-size: 15px;
+      font-weight: bold;
+      font-stretch: normal;
+      font-style: normal;
+      line-height: normal;
+      letter-spacing: normal;
+      color: #0d89d1;
+      margin: 0;
+      padding: 0;
+    }
+}
+  
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.spec.ts b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.spec.ts
new file mode 100644
index 000000000..a7e54d0a1
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventsToApprovePage } from './events-to-approve.page';
+
+describe('EventsToApprovePage', () => {
+  let component: EventsToApprovePage;
+  let fixture: ComponentFixture<EventsToApprovePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventsToApprovePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventsToApprovePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts
new file mode 100644
index 000000000..93c3b1d1c
--- /dev/null
+++ b/src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts
@@ -0,0 +1,99 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EventBody } from 'src/app/models/eventbody.model';
+import { EventPerson } from 'src/app/models/eventperson.model';
+import { Event } from 'src/app/models/event.model';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { ModalController, NavParams } from '@ionic/angular';
+import { NavigationEnd, Router } from '@angular/router';
+import { ApproveEventComponent } from '../../agenda/approve-event/approve-event.component';
+
+@Component({
+  selector: 'app-events-to-approve',
+  templateUrl: './events-to-approve.page.html',
+  styleUrls: ['./events-to-approve.page.scss'],
+})
+export class EventsToApprovePage implements OnInit {
+
+  //segment:string;
+  showLoader: boolean;
+  eventsPRList: any;
+  eventsMDGPRList: any;
+  eventPerson: EventPerson;
+  eventBody: EventBody;
+  categories: string[];
+  serialnumber:string;
+
+  @Input() profile:string;
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    private router: Router,
+    //private navParams: NavParams,
+    ) { }
+S
+  ngOnInit() {
+    //this.segment = this.navParams.get('segment');
+    /* console.log(this.navParams.get('md')); */
+    console.log(this.profile);
+    this.LoadToApproveEvents();
+
+    this.router.events.forEach((event) => {
+      if(event instanceof NavigationEnd && event.url == this.router.url) {
+        this.LoadToApproveEvents();
+      }
+    });
+
+    window.onresize = (event) => {
+      // if not mobile remove all component
+      if( window.innerWidth <= 1024){
+        this.modalController.dismiss();
+      }
+    };
+
+  }
+
+  LoadToApproveEvents(){
+    this.showLoader = true;
+    
+    this.processes.GetToApprovedEvents('PR','false').subscribe(res=>{
+      this.showLoader = false;
+      this.eventsPRList = res;
+    });
+    this.processes.GetToApprovedEvents('MDGPR','false').subscribe(res=>{
+      this.showLoader = false;
+      this.eventsMDGPRList = res;
+    });
+  }
+  async openApproveModal(eventSerialNumber){
+    let classs;
+    if( window.innerWidth <= 1024){
+      classs = 'modal modal-desktop'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
+    const modal = await this.modalController.create({
+      component: ApproveEventComponent,
+      componentProps:{
+        serialNumber: eventSerialNumber,
+        showAside: true,
+      },
+      cssClass: classs,
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  doRefresh(event) {
+    this.LoadToApproveEvents();
+    console.log('refresh');
+    setTimeout(() => {
+       event.target.complete();
+     }, 2000);
+  }
+  close(){
+    this.modalController.dismiss(null);
+  }
+
+
+}
diff --git a/src/app/shared/gabinete-digital/expediente/expediente-routing.module.ts b/src/app/shared/gabinete-digital/expediente/expediente-routing.module.ts
new file mode 100644
index 000000000..1305f8f4f
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente-routing.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ExpedientePageRoutingModule {}
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.module.ts b/src/app/shared/gabinete-digital/expediente/expediente.module.ts
new file mode 100644
index 000000000..960a04fd2
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente.module.ts
@@ -0,0 +1,23 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ExpedientePageRoutingModule } from './expediente-routing.module';
+
+import { ExpedientePage } from './expediente.page';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    SharedModule,
+    ExpedientePageRoutingModule
+  ],
+  declarations: [ExpedientePage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ExpedientePageModule {}
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.html b/src/app/shared/gabinete-digital/expediente/expediente.page.html
new file mode 100644
index 000000000..4ecda8927
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.html
@@ -0,0 +1,239 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content">
+        <app-btn-modal-dismiss (click)="openExpedientListPage()"></app-btn-modal-dismiss>
+        <div class="middle">
+          <ion-label class="title">Detalhes do Expediente</ion-label>
+        </div>
+        <div class="div-icon">
+            <ion-menu-button autoHide="false">
+              <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+            </ion-menu-button>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+<!-- <ion-header>
+  <ion-toolbar class="bg-blue">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/expediente"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Expediente</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false">
+        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
+      </ion-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header> -->
+
+<ion-menu autoHide="false" side="end" content-id="main-content">
+  <ion-header>
+    <ion-toolbar translucent>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-list>
+      <ion-item (click)="openExpedientActionsModal('0',fulltask)">
+        <ion-icon name="documents" slot="start"></ion-icon>
+        <ion-label>Efectuar Despacho</ion-label>
+      </ion-item>
+      <ion-item (click)="openExpedientActionsModal('1',fulltask)">
+        <ion-icon name="arrow-undo" slot="start"></ion-icon>
+        <ion-label>Pedido de Parecer</ion-label>
+      </ion-item>
+      <ion-item (click)="openExpedientActionsModal('2',fulltask)">
+        <ion-icon name="arrow-redo" slot="start"></ion-icon>
+        <ion-label>Pedido de Deferimento</ion-label>
+      </ion-item>
+      <ion-item (click)="openBookMeetingModal(task)">
+        <ion-icon name="calendar" slot="start"></ion-icon>
+        <ion-label>Marcar reunião</ion-label>
+      </ion-item>
+      <ion-item (click)="discartExpedient()">
+        <ion-icon name="trash" slot="start"></ion-icon>
+        <ion-label>Descartar</ion-label>
+      </ion-item>
+      <ion-item disabled>
+        <ion-icon name="paper-plane" slot="start"></ion-icon>
+        <ion-label>Enviar para pendentes</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+<div class="ion-page" id="main-content">
+  <ion-menu-button></ion-menu-button>
+</div>
+
+<ion-content  padding>
+  <div *ngIf="task">
+  <h3 class="h3-event-title">Detalhes do Expediente</h3>
+  <ion-item-group>
+    <ion-item>
+      <ion-label position="stacked">Assunto</ion-label>
+      <ion-input disabled="true">{{ task.Folio }}</ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Remetentes</ion-label>
+      <ion-input disabled="true">{{task.Remetente}}</ion-input><!-- {{ task.Senders }} -->
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data</ion-label>
+      <ion-input disabled="true" value=''>{{ task.CreateDate | date: 'dd-MM-yy | hh:mm'}}</ion-input>
+    </ion-item>
+    <ion-button (click)="viewDocument()" class="btn-ok-no-width" fill="clear" color="#fff" shape="round" expand="block">
+      <ion-icon name="attach" slot="start"></ion-icon>
+      Ver documento
+    </ion-button>
+  </ion-item-group>
+    <div *ngIf="eventsList">
+      <h3 class="h3-event-title">Eventos Associados</h3>
+    <!-- <ion-list>
+        <ion-item-sliding>
+          <ion-item lines="none" 
+          *ngFor="let event of eventsList"
+          [routerLink]="['/home/gabinete-digital/expediente/events/', event.EventId, 'gabinete-digital/expediente/' + serialnumber]">
+            <div class="div-item-{{event.CalendarName}}">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
+                </div>
+                <div class="div-content-{{event.CalendarName}}">
+                  <h3 class="capitalizeText">{{event.Subject}}</h3>
+                  <p>{{event.StartDate | date: 'dd-MM-yy | hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</p>
+                </div>
+              </div>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small capitalizeText">{{event.Location}}</p>
+                </div>
+                <div *ngIf="event.HasAttachments" class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+        </ion-item-sliding>
+    </ion-list> -->
+
+    <ion-list>
+      <div *ngIf="eventsList">
+        <ion-item-sliding>
+          <ion-item 
+            class="Rectangle" lines="none" 
+            *ngFor="let event of eventsList"
+            (click)="viewEventDetail(event.EventId)"
+          >
+              <!-- [routerLink]="['/home/events', event.EventId, 'events']" -->
+              <div class="content-{{profile}}-{{event.CalendarName}}">
+                <div class="approve-event-time">
+                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
+                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
+                </div>
+                <div class="approve-event-detail">
+                  <p *ngIf="event.StartDate != event.EndDate">{{event.StartDate | date: 'd/M/yy' }} - {{ event.EndDate | date: 'dd/mm/yy'}}  |  {{event.Location}}</p>
+                  <p *ngIf="event.StartDate == event.EndDate">{{event.StartDate | date: 'd/M/yy' }}  |  {{event.Location}}</p>
+                  <h3>{{event.Subject}}</h3>
+                </div>
+              </div>
+            </ion-item>
+        </ion-item-sliding>
+      </div>
+    </ion-list>
+
+
+  </div>
+  <!-- <div *ngIf="!eventsList"> 
+    <ion-list>
+      <ion-list-header>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+     
+    </ion-list>
+  </div> -->
+
+  
+</div>
+  <div *ngIf="!task">
+    <ion-list>
+      <ion-list-header>
+        <ion-label>
+          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+        </ion-label>
+      </ion-list-header>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-button color="medium" shape="round" expand="block">
+        <!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
+        <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+      </ion-button>
+    </ion-list>
+  </div>
+</ion-content>
+
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.scss b/src/app/shared/gabinete-digital/expediente/expediente.page.scss
new file mode 100644
index 000000000..b906a9f52
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.scss
@@ -0,0 +1,225 @@
+@import '~src/function.scss';
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+    .main-header{
+        width: 100%; /* 400px */
+        height: 100%;
+        font-family: Roboto;
+        border-top-left-radius: 25px;
+        border-top-right-radius: 25px;
+        background-color: #fff;
+        overflow:hidden;
+        padding: 30px 20px 0px 20px;
+        color:#000;
+        transform: translate3d(0, 1px, 0);
+        
+        .header-top{
+          width: 360px;
+          margin: 0px auto;
+          overflow: auto;
+          padding: 0 !important;
+          background: #fff;
+           .middle{
+            padding: 0!important;
+            float: left;
+            width: 280px;
+            margin: 2.5px 0 0 5px;
+            display: flex;
+            align-items: center;
+            
+          }
+          .right{
+            padding: 0!important;
+            float: right;
+            font-size: 25px;
+            color: #0782c9;
+            margin: 5px 0 0 0;
+          }
+        }
+        .header-bottom{
+          width: 310px;
+          overflow: auto;
+          margin: 0 auto;
+
+          .header-bottom-icon{
+            width: 30px;
+            font-size: 25px;
+            float: left;
+            padding: 2px;
+
+          }
+          .header-bottom-contacts{
+            width: 275px;
+            font-size: 15px;
+            color: #797979;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            float: left;
+            padding: 5px;
+            margin: 1px;
+          }
+        }
+    
+        .title{
+          font-size: 25px;
+          overflow: auto;
+          float: left;
+        }
+        .div-icon{
+          width: 40px;
+          float: right;
+          font-size: 35px;
+          overflow: auto;
+          padding: 1px;
+        }
+    }
+ }
+ion-item-group{
+    margin: 15px;
+}
+ion-button{
+    display: block;
+    width: 80%;
+    margin: 20px auto;
+}
+.h3-event-title{
+    padding: 15px 0 0px 25px;
+    font-weight: bold;
+}
+
+//DIV
+.div-item-Oficial{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cab0dc; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-item-Pessoal{
+    width: 100%;
+    overflow: auto;
+    border-bottom: 1px solid #ccc;
+    margin: 10px 0 5px 0;
+    /* background: #cbeecb; */
+    /* border-radius: 20px; */
+    /* padding: 10px; */
+    /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+  }
+  .div-up{
+    width: 100%;
+    overflow: auto;
+  }
+  .div-up h3{
+    margin: 0;
+    padding: 0;
+    font-size: 17px;
+    width: 100%;
+  }
+  .div-icon{
+    width: 10%;
+    font-size: 22px;
+    float: left;
+    color: #808080;
+  }
+  .div-icon ion-icon{
+    display: block;
+    margin: 0 auto;
+  
+  }
+  .div-content-Oficial{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cab0dc;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Pessoal{
+    width: 85%;
+    float: left;
+    border-left: 4px solid #cbeecb;
+    padding: 0 0 0 12px;
+  }
+  .div-content-Oficial h3, .div-content-Pessoal h3{
+    font-size: 14pt;
+    /* border: 1px solid red; */
+  }
+  .div-content-Oficial p, .div-content-Pessoal p{
+    font-size: 12pt;
+    color: rgb(94, 92, 92);
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+  .div-botton{
+    width: 100%;
+    overflow: auto;
+    margin: 10px 0 5px 0;
+  }
+  .div-botton-left{
+    width: 10%;
+    float: left;
+  }
+  .ion-icon-location{
+    text-align: center;
+    display: block;
+    color: #000;
+    font-size: 16px;
+    margin: 0 auto;
+  }
+  .div-botton-middle{
+    width: 75%;
+    float: left;
+    margin-top: 0.5px;
+  }
+  .div-botton-middle p{
+    padding: 0;
+    margin: 0;
+  }
+  .div-botton-right{
+    width: 10%;
+    float: left;
+    margin: 0;
+    padding: 0;
+  }
+  .ion-icon-attach{
+    color: #666666;
+    font-size: 20px;
+  }
+/* TOGGLE BUTTON */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 34px;
+    float: right;
+    margin:20px 20px 0 0;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 6px auto;
+    background-color: #0782c9;
+    overflow: auto;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 150px;
+    margin: 2.5px 0 2.5px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.spec.ts b/src/app/shared/gabinete-digital/expediente/expediente.page.spec.ts
new file mode 100644
index 000000000..760d8b73a
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExpedientePage } from './expediente.page';
+
+describe('ExpedientePage', () => {
+  let component: ExpedientePage;
+  let fixture: ComponentFixture<ExpedientePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpedientePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExpedientePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/gabinete-digital/expediente/expediente.page.ts b/src/app/shared/gabinete-digital/expediente/expediente.page.ts
new file mode 100644
index 000000000..1d66657cf
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expediente/expediente.page.ts
@@ -0,0 +1,164 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { AttachmentsService } from 'src/app/services/attachments.service';
+import { EventsService } from 'src/app/services/events.service';
+import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { DailyWorkTask } from 'src/app/models/dailyworktask.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { formatDate } from '@angular/common';
+
+import { MenuController, ModalController, NavParams } from '@ionic/angular';
+import { AlertService } from 'src/app/services/alert.service';
+import { Event } from 'src/app/models/event.model';
+import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
+import { momentG }  from 'src/plugin/momentG';
+import { ExpedientTaskModalPage } from 'src/app/pages/gabinete-digital/expediente/expedient-task-modal/expedient-task-modal.page';
+import { BookMeetingModalPage } from 'src/app/pages/gabinete-digital/expediente/book-meeting-modal/book-meeting-modal.page';
+
+@Component({
+  selector: 'app-expediente',
+  templateUrl: './expediente.page.html',
+  styleUrls: ['./expediente.page.scss'],
+})
+export class ExpedientePage implements OnInit {
+
+  task: any;
+  fulltask: any;
+  eventsList: Event[];
+  //serialnumber: string;
+  //profile: string;
+
+  @Input() profile:string;
+  @Input() serialNumber:string;
+  @Output() openExpedientList:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(private activateRoute: ActivatedRoute,
+    private processes: ProcessesService,
+    private iab: InAppBrowser,
+    private attachments: AttachmentsService,
+    private events: EventsService,
+    private menu: MenuController,
+    private router: Router,
+    private modalController: ModalController,
+    //private navParams: NavParams,
+    private alertService: AlertService) { 
+      //this.serialnumber = this.navParams.get('serialNumber');
+      //this.profile = this.navParams.get('profile');
+    }
+
+  ngOnInit() {
+    this.profile = "mdgpr";
+    console.log(this.serialNumber);
+    
+    this.activateRoute.paramMap.subscribe(paramMap => {
+      if (!paramMap.has('SerialNumber')) {
+        return;
+      }
+      /* this.serialnumber = paramMap.get('SerialNumber'); */
+      this.LoadTaskDetail(this.serialNumber);
+      this.LoadRelatedEvents(this.serialNumber);
+    });
+    this.LoadTaskDetail(this.serialNumber);
+    this.LoadRelatedEvents(this.serialNumber);
+  }
+  openExpedientListPage(){
+    this.openExpedientList.emit();
+  }
+
+
+  async LoadTaskDetail(serial: string) {
+    this.processes.GetTask(serial).subscribe(res => {
+      this.task = {
+        "SerialNumber": res.serialNumber,
+        "Folio": res.workflowInstanceFolio,
+        "Senders": res.originator.email,
+        "CreateDate": momentG(new Date(res.taskStartDate),'yyyy-MM-dd HH:mm:ss'),
+        "DocumentURL": res.workflowInstanceDataFields.ViewerRequest,
+        "Remetente": res.workflowInstanceDataFields.Sender,
+      }
+      this.fulltask = res;
+      console.log(res);
+
+    });
+  }
+
+  async LoadRelatedEvents(serial: string) {
+    if (this.eventsList == null) {
+      this.attachments.getAttachmentsBySerial(serial).subscribe(res => {
+        console.log(res);
+        res.forEach(att => {
+          if (this.eventsList == null) {
+            this.eventsList = new Array();
+          }
+          this.events.getEvent(att.ParentId).subscribe(event => {
+            this.eventsList.push(event);
+            console.log(this.eventsList);
+          });
+        });
+      });
+    }
+  }
+
+  viewDocument(){
+    const url: string = this.task.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
+    const browser = this.iab.create(url,"_blank");
+    browser.show();
+  }
+
+  openMenu() {
+    this.menu.open();
+  }
+
+  async openExpedientActionsModal(taskAction: any, task: any) {
+    const modal = await this.modalController.create({
+      component: ExpedientTaskModalPage,
+      componentProps: {
+        taskAction: taskAction,
+        task: task,
+      },
+      cssClass: 'expedient-task-modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  discartExpedient() {
+    let body = { "serialNumber": this.serialNumber, "action": "Task Completed" }
+    console.log(body);
+    this.processes.PostTaskAction(body);
+    this.router.navigate(['/home/gabinete-digital/expediente']);
+  }
+
+  async openBookMeetingModal(task: any) {
+    const modal = await this.modalController.create({
+      component: BookMeetingModalPage,
+      componentProps: {
+        task: task,
+      },
+      cssClass: 'book-meeting-modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
+  async viewEventDetail(eventId: any) {
+    console.log(this.profile);
+
+    const modal = await this.modalController.create({
+      component: ViewEventPage,
+      componentProps: {
+        eventId: eventId,
+        profile: this.profile,
+      },
+      cssClass: 'modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then((res) => {
+      if (res) {
+      }
+    });
+  }
+}
diff --git a/src/app/shared/gabinete-digital/expedients/expedients-routing.module.ts b/src/app/shared/gabinete-digital/expedients/expedients-routing.module.ts
new file mode 100644
index 000000000..d5c5b384e
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ExpedientsPage } from './expedients.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ExpedientsPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ExpedientsPageRoutingModule {}
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.module.ts b/src/app/shared/gabinete-digital/expedients/expedients.module.ts
new file mode 100644
index 000000000..b6f5415c5
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ExpedientsPageRoutingModule } from './expedients-routing.module';
+
+import { ExpedientsPage } from './expedients.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ExpedientsPageRoutingModule
+  ],
+  declarations: [ExpedientsPage]
+})
+export class ExpedientsPageModule {}
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.html b/src/app/shared/gabinete-digital/expedients/expedients.page.html
new file mode 100644
index 000000000..00b6cffe0
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.html
@@ -0,0 +1,86 @@
+<ion-header class="ion-no-border">
+  <div class="title">
+    <ion-label >Correspondência</ion-label>
+  </div>
+  <ion-toolbar>
+    <ion-segment [(ngModel)]="segment">
+      <ion-segment-button value="expediente">
+        Expediente
+      </ion-segment-button>
+      <ion-segment-button value="pendentes">
+        Pendentes
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+</ion-header>
+<ion-content>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-refresher-content
+        pullingIcon="chevron-down-circle-outline"
+        pullingText="deslize para actualizar"
+        refreshingSpinner="circles"
+        refreshingText="A actualizar...">
+      </ion-refresher-content>
+    </ion-refresher>
+  
+  <div class="width-100" [ngSwitch]="segment" *ngIf="taskslist">
+    <ion-list *ngSwitchCase="'expediente'">
+      <ion-item 
+          class="expediente ion-no-padding"  
+          *ngFor = "let task of taskslist"
+          (click)="viewExpedientDetail(task.SerialNumber)"
+          >
+          <!--  [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
+            <div class="item width-100">
+              <div class="exp-top-detail">
+                <div class="exp-date">
+                  <ion-label>{{ task.CreateDate | date: 'dd-MM-yy' }}</ion-label>
+                </div>
+                <div class="exp-remetente">
+                  <ion-label>{{task.Remetente}}</ion-label>
+                </div>
+                <div class="exp-icon">
+                  <ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
+                  <label></label>
+                </div>
+              </div>
+              <div class="exp-bottom-detail">
+                <ion-label>{{ task.Folio }}</ion-label>
+              </div>
+            </div>
+          </ion-item>
+    </ion-list>
+    <ion-list *ngSwitchCase="'pendentes'">
+      <ion-item-group>
+        <ion-item-sliding>
+        </ion-item-sliding>
+      </ion-item-group>
+    </ion-list>
+  </div>
+  <div *ngIf="!taskslist">
+  
+    <ion-list>
+      <ion-item>
+        <ion-thumbnail slot="end">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="end">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3><ion-skeleton-text animated style="width: 50%"></ion-skeleton-text></h3>
+          <p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+</ion-content>
+
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.scss b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
new file mode 100644
index 000000000..653bf936c
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.scss
@@ -0,0 +1,168 @@
+@import '~src/function.scss';
+/* CONTENT */
+:host{
+    padding: 30px 20px 0 20px !important;
+    margin: 0;
+}
+.title{
+    font-family: Roboto;
+    font-size: 25px;
+    color:#000;
+    overflow: auto;
+  }
+.item-list-small{
+    font-size: 11px;
+    overflow: auto;
+  }
+  .ion-item-class{
+    padding: 0;
+  
+  }
+  .label-text{
+    width: 100%;
+    padding: 0;
+    margin: 0;
+  }
+//DIV
+ion-item{
+  --background: none;
+}
+.item {
+    //border-radius: 15px;
+    //box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
+    //Sborder: solid 1px #e9e9e9;
+    background-color: var(--white);
+    margin: 0 auto;
+    //padding: 10px;
+    margin-bottom: 10px;
+    overflow: auto;
+  }
+.div-content-expediente{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #dae3f3;
+  padding:5px 5px 15px 5px;
+  margin: 10px 0 10px 0;
+  background:  #dae3f3;
+  border-radius: 20px;
+}
+.div-content-pendentes{
+  width: 100%;
+  float: left;
+  border-left: 3px solid #d9d9d9;
+  padding: 5px;
+}
+  .div-content-expediente h3, .div-content-pendentes h3{
+    margin: 0;
+    padding: 0;
+    font-size: 14pt;
+    width: 100%;
+  }
+  .div-icon{
+    width: 10%;
+    font-size: 20px;
+    float: left;
+    color: #808080;
+  }
+  .div-icon ion-icon{
+    display: block;
+    margin: 0 auto;
+  
+  }
+  .div-content-expediente p, .div-content-pendentes p{
+    font-size: 14pt;
+    color: rgb(94, 92, 92);
+    padding: 0;
+    margin: 0;
+  }
+  .span-left{
+      /* border: 1px solid red; */
+      float: left;
+      font-size: 12px;
+      padding-left: 18px;
+  }
+  .span-right{
+    /* border: 1px solid blue; */
+    text-align: right;
+    float: right;
+    font-size: 12px;
+    padding-right: 18px;
+}
+
+/* New CSS */
+.expediente{
+  padding-top: 10px;
+}
+.exp-list-item{
+  //width: 368px;
+  overflow: auto;
+  /* border-bottom: 1px solid gray; */
+  margin: 10px auto;
+}
+.exp-top-detail{
+  width: 100%;
+  overflow: auto;
+}
+.exp-date{
+  width: auto;
+  font-family: Roboto;
+  font-size: 13px;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #797979;
+  float: left;
+}
+.exp-remetente{
+  //width: 200px;
+  font-family: Roboto;
+  font-size: 13px;
+  font-weight: normal;
+  color: #000000;
+  float: left;
+  margin-left: 16px;
+
+}
+.exp-icon{
+  width: 45px;
+  float: right;
+  font-size: 13px;
+}
+.exp-icon ion-icon{
+  font-size: 25px;
+  color: #42b9fe;
+}
+.exp-bottom-detail{
+  float: left;
+  font-family: Roboto;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0d89d1;
+}
+.div-top-header{
+  width: 400px;
+  margin: 6px auto;
+  background-color: #0782c9;
+  overflow: auto;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 150px;
+  margin: 2.5px 0 2.5px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}
\ No newline at end of file
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.spec.ts b/src/app/shared/gabinete-digital/expedients/expedients.page.spec.ts
new file mode 100644
index 000000000..0d73188e6
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ExpedientsPage } from './expedients.page';
+
+describe('ExpedientsPage', () => {
+  let component: ExpedientsPage;
+  let fixture: ComponentFixture<ExpedientsPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpedientsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExpedientsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/gabinete-digital/expedients/expedients.page.ts b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
new file mode 100644
index 000000000..7ed94ea63
--- /dev/null
+++ b/src/app/shared/gabinete-digital/expedients/expedients.page.ts
@@ -0,0 +1,99 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { CalendarComponent } from 'ionic2-calendar';
+
+import { DailyWorkTask } from '../../../models/dailyworktask.model';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { formatDate } from '@angular/common';
+import { LoadingService } from 'src/app/services/loading.service';
+import { ModalController, NavParams } from '@ionic/angular';
+import { ExpedienteDetailPage } from 'src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page';
+
+@Component({
+  selector: 'app-expedients',
+  templateUrl: './expedients.page.html',
+  styleUrls: ['./expedients.page.scss'],
+})
+export class ExpedientsPage implements OnInit {
+  segment:string;
+  //profile:string;
+
+  @ViewChild(CalendarComponent) myCal: CalendarComponent;
+
+  taskslist:DailyWorkTask[];
+  serialNumber:string;
+
+  @Input() profile:string;
+  @Output() openExpedientDetail:EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    private processes:ProcessesService,
+    private modalController: ModalController,
+    ) { 
+      this.profile = 'mdgpr';
+    }
+
+  ngOnInit() {
+    //Inicializar segment
+    this.segment = "expediente";
+    this.LoadList();
+  }
+
+  openExpedientDetailPage(data){
+    console.log(data);
+    this.openExpedientDetail.emit(data);
+  }
+
+  LoadList(){
+    this.processes.GetTasksList("Expediente", false).subscribe(result => {
+      this.taskslist = new Array();
+      let res = result.reverse();
+      res.forEach(element => {
+        let task: DailyWorkTask = {
+          "SerialNumber": element.serialNumber,
+          "Folio": element.workflowInstanceDataFields.Subject,
+          "Senders": element.originator.email,
+          "CreateDate": formatDate(new Date(element.taskStartDate), 'yyyy-MM-dd HH:mm', 'pt'),
+          "DocumentURL": element.workflowInstanceDataFields.ViewerRequest,
+          "Remetente": element.workflowInstanceDataFields.Remetente
+        }
+        this.taskslist.push(task);
+      });
+    });
+  }
+
+  doRefresh(event) {
+    this.LoadList();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  async viewExpedientDetail(serialNumber:any) {
+    console.log(this.profile);
+
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop'
+    }
+
+    const modal = await this.modalController.create({
+      component: ExpedienteDetailPage,
+      componentProps:{
+        enterAnimation: "",
+        serialNumber: serialNumber,
+        profile: this.profile,
+      },
+      cssClass: classs,
+    });
+    await modal.present();
+    modal.onDidDismiss().then((res)=>{
+      
+    });
+  }
+
+}
+  
\ No newline at end of file
diff --git a/src/app/shared/header-pr/header-pr.page.scss b/src/app/shared/header-pr/header-pr.page.scss
index cf8935c63..feafb678e 100644
--- a/src/app/shared/header-pr/header-pr.page.scss
+++ b/src/app/shared/header-pr/header-pr.page.scss
@@ -1,28 +1,47 @@
-.div-top-header{
-    width: 400px;
-    margin: 0 auto;
-    background-color: #0782c9;
-    overflow: auto;
-    padding-top: 15px;
-    border: 0!important;
+@import '~src/function.scss';
 
-    .div-search{
-      font-size: 45px;
-      float: left;
-      margin: 0 0 0 10px
-    }
-    .div-logo{
-      background: transparent;
-      width: 140px;
-      margin: 5px 0 0px 71px;
-      float: left;
-    }
-    .div-logo img{
-      width: 100%;
-    }
-    .div-profile{
-      font-size: 45px;
-      float: right;
-      margin-right: 10px;
-    }
-  }
\ No newline at end of file
+.div-top-header{
+  margin: 0 em(20px);
+  background-color: #0782c9;
+  padding-top: em(15px);
+  border: 0!important;
+}
+
+.div-logo{
+  background: transparent;
+  width: em(140px);
+  justify-content: center;
+  display: flex;
+}
+.div-logo img{
+  width: 100%;
+  margin: 0px auto;
+}
+.div-profile{
+  font-size: 45px;
+  justify-content: flex-end;
+  display: flex;
+}
+
+.desktop{
+  display: none;
+}
+
+@media only screen and (min-width: 1366px) {
+
+  .mobile{
+    display: none !important;
+  }
+  .desktop{
+    display: block;
+  }
+
+}
+
+.tab{
+  height: 65px;
+}
+
+.active{
+  border-top: 7px solid white;
+}
\ No newline at end of file
diff --git a/src/app/shared/header-pr/header-pr.page.ts b/src/app/shared/header-pr/header-pr.page.ts
index d09241781..2dbde5587 100644
--- a/src/app/shared/header-pr/header-pr.page.ts
+++ b/src/app/shared/header-pr/header-pr.page.ts
@@ -12,4 +12,8 @@ export class HeaderPrPage implements OnInit {
   ngOnInit() {
   }
 
+  locationPathname(): string {
+    return window.location.pathname
+  }
+  
 }
diff --git a/src/app/shared/header/header.page.html b/src/app/shared/header/header.page.html
index 679df1102..c582a9ab8 100644
--- a/src/app/shared/header/header.page.html
+++ b/src/app/shared/header/header.page.html
@@ -1,27 +1,83 @@
-<ion-toolbar class="bg-blue">
-  
-  <ion-grid>
-  
-    <ion-row class="div-top-header ion-justify-content-between">
-      <ion-col>
-        <div (click)="openSearch()" class="div-search">
-          <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+<ion-toolbar class="bg-blue pb-10">
+
+
+  <div class="mobile d-flex  div-top-header justify-space-between">
+    <div (click)="openSearch()" class="div-search">
+      <ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo height-fit-content">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile"  (click)="openProfile()">
+      <ion-icon class="font-45" *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
+      <ion-icon class="font-45" *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
+    </div>
+  </div>
+
+  <div class="desktop mx-20">
+    <div class="d-flex justify-space-between align-center">
+      <div tab="events" class="div-logo height-fit-content">
+        <img src='assets/images/logo-no-bg.png' alt='logo'>
+      </div>
+      
+      <div class="d-flex flex-1 pr-20 pl-50">
+        
+        <div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/events')" [class.active]="locationPathname() == '/home/events'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
+          <span>Ínicio</span>
         </div>
-      </ion-col>
-      <ion-col>
-        <div class="div-logo">
-          <img src='assets/images/logo-no-bg.png' alt='logo'>
+
+        <div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/agenda')"  [class.active]="locationPathname() == '/home/agenda'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
+          <span>Agenda</span>
         </div>
-      </ion-col>
-      <ion-col>
-        <div class="div-profile">
-          <ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
-          <ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/gabinete-digital')" [class.active]="locationPathname() == '/home/gabinete-digital'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
+          <span>Gabinete</span>
         </div>
-      </ion-col>
-    </ion-row>
-  
-  </ion-grid>
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/publications')"  [class.active]="locationPathname() == '/home/publications'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
+          <span>Acções</span>
+        </div>
+
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/chat')" [class.active]="locationPathname() == '/home/chat'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
+          <span>Chat</span>
+        </div>
+      
+      </div>
+
+      <div class="d-flex">
+        <div class="mr-10 d-flex align-center">
+          <ion-icon *ngIf="!showSearch" (click)="showSearch=true" class="font-45"  (click)="openSearch()" src='assets/images/icons-search.svg'></ion-icon>
+          <ion-icon  *ngIf="showSearch" (click)="closeSearch()" (click)="showSearch=false" class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+          <ion-form  *ngIf="showSearch">
+            <div class="d-flex search-input-container   ml-10 justify-between"  *ngIf="showSearch" >
+              <div class="icon" (click)="basicSearch()">
+                <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
+              </div>
+              <div class="input-text d-flex ion-align-items-center">
+                <ion-input [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch($event)" class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
+              </div>
+              <div class="icon" (click)="clearSearchInput()">
+                <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+              </div>
+            </div>
+          </ion-form>
+        </div>
+
+        <div class="div-profile justify-end d-flex" (click)="openProfile()">
+          <ion-icon class="font-45" *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
+          <ion-icon class="font-45" *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
   
 </ion-toolbar>
   
\ No newline at end of file
diff --git a/src/app/shared/header/header.page.scss b/src/app/shared/header/header.page.scss
index d18475831..45668c108 100644
--- a/src/app/shared/header/header.page.scss
+++ b/src/app/shared/header/header.page.scss
@@ -1,32 +1,65 @@
 @import '~src/function.scss';
 
 .div-top-header{
-  margin: 0 auto;
+  margin: 0 em(20px);
   background-color: #0782c9;
-  overflow: auto;
   padding-top: em(15px);
   border: 0!important;
+}
 
-  .div-search{
-    font-size: 45px;
-    margin: 0 0 0 10px
+.div-logo{
+  background: transparent;
+  width: em(140px);
+  justify-content: center;
+  display: flex;
+}
+.div-logo img{
+  width: 100%;
+  margin: 0px auto;
+}
+
+
+.desktop{
+  display: none;
+}
+
+@media only screen and (min-width: 1366px) {
+
+  .mobile{
+    display: none !important;
   }
-  .div-logo{
-    background: transparent;
-    width: em(140px);
-    margin: 0px auto;
-    margin-top: 5px;
+  .desktop{
+    display: block;
+  }
+
+}
+
+.tab{
+  height: 65px;
+}
+
+.active{
+  border-top: 7px solid white;
+}
+
+
+.search-input-container{
+  background-color: white;
+  border-radius: 27.5px;
+  border: solid 1px #ebebeb;
+  .icon{
+    color: #797979;
+    width: 45px;
+    height: 45px;
+    display: flex;
     justify-content: center;
-    display: flex;
+    font-size: 25px;
+    align-items: center;
   }
-  .div-logo img{
+  .input-text{
     width: 100%;
-    margin: 0px auto;
   }
-  .div-profile{
-    font-size: 45px;
-    margin-right: 10px;
-    justify-content: flex-end;
-    display: flex;
+  .icon-z{
+    width: 20px;
   }
 }
\ No newline at end of file
diff --git a/src/app/shared/header/header.page.ts b/src/app/shared/header/header.page.ts
index bda88e1b1..c3b00bd9f 100644
--- a/src/app/shared/header/header.page.ts
+++ b/src/app/shared/header/header.page.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
+import { Router } from '@angular/router';
+import { ProfileComponent } from '../headers/header-no-search/profile/profile.component';
 
 @Component({
   selector: 'app-header',
@@ -10,26 +12,103 @@ import { SearchPage } from 'src/app/pages/search/search.page';
 export class HeaderPage implements OnInit {
 
   profile: string = 'mdgpr';
+  searchSubject: string = '';
+  showSearch:false;
 
-  constructor(private modalController: ModalController) {
+  constructor(
+    private router: Router,private modalController: ModalController,
+    private animationController: AnimationController,) {
     
     window['header'] = (profile:string) => {
       this.profile = profile;
     }
 
+    
+    router.events.subscribe((val) => {
+      this.showSearch=false;
+      this.modalController.dismiss()
+    });
+
+
    }
 
   ngOnInit() {
   }
 
+  locationPathname(): string {
+    return window.location.pathname
+  }
+
   async openSearch() {
     const modal = await this.modalController.create({
       component: SearchPage,
-      cssClass: 'group-messages',
+      cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
       componentProps: {
       }
     });
     return await modal.present();
   }
 
-}
+  changeRoute(path){
+    this.router.navigateByUrl(path)
+  }
+
+
+  async openProfile() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
+    const modal = await this.modalController.create({
+      enterAnimation,
+      leaveAnimation,
+      component: ProfileComponent,
+      cssClass: 'model profile-modal search-submodal',
+      componentProps: {
+      }
+    });
+    return await modal.present();
+  }
+
+  async dynamicSearch(){
+    window['dynamicSearch'](this.searchSubject)
+  }
+
+
+  async closeSearch(){
+    this.modalController.dismiss()
+  }
+
+    /**
+    * @description set empty value to searchSubject
+    */
+   clearSearchInput(){
+    this.searchSubject = "";
+    window['dynamicSearch'](this.searchSubject)
+   }
+
+   async basicSearch(){
+    window['searchTriger']()
+   }
+}
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.html b/src/app/shared/headers/header-no-search/header-no-search.page.html
index 917145d9e..746cfb579 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.html
+++ b/src/app/shared/headers/header-no-search/header-no-search.page.html
@@ -1,25 +1,68 @@
-<ion-toolbar class="bg-blue">
-  
-  <ion-grid>
-  
-    <ion-row class="div-top-header ion-justify-content-between">
-      <ion-col>
-        <!-- <div (click)="openSearch()" class="div-search">
+<ion-toolbar class="bg-blue pb-10">
+
+
+  <div class="mobile d-flex  div-top-header justify-space-between">
+    <div (click)="openSearch()" class="div-search">
+     <!--  <ion-icon src='assets/images/icons-search.svg'></ion-icon> -->
+    </div>
+    <div class="div-logo height-fit-content">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    
+    <div class="div-profile" (click)="openProfile()">
+      <ion-icon class="font-45" src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
+
+  <div class="desktop mx-20">
+    <div class="d-flex justify-space-between align-center">
+      <div tab="events" class="div-logo height-fit-content">
+        <img src='assets/images/logo-no-bg.png' alt='logo'>
+      </div>
+      
+      <div class="d-flex flex-1 pr-20 pl-50">
+        
+        <div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/events')" [class.active]="locationPathname() == '/home/events'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
+          <span>Ínicio</span>
+        </div>
+
+        <div class="tab mr-20 d-flex align-center" (click)="changeRoute('/home/agenda')"  [class.active]="locationPathname() == '/home/agenda'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
+          <span>Agenda</span>
+        </div>
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/gabinete-digital')" [class.active]="locationPathname() == '/home/gabinete-digital'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
+          <span>Gabinete</span>
+        </div>
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/publications')"  [class.active]="locationPathname() == '/home/publications'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
+          <span>Acções</span>
+        </div>
+
+
+        <div class="tab mr-20  d-flex align-center" (click)="changeRoute('/home/chat')" [class.active]="locationPathname() == '/home/chat'">
+          <ion-icon class="font-40" src='assets/images/icons-nav-grupos-inactive-dk-white.svg'></ion-icon>
+          <span>Chat</span>
+        </div>
+      
+      </div>
+
+      <div class="d-flex">
+       <!--  <div (click)="openSearch()" class="div-search mr-10">
           <ion-icon src='assets/images/icons-search.svg'></ion-icon>
         </div> -->
-      </ion-col>
-      <ion-col>
-        <div class="div-logo">
-          <img src='assets/images/logo-no-bg.png' alt='logo'>
-        </div>
-      </ion-col>
-      <ion-col>
-        <div class="div-profile">
+    
+        <div class="div-profile" (click)="openProfile()">
           <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
         </div>
-      </ion-col>
-    </ion-row>
-  
-  </ion-grid>
+      </div>
+    </div>
+
+
+  </div>
   
 </ion-toolbar>
+  
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.scss b/src/app/shared/headers/header-no-search/header-no-search.page.scss
index d18475831..feafb678e 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.scss
+++ b/src/app/shared/headers/header-no-search/header-no-search.page.scss
@@ -1,32 +1,47 @@
 @import '~src/function.scss';
 
 .div-top-header{
-  margin: 0 auto;
+  margin: 0 em(20px);
   background-color: #0782c9;
-  overflow: auto;
   padding-top: em(15px);
   border: 0!important;
+}
 
-  .div-search{
-    font-size: 45px;
-    margin: 0 0 0 10px
+.div-logo{
+  background: transparent;
+  width: em(140px);
+  justify-content: center;
+  display: flex;
+}
+.div-logo img{
+  width: 100%;
+  margin: 0px auto;
+}
+.div-profile{
+  font-size: 45px;
+  justify-content: flex-end;
+  display: flex;
+}
+
+.desktop{
+  display: none;
+}
+
+@media only screen and (min-width: 1366px) {
+
+  .mobile{
+    display: none !important;
   }
-  .div-logo{
-    background: transparent;
-    width: em(140px);
-    margin: 0px auto;
-    margin-top: 5px;
-    justify-content: center;
-    display: flex;
-  }
-  .div-logo img{
-    width: 100%;
-    margin: 0px auto;
-  }
-  .div-profile{
-    font-size: 45px;
-    margin-right: 10px;
-    justify-content: flex-end;
-    display: flex;
+  .desktop{
+    display: block;
   }
+
+}
+
+.tab{
+  height: 65px;
+}
+
+.active{
+  border-top: 7px solid white;
 }
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/header-no-search.page.ts b/src/app/shared/headers/header-no-search/header-no-search.page.ts
index e11671b94..2eb9191cc 100644
--- a/src/app/shared/headers/header-no-search/header-no-search.page.ts
+++ b/src/app/shared/headers/header-no-search/header-no-search.page.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
-
+import { MenuController } from '@ionic/angular';
+import { ProfileComponent } from './profile/profile.component';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-header-no-search',
   templateUrl: './header-no-search.page.html',
@@ -9,19 +11,56 @@ import { SearchPage } from 'src/app/pages/search/search.page';
 })
 export class HeaderNoSearchPage implements OnInit {
 
-  constructor(private modalController: ModalController) { }
+  constructor(private modalController: ModalController,
+    private menu: MenuController,
+    private animationController: AnimationController,
+    private router: Router) { }
 
   ngOnInit() {
   }
 
-  async openSearch() {
+  async openProfile() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
     const modal = await this.modalController.create({
-      component: SearchPage,
-      cssClass: 'group-messages',
+      enterAnimation,
+      leaveAnimation,
+      component: ProfileComponent,
+      cssClass: 'model profile-modal',
       componentProps: {
       }
     });
     return await modal.present();
   }
 
+  changeRoute(path){
+    this.router.navigateByUrl(path)
+  }
+
+  locationPathname(): string {
+    return window.location.pathname
+  }
 }
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.html b/src/app/shared/headers/header-no-search/profile/profile.component.html
new file mode 100644
index 000000000..f67dc9e2b
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.component.html
@@ -0,0 +1,68 @@
+
+
+<ion-content class=" bg-blue">
+    <div class="profile-content">
+
+        <div class="d-flex justify-end" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+    
+    
+        <div class="go-back d-flex align-center" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+        </div>
+    
+        <div >
+            <div class="d-flex align-center">       
+                
+                <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
+       
+            </div>
+        </div>
+    
+        <div class="profile-info">
+            <div class="label-text">Dados Perfil</div>
+            <div class="user-role">Ministro e Director do Gabinete do Presidente da Rep.</div>
+            <div class="email">email@exemple.ao</div>
+        </div>
+
+
+        <div class="login-preference">
+            <div class="preference">Preferência Login</div>
+
+            <ion-row>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    Impressão Digital
+                </ion-col>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    PIN 
+                </ion-col>
+            </ion-row>
+
+        </div>
+
+
+    </div>
+
+</ion-content>
+
+
+
+<ion-footer class=" footer-container ion-no-border bg-blue">
+    <div class="d-flex justify-space-between">
+        <ion-buttons slot="start" (click)="close()">
+            <ion-button class="btn-cancel" fill="clear" color="#061b52" >
+              <ion-label>Cancelar</ion-label>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="end" (click)="close()">
+            <ion-button class="btn-ok" fill="clear" color="#fff" >
+              <ion-label>Gravar</ion-label>
+            </ion-button>
+          </ion-buttons>
+    
+    </div>
+
+  </ion-footer>
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.scss b/src/app/shared/headers/header-no-search/profile/profile.component.scss
new file mode 100644
index 000000000..6ee1890b9
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.component.scss
@@ -0,0 +1,60 @@
+.profile-content{
+    padding: 20px 20px;
+}
+
+.icon{
+    font-size: 35px;
+}
+
+.go-back{
+    font-family: Roboto;
+    font-size: 25px;
+    .icon{
+        margin-right: 7px;
+    }
+}
+
+.profile-pic{
+    width: 200px;
+    height: 200px;
+    border-radius: 20px;
+    margin: 0px auto;
+}
+
+.profile-info{
+    .label-text{
+        font-size: 15px;
+        font-weight: bold;
+        color: white;
+        margin-bottom: 10px;
+    }
+    
+    .user-role{
+        background-color: white;
+        border-radius: 5px;
+        padding: 12px;
+        font-family: Roboto;
+        font-size: 13px;
+        color: black;
+        text-align: center;
+    }
+    
+    .email {
+        margin-top: 15px;
+    }
+    
+}
+
+.login-preference{
+    margin-top: 44px;
+
+    .preference{
+        font-family: Roboto;
+        font-size: 15px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+    .checkBox{
+        margin-right: 10px;
+    }
+}
\ No newline at end of file
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts b/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts
new file mode 100644
index 000000000..d50b2595b
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/headers/header-no-search/profile/profile.component.ts b/src/app/shared/headers/header-no-search/profile/profile.component.ts
new file mode 100644
index 000000000..167fba49a
--- /dev/null
+++ b/src/app/shared/headers/header-no-search/profile/profile.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss'],
+})
+export class ProfileComponent implements OnInit {
+
+  constructor(private modalController:ModalController) { }
+
+  ngOnInit() {}
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+}
diff --git a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.html b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.html
index ebd9a9c01..63aa6619e 100644
--- a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.html
+++ b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.html
@@ -1,5 +1,17 @@
-<ion-content>
-  <ion-row>
+<ion-content class="container">
+  <div class="arrow-right">
+    <ion-icon (click)="close()" slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+  </div>
+  <div class="buttons">
+    <button full class="btn-ok" shape="round" >Tirar Fotografia</button>
+    <button class="btn-ok" shape="round" >Digitalizar Documento</button>
+    <button full class="btn-ok" shape="round" >Anexar Fotografia</button>
+    <button class="btn-ok" shape="round" >Anexar Documento</button>
+    <div class="solid"></div>
+    <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
+  </div>
+
+  <!-- <ion-row>
     <ion-col>
       <button full class="btn-ok" shape="round" >Tirar Fotografia</button>
     </ion-col>
@@ -19,5 +31,5 @@
     </ion-col>
     <ion-col>
     </ion-col>
-  </ion-row>
+  </ion-row> -->
 </ion-content>
diff --git a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
index 1e44f4b3d..b3105a989 100644
--- a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
+++ b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.scss
@@ -1,32 +1,47 @@
-ion-row{
-    padding: 10px 10px 5px 10px;
-}
-.border-top{
-    padding-top: 5px !important;
-    border-top: 1px solid #ebebeb;
-}
-/* ion-col{
-    border: 1px solid red;
-} */
-.btn-cancel{
-    display: block;
-    width: 170px !important;
-    height: 45px !important;
-    border-radius: 22.5px;
-    background-color:  #e0e9ee;
-    --color: #061b52 !important;
-    --background:transparent;
-    --box-shadow: none;
-    margin: 0 auto !important;
+.container{
+    --padding-top:20px !important;
+   --padding-bottom:20px !important;
+   --padding-start:20px !important;
+   --padding-end:20px !important;
   }
+  .arrow-right{
+    display: none;
+    margin-bottom: 20px;
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+  }
+  .buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 
-.btn-ok{
-    display: block;
-    width: 170px !important;
-    height: 45px !important;
-    border-radius: 22.5px;
-    --background: #42b9fe;
-    --color: #ffffff !important;
+    .btn-ok, .btn-cancel, .btn-delete{
+        margin-bottom: 10px !important;
+    }
+  }
+  .solid {
+    display: none;
+    width: 90%;
+    border-top: 1px solid #bbb;
     margin: 0 auto !important;
-
+    margin-bottom: 10px;
+  }
+  @media only screen and (min-width: 1024px) {
+    .arrow-right{
+        display: flex;
+        justify-content: flex-end;
+    }
+    .btn-cancel{
+        display: none;
+    }
+    .btn-ok{
+      width: 100% !important;
+  }
+    .mobile-only{
+      display: none !important;
+    }
   }
\ No newline at end of file
diff --git a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts
index 283b273a0..1958349dd 100644
--- a/src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts
+++ b/src/app/shared/popover/chat-options-popover/chat-options-popover.page.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
+import { ModalController, PopoverController } from '@ionic/angular';
 
 @Component({
   selector: 'app-chat-options-popover',
@@ -9,14 +9,20 @@ import { PopoverController } from '@ionic/angular';
 export class ChatOptionsPopoverPage implements OnInit {
 
   constructor(
-    private popoverController: PopoverController
+    private popoverController: PopoverController,
+    private modalController: ModalController,
   ) { }
 
   ngOnInit() {
   }
 
   close(){
-    this.popoverController.dismiss();
+    if( window.innerWidth <= 1024){
+      this.popoverController.dismiss();
+    }
+    else{
+      this.modalController.dismiss();
+    }
   }
 
 }
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.html b/src/app/shared/popover/chat-popover/chat-popover.page.html
index 4f109ee1a..8e3e94859 100644
--- a/src/app/shared/popover/chat-popover/chat-popover.page.html
+++ b/src/app/shared/popover/chat-popover/chat-popover.page.html
@@ -1,18 +1,12 @@
-<ion-content>
-  <ion-row>
-    <ion-col>
-      <button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button>
-    </ion-col>
-    <ion-col>
-      <button (click)="openChangeGroupName()" class="btn-ok" shape="round" >Alterar nome do grupo</button>
-    </ion-col>
-  </ion-row>
-  <ion-row class="border-top">
-    <ion-col>
-      <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
-    </ion-col>
-    <ion-col>
-      <button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
-    </ion-col>
-  </ion-row>
+<ion-content class="container">
+  <div class="arrow-right">
+    <ion-icon (click)="close()" slot="end" class="arrow-right-icon" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+  </div>
+  <div class="buttons">
+    <button (click)="leaveGroup()" class="btn-cancel" shape="round" >Sair do Grupo</button>
+    <button (click)="openChangeGroupName()" class="btn-ok" shape="round" >Alterar nome do grupo</button>
+    <div class="solid"></div>
+    <button (click)="close()" full class="btn-cancel mobile-only" shape="round" >Cancelar</button>
+    <button (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
+  </div>
 </ion-content>
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.scss b/src/app/shared/popover/chat-popover/chat-popover.page.scss
index 0171ad1d0..67e991974 100644
--- a/src/app/shared/popover/chat-popover/chat-popover.page.scss
+++ b/src/app/shared/popover/chat-popover/chat-popover.page.scss
@@ -1,15 +1,53 @@
-ion-row{
-  padding: 10px 10px 5px 10px;
+.container{
+  --padding-top:20px !important;
+ --padding-bottom:20px !important;
+ --padding-start:20px !important;
+ --padding-end:20px !important;
 }
-.border-top{
-  padding-top: 5px !important;
-  border-top: 1px solid #ebebeb;
+.arrow-right{
+  display: none;
+  margin-bottom: 20px;
+  .arrow-right-icon{
+      width: 37px;
+      float: right;
+      font-size: 35px;
+      overflow: hidden;
+  }
+}
+.buttons{
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.solid {
+  display: none;
+  width: 90%;
+  border-top: 1px solid #bbb;
+  margin: 0 auto !important;
+}
+@media only screen and (min-width: 1024px) {
+  .arrow-right{
+      display: flex;
+      justify-content: flex-end;
+  }
+  .btn-cancel{
+      //display: none;
+      width: 100% !important;
+      margin-bottom: 10px !important;
+  }
+  .btn-ok{
+    width: 100% !important;
+    margin-bottom: 10px !important;
+}
+  .btn-delete{
+      width: 100% !important;
+      margin-bottom: 10px !important;
+      margin-top: 10px !important;
+  }
+  .solid{
+      display: block;
+  }
+  .mobile-only{
+    display: none !important;
+  }
 }
-/* ion-col{
-    border: 1px solid red;
-} */
-
-/* .btn-ok, .btn-cancel, .btn-delete{
-    font-size: 13px;
-    padding:0 !important;
-} */
diff --git a/src/app/shared/popover/chat-popover/chat-popover.page.ts b/src/app/shared/popover/chat-popover/chat-popover.page.ts
index ebf338bd6..cae809bb3 100644
--- a/src/app/shared/popover/chat-popover/chat-popover.page.ts
+++ b/src/app/shared/popover/chat-popover/chat-popover.page.ts
@@ -25,7 +25,12 @@ export class ChatPopoverPage implements OnInit {
     
   }
   close(){
-    this.popoverController.dismiss();
+    if( window.innerWidth <= 1024){
+      this.popoverController.dismiss();
+    }
+    else{
+      this.modalController.dismiss();
+    }
   }
 
    //Top menu options
diff --git a/src/app/shared/popover/messages-options/messages-options.page.html b/src/app/shared/popover/messages-options/messages-options.page.html
index be9bcf347..9d8ac3b7d 100644
--- a/src/app/shared/popover/messages-options/messages-options.page.html
+++ b/src/app/shared/popover/messages-options/messages-options.page.html
@@ -1,10 +1,10 @@
-<ion-content>
-  <ion-row class="border-top">
-    <ion-col>
-      <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
-    </ion-col>
-    <ion-col>
-      <button (click)="closeChatRoom()" full class="btn-delete" shape="round" >Apagar conversa</button>
-    </ion-col>
-  </ion-row>
+<ion-content class="container">
+  <div class="arrow-right">
+    <ion-icon slot="end" class="arrow-right-icon" (click)="close()" src='assets/images/icons-arrow-arrow-right.svg'></ion-icon>
+  </div>
+  <div class="buttons">
+    <button (click)="close()" full class="btn-cancel" shape="round" >Cancelar</button>
+    <div class="solid"></div>
+    <button (click)="closeChatRoom()" full class="btn-delete" shape="round" >Apagar conversa</button>
+  </div>
 </ion-content>
diff --git a/src/app/shared/popover/messages-options/messages-options.page.scss b/src/app/shared/popover/messages-options/messages-options.page.scss
index 63122bda8..03fcefe0d 100644
--- a/src/app/shared/popover/messages-options/messages-options.page.scss
+++ b/src/app/shared/popover/messages-options/messages-options.page.scss
@@ -1,3 +1,46 @@
-ion-row{
-    padding: 10px 10px 5px 10px;
+.container{
+    --padding-top:20px !important;
+   --padding-bottom:20px !important;
+   --padding-start:20px !important;
+   --padding-end:20px !important;
+}
+.arrow-right{
+    display: none;
+    margin-bottom: 20px;
+    .arrow-right-icon{
+        width: 37px;
+        float: right;
+        font-size: 35px;
+        overflow: hidden;
+    }
+}
+.buttons{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+.solid {
+    display: none;
+    width: 90%;
+    border-top: 1px solid #bbb;
+    margin: 0 auto !important;
+  }
+@media only screen and (min-width: 1024px) {
+    .arrow-right{
+        display: flex;
+        justify-content: flex-end;
+    }
+    .btn-cancel{
+        display: none;
+        width: 100% !important;
+        margin-bottom: 10px !important;
+    }
+    .btn-delete{
+        width: 100% !important;
+        margin-bottom: 10px !important;
+        margin-top: 10px !important;
+    }
+   /*  .solid{
+        display: block;
+    } */
 }
\ No newline at end of file
diff --git a/src/app/shared/popover/messages-options/messages-options.page.ts b/src/app/shared/popover/messages-options/messages-options.page.ts
index 98ac52044..44262ee86 100644
--- a/src/app/shared/popover/messages-options/messages-options.page.ts
+++ b/src/app/shared/popover/messages-options/messages-options.page.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { NavParams, PopoverController } from '@ionic/angular';
+import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { ChatService } from 'src/app/services/chat.service';
 
 @Component({
@@ -13,6 +13,7 @@ export class MessagesOptionsPage implements OnInit {
 
   constructor(
     private popoverController: PopoverController,
+    private modalController: ModalController,
     private chatService: ChatService,
     private navParams: NavParams,
   ) 
@@ -24,7 +25,12 @@ export class MessagesOptionsPage implements OnInit {
   }
 
   close(){
-    this.popoverController.dismiss();
+    if( window.innerWidth <= 1024){
+      this.popoverController.dismiss();
+    }
+    else{
+      this.modalController.dismiss();
+    }
   }
 
   closeChatRoom(){
diff --git a/src/app/shared/publication/new-action/new-action-routing.module.ts b/src/app/shared/publication/new-action/new-action-routing.module.ts
new file mode 100644
index 000000000..1d4569653
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewActionPage } from './new-action.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewActionPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewActionPageRoutingModule {}
diff --git a/src/app/shared/publication/new-action/new-action.module.ts b/src/app/shared/publication/new-action/new-action.module.ts
new file mode 100644
index 000000000..466fe5a3a
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NewActionPageRoutingModule } from './new-action-routing.module';
+
+import { NewActionPage } from './new-action.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewActionPageRoutingModule
+  ],
+  declarations: [NewActionPage]
+})
+export class NewActionPageModule {}
diff --git a/src/app/shared/publication/new-action/new-action.page.html b/src/app/shared/publication/new-action/new-action.page.html
new file mode 100644
index 000000000..40e9946b8
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.html
@@ -0,0 +1,95 @@
+<ion-header class="ion-no-border pt-20 px-20">
+  <div class="title-content d-flex align-center justify-space-between ">
+    <div class="div-title">
+      <ion-label class="title"> Nova Acção</ion-label>
+    </div>
+    <div class="actionType">
+      <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+        <ion-segment-button value="Viagem">
+          <ion-label>Viagem</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="Evento">
+          <ion-label>Evento</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </div>
+    
+  </div>
+</ion-header>
+
+<ion-content>
+  <div class="content-container">
+
+    <div class="ion-item-container">
+      <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex ">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime 
+            [(ngModel)]="folder.DateBegin"
+            placeholder="Início"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022">
+          </ion-datetime>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class d-flex flex-grow-1">
+          <ion-datetime 
+            class="flex-grow-1"
+            [(ngModel)]="folder.DateEnd"
+            placeholder="Fim"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022">
+          </ion-datetime>
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+        </div>
+        <div class="ion-textarea-class flex-grow-1">
+          <ion-textarea [(ngModel)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da acção..."></ion-textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
+
+</ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar width-100 justify-space-between d-flex px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Criar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/shared/publication/new-action/new-action.page.scss b/src/app/shared/publication/new-action/new-action.page.scss
new file mode 100644
index 000000000..d2a0784bd
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.scss
@@ -0,0 +1,128 @@
+:host{
+  background: #fff;
+}
+ion-content{
+  --background: transparent;
+  transform: translate3d(0, 5px, 0);
+  --border-radius: 30px;
+}
+ion-footer{
+    background: #fff;
+}
+ion-toolbar{
+  /* --background:#0782c9; */
+  border-width: 0 !important;
+}
+.div-top-header{
+  margin: 0 auto;
+  background-color: #0782c9;
+  overflow: auto;
+  padding-top: 15px;
+  border: 0!important;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 140px;
+  margin: 5px 0 0px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}
+.content-top{
+  background: #f3f2f2;
+  height: 20px;
+  margin: 0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+}
+.content-container{
+  width: 100%;
+  margin:0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background: #ffffff;
+  height: 100%;
+  padding: 25px 20px 0 20px;
+  overflow: auto;
+}
+.title-content{
+  margin: 0px auto;
+  overflow: auto;
+  padding: 0 !important;
+}
+.div-title{
+  width: 180px;
+/* padding: 0!important; */
+float: left;
+margin: 2.5px 0 0 5px;
+}
+.title{
+font-size: 25px;
+}
+.container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+  }
+  .ion-item-container-no-border{
+    width: 100%;
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  .ion-input-class{
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-textarea-class{
+    width: 315px;
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+  .actionType{
+   float: right;
+    overflow: auto;
+    border-radius: 30px;
+  }
+  .ion-segment{
+    --background: #0782c9;
+  }
\ No newline at end of file
diff --git a/src/app/shared/publication/new-action/new-action.page.spec.ts b/src/app/shared/publication/new-action/new-action.page.spec.ts
new file mode 100644
index 000000000..7407b0b41
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewActionPage } from './new-action.page';
+
+describe('NewActionPage', () => {
+  let component: NewActionPage;
+  let fixture: ComponentFixture<NewActionPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewActionPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewActionPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/publication/new-action/new-action.page.ts b/src/app/shared/publication/new-action/new-action.page.ts
new file mode 100644
index 000000000..6b7ab30ee
--- /dev/null
+++ b/src/app/shared/publication/new-action/new-action.page.ts
@@ -0,0 +1,52 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { PublicationsService } from 'src/app/services/publications.service';
+
+@Component({
+  selector: 'app-new-action',
+  templateUrl: './new-action.page.html',
+  styleUrls: ['./new-action.page.scss'],
+})
+export class NewActionPage implements OnInit {
+
+  folder: PublicationFolder;
+  segment:string;
+
+  @Output() closeDesktopComponent= new EventEmitter<any>();
+
+  constructor(
+    private modalController: ModalController,
+    private publication: PublicationsService
+  ) { 
+    this.folder = new PublicationFolder();
+  }
+
+  ngOnInit() {
+    this.segment = "Viagem";
+  }
+
+  segmentChanged(ev: any) {
+    console.log(ev.detail.value);
+  }
+
+  save(){
+    this.folder = {
+      ProcessId: null,
+      Description: this.folder.Description,
+      Detail: this.folder.Detail,
+      DateBegin: this.folder.DateBegin,
+      DateEnd: this.folder.DateEnd,
+      ActionType: this.segment,
+    }
+    console.log(this.folder);
+    
+    this.publication.CreatePublicationFolder(this.folder);
+    this.close();
+  }
+
+  close(){
+    this.closeDesktopComponent.emit();
+  }
+
+}
diff --git a/src/app/shared/publication/new-publication/new-publication-routing.module.ts b/src/app/shared/publication/new-publication/new-publication-routing.module.ts
new file mode 100644
index 000000000..69521e65c
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewPublicationPage } from './new-publication.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewPublicationPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewPublicationPageRoutingModule {}
diff --git a/src/app/shared/publication/new-publication/new-publication.module.ts b/src/app/shared/publication/new-publication/new-publication.module.ts
new file mode 100644
index 000000000..c91c34b29
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { NewPublicationPageRoutingModule } from './new-publication-routing.module';
+
+import { NewPublicationPage } from './new-publication.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewPublicationPageRoutingModule
+  ],
+  declarations: [NewPublicationPage]
+})
+export class NewPublicationPageModule {}
diff --git a/src/app/shared/publication/new-publication/new-publication.page.html b/src/app/shared/publication/new-publication/new-publication.page.html
new file mode 100644
index 000000000..810ff4866
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication.page.html
@@ -0,0 +1,108 @@
+<ion-header class="ion-no-border background-white px-20 pt-25">
+  <div class="title-content d-flex">
+<!--     <div class="back-icon">
+      <ion-icon class="font-35" (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+    </div> -->
+    <div class="div-title">
+      <ion-label class="title">{{publicationTitle}}</ion-label>
+    </div>
+  </div>
+</ion-header>
+
+<ion-content>
+<div class="content-container">
+
+  <div  *ngIf="publicationType!='1'" class="ion-item-container">
+    <ion-input [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título" ></ion-input>
+  </div>
+
+ 
+
+  <div *ngIf="publicationType!='1'" class="container-div pb-20">
+    <div class="ion-item-class-2 d-flex">
+      <div class="ion-icon-class">
+        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+      </div>
+      <div class="ion-textarea-class flex-grow-1">
+        <ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
+      </div>
+    </div>
+  </div>
+  
+  <div class="container-title py-10">Fotografia Anexada</div>
+
+  <div class="picture d-flex pb-5" *ngIf="publication.FileBase64.length > 10">
+    <div  class="post-img">
+      <img src="{{publication.FileBase64}}" alt="image" >
+    </div>
+    <div class="d-flex flex-column pl-10"> 
+      <div class="picture-file-name">{{publication.OriginalFileName}}.{{publication.FileExtension}}</div>
+      <div class="size">75 Kb</div>
+    </div>
+    <div class="flex-grow-1 d-flex align-center justify-end">
+      <div style="color: red;">X</div>
+    </div>
+    
+  </div>
+
+  <div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
+    <ion-label class="attached-title">Fotografia Anexada</ion-label>
+    <ion-item lines="none">
+      <ion-thumbnail slot="start">
+        <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="'data:image/png;base64,'+capturedImage"></ion-img>
+      </ion-thumbnail>
+    <!--  <ion-thumbnail *ngIf="!publication" slot="start">
+        <ion-img [(ngModel)]="publication.imageUrl" [src]="guestPicture"></ion-img>
+      </ion-thumbnail> -->
+      <ion-label>
+        <p>{{capturedImageTitle}}</p>
+        <p hidden>size</p>
+      </ion-label>
+      <ion-icon (click)="clear()" name="close"></ion-icon>
+    </ion-item>
+    
+    <!-- <ion-thumbnail>
+      <ion-img src="{{imgUrl}}"></ion-img>
+    </ion-thumbnail> -->
+  </div>
+
+  <div class="ion-item-container-no-border">
+    <ion-label (click)="takePicture()">
+      <div class="attach-icon">
+        <ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
+      </div>
+      <div class="attach-document">
+        <ion-label>Tirar Fotografia</ion-label>
+      </div>
+      </ion-label>
+  </div>
+
+  <div class="ion-item-container-no-border">
+    <ion-label (click)="getPicture()">
+      <div class="attach-icon">
+        <ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
+      </div>
+      <div class="attach-document">
+        <ion-label>Anexar Fotografia</ion-label>
+      </div> 
+    </ion-label>
+  </div>
+</div>
+
+</ion-content>
+
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar width-100 px-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/shared/publication/new-publication/new-publication.page.scss b/src/app/shared/publication/new-publication/new-publication.page.scss
new file mode 100644
index 000000000..d4f8b2a55
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication.page.scss
@@ -0,0 +1,155 @@
+
+ion-content{
+  --background: transparent;
+  transform: translate3d(0, 5px, 0);
+  --border-radius: 30px;
+}
+ion-footer{
+    background: #fff;
+}
+ion-toolbar{
+  /* --background:#0782c9; */
+  border-width: 0 !important;
+}
+.div-top-header{
+  width: 400px;
+  margin: 0 auto;
+  background-color: #0782c9;
+  overflow: auto;
+  padding-top: 15px;
+  border: 0!important;
+}
+.div-search{
+  font-size: 45px;
+  float: left;
+  margin: 0 0 0 10px
+}
+.div-logo{
+  background: transparent;
+  width: 140px;
+  margin: 5px 0 0px 71px;
+  float: left;
+}
+.div-logo img{
+  width: 100%;
+}
+.div-profile{
+  font-size: 45px;
+  float: right;
+  margin-right: 10px;
+}
+.content-top{
+  width: 344px;
+  background: #f3f2f2;
+  height: 20px;
+  margin: 0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+}
+.content-container{
+  width: 100%;
+  margin:0 auto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background: #ffffff;
+  height: 100%;
+  padding: 25px 20px 0 20px;
+  overflow: auto;
+}
+.title-content{
+  width: 360px;
+  overflow: auto;
+  padding: 0 !important;
+}
+.div-title{
+  width: 270px;
+/* padding: 0!important; */
+float: left;
+margin: 2.5px 0 0 5px;
+}
+.title{
+font-size: 25px;
+}
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+    border-bottom: 1px solid #ebebeb;
+  }
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+  }
+  .ion-item-container-no-border{
+    width: 100%;
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  .ion-textarea-class{
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 20px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attached-title{
+  font-family: Roboto;
+  font-size: 15px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #000;
+  }
+
+
+.picture{
+  .post-img{
+    width: 60px;
+  }
+  .picture-file-name{
+    font-size: 15px;
+    color: #0d89d1;
+  }
+  .size{
+    color: #cecece;
+    font-size: 13px;
+  }
+}
+
+.container-title{
+  font-size: 15px;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/app/shared/publication/new-publication/new-publication.page.spec.ts b/src/app/shared/publication/new-publication/new-publication.page.spec.ts
new file mode 100644
index 000000000..09d8beae8
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewPublicationPage } from './new-publication.page';
+
+describe('NewPublicationPage', () => {
+  let component: NewPublicationPage;
+  let fixture: ComponentFixture<NewPublicationPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewPublicationPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewPublicationPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/publication/new-publication/new-publication.page.ts b/src/app/shared/publication/new-publication/new-publication.page.ts
new file mode 100644
index 000000000..c547eb9b5
--- /dev/null
+++ b/src/app/shared/publication/new-publication/new-publication.page.ts
@@ -0,0 +1,220 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AlertController, ModalController, NavParams } from '@ionic/angular';
+
+/* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { Publication } from 'src/app/models/publication';
+import { Image } from 'src/app/models/image';
+import { ThrowStmt } from '@angular/compiler';
+import { PhotoService } from 'src/app/services/photo.service';
+//Capacitor
+/* const { Camera } = Plugins; */
+
+//Cordova
+import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { ViewPublicationsPage } from '../view-publications/view-publications.page';
+import { LoadingService } from 'src/app/services/loading.service';
+
+@Component({
+  selector: 'app-new-publication',
+  templateUrl: './new-publication.page.html',
+  styleUrls: ['./new-publication.page.scss'],
+})
+export class NewPublicationPage implements OnInit {
+  showLoader: boolean;
+  pub: Publication = new Publication();
+  image: Image = new Image();
+
+  publicationTitle:string;
+  imgUrl:any;
+
+  Defaultimage:any = '';
+
+
+  photo: SafeResourceUrl;
+
+  @Input() publication: Publication;
+  @Input() publicationType: string;
+  @Input() folderId: string;
+  @Output() closeDesktopComponent =  new EventEmitter<any>();
+  @Output() openPublicationDetails = new EventEmitter<any>();
+  @Output() goBackToViewPublications = new EventEmitter<any>();
+  @Output()  goBacktoPublicationDetails = new EventEmitter<any>();
+  
+  guestPicture:any;
+
+  capturedImage:any;
+  capturedImageTitle:any;
+
+  constructor(
+    private modalController: ModalController,
+    public photoService: PhotoService,
+    private publications: PublicationsService,
+    private camera: Camera,
+    ) {
+      this.publicationTitle = 'Nova Publicação';
+    }
+
+  ngOnInit() {
+    this.setTitle();
+    this.clear();
+    this.takePicture();
+  }
+  takePicture(){
+    const options: CameraOptions = {
+      quality: 90,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+      targetWidth: 720,
+      targetHeight: 720,
+    }
+
+    this.camera.getPicture(options).then((imageData) => {
+     // imageData is either a base64 encoded string or a file URI
+     // If it's base64 (DATA_URL):
+     let base64Image = 'data:image/jpeg;base64,' + imageData;
+     this.capturedImage = imageData;
+     this.capturedImageTitle = new Date().getTime() + '.jpeg';
+    }, (err) => {
+     console.log(err);
+    });
+  }
+
+  getPicture(){
+    const options: CameraOptions = {
+      quality: 90,
+      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+      targetWidth: 720,
+      targetHeight: 720,
+    }
+    this.camera.getPicture(options).then((imageData) => {
+      // imageData is either a base64 encoded string or a file URI
+      // If it's base64 (DATA_URL):
+      let base64Image = 'data:image/jpeg;base64,' + imageData;
+      this.capturedImage = imageData;
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+     }, (err) => {
+      console.log(err);
+     });
+  }
+
+  async save(){
+    if(this.publicationType == '3'){
+       
+      if(this.capturedImage != ''){
+        this.publication = {
+          DateIndex: this.publication.DateIndex,
+          DocumentId:this.publication.DocumentId,
+          ProcessId:this.publication.ProcessId,
+          Title: this.pub.Title,
+          Message: this.pub.Message,
+          DatePublication: this.publication.DatePublication,
+          OriginalFileName: this.capturedImageTitle,
+          FileBase64: this.capturedImage,
+          FileExtension: 'jpeg',
+        }
+        console.log('Edit change image');
+        console.log(this.publication);
+        this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
+        this.goBack();
+      }
+      else{
+        this.publication = {
+          DateIndex: this.publication.DateIndex,
+          DocumentId:this.publication.DocumentId,
+          ProcessId:this.publication.ProcessId,
+          Title: this.pub.Title,
+          Message: this.pub.Message,
+          DatePublication: this.publication.DatePublication,
+          OriginalFileName: this.publication.OriginalFileName,
+          FileBase64: this.publication.FileBase64,
+          FileExtension: 'jpeg',
+        }
+        console.log('Edit - keep image');
+        console.log(this.publication);
+        this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
+        this.goBack();
+      }
+    }
+    else{
+      
+      this.publication = {
+        DateIndex: new Date(),
+        DocumentId:null,
+        ProcessId:this.folderId,
+        Title: this.pub.Title,
+        Message: this.pub.Message,
+        DatePublication: new Date(),
+        OriginalFileName: this.capturedImageTitle,
+        FileBase64: this.capturedImage,
+        FileExtension: 'jpeg',
+      }
+      
+      console.log(this.publication);
+      this.publications.CreatePublication(this.folderId, this.publication);
+
+      this.closeDesktopComponent.emit();
+    }
+  }
+
+
+  close(){
+    this.goBack();
+  }
+  clear(){
+    this.capturedImage = '';
+  }
+  setTitle(){
+    if(this.publicationType == '1'){
+      this.publicationTitle = 'Nova Publicação Rápida';
+    }
+    else if(this.publicationType == '2'){
+      this.publicationTitle = 'Nova Publicação';
+    }
+    else if(this.publicationType == '3'){
+      this.publicationTitle = 'Editar Publicação';
+      this.pub = this.publication;
+    }
+  }
+
+  async goBack(){
+    
+    if(this.publicationType == '2'){
+      this.goBackToViewPublications.emit();
+    } else {
+      this.goBacktoPublicationDetails.emit();
+    }
+   
+  }
+
+  /* async openGallery() {
+    const modal = await this.modalController.create({
+      component: GalleryPage,
+      componentProps:{
+      },
+      cssClass: 'new-publication',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  } */
+
+   /* async takePicture(){
+    const image = await Plugins.Camera.getPhoto({
+      quality: 100,
+      allowEditing: false,
+      resultType: CameraResultType.DataUrl,
+      source: CameraSource.Camera
+    });
+    console.log(image);
+    
+    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
+  } */
+
+}
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail-routing.module.ts b/src/app/shared/publication/view-publications/publication-detail/publication-detail-routing.module.ts
new file mode 100644
index 000000000..d1ed32f55
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PublicationDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PublicationDetailPageRoutingModule {}
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.module.ts b/src/app/shared/publication/view-publications/publication-detail/publication-detail.module.ts
new file mode 100644
index 000000000..116453af2
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationDetailPageRoutingModule
+  ],
+  declarations: [PublicationDetailPage]
+})
+export class PublicationDetailPageModule {}
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html
new file mode 100644
index 000000000..4a0e264aa
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html
@@ -0,0 +1,73 @@
+<!-- <ion-header class="ion-no-border">
+
+
+</ion-header> -->
+
+<ion-content>
+
+  <div class="content-container">
+    <div *ngIf="publication.Title != ''">
+    <div class="title-content d-flex pl-20">
+      <div class="back-icon " >
+        <ion-icon (click)="goBack()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div>
+      <div class="div-title">
+        <ion-label class="title"> {{publication.Title}}</ion-label>
+        <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
+      </div>
+    </div>
+    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+      <ion-refresher-content>
+      </ion-refresher-content>
+    </ion-refresher>
+    <div class="post-item px-20">
+      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      </div>
+      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
+        <img src="/assets/icon/icon-no-image.svg" alt="image">
+      </div>
+      <div class="post-description">
+        <p>{{publication.Message}}</p>
+      </div>
+    </div>
+    </div>
+    <div *ngIf="publication.Title == ''">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
+          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
+        </div>
+      </div>
+      <div class="post-item">
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-description">
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+        </div>
+      </div>
+
+    </div>
+  </div>     
+</ion-content>
+<ion-footer>
+  <ion-toolbar class="footer-toolbar width-md-100 px-md-20">
+    <ion-buttons slot="start">
+      <ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
+        <ion-label>Eliminar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
+        <ion-label>Editar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss
new file mode 100644
index 000000000..e0273da92
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.scss
@@ -0,0 +1,89 @@
+
+  ion-content{
+    --background: transparent;
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    border-width: 0 !important;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .content-top{
+    width: 344px;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    overflow: auto;
+  }
+  .back-icon{
+    width: auto;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+  }
+  .div-title{
+      width: 270px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .post-img{
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 0px!important;
+    overflow: hidden;
+}
+.post-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.post-description{
+  margin: 0 auto;
+  margin-bottom: 35px;
+}
\ No newline at end of file
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.spec.ts b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.spec.ts
new file mode 100644
index 000000000..8a3f20488
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+describe('PublicationDetailPage', () => {
+  let component: PublicationDetailPage;
+  let fixture: ComponentFixture<PublicationDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PublicationDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PublicationDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts
new file mode 100644
index 000000000..0b836a3c4
--- /dev/null
+++ b/src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts
@@ -0,0 +1,132 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { ImageModalPage } from 'src/app/pages/publications/gallery/image-modal/image-modal.page';
+import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
+import { PublicationsService } from 'src/app/services/publications.service';
+
+@Component({
+  selector: 'app-publication-detail-shared',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+  showLoader: boolean;
+  folderId: string;
+  publication: Publication;
+
+  @Input() publicationId: string;
+  @Output() addNewPublication =  new EventEmitter<any>();
+  @Output() closeDesktopComponent =  new EventEmitter<any>();
+  @Output() goBackToViewPublications = new EventEmitter();
+
+  constructor(
+    private modalController: ModalController,
+    private publications:PublicationsService,
+    ) {
+      
+      /* this.folderId = this.navParams.get('folderIdId'); */
+      this.publication = {
+        DateIndex: null,
+        DocumentId: '',
+        ProcessId:'',
+        Title:'',
+        Message: '',
+        /* image: null, */
+        DatePublication: null,
+        FileBase64: '',
+        OriginalFileName: '',
+        FileExtension: '',
+      };
+    }
+
+  ngOnInit() {
+    /* console.log(this.publication.FileBase64); */
+    this.getPublicationDetail();
+  }
+  doRefresh(event) {
+    this.getPublicationDetail();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  getPublicationDetail(){
+    this.showLoader = true;
+    console.log(this.publicationId);
+    /* console.log(this.folderId); */
+    this.publications.GetPublicationById(this.publicationId).subscribe(res=>{
+      console.log(res);
+      /* this.publication = res; */
+      this.publication = {
+        DateIndex: res.DateIndex,
+        DocumentId: res.DocumentId,
+        ProcessId:res.ProcessId,
+        Title:res.Title,
+        Message: res.Message,
+        DatePublication: res.DatePublication,
+        FileBase64: "data:image/jpg;base64," + res.FileBase64,
+        OriginalFileName: res.OriginalFileName,
+        FileExtension: 'jpeg',
+      }
+      this.showLoader = false;
+    });
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  deletePost(){
+    this.publications.DeletePublication(this.folderId, this.publicationId).then(res =>{
+      console.log(res);
+      
+    });
+   this.closeDesktopComponent.emit();
+  }
+
+  async editPost(publicationType:any) {
+    console.log(this.publication);
+
+    if(window.innerWidth <= 1024){
+      const modal = await this.modalController.create({
+        component: NewPublicationPage,
+        componentProps:{
+          publicationType: publicationType,
+          publication: this.publication,
+        },
+        cssClass: 'new-publication',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        setTimeout(() => {
+          this.getPublicationDetail();
+      }, 5000);
+      });
+    } else {
+      this.addNewPublication.emit({
+        publicationType: publicationType,
+        folderId: this.folderId,
+        publication: this.publication,
+      })
+    }
+
+  }
+
+  openPreview(imageUrl:string){
+    this.modalController.create({
+      component: ImageModalPage,
+      componentProps: {
+        imageUrl:imageUrl,
+      }
+    }).then(modal => modal.present());
+  }
+
+  async goBack(){
+
+    this.goBackToViewPublications.emit();
+  }
+
+}
diff --git a/src/app/shared/publication/view-publications/view-publications-routing.module.ts b/src/app/shared/publication/view-publications/view-publications-routing.module.ts
new file mode 100644
index 000000000..a9ac10c5e
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications-routing.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewPublicationsPageRoutingModule {}
diff --git a/src/app/shared/publication/view-publications/view-publications.module.ts b/src/app/shared/publication/view-publications/view-publications.module.ts
new file mode 100644
index 000000000..7792f5dea
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewPublicationsPageRoutingModule } from './view-publications-routing.module';
+
+import { ViewPublicationsPage } from 'src/app/pages/publications/view-publications/view-publications.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ViewPublicationsPageRoutingModule
+  ],
+  declarations: [ViewPublicationsPage]
+})
+export class ViewPublicationsPageModule {}
diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html
new file mode 100644
index 000000000..80f9080b6
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications.page.html
@@ -0,0 +1,86 @@
+
+
+<ion-header class="ion-no-border">
+  <div class="main-header">
+    <div class="title-content d-flex flex-end">
+    <!--   <div class="back-icon" (click)="goBack()">
+        <ion-icon  slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div> -->
+      <div class="div-title flex-grow-1">
+        <ion-label class="title">{{item.Description}}</ion-label>
+        <p class="item-content-detail">{{item.Detail}}</p>
+        <p class="item-content-date">{{item.DateBegin}}</p>
+      </div>
+      <div class="actions-icon">
+       <!--  <ion-icon (click)="AddPublication('1',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
+        <ion-icon (click)="AddPublication('2',item.ProcessId)" slot="end" src='assets/images/icons-add.svg'></ion-icon>
+      </div>
+    </div>
+  </div>
+</ion-header>
+
+<ion-content>
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
+  <div class="main-container px-20">
+    <ion-list>
+      <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
+      <div class="post-item  d-md-block mb-10"
+        *ngFor="let publication of publicationList"
+        (click)="viewPublicationDetail(publication.DocumentId)">
+        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
+          <img src="{{publication.FileBase64}}" alt="image">
+        </div>
+        <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-content px-20 width-md-100 ">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label>{{publication.Title}}</ion-label>
+            </div>
+            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</div>
+          </div>
+          <div class="post-description">
+            <p>{{publication.Message}}</p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="!publicationList" class="post-item">
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-content">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
+            </div>
+            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
+          </div>
+          <div class="post-description">
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          </div>
+        </div>
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-content">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
+            </div>
+            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
+          </div>
+          <div class="post-description">
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          </div>
+        </div>
+      </div>
+    </ion-list>
+  </div>    
+</ion-content>
diff --git a/src/app/shared/publication/view-publications/view-publications.page.scss b/src/app/shared/publication/view-publications/view-publications.page.scss
new file mode 100644
index 000000000..e353cf7ab
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications.page.scss
@@ -0,0 +1,171 @@
+:host{
+    background: transparent;
+    padding: 0!important;
+  }
+  ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+    --border-radius: 30px;
+  }
+  ion-toolbar{
+    --border-width: 0 !important;
+    --border-style: none;
+    --padding-top: 0px !important;
+    --padding-start: 0px !important;
+    --padding-right: 0px !important;
+    --padding-end: 0px !important;
+
+  }
+
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 25px 20px 0px 20px;
+    color:#000;
+    
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 15px 20px 0 20px;
+  }
+  .content-top{
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    transform: translate3d(0, 1px, 0);
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+
+  .back-icon{
+    width: 37px;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+    
+  }
+  .div-title{
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  
+  .actions-icon{
+    width: 92px;
+    float: right;
+    overflow: auto;
+  }
+  .actions-icon ion-icon{
+      margin-left: 10px;
+      font-size: 35px;
+      float: right;
+  }
+  .item-content-date{
+    color: #797979;
+    font-size: 13px;
+  }
+  .item-content-detail{
+    color: #000000;
+    font-size: 13px;
+  }
+  .post-item{
+    width: 100%;
+
+    border-radius: 0px;
+    padding: 0!important;
+  }
+  .post-img{
+    width: 100%;
+    height: 56.25vh !important;
+    border-radius: 0px!important;
+    overflow: hidden;
+  }
+  .post-img img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+  }
+  .post-content{
+    margin: 0 auto;
+    margin-bottom: 35px;
+  }
+  .post-title-time{
+    width: 100%;
+    overflow: auto;
+  }
+  .post-title{
+      width: 60%;
+      float: left;
+      font-size: 15px;
+      color: #0d89d1;
+  }
+.post-data{
+    width: 40%;
+    float: left;
+    font-size: 13px;
+    color: #797979;
+    text-align: right;
+}
+  .post-description{
+    font-size: 13px;
+    color: #000;
+  }
+
+
+
diff --git a/src/app/shared/publication/view-publications/view-publications.page.spec.ts b/src/app/shared/publication/view-publications/view-publications.page.spec.ts
new file mode 100644
index 000000000..bcd718f84
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications.page.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+describe('ViewPublicationsPage', () => {
+  let component: ViewPublicationsPage;
+  let fixture: ComponentFixture<ViewPublicationsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewPublicationsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewPublicationsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/publication/view-publications/view-publications.page.ts b/src/app/shared/publication/view-publications/view-publications.page.ts
new file mode 100644
index 000000000..ca483e02d
--- /dev/null
+++ b/src/app/shared/publication/view-publications/view-publications.page.ts
@@ -0,0 +1,153 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { LoadingService } from 'src/app/services/loading.service';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { PublicationDetailPage } from 'src/app/pages/publications/publication-detail/publication-detail.page';
+import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
+
+@Component({
+  selector: 'app-view-publications',
+  templateUrl: './view-publications.page.html',
+  styleUrls: ['./view-publications.page.scss'],
+})
+export class ViewPublicationsPage implements OnInit {
+  showLoader: boolean;
+  loading: any;
+
+  publicationList: Publication[];
+  item: PublicationFolder;
+
+  @Input() folderId: string;
+  @Output() addNewPublication =  new EventEmitter<any>();
+  @Output() openPublicationDetails= new EventEmitter<any>();
+  @Output() goBackToViewPublications = new EventEmitter();
+  @Output() closeDesktopComponent =  new EventEmitter<any>();
+  @Output() goBacktoPublicationDetails = new EventEmitter<any>();
+
+  constructor(
+    private loadingController: LoadingService,
+    private modalController: ModalController,
+    private publications: PublicationsService,
+    ) { 
+      this.item = new PublicationFolder();
+
+  }
+
+  ngOnInit() {
+    console.log(this.folderId);
+    
+    this.getPublications();
+    this.getPublicationDetail();
+  }
+
+  ngOnChanges(changes: any): void {
+    console.log(this.folderId)
+
+    this.getPublications();
+    this.getPublicationDetail();
+  }
+
+  doRefresh(event) {
+    this.getPublications();
+
+    setTimeout(() => {
+      this.getPublications();
+      this.getPublicationDetail();
+      event.target.complete();
+    }, 3000);
+  }
+  close(){
+    this.closeDesktopComponent.emit();
+  }
+  getPublicationDetail(){
+    this.publications.GetPublicationFolderById(this.folderId).subscribe(res=>{
+      console.log(res);
+      this.item = res;
+    });
+  }
+  getPublications(){
+    this.showLoader = true;
+    
+    this.publications.GetPublications(this.folderId).subscribe(res=>{
+      this.publicationList = new Array();
+      console.log(res);
+      res.forEach(element => {
+        let itemImage = {
+          title: 'Title',
+          url: "data:image/jpg;base64," + element.FileBase64,
+          format: 'png'
+        }
+        let item: Publication = {
+          "DateIndex": element.DateIndex,
+          "DocumentId":element.DocumentId,
+          "ProcessId":element.ProcessId,
+          "Title":element.Title,
+          "Message": element.Message,
+          "DatePublication": element.DatePublication,
+          /* image:itemImage, */
+          "FileBase64": "data:image/jpg;base64," + element.FileBase64,
+          "OriginalFileName": '',
+          "FileExtension": '',
+        }
+        this.publicationList.push(item);
+      });
+      console.log(this.publicationList);
+      this.showLoader = false;
+    });
+    
+  }
+
+  async AddPublication(publicationType:any, folderId:string) {
+
+    if( window.innerWidth <= 1024) {
+      const modal = await this.modalController.create({
+        component: NewPublicationPage,
+        componentProps:{
+          publicationType: publicationType,
+          folderId: folderId,
+        },
+        cssClass: 'new-publication',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh(event);
+      });
+    } else {
+      this.addNewPublication.emit({
+        publicationType: publicationType,
+        folderId: folderId
+      })
+    }
+
+  }
+
+  
+  async viewPublicationDetail(publicationId:string) {
+
+    console.log(publicationId);
+
+    if( window.innerWidth <= 1024) {
+      const modal = await this.modalController.create({
+        component: PublicationDetailPage,
+        componentProps:{
+          publicationId: publicationId,
+        },
+        cssClass: 'publication-detail',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss().then(()=>{
+        this.doRefresh(event);
+      });
+    } else {
+      // open publication details
+      this.openPublicationDetails.emit(publicationId);
+    }
+
+  }
+
+
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 7b1be4f52..3b01186fc 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -8,6 +8,9 @@ import { BtnSeguintePage } from './btn-seguinte/btn-seguinte.page';
 import { BtnModalDismissPage } from './btn-modal-dismiss/btn-modal-dismiss.page';
 import { ChatPopoverPage } from './popover/chat-popover/chat-popover.page';
 import { HeaderNoSearchPage } from './headers/header-no-search/header-no-search.page';
+import { EmptyChatPage } from './chat/empty-chat/empty-chat.page';
+import { BtnCriarPage } from './buttons/btn-criar/btn-criar.page';
+import { BtnAdicionarPage } from './buttons/btn-adicionar/btn-adicionar.page';
 
 @NgModule({
   imports: [
@@ -21,6 +24,9 @@ import { HeaderNoSearchPage } from './headers/header-no-search/header-no-search.
     HeaderNoSearchPage, 
     BtnSeguintePage,
     BtnModalDismissPage,
+    EmptyChatPage,
+    BtnCriarPage,
+    BtnAdicionarPage,
   ],
   entryComponents:[],
   declarations: [
@@ -29,6 +35,9 @@ import { HeaderNoSearchPage } from './headers/header-no-search/header-no-search.
     HeaderNoSearchPage,
     BtnSeguintePage,
     BtnModalDismissPage,
+    EmptyChatPage,
+    BtnCriarPage,
+    BtnAdicionarPage,
   ]
 })
 export class SharedModule {}
\ No newline at end of file
diff --git a/src/assets/icon/icons-arrow-arrow-left.svg b/src/assets/icon/icons-arrow-arrow-left.svg
new file mode 100644
index 000000000..4c329dbd3
--- /dev/null
+++ b/src/assets/icon/icons-arrow-arrow-left.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="#42B9FE" stroke-width="2">
+            <g>
+                <g>
+                    <path d="M22.629 9L13.371 18 22.629 27" transform="translate(-20 -124) translate(0 99) translate(20 25)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/eraser-solid.svg b/src/assets/images/eraser-solid.svg
new file mode 100644
index 000000000..64273ad02
--- /dev/null
+++ b/src/assets/images/eraser-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eraser" class="svg-inline--fa fa-eraser fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M497.941 273.941c18.745-18.745 18.745-49.137 0-67.882l-160-160c-18.745-18.745-49.136-18.746-67.883 0l-256 256c-18.745 18.745-18.745 49.137 0 67.882l96 96A48.004 48.004 0 0 0 144 480h356c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12H355.883l142.058-142.059zm-302.627-62.627l137.373 137.373L265.373 416H150.628l-80-80 124.686-124.686z"></path></svg>
\ No newline at end of file
diff --git a/src/assets/images/icons-arrow-arrow-right.svg b/src/assets/images/icons-arrow-arrow-right.svg
new file mode 100644
index 000000000..02f62df57
--- /dev/null
+++ b/src/assets/images/icons-arrow-arrow-right.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="35" viewBox="0 0 36 35">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="#42B9FE" stroke-width="2">
+            <g>
+                <path d="M22.629 9L13.371 18 22.629 27" transform="translate(-968 -20) matrix(-1 0 0 1 1004 20)"/>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-nav-a-es-inactive.svg b/src/assets/images/icons-nav-a-es-inactive.svg
new file mode 100644
index 000000000..433734b86
--- /dev/null
+++ b/src/assets/images/icons-nav-a-es-inactive.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <filter id="1jaqcqp9za">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g stroke="#797979" stroke-width="2" filter="url(#1jaqcqp9za)" transform="translate(-546 -12) translate(20) translate(176) translate(350 12)">
+                        <path d="M20.5 34.5c5.523 0 10.5-.977 10.5-6.5s-4.477-10-10-10-10 4.477-10 10 3.977 6.5 9.5 6.5z"/>
+                        <circle cx="21" cy="12" r="6"/>
+                        <path stroke-linejoin="round" d="M29.157 23.343L17.843 34.657m-5.186-1.564l13.686-13.186"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-nav-agenda-inactive.svg b/src/assets/images/icons-nav-agenda-inactive.svg
new file mode 100644
index 000000000..2fffe282b
--- /dev/null
+++ b/src/assets/images/icons-nav-agenda-inactive.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <filter id="xhyequtz0a">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g filter="url(#xhyequtz0a)" transform="translate(-306 -12) translate(20) translate(176)">
+                    <g stroke="#797979" stroke-width="2">
+                        <g transform="translate(110 12) translate(7 7)">
+                            <rect width="26" height="26" rx="2"/>
+                            <path d="M2 7H24V8H2zM18 12H20V14H18zM12 12H14V14H12zM12 18H14V20H12zM18 18H20V20H18zM6 12H8V14H6zM6 18H8V20H6z"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-nav-grupos-inactive-dk-white.svg b/src/assets/images/icons-nav-grupos-inactive-dk-white.svg
new file mode 100644
index 000000000..cf714f616
--- /dev/null
+++ b/src/assets/images/icons-nav-grupos-inactive-dk-white.svg
@@ -0,0 +1,4 @@
+<svg width="41" height="40" viewBox="0 0 41 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.34 26.1C23.744 26.1 25.09 25.892 26.333 25.51C26.999 25.304 30.585 27.268 31.186 26.969C31.793 26.667 29.416 24.102 29.943 23.716C32.333 21.966 33.84 19.404 33.84 16.55C33.84 11.276 28.691 7 22.34 7C15.989 7 10.84 11.276 10.84 16.55C10.84 21.825 15.989 26.1 22.34 26.1Z" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.84 32.37C14.863 32.37 13.927 32.224 13.062 31.956C12.599 31.813 10.104 33.188 9.686 32.978C9.264 32.768 10.918 30.972 10.551 30.701C8.889 29.476 7.84 27.683 7.84 25.685C7.84 24.133 8.473 22.705 9.535 21.57C10.999 20.006 13.279 19 15.84 19C20.258 19 23.84 21.993 23.84 25.685C23.84 26.722 23.558 27.703 23.054 28.579C21.763 30.822 19.018 32.37 15.84 32.37Z" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/src/assets/images/icons-nav-grupos-inactive-dk.svg b/src/assets/images/icons-nav-grupos-inactive-dk.svg
new file mode 100644
index 000000000..e787a9940
--- /dev/null
+++ b/src/assets/images/icons-nav-grupos-inactive-dk.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40">
+    <g fill="none" fill-rule="evenodd">
+        <g stroke="#797979" stroke-width="2">
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <path d="M21.5 26.1c1.404 0 2.75-.208 3.993-.59.666-.206 4.252 1.758 4.853 1.459.607-.302-1.77-2.867-1.243-3.253C31.493 21.966 33 19.404 33 16.55 33 11.276 27.851 7 21.5 7S10 11.276 10 16.55c0 5.275 5.149 9.55 11.5 9.55z" transform="translate(-911 -708) translate(0 708) translate(56) translate(839.84) translate(16)"/>
+                            <path d="M15 32.37c.977 0 1.913-.146 2.778-.414.463-.143 2.958 1.232 3.376 1.022.422-.21-1.232-2.006-.865-2.277C21.951 29.476 23 27.683 23 25.685c0-1.552-.633-2.98-1.695-4.115C19.841 20.006 17.561 19 15 19c-4.418 0-8 2.993-8 6.685 0 1.037.282 2.018.786 2.894C9.077 30.822 11.822 32.37 15 32.37z" transform="translate(-911 -708) translate(0 708) translate(56) translate(839.84) translate(16) matrix(-1 0 0 1 30 0)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-nav-home-active.svg b/src/assets/images/icons-nav-home-active.svg
new file mode 100644
index 000000000..911ccbab7
--- /dev/null
+++ b/src/assets/images/icons-nav-home-active.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <filter id="enll4xclfa">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g filter="url(#enll4xclfa)" transform="translate(-201 -12) translate(20) translate(176) translate(5 12)">
+                        <path stroke="#061B52" stroke-width="2" d="M20 8.136l12 6.461V30c0 .552-.224 1.052-.586 1.414-.362.362-.862.586-1.414.586h0-5v-5c0-.788-.304-1.505-.8-2.04-.51-.549-1.222-.906-2.017-.954h0L18 24c-.788 0-1.505.304-2.04.8-.549.51-.906 1.222-.954 2.017h0L15 32H10c-.552 0-1.052-.224-1.414-.586C8.224 31.052 8 30.552 8 30h0V14.597l12-6.461z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-nav-home-dk.svg b/src/assets/images/icons-nav-home-dk.svg
new file mode 100644
index 000000000..790329458
--- /dev/null
+++ b/src/assets/images/icons-nav-home-dk.svg
@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+    <defs>
+        <filter id="s0gcyzi44a">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
+        </filter>
+        <filter id="j3jkn6sx0b">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g filter="url(#s0gcyzi44a)" transform="translate(-422 -12) translate(20) translate(176)">
+                    <g>
+                        <path stroke="#797979" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M26 31H8V13h25v18m0 0h-7M26 9L26 13 15 13 15 9 23 9z" transform="translate(226 12)"/>
+                        <g filter="url(#j3jkn6sx0b)" transform="translate(226 12)">
+                            <g>
+                                <path stroke="#061B52" d="M.5 15.5L22.5.5M2.5 17.5L24.5 2.5" transform="translate(8 13)"/>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-userprofile.svg b/src/assets/images/icons-userprofile.svg
new file mode 100644
index 000000000..d02f18900
--- /dev/null
+++ b/src/assets/images/icons-userprofile.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
+    <defs>
+        <circle id="nbs0qtv3ga" cx="17.5" cy="17.5" r="17.5"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g transform="translate(-20 -466) translate(0 99) translate(20 327) translate(0 35) translate(0 5)">
+                            <rect width="35" height="35" fill="#FFF" fill-opacity=".6" rx="17.5"/>
+                            <g>
+                                <mask id="413y7q8i5b" fill="#fff">
+                                    <use xlink:href="#nbs0qtv3ga"/>
+                                </mask>
+                                <path fill="#42B9FE" fill-opacity=".7" d="M17.5 8.167c4.51 0 8.167 3.917 8.167 8.75 0 3.035-1.443 5.71-3.634 7.279 4.85 1.914 8.3 6.813 8.3 12.554 0 7.41-5.745 13.417-12.833 13.417S4.667 44.16 4.667 36.75c0-5.741 3.45-10.64 8.3-12.556-2.191-1.567-3.634-4.242-3.634-7.277 0-4.833 3.657-8.75 8.167-8.75z" mask="url(#413y7q8i5b)"/>
+                            </g>
+                            <text fill="#FFF" fill-opacity=".7" font-family="Roboto-Light, Roboto" font-size="20" font-weight="300">
+                                <tspan x="5.889" y="21.778">SE</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-viagem.svg b/src/assets/images/icons-viagem.svg
new file mode 100644
index 000000000..2d12457f3
--- /dev/null
+++ b/src/assets/images/icons-viagem.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
+    <defs>
+        <linearGradient id="gv1uuzmwcc" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset=".038%" stop-color="#4C4C4C"/>
+            <stop offset="100%"/>
+        </linearGradient>
+        <linearGradient id="tequ404qjd" x1="0%" x2="100%" y1="50%" y2="50%">
+            <stop offset="0%" stop-color="#D30A0A"/>
+            <stop offset="100%" stop-color="#B50202"/>
+        </linearGradient>
+        <filter id="u0si8dlg0a" width="120%" height="114.5%" x="-10%" y="-3.6%" filterUnits="objectBoundingBox">
+            <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation=".5"/>
+            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"/>
+            <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.187390734 0"/>
+        </filter>
+        <path id="7mpmpqfmwb" d="M10 0c3.314 0 6 2.686 6 6 0 2.348-1.348 4.38-3.313 5.366C16.905 12.54 20 16.408 20 21c0 5.523-4.977 6.5-10.5 6.5S0 26.523 0 21c0-4.592 3.095-8.461 7.314-9.635C5.348 10.381 4 8.348 4 6c0-3.314 2.686-6 6-6z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g>
+                        <g>
+                            <g transform="translate(-30 -648) translate(20 635) translate(10 10) translate(0 3) translate(7 4)">
+                                <use fill="#000" filter="url(#u0si8dlg0a)" xlink:href="#7mpmpqfmwb"/>
+                                <path fill="url(#gv1uuzmwcc)" stroke="#EBEBEB" stroke-linejoin="square" stroke-opacity=".194" d="M10 .5c1.519 0 2.894.616 3.89 1.61.994.996 1.61 2.371 1.61 3.89 0 1.058-.299 2.046-.816 2.885-.536.867-1.306 1.575-2.221 2.034-.742.372-1.556.57-2.378.585.825.005 1.655.118 2.468.344 2.027.563 3.78 1.782 5.019 3.414C18.782 16.856 19.5 18.844 19.5 21c0 2.232-.876 3.662-2.313 4.552C15.281 26.732 12.467 27 9.5 27c-2.889 0-5.351-.249-6.983-1.366C1.219 24.746.5 23.288.5 21c0-2.156.718-4.144 1.928-5.738 1.239-1.632 2.993-2.851 5.02-3.415h0l1.25-.348-1.16-.581c-.916-.459-1.686-1.166-2.221-2.033C4.799 8.046 4.5 7.058 4.5 6c0-1.519.616-2.894 1.61-3.89C7.107 1.117 8.482.5 10 .5z"/>
+                            </g>
+                            <path fill="url(#tequ404qjd)" d="M2.593 26.288L18.5 16c-.066-.31-.233-.644-.5-1s-.6-.69-1-1L.737 24.437c.154.302.426.65.816 1.045.39.394.736.663 1.04.806z" transform="translate(-30 -648) translate(20 635) translate(10 10) translate(0 3) translate(7 4)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/global.scss b/src/global.scss
index be10a3485..62ac04b65 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -97,7 +97,10 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     width: 100% !important;
     margin-left: 0px !important;
 }
-
+.line{
+        margin-top: 15px;
+border-top: 1px solid #d8d8d8;
+}
 
 
 
@@ -174,36 +177,48 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     display: none;
 }
 
-.timeline-box-{}
+/* .timeline-box-{} */
 
 
 .calendar-event-border{
-    border-radius: 21px !important;
     color: black !important;
     margin: 0px auto !important;
-    width: 35px !important;
+    border: 1px solid #fff;
+    border-radius: 50px;
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+    border-radius: 106px;
+    width: 30px !important;
+    height: 30px;
+    padding: 0px !important;
+    div.day{
+        padding: 0px !important;
+        transform: rotate(-45deg);
+    }
 }
+
 .calendar-mdgpr-event-type-Oficial{
     border-left: 3px solid #ffb703 !important;
 }
 .calendar-mdgpr-event-type-Pessoal{
-    border-right: 3px solid #f05d5e !important;
+    border-top: 3px solid #f05d5e !important;
 }
 .calendar-mdgpr-event-type-both{
     border-left: 3px solid #ffb703 !important;
-    border-right: 3px solid #f05d5e !important;
+    border-top: 3px solid #f05d5e !important;
 }
 .calendar-pr-event-type-both{
-    border-left: 3px solid #99e47b !important;
-    border-right: 3px solid #958bfc !important;
+    border-right: 3px solid #99e47b !important;
+    border-bottom: 3px solid #958bfc !important;
 }
 
 .calendar-pr-event-type-Oficial{
-    border-left: 3px solid #99e47b !important;
+    border-right: 3px solid #99e47b !important;
 }
 
 .calendar-pr-event-type-Pessoal{
-    border-left: 3px solid #958bfc !important;
+    border-bottom: 3px solid #958bfc !important;
 }
 
 .cal-hour-segment {
@@ -269,4 +284,278 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
       height: unset  !important;
     }
   }
-  
\ No newline at end of file
+  
+
+
+.modal-desktop{
+    .modal-wrapper{
+        width: 100%;
+        height: 100%;
+    }
+}
+.hideAsideOptions{
+    @media only screen and (max-width: 800px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 100%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          display: none;
+        }
+      }
+    /* .aside-right{
+        display: none;
+        width: 0;
+    }
+    .content{
+        width: 100%;
+    } */
+}
+.app-default-padding{
+    padding: 30px 20px 0 20px !important;
+}
+.showAsideOptions{
+
+    @media only screen and (min-width: 801px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 65%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          width: 35%;
+        }
+      }
+      @media only screen and (min-width: 1024px){
+        .content{
+          width: 70%;
+        }
+        .aside-right{
+          width: 30%;
+        }
+      }
+      @media only screen and (min-width: 1140px) {
+        .div-icon{
+          display: none;
+        }
+        .content{
+          width: 75%;
+          border-right: 1px solid #d8d8d8;
+        }
+      
+        .aside-right{
+          width: 25%;
+        }
+      }
+}
+
+.modal-width-100{
+    .modal-wrapper{
+        width: 100%;
+    } 
+}
+
+
+.profile-modal{
+    .modal-wrapper{
+        position: absolute;
+        top: -40px;
+        right: 0px;
+        height: 100%;
+        width: 400px;
+    }
+}
+
+.search-desktop-modal{
+    .modal-wrapper{
+        position: absolute;
+        right: 0px;
+        height: 100%;
+        width: 400px;
+    } 
+}
+
+
+.footer-container{
+    padding: 10px 20px;
+}
+
+
+
+.gabinete-digital-mobile-modal-to-Desktop{
+    top: 75px;
+    left: 340px;
+    transform: none !important;
+    ion-backdrop{
+      display: none;
+      transform: none !important;
+    }
+    .modal-wrapper{
+      transform: none !important;
+        width: 100%;
+        height: 100%;
+        box-shadow: none !important;
+        .ion-page {
+          transform: none !important;
+        }
+    }
+}
+
+.chat-mobile-modal-to-Desktop{
+    top: 75px;
+    left: 31%;
+    transform: none !important;
+    ion-backdrop{
+      display: none;
+      transform: none !important;
+    }
+    .modal-wrapper{
+      transform: none !important;
+        width: 100%;
+        height: 100%;
+        box-shadow: none !important;
+        .ion-page {
+          transform: none !important;
+        }
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+  .gabinete-digital-mobile-modal-to-Desktop{
+    //top: 75px;
+    left: 40%;
+
+    .modal-wrapper{
+      transform: none !important;
+        width: 100%;
+        height: 100%;
+        box-shadow: none !important;
+        .ion-page {
+          transform: none !important;
+        }
+    }
+  }
+
+  .search-modal{
+    ion-backdrop{
+        display: none;
+    }
+  }
+
+  
+  .search-submodal{
+    background-color: rgb(0 0 0 / 55%);
+  }
+}
+
+
+@media only screen and (min-width: 1024px) {
+    .search-modal-to-desktop{
+        padding-top: 0px;
+        top: 75px;
+        .modal-wrapper{
+            transform: none !important;
+              width: 100%;
+              height: 100%;
+              box-shadow: none !important;
+              .ion-page {
+                transform: none !important;
+              }
+          }
+    }
+
+    .timeline-mobile{
+        .timeline-box {
+            position: relative;
+            left: -4%;
+            width: 102%;
+        }
+    }
+}
+
+.gabinete-digital-mobile-modal-to-Desktop{
+    border-top-right-radius: 27px;
+}
+
+/* Breakpoints */
+._xs{
+    width: 100%;
+}
+._sm{
+    width: 540px;
+}
+._md{
+    width: 720px;
+}
+._lg{
+    width: 960px;
+}
+._xl{
+    width: 1140px;
+}
+
+
+
+// timeline
+.sd-timeline{
+    .cal-time{
+      display: none;
+    }
+    .cal-current-time-marker::before {
+      display: none !important;
+    }
+  
+    .timeline-box{
+        left: -13%;
+        position: relative;
+        width: 113%;
+    }
+}
+
+
+
+
+.timeline{
+    div.cal-event:focus{
+        outline: none !important;
+    }
+}
+
+
+.calendar-component{
+    td{
+        padding: 8px !important;
+        div{
+            padding-left: 0px;
+        }
+    }
+}
+
+
+// agenda attendee component
+.attendee-search-bar input{
+    border: 1px solid #cecece !important;
+    box-shadow: none !important;
+    border-radius: 3px !important;
+    -webkit-border-radius: 3px !important;
+    -moz-border-radius: 3px !important;
+    -ms-border-radius: 3px !important;
+    -o-border-radius: 3px !important;
+  }  
+  
+  .attendee-search-bar .searchbar-input {
+    border: 1px solid #cecece !important;
+    box-shadow: none !important;
+    border-radius: 3px !important;
+    -webkit-border-radius: 3px !important;
+    -moz-border-radius: 3px !important;
+    -ms-border-radius: 3px !important;
+    -o-border-radius: 3px !important;
+  }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8942fb494..624ff63ae 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
   <meta name="format-detection" content="telephone=no" />
   <meta name="msapplication-tap-highlight" content="no" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
-
+  
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
 
   <link rel="icon" type="image/x-icon" href="assets/icon/favicon.png" />
@@ -20,6 +20,7 @@
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  
 </head>
 
 <body>
diff --git a/src/plugin/momentG.js b/src/plugin/momentG.js
index f21a25b94..6ed4d9e5b 100644
--- a/src/plugin/momentG.js
+++ b/src/plugin/momentG.js
@@ -4,10 +4,14 @@ var month = [
     'Fevereiro',
     'Março',
     'Abril',
-    'Pode',
+    'Maio',
     'Junho',
     'Julho',
-    'Agosto'
+    'Agosto',
+    'Setembro',
+    'Outubro',
+    'Novembro',
+    'Dezembro'
 ]
 
 var week = new Array('Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado');
@@ -22,6 +26,8 @@ class momentG {
             } 
         }
 
+        let toChange = {}
+
         var  e = {
             d   : (date.getDate()).toString() ,
             M   : (date.getMonth()).toString() ,
@@ -36,12 +42,17 @@ class momentG {
             yyyy : date.getFullYear() ,
         }
 
-
-        Object.keys(e).reverse().forEach(element => {
+        Object.keys(e).reverse().forEach((element, index) => {
+            toChange[index] = e[element];
             var reg = new RegExp(element,'g')
-            formate = formate.replace(reg,e[element] )
+            formate = formate.replace(reg, `___${index}___` )
         });
 
+        for (var index in toChange) {
+            var reg = new RegExp(`___${index}___`,'g')
+            formate = formate.replace(reg, toChange[index] )
+        }
+
         return formate
     }
 }
diff --git a/src/style/main.scss b/src/style/main.scss
index b10b6ba43..a54c700b9 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,159 +1,477 @@
-.v-application .overflow-auto {
-    overflow: auto !important;
+// overflow
+.v-application .overflow-auto {overflow: auto !important;}
+.overflow-hidden {overflow: hidden !important;}
+.overflow-visible {overflow: visible !important;}
+.overflow-x-auto {overflow-x: auto !important;}
+.overflow-x-hidden {overflow-x: hidden !important;}
+.overflow-y-auto {overflow-y: auto !important;}
+.overflow-y-hidden {overflow-y: hidden !important;}
+// display
+.d-none {display: none !important;}
+.d-inline {display: inline !important;}
+.d-inline-block {display: inline-block !important;}
+.d-block {display: block !important;}
+.d-table {display: table !important;}
+.d-table-row {display: table-row !important;}
+.d-table-cell {display: table-cell !important;}
+.d-flex {display: flex !important;}
+.d-inline-flex {display: inline-flex !important;}
+//float
+.float-none {float: none !important;}
+.float-left {float: left !important;}
+.float-right {float: right !important;}
+//flex
+.flex-fill {flex: 1 1 auto !important;}
+.flex-row {flex-direction: row !important;}
+.flex-column {flex-direction: column !important;}
+.flex-row-reverse {flex-direction: row-reverse !important;}
+.flex-column-reverse {flex-direction: column-reverse !important;}
+.flex-grow-0 {flex-grow: 0 !important;}
+.flex-grow-1 {flex-grow: 1 !important;}
+.flex-md-1{ flex: 1;}
+.flex-md-0{ flex: 0;}
+.flex-shrink-0 {flex-shrink: 0 !important;}
+.flex-shrink-1 {flex-shrink: 1 !important;}
+.flex-wrap {flex-wrap: wrap !important;}
+.flex-nowrap {flex-wrap: nowrap !important;}
+.flex-wrap-reverse {flex-wrap: wrap-reverse !important;}
+//justify
+.justify-start {justify-content: flex-start !important;}
+.justify-end {justify-content: flex-end !important;}
+.justify-center {justify-content: center !important;}
+.justify-space-between {justify-content: space-between !important;}
+.justify-space-around {justify-content: space-around !important;}
+//align
+.align-start {align-items: flex-start !important;}
+.align-end {align-items: flex-end !important;}
+.align-center {align-items: center !important;}
+.align-baseline {align-items: baseline !important;}
+.align-stretch {align-items: stretch !important;}
+//align-content
+.align-content-start {align-content: flex-start !important;}
+.align-content-end {align-content: flex-end !important;}
+.align-content-center {align-content: center !important;}
+.align-content-space-between {align-content: space-between !important;}
+.align-content-space-around {align-content: space-around !important;}
+.align-content-stretch {align-content: stretch !important;}
+// .align-self
+.align-self-auto {align-self: auto !important;}
+.align-self-start {align-self: flex-start !important;}
+.align-self-end {align-self: flex-end !important;}
+.align-self-center {align-self: center !important;}
+.align-self-baseline {align-self: baseline !important;}
+.align-self-stretch {align-self: stretch !important;}
+.flex-1{ flex: 1;}
+.flex-0{ flex: 0;}
+
+
+@media only screen and (min-width: 1024px) {
+  // overflow
+  .v-application-md .overflow-md-auto {overflow: auto !important;}
+  .overflow-md-hidden {overflow: hidden !important;}
+  .overflow-md-visible {overflow: visible !important;}
+  .overflow-md-x-auto {overflow-x: auto !important;}
+  .overflow-md-x-hidden {overflow-x: hidden !important;}
+  .overflow-md-y-auto {overflow-y: auto !important;}
+  .overflow-md-y-hidden {overflow-y: hidden !important;}
+  //display
+  .d-md-flex {display: flex !important;}
+  .d-md-inline-flex {display: inline-flex !important;}
+  .d-md-none {display: none !important;}
+  .d-md-inline {display: inline !important;}
+  .d-md-inline-block {display: inline-block !important;}
+  .d-md-block {display: block !important;}
+  .d-md-table {display: table !important;}
+  .d-md-table-row {display: table-row !important;}
+  .d-md-table-cell {display: table-cell !important;}
+  .d-md-flex {display: flex !important;}
+  .d-md-inline-flex {display: inline-flex !important;}
+  //float
+  .float-md-none {float: none !important;}
+  .float-md-left {float: left !important;}
+  .float-md-right {float: right !important;}
+  //flex
+  .flex-md-fill {flex: 1 1 auto !important;}
+  .flex-md-row {flex-direction: row !important;}
+  .flex-md-column {flex-direction: column !important;}
+  .flex-md-row-reverse {flex-direction: row-reverse !important;}
+  .flex-md-column-reverse {flex-direction: column-reverse !important;}
+  .flex-md-grow-0 {flex-grow: 0 !important;}
+  .flex-md-grow-1 {flex-grow: 1 !important;}
+  .flex-md-1{ flex: 1;}
+  .flex-md-0{ flex: 0;}
+  .flex-md-shrink-0 {flex-shrink: 0 !important;}
+  .flex-md-shrink-1 {flex-shrink: 1 !important;}
+  .flex-md-wrap {flex-wrap: wrap !important;}
+  .flex-md-nowrap {flex-wrap: nowrap !important;}
+  .flex-md-wrap-reverse {flex-wrap: wrap-reverse !important;}
+  // justify
+  .justify-md-end{  justify-content: flex-end !important;}
+  .justify-md-center{ justify-content: flex-start !important;}
+  .justify-md-space-between{ justify-content: space-between !important;}
+  .justify-md-space-around{ justify-content: space-around !important;}
+  // align
+  .align-md-start{ align-items: flex-start !important;}
+  .align-md-end{align-items: flex-end !important;}
+  .align-md-center{ align-items: center !important;}
+  .align-md-baseline{ align-items: baseline !important;}
+  .align-md-stretch{align-items: stretch !important;}
+  // .align-self
+  .align-self-md-start{ align-self: flex-start !important;}
+  .align-self-md-end{ align-self: flex-end !important;}
+  .align-self-md-center{ align-self: center !important;}
+  .align-self-md-baseline{ align-self: baseline !important;}
+  .align-self-md-auto{ align-self: auto !important;}
+  .align-self-md-stretch{ align-self: stretch !important; }
+  // flex wrap
+  .flex-md-nowrap{   flex-wrap: nowrap !important;}
+  .flex-md-wrap{  flex-wrap: wrap !important;}
+  .flex-md-wrap-reverse{ flex-wrap: wrap-reverse !important;}
+  // align content
+  .align-md-content-start{  align-content: flex-start !important;}
+  .align-md-content-end{  align-content: flex-end !important;}
+  .align-md-content-center{ align-content: center !important;}
+  .align-md-content-space-between{ align-content: space-between !important;}
+  .align-md-content-space-around{ align-content: space-around !important;}
+  .align-md-content-stretch{ align-content: stretch !important;}
+
+  @for $i from 0 through 50 {
+      .font-md-#{$i} {
+          font-size: #{$i}px ;
+      }
+  }
+  @for $i from 0 through 10 {
+
+      $size: $i * 5;
+      
+      $properties:
+        "margin" "m",
+        "padding" "p";
+    
+      @each $property, $short in $properties {
+        // all directions
+        .#{$short}a-md-#{$size} {
+          #{$property}-left: #{$size}px !important; 
+          #{$property}-right: #{$size}px !important;
+          #{$property}-top: #{$size}px !important; 
+          #{$property}-bottom: #{$size}px !important;
+        }
+        // top
+        .#{$short}t-md-#{$size} {
+          #{$property}-top: #{$size}px !important
+        }
+        // bottom
+        .#{$short}b-md-#{$size} {
+          #{$property}-bottom: #{$size}px !important
+        }
+        // left
+        .#{$short}l-md-#{$size} {
+          #{$property}-left: #{$size}px!important
+        }
+        // right
+        .#{$short}r-md-#{$size} {
+          #{$property}-right: #{$size}px!important
+        }
+        // left and right
+        .#{$short}x-md-#{$size} {
+          #{$property}-left: #{$size}px!important;
+          #{$property}-right: #{$size}px!important;
+        }
+        // top and bottom
+        .#{$short}y-md-#{$size} {
+          #{$property}-top: #{$size}px !important;
+          #{$property}-bottom: #{$size}px !important;
+        }
+    
+      }
+  }
+
+
+.width-md-100{width: 100%;}
+.width-md-90{width: 90%;}
+.width-md-80{width: 80%;}
+.width-md-70{width: 70%;}
+.width-md-60{width: 60%;}
+.width-md-50{width: 50%;}
+.width-md-40{width: 40%;}
+.width-md-30{width: 30%;}
+.width-md-20{width: 20%;}
+.width-md-10{width: 10%;}
+
+.width-md-unset{ width: unset;}
+.height-md-unset{ height: unset !important;}
+
+.max-width-md-100{max-width: 100%;}
+.max-width-md-90{max-width: 90%;}
+.max-width-md-80{max-width: 80%;}
+.max-width-md-70{max-width: 70%;}
+.max-width-md-60{max-width: 60%;}
+.max-width-md-50{max-width: 50%;}
+.max-width-md-40{max-width: 40%;}
+.max-width-md-35{max-width: 35%;}
+.max-width-md-30{max-width: 30%;}
+.max-width-md-20{max-width: 20%;}
+.max-width-md-10{max-width: 10%;}
+
 }
-.overflow-hidden {
-    overflow: hidden !important;
+
+@media only screen and (min-width: 1366px) {
+  // overflow
+  .v-application-lg .overflow-md-auto {overflow: auto !important;}
+  .overflow-lg-hidden {overflow: hidden !important;}
+  .overflow-lg-visible {overflow: visible !important;}
+  .overflow-lg-x-auto {overflow-x: auto !important;}
+  .overflow-lg-x-hidden {overflow-x: hidden !important;}
+  .overflow-lg-y-auto {overflow-y: auto !important;}
+  .overflow-lg-y-hidden {overflow-y: hidden !important;}
+  //display
+  .d-lg-flex {display: flex !important;}
+  .d-lg-inline-flex {display: inline-flex !important;}
+  .d-lg-none {display: none !important;}
+  .d-lg-inline {display: inline !important;}
+  .d-lg-inline-block {display: inline-block !important;}
+  .d-lg-block {display: block !important;}
+  .d-lg-table {display: table !important;}
+  .d-lg-table-row {display: table-row !important;}
+  .d-lg-table-cell {display: table-cell !important;}
+  .d-lg-flex {display: flex !important;}
+  .d-lg-inline-flex {display: inline-flex !important;}
+  //float
+  .float-lg-none {float: none !important;}
+  .float-lg-left {float: left !important;}
+  .float-lg-right {float: right !important;}
+  //flex
+  .flex-lg-fill {flex: 1 1 auto !important;}
+  .flex-lg-row {flex-direction: row !important;}
+  .flex-lg-column {flex-direction: column !important;}
+  .flex-lg-row-reverse {flex-direction: row-reverse !important;}
+  .flex-lg-column-reverse {flex-direction: column-reverse !important;}
+  .flex-lg-grow-0 {flex-grow: 0 !important;}
+  .flex-lg-grow-1 {flex-grow: 1 !important;}
+  .flex-lg-1{ flex: 1;}
+  .flex-lg-0{ flex: 0;}
+  .flex-lg-shrink-0 {flex-shrink: 0 !important;}
+  .flex-lg-shrink-1 {flex-shrink: 1 !important;}
+  .flex-lg-wrap {flex-wrap: wrap !important;}
+  .flex-lg-nowrap {flex-wrap: nowrap !important;}
+  .flex-lg-wrap-reverse {flex-wrap: wrap-reverse !important;}
+  // justify
+  .justify-lg-end{  justify-content: flex-end !important;}
+  .justify-lg-center{ justify-content: flex-start !important;}
+  .justify-lg-space-between{ justify-content: space-between !important;}
+  .justify-lg-space-around{ justify-content: space-around !important;}
+  // align
+  .align-lg-start{ align-items: flex-start !important;}
+  .align-lg-end{align-items: flex-end !important;}
+  .align-lg-center{ align-items: center !important;}
+  .align-lg-baseline{ align-items: baseline !important;}
+  .align-lg-stretch{align-items: stretch !important;}
+  // .align-self
+  .align-self-lg-start{ align-self: flex-start !important;}
+  .align-self-lg-end{ align-self: flex-end !important;}
+  .align-self-lg-center{ align-self: center !important;}
+  .align-self-lg-baseline{ align-self: baseline !important;}
+  .align-self-lg-auto{ align-self: auto !important;}
+  .align-self-lg-stretch{ align-self: stretch !important; }
+  // flex wrap
+  .flex-lg-nowrap{   flex-wrap: nowrap !important;}
+  .flex-lg-wrap{  flex-wrap: wrap !important;}
+  .flex-lg-wrap-reverse{ flex-wrap: wrap-reverse !important;}
+  // align content
+  .align-lg-content-start{  align-content: flex-start !important;}
+  .align-lg-content-end{  align-content: flex-end !important;}
+  .align-lg-content-center{ align-content: center !important;}
+  .align-lg-content-space-between{ align-content: space-between !important;}
+  .align-lg-content-space-around{ align-content: space-around !important;}
+  .align-lg-content-stretch{ align-content: stretch !important;}
+
+  .width-lg-unset{ width: unset;}
+  .height-lg-unset{ height: unset !important;}
+
+  @for $i from 0 through 50 {
+      .font-lg-#{$i} {
+          font-size: #{$i}px ;
+      }
+  }
+  @for $i from 0 through 10 {
+
+      $size: $i * 5;
+      
+      $properties:
+        "margin" "m",
+        "padding" "p";
+    
+      @each $property, $short in $properties {
+        // all directions
+        .#{$short}a-lg-#{$size} {
+          #{$property}-left: #{$size}px !important; 
+          #{$property}-right: #{$size}px !important;
+          #{$property}-top: #{$size}px !important; 
+          #{$property}-bottom: #{$size}px !important;
+        }
+        // top
+        .#{$short}t-lg-#{$size} {
+          #{$property}-top: #{$size}px !important
+        }
+        // bottom
+        .#{$short}b-lg-#{$size} {
+          #{$property}-bottom: #{$size}px !important
+        }
+        // left
+        .#{$short}l-lg-#{$size} {
+          #{$property}-left: #{$size}px!important
+        }
+        // right
+        .#{$short}r-lg-#{$size} {
+          #{$property}-right: #{$size}px!important
+        }
+        // left and right
+        .#{$short}x-lg-#{$size} {
+          #{$property}-left: #{$size}px!important;
+          #{$property}-right: #{$size}px!important;
+        }
+        // top and bottom
+        .#{$short}y-lg-#{$size} {
+          #{$property}-top: #{$size}px !important;
+          #{$property}-bottom: #{$size}px !important;
+        }
+    
+      }
+  }
 }
-.overflow-visible {
-    overflow: visible !important;
+
+.m-l-auto {margin-left: auto;}
+.m-auto {margin: 0 auto;}
+.ml-auto, .mx-auto {margin-left: auto!important;}
+.mr-auto, .mx-auto {margin-right: auto!important;}
+
+.text-bold {font-weight: 700;}
+.text-bold {font-weight: 700;}
+
+.text-blue {color: #0d89d1;}
+.text-red {color: #d30a0a;}
+.text-dark-blue {color: #061b52;}
+.text-grey {color: #797979;}
+.text-white {color: white;}
+.text-black {color: black;}
+
+.background-blue {background-color: #0d89d1;}
+.background-red {background: #d30a0a;}
+.background-dark-blue {background: #061b52;}
+.background-grey {background: #797979;}
+.background-white {background: white;}
+.background-black {background: black;}
+
+.text-center {text-align: center;}
+.tex-left{ text-align: left;}
+.text-right{text-align: right;}
+
+.width-100{width: 100%;}
+.width-90{width: 90%;}
+.width-80{width: 80%;}
+.width-70{width: 70%;}
+.width-60{width: 60%;}
+.width-50{width: 50%;}
+.width-45{width: 45%;}
+.width-40{width: 40%;}
+.width-30{width: 30%;}
+.width-20{width: 20%;}
+.width-10{width: 10%;}
+
+
+.max-width-100{max-width: 100%;}
+.max-width-90{max-width: 90%;}
+.max-width-80{max-width: 80%;}
+.max-width-70{max-width: 70%;}
+.max-width-60{max-width: 60%;}
+.max-width-65{max-width: 65%;}
+.max-width-50{max-width: 50%;}
+.max-width-45{max-width: 45%;}
+.max-width-40{max-width: 40%;}
+.max-width-35{max-width: 35%;}
+.max-width-30{max-width: 30%;}
+.max-width-20{max-width: 20%;}
+.max-width-10{max-width: 10%;}
+
+
+.height-100{height: 100%;}
+.height-90{height: 90%;}
+.height-80{height: 80%;}
+.height-70{width: 70%;}
+.height-60{height: 60%;}
+.height-50{height: 50%;}
+.height-40{height: 40%;}
+.height-30{height: 30%;}
+.height-20{height: 20%;}
+.height-10{height: 10%;}
+
+.height-unset{ height: unset;}
+.width-unset{ width: unset;}
+
+.height-fit-content{height: fit-content;}
+
+
+.border-t-radius{
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
 }
-.overflow-x-auto {
-    overflow-x: auto !important;
+.border-b-radius{
+    border-bottom-left-radius: 25px;
+    border-bottom-right-radius: 25px;
 }
-.overflow-x-hidden {
-    overflow-x: hidden !important;
-}
-.overflow-y-auto {
-    overflow-y: auto !important;
-}
-.overflow-y-hidden {
-    overflow-y: hidden !important;
-}
-.d-none {
-    display: none !important;
-}
-.d-inline {
-    display: inline !important;
-}
-.d-inline-block {
-    display: inline-block !important;
-}
-.d-block {
-    display: block !important;
-}
-.d-table {
-    display: table !important;
-}
-.d-table-row {
-    display: table-row !important;
-}
-.d-table-cell {
-    display: table-cell !important;
-}
-.d-flex {
-    display: flex !important;
-}
-.d-inline-flex {
-    display: inline-flex !important;
-}
-.float-none {
-    float: none !important;
-}
-.float-left {
-    float: left !important;
-}
-.float-right {
-    float: right !important;
-}
-.flex-fill {
-    flex: 1 1 auto !important;
-}
-.flex-row {
-    flex-direction: row !important;
-}
-.flex-column {
-    flex-direction: column !important;
-}
-.flex-row-reverse {
-    flex-direction: row-reverse !important;
-}
-.flex-column-reverse {
-    flex-direction: column-reverse !important;
-}
-.flex-grow-0 {
-    flex-grow: 0 !important;
-}
-.flex-grow-1 {
-    flex-grow: 1 !important;
-}
-.flex-shrink-0 {
-    flex-shrink: 0 !important;
-}
-.flex-shrink-1 {
-    flex-shrink: 1 !important;
-}
-.flex-wrap {
-    flex-wrap: wrap !important;
-}
-.flex-nowrap {
-    flex-wrap: nowrap !important;
-}
-.flex-wrap-reverse {
-    flex-wrap: wrap-reverse !important;
-}
-.justify-start {
-    justify-content: flex-start !important;
-}
-.justify-end {
-    justify-content: flex-end !important;
-}
-.justify-center {
-    justify-content: center !important;
-}
-.justify-space-between {
-    justify-content: space-between !important;
-}
-.justify-space-around {
-    justify-content: space-around !important;
-}
-.align-start {
-    align-items: flex-start !important;
-}
-.align-end {
-    align-items: flex-end !important;
-}
-.align-center {
-    align-items: center !important;
-}
-.align-baseline {
-    align-items: baseline !important;
-}
-.align-stretch {
-    align-items: stretch !important;
-}
-.align-content-start {
-    align-content: flex-start !important;
-}
-.align-content-end {
-    align-content: flex-end !important;
-}
-.align-content-center {
-    align-content: center !important;
-}
-.align-content-space-between {
-    align-content: space-between !important;
-}
-.align-content-space-around {
-    align-content: space-around !important;
-}
-.align-content-stretch {
-    align-content: stretch !important;
-}
-.align-self-auto {
-    align-self: auto !important;
-}
-.align-self-start {
-    align-self: flex-start !important;
-}
-.align-self-end {
-    align-self: flex-end !important;
-}
-.align-self-center {
-    align-self: center !important;
-}
-.align-self-baseline {
-    align-self: baseline !important;
-}
-.align-self-stretch {
-    align-self: stretch !important;
+
+// system spacing
+
+
+@for $i from 0 through 10 {
+
+    $size: $i * 5;
+    
+    $properties:
+      "margin" "m",
+      "padding" "p";
+  
+    @each $property, $short in $properties {
+      // all directions
+      .#{$short}a-#{$size} {
+        #{$property}-left: #{$size}px !important; 
+        #{$property}-right: #{$size}px !important;
+        #{$property}-top: #{$size}px !important; 
+        #{$property}-bottom: #{$size}px !important;
+      }
+      // top
+      .#{$short}t-#{$size} {
+        #{$property}-top: #{$size}px !important
+      }
+      // bottom
+      .#{$short}b-#{$size} {
+        #{$property}-bottom: #{$size}px !important
+      }
+      // left
+      .#{$short}l-#{$size} {
+        #{$property}-left: #{$size}px!important
+      }
+      // right
+      .#{$short}r-#{$size} {
+        #{$property}-right: #{$size}px!important
+      }
+      // left and right
+      .#{$short}x-#{$size} {
+        #{$property}-left: #{$size}px!important;
+        #{$property}-right: #{$size}px!important;
+      }
+      // top and bottom
+      .#{$short}y-#{$size} {
+        #{$property}-top: #{$size}px !important;
+        #{$property}-bottom: #{$size}px !important;
+      }
+  
+    }
+  }
+
+
+@for $i from 0 through 50 {
+    .font-#{$i} {
+        font-size: #{$i}px ;
+    }
 }
\ No newline at end of file
diff --git a/src/style/readme.md b/src/style/readme.md
index eae46b5fc..13be5e54f 100644
--- a/src/style/readme.md
+++ b/src/style/readme.md
@@ -68,6 +68,9 @@
 <ul>
   <li><strong>.d-flex</strong></li> 
   <li><strong>.d-inline-flex</strong></li> 
+  <br>
+  <li><strong>.d-md-flex</strong></li> 
+  <li><strong>.d-lg-flex</strong></li> 
 </ul>
 
 
@@ -81,6 +84,9 @@
   <li><strong>.flex-row-reverse</strong></li> 
   <li><strong>.flex-column</strong></li> 
   <li><strong>.flex-column-reverse</strong></li> 
+  <br>
+  <li><strong>.flex-md-row</strong></li> 
+  <li><strong>.flex-lg-row</strong></li> 
 </ul>
 
 <br>
@@ -89,7 +95,12 @@
 ###  <span id="Flex-justify">Flex-justify</span>
 <br>
 
-<ul><li><strong>.justify-start</strong></li> <li><strong>.justify-end</strong></li> <li><strong>.justify-center</strong></li> <li><strong>.justify-space-between</strong></li> <li><strong>.justify-space-around</strong></li></ul>
+<ul>
+<li><strong>.justify-start</strong></li> <li><strong>.justify-end</strong></li> <li><strong>.justify-center</strong></li> <li><strong>.justify-space-between</strong></li> <li><strong>.justify-space-around</strong></li>
+  <br>
+  <li><strong>.justify-md-start</strong></li> 
+  <li><strong>.justify-lg-start</strong></li> 
+</ul>
 
 
 <br>
@@ -97,7 +108,12 @@
 
 ### <span id="Flex-align">Flex align</span>
 <br>
-<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
+<ul>
+  <li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li>
+  <br>
+  <li><strong>.align-md-start</strong></li> 
+  <li><strong>.justialignfy-lg-start</strong></li> 
+</ul>
 
 
 <br>
@@ -106,7 +122,12 @@
 ###  <span id="Flex-align-self">Flex align self</span>
 <br>
 
-<ul><li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li></ul>
+<ul>
+  <li><strong>.align-start</strong></li> <li><strong>.align-end</strong></li> <li><strong>.align-center</strong></li> <li><strong>.align-baseline</strong></li> <li><strong>.align-stretch</strong></li>
+  <br>
+  <li><strong>.align-md-start</strong></li> 
+  <li><strong>.align-lg-start</strong></li> 
+</ul>
 
 <br>
 <br>
@@ -115,6 +136,9 @@
 <br>
 <ul>
   <li><strong>.flex-nowrap</strong></li> <li><strong>.flex-wrap</strong></li> <li><strong>.flex-wrap-reverse</strong></li> 
+  <br>
+  <li><strong>.flex-md-nowrap</strong></li> 
+  <li><strong>.flex-lg-nowrap</strong></li> 
 </ul>
 
 <hr>
@@ -133,5 +157,52 @@
 ### <span id="Float-direction">Float direction</span>
 <br>
 <ul>
-  <li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li> 
-</ul>
\ No newline at end of file
+  <li><strong>.float-left</strong></li> 
+  <li><strong>.float-right</strong></li>
+  <br>
+  <li><strong>.float-md-left</strong></li> 
+  <li><strong>.float-lg-left</strong></li>  
+</ul>
+
+
+
+
+
+##  <span id="Spacing">Spacing</span>
+<br>
+
+<p>The helper classes apply <strong>margin</strong> or <strong>padding</strong> to an element ranging from <em>0 to 5</em>. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format <code>{property}{direction}-{size}</code>.</p>
+
+<p>The <strong>property</strong> applies the type of spacing:</p>
+
+<div ><ul>
+<li><code>m</code> - applies <code>margin</code></li>
+<li><code>p</code> - applies <code>padding</code></li>
+</ul>
+</div>
+
+<p>The <strong>direction</strong> designates the side the property applies to:</p>
+
+<div ><ul>
+<li><code>t</code> - applies the spacing for <code>*-top</code></li>
+<li><code>b</code> - applies the spacing for <code>*-bottom</code></li>
+<li><code>l</code> - applies the spacing for <code>*-left</code></li>
+<li><code>r</code> - applies the spacing for <code>*-right</code></li>
+<li><code>x</code> - applies the spacing for both <code>*-left</code> and <code>*-right</code></li>
+<li><code>y</code> - applies the spacing for both <code>*-top</code> and <code>*-bottom</code></li>
+<li><code>a</code> - applies the spacing for the property in all directions</li>
+</ul>
+</div>
+<p>The <strong>size</strong> controls the increment of the property:</p>
+
+
+Example:
+
+```html
+<template>
+  <div>
+    <span class="pl-3">Test</span><br>
+    <span  class="ml-5 "
+    >Test</span>
+  <div>
+</template>
\ No newline at end of file
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ec813d5f5..40a49b1da 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -44,6 +44,7 @@
   --ion-color-warning-tint: #ffca22;
 
   /** danger **/
+  --ion-color-red:#d30a0a;
   --ion-color-danger: #eb445a;
   --ion-color-danger-rgb: 235, 68, 90;
   --ion-color-danger-contrast: #ffffff;
@@ -264,7 +265,7 @@
   background: rgba(51, 51, 51, 0.3); 
 }
 .modal, .newchat, .new-group, .contacts, .group-messages, .custom-modal{
-  padding-top: 93px;
+  padding-top: 75px;
   --border-radius: 25px 25px 0 0;
   --border-width:0px;
 }
@@ -312,7 +313,6 @@
 /* .event-actions-popover ion-list{
 } */
 .Rectangle {
-  width: 360px;
   border-radius: 15px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
   border: solid 1px #e9e9e9;