diff --git a/.template-lintrc.js b/.template-lintrc.js
index c6331e9310f..199228f87ad 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -2,4 +2,6 @@
 
 module.exports = {
   extends: ['octane', 'a11y'],
+
+  pending: [{ moduleId: 'app/components/header', only: ['no-duplicate-landmark-elements'] }],
 };
diff --git a/app/components/footer.module.css b/app/components/footer.module.css
index 011ab30c63a..9ba1cd9efb9 100644
--- a/app/components/footer.module.css
+++ b/app/components/footer.module.css
@@ -11,6 +11,8 @@
 }
 
 .after-main-links {
+    composes: width-limit from '../styles/application.module.css';
+
     margin: 40px;
     text-align: center;
 
diff --git a/app/components/header.hbs b/app/components/header.hbs
index f531e589ae7..c515c3c00c5 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -1,145 +1,161 @@
 <header local-class="header">
-  <LinkTo @route="index" local-class="index-link">
-    <img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
-    <h1>crates.io</h1>
-  </LinkTo>
-
-  <form local-class="search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
-    <input
-      type="text"
-      local-class="search"
-      name="q"
-      id="cargo-desktop-search"
-      placeholder="Click or press 'S' to search..."
-      value={{this.header.searchValue}}
-      oninput={{this.updateSearchValue}}
-      autocorrect="off"
-      autocapitalize="off"
-      spellcheck="false"
-      required
-      data-test-search-input
-    >
-    <label for="cargo-desktop-search" local-class="search-label">Search</label>
-    {{on-key 's' (focus '#cargo-desktop-search')}}
-    {{on-key 'S' (focus '#cargo-desktop-search')}}
-    {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
-  </form>
-
-  <nav local-class='nav'>
-    <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
-      Browse All Crates
+  <div local-class="header-inner">
+    <LinkTo @route="index" local-class="index-link">
+      <img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
+      <h1>crates.io</h1>
     </LinkTo>
-    <span local-class="sep">|</span>
-    <Dropdown as |dd|>
-      <dd.Trigger local-class="dropdown-button">
-        Docs
-      </dd.Trigger>
 
-      <dd.Menu local-class="doc-links" as |menu|>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
-        <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
-        <menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
-        <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
-      </dd.Menu>
-    </Dropdown>
-  </nav>
+    <form local-class="desktop-search-form" action='/search' {{on "submit" (prevent-default this.search)}} data-test-search-form>
+      <input
+        type="text"
+        local-class="search"
+        name="q"
+        id="cargo-desktop-search"
+        placeholder="Click or press 'S' to search..."
+        value={{this.header.searchValue}}
+        oninput={{this.updateSearchValue}}
+        autocorrect="off"
+        autocapitalize="off"
+        autofocus="autofocus"
+        spellcheck="false"
+        required
+        data-test-search-input
+      >
+      <label for="cargo-desktop-search" local-class="search-label">Search</label>
+      {{on-key 's' (focus '#cargo-desktop-search')}}
+      {{on-key 'S' (focus '#cargo-desktop-search')}}
+      {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
+    </form>
 
-  <div local-class="login">
-    {{#if this.session.currentUser}}
-      <Dropdown data-test-user-menu as |dd|>
-        <dd.Trigger local-class="dropdown-button" data-test-toggle>
-          <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
-          {{ this.session.currentUser.name }}
+    <nav local-class='nav'>
+      <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
+        Browse All Crates
+      </LinkTo>
+      <span local-class="sep">|</span>
+      <Dropdown as |dd|>
+        <dd.Trigger local-class="dropdown-button">
+          Docs
         </dd.Trigger>
 
+        <dd.Menu local-class="doc-links" as |menu|>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/publishing.html'>Publishing on crates.io</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/faq.html'>FAQ</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/manifest.html'>Cargo.toml Format</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/build-scripts.html'>Build Scripts</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/config.html'>Configuration</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/pkgid-spec.html'>Package ID specs</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></menu.Item>
+          <menu.Item><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></menu.Item>
+          <menu.Item><LinkTo @route="policies">Policies</LinkTo></menu.Item>
+          <menu.Item><LinkTo @route="category-slugs">List of category slugs</LinkTo></menu.Item>
+        </dd.Menu>
+      </Dropdown>
+      <span local-class="sep">|</span>
+      {{#if this.session.currentUser}}
+        <Dropdown data-test-user-menu as |dd|>
+          <dd.Trigger local-class="dropdown-button" data-test-toggle>
+            <UserAvatar @user={{this.session.currentUser}} @size="small" local-class="avatar" data-test-avatar />
+            {{ this.session.currentUser.name }}
+          </dd.Trigger>
+
+          <dd.Menu local-class="current-user-links" as |menu|>
+            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
+            <menu.Item local-class="menu-item-with-separator">
+              <button
+                type="button"
+                disabled={{this.session.logoutTask.isRunning}}
+                local-class="logout-menu-item"
+                data-test-logout-button
+                {{on "click" (perform this.session.logoutTask)}}
+              >
+                {{#if this.session.logoutTask.isRunning}}
+                  <LoadingSpinner local-class="spinner"/>
+                {{/if}}
+                Sign Out
+              </button>
+            </menu.Item>
+          </dd.Menu>
+        </Dropdown>
+      {{else}}
+        <button
+          type="button"
+          disabled={{this.session.loginTask.isRunning}}
+          local-class="login-button"
+          data-test-login-button
+          {{on "click" (perform this.session.loginTask)}}
+        >
+          {{#if this.session.loginTask.isRunning}}
+            <LoadingSpinner local-class="spinner"/>
+          {{else}}
+            {{svg-jar "lock" local-class="login-icon"}}
+          {{/if}}
+          Log in with GitHub
+        </button>
+      {{/if}}
+    </nav>
+
+    <div local-class='menu'>
+      <Dropdown as |dd|>
+        <dd.Trigger local-class="dropdown-button">
+          Menu
+        </dd.Trigger>
         <dd.Menu local-class="current-user-links" as |menu|>
-          <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-          <menu.Item><LinkTo @route="me">Account Settings</LinkTo></menu.Item>
-          <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-          <menu.Item local-class="menu-item-with-separator">
-            <button
-              type="button"
-              disabled={{this.session.logoutTask.isRunning}}
-              local-class="logout-menu-item"
-              data-test-logout-button
-              {{on "click" (perform this.session.logoutTask)}}
-            >
-              {{#if this.session.logoutTask.isRunning}}
-                <LoadingSpinner local-class="spinner"/>
-              {{/if}}
-              Sign Out
-            </button>
-          </menu.Item>
+          <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
+          {{#if this.session.currentUser}}
+            <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
+            <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
+            <menu.Item local-class="menu-item-with-separator">
+              <button
+                type="button"
+                disabled={{this.session.logoutTask.isRunning}}
+                local-class="logout-menu-item"
+                {{on "click" (perform this.session.logoutTask)}}
+              >
+                {{#if this.session.logoutTask.isRunning}}
+                  <LoadingSpinner local-class="spinner"/>
+                {{/if}}
+                Sign Out
+              </button>
+            </menu.Item>
+          {{else}}
+            <menu.Item>
+              <button
+                type="button"
+                disabled={{this.session.loginTask.isRunning}}
+                local-class="login-menu-item"
+                {{on "click" (perform this.session.loginTask)}}
+              >
+                {{#if this.session.loginTask.isRunning}}
+                  <LoadingSpinner local-class="spinner"/>
+                {{/if}}
+                Log in with GitHub
+              </button>
+            </menu.Item>
+          {{/if}}
         </dd.Menu>
       </Dropdown>
-    {{else}}
-      <button
-        type="button"
-        disabled={{this.session.loginTask.isRunning}}
-        local-class="login-button"
-        data-test-login-button
-        {{on "click" (perform this.session.loginTask)}}
-      >
-        {{#if this.session.loginTask.isRunning}}
-          <LoadingSpinner local-class="spinner"/>
-        {{else}}
-          {{svg-jar "lock" local-class="login-icon"}}
-        {{/if}}
-        Log in with GitHub
-      </button>
-    {{/if}}
-  </div>
+    </div>
 
-  <div local-class='menu'>
-    <Dropdown as |dd|>
-      <dd.Trigger local-class="dropdown-button">
-        Menu
-      </dd.Trigger>
-      <dd.Menu local-class="current-user-links" as |menu|>
-        <menu.Item><LinkTo @route="crates">Browse All Crates</LinkTo></menu.Item>
-        {{#if this.session.currentUser}}
-          <menu.Item><LinkTo @route="dashboard">Dashboard</LinkTo></menu.Item>
-          <menu.Item><LinkTo @route="me" data-test-me-link>Account Settings</LinkTo></menu.Item>
-          <menu.Item><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></menu.Item>
-          <menu.Item local-class="menu-item-with-separator">
-            <button
-              type="button"
-              disabled={{this.session.logoutTask.isRunning}}
-              local-class="logout-menu-item"
-              {{on "click" (perform this.session.logoutTask)}}
-            >
-              {{#if this.session.logoutTask.isRunning}}
-                <LoadingSpinner local-class="spinner"/>
-              {{/if}}
-              Sign Out
-            </button>
-          </menu.Item>
-        {{else}}
-          <menu.Item>
-            <button
-              type="button"
-              disabled={{this.session.loginTask.isRunning}}
-              local-class="login-menu-item"
-              {{on "click" (perform this.session.loginTask)}}
-            >
-              {{#if this.session.loginTask.isRunning}}
-                <LoadingSpinner local-class="spinner"/>
-              {{/if}}
-              Log in with GitHub
-            </button>
-          </menu.Item>
-        {{/if}}
-      </dd.Menu>
-    </Dropdown>
+    <form local-class='mobile-search' action='/search' {{on "submit" (prevent-default this.search)}}>
+      <input
+        type="text"
+        local-class="search"
+        name="q"
+        id="cargo-mobile-search"
+        placeholder="Search"
+        value={{this.header.searchValue}}
+        oninput={{this.updateSearchValue}}
+        autocorrect="off"
+        required
+      >
+      <label for="cargo-mobile-search" local-class="search-label">Search</label>
+    </form>
   </div>
 </header>
\ No newline at end of file
diff --git a/app/components/header.module.css b/app/components/header.module.css
index 2856c36babf..b37d50a7fd0 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -1,69 +1,45 @@
 .header {
-    display: grid;
+    display: flex;
+    justify-content: center;
     width: 100%;
-    padding: 20px;
-    color: white;
-
-    align-items: center;
-    grid-template:
-        "index-link . menu" auto
-        "search-form search-form search-form" auto
-        / auto 1fr auto;
-
-    @media only screen and (min-width: 551px) {
-        grid-template:
-            "index-link search-form menu" auto
-            / auto 1fr auto;
-    }
-
-    @media only screen and (min-width: 890px) {
-        grid-template:
-            "index-link search-form nav login" auto
-            / auto minmax(150px, 400px) minmax(220px, 1fr) auto;
-    }
-
-    a {
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-            color: white;
-        }
-    }
 }
 
 .header-inner {
+    composes: width-limit from '../styles/application.module.css';
+
     display: grid;
     grid-template-columns: auto 1fr auto;
     align-items: center;
+    padding: 10px;
+    color: white;
 
+    a {
+        color: white; text-decoration: none;
+        &:hover { color: white; }
+    }
 }
 
 .index-link {
-    grid-area: index-link;
     display: flex;
     align-items: center;
 
     h1 {
         font-size: 24px;
-        margin: 0;
     }
 }
 
 .logo {
     width: 60px;
     height: auto;
-    margin: -10px 10px -10px -10px;
+    margin-right: 10px;
 }
 
-.search-form {
-    grid-area: search-form;
-    margin-top: 15px;
+.desktop-search-form {
     display: flex;
     flex-grow: 1;
 
-    @media only screen and (min-width: 551px) {
-        margin: 0 20px;
+    @media only screen and (max-width: 820px) {
+        display: none;
     }
 }
 
@@ -72,6 +48,8 @@ input.search {
     border: none;
     color: black;
     width: 100%;
+    margin-left: 16px;
+    margin-right: 16px;
     padding: 5px 5px 5px 25px;
     background-color: white;
     background-image: url('/assets/search.png');
@@ -88,6 +66,21 @@ input.search {
     }
 }
 
+.mobile-search {
+    display: none;
+    grid-row: 2;
+    grid-column: span 3;
+    margin: 0 10px 10px;
+
+    input.search {
+        margin: 0;
+    }
+
+    @media only screen and (max-width: 820px) {
+        display: block;
+    }
+}
+
 .search-label {
     position: absolute;
     left: -10000px;
@@ -108,31 +101,24 @@ input.search {
 }
 
 .nav {
-    grid-area: nav;
-    display: none;
+    display: flex;
     align-items: center;
     text-align: right;
     margin-right: 5px;
 
-    @media only screen and (min-width: 890px) {
-        display: flex;
-    }
-}
-
-.login {
-    display: none;
-
-    @media only screen and (min-width: 890px) {
-        display: block;
+    @media only screen and (max-width: 900px) {
+        display: none;
     }
 }
 
 .menu {
-    grid-area: menu;
     text-align: right;
+    margin-right: 5px;
+    flex-grow: 2;
+    display: none;
 
-    @media only screen and (min-width: 890px) {
-        display: none;
+    @media only screen and (max-width: 900px) {
+        display: block;
     }
 }