diff --git a/packages/website/ts/components/annoucement_banner.tsx b/packages/website/ts/components/annoucement_banner.tsx
index d59ee4fb89..2ed4b3ad1d 100644
--- a/packages/website/ts/components/annoucement_banner.tsx
+++ b/packages/website/ts/components/annoucement_banner.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
+import { zIndex } from 'ts/style/z_index';
 
 import { Button } from 'ts/components/button';
 import { ThemeInterface } from 'ts/components/siteWrap';
@@ -128,7 +129,7 @@ const CustomSection = styled(Section)<CustomSectionProps>`
     top: 0;
     left: 0;
     right: 0;
-    z-index: 1201;
+    z-index: ${zIndex.announcementBanner};
     padding: 0 1px;
     margin: 0;
     max-width: 100%;
diff --git a/packages/website/ts/components/docs/header.tsx b/packages/website/ts/components/docs/header.tsx
index dcd2860836..dcfa54bdee 100644
--- a/packages/website/ts/components/docs/header.tsx
+++ b/packages/website/ts/components/docs/header.tsx
@@ -14,6 +14,8 @@ import { FlexWrap } from 'ts/components/newLayout';
 import { ThemeValuesInterface } from 'ts/components/siteWrap';
 
 import { colors } from 'ts/style/colors';
+import { zIndex } from 'ts/style/z_index';
+
 import { WebsitePaths } from 'ts/types';
 
 interface IHeaderProps {
@@ -120,7 +122,7 @@ const DocsLogoWrap = styled.div`
     font-size: var(--defaultHeading);
     color: rgba(0, 0, 0, 0.5);
     margin-left: 0.875rem;
-    z-index: 25;
+    z-index: ${zIndex.header};
 `;
 
 const DocsLogoLink = styled(Link)`
diff --git a/packages/website/ts/components/docs/mobileNav.tsx b/packages/website/ts/components/docs/mobileNav.tsx
index 2ae0a2c98e..50364ed542 100644
--- a/packages/website/ts/components/docs/mobileNav.tsx
+++ b/packages/website/ts/components/docs/mobileNav.tsx
@@ -8,6 +8,8 @@ import { Button } from 'ts/components/button';
 import { SearchInput } from 'ts/components/docs/search_input';
 
 import { colors } from 'ts/style/colors';
+import { zIndex } from 'ts/style/z_index';
+
 import { WebsitePaths } from 'ts/types';
 
 interface IMobileNavProps {
@@ -73,7 +75,7 @@ const Wrap = styled.nav<{ isToggled: boolean }>`
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    z-index: 20;
+    z-index: ${zIndex.mobileNav};
     top: 0;
     left: 0;
     font-size: 20px;
diff --git a/packages/website/ts/components/docs/search/autocomplete.tsx b/packages/website/ts/components/docs/search/autocomplete.tsx
index 59275ecf4a..4932f2bfef 100644
--- a/packages/website/ts/components/docs/search/autocomplete.tsx
+++ b/packages/website/ts/components/docs/search/autocomplete.tsx
@@ -25,7 +25,7 @@ interface HitProps {
 export const CustomAutoComplete: React.FC<AutoCompleteProps> = ({
     isHome = false,
     hits = [],
-    currentRefinement = '',
+    currentRefinement,
     refine,
 }) => {
     const [value, setValue] = useState<string>('');
@@ -77,21 +77,24 @@ export const CustomAutoComplete: React.FC<AutoCompleteProps> = ({
     };
 
     return (
-        <Wrapper isHome={isHome}>
-            <Autosuggest
-                suggestions={hits}
-                multiSection={true}
-                onSuggestionSelected={onSuggestionSelected}
-                onSuggestionsFetchRequested={onSuggestionsFetchRequested}
-                onSuggestionHighlighted={onSuggestionHighlighted}
-                onSuggestionsClearRequested={onSuggestionsClearRequested}
-                getSuggestionValue={getSuggestionValue}
-                renderSuggestion={renderSuggestion}
-                inputProps={inputProps}
-                renderSectionTitle={renderSectionTitle}
-                getSectionSuggestions={getSectionSuggestions}
-            />
-        </Wrapper>
+        <>
+            <Wrapper isHome={isHome}>
+                <Autosuggest
+                    suggestions={hits}
+                    multiSection={true}
+                    onSuggestionSelected={onSuggestionSelected}
+                    onSuggestionsFetchRequested={onSuggestionsFetchRequested}
+                    onSuggestionHighlighted={onSuggestionHighlighted}
+                    onSuggestionsClearRequested={onSuggestionsClearRequested}
+                    getSuggestionValue={getSuggestionValue}
+                    renderSuggestion={renderSuggestion}
+                    inputProps={inputProps}
+                    renderSectionTitle={renderSectionTitle}
+                    getSectionSuggestions={getSectionSuggestions}
+                />
+            </Wrapper>
+            {currentRefinement && <Overlay onClick={onSuggestionsClearRequested} />}
+        </>
     );
 };
 
@@ -102,15 +105,19 @@ const Overlay = styled.div`
     left: 0;
     right: 0;
 
-    background: #000;
-    opacity: 0.5;
+    z-index: 30;
 
-    pointer-events: none;
+    width: 100vw;
+    height: 100vh;
+
+    background: rgba(243, 246, 244, 0.5);
+    cursor: pointer;
 `;
 
 const Wrapper = styled.div<Props>`
     position: relative;
     min-width: 240px;
+    z-index: 500;
 
     ${({ isHome }) =>
         isHome &&
@@ -120,6 +127,29 @@ const Wrapper = styled.div<Props>`
         margin: 0 auto;
     `};
 
+    .react-autosuggest__container {
+        &--open,
+        &--focused {
+            background-color: ${colors.white};
+        }
+
+        ${({ isHome }) =>
+            isHome &&
+            `
+            border: 1px solid transparent;
+            padding: 13px 30px;
+
+            &--focused,
+            &--open {
+                border: 1px solid #dbdfdd;
+            }
+
+            @media (max-width: 900px) {
+                padding: 13px 18px;
+            }
+        `};
+    }
+
     .react-autosuggest__input {
         background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
             transparent left center no-repeat;
@@ -135,6 +165,7 @@ const Wrapper = styled.div<Props>`
             `
             border-bottom-color: #b4bebd;
 
+            &--focused,
             &--open {
                 border-bottom-color: ${colors.brandLight};
                 
@@ -182,27 +213,6 @@ const Wrapper = styled.div<Props>`
         }
     }
 
-    .react-autosuggest__container {
-        &--open {
-            background-color: ${colors.white};
-        }
-
-        ${({ isHome }) =>
-            isHome &&
-            `
-            border: 1px solid transparent;
-            padding: 13px 30px;
-
-            &--open {
-                border: 1px solid #dbdfdd;
-            }
-
-            @media (max-width: 900px) {
-                padding: 13px 18px;
-            }
-        `};
-    }
-
     .react-autosuggest__section-container {
         display: flex;
 
@@ -246,10 +256,9 @@ const Wrapper = styled.div<Props>`
         position: absolute;
 
         background-color: ${colors.white};
-        z-index: 10;
-
         flex-grow: 1;
 
+        &--focused,
         &--open {
             border: 1px solid #dbdfdd;
             border-top: none;
@@ -260,6 +269,7 @@ const Wrapper = styled.div<Props>`
             `
             right: 0;
             left: 0;
+            top: 94px; 
         `};
 
         ${({ isHome }) =>
diff --git a/packages/website/ts/components/hamburger.tsx b/packages/website/ts/components/hamburger.tsx
index 9a169de073..3e6600ede1 100644
--- a/packages/website/ts/components/hamburger.tsx
+++ b/packages/website/ts/components/hamburger.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { zIndex } from 'ts/style/z_index';
+
 interface Props {
     isOpen: boolean;
     onClick?: () => void;
@@ -22,7 +24,7 @@ const StyledHamburger = styled.button<Props>`
     width: 22px;
     height: 16px;
     position: relative;
-    z-index: 25;
+    z-index: ${zIndex.header};
     padding: 0;
     outline: none;
     user-select: none;
diff --git a/packages/website/ts/components/header.tsx b/packages/website/ts/components/header.tsx
index 1fddbfe338..3ce6f105e8 100644
--- a/packages/website/ts/components/header.tsx
+++ b/packages/website/ts/components/header.tsx
@@ -15,6 +15,9 @@ import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobileNav';
 import { FlexWrap } from 'ts/components/newLayout';
 import { ThemeValuesInterface } from 'ts/components/siteWrap';
+
+import { zIndex } from 'ts/style/z_index';
+
 import { WebsitePaths } from 'ts/types';
 
 interface HeaderProps {
@@ -214,7 +217,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
     opacity: 0;
     transform: translate3d(0, -10px, 0);
     transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s;
-    z-index: 20;
+    z-index: ${zIndex.header};
 
     &:after,
     &:before {
diff --git a/packages/website/ts/components/logo.tsx b/packages/website/ts/components/logo.tsx
index f89be0711c..9f1fae5dc2 100644
--- a/packages/website/ts/components/logo.tsx
+++ b/packages/website/ts/components/logo.tsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { ThemeInterface } from 'ts/components/siteWrap';
 import LogoIcon from 'ts/icons/logo-with-type.svg';
 
+import { zIndex } from 'ts/style/z_index';
+
 interface LogoInterface {
     theme?: ThemeInterface;
 }
@@ -14,7 +16,7 @@ interface LogoInterface {
 const StyledLogo = styled.div`
     text-align: left;
     position: relative;
-    z-index: 25;
+    z-index: ${zIndex.header};
 
     @media (max-width: 800px) {
         svg {
diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
index dbf36dffde..14db7be588 100644
--- a/packages/website/ts/components/mobileNav.tsx
+++ b/packages/website/ts/components/mobileNav.tsx
@@ -5,10 +5,13 @@ import styled from 'styled-components';
 import { Link } from '@0x/react-shared';
 
 import { WrapGrid, WrapProps } from 'ts/components/newLayout';
-import { WebsitePaths } from 'ts/types';
+
+import { zIndex } from 'ts/style/z_index';
 
 import { constants } from 'ts/utils/constants';
 
+import { WebsitePaths } from 'ts/types';
+
 interface IMobileNavProps {
     isToggled: boolean;
     toggleMobileNav: () => void;
@@ -69,7 +72,7 @@ const Wrap = styled.nav<{ isToggled: boolean }>`
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    z-index: 20;
+    z-index: ${zIndex.mobileNav};
     top: 0;
     left: 0;
     font-size: 20px;
diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts
index a3998f59b0..fe3a321659 100644
--- a/packages/website/ts/style/z_index.ts
+++ b/packages/website/ts/style/z_index.ts
@@ -1,6 +1,9 @@
 export const zIndex = {
+    header: 25,
+    mobileNav: 20,
     topBar: 1100,
     aboveTopBar: 1101,
     overlay: 1105,
     aboveOverlay: 1106,
+    announcementBanner: 1201,
 };