diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 073c9e002..9765b510c 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -74,8 +74,8 @@
     
           <!-- 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 [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>
diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts
index e58cba4db..984045390 100644
--- a/src/app/pages/agenda/agenda.page.ts
+++ b/src/app/pages/agenda/agenda.page.ts
@@ -172,6 +172,34 @@ export class AgendaPage implements OnInit {
     this.viewTitle = title;
   }
 
+  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;
+
+      events.forEach(element => {
+        eventType[element.calendarName] = 1;
+      });
+
+      eventTypeNum = (Object.keys(eventType)).length
+
+      if (eventTypeNum == 2) { 
+        return 'calendar-event-type-both';
+      } else {
+        return 'calendar-event-type-'+(Object.keys(eventType))[0];
+      }
+
+    }
+
+    return "";
+  }
+
   // Show information of the event for timeline
   eventClicked({ event }: { event: CalendarEvent }): void {
     console.log('Event clicked', event);
@@ -289,7 +317,8 @@ export class AgendaPage implements OnInit {
                   startTime: new Date(element.StartDate),
                   endTime: new Date(element.EndDate),
                   allDay: false,
-                  event: element
+                  event: element,
+                  calendarName: element.CalendarName
                 });
 
                 const startHours =  formatDate(new Date(element.StartDate), 'HH', 'pt');
diff --git a/src/global.scss b/src/global.scss
index a77083c47..9cd1636ae 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -67,7 +67,7 @@ td.monthview-selected {
     border-top: none !important;
 }
 
-
+.calendar-event-type
 /* Timeline */
 
 .cal-hour-segment {
@@ -144,6 +144,38 @@ td.monthview-selected {
 }
 
 .timeline-box-{}
+
+
+.calendar-event-type-Oficial{
+    border-right: 3px solid #f05d5e !important;
+    border-radius: 21px;
+    color: black;
+    margin: 0px auto;
+    width: 35px;
+}
+
+.calendar-event-type-Pessoal{
+    border-left: 3px solid #ffb703 !important;
+    border-radius: 21px;
+    color: black;
+    margin: 0px auto;
+    width: 35px;
+}
+
+.calendar-event-type-both{
+    border-radius: 21px;
+    border-left: 3px solid #ffb703;
+    border-bottom: none;
+    border-right: 3px solid #f05d5e;
+    color: black;
+    margin: 0px auto;
+    width: 35px;
+}
+
+.cal-hour-segment {
+    border-bottom: none !important;
+}
+
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";
 @import "./style/main.scss";