diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 4a5df9b76..7d0f2b7df 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -6,7 +6,7 @@
 
   <div class="d-flex bg-blue container-wrapper">
     
-    <div class="calendar-timeline bg-blue">
+    <div class="calendar-timeline d-flex flex-column height-100 bg-blue">
       <div class="calendar-wrapper">
         
         <div class="main-content">
@@ -230,10 +230,10 @@
       
       
           <!-- Calendar currente date -->
-          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
+          <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='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.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 }}
@@ -250,11 +250,23 @@
               </ul>
             </ion-row>
           </ion-row>
+          
+          <div class="d-flex pb-5  d-none d-md-flex">
+            <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+              <div>Prória</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 Republica</div>
+              </div>
+            </div>
+          </div>
+
         </div>
         </div>
 
       </div>
-      <div class="timeline-wrapper"  [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
+      <div class="timeline-wrapper flex-grow-1"  [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
           <!-- Progress bar -->
         <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
           <ion-refresher-content>
@@ -262,24 +274,33 @@
         </ion-refresher>
 
         <!-- 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)"
-            >
-            </mwl-calendar-day-view>
+        <div>
+          <div class="timeline-container d-flex"  *ngIf="showTimeline">
+
+            <div [ngSwitch]="view" class="timeline-mobile flex-grow-1">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                (eventClicked)="eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+  
+            
+            <div [ngSwitch]="view" class="flex-grow-1 d-none d-md-block timeline-md">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                (eventClicked)="eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+  
           </div>
         </div>
+
       </div>
     </div>
 
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index e71c616e2..0f61d69fc 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -501,7 +501,6 @@ td.monthview-primary-with-event {
 .container-wrapper{
   height: 100%;
   .calendar-timeline{
-    flex-wrap: wrap;
     border-top-right-radius: 24px;
     width: calc(100%);
 
@@ -535,10 +534,14 @@ td.monthview-primary-with-event {
     height: 100%;
     
     .calendar-timeline{
-      flex-wrap: wrap;
       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{
@@ -600,4 +603,5 @@ app-approve-event{
   display: flex;
   align-items: center;
   height: 100%;
-}
\ No newline at end of file
+}
+
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index d6b101306..e1968049d 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -127,7 +127,7 @@ export class AgendaPage implements OnInit {
     private sanitizer: DomSanitizer
     ) {
 
-      this.calendarHeight = "347px";
+      this.calendarHeight = '333px';
       this.showCalendar = true;
       this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
 
@@ -161,7 +161,6 @@ export class AgendaPage implements OnInit {
       if( window.innerWidth <= 1024){
         console.log('mobile')
         this.cloneAllmobileComponent();
-        
       }
     };
 
diff --git a/src/global.scss b/src/global.scss
index 625e68241..dffe67857 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -414,4 +414,37 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 }
 ._xl{
     width: 1140px;
+}
+
+
+
+// timeline
+.timeline-md{
+    .cal-time{
+      display: none;
+    }
+    .cal-current-time-marker::before {
+      display: none !important;
+    }
+  
+    .timeline-box{
+      left: -12%;
+      position: relative;
+      width: 110%;
+    }
+}
+
+
+.timeline-mobile{
+    .timeline-box {
+        position: relative;
+        left: -4%;
+        width: 102%;
+    }
+}
+
+.timeline{
+    div.cal-event:focus{
+        outline: none !important;
+    }
 }
\ No newline at end of file