diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index e69de29bb..e557817e3 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -0,0 +1,4 @@
+ion-tab-bar{
+    --background: #e3dfdf;
+    --color: #000;
+}
\ No newline at end of file
diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html
index 36faafc55..5bc7a309c 100644
--- a/src/app/pages/events/events.page.html
+++ b/src/app/pages/events/events.page.html
@@ -1,4 +1,5 @@
-<ion-header translucent="true">
+<div class="header-toolbar">
+<ion-header translucent="true" >
   <ion-toolbar>
     <ion-title>
       <ion-item class="ion-text-header-top" lines="none">
@@ -22,6 +23,7 @@
     </ion-title>
   </ion-toolbar> 
 </ion-header>
+</div>
 
 <ion-content>
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
@@ -34,7 +36,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <!-- TABS -->
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="Combinada">
         Combinada
@@ -55,7 +57,7 @@
           <ion-item lines="none" 
           *ngFor="let event of eventsList"
           [routerLink]="['/home/events', event.EventId]">
-            <div class="div-item">
+            <div class="div-item-{{event.CalendarName}}">
               <div class="div-up">
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
@@ -88,7 +90,7 @@
           <ion-item lines="none" 
           *ngFor="let event of officialeventsList"
           [routerLink]="['/home/events', event.EventId]">
-            <div class="div-item">
+            <div class="div-item-{{event.CalendarName}}">
               <div class="div-up">
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
@@ -121,7 +123,7 @@
           <ion-item lines="none" 
           *ngFor="let event of personaleventsList"
           [routerLink]="['/home/events', event.EventId]">
-            <div class="div-item">
+            <div class="div-item-{{event.CalendarName}}">
               <div class="div-up">
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss
index 0981a2ba5..8b09a9a84 100644
--- a/src/app/pages/events/events.page.scss
+++ b/src/app/pages/events/events.page.scss
@@ -1,3 +1,8 @@
+.header-toolbar{
+  /* background: #f5f5f5;
+  border: 1px solid red; */
+}
+
 /* HEADER */
 .ion-text-header-top{
     text-align: center;
@@ -48,11 +53,26 @@
     }
     
     //DIV
-    .div-item{
+    .div-item-Oficial{
       width: 100%;
       overflow: auto;
-      border-bottom: 1px solid #ccc;
+      
       margin: 10px 0 5px 0;
+      overflow: auto;
+
+      background: #cab0dc;
+      padding: 5px;
+      border-radius: 10PX;
+    }
+    .div-item-Pessoal{
+      width: 100%;
+      overflow: auto;
+      margin: 10px 0 5px 0;
+      overflow: auto;
+
+      background: #cbeecb;
+      padding: 5px;
+      border-radius: 10PX;
     }
     .div-up{
       width: 100%;
@@ -80,6 +100,7 @@
       float: left;
       border-left: 4px solid #cab0dc;
       padding: 0 0 0 12px;
+      
     }
     .div-content-Pessoal{
       width: 85%;