diff --git a/src/app/shared/headers/header-no-search/profile/profile.page.ts b/src/app/shared/headers/header-no-search/profile/profile.page.ts
index 912823371..509164ec7 100644
--- a/src/app/shared/headers/header-no-search/profile/profile.page.ts
+++ b/src/app/shared/headers/header-no-search/profile/profile.page.ts
@@ -61,7 +61,8 @@ export class ProfileComponent implements OnInit {
       componentProps: {
       }
     });
-    return await modal.present();
+    
+    modal.present();
   }
 
 
diff --git a/src/app/shared/pin/pin.page.html b/src/app/shared/pin/pin.page.html
index 370972f55..022effa3a 100644
--- a/src/app/shared/pin/pin.page.html
+++ b/src/app/shared/pin/pin.page.html
@@ -1,26 +1,61 @@
 
 <ion-content>
+  
   <div class="main-content d-flex flex-column align-center justify-center">
+    <div class="div-top-header">
+
+      <div class="div-logo">
+        <img src='assets/images/logo-bg.png' alt='logo'>
+      </div>
+
+    </div>
     <ion-title class="title">Digite o PIN novo</ion-title>
+    <div class="d-flex pt-25">
+      <div class="dot" [class.dot-active]="code.length >= 1"></div>
+      <div class="dot" [class.dot-active]="code.length >= 2"></div>
+      <div class="dot" [class.dot-active]="code.length >= 3"></div>
+      <div class="dot"[class.dot-active]="code.length >= 4"></div>
+    </div>
     <div class="terminal">
 
       <div class="d-flex">
-        <div class="circle">1</div> <div class="circle">2</div> <div class="circle">3</div>
+        <div class="circle" (click)="setCode('1')">1</div> <div class="circle" (click)="setCode('2')">2</div> <div class="circle" (click)="setCode('3')">3</div>
       </div>
 
       <div class="d-flex">
-        <div class="circle">4</div> <div class="circle">5</div> <div class="circle">6</div>
+        <div class="circle" (click)="setCode('4')">4</div> <div class="circle" (click)="setCode('5')">5</div> <div class="circle" (click)="setCode('6')">6</div>
       </div>
 
       <div class="d-flex">
-        <div class="circle">7</div> <div class="circle">8</div> <div class="circle">9</div>
+        <div class="circle" (click)="setCode('7')">7</div> <div class="circle" (click)="setCode('8')">8</div> <div class="circle" (click)="setCode('9')">9</div>
       </div>
 
       <div class="d-flex align-center justify-center">
-        <div class="circle">0</div>
+        <div class="circle" (click)="setCode('0')">0</div>
       </div>
       
     </div>
+
+    <div (click)="clearCode()" class="d-flex align-center justify-center pt-25 clear">
+      Limpar
+    </div>
   </div>
 
 </ion-content>
+
+
+<ion-footer class=" footer-container ion-no-border">
+  <div class="d-flex justify-space-between">
+    <ion-buttons slot="start" >
+      <ion-button (click)="close()" class="btn-cancel" fill="clear" color="#061b52" >
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end" >
+      <ion-button (click)="save()" class="btn-ok" fill="clear" color="#fff" >
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </div>
+
+</ion-footer>
diff --git a/src/app/shared/pin/pin.page.scss b/src/app/shared/pin/pin.page.scss
index 998b5fe9a..d453381dc 100644
--- a/src/app/shared/pin/pin.page.scss
+++ b/src/app/shared/pin/pin.page.scss
@@ -1,3 +1,22 @@
+@import '~src/function.scss';
+
+.div-top-header{
+  margin: 0 em(20px);
+  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;
+}
+
 :host{
     text-align: center;
     align-items: center;
@@ -6,23 +25,23 @@
     background-image: url("/assets/background/auth.svg");
     background-size: 686px 674px;
     background-position: center;
-    background-position-y: 0px;
+    background-position-y: 78px;
     background-repeat: no-repeat;
 }
 
 
 .circle{
     color: white;
-    width: 85px;
-    height: 85px;
+    width: 70px;
+    height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 19pt;
     background: #44b5ea;
     border-radius: 56px;
-    margin-left: 10px;
-    margin-bottom: 10px;
+    margin-left: 30px;
+    margin-bottom: 15px;
 }
 
 .title{
@@ -31,5 +50,26 @@
 
 .terminal {
     padding-top: 112px;
-    margin-left: -9px;
+    margin-left: -30px;
+}
+
+.clear{
+    color: #44b5ea;
+    font-size: 12pt;
+}
+.dot-active{
+    background: #44b5ea;
+}
+
+.dot{
+    width: 25px;
+    height: 25px;
+    margin: 0 10px 0 0;
+    border: 3px solid #44b5ea;
+    box-sizing: border-box;
+    border-radius: 50px;
+    -webkit-border-radius: 50px;
+    -moz-border-radius: 50px;
+    -ms-border-radius: 50px;
+    -o-border-radius: 50px;
 }
\ No newline at end of file
diff --git a/src/app/shared/pin/pin.page.ts b/src/app/shared/pin/pin.page.ts
index c77d7cf8c..4e60163f9 100644
--- a/src/app/shared/pin/pin.page.ts
+++ b/src/app/shared/pin/pin.page.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { BadRequestComponent } from '../popover/bad-request/bad-request.component';
+import { SuccessMessageComponent } from '../popover/success-message/success-message.component';
 
 @Component({
   selector: 'app-pin',
@@ -7,9 +10,77 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PinPage implements OnInit {
 
-  constructor() { }
+  code = []
+  constructor( private modalController: ModalController,) { }
 
   ngOnInit() {
   }
 
+  setCode(code: string) {
+    if(this.code.length < 4) {
+      this.code.push(code)
+    } else {
+      this.clearCode()
+    }
+    
+  }
+
+  clearCode(){
+    this.code =[]
+  }
+
+  close() {
+    /* console.log(this.isEventEdited); */
+    alert('close modal')
+    this.modalController.dismiss();
+  }
+
+   async save() {
+    if(this.code.length == 4) {
+      
+      this.successMessage()
+      localStorage.setItem('PIN', this.code.join(''))
+    } else {
+      this.badRequest()
+    }
+
+  }
+
+  async successMessage(message?: string) {
+    
+    const modal = await this.modalController.create({
+      component: SuccessMessageComponent,
+       componentProps: {
+        message: message || 'Processo efetuado' ,
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.present()
+    
+    setTimeout(()=>{
+
+      this.close()
+      modal.dismiss()
+    },3000)
+    
+  }
+
+  async badRequest(message?: string) {
+    const modal = await this.modalController.create({
+      component: BadRequestComponent,
+       componentProps: {
+        message: message || 'Processo não efetuado' ,
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.present()
+    
+    setTimeout(()=>{
+      modal.dismiss()
+    },3000)
+  }
+
+
 }
diff --git a/src/assets/images/logo-bg.png b/src/assets/images/logo-bg.png
new file mode 100644
index 000000000..d7f5843a3
Binary files /dev/null and b/src/assets/images/logo-bg.png differ
diff --git a/src/global.scss b/src/global.scss
index 6728844da..efd39c49d 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -372,7 +372,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
         top: -40px;
         right: 0px;
         height: 100%;
-        width: 400px;
+        max-width: 400px;
     }
 }