diff --git a/assets/static/images/close.svg b/assets/static/images/close.svg
new file mode 100644
index 000000000..c3f7c2fd3
--- /dev/null
+++ b/assets/static/images/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/icon-dot-gov.svg b/assets/static/images/icon-dot-gov.svg
new file mode 100644
index 000000000..3bf047894
--- /dev/null
+++ b/assets/static/images/icon-dot-gov.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-dot-gov</title><path fill="#2378C3" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm10.59 38.858a.857.857 0 0 1 .882.822v1.642H18.886v-1.642a.857.857 0 0 1 .882-.822H42.59zM25.443 27.774v9.829h1.642v-9.83h3.273v9.83H32v-9.83h3.272v9.83h1.643v-9.83h3.272v9.83h.76a.857.857 0 0 1 .882.821v.821h-21.3v-.809a.857.857 0 0 1 .88-.82h.762v-9.842h3.272zm5.736-8.188l12.293 4.915v1.642h-1.63a.857.857 0 0 1-.882.822H21.41a.857.857 0 0 1-.882-.822h-1.642v-1.642l12.293-4.915z"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/icon-https.svg b/assets/static/images/icon-https.svg
new file mode 100644
index 000000000..19ad04fc9
--- /dev/null
+++ b/assets/static/images/icon-https.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><title>icon-https</title><path fill="#719F2A" fill-rule="evenodd" d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0zm0 1.208C14.994 1.208 1.208 14.994 1.208 32S14.994 62.792 32 62.792 62.792 49.006 62.792 32 49.006 1.208 32 1.208zm0 18.886a7.245 7.245 0 0 1 7.245 7.245v3.103h.52c.86 0 1.557.698 1.557 1.558v9.322c0 .86-.697 1.558-1.557 1.558h-15.53c-.86 0-1.557-.697-1.557-1.558V32c0-.86.697-1.558 1.557-1.558h.52V27.34A7.245 7.245 0 0 1 32 20.094zm0 3.103a4.142 4.142 0 0 0-4.142 4.142v3.103h8.284V27.34A4.142 4.142 0 0 0 32 23.197z"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/search.svg b/assets/static/images/search.svg
new file mode 100644
index 000000000..8bc614fc7
--- /dev/null
+++ b/assets/static/images/search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="65" height="64" viewBox="0 0 65 64"><title>search</title><path fill="#FFF" d="M62.672 55.618L49.48 42.426c3.18-4.59 4.77-9.706 4.77-15.347 0-3.666-.713-7.173-2.137-10.519-1.423-3.347-3.347-6.231-5.77-8.656-2.422-2.425-5.307-4.346-8.652-5.769A26.606 26.606 0 0 0 27.17 0a26.61 26.61 0 0 0-10.52 2.135c-3.347 1.423-6.231 3.346-8.654 5.769-2.423 2.424-4.346 5.309-5.769 8.655A26.6 26.6 0 0 0 .092 27.077c0 3.667.712 7.172 2.135 10.52 1.423 3.345 3.346 6.23 5.769 8.652 2.424 2.424 5.308 4.347 8.655 5.77a26.606 26.606 0 0 0 10.519 2.135c5.641 0 10.757-1.591 15.347-4.77l13.191 13.153c.923.974 2.076 1.462 3.462 1.462 1.333 0 2.487-.487 3.46-1.462.975-.974 1.462-2.128 1.462-3.461 0-1.358-.473-2.513-1.422-3.46l.002.002zM39.345 39.252c-3.372 3.372-7.429 5.057-12.173 5.057s-8.801-1.685-12.173-5.057c-3.373-3.372-5.058-7.43-5.058-12.174 0-4.743 1.686-8.8 5.058-12.172 3.371-3.372 7.43-5.058 12.173-5.058s8.8 1.686 12.173 5.058c3.372 3.371 5.059 7.43 5.059 12.173 0 4.744-1.687 8.803-5.059 12.175v-.002z"/></svg>
\ No newline at end of file
diff --git a/assets/static/images/us_flag_small.png b/assets/static/images/us_flag_small.png
new file mode 100644
index 000000000..34b927b42
Binary files /dev/null and b/assets/static/images/us_flag_small.png differ
diff --git a/lib/web/templates/layout/_govheader.html.eex b/lib/web/templates/layout/_govheader.html.eex
new file mode 100644
index 000000000..8feddedb2
--- /dev/null
+++ b/lib/web/templates/layout/_govheader.html.eex
@@ -0,0 +1,167 @@
+<a class="usa-skipnav" href="#main-content">Skip to main content</a>
+  <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item">
+    <section class="usa-banner" aria-label="USA banner area">
+        <div class="usa-banner">
+          <div class="usa-accordion">
+            <header class="usa-banner__header">
+              <div class="usa-banner__inner">
+                <div class="grid-col-auto">
+                  <img class="usa-banner__header-flag" src="<%= Routes.static_path(@conn, "/images/us_flag_small.png") %>" alt="U.S. flag">
+                </div>
+                <div class="grid-col-fill tablet:grid-col-auto">
+                  <p class="usa-banner__header-text">An official website of the United States government</p>
+                  <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
+                </div>
+                <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
+                  <span class="usa-banner__button-text">Here's how you know</span>
+                </button>
+              </div>
+            </header>
+            <div class="usa-banner__content usa-accordion__content" id="gov-banner">
+              <div class="grid-row grid-gap-lg">
+                <div class="usa-banner__guidance tablet:grid-col-6">
+                  <img class="usa-banner__icon usa-media-block__img" src="<%= Routes.static_path(@conn, "/images/icon-dot-gov.svg") %>" alt="Dot gov">
+                    <div class="usa-media-block__body">
+                      <p>
+                        <strong>Official websites use .gov</strong><br />A
+                        <strong>.gov</strong> website belongs to an official government
+                        organization in the United States.
+                      </p>
+                    </div>
+                </div>
+                <div class="usa-banner__guidance tablet:grid-col-6">
+                  <img class="usa-banner__icon usa-media-block__img" src="<%= Routes.static_path(@conn, "/images/icon-https.svg") %>" alt="Https">
+                  <div class="usa-media-block__body">
+                    <p>
+                        <strong>Secure .gov websites use HTTPS</strong><br />A
+                        <strong>lock</strong> (
+                        <span class="icon-lock"
+                          ><svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="52"
+                            height="64"
+                            viewBox="0 0 52 64"
+                            class="usa-banner__lock-image"
+                            role="img"
+                            aria-labelledby="banner-lock-description-default"
+                            focusable="false"
+                          >
+                            <title id="banner-lock-title-default">Lock</title>
+                            <desc id="banner-lock-description-default">Locked padlock icon</desc>
+                            <path
+                              fill="#000000"
+                              fill-rule="evenodd"
+                              d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
+                            />
+                          </svg> </span
+                        >) or <strong>https://</strong> means you’ve safely connected to
+                        the .gov website. Share sensitive information only on official,
+                        secure websites.
+                      </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </section>
+  </div>
+  <div class="usa-overlay"></div>
+
+
+<header class="usa-header usa-header--basic site-header">
+  <div class="desktop:display-flex desktop:width-full">
+
+    <div class="usa-navbar">
+      <div class="usa-logo" id="basic-logo">
+          <a href="https://challenge.gov" title="Home" aria-label="Home">
+            <img src='<%= Routes.static_path(@conn, "/images/challenge-logo.svg") %>' alt="Challenge Gov Logo" title="Challenge Gov" class="header__challenge-logo">
+          </a>
+      </div>
+      <button class="usa-menu-btn" aria-label="menu">Menu</button>
+    </div>
+
+    <nav class="usa-nav usa-header__actions">
+      <button type="button" class="usa-nav__close">
+        <img src="<%= Routes.static_path(Web.Endpoint, "/images/close.svg") %>" role="img" alt="Close" />
+      </button>
+      <ul class="usa-nav__primary usa-accordion flex-align-start">
+        <li class="usa-nav__primary-item">
+          <a href="https://www.challenge.gov/#active-challengess" class="menulink usa-nav__link" title="Active challenges" aria-label="Active challenges" data-anchor="active-challenges">Find a Challenge</a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a class="menulink usa-nav__link" href="https://www.challenge.gov/#resources-people" title="Resources for innovators and managers" aria-label="Resources">Resources</a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a class="menulink usa-nav__link" href="https://www.challenge.gov/events" title="Events for innovators and managers" aria-label="Events">Events</a>
+        </li>
+        <li class="usa-nav__primary-item">
+          <a class="menulink usa-nav__link" href="https://www.challenge.gov/contact" title="Contact page with email and social links" aria-label="Contact">Contact</a>
+        </li>
+      </ul>
+      <section class="display-none desktop:display-flex">
+        <section aria-label="Search component" style="display: flex; justify-content: center; align-items: center;">
+
+          <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get">
+
+
+          <input name="utf8" type="hidden" value="&#x2713;">
+          <input type="hidden" name="affiliate" id="affiliate" value="challenge.gov">
+          <div role="search">
+            <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
+            <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" aria-label="Search Challenge.gov" type="search" name="query" autocomplete="off">
+            <button class="usa-button" type="submit">
+            <img src="<%= Routes.static_path(Web.Endpoint, "/images/search.svg") %>" class="usa-search__submit-icon" alt="Search">
+            <span class="usa-sr-only">Search</span></button>
+          </div>
+          </form>
+        </section>
+
+
+        <%= case current_user(@conn) do %>
+            <% nil -> %>
+              <a style="width: 6rem;" class="float-right usa-button usa-button--outline tablet:margin-left-2 tablet:float-right font-sans-xs" href="https://portal.challenge.gov/sign-in/new"><span style="color:#005ea2;">Login</span></a>
+              <a style="width: 10rem;" class="float-right usa-button usa-button tablet:margin-left-1 tablet:float-right font-sans-xs" href="https://secure.login.gov/sign_up/enter_email?request_id=6ab5f3e4-a3e5-4cb7-90a3-3a777fee8967"><span style="color: #ffffff;">Create Account</span></a>
+
+            <% u -> %>
+
+            <%= link("Log out", to: Routes.session_path(@conn, :delete),method: :delete,  class: "float-right usa-button usa-button tablet:margin-left-1 tablet:float-right font-sans-xs") %>
+
+            <% end %>
+      </section>
+
+<!-- mobile search and login area -->
+    <section class="desktop:display-none order-3">
+      <section aria-label="Search component">
+        <form class="usa-search usa-search--small margin-y-1" role="search" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get">
+          <label class="usa-sr-only" for="search-field">Search</label>
+             <input name="utf8" type="hidden" value="&#x2713;">
+             <input type="hidden" name="affiliate" id="affiliate" value="challenge.gov">
+
+          <input
+            class="usa-input"
+            id="search-field"
+            type="search"
+            name="query"
+            style="width: 170px"
+            aria-label="Search Challenge.gov"
+          />
+          <button class="usa-button" type="submit">
+              <img src="<%= Routes.static_path(Web.Endpoint, "/images/search.svg") %>" class="usa-search__submit-icon" alt="Search">
+          </button>
+        </form>
+      </section>
+      <%= case current_user(@conn) do %>
+        <% nil -> %>
+          <a style="width: 6rem;" class="usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-fulls" href="https://portal.challenge.gov/sign-in/new"><span style="color:#005ea2;">Login</span></a>
+          <a style="width: 10rem;" class="usa-button font-body-3xs usa-button margin-y-1 text-no-wrap desktop:margin-left-1 width-full" href="https://secure.login.gov/sign_up/enter_email?request_id=6ab5f3e4-a3e5-4cb7-90a3-3a777fee8967"><span style="color: #ffffff;">Create Account</span></a>
+
+        <% u -> %>
+
+         <%= link("Log out", to: Routes.session_path(@conn, :delete),method: :delete,  class: "usa-button font-body-3xs usa-button--outline margin-y-1 text-no-wrap desktop:margin-left-1 width-full") %>
+
+      <% end %>
+    </section>
+
+  </div>
+</header>
diff --git a/lib/web/templates/layout/_header.html.eex b/lib/web/templates/layout/_header.html.eex
index a212a209e..bf9583fd1 100644
--- a/lib/web/templates/layout/_header.html.eex
+++ b/lib/web/templates/layout/_header.html.eex
@@ -1,20 +1,12 @@
-<nav class="header navbar navbar-expand-lg navbar-light">
-  <a href="https://www.challenge.gov/" class="navbar-brand">
-    <img src='<%= Routes.static_path(@conn, "/images/challenge-logo.svg") %>' alt="Challenge Gov Logo" title="Challenge Gov" class="header__challenge-logo">
-  </a>
-
-
-
-  <div class="display-flex float-right padding-1" id="navbarSupportedContent">
+<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+<nav class="header navbar navbar-expand-lg navbar-light" style="display:flex">
 
+  <div class="display-flex float-right padding-1" style="width:100%; display:block" id="navbarSupportedContent">
 
   <%= if Mix.env() == :dev do %>
-    <%= button("Dev Accounts", to: Routes.dev_accounts_page_path(@conn, :dev_accounts), method: :get, class: "usa-button") %>
+    <%= button("Dev Accounts", to: Routes.dev_accounts_page_path(@conn, :dev_accounts), method: :get, class: "usa-button float-right") %>
   <% end %>
 
-    <div>
-      <%= link("My account", to: Routes.session_path(@conn, :new), class: "usa-button usa-button--outline") %>
-    </div>
 
   </div>
 </nav>
diff --git a/lib/web/templates/layout/app.html.eex b/lib/web/templates/layout/app.html.eex
index 3f0da2c55..5f5729cae 100644
--- a/lib/web/templates/layout/app.html.eex
+++ b/lib/web/templates/layout/app.html.eex
@@ -6,29 +6,7 @@
       <%= case current_user(@conn) do %>
       <% nil -> %>
       <% u -> %>
-      <header class="usa-header usa-header--basic height-8 bg-primary-dark ">
-        <div class="usa-nav">
-          <nav class="usa-nav">
-
-            <section class="padding-top-2 padding-right-2">
-               <ul class="navbar-nav">
-                  <li class="nav-item dropdown">
-                    <a class="nav-link text-bold text-white text-no-underline"  href="#" aria-expanded="true">
-                      <span><%= u.email %></span>
-                    </a>
-                    <div class="dropdown-content padding-2 float-right" style="min-width:280px">
-                      <%= link to: Routes.session_path(@conn, :delete), method: :delete, class: "dropdown-item_" do %>
-                      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-                        <use xlink:href="/assets/img/sprite.svg#logout"></use>
-                      </svg> Logout
-                      <% end %>
-                    </div>
-                  </li>
-                </ul>
-            </section>
-          </nav>
-        </div>
-      </header>
+      <!-- placeholder util nav-->
       <% end %>
 
       <div class="grid-row grid-gap">
diff --git a/lib/web/templates/layout/root.html.eex b/lib/web/templates/layout/root.html.eex
index e34cb9cae..348450306 100644
--- a/lib/web/templates/layout/root.html.eex
+++ b/lib/web/templates/layout/root.html.eex
@@ -29,6 +29,8 @@
   </head>
 
   <body class="dhold-transition dsidebar-collapse dsidebar-mini height-full">
+
+    <%= render("_govheader.html", assigns) %>
     <div class="wrapper">
         <%= @inner_content %>
     </div>