diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html
index 3c0341cc8..094f3d9b8 100644
--- a/src/app/pages/agenda/agenda.page.html
+++ b/src/app/pages/agenda/agenda.page.html
@@ -1,6 +1,19 @@
 
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar 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-toolbar class="bg-blue">
     <ion-buttons slot="end">
       <!-- customized TOGGLE button -->
       <div class="toggleBox">
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss
index fdaad9ea6..33f6194f9 100644
--- a/src/app/pages/agenda/agenda.page.scss
+++ b/src/app/pages/agenda/agenda.page.scss
@@ -145,7 +145,7 @@ Calendar
 */
 /* NEW CSS FOR TOGGLE BUTTON */
 .toggleBox{
-  margin:20px 20px 0 0;
+  margin:20px 12px 7px 0;
 }
 input[type="checkbox"]{
   position: relative;
@@ -214,7 +214,34 @@ label{
   font-size: 25px;
   margin: 0 5px 0 25px;
   padding: 0;
-  color:#000;
+  color:#ffffff;
   float: left;
 }
 
+.div-top-header{
+  width: 400px;
+  height: 50px;
+  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;
+}
+
diff --git a/src/app/pages/events/events.page.html b/src/app/pages/events/events.page.html
index af0549f35..1da806677 100644
--- a/src/app/pages/events/events.page.html
+++ b/src/app/pages/events/events.page.html
@@ -1,25 +1,29 @@
 <ion-header translucent="true">
-  <ion-toolbar>
-    <ion-item class="ion-text-header-top" lines="none">
-      <div class="div-logo">
-        <img src='assets/images/logo.png' alt='logo'>
-      </div>
-      <ion-label>
-        <h6 class="header-xsmall">Presidente da República</h6>
-        <h2 class="header-large">GABINETE DIGITAL</h2>
-      </ion-label>
-    </ion-item>
-  <ion-buttons slot="end">
-<div class="toggleBox">
-  <div (click)="changeProfile()" class="toggle">
-    <input type="checkbox">
-    <label for="" class="onbtn">PR</label>
-    <label for="" class="ofbtn">MDGPR</label>
-  </div> 
-</div>
-</ion-buttons>
+  <ion-toolbar 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-toolbar>
+<ion-toolbar class="bg-blue">
+<ion-buttons slot="end">
+  <div class="toggleBox">
+    <div (click)="changeProfile()" class="toggle">
+      <input type="checkbox">
+      <label for="" class="onbtn">PR</label>
+      <label for="" class="ofbtn">MDGPR</label>
+    </div> 
+  </div>
+  </ion-buttons>
+</ion-toolbar>
+  <ion-toolbar class="bg-blue">
     <ion-label>
       <ion-item class="ion-text-right" lines="none">
         <ion-label class="ion-text-wrap">
@@ -33,7 +37,7 @@
     </ion-label>
   </ion-toolbar>
   <!-- TABS -->
-  <ion-toolbar >
+  <ion-toolbar>
     <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
       <ion-segment-button value="Combinada">
         Combinada
@@ -48,7 +52,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content >
   <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
   <ion-label>
     <p class="p-small">{{customDate}}</p>
diff --git a/src/app/pages/events/events.page.scss b/src/app/pages/events/events.page.scss
index 19eb3a6fb..5c7d8cb36 100644
--- a/src/app/pages/events/events.page.scss
+++ b/src/app/pages/events/events.page.scss
@@ -1,27 +1,64 @@
 /* HEADER */
+.bg-blue{
+  --background:#0782c9;
+  background:#0782c9;
+  --background-color:#0782c9;
+  background-color:#0782c9;
+  color: #ffffff;
+  --color: #ffffff;
+}
 ion-toolbar{
   --background: white;
 }
 .ion-text-header-top{
   width: 100%;
-
+  --background: transparent;
     text-align: center;
     padding-top: 15px;
+    color: #ffffff;
 
     /* border: 1px solid red; */
   }
+  .div-top-header{
+    width: 400px;
+    height: 50px;
+    margin: 6px auto;
+    background-color: #0782c9;
+    overflow: auto;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
   .div-logo{
-    width: 60px;
-    /* border: 1px solid red; */
-    margin-right: 20px;
+    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;
+  }
+  .ion-text-header-top p{
+    --background: transparent;
+    color: #ffffff;
+  }
+  .ion-text-right{
+    --background: transparent;
+    color: #ffffff;
+  }
   .header-large{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12.5pt;
     /* font-weight: 600; */
+    background: transparent;
+    color: #ffffff;
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
@@ -30,6 +67,7 @@ ion-toolbar{
     padding-bottom: 3.5px;
     margin-bottom: 3.5px;
     border-bottom: 1px solid #ccc;
+    background: transparent;
   }
   .header-medium{
     font-size: 12pt;
@@ -46,6 +84,7 @@ ion-toolbar{
     color:#000;
     margin-right: 25px !important;
     text-align: right;
+    /* color: #ffffff; */
   }
   
   /* CONTENT */
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.html b/src/app/pages/gabinete-digital/gabinete-digital.page.html
index 3265de6ef..4270bb3c6 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.html
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.html
@@ -1,5 +1,18 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar 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-toolbar class="bg-blue">
     <ion-title class="header-title">Gabinete Digital</ion-title>
   </ion-toolbar>
 </ion-header>
diff --git a/src/app/pages/gabinete-digital/gabinete-digital.page.scss b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
index 1b2754739..babb917b2 100644
--- a/src/app/pages/gabinete-digital/gabinete-digital.page.scss
+++ b/src/app/pages/gabinete-digital/gabinete-digital.page.scss
@@ -92,6 +92,34 @@ ion-label{
   font-size: 25px;
   margin: 0 5px 0 25px;
   padding: 0;
-  color:#000;
+  color:#ffffff;
   float: left;
 }
+
+
+.div-top-header{
+  width: 400px;
+  height: 50px;
+  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;
+}
diff --git a/src/app/pages/login/login.page.html b/src/app/pages/login/login.page.html
index c2a8413de..496a9365c 100644
--- a/src/app/pages/login/login.page.html
+++ b/src/app/pages/login/login.page.html
@@ -1,21 +1,19 @@
-<ion-content>
+<ion-content class="bg-blue">
   <div class="wrapper">
     <div class="div-logo">
-    <img src='assets/images/fullLogo.png' alt='logo'>
+    <img src='assets/images/logo-no-bg.png' alt='logo'>
   </div>
-    <h2 class="center">Inicie a sessão</h2>
-  <form>
-    <ion-list>
-      <ion-item>
-        <ion-label position="floating">Nome de utilizador</ion-label>
+    <h3 class="center">Inicie a sessão</h3>
+    <form class="form">
+      <p class="form-label">Nome de utilizador</p>
+      <ion-item class="form-input">
         <ion-input type="text" [(ngModel)]="username" name="input-username"></ion-input>
       </ion-item>
-      <ion-item>
-          <ion-label position="floating">Palavra-passe</ion-label>
-          <ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input>
-        </ion-item>        
-          <ion-button class="btn-ok" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
-    </ion-list>
-  </form>
-</div>
+      <p class="form-label">Palavra-passe</p>
+      <ion-item class="form-input">
+        <ion-input type="password" [(ngModel)]="password" name="input-password" ></ion-input>
+      </ion-item>        
+      <ion-button class="btn-ok-login" fill="clear" expand="block" shape="round" (click)="Login()">Iniciar</ion-button>
+    </form>
+  </div>
 </ion-content>
diff --git a/src/app/pages/login/login.page.scss b/src/app/pages/login/login.page.scss
index c99827774..6cc8a8996 100644
--- a/src/app/pages/login/login.page.scss
+++ b/src/app/pages/login/login.page.scss
@@ -2,24 +2,44 @@
     margin: 0 auto;
 }
 .div-logo{
-    width: 270px;
+    width: 200px;
     margin:  0 auto;
     padding-bottom: 15px;
 }
 .div-logo img{
     width: 100%;
 }
-form{
-    /* border: 1px solid red; */
-    padding: 10px;
-}
-.wrapper ion-label{
-    font-size: 20px; 
-}
 .wrapper ion-input{
-    font-size: 22px;
+    font-size: 18px;
 }
 .wrapper ion-button{
     font-size: medium;
-    margin-top: 25px;
+    margin-top: 18px;
 }
+ion-item{
+    --background: transparent;
+}
+.form{
+    width: 300px;
+    overflow: auto;
+    margin: 0 auto;
+}
+.form-label{
+    margin: 15px 0 5px 0;
+    font-size: 15px;
+}
+.form-input{ 
+    --background: #fff;
+    /* --color:#fff; */
+    border-radius: 10px;
+    margin: 5px 0 5px 0;
+}
+.btn-ok-login{
+    width: 160px !important;
+    height: 45px !important;
+    margin: 15px auto;
+    padding: 10px 15px;
+    border-radius: 22.5px;
+    background-color: #42b9fe;
+    color: #ffffff !important;
+  }
\ No newline at end of file
diff --git a/src/assets/images/icons-profile.svg b/src/assets/images/icons-profile.svg
new file mode 100644
index 000000000..daf172ec5
--- /dev/null
+++ b/src/assets/images/icons-profile.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="45" height="45" viewBox="0 0 45 45">
+    <defs>
+        <circle id="2dw772hiwa" cx="22.5" cy="22.5" r="22.5"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-335 -26) translate(0 23) translate(335 3)">
+                    <rect width="45" height="45" fill="#FFF" fill-opacity=".6" rx="22.5"/>
+                    <g>
+                        <mask id="xjc01mgdzb" fill="#fff">
+                            <use xlink:href="#2dw772hiwa"/>
+                        </mask>
+                        <path fill="#42B9FE" fill-opacity=".7" d="M22.5 10.5c5.799 0 10.5 5.037 10.5 11.25 0 3.902-1.854 7.34-4.67 9.358C34.565 33.57 39 39.868 39 47.25c0 9.527-7.387 17.25-16.5 17.25S6 56.777 6 47.25c0-7.381 4.435-13.68 10.67-16.142C13.854 29.09 12 25.652 12 21.75c0-6.213 4.701-11.25 10.5-11.25z" mask="url(#xjc01mgdzb)"/>
+                    </g>
+                    <text fill="#FFF" fill-opacity=".7" font-family="Roboto-Light, Roboto" font-size="20" font-weight="300">
+                        <tspan x="7.3" y="27">MD</tspan>
+                    </text>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-search.svg b/src/assets/images/icons-search.svg
new file mode 100644
index 000000000..38b6a43ec
--- /dev/null
+++ b/src/assets/images/icons-search.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-20 -26) translate(0 23) translate(20 3)">
+                    <path fill="#FFF" d="M9 9H23V10H9z"/>
+                    <circle cx="14" cy="10" r="2" fill="#FFF"/>
+                    <g fill="#42B9FE">
+                        <circle cx="22.5" cy="22.5" r="22.5"/>
+                    </g>
+                    <g stroke="#FFF" stroke-width="2" transform="translate(14.143 14.143)">
+                        <circle cx="7.714" cy="7.714" r="6.714"/>
+                        <path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/logo-no-bg.png b/src/assets/images/logo-no-bg.png
new file mode 100644
index 000000000..1074db181
Binary files /dev/null and b/src/assets/images/logo-no-bg.png differ
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index dbaf6008a..c4644391e 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -392,3 +392,13 @@
   background-color:  #e0e9ee;
   color: #061b52 !important;
 }
+.bg-blue{
+  --background:#0782c9;
+  background:#0782c9;
+  --background-color:#0782c9;
+  background-color:#0782c9;
+  color: #ffffff;
+  --color: #ffffff;
+}
+
+