diff --git a/src/assets/images/magnifying_glass.svg b/src/assets/images/magnifying_glass.svg
new file mode 100755
index 0000000..dba367b
--- /dev/null
+++ b/src/assets/images/magnifying_glass.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12081) - http://www.bohemiancoding.com/sketch -->
+    <title>ico-magnifying_glass</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="navigation-states" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Mobile-320-menu-speck-10" sketch:type="MSArtboardGroup" transform="translate(-27.000000, -71.000000)" fill="#979797">
+            <g id="Rectangle-43-+-Fill-2-+-find-people-or-compe" sketch:type="MSLayerGroup" transform="translate(20.000000, 64.000000)">
+                <path d="M14.3832887,8.80736538 C17.3214131,8.80736538 19.7114775,11.2128248 19.7114775,14.1694231 C19.7114775,17.1260214 17.3214131,19.5314808 14.3832887,19.5314808 C11.4451644,19.5314808 9.05433015,17.1260214 9.05433015,14.1694231 C9.05433015,11.2128248 11.4451644,8.80736538 14.3832887,8.80736538 M18.6782452,19.8985746 C17.4828626,20.8032085 15.9953718,21.3395 14.3832308,21.3395 C10.4392308,21.3395 7.24192308,18.1297692 7.24192308,14.1694231 C7.24192308,10.2097308 10.4392308,7 14.3832308,7 C18.3272308,7 21.5251923,10.2097308 21.5251923,14.1694231 C21.5251923,15.7882108 20.9908904,17.2815889 20.0897334,18.4816192 L24.6137031,23.0236077 L23.1966815,24.4350077 L18.6782452,19.8985746 Z" id="ico-magnifying_glass" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/TopNav/MobileNav.js b/src/components/TopNav/MobileNav.js
index 2583a0c..b889ad4 100644
--- a/src/components/TopNav/MobileNav.js
+++ b/src/components/TopNav/MobileNav.js
@@ -3,8 +3,10 @@ import PropTypes from 'prop-types'
 import styles from './MobileNav.module.scss'
 import IconClose from '../../assets/images/icon-close.svg'
 import IconMenu from '../../assets/images/icon-menu.svg'
+import IconMagnifyingGlass from '../../assets/images/magnifying_glass.svg'
+import { config } from 'topcoder-react-utils'
 
-const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (
+const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (<div>
   <div className={styles.mobileNav}>
     <div className={styles.leftMenuContainer}>
       <button className={styles.menuBtn} onClick={onClickLeftMenu}>
@@ -24,6 +26,23 @@ const MobileNav = ({ showLeftMenu, onClickLeftMenu, logo, rightMenu }) => (
       </div>
     )}
   </div>
+  {showLeftMenu && (
+    <div className={styles.search}>
+      <IconMagnifyingGlass className={styles.icon} />
+      <input
+        onKeyPress={(event) => {
+          if (event.key === 'Enter') {
+            window.location = `${config.URL.BASE}/search/members?q=${
+              encodeURIComponent(event.target.value)
+            }`
+          }
+        }}
+        placeholder='Find members by username or skill'
+        aria-label='Find members by username or skill'
+      />
+    </div>
+  )}
+</div>
 )
 
 MobileNav.propTypes = {
diff --git a/src/components/TopNav/MobileNav.module.scss b/src/components/TopNav/MobileNav.module.scss
index 2d08bb4..37359c7 100644
--- a/src/components/TopNav/MobileNav.module.scss
+++ b/src/components/TopNav/MobileNav.module.scss
@@ -43,3 +43,46 @@
     right: 0;
   }
 }
+
+.icon {
+  @include mobile-only;
+  left: 18px;
+  position: absolute;
+  top: 16px;
+}
+
+.search {
+  @include mobile-only;
+  padding: 6px 12px 0;
+  position: relative;
+
+  input {
+    background: none;
+    border: 1px solid $gray-50;
+    box-shadow: none;
+    color: $white;
+    font: 16px "Roboto", Helvetica, Arial, sans-serif !important;
+    height: 32px;
+    outline: none;
+    padding-left: 30px !important;
+
+    &::placeholder {
+      color: $gray-50;
+    }
+
+    &:hover {
+      border: 1px solid $gray-50;
+    }
+
+    &:focus {
+      border: 1px solid $blue;
+    }
+  }
+
+  input:active,
+  input:focus,
+  input:hover {
+    box-shadow: none;
+    outline: none;
+  }
+}
\ No newline at end of file
diff --git a/src/components/TopNav/PrimaryNav.js b/src/components/TopNav/PrimaryNav.js
index 5bf8bb5..5bdc5c2 100644
--- a/src/components/TopNav/PrimaryNav.js
+++ b/src/components/TopNav/PrimaryNav.js
@@ -4,7 +4,11 @@ import cn from 'classnames'
 import ResizeDetector from 'react-resize-detector'
 import ChosenArrow from '../ChosenArrow'
 import IconArrowSmalldown from '../../assets/images/arrow-small-down.svg'
+import MagnifyingGlass from '../../assets/images/magnifying_glass.svg'
 import styles from './PrimaryNav.module.scss'
+import { config } from 'topcoder-react-utils'
+
+const BASE_URL = config.URL.BASE
 
 const PrimaryNav = ({
   collapsed,
@@ -26,93 +30,146 @@ const PrimaryNav = ({
   createHandleClickMoreItem,
   createSetRef,
   showChosenArrow,
-  chosenArrowX
+  chosenArrowX,
+  searchOpened,
+  toggleSearchOpen
 }) => {
   const filterNotInMore = menu => !(moreMenu || []).find(x => x.id === menu.id)
-
+  const activeTrigger = {
+    bottom: 50 // The main nav head bottom Y
+  }
   return (
-    <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
-      <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
-        <a
-          className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
-          onClick={onClickLogo}
-          href='/'
-        >
-          {logo}
-        </a>
-        {menu.map((level1, i) => ([
-          <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
-          /* Level 1 menu item */
+    <div>
+      <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
+        <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
           <a
-            className={cn(styles.primaryLevel1, !activeLevel2Id && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
-            href={level1.href}
-            key={`level1-${i}`}
-            onClick={createHandleClickLevel1(level1.id, true)}
-            ref={createSetRef(level1.id)}
+            className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
+            onClick={onClickLogo}
+            href='/'
           >
-            {level1.title}
-          </a>,
-          /* Level 2 menu */
-          level1.subMenu && (
-            <div
-              className={cn(styles.primaryLevel2Container, level1.id === activeLevel1Id && styles.primaryLevel2ContainerOpen)}
-              key={`level2-${i}-container`}
-              ref={createSetRef(`level2Container${i}`)}
+            {logo}
+          </a>
+          {menu.map((level1, i) => ([
+            <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
+            /* Level 1 menu item */
+            <a
+              className={cn(styles.primaryLevel1, !activeLevel2Id && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
+              href={level1.href}
+              key={`level1-${i}`}
+              onClick={createHandleClickLevel1(level1.id, true)}
+              ref={createSetRef(level1.id)}
             >
-              {level1.subMenu.filter(filterNotInMore).map((level2, i) => (
-                <a
-                  className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
-                  href={level2.href}
-                  key={`level2-${i}`}
-                  onClick={createHandleClickLevel2(level2.id, true)}
-                  ref={createSetRef(level2.id)}
-                >
-                  {level2.title}
-                </a>
-              ))}
-              {/* The More menu */}
-              {level1.id === activeLevel1Id && moreMenu && moreMenu.length > 0 && (
-                <div className={cn(styles.moreBtnContainer, openMore && styles.moreOpen)}>
-                  <div className={styles.backdrop} onClick={onCloseMore} />
-                  <button
-                    className={cn(styles.primaryLevel2, styles.moreBtn)}
-                    onClick={handleClickMore}
-                    ref={createSetRef(moreId)}
+              {level1.title}
+            </a>,
+            /* Level 2 menu */
+            level1.subMenu && (
+              <div
+                className={cn(styles.primaryLevel2Container, level1.id === activeLevel1Id && styles.primaryLevel2ContainerOpen)}
+                key={`level2-${i}-container`}
+                ref={createSetRef(`level2Container${i}`)}
+              >
+                {level1.subMenu.filter(filterNotInMore).map((level2, i) => (
+                  <a
+                    className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
+                    href={level2.href}
+                    key={`level2-${i}`}
+                    onClick={createHandleClickLevel2(level2.id, true)}
+                    ref={createSetRef(level2.id)}
                   >
-                    <div className={styles.moreBtnMask} />
-                    <span>More</span>
-                    <IconArrowSmalldown />
-                  </button>
-                  <div className={styles.moreContentContainer}>
-                    {moreMenu.map((menu, i) => (
-                      <a
-                        className={cn(styles.primaryLevel2, menu.id === activeLevel2Id && styles.primaryLevel2Open)}
-                        href={menu.href}
-                        key={`more-item-${i}`}
-                        onClick={createHandleClickMoreItem(menu.id)}
-                      >
-                        {menu.title}
-                      </a>
-                    ))}
+                    {level2.title}
+                  </a>
+                ))}
+                {/* The More menu */}
+                {level1.id === activeLevel1Id && moreMenu && moreMenu.length > 0 && (
+                  <div className={cn(styles.moreBtnContainer, openMore && styles.moreOpen)}>
+                    <div className={styles.backdrop} onClick={onCloseMore} />
+                    <button
+                      className={cn(styles.primaryLevel2, styles.moreBtn)}
+                      onClick={handleClickMore}
+                      ref={createSetRef(moreId)}
+                    >
+                      <div className={styles.moreBtnMask} />
+                      <span>More</span>
+                      <IconArrowSmalldown />
+                    </button>
+                    <div className={styles.moreContentContainer}>
+                      {moreMenu.map((menu, i) => (
+                        <a
+                          className={cn(styles.primaryLevel2, menu.id === activeLevel2Id && styles.primaryLevel2Open)}
+                          href={menu.href}
+                          key={`more-item-${i}`}
+                          onClick={createHandleClickMoreItem(menu.id)}
+                        >
+                          {menu.title}
+                        </a>
+                      ))}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+              </div>
+            )
+          ]))}
+          <ChosenArrow show={showChosenArrow} x={chosenArrowX} />
+        </div>
+        <div className={styles.primaryNavRight}>
+          <ResizeDetector
+            handleWidth
+            onResize={onRightMenuResize}
+          />
+          {rightMenu && (
+            <div className={styles.primaryLevel1}>
+              {rightMenu}
             </div>
-          )
-        ]))}
-        <ChosenArrow show={showChosenArrow} x={chosenArrowX} />
+          )}
+          <div
+            aria-label='Find members by username or skill'
+            role='button'
+            tabIndex={0}
+            data-menu='search'
+            className={cn(styles.searchIcon, { opened: searchOpened })}
+            onFocus={() => toggleSearchOpen(true)}
+            onBlur={(event) => {
+              if (event.pageY < activeTrigger.bottom) {
+                toggleSearchOpen(false)
+              }
+            }}
+            onMouseEnter={(event) => toggleSearchOpen(true)}
+            onMouseLeave={(event) => {
+              console.log(`${event.clientX} - ${event.clientY}`)
+              if (event.pageY < activeTrigger.bottom) {
+                toggleSearchOpen(false)
+              }
+            }}
+            onTouchStart={(event) => {
+              if (searchOpened) {
+                toggleSearchOpen(false)
+              } else {
+                toggleSearchOpen(true)
+              }
+            }}
+          >
+            <MagnifyingGlass />
+          </div>
+        </div>
       </div>
-
-      <div className={styles.primaryNavRight}>
-        <ResizeDetector
-          handleWidth
-          onResize={onRightMenuResize}
+      <div
+        role='search'
+        className={cn(styles.searchField, { opened: searchOpened, closed: !searchOpened })}
+        onMouseLeave={(event) => { toggleSearchOpen(false) }}
+      >
+        <input
+          ref={createSetRef('searchInputBox')}
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              window.location = `${BASE_URL}/search/members?q=${
+                encodeURIComponent(event.target.value)
+              }`
+            }
+          }}
+          onBlur={() => toggleSearchOpen(false)}
+          aria-label='Find members by username or skill'
+          placeholder='Find members by username or skill'
         />
-        {rightMenu && (
-          <div className={styles.primaryLevel1}>
-            {rightMenu}
-          </div>
-        )}
       </div>
     </div>
   )
@@ -138,7 +195,9 @@ PrimaryNav.propTypes = {
   createHandleClickMoreItem: PropTypes.func,
   createSetRef: PropTypes.func,
   showChosenArrow: PropTypes.bool,
-  chosenArrowX: PropTypes.number
+  chosenArrowX: PropTypes.number,
+  searchOpened: PropTypes.bool,
+  toggleSearchOpen: PropTypes.func
 }
 
 export default PrimaryNav
diff --git a/src/components/TopNav/PrimaryNav.module.scss b/src/components/TopNav/PrimaryNav.module.scss
index 66dc6cc..da5d3b8 100644
--- a/src/components/TopNav/PrimaryNav.module.scss
+++ b/src/components/TopNav/PrimaryNav.module.scss
@@ -229,3 +229,84 @@
     }
   }
 }
+
+.searchIcon {
+  cursor: pointer;
+  display: inline-block;
+  height: 32px;
+  margin: 11px 4px 11px 6px;
+  padding-left: 12px;
+  position: relative;
+  border-left: 1px solid $gray-50;
+  width: 36px;
+
+  svg {
+    height: 18px;
+    margin-top: 7px;
+    width: 18px;
+    path {
+      fill: $white;
+    }
+  }
+
+  &:global.opened {
+    path {
+      fill: $turquoise;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 6px 5px 0;
+      border-color: $turquoise transparent transparent transparent;
+      position: absolute;
+      left: 60%;
+      bottom: -3px;
+      margin-left: -6px;
+      background-color: transparent;
+    }
+  }
+}
+
+.searchField {
+  background: $black;
+  height: 0;
+  margin-top: -1px;
+  opacity: 0.98;
+  overflow: hidden;
+  padding: 0 48px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  transition: all 0.25s ease-in-out;
+  z-index: 10;
+
+  &:global.opened {
+    height: 128px;
+    padding: 48px;
+    transition: all 0.25s ease-in-out;
+  }
+
+  &:global.closed {
+    display: none;
+  }
+
+  input,
+  input:active,
+  input:focus,
+  input:hover {
+    border: none;
+    border-bottom: 1px solid $white;
+    box-shadow: none;
+    font-size: 22px;
+    outline: none;
+    padding-bottom: 3px;
+
+    &::placeholder {
+      color: $gray-15;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/components/TopNav/index.js b/src/components/TopNav/index.js
index 3552369..25be2f2 100644
--- a/src/components/TopNav/index.js
+++ b/src/components/TopNav/index.js
@@ -72,6 +72,7 @@ const TopNav = ({
   const [activeLevel3Id, setActiveLevel3Id] = useState()
   const [showLevel3, setShowLevel3] = useState(false)
   const [forceHideLevel3, setforceHideLevel3] = useState(false)
+  const [searchOpened, setSearchOpened] = useState(false)
 
   const [showChosenArrow, setShowChosenArrow] = useState()
   const [chosenArrowX, setChosenArrowX] = useState()
@@ -213,6 +214,11 @@ const TopNav = ({
 
   const handleCloseMore = () => setOpenMore(false)
 
+  const handleSearchPanel = (x) => {
+    setSearchOpened(x)
+    cache.refs.searchInputBox.value = ''
+  }
+
   const createHandleClickMoreItem = menuId => () => {
     setOpenMore(false)
     setActiveLevel2Id(menuId)
@@ -453,6 +459,8 @@ const TopNav = ({
           createSetRef={createSetRef}
           showChosenArrow={showChosenArrow}
           chosenArrowX={chosenArrowX}
+          searchOpened={searchOpened}
+          toggleSearchOpen={handleSearchPanel}
         />
 
         {/* Level 3 menu */}