diff --git a/packages/web/src/components/header/desktop/Header.jsx b/packages/web/src/components/header/desktop/Header.tsx
similarity index 75%
rename from packages/web/src/components/header/desktop/Header.jsx
rename to packages/web/src/components/header/desktop/Header.tsx
index c85e8d66156..edd356ce8e9 100644
--- a/packages/web/src/components/header/desktop/Header.jsx
+++ b/packages/web/src/components/header/desktop/Header.tsx
@@ -1,5 +1,6 @@
+import { ReactNode } from 'react'
+
 import cn from 'classnames'
-import PropTypes from 'prop-types'
 
 import { useHistoryContext } from 'app/HistoryProvider'
 import { BackButton } from 'components/back-button/BackButton'
@@ -7,17 +8,35 @@ import { HeaderGutter } from 'components/header/desktop/HeaderGutter'
 
 import styles from './Header.module.css'
 
-const Header = (props) => {
+export type HeaderProps = {
+  primary: ReactNode
+  topLeftElement?: ReactNode // e.g. searchbar
+  bottomBar?: ReactNode // e.g. tabs
+  secondary?: ReactNode
+  rightDecorator?: ReactNode
+  variant?: 'main' | 'mini' | 'section' | 'page'
+  containerStyles?: string
+  wrapperClassName?: string
+  showBackButton?: boolean
+  onClickBack?: () => void
+  overrideWidth?: number
+  children?: ReactNode
+  isChromeOrSafari?: boolean
+  scrollBarWidth?: number
+  headerContainerRef?: React.RefObject<HTMLDivElement>
+}
+
+const Header = (props: HeaderProps) => {
   const {
     primary,
     secondary = null,
     rightDecorator = null,
     topLeftElement = null,
     children,
-    variant,
-    containerStyles,
+    variant = 'main',
+    containerStyles = '',
     wrapperClassName,
-    showBackButton,
+    showBackButton = false,
     onClickBack,
     bottomBar,
     overrideWidth = null,
@@ -57,7 +76,7 @@ const Header = (props) => {
         >
           <div
             className={styles.middleRow}
-            style={overrideWidth !== null ? { maxWidth: overrideWidth } : null}
+            style={overrideWidth !== null ? { maxWidth: overrideWidth } : {}}
           >
             <div className={cn(styles.headerWrapper, wrapperClassName)}>
               {showBackButton ? (
@@ -83,24 +102,4 @@ const Header = (props) => {
   )
 }
 
-Header.propTypes = {
-  primary: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  topLeftElement: PropTypes.node, // e.g. searchbar
-  bottomBar: PropTypes.node, // e.g. tabs
-  secondary: PropTypes.node,
-  rightDecorator: PropTypes.node,
-  variant: PropTypes.oneOf(['main', 'mini', 'section', 'page']),
-  containerStyles: PropTypes.string,
-  wrapperClassName: PropTypes.string,
-  showBackButton: PropTypes.bool,
-  onClickBack: PropTypes.func,
-  overrideWidth: PropTypes.number
-}
-
-Header.defaultProps = {
-  variant: 'main',
-  containerStyles: '',
-  showBackButton: false
-}
-
 export default Header
diff --git a/packages/web/src/components/search/SearchBar.module.css b/packages/web/src/components/search/SearchBar.module.css
index f36b0810e7c..980745ce0c3 100644
--- a/packages/web/src/components/search/SearchBar.module.css
+++ b/packages/web/src/components/search/SearchBar.module.css
@@ -6,12 +6,7 @@
 }
 
 .loadingAnimation {
-  position: absolute;
-  z-index: 2;
   pointer-events: none;
-  top: 0;
-  right: 8px;
-  bottom: 2px;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
diff --git a/packages/web/src/components/search/SearchBarV2.jsx b/packages/web/src/components/search/SearchBarV2.jsx
index 0b973c6493e..b79d316e2d7 100644
--- a/packages/web/src/components/search/SearchBarV2.jsx
+++ b/packages/web/src/components/search/SearchBarV2.jsx
@@ -386,17 +386,26 @@ class SearchBar extends Component {
       !isTagSearch && this.state.open && !this.props.isViewingSearchPage
     const showTagPopup =
       isTagSearch && this.state.open && !this.state.shouldDismissTagPopup
-    return (
-      <div
-        className={styles.searchBar}
-        id='search-bar-autocomplete'
-        ref={this.searchBarRef}
-      >
-        {/* show search spinner if not a tag search and there is some value present */}
-        {!isTagSearch && this.state.value && (
+    const showSpinner = status === Status.LOADING && this.state.open
+
+    const renderSuffix = () => {
+      if (this.state.value && !showSpinner) {
+        return (
+          <IconButton
+            icon={IconCloseAlt}
+            size='2xs'
+            color='subdued'
+            onClick={this.props.onClear}
+          />
+        )
+      }
+
+      /* show search spinner if not a tag search and there is some value present */
+      if (!isTagSearch && this.state.value) {
+        return (
           <div
             className={cn(styles.loadingAnimation, {
-              [styles.show]: status === Status.LOADING && this.state.open
+              [styles.show]: showSpinner
             })}
           >
             <Lottie
@@ -407,7 +416,16 @@ class SearchBar extends Component {
               }}
             />
           </div>
-        )}
+        )
+      }
+    }
+
+    return (
+      <div
+        className={styles.searchBar}
+        id='search-bar-autocomplete'
+        ref={this.searchBarRef}
+      >
         <AutoComplete
           ref={this.autoCompleteRef}
           dropdownClassName={cn(styles.searchBox, {
@@ -437,16 +455,7 @@ class SearchBar extends Component {
                 onClick={() => this.props.onSubmit('')}
               />
             }
-            suffix={
-              this.state.value ? (
-                <IconButton
-                  icon={IconCloseAlt}
-                  size='2xs'
-                  color='subdued'
-                  onClick={this.props.onClear}
-                />
-              ) : null
-            }
+            suffix={renderSuffix()}
             onKeyDown={this.onKeyDown}
             spellCheck={false}
           />
diff --git a/packages/web/src/pages/explore-page/components/desktop/CollectionsPage.tsx b/packages/web/src/pages/explore-page/components/desktop/CollectionsPage.tsx
index 35fc2b63f8b..7a4ad86657f 100644
--- a/packages/web/src/pages/explore-page/components/desktop/CollectionsPage.tsx
+++ b/packages/web/src/pages/explore-page/components/desktop/CollectionsPage.tsx
@@ -22,8 +22,8 @@ const CollectionsPage = (props: CollectionsPageProps) => {
     <Header
       primary={title}
       secondary={description}
-      containerStyles={description ? styles.header : null}
-      wrapperClassName={description ? styles.headerWrapper : null}
+      containerStyles={description ? styles.header : undefined}
+      wrapperClassName={description ? styles.headerWrapper : undefined}
     />
   )
 
diff --git a/packages/web/src/pages/search-page-v2/SearchHeader.tsx b/packages/web/src/pages/search-page-v2/SearchHeader.tsx
index e5054cf4e06..36bc91407ca 100644
--- a/packages/web/src/pages/search-page-v2/SearchHeader.tsx
+++ b/packages/web/src/pages/search-page-v2/SearchHeader.tsx
@@ -4,7 +4,7 @@ import { Flex, RadioGroup, SelectablePill, Text } from '@audius/harmony'
 import { CSSObject, useTheme } from '@emotion/react'
 import { capitalize } from 'lodash'
 
-import Header from 'components/header/desktop/Header'
+import Header, { HeaderProps } from 'components/header/desktop/Header'
 import { useIsMobile } from 'hooks/useIsMobile'
 
 import { filters } from './SearchFilters'
@@ -12,7 +12,7 @@ import { categories } from './categories'
 import { useSearchCategory, useSearchParams } from './hooks'
 import { Category, CategoryKey } from './types'
 
-export const SearchHeader = () => {
+export const SearchHeader = (props: Partial<HeaderProps>) => {
   const { query } = useSearchParams()
   const [categoryKey, setCategory] = useSearchCategory()
   const isMobile = useIsMobile()
@@ -74,6 +74,7 @@ export const SearchHeader = () => {
     </Flex>
   ) : (
     <Header
+      {...props}
       primary='Search'
       secondary={
         query ? (