diff --git a/src/components/MobileHeader.js b/src/components/MobileHeader.js
index b2c0e54d7..2343aa044 100644
--- a/src/components/MobileHeader.js
+++ b/src/components/MobileHeader.js
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
 import { Link } from 'gatsby';
-import cx from 'classnames';
 import Logo from './Logo';
 import Navigation from './Navigation';
 import HamburgerMenu from './HamburgerMenu';
 import SearchInput from './SearchInput';
-import styles from './MobileHeader.module.scss';
 
 const MobileHeader = ({ className, isOpen, toggle }) => {
   const [searchTerm, setSearchTerm] = useState('');
@@ -14,30 +13,54 @@ const MobileHeader = ({ className, isOpen, toggle }) => {
   return (
     <header
       data-swiftype-index={false}
-      className={cx(styles.container, className)}
+      className={className}
+      css={css`
+        position: relative;
+        padding: 0 2rem;
+
+        width: 100vw;
+      `}
     >
-      <div className={styles.menuBar}>
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: var(--height-mobile-nav-bar);
+        `}
+      >
         <Link to="/">
-          <Logo className={styles.logo} />
+          <Logo
+            css={css`
+              display: block;
+              width: 160px;
+            `}
+          />
         </Link>
 
-        <HamburgerMenu
-          className={styles.hamburgerMenu}
-          toggle={toggle}
-          isOpen={isOpen}
-        />
+        <HamburgerMenu toggle={toggle} isOpen={isOpen} />
       </div>
 
       {isOpen && (
         <>
           <SearchInput
-            className={styles.searchInput}
             placeholder="Search developer docs"
             onClear={() => setSearchTerm('')}
             onChange={(e) => setSearchTerm(e.target.value)}
             value={searchTerm}
           />
-          <Navigation searchTerm={searchTerm} className={styles.navigation} />
+          <Navigation
+            searchTerm={searchTerm}
+            css={css`
+              font-size: 1rem;
+              padding: 1.5rem 3rem;
+              position: absolute;
+              height: calc(
+                100vh -
+                  (var(--height-mobile-nav-bar) + var(--height-global-header))
+              );
+            `}
+          />
         </>
       )}
     </header>
diff --git a/src/components/MobileHeader.module.scss b/src/components/MobileHeader.module.scss
deleted file mode 100644
index 3698739cf..000000000
--- a/src/components/MobileHeader.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.container {
-  position: relative;
-  padding: 0 2rem;
-
-  width: 100vw;
-}
-
-.menuBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--height-mobile-nav-bar);
-}
-
-.logo {
-  display: block;
-  width: 160px;
-}
-
-.navigation {
-  font-size: 1rem;
-  padding: 1.5rem 3rem;
-  position: absolute;
-  height: calc(
-    100vh - (var(--height-mobile-nav-bar) + var(--height-global-header))
-  );
-}