diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9c3b9e4f..0061c99b 100755
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import styles from './Header.module.scss'
+import SearchComponent from './Search/SearchComponent'
 
 const query = graphql`
   query {
@@ -37,7 +38,6 @@ const Header = () => (
               <Logo className={styles.headerLogoImage} />
               <h1 className={styles.headerTitle}>{siteTitle}</h1>
             </Link>
-
             <nav className={styles.headerMenu}>
               {sections.map(({ node }) => (
                 <Link
@@ -48,6 +48,7 @@ const Header = () => (
                   {node.title}
                 </Link>
               ))}
+              <SearchComponent className={styles.section} />
             </nav>
           </div>
         </header>
diff --git a/src/components/Search/SearchClient.jsx b/src/components/Search/SearchClient.jsx
index 35ee6af5..dec17391 100644
--- a/src/components/Search/SearchClient.jsx
+++ b/src/components/Search/SearchClient.jsx
@@ -88,7 +88,7 @@ const SearchClient = ({ searchableData }) => {
   }
 
   return (
-    <div>
+    <>
       <Button
         variant="outlined"
         onClick={handleOpen}
@@ -134,7 +134,7 @@ const SearchClient = ({ searchableData }) => {
           </div>
         </Fade>
       </Modal>
-    </div>
+    </>
   )
 }