diff --git a/src/app/pages/search/search.page.html b/src/app/pages/search/search.page.html
index 517ddefc2..c47ea5e6c 100644
--- a/src/app/pages/search/search.page.html
+++ b/src/app/pages/search/search.page.html
@@ -1,81 +1,147 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Pesquisa</ion-title>
-  </ion-toolbar>
+
+<!-- HEADER-->
+<ion-header class="ion-no-border header-main d-flex ion-justify-content-between">
+  <ion-form>
+    <div class="d-flex search-input-container">
+      <div class="icon">
+        <ion-icon class="icon-z" slot="end" name="search"></ion-icon>
+      </div>
+      <div class="input-text d-flex ion-align-items-center">
+        <ion-input class="search-input" type="search" placeholder="Pesquisar"></ion-input>
+      </div>
+      <div class="icon">
+        <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+      </div>
+    </div>
+  </ion-form>
+  <div class="icon-z icon-most-searched-word-open">
+    <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
+  </div>
+  <div class="profile">
+    <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
+  </div>
 </ion-header>
 
 <ion-content class="content">
-  <ion-form>
-    <ion-grid class="search-input-container">
-      <ion-row class="ion-justify-content-around">
-        <ion-col class="icon-search-container">
-          <div class="icon-search-container">
-            <ion-icon class="icon-search" slot="end" name="search"></ion-icon>
-          </div>
-          
-        </ion-col>
-        <ion-col>
-          <div>
-            <ion-input class="search-input" type="search" placeholder="FMI"></ion-input>
-          </div>
-          
-        </ion-col>
-        <ion-col class="icon-search-container">
-          <div>
-            <ion-icon class="icon-search" slot="end" name="search"></ion-icon>
-          </div>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
 
-  
-    <ion-grid class="search-result">
-      <ion-row class="ion-justify-content-between ion-text-center">
-        <ion-col >
-          <div class="button">
-            <p>Protocolos</p>
-            <ion-label class="label">10</ion-label>
-
-          </div>
-          
-        </ion-col>
-        <ion-col>
-          <div class="button">
-            <p>Faturas</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          
-        </ion-col>
-        <ion-col >
+    <!-- search result type-->
+    <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>
-        </ion-col>
-      </ion-row>
-      <ion-row class="ion-justify-content-between ion-text-center">
-        <ion-col >
-          <div class="button">
-            <p>Protocolos</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-          
-        </ion-col>
-        <ion-col>
-          <div class="button">
-            <p>Faturas</p>
-            <ion-label class="label">10</ion-label>
-          </div>
-        
-        </ion-col>
-        <ion-col >
           <div class="button">
             <p>Relatório</p>
             <ion-label class="label">10</ion-label>
           </div>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-    
-  </ion-form>
+          <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>
+        <div class="icon-z icon-most-searched-word-open">
+          <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="d-flex">
+      <!-- most searched word-->
+      <div class="most-searched-words">
+        <p>Palavas mais pesquisdas</p>
+      </div>
+      
+      <!-- search result-->
+      <div class="search-result">
+        <div class="header">
+          <div class="d-flex ion-justify-content-between ion-align-items-center">
+            <div class="d-flex sort-by ion-justify-content-center">
+              <p><span class="order">Order por:</span><span class="order-labal">Mais Recente</span></p>
+            </div>
+            <div>
+              <ion-icon src="assets/images/icons-arrow-arrow-down-25.svg"></ion-icon>
+            </div>
+          </div>
+        </div>
+        <ul>
+          <li 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>
+              <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>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+
 </ion-content>
diff --git a/src/app/pages/search/search.page.scss b/src/app/pages/search/search.page.scss
index 4226aacc8..df087037b 100644
--- a/src/app/pages/search/search.page.scss
+++ b/src/app/pages/search/search.page.scss
@@ -1,48 +1,210 @@
-.search-input-container{
+.header-main{
+  padding: 5px 18px;
+  padding-bottom: 2px;
+  padding-top: 25px;
+  .search-input-container{
+    max-width: 309px;
+    background-color: white;
+    border-radius: 27.5px;
     border: solid 1px #ebebeb;
-}
-.icon-search{
-    font-size: 16px;
-
-}
-
-.icon-search-container, .icon-search{
-    width: 45px;
-    height: 45px;
-}
-
-.search-result{
-  margin-top: 20px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #ebebeb;
-  .button{
-    border: solid 1px #e9e9e9;
-    
-    padding: 5px 20px;
-    p{
-      padding: 0px;
-      margin: 0px;
-      font-family: Roboto;
-      color: #0d89d1;
-      font-size: 15px;
-    }
-    .label{
-      font-family: Roboto;
-      font-size: 13px;
-      font-weight: 300;
+    .icon{
       color: #797979;
+      width: 45px;
+      height: 45px;
+      display: flex;
+      justify-content: center;
+      font-size: 25px;
+      align-items: center;
     }
-    border-radius: 15px;
+    .icon-z{
+      width: 15px;
+    }
+  }
+  .icon-z{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 45px;
+  }
+  .profile{
+    display: none;
+    font-size: 45px;
   }
   
-  .button:hover{
-    background-color: #42b9fe;
-    color: white;
-    p{
-      color: white;
+}
+
+// search result type
+.options{
+  margin-top: 10px;
+  .container{
+    display: flex;
+    .d-flex{
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      flex-wrap: wrap;
+      .button{
+        width: 116px;
+        border: solid 1px #e9e9e9;
+        margin: 0px 5px;
+        margin-bottom: 10px;
+        padding: 5px 20px;
+        p{
+          padding: 0px;
+          margin: 0px;
+          font-family: Roboto;
+          color: #0d89d1;
+          font-size: 15px;
+        }
+        .label{
+          font-family: Roboto;
+          font-size: 13px;
+          font-weight: 300;
+          color: #797979;
+        }
+        border-radius: 15px;
+      }
+      
+      .button:hover{
+        background-color: #42b9fe;
+        color: white;
+        p{
+          color: white;
+        }
+        .label{
+          color: white;
+        }
+      }
     }
-    .label{
-      color: white;
+    .icon{
+      display: none;
+      width: 45px;
+      height: 45px;
+      justify-content: center;
+      align-items: center;
+      ion-icon{
+        width: 25px;
+      }
     }
   }
-}
\ No newline at end of file
+
+  
+}
+
+
+
+.d-flex{
+  display: flex;
+  // search result
+  .search-result{
+    width: 100%;
+    border-bottom: unset;
+    padding: 0px 20px;
+
+    .header{
+      border-top: 1px solid #ebebeb;
+      .sort-by{
+        width: 100%;
+        .order{
+          font-family: Roboto;
+          font-size: 13px;
+          font-weight: 300;
+          color:#797979
+        }
+        .order-labal{
+          font-family: Roboto;
+          font-size: 15px;
+          color: #0d89d1;
+          margin-left: 20px;
+        }
+      }
+      ion-icon{
+        font-size: 25px;
+      }
+    }
+    ul{
+      padding: 0px;
+      margin: 0px;
+      li{
+        padding-top: 8px;
+        padding-bottom: 8px;
+        border-top: 1px solid #ebebeb;
+        display: flex;
+        align-items: center;
+        .icon{
+          font-size: 35px;
+          align-items: center;
+          display: flex;
+        }
+        .content{
+          width: 100%;
+          margin-left: 10px;
+          p{
+            margin: 0px;
+            width: 100%;
+            font-family: Roboto;
+            font-size: 15px;
+            color: #0d89d1;
+            line-height: 1.67;
+          }
+          span{
+            height: 15px;
+            font-family: Roboto;
+            font-size: 13px;
+            font-weight: 300;
+            color: #797979;
+          }
+        }
+      }
+    }
+  }
+  // most searched word
+  .most-searched-words{
+    width: 400px;
+    display: none;
+    p{
+      height: 24px;
+      font-family: Roboto;
+      font-size: 20px;
+      text-align: center;
+      color: black;
+    }
+  }
+}
+
+
+
+
+@media only screen and (min-width: 1024px) {
+
+  .header-main {
+    background-color: #0782c9;
+    .profile{
+      display: inline-block;
+    }
+    .icon-most-searched-word-open{
+      display: none !important;
+    }
+  }
+
+  .options{
+    .container{
+      border-bottom: 1px solid #ebebeb;
+      .icon{
+        display: flex;
+      }
+    }
+    padding: 0px 20px;
+  }
+
+      
+  .most-searched-words{
+    display: inline-block !important;
+  }
+  .search-result{
+    border-left: 1px solid #d8d8d8;
+    .header{
+      border-top: unset !important;
+    }
+  }
+}
diff --git a/src/assets/images/icons-arrow-arrow-down-25.svg b/src/assets/images/icons-arrow-arrow-down-25.svg
new file mode 100644
index 000000000..9601cfc73
--- /dev/null
+++ b/src/assets/images/icons-arrow-arrow-down-25.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="#42B9FE" stroke-width="2">
+            <g>
+                <g>
+                    <g>
+                        <path d="M15.5 7.5L9.5 13 15.5 18.5" transform="translate(-969 -156) translate(421 151) translate(328) translate(220 5) matrix(0 -1 -1 0 25.5 25.5)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-most-searched-words-open.svg b/src/assets/images/icons-most-searched-words-open.svg
new file mode 100644
index 000000000..cd0fa9c46
--- /dev/null
+++ b/src/assets/images/icons-most-searched-words-open.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 transform="translate(-337 -26) translate(337 26)">
+                <circle cx="22.5" cy="22.5" r="22.5" fill="#E0E9EE"/>
+                <g>
+                    <g stroke="#061B52" stroke-width="2" transform="translate(11 11) translate(6)">
+                        <circle cx="7.714" cy="7.714" r="6.714"/>
+                        <path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
+                    </g>
+                    <g fill="#061B52" transform="translate(11 11) translate(.857 15.857)">
+                        <rect width="2" height="8" x="3" rx="1"/>
+                        <rect width="8" height="2" y="3" rx="1"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-search-close.svg b/src/assets/images/icons-search-close.svg
new file mode 100644
index 000000000..11669d50a
--- /dev/null
+++ b/src/assets/images/icons-search-close.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-287 -36) translate(18 24) translate(269 12)">
+                    <path fill="#FFF" d="M5 5H12.777999999999999V6H5z"/>
+                    <circle cx="7.778" cy="5.556" r="1.111" fill="#FFF"/>
+                    <g>
+                        <circle cx="12.5" cy="12.5" r="12.5" fill="#E0E9EE"/>
+                        <g stroke="#061B52" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+                            <path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764) rotate(-90 6.782 6.552)"/>
+                            <path d="M6.782 0.163L6.782 12.94" transform="rotate(45 2.6 16.764)"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/assets/images/icons-search-document.svg b/src/assets/images/icons-search-document.svg
new file mode 100644
index 000000000..50e282eb5
--- /dev/null
+++ b/src/assets/images/icons-search-document.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <g transform="translate(-20 -278) translate(20 224) translate(0 46) translate(0 8)">
+                        <path fill="#FFF" stroke="#0782C9" d="M21.351 2.5c.415 0 .79.168 1.061.44.271.27.44.646.44 1.06h0v20.297l-1.318 1.354-1.8 1.849H7.839c-.414 0-.79-.168-1.06-.44-.272-.27-.44-.646-.44-1.06h0V4c0-.414.168-.79.44-1.06.27-.272.646-.44 1.06-.44h0z"/>
+                        <rect width="9.73" height="1" x="9.73" y="8" fill="#0782C9" rx=".5"/>
+                        <rect width="9.73" height="1" x="9.73" y="11" fill="#0782C9" rx=".5"/>
+                        <rect width="9.73" height="1" x="9.73" y="14" fill="#0782C9" rx=".5"/>
+                        <rect width="9.73" height="1" x="9.73" y="17" fill="#0782C9" rx=".5"/>
+                        <rect width="5.351" height="1" x="9.73" y="20" fill="#0782C9" rx=".5"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>