diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
index c47ea5e6c..e613a2d9e 100644
--- a/src/app/pages/search/search.page.html
+++ b/src/app/pages/search/search.page.html
@@ -24,33 +24,13 @@
 
 <ion-content class="content">
 
-    <!-- search result type-->
+    <!-- search result categories-->
     <div class="options">
       <div class="container ion-justify-content-between ion-align-items-center">
         <div class="d-flex ion-justify-content-center ion-text-center">
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          <div class="button">
-            <p>Relatório</p>
-            <ion-label class="label">10</ion-label>
+          <div *ngFor="let category of searchCategories" class="button">
+            <p>{{ category.Name }}</p>
+            <ion-label class="label">{{ category.Qtd }}</ion-label>
           </div>
         </div>
         <div class="icon-z icon-most-searched-word-open">
@@ -66,7 +46,7 @@
         <p>Palavas mais pesquisdas</p>
       </div>
       
-      <!-- search result-->
+      <!-- search result document-->
       <div class="search-result">
         <div class="header">
           <div class="d-flex ion-justify-content-between ion-align-items-center">
@@ -79,63 +59,15 @@
           </div>
         </div>
         <ul>
-          <li class="d-flex">
+          <li *ngFor="let searchDocument of searchDocuments" class="d-flex">
             <div class="icon">
               <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
             </div>
             <div class="content ion-align-items-center">
-              <p class="result-name">title</p>
+              <p class="result-name">{{ searchDocument.Assunto}}</p>
               <div class="d-flex ion-justify-content-between ">
-                <span>MINEC, MINFIN</span>
-                <span>13/04/2020</span>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex">
-            <div class="icon">
-              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
-            </div>
-            <div class="content">
-              <p class="result-name">title</p>
-              <div class="d-flex ion-justify-content-between">
-                <span>MINEC, MINFIN</span>
-                <span>13/04/2020</span>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex">
-            <div class="icon">
-              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
-            </div>
-            <div class="content">
-              <p class="result-name">title</p>
-              <div class="d-flex ion-justify-content-between">
-                <span>MINEC, MINFIN</span>
-                <span>13/04/2020</span>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex">
-            <div class="icon">
-              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
-            </div>
-            <div class="content">
-              <p class="result-name">title</p>
-              <div class="d-flex ion-justify-content-between">
-                <span>MINEC, MINFIN</span>
-                <span>13/04/2020</span>
-              </div>
-            </div>
-          </li>
-          <li class="d-flex">
-            <div class="icon">
-              <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
-            </div>
-            <div class="content">
-              <p class="result-name">title</p>
-              <div class="d-flex ion-justify-content-between">
-                <span>MINEC, MINFIN</span>
-                <span>13/04/2020</span>
+                <span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
+                <span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
               </div>
             </div>
           </li>
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss
index df087037b..c4379ad86 100644
--- a/src/app/pages/search/search.page.scss
+++ b/src/app/pages/search/search.page.scss
@@ -44,7 +44,7 @@
       width: 100%;
       flex-wrap: wrap;
       .button{
-        width: 116px;
+        min-width: 116px;
         border: solid 1px #e9e9e9;
         margin: 0px 5px;
         margin-bottom: 10px;
@@ -92,7 +92,7 @@
 }
 
 
-
+// document
 .d-flex{
   display: flex;
   // search result
@@ -148,12 +148,17 @@
             line-height: 1.67;
           }
           span{
-            height: 15px;
             font-family: Roboto;
             font-size: 13px;
             font-weight: 300;
             color: #797979;
           }
+          span.documente-date{
+
+          }
+          span.organic-entity{
+            width: 100%;
+          }
         }
       }
     }
diff --git a/src/app/pages/search/search.page.ts b/src/app/pages/search/search.page.ts
index a20587ad8..0d2ead495 100644
--- a/src/app/pages/search/search.page.ts
+++ b/src/app/pages/search/search.page.ts
@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-
+import { ProcessesService } from 'src/app/services/processes.service';
+import { SearchService } from "../../services/search.service";
+import { SearchCategory } from "src/app/models/search-category";
+import { SearchDocument } from "src/app/models/search-document";
+import { formatDate } from '@angular/common';
 @Component({
   selector: 'app-search',
   templateUrl: './search.page.html',
@@ -8,7 +12,31 @@ import { ModalController } from '@ionic/angular';
 })
 export class SearchPage implements OnInit {
 
-  constructor(private modalController: ModalController) { }
+  // https params
+  private searchSubject: string;
+  private searchDate: string;
+  private searchSender: string;
+  private searchOrganicEntiry: string;
+  private searchDocTypeId: string;
+
+  searchCategories: SearchCategory[];
+  searchDocuments: SearchDocument[];
+  
+  constructor(private modalController: ModalController,
+    private search: SearchService) {
+
+      // search in API
+      this.search.basicSearch(this.searchSubject, this.searchDate, this.searchSender
+        ,this.searchOrganicEntiry, this.searchDocTypeId).subscribe(res=>{
+  
+        this.searchCategories = res.Categories;
+        this.searchDocuments = res.Documents;
+        
+        console.log(this.searchDocuments);
+        console.log(this.searchCategories);
+      });
+
+    }
 
   ngOnInit() {
   }
@@ -16,4 +44,14 @@ export class SearchPage implements OnInit {
     this.modalController.dismiss();
   }
 
+  /**
+   * @param isoDate String Iso date
+   * @returns date in formate DD:MM:YYYY
+   * @description convert Iso date to MM/DD/YYYY
+   */
+  formateIsoDate(isoDate:string): string{
+    const date = new Date(isoDate);
+    return formatDate(date, 'dd/MM/yyyy', 'pt');
+  }
+
 }