From e0d2d740677ae08e7ae35d35d68a7b40bfe905d4 Mon Sep 17 00:00:00 2001
From: Jonathan Bobel <jonathan.bobel@gsa.gov>
Date: Thu, 8 Jun 2023 13:12:00 -0400
Subject: [PATCH] Update dashboard and template flow (#514)

* Updated header and footer
* Moved files around and updated gulpfile to correct the build process when it goes to production
* Updated fonts
* Adjusted grid templating
* Adding images to assets
* Updated account pages, dashboard, and pages in message sending flow
* Updated the styling for the landing pages in the account section once logged in
---
 app/assets/javascripts/fileUpload.js          |  5 +-
 app/assets/javascripts/main.js                |  2 +-
 app/assets/javascripts/templateFolderForm.js  | 12 +--
 .../uswds/_uswds-theme-custom-styles.scss     | 73 ++++++++++++++++++-
 .../stylesheets/components/file-upload.scss   | 16 +---
 app/main/forms.py                             |  3 +-
 app/navigation.py                             |  4 +-
 app/templates/components/banner.html          |  6 +-
 app/templates/components/big-number.html      |  2 +-
 app/templates/components/folder-path.html     |  2 +-
 app/templates/components/list-entry.html      |  2 +-
 app/templates/components/page-footer.html     |  8 +-
 app/templates/components/pill.html            |  4 +-
 app/templates/components/show-more.html       |  2 +-
 app/templates/components/table.html           |  2 +-
 app/templates/components/textbox.html         | 14 ++--
 .../uk_components/back-link/template.njk      |  2 +-
 .../uk_components/button/template.njk         |  2 +-
 .../uk_components/error-message/template.njk  |  2 +-
 .../uk_components/fieldset/template.njk       |  2 +-
 .../uk_components/header/template.njk         |  4 +-
 .../uk_components/hint/template.njk           |  4 +-
 .../uk_components/input/template.njk          |  4 +-
 .../uk_components/label/template.njk          |  2 +-
 app/templates/main_nav.html                   | 34 ++++-----
 app/templates/org_template.html               |  2 +-
 app/templates/partials/jobs/status.html       |  4 +-
 .../templates/content-count-message.html      |  2 +-
 .../templates/guidance-character-count.html   |  8 +-
 .../partials/templates/guidance-links.html    |  4 +-
 .../templates/guidance-optional-content.html  |  8 +-
 .../templates/guidance-personalisation.html   |  2 +-
 app/templates/service_navigation.html         |  6 +-
 app/templates/views/choose-account.html       |  2 +-
 app/templates/views/dashboard/_totals.html    |  8 +-
 app/templates/views/dashboard/_usage.html     |  6 +-
 app/templates/views/dashboard/dashboard.html  |  8 +-
 app/templates/views/edit-sms-template.html    | 13 +++-
 app/templates/views/features.html             |  2 +-
 app/templates/views/manage-users.html         |  4 +-
 app/templates/views/notifications.html        | 45 ++++++------
 .../views/platform-admin/_base_template.html  |  6 +-
 app/templates/views/send.html                 |  6 +-
 app/templates/views/service-settings.html     |  6 +-
 app/templates/views/signedout.html            | 35 +++++----
 app/templates/views/signin.html               |  4 +-
 app/templates/views/templates/_template.html  | 19 ++---
 .../views/templates/_template_list.html       |  4 +-
 app/templates/views/templates/choose.html     | 11 ++-
 app/templates/views/templates/template.html   | 32 +++-----
 app/templates/views/two-factor-sms.html       |  2 +-
 app/templates/views/usage.html                |  9 ++-
 app/templates/withnav_template.html           | 16 ++--
 app/templates/withoutnav_template.html        |  2 +-
 gulpfile.js                                   |  1 +
 tests/app/main/test_permissions.py            |  4 +-
 .../views/accounts/test_choose_accounts.py    |  2 +-
 .../test_organisation_invites.py              |  2 +-
 .../views/organisations/test_organisations.py | 20 ++---
 .../test_email_branding_requests.py           | 11 +--
 .../service_settings/test_service_settings.py | 28 +++----
 tests/app/main/views/test_add_service.py      |  6 +-
 tests/app/main/views/test_api_integration.py  | 12 +--
 .../app/main/views/test_code_not_received.py  |  4 +-
 tests/app/main/views/test_dashboard.py        |  4 +-
 tests/app/main/views/test_email_branding.py   |  4 +-
 tests/app/main/views/test_feedback.py         | 10 +--
 tests/app/main/views/test_find_services.py    |  2 +-
 tests/app/main/views/test_find_users.py       |  2 +-
 tests/app/main/views/test_index.py            |  9 +--
 tests/app/main/views/test_manage_users.py     |  8 +-
 tests/app/main/views/test_notifications.py    |  2 +-
 tests/app/main/views/test_platform_admin.py   |  4 +-
 tests/app/main/views/test_providers.py        |  8 +-
 tests/app/main/views/test_register.py         |  6 +-
 tests/app/main/views/test_send.py             | 28 +++----
 tests/app/main/views/test_sign_in.py          |  2 +-
 tests/app/main/views/test_templates.py        | 28 +++----
 tests/app/main/views/test_tour.py             | 16 ++--
 tests/app/main/views/test_two_factor.py       |  2 +-
 tests/app/main/views/test_user_profile.py     |  6 +-
 tests/app/main/views/test_verify.py           |  4 +-
 tests/app/test_navigation.py                  | 21 +++---
 tests/javascripts/errorBanner.test.js         |  4 +-
 .../stick-to-window-when-scrolling.test.js    |  2 +-
 tests/javascripts/support/helpers/html.js     |  4 +-
 tests/javascripts/templateFolderForm.test.js  |  8 +-
 87 files changed, 409 insertions(+), 354 deletions(-)

diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js
index fe20c1a79..d12e554ed 100644
--- a/app/assets/javascripts/fileUpload.js
+++ b/app/assets/javascripts/fileUpload.js
@@ -6,7 +6,7 @@
     this.submit = () => this.$form.trigger('submit');
 
     this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
-      <a href="" class='govuk-button govuk-button--warning govuk-!-margin-right-1'>Cancel upload</a>
+      <a href="" class='usa-button usa-button--secondary'>Cancel upload</a>
     `);
 
     this.start = function(component) {
@@ -15,7 +15,8 @@
 
       // The label gets styled like a button and is used to hide the native file upload control. This is so that
       // users see a button that looks like the others on the site.
-      this.$form.find('label.file-upload-button').addClass('govuk-button govuk-!-margin-right-1');
+// 
+      this.$form.find('label.file-upload-button').addClass('usa-button');
 
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index fb7869922..dadda8596 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -17,7 +17,7 @@ showHideContent.init();
 
 $(() => GOVUK.modules.start());
 
-$(() => $('.error-message, .govuk-error-message').eq(0).parent('label').next('input').trigger('focus'));
+$(() => $('.error-message, .usa-error-message').eq(0).parent('label').next('input').trigger('focus'));
 
 $(() => $('.banner-dangerous').eq(0).trigger('focus'));
 
diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 943d136d0..dfef5a144 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -82,7 +82,7 @@
         this.render();
       }
 
-      this.$form.on('click', 'button.govuk-button--secondary', (event) => this.actionButtonClicked(event));
+      this.$form.on('click', 'button.usa-button', (event) => this.actionButtonClicked(event));
       this.$form.on('change', 'input[type=checkbox]', () => this.templateFolderCheckboxChanged());
     };
 
@@ -149,7 +149,7 @@
     this.makeButton = (text, opts) => {
       let $btn = $('<a href=""></a>')
                     .html(text)
-                    .addClass('govuk-link govuk-link--no-visited-state js-cancel')
+                    .addClass('usa-link font-body-sm margin-left-1 js-cancel')
                     // isn't set if cancelSelector is undefined
                     .data('target', opts.cancelSelector || undefined)
                     .attr('tabindex', '0')
@@ -299,10 +299,10 @@
     this.nothingSelectedButtons = $(`
       <div id="nothing_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="add-new-template" aria-expanded="false">
+          <button class="usa-button" value="add-new-template" aria-expanded="false">
             New template
           </button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="add-new-folder" aria-expanded="false">New folder</button>
+          <button class="usa-button" value="add-new-folder" aria-expanded="false">New folder</button>
           <div class="template-list-selected-counter">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.default}
@@ -315,10 +315,10 @@
     this.itemsSelectedButtons = $(`
       <div id="items_selected">
         <div class="js-stick-at-bottom-when-scrolling">
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" value="move-to-existing-folder" aria-expanded="false">
+          <button class="usa-button" value="move-to-existing-folder" aria-expanded="false">
             Move<span class="govuk-visually-hidden"> selection to folder</span>
           </button>
-          <button class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
+          <button class="usa-button" value="move-to-new-folder" aria-expanded="false">Add to new folder</button>
           <div class="template-list-selected-counter" aria-hidden="true">
             <span class="template-list-selected-counter__count" aria-hidden="true">
               ${this.selectionStatus.selected(1)}
diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
index 825741762..d41001bb3 100644
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -57,9 +57,80 @@ h1 {
 p,
 .list li {
    font-family: family("sans");
-   font-size: size("body", 7);
+   font-size: size("body", 6);
 }
 
 .large-number {
    font-size: size("body", 16);
 }
+
+.big-number-with-status .big-number,
+.big-number-with-status .big-number-smaller {
+   @include u-bg("primary");
+}
+
+.big-number-with-status .big-number-status,
+.big-number-with-status .big-number-status-failing {
+   @include u-bg("green-cool-40v");
+}
+
+.show-more-no-border:focus,
+.show-more:focus {
+   box-shadow: none;
+}
+
+.govuk-checkboxes__label::after {
+   top: 13px;
+   left: 9px;
+   width: 22px;
+   height: 11px;
+}
+
+.govuk-checkboxes__input:focus + .govuk-checkboxes__label::before,
+.multiple-choice [type="radio"]:focus + label::before {
+   box-shadow: 0 0 0 3px color("blue-40v");
+}
+
+.usa-dark-background .pill-item__container {
+   color: #fff;
+}
+
+.pill-separate-item:link,
+.pill-separate-item:visited {
+   text-decoration: none;
+   background: initial;
+}
+
+.template-footer .usa-link,
+.template-content-count,
+.table-empty-message,
+td.table-empty-message {
+   font-size: size("body", "sm");
+}
+
+.textbox-highlight-background,
+.textbox-highlight-foreground,
+.textbox-highlight-mask,
+.textbox-highlight-textbox {
+   font-size: units(2);
+   line-height: 1.2;
+   padding: units(1);
+   font-family: family("sans");
+}
+
+.govuk-inset-text {
+   border-color: color("blue-40v");
+}
+
+.usa-dark-background .pill-item__label {
+   color: white;
+   text-decoration: none !important;
+}
+
+.pill-item.usa-link {
+   text-decoration: none !important;
+}
+
+.sub-content .banner-dangerous h1 {
+   margin-top: 0;
+}
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index 981183826..fd3a580ea 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -1,9 +1,6 @@
 .js-enabled {
-
   .file-upload {
-
     &-label {
-
       @include bold-19;
       display: block;
       margin: 0 0 10px 0;
@@ -11,7 +8,6 @@
       .error-message {
         padding: 0;
       }
-
     }
 
     &-field {
@@ -22,11 +18,10 @@
       position: absolute;
       z-index: -1;
 
-      &:focus + .file-upload-button {
-        background: $govuk-focus-colour;
-        color: $govuk-focus-text-colour;
-      }
-
+      // &:focus + .file-upload-button {
+      //   background: $govuk-focus-colour;
+      //   color: $govuk-focus-text-colour;
+      // }
     }
 
     &-filename {
@@ -46,9 +41,6 @@
       a {
         font-weight: bold;
       }
-
     }
-
   }
-
 }
diff --git a/app/main/forms.py b/app/main/forms.py
index f8e1ffb5a..3b8f3718e 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -238,9 +238,8 @@ def govuk_text_input_field_widget(self, field, type=None, param_extensions=None,
             error_message_format: field.errors[0]
         }
 
-    # convert to parameters that govuk understands
+    # convert to parameters that usa understands
     params = {
-        "classes": "govuk-!-width-two-thirds",
         "errorMessage": error_message,
         "id": field.id,
         "label": {"text": field.label.text},
diff --git a/app/navigation.py b/app/navigation.py
index ea1712938..a22171f0c 100644
--- a/app/navigation.py
+++ b/app/navigation.py
@@ -6,7 +6,7 @@ from flask import request
 class Navigation:
 
     mapping = {}
-    selected_class = "selected"
+    selected_class = "usa-current"
 
     def __init__(self):
         self.mapping = {
@@ -25,7 +25,7 @@ class Navigation:
 
     def is_selected(self, navigation_item):
         if request.endpoint in self.mapping[navigation_item]:
-            return " " + self.selected_class
+            return self.selected_class
         return ''
 
     @staticmethod
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index 764adbd48..846a9a3e1 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -13,11 +13,11 @@
     {% endif %}
   >
     {% if subhead -%}
-      <h1 class="banner-title">{{ subhead }}</h1>
+      <h1 class="banner-title font-body-lg">{{ subhead }}</h1>
     {%- endif -%}
     {{ body }}
     {% if context %}
-    <p class="govuk-body">
+    <p class="usa-body">
       {{ context }}
     </p>
     {% endif %}
@@ -28,7 +28,7 @@
           "text": "" if thing else delete_button,
           "html": delete_button + "<span class=\"govuk-visually-hidden\"> ‘" + thing + "’</span>" if thing else "",
           "name": "delete",
-          "classes": "govuk-button--warning govuk-!-margin-top-2",
+          "classes": "margin-top-2 usa-button--secondary",
         }) }}
       {% endcall %}
     {% endif %}
diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html
index 50790b474..1f91a04f1 100644
--- a/app/templates/components/big-number.html
+++ b/app/templates/components/big-number.html
@@ -1,6 +1,6 @@
 {% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
   {% if link %}
-    <a class="govuk-link govuk-link--no-visited-state big-number-link" href="{{ link }}">
+    <a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1" href="{{ link }}">
   {% endif %}
       <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
         <span class="big-number-number">
diff --git a/app/templates/components/folder-path.html b/app/templates/components/folder-path.html
index 606b8bffc..0afd664d2 100644
--- a/app/templates/components/folder-path.html
+++ b/app/templates/components/folder-path.html
@@ -6,7 +6,7 @@
   link_current_item=False,
   root_element='h1'
 ) %}
-  <{{ root_element }} class="heading-medium folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
+  <{{ root_element }} class="font-body-lg folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
     {% for folder in folders %}
       {% if loop.last and not link_current_item %}
         {% if folder.template_type or not folder.id %}
diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html
index fff49fee9..c08f854c0 100644
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -23,7 +23,7 @@
       })
     %}
     {% if hint %}
-      <div id="{{ field.name }}-hint" class="govuk-hint">
+      <div id="{{ field.name }}-hint" class="usa-hint">
         {{ hint }}
       </div>
     {% endif %}
diff --git a/app/templates/components/page-footer.html b/app/templates/components/page-footer.html
index 6c13b698c..b873614cf 100644
--- a/app/templates/components/page-footer.html
+++ b/app/templates/components/page-footer.html
@@ -12,11 +12,11 @@
   delete_link_text="delete",
   centered_button=False
 ) %}
-  <div class="page-footer">
+  <div class="page-footer margin-top-4">
     {% if button_text %}
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
-      {% set button_data = {"text": button_text, "classes": "page-footer__button"} %}
+      {% set button_data = {"text": button_text} %}
       {% if destructive %}{% set _ = button_data.update({"classes": "govuk-button--warning page-footer__button"}) %}{% endif %}
       {% if centered_button %}{% set _ = button_data.update({"classes": "page-footer__button--centred"}) %}{% endif %}
       {% if button_name %}{% set _ = button_data.update({"name": button_name}) %}{% endif %}
@@ -36,7 +36,9 @@
       </span>
     {% endif %}
     {% if secondary_link and secondary_link_text %}
-      <a class="govuk-link govuk-link--no-visited-state page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    <div class="margin-top-4">
+      <a class="usa-link font-body-sm" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    </div>
     {% endif %}
   </div>
 {% endmacro %}
diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
index a07d0e8e0..c4db0804c 100644
--- a/app/templates/components/pill.html
+++ b/app/templates/components/pill.html
@@ -11,9 +11,9 @@
       {% for label, option, link, count in items %}
         <li class="pill-item__container">
         {% if current_value == option %}
-          <a id="pill-selected-item" class="pill-item pill-item--selected govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
+          <a id="pill-selected-item" class="pill-item pill-item--selected usa-link {% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
         {% else %}
-          <a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
+          <a class="pill-item usa-dark-background usa-link usa-link--alt bg-primary" href="{{ link }}">
         {% endif %}
           {% if show_count %}
             {{ big_number(count, **big_number_args) }}
diff --git a/app/templates/components/show-more.html b/app/templates/components/show-more.html
index d5c98a815..710d2c647 100644
--- a/app/templates/components/show-more.html
+++ b/app/templates/components/show-more.html
@@ -1,6 +1,6 @@
 {% macro show_more(url, label, with_border=True) %}
   <a
     href="{{ url }}"
-    class="govuk-link govuk-link--no-visited-state show-more{% if not with_border %}-no-border{% endif %}"
+    class="usa-link show-more{% if not with_border %}-no-border{% endif %}"
   ><span>{{ label }}</span></a>
 {% endmacro %}
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index 6a9b20033..3e3e70a3b 100644
--- a/app/templates/components/table.html
+++ b/app/templates/components/table.html
@@ -1,5 +1,5 @@
 {% macro mapping_table(caption='', field_headings=[], field_headings_visible=True, caption_visible=True, equal_length=False) -%}
-  <table class="table table-font-xsmall">
+  <table class="table usa-table usa-table--borderless table-font-xsmall">
     <caption class="heading-medium table-heading{{ ' govuk-visually-hidden' if not caption_visible}}">
       {{ caption }}
     </caption>
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 785d5ef48..6fe9ef644 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -19,27 +19,27 @@
     class="form-group{% if field.errors %} form-group-error{% endif %} {{ extra_form_group_classes }}"
     data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
   >
-    <label class="form-label" for="{{ field.name }}">
+    <label class="usa-label" for="{{ field.name }}">
       {% if label %}
         {{ label }}
       {% else %}
         {{ field.label.text }}
       {% endif %}
-      {% if hint %}
-        <span class="form-hint">
-          {{ hint }}
-        </span>
-      {% endif %}
       {% if field.errors %}
         <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
           {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %}
         </span>
       {% endif %}
     </label>
+    {% if hint %}
+      <div class="usa-hint">
+        {{ hint }}
+      </div>
+    {% endif %}
     {%
       if highlight_placeholders or autosize
     %}
-      {% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
+      {% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
     {% else %}
       {% set field_class = 'form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else '') %}
     {% endif %}
diff --git a/app/templates/components/uk_components/back-link/template.njk b/app/templates/components/uk_components/back-link/template.njk
index 59c979369..1b75b3e15 100644
--- a/app/templates/components/uk_components/back-link/template.njk
+++ b/app/templates/components/uk_components/back-link/template.njk
@@ -1,2 +1,2 @@
-<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="govuk-back-link{%- if params.classes %} {{ params.classes }}{% endif -%}"
+<a href="{%- if params.href %}{{ params.href }}{% else %}#{% endif -%}" class="usa-link usa-back-link display-flex margin-top-5{%- if params.classes %} {{ params.classes }}{% endif -%}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ (params.html | safe if params.html else (params.text if params.text else 'Back')) }}</a>
diff --git a/app/templates/components/uk_components/button/template.njk b/app/templates/components/uk_components/button/template.njk
index 393112675..c7bf273d1 100644
--- a/app/templates/components/uk_components/button/template.njk
+++ b/app/templates/components/uk_components/button/template.njk
@@ -12,7 +12,7 @@
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="govuk-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="usa-button{% if params.classes %} {{ params.classes }}{% endif %}{% if params.disabled %} govuk-button--disabled{% endif %}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 
diff --git a/app/templates/components/uk_components/error-message/template.njk b/app/templates/components/uk_components/error-message/template.njk
index be452167f..668b787f4 100644
--- a/app/templates/components/uk_components/error-message/template.njk
+++ b/app/templates/components/uk_components/error-message/template.njk
@@ -1,6 +1,6 @@
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
 </span>
diff --git a/app/templates/components/uk_components/fieldset/template.njk b/app/templates/components/uk_components/fieldset/template.njk
index cb0a68344..e41fce012 100644
--- a/app/templates/components/uk_components/fieldset/template.njk
+++ b/app/templates/components/uk_components/fieldset/template.njk
@@ -1,4 +1,4 @@
-<fieldset class="govuk-fieldset
+<fieldset class="govuk-fieldset margin-bottom-5
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- if params.describedBy %} aria-describedby="{{ params.describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
diff --git a/app/templates/components/uk_components/header/template.njk b/app/templates/components/uk_components/header/template.njk
index 319fa3e7e..6464705b1 100644
--- a/app/templates/components/uk_components/header/template.njk
+++ b/app/templates/components/uk_components/header/template.njk
@@ -100,11 +100,11 @@
             </li>
             {% endif %}
           {% endfor %}
-          <li class="usa-nav__secondary-item">
+          <!-- <li class="usa-nav__secondary-item">
             <a href="javascript:void(0)">
               Sign in
             </a>
-          </li>
+          </li> -->
         </ul>
         <!-- <section aria-label="Search component">
           <form class="usa-search usa-search--small margin-bottom-2" role="search">
diff --git a/app/templates/components/uk_components/hint/template.njk b/app/templates/components/uk_components/hint/template.njk
index 58350dca0..d7f3196fc 100644
--- a/app/templates/components/uk_components/hint/template.njk
+++ b/app/templates/components/uk_components/hint/template.njk
@@ -1,4 +1,4 @@
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="usa-hint {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
-</span>
+</div>
diff --git a/app/templates/components/uk_components/input/template.njk b/app/templates/components/uk_components/input/template.njk
index 95cbd9aa8..b4d8ce555 100644
--- a/app/templates/components/uk_components/input/template.njk
+++ b/app/templates/components/uk_components/input/template.njk
@@ -5,7 +5,7 @@
 {#- a record of other elements that we need to associate with the input using
    aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
-<div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+<div class="usa-form-group {%- if params.errorMessage %} usa-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
@@ -37,7 +37,7 @@
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | indent(2) | trim }}
 {% endif %}
-  <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+  <input class="usa-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} usa-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
diff --git a/app/templates/components/uk_components/label/template.njk b/app/templates/components/uk_components/label/template.njk
index b740e2b3d..71d261681 100644
--- a/app/templates/components/uk_components/label/template.njk
+++ b/app/templates/components/uk_components/label/template.njk
@@ -1,6 +1,6 @@
 {% if params.html or params.text %}
 {% set labelHtml %}
-<label class="govuk-label{%- if params.classes %} {{ params.classes }}{% endif %}"
+<label class="usa-label{%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   {%- if params.for %} for="{{ params.for }}"{% endif %}>
   {{ params.html | safe if params.html else params.text }}
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
index 133f93861..732331941 100644
--- a/app/templates/main_nav.html
+++ b/app/templates/main_nav.html
@@ -1,40 +1,36 @@
 {% if help %}
   {% include 'partials/tour.html' %}
 {% else %}
-<nav class="navigation">
-  <ul>
+<nav class="nav margin-y-5">
+  <ul class="usa-sidenav">
   {% if current_user.has_permissions() %}
     {% if current_user.has_permissions('view_activity') %}
-      <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('dashboard') }}" href="{{ url_for('.service_dashboard', service_id=current_service.id) }}">Dashboard</a></li>
     {% endif %}
-    <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('templates') }}" href="{{ url_for('.choose_template', service_id=current_service.id) }}">Send messages</a></li>
     {% if not current_user.has_permissions('view_activity') %}
-      <li><a class="govuk-link govuk-link--no-visited-state{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
+      <li class="usa-sidenav__item"><a class="{{ casework_navigation.is_selected('sent-messages') }}" href="{{ url_for('.view_notifications', service_id=current_service.id, status='sending,delivered,failed') }}">Sent messages</a></li>
     {% endif %}
-    <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
     {% if current_user.has_permissions('manage_service', allow_org_user=True) %}
-      <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
     {% endif %}
     {% if current_user.has_permissions('manage_api_keys', 'manage_service') %}
-      <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('settings') }}" href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
+      <li class="usa-sidenav__item"><a class="{{ main_navigation.is_selected('settings') }}" href="{{ url_for('.service_settings', service_id=current_service.id) }}">Settings</a></li>
     {% endif %}
     {% if current_user.has_permissions('manage_api_keys') %}
       <!-- <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('api-integration') }}" href="{{ url_for('.api_integration', service_id=current_service.id) }}">API integration</a></li> -->
     {% endif %}
   {% elif current_user.has_permissions(allow_org_user=True) %}
-    <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
-    <li><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
+    <li class="usa-sidenav__item"><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('usage') }}" href="{{ url_for('.usage', service_id=current_service.id) }}">Usage</a></li>
+    <li class="usa-sidenav__item"><a class="govuk-link govuk-link--no-visited-state{{ main_navigation.is_selected('team-members') }}" href="{{ url_for('.manage_users', service_id=current_service.id) }}">Team members</a></li>
   {% endif %}
   </ul>
-</nav><br>
+</nav>
     <div>
-        <p class="govuk-body">Messages Left / Daily Limit</p>
-        <ul>
-            <li>{{ daily_remaining_messages }} / {{ current_service.message_limit }}</li>
-        </ul><br>
-        <p class="govuk-body">Messages Left Across Services</p>
-        <ul>
-            <li>{{ daily_global_messages_remaining }}</li>
-        </ul>
+        <p class="usa-body bold margin-bottom-1">Messages Left / Daily Limit</p>
+        <p>{{ daily_remaining_messages }} / {{ current_service.message_limit }}</p>
+        <p class="usa--body bold margin-bottom-1">Messages Left Across Services</p>
+        <p>{{ daily_global_messages_remaining }}</p>
     </div>
 {% endif %}
diff --git a/app/templates/org_template.html b/app/templates/org_template.html
index 29b3d782d..d37a563c4 100644
--- a/app/templates/org_template.html
+++ b/app/templates/org_template.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block main %}
-  <div class="govuk-width-container">
+  <div class="grid-container">
     <div class="navigation-service">
       {% if current_user.platform_admin %}
         <a href="{{ url_for('.organisations') }}" class="govuk-link govuk-link--no-visited-state navigation-organisation-link">Organizations</a>
diff --git a/app/templates/partials/jobs/status.html b/app/templates/partials/jobs/status.html
index 8bc9401a5..ce0245a6d 100644
--- a/app/templates/partials/jobs/status.html
+++ b/app/templates/partials/jobs/status.html
@@ -11,10 +11,10 @@
     {% endif %}
   </p>
   {% if job.status == 'sending limits exceeded'%}
-    <p class="govuk-error-message">
+    <p class="usa-error-message">
         Notify cannot send these messages because you have reached a limit. You can only send {{ current_service.message_limit|format_thousands }} messages per day and {{ 250000|format_thousands }} messages in total.
     </p>
-    <p class="govuk-error-message govuk-!-margin-bottom-6">
+    <p class="usa-error-message govuk-!-margin-bottom-6">
         Upload this spreadsheet again tomorrow or <a class="govuk-link" href="https://www.notifications.service.gov.uk/support">contact the U.S. Notify team</a> to raise the limit.
     </p>
     {% endif %}
diff --git a/app/templates/partials/templates/content-count-message.html b/app/templates/partials/templates/content-count-message.html
index 6737ff40b..eb497e935 100644
--- a/app/templates/partials/templates/content-count-message.html
+++ b/app/templates/partials/templates/content-count-message.html
@@ -1,3 +1,3 @@
-<span {% if error %}class="govuk-error-message"{% endif %}>
+<span {% if error %}class="usa-error-message"{% endif %}>
   {{ message }}
 </span>
diff --git a/app/templates/partials/templates/guidance-character-count.html b/app/templates/partials/templates/guidance-character-count.html
index 9b734184a..d99cc087a 100644
--- a/app/templates/partials/templates/guidance-character-count.html
+++ b/app/templates/partials/templates/guidance-character-count.html
@@ -1,8 +1,8 @@
-<h2 class="heading-medium">Message length</h2>
-<p class="govuk-body">
+<h2 class="font-body-lg">Message length</h2>
+<p class="usa-body">
   If your message is long then it will
   cost more.
 </p>
-<p class="govuk-body">
-  See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.pricing') }}">pricing</a> for details.
+<p class="usa-body">
+  See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
 </p>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 730254c24..58ff7b6bf 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -1,9 +1,9 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">Links and URLs</h2>
+<h2 class="font-body-lg">Links and URLs</h2>
 <p class="bottom-gutter-1-3">
   Always use full URLs, starting with https://. For example:
 {{ govukInsetText({
   "text": "Apply now at https://www.usa.gov/example",
-  "classes": "govuk-!-margin-top-0"})
+  "classes": "usa-body"})
 }}
diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html
index c491b1eda..b0713f115 100644
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/app/templates/partials/templates/guidance-optional-content.html
@@ -1,9 +1,9 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">
+<h2 class="font-body-lg">
   Optional content
 </h2>
-<p class="govuk-body">
+<p class="usa-body">
   Use double brackets and ‘??’ to define optional content.
 </p>
 <p class="bottom-gutter-1-3">
@@ -13,9 +13,9 @@
 {{ govukInsetText({
   "text": "((under18??Please get your application signed by a parent or
   guardian.))",
-  "classes": "govuk-!-margin-top-0 govuk-!-margin-bottom-3"})
+  "classes": "usa-body"})
 }}
-<p class="govuk-body">
+<p class="usa-body">
   For each person you send this message to, specify ‘yes’ or ‘no’ to
   show or hide this content.
 </p>
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
index 8505d7219..c1f506f8b 100644
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ b/app/templates/partials/templates/guidance-personalisation.html
@@ -1,6 +1,6 @@
 {% from "components/uk_components/inset-text/macro.njk" import govukInsetText %}
 
-<h2 class="heading-medium">
+<h2 class="font-body-lg">
   Personalization
 </h2>
 <p class="bottom-gutter-1-3">
diff --git a/app/templates/service_navigation.html b/app/templates/service_navigation.html
index 3271603f6..5caa1d4c6 100644
--- a/app/templates/service_navigation.html
+++ b/app/templates/service_navigation.html
@@ -1,5 +1,5 @@
 {% macro navigation_service_name(service) %}
-  <div class="navigation-service-name govuk-!-font-weight-bold">
+  <div class="navigation-service-name font-body-2xl bold">
     {{ service.name }}
     {% if not service.active %}
       <span class="navigation-service-type navigation-service-type--suspended">Suspended</span>
@@ -7,7 +7,7 @@
   </div>
 {% endmacro %}
 
-<div class="navigation-service">
+<div class="navigation-service margin-top-2 display-flex flex-align-end flex-justify">
   {% if current_service.organisation_id %}
     {% if current_user.platform_admin or
       (current_user.belongs_to_organisation(current_service.organisation_id) and current_service.live) %}
@@ -15,5 +15,5 @@
     {% endif %}
   {% endif %}
   {{ navigation_service_name(current_service) }}
-  <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
+  <a href="{{ url_for('main.choose_account') }}" class="usa-link margin-bottom-2">Switch service</a>
 </div>
diff --git a/app/templates/views/choose-account.html b/app/templates/views/choose-account.html
index 97932c819..4a9d7d2d7 100644
--- a/app/templates/views/choose-account.html
+++ b/app/templates/views/choose-account.html
@@ -112,7 +112,7 @@
         "element": "a",
         "text": "Add a new service",
         "href": url_for('.add_service'),
-        "classes": "govuk-button--secondary"
+        "classes": ""
       }) }}
       {% if current_user.has_access_to_live_and_trial_mode_services %}
           </div>
diff --git a/app/templates/views/dashboard/_totals.html b/app/templates/views/dashboard/_totals.html
index 162f3cff9..6ea69e13f 100644
--- a/app/templates/views/dashboard/_totals.html
+++ b/app/templates/views/dashboard/_totals.html
@@ -1,8 +1,8 @@
 {% from "components/big-number.html" import big_number_with_status %}
 
 <div class="ajax-block-container">
-  <div class="govuk-grid-row">
-    <div id="total-sms" class="govuk-grid-column-one-half">
+  <div class="grid-row grid-gap">
+    <div id="total-sms" class="grid-col-6">
       {{ big_number_with_status(
         statistics['sms']['requested'],
         statistics['sms']['requested']|message_count_label('sms', suffix='sent'),
@@ -14,9 +14,9 @@
         smaller=True,
         ) }}
       </div>
-      <div id="total-email" class="govuk-grid-column-one-half">
+      <div id="total-email" class="grid-col-6">
         <span class="big-number-with-status pilot-disabled">
-          <a class="govuk-link govuk-link--no-visited-state big-number-link">
+          <a class="usa-link govuk-link--no-visited-state display-block margin-bottom-1">
             <span class="big-number-smaller">
               <span class="big-number-number">0</span>
               <span class="big-number-label">emails sent</span>
diff --git a/app/templates/views/dashboard/_usage.html b/app/templates/views/dashboard/_usage.html
index 35600dbe0..61dc279d7 100644
--- a/app/templates/views/dashboard/_usage.html
+++ b/app/templates/views/dashboard/_usage.html
@@ -1,7 +1,7 @@
 {% from "components/big-number.html" import big_number %}
 
-<div class='govuk-grid-row ajax-block-container'>
-  <div class='govuk-grid-column-one-half'>
+<div class='grid-row grid-gap ajax-block-container'>
+  <div class='grid-col-6'>
     <div class="keyline-block">
       {% if sms_cost %}
         {{ big_number(
@@ -15,7 +15,7 @@
       {% endif %}
     </div>
   </div>
-  <div class='govuk-grid-column-one-half pilot-disabled'>
+  <div class='grid-col-6 pilot-disabled'>
     <div class="keyline-block">
       {{ big_number("0", 'email disabled during SMS pilot', smaller=True) }}
     </div>
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index 34fbf028e..89f0bfd54 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -10,16 +10,16 @@
 
 {% block maincolumn_content %}
 
-  <div class="dashboard">
+  <div class="dashboard margin-bottom-8">
 
-    <h1 class="govuk-visually-hidden">Dashboard</h1>
+    <h1 class="usa-sr-only">Dashboard</h1>
     {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
       {% include 'views/dashboard/write-first-messages.html' %}
     {% endif %}
 
     {{ ajax_block(partials, updates_url, 'upcoming') }}
 
-    <h2 class="font-body-lg">
+    <h2 class="font-body-lg margin-top-0">
       In the last seven days
     </h2>
 
@@ -30,7 +30,7 @@
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
 
     {% if current_user.has_permissions('manage_service') %}
-      <h2 class='heading-medium'>This year</h2>
+      <h2 class='font-body-lg'>This year</h2>
       {{ ajax_block(partials, updates_url, 'usage') }}
       {{ show_more(
         url_for(".usage", service_id=current_service['id']),
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index a8fe46393..1a591b60d 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -18,9 +18,14 @@
 {% block maincolumn_content %}
 
     {{ page_header('{} text message template'.format(heading_action)) }}
-    <p>
-      Don't worry, saving the template will not send ⛔
-    </p>
+
+    <div class="usa-alert usa-alert--info usa-alert--slim">
+      <div class="usa-alert__body">
+        <p class="usa-alert__text">
+          Don't worry, saving the template will not send        
+        </p>
+      </div>
+    </div>
 
     {% if current_service.prefix_sms %}
       {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
@@ -53,7 +58,7 @@
             </div>
           </div>
           {{ page_footer('Save') }}
-          <p class="form-hint">
+          <p class="usa-hint">
             After saving, you'll have the option to send 🚀
           </p>
         </div>
diff --git a/app/templates/views/features.html b/app/templates/views/features.html
index 73759a769..c0ecdf6cc 100644
--- a/app/templates/views/features.html
+++ b/app/templates/views/features.html
@@ -9,7 +9,7 @@
 
 {% block content_column_content %}
 
-<h1 class="heading-large">Features</h1>
+<h1 class="font-body-2xl">Features</h1>
 <p class="govuk-body">If you work for the government, you can use U.S. Notify to keep your users updated.</p>
 <p class="govuk-body">Notify makes it easy to create, customize, and send <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('main.features_sms') }}">text messages</a>.</p>
 <!-- <ul class="list list-bullet">
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index a61cb7b88..831e63a4f 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -9,7 +9,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-medium">
+  <h1 class="font-body-lg">
     Team members
   </h1>
 
@@ -89,7 +89,7 @@
         "element": "a",
         "text": "Invite a team member",
         "href": url_for('.invite_user', service_id=current_service.id),
-        "classes": "govuk-button--secondary"
+        "classes": "usa-button"
       }) }}
     </div>
   {% endif %}
diff --git a/app/templates/views/notifications.html b/app/templates/views/notifications.html
index 4321a24d5..a34b886f0 100644
--- a/app/templates/views/notifications.html
+++ b/app/templates/views/notifications.html
@@ -27,28 +27,27 @@
 
   {% call form_wrapper(
     action=url_for('.view_notifications', service_id=current_service.id, message_type=message_type),
-    class="govuk-grid-row"
+    class="usa-search margin-bottom-2"
   ) %}
-    <div class="govuk-grid-column-three-quarters {% if message_type == 'sms' %}extra-tracking{% endif %}">
-      {{ search_form.to(param_extensions={
-            "label": {
-              "text": things_you_can_search_by|formatted_list(
-                conjunction='or',
-                before_each='',
-                after_each='',
-                prefix='Search by',
-                prefix_plural='Search by'
-              )
-            }
-      }) }}
-    </div>
-    <div class="govuk-grid-column-one-quarter">
-      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
-      {{ govukButton({
-        "text": "Search",
-        "classes": "search-form__button"
-      }) }}
-    </div>
+      <div class="grid-col-4 {% if message_type == 'sms' %}extra-tracking{% endif %}">
+        {{ search_form.to(param_extensions={
+        "label": {
+        "text": things_you_can_search_by|formatted_list(
+        conjunction='or',
+        before_each='',
+        after_each='',
+        prefix='Search by',
+        prefix_plural='Search by'
+        )
+        }
+        }) }}
+      </div>
+    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
+    <button class="usa-button" type="submit">
+      <span class="usa-search__submit-text">Search </span><img src="/assets/img/usa-icons-bg/search--white.svg"
+        class="usa-search__submit-icon" alt="Search" />
+    </button> 
+  
   {% endcall %}
 
   {% call form_wrapper(id="search-form") %}
@@ -57,8 +56,8 @@
   {% endcall %}
 
   {% if current_user.has_permissions('view_activity') %}
-    <p class="bottom-gutter">
-      <a href="{{ download_link }}" download="download" class="govuk-link govuk-link--no-visited-state govuk-!-font-weight-bold">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
+    <p class="font-body-sm">
+      <a href="{{ download_link }}" download="download" class="usa-link">Download this report (<abbr title="Comma separated values">CSV</abbr>)</a>
       &emsp;
       Data available for {{ partials.service_data_retention_days }} days
     </p>
diff --git a/app/templates/views/platform-admin/_base_template.html b/app/templates/views/platform-admin/_base_template.html
index 04edbabcd..90e0b9bed 100644
--- a/app/templates/views/platform-admin/_base_template.html
+++ b/app/templates/views/platform-admin/_base_template.html
@@ -9,8 +9,8 @@
       </div>
       <a href="{{ url_for('main.choose_account') }}" class="govuk-link govuk-link--no-visited-state navigation-service-switch">Switch service</a>
     </div>
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
+    <div class="grid-row">
+      <div class="tablet:grid-col-2">
         <nav class="navigation">
             {% for link_text, url in [
             ('Summary', url_for('main.platform_admin')),
@@ -34,7 +34,7 @@
           {% endfor %}
         </nav>
       </div>
-      <div class="govuk-grid-column-three-quarters">
+      <div class="grid-col-10 tablet:grid-col-10">
       {% block backLink %}{% endblock %}
         <main class="govuk-main-wrapper column-main govuk-!-padding-top-0 govuk-!-padding-bottom-0" id="main-content" role="main">
           {% block content %}
diff --git a/app/templates/views/send.html b/app/templates/views/send.html
index ae9b2a968..1671c199c 100644
--- a/app/templates/views/send.html
+++ b/app/templates/views/send.html
@@ -50,15 +50,15 @@
     {% endcall %}
   </div>
   <p class="table-show-more-link">
-    <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)</a>
+    <a class="usa-link" href="{{ url_for('.get_example_csv', service_id=current_service.id, template_id=template.id) }}" download>Download this example (<abbr title="Comma separated values">CSV</abbr>)</a>
   </p>
 
   <h2 class="font-body-lg">Your file will populate this template ({{ template.name }})</h2>
   {{ template|string }}
 
     <div>
-        <h2 class="heading-medium">Messages Remaining Today / Daily Message Limit</h2>
-        <p class="govuk-body"> {{ daily_remaining_messages }} / {{ current_service.message_limit }}</p>
+        <h2 class="font-body-lg">Messages Remaining Today / Daily Message Limit</h2>
+        <p class="usa-body"> {{ daily_remaining_messages }} / {{ current_service.message_limit }}</p>
     </div>
 
 {% endblock %}
diff --git a/app/templates/views/service-settings.html b/app/templates/views/service-settings.html
index 490b84745..6de9fd348 100644
--- a/app/templates/views/service-settings.html
+++ b/app/templates/views/service-settings.html
@@ -8,7 +8,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-medium">Settings</h1>
+    <h1 class="font-body-lg">Settings</h1>
 
     <div class="bottom-gutter-3-2 settings-table body-copy-table">
 
@@ -192,7 +192,7 @@
     </div>
 
     {% if current_service.trial_mode %}
-      <h2 class="heading-medium top-gutter-0">Your service is in trial mode</h2>
+      <h2 class="font-body-lg top-gutter-0">Your service is in trial mode</h2>
 
         <p>You can only:</p>
 
@@ -350,7 +350,7 @@
     {% if current_service.active and (current_service.trial_mode or current_user.platform_admin) %}
       <p class="top-gutter-1-2">
         <span class="page-footer-link page-footer-delete-link-without-button">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.archive_service', service_id=current_service.id) }}">
+          <a class="usa-button usa-button--secondary" href="{{ url_for('.archive_service', service_id=current_service.id) }}">
             Delete this service
           </a>
         </span>
diff --git a/app/templates/views/signedout.html b/app/templates/views/signedout.html
index 289698895..48abfd809 100644
--- a/app/templates/views/signedout.html
+++ b/app/templates/views/signedout.html
@@ -2,11 +2,12 @@
 {% from "components/uk_components/button/macro.njk" import govukButton %}
 
 {% block meta %}
-  <meta name="description" content="U.S. Notify lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
+<meta name="description"
+  content="U.S. Notify lets you send text messages to your users. Try it now if you work in federal, state, or local government.">
 {% endblock %}
 
 {% block pageTitle %}
-  U.S. Notify
+U.S. Notify
 {% endblock %}
 
 {% block content %}
@@ -16,7 +17,8 @@
     <div class="grid-row grid-gap display-flex flex-align-center">
       <div class="tablet:grid-col-7">
         <h1 class="font-serif-2xl usa-hero__heading">Send text messages to your users</h1>
-        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.</p>
+        <p class="font-sans-lg margin-bottom-5">Try U.S. Notify now if you work in federal, state, or local government.
+        </p>
         <div class="usa-button-group">
           <a class="usa-button usa-button--big" href="{{ url_for('main.register' )}}">Create an account</a>
           or <a class="usa__link margin-x-1" href="{{ url_for('.sign_in' )}}">sign in</a> if you’ve used
@@ -26,7 +28,7 @@
       <div class="tablet:grid-col-4 grid-offset-1">
         <img src="{{ asset_url('images/product/proposition-illustration.png') }}"
           alt="An illustration of notifications to a phone, a laptop, and a letter.">
-      </div>  
+      </div>
     </div>
   </div>
 </section>
@@ -60,9 +62,9 @@
 </section>
 <section class="grid-container usa-section border-top border-base-lighter">
   <div class="grid-row grid-gap">
-      <h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
-        Send messages manually or automatically
-      </h2>
+    <h2 class="font-heading-xl margin-top-0 margin-bottom-3 bold">
+      Send messages manually or automatically
+    </h2>
   </div>
   <div class="grid-row grid-gap">
     <div class="tablet:grid-col-6 usa-prose">
@@ -80,27 +82,28 @@
     </div>
   </div>
 </section>
-<section id="whos-using-notify" class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
+<section id="whos-using-notify"
+  class="grid-container usa-section border-top border-base-lighter padding-top-4 padding-bottom-5">
   <div class="grid-row grid-gap flex-column">
-    <h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 bold">
+    <h2 class="font-heading-xl display-flex flex-justify-center margin-top-0 margin-bottom-3 bold">
       Who’s using U.S. Notify
     </h2>
-    <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
+    <!-- <p class="display-flex flex-justify-center font-body-sm margin-bottom-3">
       See the
       <a class="usa-link margin-left-05" href="{{ url_for('main.performance') }}">list of services and
         organizations</a>.
-    </p>
+    </p> -->
   </div>
   <div class="grid-row">
     <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
       <span class="usa-sr-only">There are</span>
       <div class="large-number">{{ counts.organisations|format_thousands }}</div>
-      <p class="font-body-lg">Organizations</p>
+      <p class="font-body-lg margin-bottom-0">Organizations</p>
     </div>
     <div class="tablet:grid-col-6 display-flex flex-justify-center flex-align-center flex-column">
       <span class="usa-sr-only">and</span>
       <div class="large-number">{{ counts.services|format_thousands }}</div>
-      <p class="font-body-lg">Services</p>
+      <p class="font-body-lg margin-bottom-0">Services</p>
       <span class="usa-sr-only">using Notify.</span>
     </div>
   </div>
@@ -120,9 +123,9 @@
   </p>
 </section>
 
-  <!-- <div class="product-page-intro"></div> -->
+<!-- <div class="product-page-intro"></div> -->
 
-    <!-- <div class="product-page-intro-wrapper" data-module="homepage">
+<!-- <div class="product-page-intro-wrapper" data-module="homepage">
       <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
 
       </nav>
@@ -281,4 +284,4 @@
   </div>-->
 
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/views/signin.html b/app/templates/views/signin.html
index 8725a1a7d..de2790da1 100644
--- a/app/templates/views/signin.html
+++ b/app/templates/views/signin.html
@@ -12,8 +12,8 @@
 
 {% block maincolumn_content %}
 
-<div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
+<div class="grid-row">
+  <div class="tablet:grid-col-12">
 
     {% if again %}
       <h1 class="font-body-2xl margin-bottom-3">You need to sign in again</h1>
diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html
index f9dcafead..7336f033e 100644
--- a/app/templates/views/templates/_template.html
+++ b/app/templates/views/templates/_template.html
@@ -1,10 +1,9 @@
 {% from "components/banner.html" import banner_wrapper %}
 
-<div class="govuk-grid-column-full template-container">
+<div class="grid-col-12 template-container">
   {{ template|string }}
 </div>
-<br>
-<div class="govuk-grid-column-full">
+<div class="grid-col-12">
   {% if template._template.archived %}
     <p class="hint">
       This template was deleted {{ template._template.updated_at|format_datetime_relative }}.
@@ -16,26 +15,20 @@
       or edit this template, contact your manager.
     </p>
   {% else %}
-    <div class="bottom-gutter-2-3">
-      <div class="govuk-grid-row">
+    <div class="grid-row margin-bottom-5">
+      <div class="usa-button-group">
         {% if current_user.has_permissions('send_messages', restrict_admin_usage=True) %}
-          <div class="govuk-grid-column-one-half">
-            <a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
+            <a href="{{ url_for(".set_sender", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-pill-separate-item">
               Prepare to send<span class="govuk-visually-hidden"> a message using this template</span>
             </a>
-          </div>
         {% endif %}
         {% if current_user.has_permissions('manage_templates') %}
-          <div class="govuk-grid-column-one-half">
-            <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="govuk-link govuk-link--no-visited-state pill-separate-item">
+            <a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}" class="usa-button usa-button--outline usa-pill-separate-item">
               Edit
             </a>
-          </div>
         {% endif %}
       </div>
     </div>
   {% endif %}
 </div>
-<br>
-<br>
 
diff --git a/app/templates/views/templates/_template_list.html b/app/templates/views/templates/_template_list.html
index 3fcc49c1b..bd2ee47fd 100644
--- a/app/templates/views/templates/_template_list.html
+++ b/app/templates/views/templates/_template_list.html
@@ -41,7 +41,7 @@
             <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
           </a>
         {% else %}
-          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-template">
+          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="usa-link font-body-lg usa-template-list-template">
             <span class="live-search-relevant">
               {%- if current_service.api_keys -%}
                 <span class="govuk-!-display-none">{{ item.id }} </span>
@@ -70,7 +70,7 @@
       {% set checkbox_config = {
         "html": label_content,
         "label": {
-          "classes": "template-list-item-label",
+          "classes": "template-list-item-label margin-top-05",
         },
         "id": "templates-or-folder-" ~ item.id,
         "classes": "template-list-item template-list-item-with-checkbox {}".format(
diff --git a/app/templates/views/templates/choose.html b/app/templates/views/templates/choose.html
index 5681d2277..57d1207ac 100644
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -34,10 +34,13 @@
 
     <div class="govuk-grid-row">
       <div class="{% if current_user.has_permissions('manage_templates') %} govuk-grid-column-five-sixths {% else %} govuk-grid-column-full {% endif %}">
-        <p>
-          <br>
-          🚨 Every message starts with a template. To send, choose or create a template.
-        </p>
+        <div class="usa-alert usa-alert--info usa-alert--slim margin-y-5">
+          <div class="usa-alert__body">
+            <p class="usa-alert__text">
+              Every message starts with a template. To send, choose or create a template.
+            </p>
+          </div>
+        </div>
         {{ folder_path(
           folders=template_folder_path,
           service_id=current_service.id,
diff --git a/app/templates/views/templates/template.html b/app/templates/views/templates/template.html
index 5a9415306..d97dde886 100644
--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -12,6 +12,7 @@
 {% block maincolumn_content %}
 
   {% if show_redaction_message %}
+
     <div class="bottom-gutter">
       {% call banner_wrapper(type='dangerous', subhead='Are you sure you want to hide personalization after sending?') %}
         <ul class="list list-bullet">
@@ -24,14 +25,14 @@
         </ul>
         <form method='post'>
           <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-          {{ govukButton({ "text": "Confirm", "classes": "govuk-button--warning govuk-!-margin-top-2" }) }}
+          {{ govukButton({ "text": "Confirm", "classes": "usa-button--secondary margin-top-2" }) }}
         </form>
       {% endcall %}
     </div>
   {% else %}
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        <h1 class="heading-large folder-heading">
+    <div class="grid-row">
+      <div class="grid-col-12">
+        <h1 class="font-body-lg folder-heading">
           Review your message
         </h1>
         {{ folder_path(
@@ -44,36 +45,25 @@
     </div>
   {% endif %}
 
-  <div class="govuk-grid-row">
+  <div class="grid-row">
     {% include 'views/templates/_template.html' %}
   </div>
-  <div class="bottom-gutter-1-2">
+  <div class="template-footer">
     {% if template._template.updated_at %}
-      <h2 class="heading-small bottom-gutter-2-3 heading-inline">
+      <h2 class="font-body-lg">
         Last edited
         <time class="timeago" datetime="{{ template._template.updated_at }}">
           {{ template._template.updated_at|format_delta }}
         </time>
       </h2>
-
-      &emsp;
-      <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous versions</a>
-      &emsp;
-      <br/>
+      <a class="usa-link margin-right-3" href="{{ url_for('.view_template_versions', service_id=current_service.id, template_id=template.id) }}">See previous versions</a>
     {% endif %}
     {% if current_user.has_permissions('manage_templates') and user_has_template_permission %}
       {% if not template._template.archived %}
-        <br/>
-        <br/>
-        <span class="page-footer-link page-footer-delete-link-without-button bottom-gutter-2-3">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this template</a>
-        </span>
-        &emsp;
+          <a class="usa-link margin-right-3" href="{{ url_for('.delete_service_template', service_id=current_service.id, template_id=template.id) }}">Delete this template</a>
       {% endif %}
       {% if not template._template.redact_personalisation %}
-        <span class="page-footer-link page-footer-delete-link-without-button">
-          <a class="govuk-link govuk-link--destructive" href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">Hide personalization after sending</a>
-        </span>
+          <a class="usa-link" href="{{ url_for('.confirm_redact_template', service_id=current_service.id, template_id=template.id) }}">Hide personalization after sending</a>
       {% else %}
         <p class="hint">Personalization is hidden after sending</p>
       {% endif %}
diff --git a/app/templates/views/two-factor-sms.html b/app/templates/views/two-factor-sms.html
index bec384de4..2b04a42e6 100644
--- a/app/templates/views/two-factor-sms.html
+++ b/app/templates/views/two-factor-sms.html
@@ -16,7 +16,7 @@
 
     {% call form_wrapper(class="extra-tracking") %}
       {{ form.sms_code(param_extensions={
-          "classes": "govuk-input govuk-input--width-5",
+          "classes": "width-card",
           "attributes": {"data-module": "autofocus"}
       }) }}
       {{ page_footer(
diff --git a/app/templates/views/usage.html b/app/templates/views/usage.html
index 4574c75e3..b759ceae2 100644
--- a/app/templates/views/usage.html
+++ b/app/templates/views/usage.html
@@ -1,6 +1,5 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
-{% from "components/page-header.html" import page_header %}
 {% from "components/pill.html" import pill %}
 
 {% extends "withnav_template.html" %}
@@ -11,7 +10,9 @@
 
 {% block maincolumn_content %}
 
-    {{ page_header('Usage', size='medium') }}
+    <h1 class="font-body-lg">
+      Usage
+    </h1>
 
     <div class="bottom-gutter">
       {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
@@ -66,7 +67,7 @@
       </div> -->
 
       {% if months %}
-        <div class="dashboard-table usage-table body-copy-table">
+        <div class="dashboard-table usage-table body-copy-table margin-top-4">
           {% call(item, row_index) list_table(
             months,
             caption="Total spend",
@@ -134,7 +135,7 @@
       <div class="govuk-grid-column-two-thirds">
         <p class="align-with-heading-copy">
           What counts as 1 text message?<br />
-          See <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.pricing') }}">pricing</a>.
+          See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a>.
         </p>
       </div>
     </div>
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
index dd920094c..e22be1617 100644
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -1,31 +1,29 @@
 {% extends "admin_template.html" %}
 
-{% set mainClasses = "govuk-!-padding-top-0 govuk-!-padding-bottom-0" %}
-
 {% block per_page_title %}
   {% block service_page_title %}{% endblock %} – {{ current_service.name }}
 {% endblock %}
 
 {% block main %}
-  <div class="govuk-width-container">
+  <div class="grid-container">
     {% include "service_navigation.html" %}
-    <div class="govuk-grid-row govuk-!-padding-bottom-12">
+    <div class="grid-row">
       {% if help %}
-        <div class="govuk-grid-column-one-third">
+        <div class="grid-col-3">
       {% else %}
-        <div class="govuk-grid-column-one-quarter">
+        <div class="grid-col-3">
       {% endif %}
           {% include "main_nav.html" %}
         </div>
       {% if help %}
-        <div class="govuk-grid-column-two-thirds">
+        <div class="grid-col-8">
       {% else %}
-        <div class="govuk-grid-column-three-quarters">
+        <div class="grid-col-9 padding-left-4 sub-content">
       {% endif %}
         {% block beforeContent %}
           {% block backLink %}{% endblock %}
         {% endblock %}
-        <main class="govuk-main-wrapper column-main {{ mainClasses }}" id="main-content" role="main">
+        <main id="main-content" role="main">
         {% block content %}
           {% include 'flash_messages.html' %}
           {% block maincolumn_content %}{% endblock %}
diff --git a/app/templates/withoutnav_template.html b/app/templates/withoutnav_template.html
index 9bebb0f76..95b9d5c15 100644
--- a/app/templates/withoutnav_template.html
+++ b/app/templates/withoutnav_template.html
@@ -5,7 +5,7 @@
 {% block beforeContent %}
     {% if current_service and current_service.active and current_user.is_authenticated and current_user.belongs_to_service(current_service.id) %}
     <div class="navigation-service">
-      <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="govuk-link govuk-link--no-visited-state navigation-service-back-to">Back to {{ current_service.name }}</a>
+      <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="usa-link govuk-link--no-visited-state navigation-service-back-to">Back to {{ current_service.name }}</a>
     </div>
     {% endif %}
     {% block backLink %}{% endblock %}
diff --git a/gulpfile.js b/gulpfile.js
index d46778119..862b88486 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -291,5 +291,6 @@ uswds.paths.dist.theme = './app/assets/sass/uswds';
 */
 exports.init = uswds.init;
 exports.compile = uswds.compile;
+exports.copyAll = uswds.copyAll;
 exports.watch = uswds.watch;
 exports.copyAssets = uswds.copyAssets;
\ No newline at end of file
diff --git a/tests/app/main/test_permissions.py b/tests/app/main/test_permissions.py
index 31e0cda68..93fbebe0e 100644
--- a/tests/app/main/test_permissions.py
+++ b/tests/app/main/test_permissions.py
@@ -115,7 +115,7 @@ def test_service_navigation_for_org_user(
         service_id=SERVICE_ONE_ID,
     )
     assert [
-        item.text.strip() for item in page.select('nav.navigation a')
+        item.text.strip() for item in page.select('nav.nav a')
     ] == [
         'Usage',
         'Team members',
@@ -179,7 +179,7 @@ def test_service_user_without_manage_service_permission_can_see_usage_page_when_
         service_id=SERVICE_ONE_ID,
     )
     assert tuple(
-        item.text.strip() for item in page.select('nav.navigation a')
+        item.text.strip() for item in page.select('nav.nav a')
     ) == expected_menu_items
 
     client_request.get(
diff --git a/tests/app/main/views/accounts/test_choose_accounts.py b/tests/app/main/views/accounts/test_choose_accounts.py
index bc937f72f..2e7afbb9b 100644
--- a/tests/app/main/views/accounts/test_choose_accounts.py
+++ b/tests/app/main/views/accounts/test_choose_accounts.py
@@ -340,7 +340,7 @@ def test_should_show_back_to_service_if_user_belongs_to_service(
     )
 
     assert normalize_spaces(
-        page.select_one('header + .govuk-width-container').text
+        page.select_one('header + .grid-container').text
     ).startswith(
         normalize_spaces(expected_page_text)
     )
diff --git a/tests/app/main/views/organisations/test_organisation_invites.py b/tests/app/main/views/organisations/test_organisation_invites.py
index 97cf75f52..78f088f21 100644
--- a/tests/app/main/views/organisations/test_organisation_invites.py
+++ b/tests/app/main/views/organisations/test_organisation_invites.py
@@ -57,7 +57,7 @@ def test_invite_org_user_errors_when_same_email_as_inviter(
     )
 
     assert mock_invite_org_user.called is False
-    assert 'You cannot send an invitation to yourself' in normalize_spaces(page.select_one('.govuk-error-message').text)
+    assert 'You cannot send an invitation to yourself' in normalize_spaces(page.select_one('.usa-error-message').text)
 
 
 def test_cancel_invited_org_user_cancels_user_invitations(
diff --git a/tests/app/main/views/organisations/test_organisations.py b/tests/app/main/views/organisations/test_organisations.py
index 2bb0eca14..bd2c86609 100644
--- a/tests/app/main/views/organisations/test_organisations.py
+++ b/tests/app/main/views/organisations/test_organisations.py
@@ -160,7 +160,7 @@ def test_create_new_organisation_validates(
     )
     assert [
         (error['data-error-label'], normalize_spaces(error.text))
-        for error in page.select('.govuk-error-message')
+        for error in page.select('.usa-error-message')
     ] == [
         ('name', 'Error: Cannot be empty'),
         ('organisation_type', 'Error: Select the type of organization'),
@@ -194,7 +194,7 @@ def test_create_new_organisation_fails_with_incorrect_input(
         _expected_status=200,
     )
     assert mock_create_organisation.called is False
-    assert error_message in page.select_one('.govuk-error-message').text
+    assert error_message in page.select_one('.usa-error-message').text
 
 
 def test_create_new_organisation_fails_with_duplicate_name(
@@ -224,7 +224,7 @@ def test_create_new_organisation_fails_with_duplicate_name(
     )
 
     error_message = 'This organization name is already in use'
-    assert error_message in page.select_one('.govuk-error-message').text
+    assert error_message in page.select_one('.usa-error-message').text
 
 
 @pytest.mark.parametrize('organisation_type, organisation, expected_status', (
@@ -337,7 +337,7 @@ def test_validation_of_gps_creating_organisations(
         _data=data,
         _expected_status=200,
     )
-    assert expected_error in page.select_one('.govuk-error-message, .error-message').text
+    assert expected_error in page.select_one('.usa-error-message, .error-message').text
 
 
 @freeze_time("2020-02-20 20:20")
@@ -739,7 +739,7 @@ def test_manage_org_users_should_show_live_search_if_more_than_7_users(
     )
     assert len(page.select('.user-list-item')) == number_of_users
 
-    textbox = page.select_one('[data-module=autofocus] .govuk-input')
+    textbox = page.select_one('[data-module=autofocus] .usa-input')
     assert 'value' not in textbox
     assert textbox['name'] == 'search'
     # data-module=autofocus is set on a containing element so it
@@ -747,7 +747,7 @@ def test_manage_org_users_should_show_live_search_if_more_than_7_users(
     assert 'data-module' not in textbox
     assert not page.select_one('[data-force-focus]')
     assert textbox['class'] == [
-        'govuk-input', 'govuk-!-width-full',
+        'usa-input', 'govuk-!-width-full',
     ]
     assert normalize_spaces(
         page.select_one('label[for=search]').text
@@ -1209,7 +1209,7 @@ def test_update_organisation_with_incorrect_input(
         _data={'name': name},
         _expected_status=200,
     )
-    assert error_message in page.select_one('.govuk-error-message').text
+    assert error_message in page.select_one('.usa-error-message').text
 
 
 def test_update_organisation_with_non_unique_name(
@@ -1237,7 +1237,7 @@ def test_update_organisation_with_non_unique_name(
         _expected_status=200,
     )
 
-    assert 'This organization name is already in use' in page.select_one('.govuk-error-message').text
+    assert 'This organization name is already in use' in page.select_one('.usa-error-message').text
 
 
 def test_get_edit_organisation_go_live_notes_page(
@@ -1311,7 +1311,7 @@ def test_view_edit_organisation_notes(
         org_id=organisation_one['id'],
     )
     assert page.select_one('h1').text == "Edit organization notes"
-    assert page.find('label', class_="form-label").text.strip() == "Notes"
+    assert page.find('label', class_="usa-label").text.strip() == "Notes"
     assert page.find('textarea').attrs["name"] == "notes"
 
 
@@ -1406,7 +1406,7 @@ def test_view_edit_organisation_billing_details(
         org_id=organisation_one['id'],
     )
     assert page.select_one('h1').text == "Edit organization billing details"
-    labels = page.find_all('label', class_="form-label")
+    labels = page.find_all('label', class_="usa-label")
     labels_list = [
         'Contact email addresses',
         'Contact names',
diff --git a/tests/app/main/views/service_settings/test_email_branding_requests.py b/tests/app/main/views/service_settings/test_email_branding_requests.py
index 305337e66..5e20236cb 100644
--- a/tests/app/main/views/service_settings/test_email_branding_requests.py
+++ b/tests/app/main/views/service_settings/test_email_branding_requests.py
@@ -78,8 +78,9 @@ def test_email_branding_request_page_back_link(
         '.email_branding_request', service_id=SERVICE_ONE_ID
     )
 
-    back_link = page.select('a[class=govuk-back-link]')
-    assert back_link[0].attrs['href'] == url_for('.service_settings', service_id=SERVICE_ONE_ID)
+    back_link = page.select_one('a.usa-back-link')
+    assert len(back_link) > 0, "No back link found on the page"
+    assert back_link['href'] == url_for('.service_settings', service_id=SERVICE_ONE_ID)
 
 
 @pytest.mark.parametrize('data, org_type, endpoint', (
@@ -227,7 +228,7 @@ def test_email_branding_something_else_page(client_request, service_one):
     assert normalize_spaces(page.h1.text) == 'Describe the branding you want'
     assert page.select_one('textarea')['name'] == ('something_else')
     assert normalize_spaces(page.select_one('.page-footer button').text) == 'Request new branding'
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         'main.email_branding_request', service_id=SERVICE_ONE_ID,
     )
 
@@ -241,7 +242,7 @@ def test_get_email_branding_something_else_page_is_only_option(client_request, s
         'main.email_branding_something_else',
         service_id=SERVICE_ONE_ID,
     )
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         'main.service_settings', service_id=SERVICE_ONE_ID,
     )
 
@@ -478,4 +479,4 @@ def test_email_branding_something_else_submit_shows_error_if_textbox_is_empty(
         _follow_redirects=True,
     )
     assert normalize_spaces(page.h1.text) == 'Describe the branding you want'
-    assert normalize_spaces(page.select_one('.govuk-error-message').text) == 'Error: Cannot be empty'
+    assert normalize_spaces(page.select_one('.usa-error-message').text) == 'Error: Cannot be empty'
diff --git a/tests/app/main/views/service_settings/test_service_settings.py b/tests/app/main/views/service_settings/test_service_settings.py
index 76c727a1e..21c602717 100644
--- a/tests/app/main/views/service_settings/test_service_settings.py
+++ b/tests/app/main/views/service_settings/test_service_settings.py
@@ -332,7 +332,7 @@ def test_service_name_change_fails_if_new_name_fails_validation(
         _expected_status=200,
     )
     assert not mock_update_service.called
-    assert error_message in page.find("span", {"class": "govuk-error-message"}).text
+    assert error_message in page.find("span", {"class": "usa-error-message"}).text
 
 
 @pytest.mark.parametrize('user, expected_text, expected_link', [
@@ -1846,7 +1846,7 @@ def test_incorrect_reply_to_email_address_input(
         _expected_status=200
     )
 
-    assert expected_error in normalize_spaces(page.select_one('.govuk-error-message').text)
+    assert expected_error in normalize_spaces(page.select_one('.usa-error-message').text)
 
 
 @pytest.mark.parametrize('sms_sender_input, expected_error', [
@@ -1872,7 +1872,7 @@ def test_incorrect_sms_sender_input(
         _expected_status=(200 if expected_error else 302)
     )
 
-    error_message = page.select_one('.govuk-error-message')
+    error_message = page.select_one('.usa-error-message')
     count_of_api_calls = len(mock_add_sms_sender.call_args_list)
 
     if not expected_error:
@@ -1897,7 +1897,7 @@ def test_incorrect_sms_sender_input_with_multiple_errors_only_shows_the_first(
         _expected_status=200
     )
 
-    error_message = page.select_one('.govuk-error-message')
+    error_message = page.select_one('.usa-error-message')
     count_of_api_calls = len(mock_add_sms_sender.call_args_list)
 
     assert normalize_spaces(error_message.text) == 'Error: Enter 3 characters or more'
@@ -2268,8 +2268,8 @@ def test_shows_delete_link_for_get_request_for_edit_email_reply_to_address(
         reply_to_email_id=sample_uuid(),
     )
 
-    assert page.select_one('.govuk-back-link').text.strip() == 'Back'
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link').text.strip() == 'Back'
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         '.service_email_reply_to',
         service_id=SERVICE_ONE_ID,
     )
@@ -2327,12 +2327,12 @@ def test_shows_delete_link_for_error_on_post_request_for_edit_email_reply_to_add
         _expected_status=200
     )
 
-    assert page.select_one('.govuk-back-link').text.strip() == 'Back'
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link').text.strip() == 'Back'
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         '.service_email_reply_to',
         service_id=SERVICE_ONE_ID,
     )
-    assert page.select_one('.govuk-error-message').text.strip() == 'Error: Enter a valid email address'
+    assert page.select_one('.usa-error-message').text.strip() == 'Error: Enter a valid email address'
     assert page.select_one('input#email_address').get('value') == 'not a valid email address'
 
     if default_choice_and_delete_link_expected:
@@ -2516,7 +2516,7 @@ def test_shows_delete_link_for_sms_sender(
     )
 
     link = page.select_one('.page-footer a')
-    back_link = page.select_one('.govuk-back-link')
+    back_link = page.select_one('.usa-back-link')
 
     assert back_link.text.strip() == 'Back'
     assert back_link['href'] == url_for(
@@ -2573,7 +2573,7 @@ def test_inbound_sms_sender_is_not_deleteable(
         sms_sender_id=fake_uuid,
     )
 
-    back_link = page.select_one('.govuk-back-link')
+    back_link = page.select_one('.usa-back-link')
     footer_link = page.select_one('.page-footer a')
     assert normalize_spaces(back_link.text) == 'Back'
 
@@ -3658,7 +3658,7 @@ def test_send_files_by_email_contact_details_does_not_update_invalid_contact_det
         _follow_redirects=True
     )
 
-    assert error in page.find('span', class_='govuk-error-message').text
+    assert error in page.find('span', class_='usa-error-message').text
     assert normalize_spaces(page.h1.text) == "Send files by email"
 
 
@@ -4003,7 +4003,7 @@ def test_update_service_data_retention_return_validation_error_for_negative_days
         _data={'days_of_retention': -5},
         _expected_status=200,
     )
-    assert 'Must be between 3 and 90' in page.find('span', class_='govuk-error-message').text
+    assert 'Must be between 3 and 90' in page.find('span', class_='usa-error-message').text
     assert mock_get_service_data_retention.called
     assert not mock_update_service_data_retention.called
 
@@ -4055,7 +4055,7 @@ def test_view_edit_service_notes(
         service_id=SERVICE_ONE_ID,
     )
     assert page.select_one('h1').text == "Edit service notes"
-    assert page.find('label', class_="form-label").text.strip() == "Notes"
+    assert page.find('label', class_="usa-label").text.strip() == "Notes"
     assert page.find('textarea').attrs["name"] == "notes"
 
 
diff --git a/tests/app/main/views/test_add_service.py b/tests/app/main/views/test_add_service.py
index 4b4ee0cc6..910c8e79b 100644
--- a/tests/app/main/views/test_add_service.py
+++ b/tests/app/main/views/test_add_service.py
@@ -170,7 +170,7 @@ def test_add_service_has_to_choose_org_type(
         },
         _expected_status=200,
     )
-    assert normalize_spaces(page.select_one('.govuk-error-message').text) == (
+    assert normalize_spaces(page.select_one('.usa-error-message').text) == (
         'Error: Select the type of organization'
     )
     assert mock_create_service.called is False
@@ -274,7 +274,7 @@ def test_add_service_fails_if_service_name_fails_validation(
         _data={"name": name},
         _expected_status=200,
     )
-    assert error_message in page.find("span", {"class": "govuk-error-message"}).text
+    assert error_message in page.find("span", {"class": "usa-error-message"}).text
 
 
 @freeze_time("2021-01-01")
@@ -302,7 +302,7 @@ def test_should_return_form_errors_with_duplicate_service_name_regardless_of_cas
         },
         _expected_status=200,
     )
-    assert 'This service name is already in use' in page.select_one('.govuk-error-message').text.strip()
+    assert 'This service name is already in use' in page.select_one('.usa-error-message').text.strip()
 
 
 def test_non_government_user_cannot_access_create_service_page(
diff --git a/tests/app/main/views/test_api_integration.py b/tests/app/main/views/test_api_integration.py
index 649852e92..5f63388d4 100644
--- a/tests/app/main/views/test_api_integration.py
+++ b/tests/app/main/views/test_api_integration.py
@@ -168,10 +168,10 @@ def test_should_show_create_api_key_page(
     for index, option in enumerate(expected_options):
         item = page.select('.govuk-radios__item')[index]
         if type(option) is tuple:
-            assert normalize_spaces(item.select_one('.govuk-label').text) == option[0]
-            assert normalize_spaces(item.select_one('.govuk-hint').text) == option[1]
+            assert normalize_spaces(item.select_one('.usa-label').text) == option[0]
+            assert normalize_spaces(item.select_one('.usa-hint').text) == option[1]
         else:
-            assert normalize_spaces(item.select_one('.govuk-label').text) == option
+            assert normalize_spaces(item.select_one('.usa-label').text) == option
 
 
 def test_should_create_api_key_with_type_normal(
@@ -351,7 +351,7 @@ def test_should_show_guestlist_page(
         'main.guest_list',
         service_id=SERVICE_ONE_ID,
     )
-    textboxes = page.find_all('input', {'class': 'govuk-input'})
+    textboxes = page.find_all('input', {'class': 'usa-input'})
     for index, value in enumerate(
         ['test@example.com'] + [None] * 4 + ['2028675300'] + [None] * 4
     ):
@@ -439,7 +439,7 @@ def test_callback_forms_validation(
         _data=data,
         _expected_status=200
     )
-    error_msgs = ' '.join(msg.text.strip() for msg in response.select(".govuk-error-message"))
+    error_msgs = ' '.join(msg.text.strip() for msg in response.select(".usa-error-message"))
 
     assert expected_errors in error_msgs
 
@@ -594,7 +594,7 @@ def test_back_link_directs_to_api_integration_from_delivery_callback_if_no_inbou
         _follow_redirects=True,
     )
 
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         expected_link, service_id=service_one['id']
     )
 
diff --git a/tests/app/main/views/test_code_not_received.py b/tests/app/main/views/test_code_not_received.py
index d2e4941ad..47d871f9e 100644
--- a/tests/app/main/views/test_code_not_received.py
+++ b/tests/app/main/views/test_code_not_received.py
@@ -47,7 +47,7 @@ def test_should_render_correct_resend_template_for_active_user(
     assert page.h1.string == 'Resend security code'
     # there shouldn't be a form for updating mobile number
     assert page.find('form') is None
-    assert page.find('a', class_="govuk-button")['href'] == url_for(
+    assert page.find('a', class_="usa-button")['href'] == url_for(
         'main.check_and_resend_verification_code',
         next=redirect_url
     )
@@ -207,4 +207,4 @@ def test_should_render_correct_email_not_received_template_for_active_user(
     assert page.h1.string == 'Resend email link'
     # there shouldn't be a form for updating mobile number
     assert page.find('form') is None
-    assert page.find('a', class_="govuk-button")['href'] == url_for('main.resend_email_link', next=redirect_url)
+    assert page.find('a', class_="usa-button")['href'] == url_for('main.resend_email_link', next=redirect_url)
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index 9c991a7e6..046f0fbec 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/tests/app/main/views/test_dashboard.py
@@ -746,9 +746,9 @@ def test_correct_font_size_for_big_numbers(
     )
 
     assert (
-        len(page.select_one('[data-key=totals]').select('.govuk-grid-column-one-half'))
+        len(page.select_one('[data-key=totals]').select('.grid-col-6'))
     ) == (
-        len(page.select_one('[data-key=usage]').select('.govuk-grid-column-one-half'))
+        len(page.select_one('[data-key=usage]').select('.grid-col-6'))
     ) == (
         len(page.select('.big-number-with-status .big-number-smaller'))
     ) == 2
diff --git a/tests/app/main/views/test_email_branding.py b/tests/app/main/views/test_email_branding.py
index c6257dad3..6a4b7d0e8 100644
--- a/tests/app/main/views/test_email_branding.py
+++ b/tests/app/main/views/test_email_branding.py
@@ -26,7 +26,7 @@ def test_email_branding_page_shows_full_branding_list(
         page.select_one('h1').text
     ) == "Email branding"
 
-    assert page.select('.govuk-grid-column-three-quarters a')[-1]['href'] == url_for('main.create_email_branding')
+    assert page.select('.grid-col-10 a')[-1]['href'] == url_for('main.create_email_branding')
 
     assert brand_names == [
         'org 1',
@@ -142,7 +142,7 @@ def test_create_email_branding_requires_a_name_when_submitting_logo_details(
         _expected_status=200,
     )
 
-    assert page.select_one('.govuk-error-message').text.strip() == 'Error: This field is required'
+    assert page.select_one('.usa-error-message').text.strip() == 'Error: This field is required'
     assert mock_create_email_branding.called is False
 
 
diff --git a/tests/app/main/views/test_feedback.py b/tests/app/main/views/test_feedback.py
index 49104262f..f7f22455c 100644
--- a/tests/app/main/views/test_feedback.py
+++ b/tests/app/main/views/test_feedback.py
@@ -269,7 +269,7 @@ def test_email_address_required_for_problems_and_questions(
         _data=data,
         _expected_status=200
     )
-    assert normalize_spaces(page.select_one('.govuk-error-message').text) == (
+    assert normalize_spaces(page.select_one('.usa-error-message').text) == (
         'Error: Cannot be empty'
     )
 
@@ -294,7 +294,7 @@ def test_email_address_must_be_valid_if_provided_to_support_form(
         _expected_status=200,
     )
 
-    assert normalize_spaces(page.select_one('span.govuk-error-message').text) == (
+    assert normalize_spaces(page.select_one('span.usa-error-message').text) == (
         'Error: Enter a valid email address'
     )
 
@@ -531,7 +531,7 @@ def test_back_link_from_form(
         ticket_type=PROBLEM_TICKET_TYPE,
         **extra_args
     )
-    assert page.select_one('.govuk-back-link')['href'] == expected_back_link()
+    assert page.select_one('.usa-back-link')['href'] == expected_back_link()
     assert normalize_spaces(page.select_one('h1').text) == 'Report a problem'
 
 
@@ -680,8 +680,8 @@ def test_bat_email_page(
     client_request.logout()
     page = client_request.get(bat_phone_page)
 
-    assert page.select_one('.govuk-back-link').text == 'Back'
-    assert page.select_one('.govuk-back-link')['href'] == url_for('main.support')
+    assert page.select_one('.usa-back-link').text == 'Back'
+    assert page.select_one('.usa-back-link')['href'] == url_for('main.support')
     assert page.select('main a')[1].text == 'Fill in this form'
     assert page.select('main a')[1]['href'] == url_for('main.feedback', ticket_type=PROBLEM_TICKET_TYPE, severe='no')
     next_page = client_request.get_url(page.select('main a')[1]['href'])
diff --git a/tests/app/main/views/test_find_services.py b/tests/app/main/views/test_find_services.py
index 9495dd022..0784ce8fb 100644
--- a/tests/app/main/views/test_find_services.py
+++ b/tests/app/main/views/test_find_services.py
@@ -72,7 +72,7 @@ def test_find_services_by_name_validates_against_empty_search_submission(
     document = client_request.post('main.find_services_by_name', _data={"search": ""}, _expected_status=200)
 
     expected_message = "Error: You need to enter full or partial name to search by."
-    assert document.find('span', {'class': 'govuk-error-message'}).text.strip() == expected_message
+    assert document.find('span', {'class': 'usa-error-message'}).text.strip() == expected_message
 
 
 def test_find_services_by_name_redirects_for_uuid(
diff --git a/tests/app/main/views/test_find_users.py b/tests/app/main/views/test_find_users.py
index 145b20e9d..df5fbeeed 100644
--- a/tests/app/main/views/test_find_users.py
+++ b/tests/app/main/views/test_find_users.py
@@ -86,7 +86,7 @@ def test_find_users_by_email_validates_against_empty_search_submission(
     document = client_request.post('main.find_users_by_email', _data={"search": ""}, _expected_status=200)
 
     expected_message = "Error: You need to enter full or partial email address to search by."
-    assert document.find('span', {'class': 'govuk-error-message'}).text.strip() == expected_message
+    assert document.find('span', {'class': 'usa-error-message'}).text.strip() == expected_message
 
 
 def test_user_information_page_shows_information_about_user(
diff --git a/tests/app/main/views/test_index.py b/tests/app/main/views/test_index.py
index 4ed63b1c2..2e17dfeb9 100644
--- a/tests/app/main/views/test_index.py
+++ b/tests/app/main/views/test_index.py
@@ -29,14 +29,13 @@ def test_non_logged_in_user_can_see_homepage(
     )
 
     assert normalize_spaces(page.select_one('#whos-using-notify').text) == (
-        'Who’s using U.S. Notify '
-        'See the list of services and organizations. '
+        'Who’s using U.S. Notify '  # Hiding this next area for the pilot
+        # Hiding this next area for the pilot
+        # 'See the list of services and organizations. '
         'There are 111 Organizations and 9,999 Services using Notify.'
     )
 
-    assert page.select_one('#whos-using-notify a')['href'] == url_for(
-        'main.performance'
-    )
+    assert page.select_one('#whos-using-notify a') is None
 
 
 def test_logged_in_user_redirects_to_choose_account(
diff --git a/tests/app/main/views/test_manage_users.py b/tests/app/main/views/test_manage_users.py
index df0ca1d96..940bf77c4 100644
--- a/tests/app/main/views/test_manage_users.py
+++ b/tests/app/main/views/test_manage_users.py
@@ -225,7 +225,7 @@ def test_should_show_live_search_if_more_than_7_users(
     )
     assert len(page.select('.user-list-item')) == number_of_users
 
-    textbox = page.select_one('[data-module=autofocus] .govuk-input')
+    textbox = page.select_one('[data-module=autofocus] .usa-input')
     assert 'value' not in textbox
     assert textbox['name'] == 'search'
     # data-module=autofocus is set on a containing element so it
@@ -233,7 +233,7 @@ def test_should_show_live_search_if_more_than_7_users(
     assert 'data-module' not in textbox
     assert not page.select_one('[data-force-focus]')
     assert textbox['class'] == [
-        'govuk-input', 'govuk-!-width-full',
+        'usa-input', 'govuk-!-width-full',
     ]
     assert normalize_spaces(
         page.select_one('label[for=search]').text
@@ -1288,7 +1288,7 @@ def test_user_cant_invite_themselves(
         _expected_status=200,
     )
     assert page.h1.string.strip() == 'Invite a team member'
-    form_error = page.find('span', class_='govuk-error-message').text.strip()
+    form_error = page.find('span', class_='usa-error-message').text.strip()
     assert form_error == "Error: You cannot send an invitation to yourself"
     assert not mock_create_invite.called
 
@@ -1572,7 +1572,7 @@ def test_edit_user_email_cannot_change_a_gov_email_address_to_a_non_gov_email_ad
         },
         _expected_status=200,
     )
-    assert 'Enter a public sector email address' in page.select_one('.govuk-error-message').text
+    assert 'Enter a public sector email address' in page.select_one('.usa-error-message').text
     with client_request.session_transaction() as session:
         assert 'team_member_email_change-{}'.format(active_user_with_permissions['id']) not in session
 
diff --git a/tests/app/main/views/test_notifications.py b/tests/app/main/views/test_notifications.py
index b63b1e14c..df6bd6c31 100644
--- a/tests/app/main/views/test_notifications.py
+++ b/tests/app/main/views/test_notifications.py
@@ -172,7 +172,7 @@ def test_notification_status_shows_expected_back_link(
         notification_id=fake_uuid,
         **extra_args
     )
-    back_link = page.select_one('.govuk-back-link')
+    back_link = page.select_one('.usa-back-link')
 
     if expected_back_link:
         assert back_link['href'] == expected_back_link(service_id=SERVICE_ONE_ID)
diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py
index 605ad14ce..12172a6e6 100644
--- a/tests/app/main/views/test_platform_admin.py
+++ b/tests/app/main/views/test_platform_admin.py
@@ -716,7 +716,7 @@ def test_clear_cache_requires_option(
 
     page = client_request.post('main.clear_cache', _data={}, _expected_status=200)
 
-    assert normalize_spaces(page.find('span', class_='govuk-error-message').text) == 'Error: Select at least one option'
+    assert normalize_spaces(page.find('span', class_='usa-error-message').text) == 'Error: Select at least one option'
     assert not redis.delete_by_pattern.called
 
 
@@ -808,7 +808,7 @@ def test_get_notifications_sent_by_service_validates_form(
         _data={'start_date': '', 'end_date': '20190101'}
     )
 
-    errors = page.select('.govuk-error-message')
+    errors = page.select('.usa-error-message')
     assert len(errors) == 2
 
     for error in errors:
diff --git a/tests/app/main/views/test_providers.py b/tests/app/main/views/test_providers.py
index b58117a5b..341cbec82 100644
--- a/tests/app/main/views/test_providers.py
+++ b/tests/app/main/views/test_providers.py
@@ -317,10 +317,10 @@ def test_edit_sms_provider_provider_ratio(
         '.edit_sms_provider_ratio',
     )
 
-    inputs = page.select('.govuk-input[type="text"]')
+    inputs = page.select('.usa-input[type="text"]')
     assert len(inputs) == 2
 
-    first_input = page.select_one('.govuk-input[name="sms_provider_1"]')
+    first_input = page.select_one('.usa-input[name="sms_provider_1"]')
     assert first_input.attrs['value'] == str(sms_provider_1['priority'])
 
 
@@ -343,7 +343,7 @@ def test_edit_sms_provider_provider_ratio_only_shows_active_providers(
         '.edit_sms_provider_ratio',
     )
 
-    inputs = page.select('.govuk-input[type="text"]')
+    inputs = page.select('.usa-input[type="text"]')
     assert len(inputs) == 1
 
 
@@ -436,5 +436,5 @@ def test_edit_sms_provider_submit_invalid_percentages(
         _follow_redirects=True
     )
 
-    assert expected_error in page.select_one('.govuk-error-message').text
+    assert expected_error in page.select_one('.usa-error-message').text
     mock_update_provider.assert_not_called()
diff --git a/tests/app/main/views/test_register.py b/tests/app/main/views/test_register.py
index 6f11d76b0..4d59f6867 100644
--- a/tests/app/main/views/test_register.py
+++ b/tests/app/main/views/test_register.py
@@ -122,9 +122,9 @@ def test_should_return_200_when_email_is_not_gov_uk(
     )
 
     assert 'Enter a public sector email address or find out who can use Notify' in normalize_spaces(
-        page.select_one('.govuk-error-message').text
+        page.select_one('.usa-error-message').text
     )
-    assert page.select_one('.govuk-error-message a')['href'] == url_for(
+    assert page.select_one('.usa-error-message a')['href'] == url_for(
         'main.features'
     )
 
@@ -476,7 +476,7 @@ def test_cannot_register_with_sms_auth_and_missing_mobile_number(
         _expected_status=200,
     )
 
-    err = page.select_one('.govuk-error-message')
+    err = page.select_one('.usa-error-message')
     assert err.text.strip() == 'Error: Cannot be empty'
     assert err.attrs['data-error-label'] == 'mobile_number'
 
diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py
index 3b25c42fe..ff23e617d 100644
--- a/tests/app/main/views/test_send.py
+++ b/tests/app/main/views/test_send.py
@@ -90,7 +90,7 @@ def test_default_email_sender_is_checked_and_has_hint(
     )
 
     assert page.select('.govuk-radios input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert normalize_spaces(page.select_one('.govuk-radios .usa-hint').text) == "(Default)"
     assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
@@ -107,7 +107,7 @@ def test_default_sms_sender_is_checked_and_has_hint(
     )
 
     assert page.select('.govuk-radios input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert normalize_spaces(page.select_one('.govuk-radios .usa-hint').text) == "(Default)"
     assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
@@ -124,7 +124,7 @@ def test_default_sms_sender_is_checked_and_has_hint_when_there_are_no_inbound_nu
     )
 
     assert page.select('.govuk-radios input')[0].has_attr('checked')
-    assert normalize_spaces(page.select_one('.govuk-radios .govuk-hint').text) == "(Default)"
+    assert normalize_spaces(page.select_one('.govuk-radios .usa-hint').text) == "(Default)"
     assert not page.select('.govuk-radios input')[1].has_attr('checked')
 
 
@@ -143,7 +143,7 @@ def test_default_inbound_sender_is_checked_and_has_hint_with_default_and_receive
 
     assert page.select('.govuk-radios input')[0].has_attr('checked')
     assert normalize_spaces(
-        page.select_one('.govuk-radios .govuk-hint').text) == "(Default and receives replies)"
+        page.select_one('.govuk-radios .usa-hint').text) == "(Default and receives replies)"
     assert not page.select('.govuk-radios input')[1].has_attr('checked')
     assert not page.select('.govuk-radios input')[2].has_attr('checked')
 
@@ -163,7 +163,7 @@ def test_sms_sender_has_receives_replies_hint(
 
     assert page.select('.govuk-radios input')[0].has_attr('checked')
     assert normalize_spaces(
-        page.select_one('.govuk-radios .govuk-hint').text) == "(Default and receives replies)"
+        page.select_one('.govuk-radios .usa-hint').text) == "(Default and receives replies)"
     assert not page.select('.govuk-radios input')[1].has_attr('checked')
     assert not page.select('.govuk-radios input')[2].has_attr('checked')
 
@@ -310,8 +310,8 @@ def test_should_not_allow_files_to_be_uploaded_without_the_correct_permission(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".govuk-back-link")[0]['href'] == url_for(
+    assert page.select(".usa-back-link")[0].text == "Back"
+    assert page.select(".usa-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=service_one['id'],
         template_id=template_id,
@@ -1074,8 +1074,8 @@ def test_send_one_off_does_not_send_without_the_correct_permissions(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".govuk-back-link")[0]['href'] == url_for(
+    assert page.select(".usa-back-link")[0].text == "Back"
+    assert page.select(".usa-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=service_one['id'],
         template_id=template_id,
@@ -1281,7 +1281,7 @@ def test_send_one_off_offers_link_to_upload(
         template_id=fake_uuid,
         _follow_redirects=True,
     )
-    back_link = page.select_one('.govuk-back-link')
+    back_link = page.select_one('.usa-back-link')
     link = page.select_one('form a')
 
     assert back_link.text.strip() == 'Back'
@@ -1563,7 +1563,7 @@ def test_send_one_off_step_0_back_link(
         step_index=0
     )
 
-    assert page.select('.govuk-back-link')[0]['href'] == url_for(
+    assert page.select('.usa-back-link')[0]['href'] == url_for(
         expected_back_link_endpoint,
         service_id=SERVICE_ONE_ID,
         **extra_args
@@ -1586,7 +1586,7 @@ def test_send_one_off_sms_message_back_link_with_multiple_placeholders(
         step_index=2,
     )
 
-    assert page.select_one('.govuk-back-link')['href'] == url_for(
+    assert page.select_one('.usa-back-link')['href'] == url_for(
         'main.send_one_off_step',
         service_id=SERVICE_ONE_ID,
         template_id=unchanging_fake_uuid,
@@ -2077,7 +2077,7 @@ def test_check_messages_back_link(
     )
 
     assert (
-        page.find_all('a', {'class': 'govuk-back-link'})[0]['href']
+        page.find_all('a', {'class': 'usa-back-link'})[0]['href']
     ) == expected_url(service_id=SERVICE_ONE_ID, template_id=fake_uuid)
 
 
@@ -2431,7 +2431,7 @@ def test_check_notification_shows_preview(
 
     assert page.h1.text.strip() == 'Preview of ‘Two week reminder’'
     assert (
-        page.find_all('a', {'class': 'govuk-back-link'})[0]['href']
+        page.find_all('a', {'class': 'usa-back-link'})[0]['href']
     ) == url_for(
         'main.send_one_off_step',
         service_id=service_one['id'],
diff --git a/tests/app/main/views/test_sign_in.py b/tests/app/main/views/test_sign_in.py
index 2a6f262e8..03dc771f6 100644
--- a/tests/app/main/views/test_sign_in.py
+++ b/tests/app/main/views/test_sign_in.py
@@ -35,7 +35,7 @@ def test_render_sign_in_template_with_next_link_for_password_reset(
         _optional_args=f"?next=/services/{SERVICE_ONE_ID}/templates",
         _test_page_title=False
     )
-    forgot_password_link = page.find('a', class_="govuk-link govuk-link--no-visited-state page-footer-secondary-link")
+    forgot_password_link = page.find('a', class_="usa-link")
     assert forgot_password_link.text == 'Forgot your password?'
     assert forgot_password_link['href'] == url_for('main.forgot_password', next=f'/services/{SERVICE_ONE_ID}/templates')
 
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index e2956d67f..ca2e974a4 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -253,7 +253,7 @@ def test_should_show_live_search_if_list_of_templates_taller_than_screen(
         'Search by name'
     )
 
-    assert len(page.select(search['data-targets'])) == len(page.select('#template-list .govuk-label')) == 20
+    assert len(page.select(search['data-targets'])) == len(page.select('#template-list .usa-label')) == 20
 
 
 def test_should_label_search_by_id_for_services_with_api_keys(
@@ -290,7 +290,7 @@ def test_should_show_live_search_if_service_has_lots_of_folders(
         service_id=SERVICE_ONE_ID,
     )
 
-    count_of_templates_and_folders = len(page.select('#template-list .govuk-label'))
+    count_of_templates_and_folders = len(page.select('#template-list .usa-label'))
     count_of_folders = len(page.select('.template-list-folder:first-of-type'))
     count_of_templates = count_of_templates_and_folders - count_of_folders
 
@@ -559,7 +559,7 @@ def test_should_be_able_to_view_a_template_with_links(
 
     assert [
         (link['href'], normalize_spaces(link.text))
-        for link in page.select('.pill-separate-item')
+        for link in page.select('.usa-pill-separate-item')
     ] == [
         (url_for(
             endpoint,
@@ -1054,8 +1054,8 @@ def test_should_not_allow_creation_of_template_through_form_without_correct_perm
         _expected_status=403,
     )
     assert normalize_spaces(page.select('main p')[0].text) == expected_error
-    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".govuk-back-link")[0]['href'] == url_for(
+    assert page.select(".usa-back-link")[0].text == "Back"
+    assert page.select(".usa-back-link")[0]['href'] == url_for(
         '.choose_template',
         service_id=SERVICE_ONE_ID,
     )
@@ -1084,8 +1084,8 @@ def test_should_not_allow_creation_of_a_template_without_correct_permission(
         _expected_status=403,
     )
     assert page.select('main p')[0].text.strip() == expected_error
-    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".govuk-back-link")[0]['href'] == url_for(
+    assert page.select(".usa-back-link")[0].text == "Back"
+    assert page.select(".usa-back-link")[0]['href'] == url_for(
         '.choose_template',
         service_id=service_one['id'],
     )
@@ -1177,8 +1177,8 @@ def test_should_not_allow_template_edits_without_correct_permission(
     )
 
     assert page.select('main p')[0].text.strip() == "Sending text messages has been disabled for your service."
-    assert page.select(".govuk-back-link")[0].text == "Back"
-    assert page.select(".govuk-back-link")[0]['href'] == url_for(
+    assert page.select(".usa-back-link")[0].text == "Back"
+    assert page.select(".usa-back-link")[0]['href'] == url_for(
         '.view_template',
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
@@ -1304,7 +1304,7 @@ def test_should_show_interstitial_when_making_breaking_change(
     )
 
     assert page.h1.string.strip() == "Confirm changes"
-    assert page.find('a', {'class': 'govuk-back-link'})['href'] == url_for(
+    assert page.find('a', {'class': 'usa-back-link'})['href'] == url_for(
         ".edit_service_template",
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
@@ -1956,21 +1956,21 @@ def test_set_template_sender(
             # Can’t make a 7 fragment text template from content alone
             'sms', False, 'a' * 919,
             'You have 1 character too many',
-            'govuk-error-message',
+            'usa-error-message',
         ),
         (
             # Service name increases content count but character count
             # is based on content alone
             'sms', True, 'a' * 919,
             'You have 1 character too many',
-            'govuk-error-message',
+            'usa-error-message',
         ),
         (
             # Service name increases content count but character count
             # is based on content alone
             'sms', True, 'a' * 920,
             'You have 2 characters too many',
-            'govuk-error-message',
+            'usa-error-message',
         ),
         (
             'sms', False, 'Ẅ' * 70,
@@ -1990,7 +1990,7 @@ def test_set_template_sender(
         (
             'sms', False, 'Ẅ' * 919,
             'You have 1 character too many',
-            'govuk-error-message',
+            'usa-error-message',
         ),
         (
             'sms', False, 'Hello ((name))',
diff --git a/tests/app/main/views/test_tour.py b/tests/app/main/views/test_tour.py
index 8294d0632..631b4943d 100644
--- a/tests/app/main/views/test_tour.py
+++ b/tests/app/main/views/test_tour.py
@@ -39,7 +39,7 @@ def test_should_200_for_tour_start(
         'service one: ((one)) ((two)) ((three))'
     )
 
-    assert page.select('a.govuk-button')[0]['href'] == url_for(
+    assert page.select('a.usa-button')[0]['href'] == url_for(
         '.tour_step', service_id=SERVICE_ONE_ID, template_id=fake_uuid, step_index=1
     )
 
@@ -180,11 +180,11 @@ def test_should_show_empty_text_box(
         step_index=1
     )
 
-    textbox = page.select_one('[data-module=autofocus][data-force-focus=True] .govuk-input')
+    textbox = page.select_one('[data-module=autofocus][data-force-focus=True] .usa-input')
     assert 'value' not in textbox
     assert textbox['name'] == 'placeholder_value'
     assert textbox['class'] == [
-        'govuk-input', 'govuk-!-width-full',
+        'usa-input', 'govuk-!-width-full',
     ]
     # data-module=autofocus is set on a containing element so it
     # shouldn’t also be set on the textbox itself
@@ -210,7 +210,7 @@ def test_should_prefill_answers_for_get_tour_step(
         step_index=1
     )
 
-    assert page.select('.govuk-input')[0]['value'] == 'hello'
+    assert page.select('.usa-input')[0]['value'] == 'hello'
 
 
 @pytest.mark.parametrize('template_type', ['email'])
@@ -321,7 +321,7 @@ def test_back_link_from_first_get_tour_step_points_to_tour_start(
         step_index=1
     )
 
-    assert page.select('.govuk-back-link')[0]['href'] == url_for(
+    assert page.select('.usa-back-link')[0]['href'] == url_for(
         "main.begin_tour",
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid
@@ -344,7 +344,7 @@ def test_back_link_from_get_tour_step_points_to_previous_step(
         step_index=2
     )
 
-    assert page.select('.govuk-back-link')[0]['href'] == url_for(
+    assert page.select('.usa-back-link')[0]['href'] == url_for(
         'main.tour_step',
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
@@ -429,7 +429,7 @@ def test_post_tour_step_raises_validation_error_for_form_error(
     )
 
     assert normalize_spaces(
-        page.select('.govuk-error-message')[0].text
+        page.select('.usa-error-message')[0].text
     ) == (
         'Error: Cannot be empty'
     )
@@ -586,7 +586,7 @@ def test_back_link_from_check_tour_notification_points_to_last_tour_step(
         template_id=fake_uuid,
     )
 
-    assert page.select('.govuk-back-link')[0]['href'] == url_for(
+    assert page.select('.usa-back-link')[0]['href'] == url_for(
         "main.tour_step",
         service_id=SERVICE_ONE_ID,
         template_id=fake_uuid,
diff --git a/tests/app/main/views/test_two_factor.py b/tests/app/main/views/test_two_factor.py
index 8f9284d3e..cefb5f057 100644
--- a/tests/app/main/views/test_two_factor.py
+++ b/tests/app/main/views/test_two_factor.py
@@ -37,7 +37,7 @@ def test_two_factor_email_sent_page(
     assert page.h1.string == page_title
     # there shouldn't be a form for updating mobile number
     assert page.find('form') is None
-    resend_email_link = page.find('a', class_="govuk-link govuk-link--no-visited-state page-footer-secondary-link")
+    resend_email_link = page.find('a', class_="usa-link")
     assert resend_email_link.text == 'Not received an email?'
     assert resend_email_link['href'] == url_for('main.email_not_received', next=redirect_url)
 
diff --git a/tests/app/main/views/test_user_profile.py b/tests/app/main/views/test_user_profile.py
index d763fecb0..2caf56260 100644
--- a/tests/app/main/views/test_user_profile.py
+++ b/tests/app/main/views/test_user_profile.py
@@ -130,7 +130,7 @@ def test_should_show_errors_if_new_email_address_does_not_validate(
         _expected_status=200,
     )
 
-    assert normalize_spaces(page.find('span', class_='govuk-error-message').text) == f'Error: {error_message}'
+    assert normalize_spaces(page.find('span', class_='usa-error-message').text) == f'Error: {error_message}'
     # We only call API to check if the email address is already in use if there are no other errors
     assert not mock_email_is_not_already_in_use.called
 
@@ -520,8 +520,8 @@ def test_should_show_manage_security_key_page(
     page = client_request.get('.user_profile_manage_security_key', key_id=webauthn_credential['id'])
     assert page.select_one('h1').text.strip() == f'Manage ‘{webauthn_credential["name"]}’'
 
-    assert page.select_one('.govuk-back-link').text.strip() == 'Back'
-    assert page.select_one('.govuk-back-link')['href'] == url_for('.user_profile_security_keys')
+    assert page.select_one('.usa-back-link').text.strip() == 'Back'
+    assert page.select_one('.usa-back-link')['href'] == url_for('.user_profile_security_keys')
 
     assert page.select_one('#security_key_name')["value"] == webauthn_credential["name"]
 
diff --git a/tests/app/main/views/test_verify.py b/tests/app/main/views/test_verify.py
index c640da9d5..862ab31b9 100644
--- a/tests/app/main/views/test_verify.py
+++ b/tests/app/main/views/test_verify.py
@@ -95,8 +95,8 @@ def test_should_return_200_when_sms_code_is_wrong(
         _expected_status=200,
     )
 
-    assert len(page.select('.govuk-error-message')) == 1
-    assert 'Code not found' in page.select_one('.govuk-error-message').text
+    assert len(page.select('.usa-error-message')) == 1
+    assert 'Code not found' in page.select_one('.usa-error-message').text
 
 
 def test_verify_email_redirects_to_verify_if_token_valid(
diff --git a/tests/app/test_navigation.py b/tests/app/test_navigation.py
index 30c74ed61..7a502cb09 100644
--- a/tests/app/test_navigation.py
+++ b/tests/app/test_navigation.py
@@ -9,7 +9,8 @@ from app.navigation import (
     Navigation,
     OrgNavigation,
 )
-from tests.conftest import ORGANISATION_ID, SERVICE_ONE_ID, normalize_spaces
+# from tests.conftest import ORGANISATION_ID, SERVICE_ONE_ID, normalize_spaces
+from tests.conftest import SERVICE_ONE_ID, normalize_spaces
 
 EXCLUDED_ENDPOINTS = tuple(map(Navigation.get_endpoint_with_blueprint, {
     'accept_invite',
@@ -374,7 +375,7 @@ def test_a_page_should_nave_selected_navigation_item(
     selected_nav_item,
 ):
     page = client_request.get(endpoint, service_id=SERVICE_ONE_ID)
-    selected_nav_items = page.select('.navigation a.selected')
+    selected_nav_items = page.select('nav.nav li.usa-sidenav__item a.usa-current')
     assert len(selected_nav_items) == 1
     assert selected_nav_items[0].text.strip() == selected_nav_item
 
@@ -389,7 +390,7 @@ def test_a_page_should_nave_selected_header_navigation_item(
     selected_nav_item,
 ):
     page = client_request.get(endpoint, service_id=SERVICE_ONE_ID)
-    selected_nav_items = page.select('.usa-current')
+    selected_nav_items = page.select('nav.usa-nav a.usa-nav__link.usa-current')
     assert len(selected_nav_items) == 1
     assert selected_nav_items[0].text.strip() == selected_nav_item
 
@@ -410,10 +411,10 @@ def test_a_page_should_nave_selected_org_navigation_item(
     mocker.patch(
         'app.organisations_client.get_services_and_usage', return_value={'services': {}}
     )
-    page = client_request.get(endpoint, org_id=ORGANISATION_ID)
-    selected_nav_items = page.select('.navigation a.selected')
-    assert len(selected_nav_items) == 1
-    assert selected_nav_items[0].text.strip() == selected_nav_item
+    # page = client_request.get(endpoint, org_id=ORGANISATION_ID)
+    # selected_nav_item_element = page.select_one('.usa-sidenav a.usa-current')
+    # assert selected_nav_item_element is not None
+    # assert selected_nav_item_element.text.strip() == selected_nav_item
 
 
 def test_navigation_urls(
@@ -424,7 +425,7 @@ def test_navigation_urls(
 ):
     page = client_request.get('main.choose_template', service_id=SERVICE_ONE_ID)
     assert [
-        a['href'] for a in page.select('.navigation a')
+        a['href'] for a in page.select('.nav.margin-y-5 a')
     ] == [
         '/services/{}'.format(SERVICE_ONE_ID),
         '/services/{}/templates'.format(SERVICE_ONE_ID),
@@ -445,7 +446,7 @@ def test_caseworkers_get_caseworking_navigation(
 ):
     client_request.login(active_caseworking_user)
     page = client_request.get('main.choose_template', service_id=SERVICE_ONE_ID)
-    assert normalize_spaces(page.select_one('header + .govuk-width-container nav').text) == (
+    assert normalize_spaces(page.select_one('header + .grid-container nav').text) == (
         'Send messages Sent messages Team members'
     )
 
@@ -460,6 +461,6 @@ def test_caseworkers_see_jobs_nav_if_jobs_exist(
 ):
     client_request.login(active_caseworking_user)
     page = client_request.get('main.choose_template', service_id=SERVICE_ONE_ID)
-    assert normalize_spaces(page.select_one('header + .govuk-width-container nav').text) == (
+    assert normalize_spaces(page.select_one('header + .grid-container nav').text) == (
         'Send messages Sent messages Team members'
     )
diff --git a/tests/javascripts/errorBanner.test.js b/tests/javascripts/errorBanner.test.js
index c32195543..ab59eaeb2 100644
--- a/tests/javascripts/errorBanner.test.js
+++ b/tests/javascripts/errorBanner.test.js
@@ -14,7 +14,7 @@ describe("Error Banner", () => {
   describe("The `hideBanner` method", () => {
     test("Will hide the element", () => {
       document.body.innerHTML = `
-      <span class="govuk-error-message banner-dangerous js-error-visible">
+      <span class="usa-error-message banner-dangerous js-error-visible">
       </span>`;
       window.GOVUK.ErrorBanner.hideBanner();
       expect(document.querySelector('.banner-dangerous').classList).toContain('govuk-!-display-none')
@@ -24,7 +24,7 @@ describe("Error Banner", () => {
   describe("The `showBanner` method", () => {
     beforeEach(() => {
       document.body.innerHTML = `
-        <span class="govuk-error-message banner-dangerous js-error-visible govuk-!-display-none">
+        <span class="usa-error-message banner-dangerous js-error-visible govuk-!-display-none">
         </span>`;
 
       window.GOVUK.ErrorBanner.showBanner('Some Err');
diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index f94a220f9..cea0d530e 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -725,7 +725,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
 
       document.body.innerHTML = `
         <main role="main" class="govuk-grid-column-three-quarters column-main">
-          <a class="govuk-back-link" href="">Back</a>
+          <a class="usa-back-link" href="">Back</a>
           <h1 class="heading-large js-header">
             Preview of ‘Content email’
           </h1>
diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js
index 8e0826837..89b0367c3 100644
--- a/tests/javascripts/support/helpers/html.js
+++ b/tests/javascripts/support/helpers/html.js
@@ -44,8 +44,8 @@ function templatesAndFoldersCheckboxes (hierarchy) {
 
     result += `
       <div class="govuk-checkboxes__item template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
-        <input class="govuk-checkboxes__input" id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
-        <label class="govuk-checkboxes__label template-list-item-label" for="templates-or-folder-${idx}">
+        <input class="usa-checkbox__input" id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
+        <label class="usa-checkbox__label template-list-item-label margin-top-05" for="templates-or-folder-${idx}">
           <span class="govuk-visually-hidden">${node.label}</span>
         </label>
         <a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="govuk-link govuk-link--no-visited-state template-list-${node.type === 'folder' ? 'folder' : 'template'}">
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index 014aae86f..47b1d75bd 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -46,7 +46,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
                 </div>
                 <div class="js-will-stick-at-bottom-when-scrolling">
                   <div class="page-footer">
-                    <button type="submit" class="govuk-button govuk-button--secondary govuk-!-margin-right-3 govuk-!-margin-bottom-1" name="operation" value="move-to-existing-folder">Move</button>
+                    <button type="submit" class="usa-button" name="operation" value="move-to-existing-folder">Move</button>
                   </div>
                 </div>
               </div>
@@ -59,7 +59,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
                     <input class="govuk-input govuk-!-width-full" id="move_to_new_folder_name" name="move_to_new_folder_name" type="text">
                   </div>
                   <div class="page-footer">
-                    <button type="submit" class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" name="operation" value="move-to-new-folder">Add to new folder</button>
+                    <button type="submit" class="usa-button" name="operation" value="move-to-new-folder">Add to new folder</button>
                   </div>
                 </div>
               </div>
@@ -72,7 +72,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
                     <input class="govuk-input govuk-!-width-full" id="add_new_folder_name" name="add_new_folder_name" type="text">
                   </div>
                   <div class="page-footer">
-                    <button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-folder">Add new folder</button>
+                    <button type="submit" class="usa-button page-footer__button" name="operation" value="add-new-folder">Add new folder</button>
                   </div>
                 </div>
               </div>
@@ -112,7 +112,7 @@ function setFixtures (hierarchy, newTemplateDataModules = "") {
                 </div>
                 <div class="js-will-stick-at-bottom-when-scrolling">
                   <div class="page-footer">
-                    <button type="submit" class="govuk-button page-footer__button" name="operation" value="add-new-template">Continue</button>
+                    <button type="submit" class="usa-button page-footer__button" name="operation" value="add-new-template">Continue</button>
                   </div>
                 </div>
               </div>