diff --git a/.template-lintrc.js b/.template-lintrc.js
index 199228f87ad..c6331e9310f 100644
--- a/.template-lintrc.js
+++ b/.template-lintrc.js
@@ -2,6 +2,4 @@
 
 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 9ba1cd9efb9..011ab30c63a 100644
--- a/app/components/footer.module.css
+++ b/app/components/footer.module.css
@@ -11,8 +11,6 @@
 }
 
 .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 c515c3c00c5..f531e589ae7 100644
--- a/app/components/header.hbs
+++ b/app/components/header.hbs
@@ -1,161 +1,145 @@
 <header local-class="header">
-  <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>
-
-    <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>
+  <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>
 
-    <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>
+  <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>
 
-        <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>
+  <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="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>
+      <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>
 
-    <div local-class='menu'>
-      <Dropdown as |dd|>
-        <dd.Trigger local-class="dropdown-button">
-          Menu
+  <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 }}
         </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}}
+          <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>
-    </div>
-
-    <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
+    {{else}}
+      <button
+        type="button"
+        disabled={{this.session.loginTask.isRunning}}
+        local-class="login-button"
+        data-test-login-button
+        {{on "click" (perform this.session.loginTask)}}
       >
-      <label for="cargo-mobile-search" local-class="search-label">Search</label>
-    </form>
+        {{#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 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>
   </div>
 </header>
\ No newline at end of file
diff --git a/app/components/header.module.css b/app/components/header.module.css
index b37d50a7fd0..2856c36babf 100644
--- a/app/components/header.module.css
+++ b/app/components/header.module.css
@@ -1,45 +1,69 @@
 .header {
-    display: flex;
-    justify-content: center;
+    display: grid;
     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-right: 10px;
+    margin: -10px 10px -10px -10px;
 }
 
-.desktop-search-form {
+.search-form {
+    grid-area: search-form;
+    margin-top: 15px;
     display: flex;
     flex-grow: 1;
 
-    @media only screen and (max-width: 820px) {
-        display: none;
+    @media only screen and (min-width: 551px) {
+        margin: 0 20px;
     }
 }
 
@@ -48,8 +72,6 @@ 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');
@@ -66,21 +88,6 @@ 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;
@@ -101,27 +108,34 @@ input.search {
 }
 
 .nav {
-    display: flex;
+    grid-area: nav;
+    display: none;
     align-items: center;
     text-align: right;
     margin-right: 5px;
 
-    @media only screen and (max-width: 900px) {
-        display: none;
+    @media only screen and (min-width: 890px) {
+        display: flex;
     }
 }
 
-.menu {
-    text-align: right;
-    margin-right: 5px;
-    flex-grow: 2;
+.login {
     display: none;
 
-    @media only screen and (max-width: 900px) {
+    @media only screen and (min-width: 890px) {
         display: block;
     }
 }
 
+.menu {
+    grid-area: menu;
+    text-align: right;
+
+    @media only screen and (min-width: 890px) {
+        display: none;
+    }
+}
+
 .menu-item-with-separator {
     border-top: 1px solid var(--gray-border);
 }