diff --git a/src/components/header.js b/src/components/header.js
index 404072cbbef..10be06bfd32 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -5,7 +5,7 @@ import * as Search from './search'
 import NavDrawer from './nav-drawer'
 import Link from './link'
 import useSearch from '../hooks/use-search'
-import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
+import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
 import headerNavItems from '../../content/header-nav.yml'
 import {DarkTheme} from '../theme'
 import SiteTitle from './site-title'
@@ -19,7 +19,7 @@ function Header() {
   const search = useSearch()
 
   return (
-    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: 1}}>
+    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>
       <NpmHeaderBar />
       <Box
         as="header"
diff --git a/src/components/search.js b/src/components/search.js
index 8bf47d8495d..330d7360d04 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -5,7 +5,7 @@ import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
 import TextInput from './text-input'
 import useSiteMetadata from '../hooks/use-site-metadata'
-import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
+import {HEADER_BAR, HEADER_HEIGHT, Z_INDEX} from '../constants'
 import {LightTheme} from '../theme'
 import {LinkNoUnderline} from './link'
 import * as getNav from '../util/get-nav'
@@ -106,11 +106,22 @@ export const Mobile = ({
   const siteMetadata = useSiteMetadata()
   const getCloseAnimation = exit => (isForceClose ? undefined : {exit})
 
+  const handleSearchToggle = React.useCallback(() => {
+    setMobileSearchOpen(true)
+  }, [setMobileSearchOpen])
+
   return (
     <>
-      <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={() => setMobileSearchOpen(true)}>
-        <SearchIcon />
-      </Button>
+      {!isMobileSearchOpen && (
+        <Button 
+          aria-label="Search" 
+          aria-expanded={isMobileSearchOpen} 
+          onClick={handleSearchToggle}
+        >
+          <SearchIcon />
+        </Button>
+      )}
+
       <AnimatePresence>
         {isMobileSearchOpen ? (
           <FocusOn returnFocus={true} onEscapeKey={() => resetAndClose(true)}>
@@ -121,7 +132,7 @@ export const Mobile = ({
                 left: 0,
                 right: 0,
                 bottom: 0,
-                zIndex: 1,
+                zIndex: Z_INDEX.SEARCH_OVERLAY,
               }}
             >
               <Box
@@ -157,6 +168,8 @@ export const Mobile = ({
                     borderRightWidth: 0,
                     borderColor: 'border.muted',
                     position: 'relative',
+                    bg: 'canvas.default',
+                    zIndex: Z_INDEX.SEARCH_OVERLAY + 1, 
                   }}
                 >
                   <motion.div
diff --git a/src/constants.js b/src/constants.js
index 70b9ad1adfb..2f1108ae5e1 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -11,3 +11,8 @@ export const SKIP_TO_CONTENT_ID = 'skip-to-content'
 export const SKIP_TO_SEARCH_ID = 'search-box-input'
 
 export const CLI_PATH = '/cli'
+
+export const Z_INDEX = {
+  HEADER: 10,
+  SEARCH_OVERLAY: 25
+}
\ No newline at end of file