From a861c56c66394e546a07963d2a2d2c2146bf98f4 Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Fri, 20 Sep 2024 12:39:24 -0700
Subject: [PATCH] Snapshot updates - no need to review

---
 .../ContactInputView.test.tsx.snap            |  77 +++-
 .../__snapshots__/NotesModal.test.tsx.snap    |  94 ++++
 .../ContactFilterComponent.test.tsx.snap      |  72 ++++
 .../ContactResultComponent.test.tsx.snap      | 197 +++++++--
 .../ContactManagerView.test.tsx.snap          |  73 ++++
 .../Header/__snapshots__/Header.test.tsx.snap |   3 +-
 .../AcquisitionTray.test.tsx.snap             |   2 +-
 .../__snapshots__/SideNavbar.test.tsx.snap    |  90 +++-
 .../__snapshots__/LayersControl.test.tsx.snap |  72 ++++
 .../__snapshots__/LayersMenu.test.tsx.snap    |   2 +-
 .../LayerPopupView.test.tsx.snap              |  94 ++++
 .../LayerPopupLinks.test.tsx.snap             |  70 +++
 .../__snapshots__/AreaForm.test.tsx.snap      |   6 +-
 .../__snapshots__/VolumeForm.test.tsx.snap    |   3 +-
 .../MapSelectorContainer.test.tsx.snap        |  81 ++++
 .../PropertyMapSelectorSubForm.test.tsx.snap  |   2 +
 .../__snapshots__/LayerFilter.test.tsx.snap   |  71 +++
 ...opertySearchSelectorFormView.test.tsx.snap |  73 ++++
 ...ropertySelectorPidSearchView.test.tsx.snap |  70 +++
 .../SelectedPropertyRow.test.tsx.snap         |  94 ++++
 .../AcquisitionFilter.test.tsx.snap           |  71 +++
 .../AccessRequestContainer.test.tsx.snap      | 140 ++++++
 .../AccessRequestForm.test.tsx.snap           |  70 +++
 .../AccessRequestPage.test.tsx.snap           |  73 +++-
 .../ManageAccessRequestsPage.test.tsx.snap    |  71 +++
 .../EditUserContainer.test.tsx.snap           |  70 +++
 .../__snapshots__/EditUserForm.test.tsx.snap  |  75 ++++
 .../__snapshots__/EditUserPage.test.tsx.snap  |  73 +++-
 .../AddFinancialCodeForm.test.tsx.snap        |  71 +++
 .../FinancialCodeFilter.test.tsx.snap         |  71 +++
 .../UpdateFinancialCodeForm.test.tsx.snap     |  71 +++
 .../CreateOrganizationForm.test.tsx.snap      | 143 +++++-
 .../CreatePersonForm.test.tsx.snap            | 143 +++++-
 .../CreateContactContainer.test.tsx.snap      |  80 +++-
 .../__snapshots__/Container.test.tsx.snap     |   4 +-
 .../__snapshots__/Organization.test.tsx.snap  |  23 +-
 .../detail/__snapshots__/Person.test.tsx.snap |  23 +-
 .../UpdateOrganizationForm.test.tsx.snap      | 143 +++++-
 .../UpdatePersonForm.test.tsx.snap            | 143 +++++-
 .../UpdateContactContainer.test.tsx.snap      |  80 +++-
 .../ContactListView.test.tsx.snap             | 144 ++++++-
 .../DispositionFilter.test.tsx.snap           |  71 +++
 .../DispositionListView.test.tsx.snap         |  95 ++++
 .../DocumentDetailForm.test.tsx.snap          |  76 +++-
 .../DocumentDetailView.test.tsx.snap          |  76 +++-
 .../DocumentUploadForm.test.tsx.snap          |   4 +-
 .../DocumentFilterForm.test.tsx.snap          | 142 ++++++
 .../DocumentResults.test.tsx.snap             |  26 +-
 .../DocumentListView.test.tsx.snap            | 112 ++++-
 .../HelpModalContentContainer.test.tsx.snap   |   1 +
 .../AddLeaseContainer.test.tsx.snap           | 101 ++++-
 .../AdministrationSubForm.test.tsx.snap       |   5 +-
 .../FeeDeterminationSubForm.test.tsx.snap     |   3 +-
 .../LeaseDetailSubForm.test.tsx.snap          |   4 +-
 .../DepositsContainer.test.tsx.snap           |   3 +-
 .../__snapshots__/DepositNotes.test.tsx.snap  |   3 +-
 .../DepositsReceivedContainer.test.tsx.snap   |   3 +-
 .../DepositsReturnedContainer.test.tsx.snap   |  15 +-
 .../ReceivedDepositForm.test.tsx.snap         | 152 ++++++-
 .../ReturnDepositForm.test.tsx.snap           | 168 +++++++-
 .../DetailAdministration.test.tsx.snap        |   6 +-
 .../DetailFeeDetermination.test.tsx.snap      |   6 +-
 .../LeaseDetailsView.test.tsx.snap            | 114 ++++-
 .../PropertiesInformation.test.tsx.snap       |   9 +-
 .../PropertyInformation.test.tsx.snap         |  12 +-
 .../__snapshots__/DocumentsPage.test.tsx.snap |  74 +++-
 .../AddImprovementsContainer.test.tsx.snap    |   6 +-
 .../__snapshots__/Insurance.test.tsx.snap     |   8 +-
 .../EditInsuranceContainer.test.tsx.snap      |   5 +-
 .../PeriodPaymentsContainer.test.tsx.snap     | 408 ++++++++++++++++--
 .../__snapshots__/PaymentForm.test.tsx.snap   |   6 +
 .../__snapshots__/PeriodForm.test.tsx.snap    |   4 +
 .../__snapshots__/PaymentsView.test.tsx.snap  | 188 +++++++-
 .../PaymentPeriodsView.test.tsx.snap          | 198 ++++++++-
 .../AddLeaseStakeholderForm.test.tsx.snap     | 110 ++++-
 .../ViewStakeholderForm.test.tsx.snap         | 118 ++++-
 .../__snapshots__/Surplus.test.tsx.snap       |   1 +
 .../LeaseStatusSummary.test.tsx.snap          |  60 ++-
 .../__snapshots__/LeaseFilter.test.tsx.snap   |  72 ++++
 .../__snapshots__/LeaseListView.test.tsx.snap |  96 +++++
 ...ortAggregatedLeasesContainer.test.tsx.snap |   1 +
 ...ExportLeasePaymentsContainer.test.tsx.snap |   1 +
 .../LeasePropertySelector.test.tsx.snap       | 116 ++++-
 .../SelectedPropertyRow.test.tsx.snap         | 100 ++++-
 .../AcquisitionView.test.tsx.snap             | 104 ++++-
 ...AcquisitionPropertiesSubForm.test.tsx.snap | 181 +++++++-
 .../AddAcquisitionContainer.test.tsx.snap     | 106 ++++-
 .../AddAcquisitionForm.test.tsx.snap          |  94 +++-
 ...enerateLetterRecipientsModal.test.tsx.snap |  93 +++-
 .../AcquisitionMenu.test.tsx.snap             |   8 +-
 ...dateAcquisitionOwnersSubForm.test.tsx.snap |  70 +++
 ...UpdateAcquisitionTeamSubForm.test.tsx.snap |  70 +++
 .../AcquisitionFileTabs.test.tsx.snap         |  11 +-
 ...dateAcquisitionAgreementForm.test.tsx.snap | 229 ++++++----
 .../__snapshots__/AgreementView.test.tsx.snap | 193 ++++++---
 .../ExpropriationForm1.test.tsx.snap          | 147 ++++++-
 .../ExpropriationForm5.test.tsx.snap          | 147 ++++++-
 .../Form8PaymentItemsSubForm.test.tsx.snap    |  70 +++
 .../ExpropriationForm8Details.test.tsx.snap   | 123 +++++-
 .../ExpropriationForm9.test.tsx.snap          | 147 ++++++-
 ...AcquisitionOwnersSummaryView.test.tsx.snap |   1 +
 .../AcquisitionSummaryView.test.tsx.snap      |   5 +-
 .../UpdateAcquisitionForm.test.tsx.snap       |  86 +++-
 .../StakeHolderView.test.tsx.snap             |   8 +-
 .../UpdateStakeHolderForm.test.tsx.snap       |  81 +++-
 ...nsationRequisitionDetailView.test.tsx.snap | 195 ++++++---
 .../CompensationListView.test.tsx.snap        |  10 +-
 ...eCompensationRequisitionForm.test.tsx.snap | 320 ++++++++------
 .../FinancialActivitiesSubForm.test.tsx.snap  |  70 +++
 .../AddConsolidationView.test.tsx.snap        |  99 ++++-
 .../DispositionView.test.tsx.snap             | 104 ++++-
 .../AddDispositionContainerView.test.tsx.snap | 100 ++++-
 .../DispositionMenu.test.tsx.snap             |   8 +-
 ...DispositionPropertiesSubForm.test.tsx.snap | 181 +++++++-
 .../DispositionTeamSubForm.test.tsx.snap      |  70 +++
 .../DispositionFileTabs.test.tsx.snap         |  10 +-
 .../DispositionSummaryView.test.tsx.snap      |   4 +-
 .../UpdateDispositionForm.test.tsx.snap       |  82 +++-
 .../OffersAndSaleView.test.tsx.snap           |  13 +-
 .../DispositionOfferDetails.test.tsx.snap     |   5 +-
 .../DispositionSaleForm.test.tsx.snap         |  80 +++-
 .../UpdateDispositionSaleView.test.tsx.snap   | 264 ++++++++----
 .../MapSideBarLayout.test.tsx.snap            |  82 +++-
 .../__snapshots__/LeaseHeader.test.tsx.snap   |  71 +++
 .../ProjectContainerView.test.tsx.snap        |  92 +++-
 .../AddProjectContainer.test.tsx.snap         |  86 +++-
 .../AddProjectForm.test.tsx.snap              | 149 ++++++-
 .../__snapshots__/ProjectHeader.test.tsx.snap |   4 +-
 .../ProjectTabsContainer.test.tsx.snap        |   6 +
 .../ProjectSummaryView.test.tsx.snap          |   4 +-
 .../BcAssessmentTabView.test.tsx.snap         |   1 +
 .../__snapshots__/LtsaTabView.test.tsx.snap   |   1 +
 .../AssociationHeader.test.tsx.snap           |   1 +
 .../PropertyAssociationTabView.test.tsx.snap  |   5 +-
 .../OperationSectionView.test.tsx.snap        |  12 +-
 .../__snapshots__/OperationView.test.tsx.snap |   3 +-
 ...datePropertyDetailsContainer.test.tsx.snap | 350 +++++++++------
 .../UpdatePropertyDetailsForm.test.tsx.snap   | 350 +++++++++------
 ...ManagementActivitiesListView.test.tsx.snap |  73 +++-
 .../PropertyContactListView.test.tsx.snap     | 166 +++++--
 ...PropertyManagementDetailView.test.tsx.snap |   3 +-
 .../PropertyContactEditForm.test.tsx.snap     |   4 +-
 ...PropertyManagementUpdateForm.test.tsx.snap |   4 +-
 .../PropertyResearchTabView.test.tsx.snap     |  51 ++-
 .../UpdatePropertyForm.test.tsx.snap          |   4 +-
 .../TakesDetailView.test.tsx.snap             |  14 +-
 .../TakeUpdateForm.test.tsx.snap              |  11 +-
 .../ResearchContainer.test.tsx.snap           | 104 ++++-
 .../AddResearchContainer.test.tsx.snap        | 101 ++++-
 .../AddResearchForm.test.tsx.snap             |  89 +++-
 .../ResearchProperties.test.tsx.snap          | 111 ++++-
 .../ResearchFileNameGuide.test.tsx.snap       |   1 +
 .../__snapshots__/ResearchMenu.test.tsx.snap  |   8 +-
 .../UpdateProjectsSubForm.test.tsx.snap       | 210 +++++++++
 .../ResearchTabsContainer.test.tsx.snap       |  10 +-
 .../ResearchSummaryView.test.tsx.snap         |   4 +-
 .../UpdateSummaryForm.test.tsx.snap           |  83 +++-
 .../__snapshots__/ChecklistView.test.tsx.snap |  10 +-
 .../UpdateChecklistForm.test.tsx.snap         |   4 +-
 .../UpdateProperties.test.tsx.snap            | 123 +++++-
 .../AddSubdivisionView.test.tsx.snap          |  99 ++++-
 .../__snapshots__/NoteContainer.test.tsx.snap |  91 ++++
 .../AddNotesContainer.test.tsx.snap           |  91 ++++
 .../AddNotesFormModal.test.tsx.snap           |  91 ++++
 .../NoteDetailsFormModal.test.tsx.snap        |  91 ++++
 .../__snapshots__/NoteResults.test.tsx.snap   |  70 +++
 .../__snapshots__/NoteListView.test.tsx.snap  |   5 +-
 .../UpdateNoteContainer.test.tsx.snap         |  91 ++++
 .../UpdateNoteFormModal.test.tsx.snap         |  91 ++++
 .../__snapshots__/ProjectFilter.test.tsx.snap |  71 +++
 .../ProjectListView.test.tsx.snap             |  71 +++
 .../PropertyListView.test.tsx.snap            |  95 ++++
 .../__snapshots__/MapContainer.test.tsx.snap  |  86 +++-
 .../ResearchFilter.test.tsx.snap              |  72 ++++
 .../ResearchListView.test.tsx.snap            |  72 ++++
 .../AdvancedFilterBar.test.tsx.snap           |   4 +
 .../__snapshots__/Header.test.tsx.snap        |   6 +-
 177 files changed, 11819 insertions(+), 1179 deletions(-)

diff --git a/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap b/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
index 9c5c90a4a2..3ff40be096 100644
--- a/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
+++ b/source/frontend/src/components/common/form/ContactInput/__snapshots__/ContactInputView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`ContactInputView component > renders as expected 1`] = `
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`ContactInputView component > renders as expected 1`] = `
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,12 +219,13 @@ exports[`ContactInputView component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #474543;
+  border: #606060 solid 0.1rem;
   cursor: default;
 }
 
 .c0.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c2.c2.btn {
@@ -165,6 +236,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
   padding-right: 1.2rem;
   height: 1.6rem;
   right: 0rem;
+  color: #9F9D9C;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -177,6 +249,7 @@ exports[`ContactInputView component > renders as expected 1`] = `
 .c2.c2.btn:hover,
 .c2.c2.btn:active,
 .c2.c2.btn:focus {
+  color: #CE3E39;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
diff --git a/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap b/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
index 415ce5960a..1220d9419d 100644
--- a/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
+++ b/source/frontend/src/components/common/form/__snapshots__/NotesModal.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`NotesModal component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`NotesModal component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`NotesModal component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`NotesModal component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`NotesModal component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c1.c1.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c1.c1.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c1.c1.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c1.c1.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c1.c1.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c1.c1.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 <button
     class="c0 Button c1 btn btn-primary"
     title="notes"
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
index 3a148c0efe..d8c16b9473 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactFilterComponent/__snapshots__/ContactFilterComponent.test.tsx.snap
@@ -58,15 +58,37 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -76,20 +98,66 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -111,6 +179,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -121,6 +190,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -233,6 +303,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.4rem;
   padding: 1rem;
   max-width: 85%;
@@ -255,6 +326,7 @@ exports[`ContactFilterComponent > matches snapshot 1`] = `
   display: inline-block;
   margin: 0rem 0.5rem;
   padding: 0.2rem;
+  color: #42814A;
 }
 
 @media only screen and (max-width:1199px) {
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
index 86a7d035cc..4fe56a5ec5 100644
--- a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/__snapshots__/ContactResultComponent.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
     class="Toastify"
   />
   <div />
-  .c6.btn {
+  .c7.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   cursor: pointer;
 }
 
-.c6.btn .Button__value {
+.c7.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c6.btn:hover {
+.c7.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c6.btn:focus {
+.c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c6.btn.btn-secondary {
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
 }
 
-.c6.btn.btn-info {
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c6.btn.btn-info:hover,
-.c6.btn.btn-info:active,
-.c6.btn.btn-info:focus {
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c6.btn.btn-light {
+.c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c6.btn.btn-dark {
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c6.btn.btn-link {
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c6.btn.btn-link:hover,
-.c6.btn.btn-link:active,
-.c6.btn.btn-link:focus {
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   outline: none;
 }
 
-.c6.btn.btn-link:disabled,
-.c6.btn.btn-link.disabled {
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c6.btn:disabled,
-.c6.btn:disabled:hover {
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,42 +199,66 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   opacity: 0.65;
 }
 
-.c6.Button .Button__icon {
+.c7.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c6.Button--icon-only:focus {
+.c7.Button--icon-only:focus {
   outline: none;
 }
 
-.c6.Button--icon-only .Button__icon {
+.c7.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c7.c7.btn {
+.c8.c8.btn {
   background-color: unset;
   border: none;
 }
 
-.c7.c7.btn:hover,
-.c7.c7.btn:focus,
-.c7.c7.btn:active {
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c7.c7.btn svg {
+.c8.c8.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c7.c7.btn svg:hover {
+.c8.c8.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c4 {
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -203,7 +297,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c5 {
+.c6 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -211,9 +305,17 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c3 a {
+.c3 {
+  color: #606060;
+}
+
+.c3.active {
+  color: #42814A;
+}
+
+.c4 a {
   font-weight: bold;
-  color: !important;
+  color: #428bca !important;
 }
 
 <div
@@ -584,7 +686,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="active"
+              class="c3 active"
             >
               <svg
                 class="mr-2"
@@ -609,7 +711,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="active"
+              class="c3 active"
             >
               <svg
                 fill="currentColor"
@@ -633,7 +735,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3"
+              class="c4"
             >
               <a
                 href="/contact/1"
@@ -703,10 +805,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4 c5"
+              class="c5 c6"
             >
               <button
-                class="c6 Button c7 btn btn-light"
+                class="c7 Button c8 btn btn-light"
                 title="View Contact"
                 type="button"
               >
@@ -771,7 +873,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="active"
+              class="c3 active"
             >
               <svg
                 class="mr-2"
@@ -796,7 +898,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="active"
+              class="c3 active"
             >
               <svg
                 fill="currentColor"
@@ -820,7 +922,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3"
+              class="c4"
             >
               <a
                 href="/contact/2"
@@ -890,10 +992,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4 c5"
+              class="c5 c6"
             >
               <button
-                class="c6 Button c7 btn btn-light"
+                class="c7 Button c8 btn btn-light"
                 title="View Contact"
                 type="button"
               >
@@ -958,7 +1060,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="inactive"
+              class="c3 inactive"
             >
               <svg
                 class="mr-2"
@@ -983,7 +1085,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="inactive"
+              class="c3 inactive"
             >
               <svg
                 fill="currentColor"
@@ -1007,7 +1109,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c3"
+              class="c4"
             >
               <a
                 href="/contact/3"
@@ -1077,10 +1179,10 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4 c5"
+              class="c5 c6"
             >
               <button
-                class="c6 Button c7 btn btn-light"
+                class="c7 Button c8 btn btn-light"
                 title="View Contact"
                 type="button"
               >
@@ -1118,6 +1220,7 @@ exports[`Contact Search Results Table > matches snapshot 1`] = `
   </div>
   .c0 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
diff --git a/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap b/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
index 6681dd7d46..4e39af4231 100644
--- a/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
+++ b/source/frontend/src/components/contact/ContactManagerView/__snapshots__/ContactManagerView.test.tsx.snap
@@ -58,15 +58,37 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -76,20 +98,66 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -111,6 +179,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -121,6 +190,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -208,6 +278,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 
 .c13 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1.form-group {
@@ -266,6 +337,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.4rem;
   padding: 1rem;
   max-width: 85%;
@@ -288,6 +360,7 @@ exports[`ContactManagerView > matches snapshot 1`] = `
   display: inline-block;
   margin: 0rem 0.5rem;
   padding: 0.2rem;
+  color: #42814A;
 }
 
 @media only screen and (max-width:1199px) {
diff --git a/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap b/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap
index 8d5be51216..341479a5dc 100644
--- a/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap
+++ b/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap
@@ -130,7 +130,8 @@ exports[`App Header > renders correctly 1`] = `
 }
 
 .c6 .dropdown-item {
-  border-top: 0.2rem solid _accentColor_6badca;
+  background-color: #053662;
+  border-top: 0.2rem solid;
 }
 
 .c5 {
diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/AcquisitionTray.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/AcquisitionTray.test.tsx.snap
index 1c945840f5..63ff065f3f 100644
--- a/source/frontend/src/components/layout/SideNavBar/__snapshots__/AcquisitionTray.test.tsx.snap
+++ b/source/frontend/src/components/layout/SideNavBar/__snapshots__/AcquisitionTray.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`AcquisitionTray > matches snapshot 1`] = `
   .c0 {
   font-size: 3rem;
   padding-bottom: 0.8rem;
-  border-bottom: 0.4rem solid;
+  border-bottom: 0.4rem solid var(--theme-blue-90);
   margin-bottom: 3.2rem;
   max-width: 28rem;
 }
diff --git a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
index 6161c2124a..295e886836 100644
--- a/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
+++ b/source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`SideNavbar display and logic > renders 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`SideNavbar display and logic > renders 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -138,13 +208,15 @@ exports[`SideNavbar display and logic > renders 1`] = `
 
 .c5.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn.btn-light.Button:focus,
 .c5.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn,
@@ -158,7 +230,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
 }
 
 .c1 {
-  height: calc( 100vh - -  );
+  height: calc( 100vh - 7.2rem - 4.4rem );
   overflow-y: auto;
   overflow-x: hidden;
   padding-top: 1.5rem;
@@ -227,6 +299,11 @@ exports[`SideNavbar display and logic > renders 1`] = `
 .c7#close-tray {
   float: right;
   cursor: pointer;
+  fill: #474543;
+}
+
+.c7#close-tray:hover {
+  fill: #428bca;
 }
 
 .c6 {
@@ -255,6 +332,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
 .c2 {
   width: 100%;
   margin-bottom: 2rem;
+  fill: #f2f2f2;
 }
 
 .c2 svg {
@@ -263,6 +341,14 @@ exports[`SideNavbar display and logic > renders 1`] = `
   min-width: max-content;
 }
 
+.c2:hover label {
+  color: #8ec6ff;
+}
+
+.c2:hover svg {
+  fill: #8ec6ff;
+}
+
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersControl.test.tsx.snap b/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersControl.test.tsx.snap
index 666f5f39d7..f382f4ebab 100644
--- a/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersControl.test.tsx.snap
+++ b/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersControl.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LayersControl View > renders correctly 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LayersControl View > renders correctly 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LayersControl View > renders correctly 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LayersControl View > renders correctly 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -150,6 +220,8 @@ exports[`LayersControl View > renders correctly 1`] = `
   height: 5.2rem;
   margin-left: -5.1rem;
   background-color: #fff;
+  color: #013366;
+  border-color: #013366;
   box-shadow: -0.2rem 0.1rem 0.4rem rgba(0,0,0,0.2);
 }
 
diff --git a/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersMenu.test.tsx.snap b/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersMenu.test.tsx.snap
index 9a30358371..316e1c3db9 100644
--- a/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersMenu.test.tsx.snap
+++ b/source/frontend/src/components/maps/leaflet/Control/LayersControl/__snapshots__/LayersMenu.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`LayersMenu View > renders as expected 1`] = `
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 .c1 {
@@ -29,7 +30,6 @@ exports[`LayersMenu View > renders as expected 1`] = `
 
 .c1 .form-group .form-check label {
   font-weight: bold;
-  color: _textColor_6badca;
   font-size: 1.6rem;
 }
 
diff --git a/source/frontend/src/components/maps/leaflet/LayerPopup/__snapshots__/LayerPopupView.test.tsx.snap b/source/frontend/src/components/maps/leaflet/LayerPopup/__snapshots__/LayerPopupView.test.tsx.snap
index 34751f946d..7e14c3bd54 100644
--- a/source/frontend/src/components/maps/leaflet/LayerPopup/__snapshots__/LayerPopupView.test.tsx.snap
+++ b/source/frontend/src/components/maps/leaflet/LayerPopup/__snapshots__/LayerPopupView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LayerPopupView component > renders as expected with layer popup content
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LayerPopupView component > renders as expected with layer popup content
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LayerPopupView component > renders as expected with layer popup content
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LayerPopupView component > renders as expected with layer popup content
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`LayerPopupView component > renders as expected with layer popup content
   transition: all 0.3s ease-in;
 }
 
+.c2.c2.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c2.c2.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c2.c2.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c2.c2.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c2.c2.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c2.c2.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c5 {
   font-size: 1.6rem;
   padding-top: 1rem;
diff --git a/source/frontend/src/components/maps/leaflet/LayerPopup/components/__snapshots__/LayerPopupLinks.test.tsx.snap b/source/frontend/src/components/maps/leaflet/LayerPopup/components/__snapshots__/LayerPopupLinks.test.tsx.snap
index 91181dc0dc..90ae4e8f31 100644
--- a/source/frontend/src/components/maps/leaflet/LayerPopup/components/__snapshots__/LayerPopupLinks.test.tsx.snap
+++ b/source/frontend/src/components/maps/leaflet/LayerPopup/components/__snapshots__/LayerPopupLinks.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Layer Popup links > Renders correctly 1`] = `
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Layer Popup links > Renders correctly 1`] = `
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Layer Popup links > Renders correctly 1`] = `
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Layer Popup links > Renders correctly 1`] = `
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/components/measurements/__snapshots__/AreaForm.test.tsx.snap b/source/frontend/src/components/measurements/__snapshots__/AreaForm.test.tsx.snap
index 3dc6393d32..53d8d663bb 100644
--- a/source/frontend/src/components/measurements/__snapshots__/AreaForm.test.tsx.snap
+++ b/source/frontend/src/components/measurements/__snapshots__/AreaForm.test.tsx.snap
@@ -9,14 +9,16 @@ exports[`LandMeasurementTable component > renders as expected 1`] = `
   .c0 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c2 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/components/measurements/__snapshots__/VolumeForm.test.tsx.snap b/source/frontend/src/components/measurements/__snapshots__/VolumeForm.test.tsx.snap
index 4b23e8fc6e..29404c4322 100644
--- a/source/frontend/src/components/measurements/__snapshots__/VolumeForm.test.tsx.snap
+++ b/source/frontend/src/components/measurements/__snapshots__/VolumeForm.test.tsx.snap
@@ -9,7 +9,8 @@ exports[`VolumeForm component > renders as expected 1`] = `
   .c0 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #d9eaf7;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
index d1c2a8bcc1..3541d6152e 100644
--- a/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/__snapshots__/MapSelectorContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -161,9 +231,11 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 
 .c14 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c4 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -209,9 +281,11 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 
 .c5.c5.c5 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c7 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -223,6 +297,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -231,6 +306,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 
 .c2 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -240,18 +316,22 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 }
 
 .c2 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c2 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c2 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -264,6 +344,7 @@ exports[`MapSelectorContainer component > renders as expected when provided no p
 }
 
 .c10 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/components/propertySelector/map/__snapshots__/PropertyMapSelectorSubForm.test.tsx.snap b/source/frontend/src/components/propertySelector/map/__snapshots__/PropertyMapSelectorSubForm.test.tsx.snap
index eb340c2d3c..d8f28525d5 100644
--- a/source/frontend/src/components/propertySelector/map/__snapshots__/PropertyMapSelectorSubForm.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/map/__snapshots__/PropertyMapSelectorSubForm.test.tsx.snap
@@ -35,9 +35,11 @@ exports[`PropertySelectorSubForm component > renders as expected when provided n
 
 .c0.c0.c0 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c2 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
index 15ff5e3ba1..64726adb9d 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/LayerFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LayerFilter component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LayerFilter component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LayerFilter component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LayerFilter component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -160,6 +230,7 @@ exports[`LayerFilter component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
index c5f2c26a8e..a13b28f5fb 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySearchSelectorFormView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -160,6 +230,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -169,6 +240,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
 }
 
 .c2 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -357,6 +429,7 @@ exports[`PropertySearchSelectorFormView component > renders as expected when pro
   </div>
   .c1 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c0 {
diff --git a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
index 97b7584e5c..f471bb6a08 100644
--- a/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/search/__snapshots__/PropertySelectorPidSearchView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PropertySearchPidSelector component > renders correctly 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PropertySearchPidSelector component > renders correctly 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PropertySearchPidSelector component > renders correctly 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PropertySearchPidSelector component > renders correctly 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/components/propertySelector/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap b/source/frontend/src/components/propertySelector/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
index e9f02599ef..220fac7fa3 100644
--- a/source/frontend/src/components/propertySelector/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
+++ b/source/frontend/src/components/propertySelector/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c5.c5.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c5.c5.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c6.c6.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
diff --git a/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap b/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
index a50e90085a..55d1fe92f5 100644
--- a/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
+++ b/source/frontend/src/features/acquisition/list/AcquisitionFilter/__snapshots__/AcquisitionFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -160,6 +230,7 @@ exports[`Acquisition Filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestContainer.test.tsx.snap b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestContainer.test.tsx.snap
index 5d238be4e7..4e23de36bd 100644
--- a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestContainer.test.tsx.snap
+++ b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestContainer.test.tsx.snap
@@ -56,15 +56,37 @@ exports[`AccessRequestContainer component > makes a request based on the access
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -74,20 +96,66 @@ exports[`AccessRequestContainer component > makes a request based on the access
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -109,6 +177,7 @@ exports[`AccessRequestContainer component > makes a request based on the access
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -119,6 +188,7 @@ exports[`AccessRequestContainer component > makes a request based on the access
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -780,15 +850,37 @@ exports[`AccessRequestContainer component > makes a request when no id is provid
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -798,20 +890,66 @@ exports[`AccessRequestContainer component > makes a request when no id is provid
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -833,6 +971,7 @@ exports[`AccessRequestContainer component > makes a request when no id is provid
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -843,6 +982,7 @@ exports[`AccessRequestContainer component > makes a request when no id is provid
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestForm.test.tsx.snap b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestForm.test.tsx.snap
index af1b8ee8ae..dea45a36e3 100644
--- a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AccessRequestForm component > renders as expected 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AccessRequestForm component > renders as expected 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AccessRequestForm component > renders as expected 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AccessRequestForm component > renders as expected 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
index 932052c8cc..36fc09a6dd 100644
--- a/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/access-request/__snapshots__/AccessRequestPage.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -152,9 +222,10 @@ exports[`AccessRequestPage > renders correctly 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
diff --git a/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap b/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
index d45087759f..8a8da20d9d 100644
--- a/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/access/__snapshots__/ManageAccessRequestsPage.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -169,6 +239,7 @@ exports[`Manage access requests > Snapshot matches 1`] = `
 }
 
 .c3 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
index 0f05c6e626..6d91e06e1d 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`EditUserContainer component > makes a request based on the user id 1`]
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
index 3101c24340..6ae1ed7c47 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`EditUserForm component > renders as expected 1`] = `
 .c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c6.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-primary:hover,
+.c6.btn.btn-primary:active,
+.c6.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c6.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c6.btn.btn-secondary:hover,
+.c6.btn.btn-secondary:active,
+.c6.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c6.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`EditUserForm component > renders as expected 1`] = `
 .c6.btn.btn-info:hover,
 .c6.btn.btn-info:active,
 .c6.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c6.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c6.btn.btn-light:hover,
+.c6.btn.btn-light:active,
+.c6.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c6.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c6.btn.btn-dark:hover,
+.c6.btn.btn-dark:active,
+.c6.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c6.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-danger:hover,
+.c6.btn.btn-danger:active,
+.c6.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c6.btn.btn-warning:hover,
+.c6.btn.btn-warning:active,
+.c6.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`EditUserForm component > renders as expected 1`] = `
 .c6.btn.btn-link:hover,
 .c6.btn.btn-link:active,
 .c6.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`EditUserForm component > renders as expected 1`] = `
 
 .c6.btn.btn-link:disabled,
 .c6.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -144,6 +214,11 @@ exports[`EditUserForm component > renders as expected 1`] = `
 .c4 {
   margin-left: 0.5rem;
   cursor: pointer;
+  fill: #474543;
+}
+
+.c4:hover {
+  fill: #CE3E39;
 }
 
 .c3 {
diff --git a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
index 24b28ffd04..262aaec47b 100644
--- a/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
+++ b/source/frontend/src/features/admin/edit-user/__snapshots__/EditUserPage.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -152,9 +222,10 @@ exports[`Edit user page > EditUserPage renders 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
diff --git a/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap b/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
index 7ee10b0a2a..aa6c5b6682 100644
--- a/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/financial-codes/add/__snapshots__/AddFinancialCodeForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`AddFinancialCode form > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeFilter/__snapshots__/FinancialCodeFilter.test.tsx.snap b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeFilter/__snapshots__/FinancialCodeFilter.test.tsx.snap
index 2fed49c63c..4d68713add 100644
--- a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeFilter/__snapshots__/FinancialCodeFilter.test.tsx.snap
+++ b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeFilter/__snapshots__/FinancialCodeFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Financial Code Filter > matches snapshot 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Financial Code Filter > matches snapshot 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Financial Code Filter > matches snapshot 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Financial Code Filter > matches snapshot 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,6 +212,7 @@ exports[`Financial Code Filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap b/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
index 33fc96063c..52569414e7 100644
--- a/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
+++ b/source/frontend/src/features/admin/financial-codes/update/__snapshots__/UpdateFinancialCodeForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`UpdateFinancialCode form > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
diff --git a/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
index 41c91da6d2..4b3b252377 100644
--- a/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/Organization/__snapshots__/CreateOrganizationForm.test.tsx.snap
@@ -51,15 +51,37 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -69,20 +91,66 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -104,6 +172,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -114,6 +183,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -195,7 +265,8 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1515,15 +1586,37 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -1533,20 +1626,66 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -1568,6 +1707,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -1578,6 +1718,7 @@ exports[`CreateOrganizationForm > renders as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
index 56b6b73718..4c976eb8f0 100644
--- a/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/Person/__snapshots__/CreatePersonForm.test.tsx.snap
@@ -51,15 +51,37 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -69,20 +91,66 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -104,6 +172,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -114,6 +183,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -240,7 +310,8 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1659,15 +1730,37 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -1677,20 +1770,66 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -1712,6 +1851,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -1722,6 +1862,7 @@ exports[`CreatePersonForm > renders as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap b/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
index c2e6a626de..09a570d6c7 100644
--- a/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/create/__snapshots__/CreateContactContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 .c17.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c17.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c17.btn.btn-primary:hover,
+.c17.btn.btn-primary:active,
+.c17.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c17.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c17.btn.btn-secondary:hover,
+.c17.btn.btn-secondary:active,
+.c17.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c17.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 .c17.btn.btn-info:hover,
 .c17.btn.btn-info:active,
 .c17.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c17.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c17.btn.btn-light:hover,
+.c17.btn.btn-light:active,
+.c17.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c17.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c17.btn.btn-dark:hover,
+.c17.btn.btn-dark:active,
+.c17.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c17.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c17.btn.btn-danger:hover,
+.c17.btn.btn-danger:active,
+.c17.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c17.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c17.btn.btn-warning:hover,
+.c17.btn.btn-warning:active,
+.c17.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c17.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 .c17.btn.btn-link:hover,
 .c17.btn.btn-link:active,
 .c17.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 
 .c17.btn.btn-link:disabled,
 .c17.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -211,9 +281,10 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
@@ -221,10 +292,11 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 
 .c4 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #053662;
 }
 
 .c3 {
+  color: #474543;
   font-size: 30px;
   cursor: pointer;
 }
@@ -259,7 +331,8 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 
 .c12 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -357,6 +430,7 @@ exports[`CreateContactContainer component > should render as expected 1`] = `
 }
 
 .c5 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   overflow: inherit;
diff --git a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Container.test.tsx.snap b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Container.test.tsx.snap
index c764a764f0..b8ea1e90f5 100644
--- a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Container.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Container.test.tsx.snap
@@ -7,9 +7,10 @@ exports[`ContactViewContainer component > renders as expected 1`] = `
   />
   <div />
   .c2 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
@@ -25,6 +26,7 @@ exports[`ContactViewContainer component > renders as expected 1`] = `
   min-width: 30rem;
   overflow: auto;
   padding: 1rem;
+  background-color: #f2f2f2;
 }
 
 <div
diff --git a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Organization.test.tsx.snap b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Organization.test.tsx.snap
index 93fb4bf2b2..e1e08b5bdb 100644
--- a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Organization.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Organization.test.tsx.snap
@@ -26,15 +26,17 @@ exports[`Contact OrganizationView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -50,18 +52,24 @@ exports[`Contact OrganizationView component > renders as expected 1`] = `
 .c2 {
   border-radius: 0.5rem;
   background-color: white;
-  border: 1px solid;
+  border: 1px solid #606060;
   padding: 0.5rem 1.5rem;
   font-size: 1.6rem;
+  color: #606060;
 }
 
 .c2.active {
-  border: 1px solid;
+  color: #42814A;
+  border: 1px solid #42814A;
+}
+
+.c7 {
+  color: #428bca;
 }
 
 .c7 a {
   font-weight: bold;
-  color: !important;
+  color: #428bca !important;
 }
 
 <div
@@ -328,15 +336,17 @@ exports[`Contact OrganizationView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c2 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -397,9 +407,10 @@ exports[`Contact OrganizationView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
diff --git a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Person.test.tsx.snap b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Person.test.tsx.snap
index 1bb8a722f5..66fb81becf 100644
--- a/source/frontend/src/features/contacts/contact/detail/__snapshots__/Person.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/detail/__snapshots__/Person.test.tsx.snap
@@ -26,15 +26,17 @@ exports[`Contact PersonView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c6 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -50,18 +52,24 @@ exports[`Contact PersonView component > renders as expected 1`] = `
 .c2 {
   border-radius: 0.5rem;
   background-color: white;
-  border: 1px solid;
+  border: 1px solid #606060;
   padding: 0.5rem 1.5rem;
   font-size: 1.6rem;
+  color: #606060;
 }
 
 .c2.active {
-  border: 1px solid;
+  color: #42814A;
+  border: 1px solid #42814A;
+}
+
+.c5 {
+  color: #428bca;
 }
 
 .c5 a {
   font-weight: bold;
-  color: !important;
+  color: #428bca !important;
 }
 
 <div
@@ -273,15 +281,17 @@ exports[`Contact PersonView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c2 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -382,9 +392,10 @@ exports[`Contact PersonView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
diff --git a/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
index e90f0011cd..ad50ccf028 100644
--- a/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/Organization/__snapshots__/UpdateOrganizationForm.test.tsx.snap
@@ -51,15 +51,37 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -69,20 +91,66 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -104,6 +172,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -114,6 +183,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -195,7 +265,8 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 
 .c6 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1633,15 +1704,37 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -1651,20 +1744,66 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -1686,6 +1825,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -1696,6 +1836,7 @@ exports[`UpdateOrganizationForm > renders as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
index 80daa20ec7..bad300dc3e 100644
--- a/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/Person/__snapshots__/UpdatePersonForm.test.tsx.snap
@@ -51,15 +51,37 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c10.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c10.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c10.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c10.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -69,20 +91,66 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c10.btn.btn-info:hover,
 .c10.btn.btn-info:active,
 .c10.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c10.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c10.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c10.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -104,6 +172,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c10.btn.btn-link:hover,
 .c10.btn.btn-link:active,
 .c10.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -114,6 +183,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 
 .c10.btn.btn-link:disabled,
 .c10.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -199,7 +269,8 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 
 .c7 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1734,15 +1805,37 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -1752,20 +1845,66 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -1787,6 +1926,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -1797,6 +1937,7 @@ exports[`UpdatePersonForm > renders as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap b/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
index c19bbacb00..f50cbf38d2 100644
--- a/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
+++ b/source/frontend/src/features/contacts/contact/edit/__snapshots__/UpdateContactContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 .c16.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c16.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c16.btn.btn-primary:hover,
+.c16.btn.btn-primary:active,
+.c16.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c16.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c16.btn.btn-secondary:hover,
+.c16.btn.btn-secondary:active,
+.c16.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c16.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 .c16.btn.btn-info:hover,
 .c16.btn.btn-info:active,
 .c16.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c16.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c16.btn.btn-light:hover,
+.c16.btn.btn-light:active,
+.c16.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c16.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c16.btn.btn-dark:hover,
+.c16.btn.btn-dark:active,
+.c16.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c16.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c16.btn.btn-danger:hover,
+.c16.btn.btn-danger:active,
+.c16.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c16.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c16.btn.btn-warning:hover,
+.c16.btn.btn-warning:active,
+.c16.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c16.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 .c16.btn.btn-link:hover,
 .c16.btn.btn-link:active,
 .c16.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 
 .c16.btn.btn-link:disabled,
 .c16.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -201,9 +271,10 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
@@ -211,10 +282,11 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 
 .c4 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #053662;
 }
 
 .c3 {
+  color: #474543;
   font-size: 30px;
   cursor: pointer;
 }
@@ -266,7 +338,8 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 
 .c13 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -338,6 +411,7 @@ exports[`UpdateContactContainer > renders as expected 1`] = `
 }
 
 .c5 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   overflow: inherit;
diff --git a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
index 3f936f8313..dd34e58373 100644
--- a/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
+++ b/source/frontend/src/features/contacts/list/__snapshots__/ContactListView.test.tsx.snap
@@ -58,15 +58,37 @@ exports[`Contact List View > matches snapshot 1`] = `
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -76,20 +98,66 @@ exports[`Contact List View > matches snapshot 1`] = `
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -111,6 +179,7 @@ exports[`Contact List View > matches snapshot 1`] = `
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -121,6 +190,7 @@ exports[`Contact List View > matches snapshot 1`] = `
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,29 +219,53 @@ exports[`Contact List View > matches snapshot 1`] = `
   margin-right: 0;
 }
 
-.c19.c19.btn {
+.c20.c20.btn {
   background-color: unset;
   border: none;
 }
 
-.c19.c19.btn:hover,
-.c19.c19.btn:focus,
-.c19.c19.btn:active {
+.c20.c20.btn:hover,
+.c20.c20.btn:focus,
+.c20.c20.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c19.c19.btn svg {
+.c20.c20.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c19.c19.btn svg:hover {
+.c20.c20.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
+.c20.c20.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c20.c20.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c20.c20.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c20.c20.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c20.c20.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c20.c20.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -219,11 +313,11 @@ exports[`Contact List View > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c20 {
+.c21 {
   margin-top: 0.3rem;
 }
 
-.c21 {
+.c22 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -232,7 +326,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   padding: 0;
 }
 
-.c21:disabled {
+.c22:disabled {
   background: white;
 }
 
@@ -302,6 +396,7 @@ exports[`Contact List View > matches snapshot 1`] = `
 }
 
 .c4 {
+  background-color: #d9eaf7;
   border-radius: 0.4rem;
   padding: 1rem;
   max-width: 85%;
@@ -324,6 +419,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   display: inline-block;
   margin: 0rem 0.5rem;
   padding: 0.2rem;
+  color: #42814A;
 }
 
 .c1 {
@@ -335,7 +431,7 @@ exports[`Contact List View > matches snapshot 1`] = `
   overflow-y: auto;
 }
 
-.c18 {
+.c19 {
   -webkit-box-pack: space-around;
   -webkit-justify-content: space-around;
   -ms-flex-pack: space-around;
@@ -343,9 +439,17 @@ exports[`Contact List View > matches snapshot 1`] = `
   width: 100%;
 }
 
-.c17 a {
+.c17 {
+  color: #606060;
+}
+
+.c17.active {
+  color: #42814A;
+}
+
+.c18 a {
   font-weight: bold;
-  color: !important;
+  color: #428bca !important;
 }
 
 .c0 {
@@ -1068,7 +1172,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="active"
+                      class="c17 active"
                     >
                       <svg
                         class="mr-2"
@@ -1093,7 +1197,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="active"
+                      class="c17 active"
                     >
                       <svg
                         fill="currentColor"
@@ -1117,7 +1221,7 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c17"
+                      class="c18"
                     >
                       <a
                         href="/contact/1"
@@ -1187,10 +1291,10 @@ exports[`Contact List View > matches snapshot 1`] = `
                     title=""
                   >
                     <div
-                      class="c6 c18"
+                      class="c6 c19"
                     >
                       <button
-                        class="c13 Button c19 btn btn-light"
+                        class="c13 Button c20 btn btn-light"
                         title="View Contact"
                         type="button"
                       >
@@ -1252,17 +1356,17 @@ exports[`Contact List View > matches snapshot 1`] = `
                     class="d-flex"
                   >
                     <span
-                      class="c20"
+                      class="c21"
                     >
                       Show
                     </span>
                     <input
-                      class="c21 form-control"
+                      class="c22 form-control"
                       type="number"
                       value="10"
                     />
                     <span
-                      class="c20"
+                      class="c21"
                     >
                       Entries
                     </span>
diff --git a/source/frontend/src/features/disposition/list/DispositionFilter/__snapshots__/DispositionFilter.test.tsx.snap b/source/frontend/src/features/disposition/list/DispositionFilter/__snapshots__/DispositionFilter.test.tsx.snap
index ceea43b93c..ade4764e6c 100644
--- a/source/frontend/src/features/disposition/list/DispositionFilter/__snapshots__/DispositionFilter.test.tsx.snap
+++ b/source/frontend/src/features/disposition/list/DispositionFilter/__snapshots__/DispositionFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Disposition filter > matches snapshot 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Disposition filter > matches snapshot 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Disposition filter > matches snapshot 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Disposition filter > matches snapshot 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,7 @@ exports[`Disposition filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap b/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
index 1cb21f0c42..6d719fbf0b 100644
--- a/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
+++ b/source/frontend/src/features/disposition/list/__snapshots__/DispositionListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Disposition List View > matches snapshot 1`] = `
 .c10.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c10.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c10.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c10.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Disposition List View > matches snapshot 1`] = `
 .c10.btn.btn-info:hover,
 .c10.btn.btn-info:active,
 .c10.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c10.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c10.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c10.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
 .c10.btn.btn-link:hover,
 .c10.btn.btn-link:active,
 .c10.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
 
 .c10.btn.btn-link:disabled,
 .c10.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`Disposition List View > matches snapshot 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c11.c11.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c11.c11.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c11.c11.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c11.c11.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c11.c11.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c11.c11.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c6 {
   padding-right: 0;
 }
@@ -233,6 +327,7 @@ exports[`Disposition List View > matches snapshot 1`] = `
 }
 
 .c5 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
index c579435e98..b3b0c0ffda 100644
--- a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailForm.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -138,7 +208,8 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
 
 .c5 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -174,7 +245,8 @@ exports[`DocumentDetailForm component > renders as expected 1`] = `
   margin-bottom: 1rem;
   text-align: left;
   padding-top: 1rem;
-  border-bottom: solid 0.1rem;
+  color: var(--theme-blue-100);
+  border-bottom: solid 0.1rem var(--theme-blue-90);
 }
 
 .c7 {
diff --git a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
index e973434f00..11d8d11dd8 100644
--- a/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentDetail/__snapshots__/DocumentDetailView.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -138,7 +208,8 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
 
 .c5 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -174,7 +245,8 @@ exports[`DocumentDetailView component > renders as expected 1`] = `
   margin-bottom: 1rem;
   text-align: left;
   padding-top: 1rem;
-  border-bottom: solid 0.1rem;
+  color: var(--theme-blue-100);
+  border-bottom: solid 0.1rem var(--theme-blue-90);
 }
 
 .c10 {
diff --git a/source/frontend/src/features/documents/documentUpload/__snapshots__/DocumentUploadForm.test.tsx.snap b/source/frontend/src/features/documents/documentUpload/__snapshots__/DocumentUploadForm.test.tsx.snap
index 6008f24ddf..36517d5b71 100644
--- a/source/frontend/src/features/documents/documentUpload/__snapshots__/DocumentUploadForm.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentUpload/__snapshots__/DocumentUploadForm.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DocumentUploadView component > renders as expected 1`] = `
 .c2 {
-  border: 1px solid;
+  border: 1px solid #606060;
   border-style: dashed;
   height: 10rem;
   line-height: 10rem;
@@ -18,10 +18,12 @@ exports[`DocumentUploadView component > renders as expected 1`] = `
 
 .c4 {
   display: inline-block;
+  color: var(--surface-color-primary-button-default);
   cursor: pointer;
 }
 
 .c4:hover {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
diff --git a/source/frontend/src/features/documents/list/DocumentFilter/__snapshots__/DocumentFilterForm.test.tsx.snap b/source/frontend/src/features/documents/list/DocumentFilter/__snapshots__/DocumentFilterForm.test.tsx.snap
index 649542f6a6..5afab3b799 100644
--- a/source/frontend/src/features/documents/list/DocumentFilter/__snapshots__/DocumentFilterForm.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/DocumentFilter/__snapshots__/DocumentFilterForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`DocumentFilterForm component > renders as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`DocumentFilterForm component > renders as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`DocumentFilterForm component > renders as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`DocumentFilterForm component > renders as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,6 +212,7 @@ exports[`DocumentFilterForm component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
@@ -412,15 +483,37 @@ exports[`DocumentFilterForm component > renders with data as expected 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -430,20 +523,66 @@ exports[`DocumentFilterForm component > renders with data as expected 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -465,6 +604,7 @@ exports[`DocumentFilterForm component > renders with data as expected 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -475,6 +615,7 @@ exports[`DocumentFilterForm component > renders with data as expected 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -504,6 +645,7 @@ exports[`DocumentFilterForm component > renders with data as expected 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
diff --git a/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap b/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
index 94f56c9dc7..e7398c2d38 100644
--- a/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
@@ -35,12 +35,28 @@ exports[`Document Results Table > matches snapshot 1`] = `
   height: 1.6rem;
 }
 
-.c4 .btn.btn-primary {
+.c5 [id^='document-view'] {
+  color: #428bca;
+}
+
+.c5 [id^='document-delete'] {
+  color: #428bca;
+}
+
+.c5 [id^='document-delete']:hover {
+  color: #CE3E39;
+}
+
+.c5 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
   margin-left: 0.5rem;
 }
 
+.c4 .tooltip-icon {
+  color: #9F9D9C;
+}
+
 .c3 {
   display: contents;
   text-overflow: ellipsis;
@@ -320,7 +336,7 @@ exports[`Document Results Table > matches snapshot 1`] = `
                 class="col-auto"
               >
                 <span
-                  class=""
+                  class="c4"
                 >
                   <span
                     class="tooltip-icon"
@@ -360,7 +376,7 @@ exports[`Document Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4 no-gutters row"
+              class="c5 no-gutters row"
             />
           </div>
         </div>
@@ -415,7 +431,7 @@ exports[`Document Results Table > matches snapshot 1`] = `
                 class="col-auto"
               >
                 <span
-                  class=""
+                  class="c4"
                 >
                   <span
                     class="tooltip-icon"
@@ -455,7 +471,7 @@ exports[`Document Results Table > matches snapshot 1`] = `
             title=""
           >
             <div
-              class="c4 no-gutters row"
+              class="c5 no-gutters row"
             />
           </div>
         </div>
diff --git a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
index 78d9a49654..bee0e0c716 100644
--- a/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
+++ b/source/frontend/src/features/documents/list/__snapshots__/DocumentListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Document List View > renders as expected 1`] = `
 .c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c6.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-primary:hover,
+.c6.btn.btn-primary:active,
+.c6.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c6.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c6.btn.btn-secondary:hover,
+.c6.btn.btn-secondary:active,
+.c6.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c6.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Document List View > renders as expected 1`] = `
 .c6.btn.btn-info:hover,
 .c6.btn.btn-info:active,
 .c6.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c6.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c6.btn.btn-light:hover,
+.c6.btn.btn-light:active,
+.c6.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c6.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c6.btn.btn-dark:hover,
+.c6.btn.btn-dark:active,
+.c6.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c6.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-danger:hover,
+.c6.btn.btn-danger:active,
+.c6.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c6.btn.btn-warning:hover,
+.c6.btn.btn-warning:active,
+.c6.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Document List View > renders as expected 1`] = `
 .c6.btn.btn-link:hover,
 .c6.btn.btn-link:active,
 .c6.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Document List View > renders as expected 1`] = `
 
 .c6.btn.btn-link:disabled,
 .c6.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,7 +219,8 @@ exports[`Document List View > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -190,11 +261,11 @@ exports[`Document List View > renders as expected 1`] = `
   height: 1.6rem;
 }
 
-.c12 {
+.c13 {
   margin-top: 0.3rem;
 }
 
-.c13 {
+.c14 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -203,7 +274,7 @@ exports[`Document List View > renders as expected 1`] = `
   padding: 0;
 }
 
-.c13:disabled {
+.c14:disabled {
   background: white;
 }
 
@@ -224,6 +295,7 @@ exports[`Document List View > renders as expected 1`] = `
 }
 
 .c4 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
@@ -231,12 +303,28 @@ exports[`Document List View > renders as expected 1`] = `
   border-left: 0.2rem solid white;
 }
 
-.c11 .btn.btn-primary {
+.c12 [id^='document-view'] {
+  color: #428bca;
+}
+
+.c12 [id^='document-delete'] {
+  color: #428bca;
+}
+
+.c12 [id^='document-delete']:hover {
+  color: #CE3E39;
+}
+
+.c12 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
   margin-left: 0.5rem;
 }
 
+.c11 .tooltip-icon {
+  color: #9F9D9C;
+}
+
 .c10 {
   display: contents;
   text-overflow: ellipsis;
@@ -781,7 +869,7 @@ exports[`Document List View > renders as expected 1`] = `
                     class="col-auto"
                   >
                     <span
-                      class=""
+                      class="c11"
                     >
                       <span
                         class="tooltip-icon"
@@ -821,7 +909,7 @@ exports[`Document List View > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c11 no-gutters row"
+                  class="c12 no-gutters row"
                 />
               </div>
             </div>
@@ -876,7 +964,7 @@ exports[`Document List View > renders as expected 1`] = `
                     class="col-auto"
                   >
                     <span
-                      class=""
+                      class="c11"
                     >
                       <span
                         class="tooltip-icon"
@@ -916,7 +1004,7 @@ exports[`Document List View > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c11 no-gutters row"
+                  class="c12 no-gutters row"
                 />
               </div>
             </div>
@@ -949,17 +1037,17 @@ exports[`Document List View > renders as expected 1`] = `
                 class="d-flex"
               >
                 <span
-                  class="c12"
+                  class="c13"
                 >
                   Show
                 </span>
                 <input
-                  class="c13 form-control"
+                  class="c14 form-control"
                   type="number"
                   value="10"
                 />
                 <span
-                  class="c12"
+                  class="c13"
                 >
                   Entries
                 </span>
diff --git a/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap b/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
index 0794dd0af7..8c1cf91264 100644
--- a/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
+++ b/source/frontend/src/features/help/containers/__snapshots__/HelpModalContentContainer.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`HelpModalContentContainer component > renders correctly 1`] = `
   />
   <div />
   .c0 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
index 70b3ae3b72..2c3ebb4656 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -151,6 +221,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -208,18 +279,21 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c28 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c21 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -229,7 +303,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -237,13 +311,15 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -258,6 +334,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -299,7 +376,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -318,7 +395,8 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c12 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -359,9 +437,11 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c22.c22.c22 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c24 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -373,6 +453,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 .c18 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c18 .tab-content .tab-pane {
@@ -381,6 +462,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c20 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -390,18 +472,22 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c20 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c20 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c20 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -414,6 +500,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c25 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -428,7 +515,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 
 .c29 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -451,6 +538,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
@@ -479,6 +567,7 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
 }
 
 .c10 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
index 661e2a9b4d..794e515386 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AdministrationSubForm.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`AdministrationSubForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -66,6 +67,7 @@ exports[`AdministrationSubForm component > renders as expected 1`] = `
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
@@ -89,7 +91,8 @@ exports[`AdministrationSubForm component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/add/__snapshots__/FeeDeterminationSubForm.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/FeeDeterminationSubForm.test.tsx.snap
index 9fadbff25c..2a405e1dcc 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/FeeDeterminationSubForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/FeeDeterminationSubForm.test.tsx.snap
@@ -26,7 +26,8 @@ exports[`LeaseFeeDeterminationSubForm component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
index 19c0a189a6..c28be99a2f 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/LeaseDetailSubForm.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`LeaseDetailSubForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -37,7 +38,8 @@ exports[`LeaseDetailSubForm component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
index 5d0e844e59..7c72e7bc9a 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/__snapshots__/DepositsContainer.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`DepositsContainer > renders as expected 1`] = `
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
index 42c28c4672..6f599fce54 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositNotes/__snapshots__/DepositNotes.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`DepositNotes component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
index 3c890a4a20..a7a5b1bd67 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReceivedContainer/__snapshots__/DepositsReceivedContainer.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`DepositsReceivedContainer component > renders as expected 1`] = `
   <div />
   .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
index b36a25db73..7a4d94dd9e 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/components/DepositsReturnedContainer/__snapshots__/DepositsReturnedContainer.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`DepositsReturnedContainer component > renders as expected 1`] = `
   <div />
   .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -30,6 +31,18 @@ exports[`DepositsReturnedContainer component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
+.c3 [id^='edit-depositreturn'] {
+  color: #428bca;
+}
+
+.c3 [id^='delete-depositreturn'] {
+  color: #428bca;
+}
+
+.c3 [id^='delete-depositreturn']:hover {
+  color: #CE3E39;
+}
+
 .c3 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
index 1f4839889d..2a249e0003 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/receivedDepositModal/__snapshots__/ReceivedDepositForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -191,12 +262,13 @@ exports[`ReceivedDepositForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c6.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c2.required::before {
@@ -529,15 +601,37 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -547,20 +641,66 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -582,6 +722,7 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -592,6 +733,7 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -626,6 +768,7 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -670,12 +813,13 @@ exports[`ReceivedDepositForm component > renders with data as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c6.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c2.required::before {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
index 7749728ec9..e9f3327538 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/deposits/modal/returnedDepositModal/__snapshots__/ReturnDepositForm.test.tsx.snap
@@ -6,8 +6,12 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  <div
-    class="py-3 mb-4 pl-3"
+  .c0 {
+  background-color: #f2f2f2;
+}
+
+<div
+    class="c0 py-3 mb-4 pl-3"
   >
     <div
       class="pb-3 row"
@@ -84,15 +88,37 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -102,20 +128,66 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -137,6 +209,7 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -147,6 +220,7 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -181,6 +255,7 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -225,12 +300,13 @@ exports[`ReturnDepositForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c7.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c0 .form-group {
@@ -578,8 +654,12 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
     class="Toastify"
   />
   <div />
-  <div
-    class="py-3 mb-4 pl-3"
+  .c0 {
+  background-color: #f2f2f2;
+}
+
+<div
+    class="c0 py-3 mb-4 pl-3"
   >
     <div
       class="pb-3 row"
@@ -656,15 +736,37 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -674,20 +776,66 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -709,6 +857,7 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -719,6 +868,7 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -753,6 +903,7 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -797,12 +948,13 @@ exports[`ReturnDepositForm component > renders with data as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c7.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c0 .form-group {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
index 68addf3762..aba694faa4 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailAdministration.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`DetailAdministration component > renders a complete lease as expected 1
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -461,7 +462,8 @@ exports[`DetailAdministration component > renders minimally as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
index 0c7ddca76e..0880cb74f7 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/DetailFeeDetermination.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`DetailFeeDetermination component > renders a complete lease as expected
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -285,7 +286,8 @@ exports[`DetailFeeDetermination component > renders minimally as expected 1`] =
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap
index ef45e993bf..c6468d9990 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/LeaseDetailsView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -143,7 +213,8 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -155,14 +226,14 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c5.required::before {
+.c6.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c4 {
+.c5 {
   font-weight: bold;
 }
 
@@ -182,6 +253,17 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
   margin: 0;
 }
 
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
 <div
     class="c0 form-section"
   >
@@ -206,7 +288,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
               class="d-flex justify-content-end my-1 col-auto"
             >
               <button
-                class="c3 Button btn btn-primary"
+                class="c3 Button c4 btn btn-primary"
                 type="button"
               >
                 <div
@@ -248,13 +330,13 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c4"
+            class="c5"
           >
             Ministry project:
           </label>
         </div>
         <div
-          class="c5 text-left col"
+          class="c6 text-left col"
         >
           TESTPROJ - Test Project
         </div>
@@ -266,13 +348,13 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c4"
+            class="c5"
           >
             Product:
           </label>
         </div>
         <div
-          class="c5 text-left col"
+          class="c6 text-left col"
         />
       </div>
       <div
@@ -282,7 +364,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c4"
+            class="c5"
           >
             Status:
             <span>
@@ -310,7 +392,7 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
           </label>
         </div>
         <div
-          class="c5 text-left col-4"
+          class="c6 text-left col-4"
         >
           Active
         </div>
@@ -322,13 +404,13 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
           class="pr-0 text-left col-3"
         >
           <label
-            class="c4"
+            class="c5"
           >
             Account type:
           </label>
         </div>
         <div
-          class="c5 text-left col-5"
+          class="c6 text-left col-5"
         >
           Receivable
         </div>
@@ -346,13 +428,13 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
               class="pr-0 text-left col-6"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Commencement:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             />
           </div>
         </div>
@@ -366,13 +448,13 @@ exports[`LeaseDetailView component > renders minimally as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Expiry:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             />
           </div>
         </div>
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
index b79eae50ae..3cc3cf47e4 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`LeasePropertiesInformation component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -40,14 +41,16 @@ exports[`LeasePropertiesInformation component > renders as expected 1`] = `
 .c6 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c7 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
index d824e382e8..4fac0b079a 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
@@ -20,14 +20,16 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
 .c3 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c4 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
@@ -300,14 +302,16 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
 .c3 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c4 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
index 69e6a33bd5..fb1bf9c4a1 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/documents/__snapshots__/DocumentsPage.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 .c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c6.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-primary:hover,
+.c6.btn.btn-primary:active,
+.c6.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c6.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c6.btn.btn-secondary:hover,
+.c6.btn.btn-secondary:active,
+.c6.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c6.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 .c6.btn.btn-info:hover,
 .c6.btn.btn-info:active,
 .c6.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c6.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c6.btn.btn-light:hover,
+.c6.btn.btn-light:active,
+.c6.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c6.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c6.btn.btn-dark:hover,
+.c6.btn.btn-dark:active,
+.c6.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c6.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-danger:hover,
+.c6.btn.btn-danger:active,
+.c6.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c6.btn.btn-warning:hover,
+.c6.btn.btn-warning:active,
+.c6.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 .c6.btn.btn-link:hover,
 .c6.btn.btn-link:active,
 .c6.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 
 .c6.btn.btn-link:disabled,
 .c6.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,7 +219,8 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -207,6 +278,7 @@ exports[`Lease Documents Page > renders as expected 1`] = `
 }
 
 .c4 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem 0.5rem 0rem 0rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
index a8b3e0d5f9..7959e82435 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/improvements/__snapshots__/AddImprovementsContainer.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`Add Improvements container component > displays the improvement types i
   <div />
   .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -460,7 +461,8 @@ exports[`Add Improvements container component > renders as expected 1`] = `
   <div />
   .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
index 7af330a45a..d738c3a27b 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/details/__snapshots__/Insurance.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -41,6 +43,7 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -328,7 +331,8 @@ exports[`Lease Insurance > renders as expected 1`] = `
   <div />
   .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
index cdb9f6a6dc..6935840043 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/insurance/edit/__snapshots__/EditInsuranceContainer.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -41,6 +43,7 @@ exports[`Edit Lease Insurance > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
index ef88bde0a1..91a1de2c33 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/__snapshots__/PeriodPaymentsContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -143,7 +213,8 @@ exports[`PaymentsView component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -155,7 +226,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -165,7 +236,18 @@ exports[`PaymentsView component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -187,7 +269,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c7 {
+.c8 {
   gap: 3rem;
   background-color: white;
   min-height: 6rem;
@@ -221,7 +303,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c4 Button c5 btn btn-primary"
+                class="c4 Button c5 c6 btn btn-primary"
                 type="button"
               >
                 <div
@@ -252,7 +334,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
       class="collapse show"
     >
       <div
-        class="c6 c7"
+        class="c7 c8"
       >
         <p>
           There are no recorded payments for this period.
@@ -313,15 +395,37 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -331,20 +435,66 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -366,6 +516,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -376,6 +527,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -406,7 +558,8 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -418,7 +571,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -428,7 +581,18 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -450,7 +614,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   margin: 0;
 }
 
-.c7 {
+.c8 {
   gap: 3rem;
   background-color: white;
   min-height: 6rem;
@@ -484,7 +648,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c4 Button c5 btn btn-primary"
+                class="c4 Button c5 c6 btn btn-primary"
                 type="button"
               >
                 <div
@@ -515,7 +679,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
       class="collapse show"
     >
       <div
-        class="c6 c7"
+        class="c7 c8"
       >
         <p>
           There are no recorded payments for this period.
@@ -576,15 +740,37 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -594,20 +780,66 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -629,6 +861,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -639,6 +872,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -669,7 +903,8 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -681,7 +916,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -691,7 +926,18 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -713,14 +959,26 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c6 .btn.btn-primary {
+.c7 [id^='edit-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period']:hover {
+  color: #CE3E39;
+}
+
+.c7 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
 }
@@ -749,7 +1007,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c3 Button c4 btn btn-primary"
+                class="c3 Button c4 c5 btn btn-primary"
                 type="button"
               >
                 <div
@@ -1101,7 +1359,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c5 align-items-center"
+                  class="c6 align-items-center"
                 >
                   <b>
                     Period 1
@@ -1188,7 +1446,7 @@ exports[`PeriodsPaymentsContainer component > renders as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c5 c6"
+                  class="c6 c7"
                 >
                   <button
                     class="c3 Button Button--icon-only btn btn-primary"
@@ -1312,15 +1570,37 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -1330,20 +1610,66 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -1365,6 +1691,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -1375,6 +1702,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -1405,7 +1733,8 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1417,7 +1746,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
   border-radius: 0.5rem;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1427,7 +1756,18 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
   flex-wrap: nowrap;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -1449,14 +1789,26 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
   margin: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c6 .btn.btn-primary {
+.c7 [id^='edit-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period']:hover {
+  color: #CE3E39;
+}
+
+.c7 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
 }
@@ -1485,7 +1837,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
               class="my-1 col-auto"
             >
               <button
-                class="c3 Button c4 btn btn-primary"
+                class="c3 Button c4 c5 btn btn-primary"
                 type="button"
               >
                 <div
@@ -1837,7 +2189,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
                 title=""
               >
                 <div
-                  class="c5 align-items-center"
+                  class="c6 align-items-center"
                 >
                   <b>
                     Period 1
@@ -1924,7 +2276,7 @@ exports[`PeriodsPaymentsContainer component > renders with data as expected 1`]
                 title=""
               >
                 <div
-                  class="c5 c6"
+                  class="c6 c7"
                 >
                   <button
                     class="c3 Button Button--icon-only btn btn-primary"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
index e1ed314572..3fe343dce9 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/payment/__snapshots__/PaymentForm.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`PaymentForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -63,6 +64,7 @@ exports[`PaymentForm component > renders as expected 1`] = `
 
 .c0 .check-field label {
   width: 100%;
+  color: #474543;
 }
 
 .c0 .form-group {
@@ -99,6 +101,7 @@ exports[`PaymentForm component > renders as expected 1`] = `
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   border-radius: 0.5rem;
+  background-color: #f2f2f2;
 }
 
 .c4 input {
@@ -395,6 +398,7 @@ exports[`PaymentForm component > renders with data as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -446,6 +450,7 @@ exports[`PaymentForm component > renders with data as expected 1`] = `
 
 .c0 .check-field label {
   width: 100%;
+  color: #474543;
 }
 
 .c0 .form-group {
@@ -482,6 +487,7 @@ exports[`PaymentForm component > renders with data as expected 1`] = `
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   border-radius: 0.5rem;
+  background-color: #f2f2f2;
 }
 
 .c4 input {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/__snapshots__/PeriodForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/__snapshots__/PeriodForm.test.tsx.snap
index 2e55422177..8c6137a9dc 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/__snapshots__/PeriodForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/modal/period/__snapshots__/PeriodForm.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`PeriodForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -122,6 +123,7 @@ exports[`PeriodForm component > renders as expected 1`] = `
 
 .c0 .check-field label {
   width: 100%;
+  color: #474543;
 }
 
 .c0 .form-group {
@@ -806,6 +808,7 @@ exports[`PeriodForm component > renders with data as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -916,6 +919,7 @@ exports[`PeriodForm component > renders with data as expected 1`] = `
 
 .c0 .check-field label {
   width: 100%;
+  color: #474543;
 }
 
 .c0 .form-group {
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/__snapshots__/PaymentsView.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/__snapshots__/PaymentsView.test.tsx.snap
index 2ff75675a9..28afaf300b 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/__snapshots__/PaymentsView.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/payments/__snapshots__/PaymentsView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -143,7 +213,8 @@ exports[`PaymentsView component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -155,7 +226,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -165,7 +236,18 @@ exports[`PaymentsView component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -187,7 +269,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c7 {
+.c8 {
   gap: 3rem;
   background-color: white;
   min-height: 6rem;
@@ -221,7 +303,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c4 Button c5 btn btn-primary"
+                class="c4 Button c5 c6 btn btn-primary"
                 type="button"
               >
                 <div
@@ -252,7 +334,7 @@ exports[`PaymentsView component > renders as expected 1`] = `
       class="collapse show"
     >
       <div
-        class="c6 c7"
+        class="c7 c8"
       >
         <p>
           There are no recorded payments for this period.
@@ -313,15 +395,37 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -331,20 +435,66 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -366,6 +516,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -376,6 +527,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -406,7 +558,8 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -418,7 +571,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -428,7 +581,18 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -450,7 +614,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
   margin: 0;
 }
 
-.c7 {
+.c8 {
   gap: 3rem;
   background-color: white;
   min-height: 6rem;
@@ -484,7 +648,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c4 Button c5 btn btn-primary"
+                class="c4 Button c5 c6 btn btn-primary"
                 type="button"
               >
                 <div
@@ -515,7 +679,7 @@ exports[`PaymentsView component > renders with data as expected 1`] = `
       class="collapse show"
     >
       <div
-        class="c6 c7"
+        class="c7 c8"
       >
         <p>
           There are no recorded payments for this period.
diff --git a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
index ca7b292440..5ea9d55bf8 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/payment/table/periods/__snapshots__/PaymentPeriodsView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PeriodsForm component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PeriodsForm component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PeriodsForm component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PeriodsForm component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -143,7 +213,8 @@ exports[`PeriodsForm component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -155,7 +226,18 @@ exports[`PeriodsForm component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -201,7 +283,7 @@ exports[`PeriodsForm component > renders as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c3 Button c4 btn btn-primary"
+                class="c3 Button c4 c5 btn btn-primary"
                 type="button"
               >
                 <div
@@ -573,15 +655,37 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -591,20 +695,66 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -626,6 +776,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -636,6 +787,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -666,7 +818,8 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -678,7 +831,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -688,7 +841,18 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -710,14 +874,26 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
   margin: 0;
 }
 
-.c6 {
+.c7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
 }
 
-.c6 .btn.btn-primary {
+.c7 [id^='edit-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period'] {
+  color: #428bca;
+}
+
+.c7 [id^='delete-period']:hover {
+  color: #CE3E39;
+}
+
+.c7 .btn.btn-primary {
   background-color: transparent;
   padding: 0;
 }
@@ -746,7 +922,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
               class="my-1 col-auto"
             >
               <button
-                class="c3 Button c4 btn btn-primary"
+                class="c3 Button c4 c5 btn btn-primary"
                 type="button"
               >
                 <div
@@ -1098,7 +1274,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c5 align-items-center"
+                  class="c6 align-items-center"
                 >
                   <b>
                     Period 1
@@ -1185,7 +1361,7 @@ exports[`PeriodsForm component > renders with data as expected 1`] = `
                 title=""
               >
                 <div
-                  class="c5 c6"
+                  class="c6 c7"
                 >
                   <button
                     class="c3 Button Button--icon-only btn btn-primary"
diff --git a/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/AddLeaseStakeholderForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/AddLeaseStakeholderForm.test.tsx.snap
index 2d830935a9..e36c4c8e41 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/AddLeaseStakeholderForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/AddLeaseStakeholderForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,37 +211,51 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c7 {
+.c8 {
   margin-top: 3rem;
   font-size: 1.4rem;
 }
 
-.c7 .table .tr .td:first-of-type,
-.c7 .table .tr .td:nth-of-type(2),
-.c7 .table .tr .th:first-of-type,
-.c7 .table .tr .th:nth-of-type(2) {
+.c8 .table .tr .td:first-of-type,
+.c8 .table .tr .td:nth-of-type(2),
+.c8 .table .tr .th:first-of-type,
+.c8 .table .tr .th:nth-of-type(2) {
   border-left: 0;
   border-right: 0;
   padding: 0;
 }
 
-.c8 {
+.c9 {
   font-size: 1.4rem;
+  color: #42814A;
+}
+
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -199,7 +283,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c6 {
+.c7 {
   margin-top: 3rem;
   text-align: left;
 }
@@ -231,7 +315,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
                 class="my-1 col-auto"
               >
                 <button
-                  class="c4 Button c5 btn btn-primary"
+                  class="c4 Button c5 c6 btn btn-primary"
                   type="button"
                 >
                   <div
@@ -271,16 +355,16 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
           , then you will be able to see them on the "Add a Tenant" list.
         </span>
         <div
-          class="c6"
+          class="c7"
         >
           <div
             class="p-0 m-0 container"
           >
             <div
-              class="c7"
+              class="c8"
             >
               <p
-                class="c8"
+                class="c9"
               >
                 0 Tenant(s) associated with this Lease/Licence
               </p>
diff --git a/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/ViewStakeholderForm.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/ViewStakeholderForm.test.tsx.snap
index 5b4815975d..831ceaf0b7 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/ViewStakeholderForm.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/stakeholders/__snapshots__/ViewStakeholderForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,37 +211,51 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c8 {
+.c9 {
   font-size: 1.4rem;
+  color: #42814A;
+}
+
+.c5.btn.btn-primary,
+.c5.btn.btn-primary:active {
+  background-color: #42814A;
 }
 
-.c5.c5 {
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c6.c6 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
-.c7 {
+.c8 {
   margin-top: 3rem;
   font-size: 1.4rem;
 }
 
-.c7 .table .tr .td:first-of-type,
-.c7 .table .tr .td:nth-of-type(2),
-.c7 .table .tr .th:first-of-type,
-.c7 .table .tr .th:nth-of-type(2) {
+.c8 .table .tr .td:first-of-type,
+.c8 .table .tr .td:nth-of-type(2),
+.c8 .table .tr .th:first-of-type,
+.c8 .table .tr .th:nth-of-type(2) {
   border-left: 0;
   border-right: 0;
   padding: 0;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -199,7 +283,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
   margin: 0;
 }
 
-.c6 {
+.c7 {
   margin-top: 3rem;
   text-align: left;
 }
@@ -231,7 +315,7 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
                 class="my-1 col-auto"
               >
                 <button
-                  class="c4 Button c5 btn btn-primary"
+                  class="c4 Button c5 c6 btn btn-primary"
                   type="button"
                 >
                   <div
@@ -271,16 +355,16 @@ exports[`AddLeaseTenantForm component > renders as expected 1`] = `
           , then you will be able to see them on the "Add a Tenant" list.
         </span>
         <div
-          class="c6"
+          class="c7"
         >
           <div
             class="p-0 m-0 container"
           >
             <div
-              class="c7"
+              class="c8"
             >
               <p
-                class="c8"
+                class="c9"
               >
                 0 Tenant(s) associated with this Lease/Licence
               </p>
@@ -448,11 +532,13 @@ exports[`Tenant component > renders as expected 1`] = `
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -485,6 +571,10 @@ exports[`Tenant component > renders as expected 1`] = `
   margin: 0;
 }
 
+.c1 .form-control {
+  color: #2D2D2D;
+}
+
 .c4 {
   background-color: transparent;
   padding-left: 0.5rem;
diff --git a/source/frontend/src/features/leases/detail/LeasePages/surplus/__snapshots__/Surplus.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/surplus/__snapshots__/Surplus.test.tsx.snap
index 677ee37f55..1ed9765635 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/surplus/__snapshots__/Surplus.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/surplus/__snapshots__/Surplus.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Lease Surplus Declaration > renders as expected 1`] = `
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 <div
diff --git a/source/frontend/src/features/leases/detail/__snapshots__/LeaseStatusSummary.test.tsx.snap b/source/frontend/src/features/leases/detail/__snapshots__/LeaseStatusSummary.test.tsx.snap
index a8d5cf418f..7e425f3637 100644
--- a/source/frontend/src/features/leases/detail/__snapshots__/LeaseStatusSummary.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/__snapshots__/LeaseStatusSummary.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`LeaseStatusSummary component > renders as expected when active 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  border: 1px solid;
+  border: 1px solid #FCBA19;
   padding: 0.2rem 1rem;
   height: 90%;
 }
@@ -32,20 +32,40 @@ exports[`LeaseStatusSummary component > renders as expected when active 1`] = `
   color: black;
 }
 
+.c0 b:first-child {
+  color: #FCBA19;
+}
+
 .c0.active {
-  border: 1px solid;
+  border: 1px solid #42814A;
+}
+
+.c0.active b:first-child {
+  color: #42814A;
 }
 
 .c0.terminated {
-  border: 1px solid;
+  border: 1px solid #CE3E39;
+}
+
+.c0.terminated b:first-child {
+  color: #CE3E39;
 }
 
 .c0.discard {
-  border: 1px solid;
+  border: 1px solid #428bca;
+}
+
+.c0.discard b:first-child {
+  color: #428bca;
 }
 
 .c0.draft {
-  border: 1px solid;
+  border: 1px solid #428bca;
+}
+
+.c0.draft b:first-child {
+  color: #428bca;
 }
 
 <div
@@ -79,7 +99,7 @@ exports[`LeaseStatusSummary component > renders as expected when inactive 1`] =
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
-  border: 1px solid;
+  border: 1px solid #FCBA19;
   padding: 0.2rem 1rem;
   height: 90%;
 }
@@ -89,20 +109,40 @@ exports[`LeaseStatusSummary component > renders as expected when inactive 1`] =
   color: black;
 }
 
+.c0 b:first-child {
+  color: #FCBA19;
+}
+
 .c0.active {
-  border: 1px solid;
+  border: 1px solid #42814A;
+}
+
+.c0.active b:first-child {
+  color: #42814A;
 }
 
 .c0.terminated {
-  border: 1px solid;
+  border: 1px solid #CE3E39;
+}
+
+.c0.terminated b:first-child {
+  color: #CE3E39;
 }
 
 .c0.discard {
-  border: 1px solid;
+  border: 1px solid #428bca;
+}
+
+.c0.discard b:first-child {
+  color: #428bca;
 }
 
 .c0.draft {
-  border: 1px solid;
+  border: 1px solid #428bca;
+}
+
+.c0.draft b:first-child {
+  color: #428bca;
 }
 
 <div
diff --git a/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap b/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
index 0341ba30cf..5ba12de28e 100644
--- a/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/LeaseFilter/__snapshots__/LeaseFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Lease Filter > matches snapshot 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Lease Filter > matches snapshot 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Lease Filter > matches snapshot 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Lease Filter > matches snapshot 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`Lease Filter > matches snapshot 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -185,6 +256,7 @@ exports[`Lease Filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
index 8d769d3caa..220c840a6b 100644
--- a/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
+++ b/source/frontend/src/features/leases/list/__snapshots__/LeaseListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,12 +234,37 @@ exports[`Lease and License List View > matches snapshot 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c14.c14.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c14.c14.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c14.c14.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c14.c14.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c14.c14.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c14.c14.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c10 .react-datepicker__calendar-icon {
   width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -237,6 +332,7 @@ exports[`Lease and License List View > matches snapshot 1`] = `
 }
 
 .c5 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap b/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
index f1c49ebcd7..0c157a69ee 100644
--- a/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/reports/aggregated/__snapshots__/ExportAggregatedLeasesContainer.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`PaymentsContainer component > renders as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #428bca;
 }
 
 .c3:hover {
diff --git a/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap b/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
index ec2e036b1a..7515c282d1 100644
--- a/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/reports/payments/__snapshots__/ExportLeasePaymentsContainer.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`PaymentsContainer component > renders as expected 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
+  color: #428bca;
 }
 
 .c3:hover {
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
index c626ad1542..56023cac44 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
+++ b/source/frontend/src/features/leases/shared/propertyPicker/__snapshots__/LeasePropertySelector.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 .c14.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c14.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c14.btn.btn-primary:hover,
+.c14.btn.btn-primary:active,
+.c14.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c14.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c14.btn.btn-secondary:hover,
+.c14.btn.btn-secondary:active,
+.c14.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c14.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 .c14.btn.btn-info:hover,
 .c14.btn.btn-info:active,
 .c14.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c14.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c14.btn.btn-light:hover,
+.c14.btn.btn-light:active,
+.c14.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c14.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c14.btn.btn-dark:hover,
+.c14.btn.btn-dark:active,
+.c14.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c14.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c14.btn.btn-danger:hover,
+.c14.btn.btn-danger:active,
+.c14.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c14.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c14.btn.btn-warning:hover,
+.c14.btn.btn-warning:active,
+.c14.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c14.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 .c14.btn.btn-link:hover,
 .c14.btn.btn-link:active,
 .c14.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c14.btn.btn-link:disabled,
 .c14.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c21.c21.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c21.c21.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c21.c21.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c21.c21.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c21.c21.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c21.c21.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c22.c22.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -237,9 +331,11 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c15 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c5 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -250,7 +346,8 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -291,9 +388,11 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c6.c6.c6 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c8 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -305,6 +404,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 .c2 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c2 .tab-content .tab-pane {
@@ -313,6 +413,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c4 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -322,18 +423,22 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 }
 
 .c4 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c4 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c4 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -346,6 +451,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 }
 
 .c11 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -360,7 +466,7 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 
 .c16 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -375,14 +481,16 @@ exports[`LeasePropertySelector component > renders as expected 1`] = `
 .c23 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c25 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
index ec502e5ea9..0d0ce55a26 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
+++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c5.c5.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c5.c5.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c5.c5.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c5.c5.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c6.c6.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -397,14 +491,16 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
   .c0 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c2 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
index b6a963077a..15923d0369 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/__snapshots__/AcquisitionView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -148,6 +218,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 .c27 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c27 .tab-content .tab-pane {
@@ -156,6 +227,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c28 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -165,18 +237,22 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 }
 
 .c28 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c28 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c28 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -207,16 +283,17 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -250,13 +327,15 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -271,6 +350,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -316,7 +396,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -342,6 +422,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 }
 
 .c29 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -351,7 +432,8 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 
 .c32 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -399,8 +481,8 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   padding: 0.2rem 0.5rem;
   margin-left: 0.4rem;
   gap: 0.5rem;
-  color: undefined;
-  background-color: undefined;
+  color: #2e8540;
+  background-color: #dff0d8;
 }
 
 .c14 {
@@ -433,6 +515,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c21 {
@@ -447,6 +530,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
 }
 
 .c24 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -467,6 +551,10 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   align-items: center;
 }
 
+.c24.selected {
+  background-color: #FCBA19;
+}
+
 .c22 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -481,7 +569,7 @@ exports[`AcquisitionView component > renders as expected 1`] = `
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c23 {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
index 8a4a888902..6c43053c58 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AcquisitionPropertiesSubForm.test.tsx.snap
@@ -55,15 +55,37 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -73,20 +95,66 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -108,6 +176,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -118,6 +187,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -166,9 +236,11 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c14 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c4 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -214,9 +286,11 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c5.c5.c5 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c7 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -228,6 +302,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -236,6 +311,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c2 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -245,18 +321,22 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 }
 
 .c2 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c2 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c2 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -269,6 +349,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 }
 
 .c10 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -841,15 +922,37 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -859,20 +962,66 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -894,6 +1043,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -904,6 +1054,7 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -955,6 +1106,30 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c9.c9.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -1010,7 +1185,8 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1024,7 +1200,8 @@ exports[`AcquisitionProperties component > renders as expected 1`] = `
 
 .c2 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
index 07e6f3a115..d8d871f2d3 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -151,6 +221,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -190,18 +261,21 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c29 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c22 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -211,13 +285,14 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 }
 
 .c32 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -225,13 +300,15 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -246,6 +323,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -287,7 +365,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -329,17 +407,19 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c33.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c13 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -380,9 +460,11 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c23.c23.c23 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c25 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -394,6 +476,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 .c19 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c19 .tab-content .tab-pane {
@@ -402,6 +485,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c21 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -411,18 +495,22 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 }
 
 .c21 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c21 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c21 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -435,6 +523,7 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 }
 
 .c26 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -449,7 +538,8 @@ exports[`AddAcquisitionContainer component > renders as expected 1`] = `
 
 .c30 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
index 965c782ca7..a65298b306 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/add/__snapshots__/AddAcquisitionForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 .c18.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c18.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c18.btn.btn-primary:hover,
+.c18.btn.btn-primary:active,
+.c18.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c18.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c18.btn.btn-secondary:hover,
+.c18.btn.btn-secondary:active,
+.c18.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c18.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 .c18.btn.btn-info:hover,
 .c18.btn.btn-info:active,
 .c18.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c18.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c18.btn.btn-light:hover,
+.c18.btn.btn-light:active,
+.c18.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c18.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c18.btn.btn-dark:hover,
+.c18.btn.btn-dark:active,
+.c18.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c18.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c18.btn.btn-danger:hover,
+.c18.btn.btn-danger:active,
+.c18.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c18.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c18.btn.btn-warning:hover,
+.c18.btn.btn-warning:active,
+.c18.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c18.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 .c18.btn.btn-link:hover,
 .c18.btn.btn-link:active,
 .c18.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 
 .c18.btn.btn-link:disabled,
 .c18.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -151,6 +221,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -190,9 +261,11 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 
 .c19 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c11 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -202,6 +275,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c22 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -215,17 +289,19 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c23.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -266,9 +342,11 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 
 .c12.c12.c12 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c14 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -280,6 +358,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 .c8 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c8 .tab-content .tab-pane {
@@ -288,6 +367,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 
 .c10 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -297,18 +377,22 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c10 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c10 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c10 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -321,6 +405,7 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c15 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -335,7 +420,8 @@ exports[`AddAcquisitionForm component > renders as expected 1`] = `
 
 .c20 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/__snapshots__/GenerateLetterRecipientsModal.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/__snapshots__/GenerateLetterRecipientsModal.test.tsx.snap
index 70defb7e58..11aaf14798 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/__snapshots__/GenerateLetterRecipientsModal.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/GenerateForm/modals/__snapshots__/GenerateLetterRecipientsModal.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -163,6 +233,8 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -238,15 +310,33 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -265,7 +355,7 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 }
 
 .c3 {
-  border: 0.1rem solid;
+  border: 0.1rem solid #606060;
   border-radius: 0.5rem;
   max-height: 180px;
   overflow-y: auto;
@@ -280,6 +370,7 @@ exports[`GenerateLetterRecipients modal > renders as expected 1`] = `
 .c3 .form-group label {
   font-family: BcSans-Bold;
   line-height: 1.5rem;
+  color: #474543;
 }
 
 .c3 .form-group label span.type {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
index f6ea10ce8f..3c5fb37d93 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/__snapshots__/AcquisitionMenu.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c1 {
@@ -25,6 +26,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
 }
 
 .c4 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -45,6 +47,10 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   align-items: center;
 }
 
+.c4.selected {
+  background-color: #FCBA19;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,7 +65,7 @@ exports[`AcquisitionMenu component > matches snapshot 1`] = `
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c3 {
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/__snapshots__/UpdateAcquisitionOwnersSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/__snapshots__/UpdateAcquisitionOwnersSubForm.test.tsx.snap
index 7b46f6a287..f2d7338765 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/__snapshots__/UpdateAcquisitionOwnersSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionOwners/__snapshots__/UpdateAcquisitionOwnersSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateAcquisitionOwnersSubForm component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateAcquisitionOwnersSubForm component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateAcquisitionOwnersSubForm component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateAcquisitionOwnersSubForm component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/__snapshots__/UpdateAcquisitionTeamSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/__snapshots__/UpdateAcquisitionTeamSubForm.test.tsx.snap
index 9c11103680..bfb16166a1 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/__snapshots__/UpdateAcquisitionTeamSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/common/update/acquisitionTeam/__snapshots__/UpdateAcquisitionTeamSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AcquisitionTeamSubForm component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AcquisitionTeamSubForm component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AcquisitionTeamSubForm component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AcquisitionTeamSubForm component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
index 0903fdd7cd..074efb9fc1 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/__snapshots__/AcquisitionFileTabs.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -21,6 +22,7 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 
 .c1 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -30,22 +32,27 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 }
 
 .c1 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c1 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
 .c2 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -55,7 +62,8 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 
 .c5 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -68,6 +76,7 @@ exports[`AcquisitionFileTabs component > matches snapshot 1`] = `
 }
 
 .c9 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
index be162b03f0..d1aff86251 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/common/__snapshots__/UpdateAcquisitionAgreementForm.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c11.btn {
+  .c12.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c11.btn .Button__value {
+.c12.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c11.btn:hover {
+.c12.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c11.btn:focus {
+.c12.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c11.btn.btn-secondary {
+.c12.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c12.btn.btn-primary:hover,
+.c12.btn.btn-primary:active,
+.c12.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c12.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
 }
 
-.c11.btn.btn-info {
+.c12.btn.btn-secondary:hover,
+.c12.btn.btn-secondary:active,
+.c12.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c12.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c11.btn.btn-info:hover,
-.c11.btn.btn-info:active,
-.c11.btn.btn-info:focus {
+.c12.btn.btn-info:hover,
+.c12.btn.btn-info:active,
+.c12.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c11.btn.btn-light {
+.c12.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c11.btn.btn-dark {
+.c12.btn.btn-light:hover,
+.c12.btn.btn-light:active,
+.c12.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c12.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c11.btn.btn-link {
+.c12.btn.btn-dark:hover,
+.c12.btn.btn-dark:active,
+.c12.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c12.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c12.btn.btn-danger:hover,
+.c12.btn.btn-danger:active,
+.c12.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c12.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c12.btn.btn-warning:hover,
+.c12.btn.btn-warning:active,
+.c12.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c12.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   padding: 0;
 }
 
-.c11.btn.btn-link:hover,
-.c11.btn.btn-link:active,
-.c11.btn.btn-link:focus {
+.c12.btn.btn-link:hover,
+.c12.btn.btn-link:active,
+.c12.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   outline: none;
 }
 
-.c11.btn.btn-link:disabled,
-.c11.btn.btn-link.disabled {
+.c12.btn.btn-link:disabled,
+.c12.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c11.btn:disabled,
-.c11.btn:disabled:hover {
+.c12.btn:disabled,
+.c12.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,44 +199,45 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c11.Button .Button__icon {
+.c12.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c11.Button--icon-only:focus {
+.c12.Button--icon-only:focus {
   outline: none;
 }
 
-.c11.Button--icon-only .Button__icon {
+.c12.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c5 .react-datepicker__calendar-icon {
+.c6 .react-datepicker__calendar-icon {
   width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
-.c5 .react-datepicker__view-calendar-icon input {
+.c6 .react-datepicker__view-calendar-icon input {
   padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c5 .react-datepicker-wrapper {
+.c6 .react-datepicker-wrapper {
   max-width: 17rem;
 }
 
-.c6.c6.form-control.is-valid {
+.c7.c7.form-control.is-valid {
   background-image: none;
 }
 
-.c6.c6.form-control.is-invalid {
+.c7.c7.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c10 {
+.c11 {
   position: -webkit-sticky;
   position: sticky;
   padding-top: 2rem;
@@ -192,13 +263,14 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c2 {
+.c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c2 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -206,24 +278,25 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c4.required::before {
+.c5.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c3 {
+.c4 {
   font-weight: bold;
 }
 
-.c7 {
+.c8 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c8 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -241,11 +314,15 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
   justify-content: flex-start;
 }
 
-.c8 label {
+.c9 label {
   margin-left: 0.5rem;
 }
 
-.c9 {
+.c1 {
+  background-color: #f2f2f2;
+}
+
+.c10 {
   margin-right: 1rem;
   padding-bottom: 1rem;
   z-index: 0;
@@ -255,13 +332,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
     class="c0"
   >
     <div
-      class=""
+      class="c1"
     >
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -283,13 +360,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Agreement status:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -331,13 +408,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Legal survey plan:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="input form-group"
@@ -358,13 +435,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Agreement type:
               </label>
             </div>
             <div
-              class="c4 required text-left col"
+              class="c5 required text-left col"
             >
               <div
                 class="form-group"
@@ -418,16 +495,16 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Agreement date:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c5 form-group"
+                class="c6 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -446,7 +523,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c6 form-control date-picker"
+                      class="c7 form-control date-picker"
                       id="datepicker-agreementDate"
                       name="agreementDate"
                       placeholder="MMM DD, YYYY"
@@ -465,16 +542,16 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Completion date:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c5 form-group"
+                class="c6 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -493,7 +570,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c6 form-control date-picker"
+                      class="c7 form-control date-picker"
                       id="datepicker-completionDate"
                       name="completionDate"
                       placeholder="MMM DD, YYYY"
@@ -512,16 +589,16 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Termination date:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c5 form-group"
+                class="c6 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -540,7 +617,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c6 form-control date-picker"
+                      class="c7 form-control date-picker"
                       id="datepicker-terminationDate"
                       name="terminationDate"
                       placeholder="MMM DD, YYYY"
@@ -559,16 +636,16 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Possession date:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c5 form-group"
+                class="c6 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -587,7 +664,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c6 form-control date-picker"
+                      class="c7 form-control date-picker"
                       id="datepicker-possessionDate"
                       name="possessionDate"
                       placeholder="MMM DD, YYYY"
@@ -600,7 +677,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
             </div>
           </div>
           <div
-            class="c7"
+            class="c8"
           >
             Financial
           </div>
@@ -611,13 +688,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Purchase price:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -645,7 +722,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Deposit due no later than:
                 <span>
@@ -673,10 +750,10 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c8"
+                class="c9"
               >
                 <div
                   class="input form-group"
@@ -689,7 +766,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
                   />
                 </div>
                 <label
-                  class="c3"
+                  class="c4"
                 >
                   days.
                 </label>
@@ -703,13 +780,13 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Deposit amount:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -734,10 +811,10 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <div
-        class="c10 justify-content-end mb-12 mt-12 p-0 no-gutters row"
+        class="c11 justify-content-end mb-12 mt-12 p-0 no-gutters row"
       >
         <div
           class="pr-3 col-auto"
@@ -746,7 +823,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
           class="pr-6 col-auto"
         >
           <button
-            class="c11 Button btn btn-secondary"
+            class="c12 Button btn btn-secondary"
             type="button"
           >
             <div
@@ -760,7 +837,7 @@ exports[`UpdateAcquisitionAgreementView component > renders as expected 1`] = `
           class="col-auto"
         >
           <button
-            class="c11 Button Button--disabled mr-9 btn btn-primary"
+            class="c12 Button Button--disabled mr-9 btn btn-primary"
             disabled=""
             type="button"
           >
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
index c87ff5ee8d..275e9ae90f 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/agreement/detail/__snapshots__/AgreementView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AgreementView component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AgreementView component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AgreementView component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AgreementView component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,19 +211,32 @@ exports[`AgreementView component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c8 {
+.c8.btn.btn-primary,
+.c8.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c9 {
   float: right;
   cursor: pointer;
   font-size: 3.2rem;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -165,14 +248,14 @@ exports[`AgreementView component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c10.required::before {
+.c11.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c9 {
+.c10 {
   font-weight: bold;
 }
 
@@ -234,14 +317,14 @@ exports[`AgreementView component > renders as expected 1`] = `
 }
 
 .c4 {
-  border: solid 0.2rem;
+  border: solid 0.2rem var(--theme-blue-90);
   margin-bottom: 1.5rem;
   border-radius: 0.5rem;
 }
 
-.c11 {
+.c12 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
@@ -305,7 +388,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                         class="c6"
                       >
                         <button
-                          class="c7 Button btn btn-primary"
+                          class="c7 Button c8 btn btn-primary"
                           type="button"
                         >
                           <div
@@ -356,7 +439,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pl-8 d-flex align-items-end col-auto"
                 >
                   <svg
-                    class="c8"
+                    class="c9"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -389,13 +472,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement status:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Draft
                 </div>
@@ -407,13 +490,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Legal survey plan:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -423,13 +506,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement type:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   License Of Occupation (H0074)
                 </div>
@@ -441,13 +524,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -457,13 +540,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Commencement date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -473,13 +556,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Completion date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -489,13 +572,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Termination date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -505,17 +588,17 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Possession date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
-                class="c11"
+                class="c12"
               >
                 Financial
               </div>
@@ -526,13 +609,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Purchase price:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -542,7 +625,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Deposit due no later than:
                     <span>
@@ -570,7 +653,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -580,13 +663,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Deposit amount:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
             </div>
@@ -618,7 +701,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                         class="c6"
                       >
                         <button
-                          class="c7 Button btn btn-primary"
+                          class="c7 Button c8 btn btn-primary"
                           type="button"
                         >
                           <div
@@ -669,7 +752,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pl-8 d-flex align-items-end col-auto"
                 >
                   <svg
-                    class="c8"
+                    class="c9"
                     fill="currentColor"
                     height="1em"
                     stroke="currentColor"
@@ -702,13 +785,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement status:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Draft
                 </div>
@@ -720,13 +803,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Legal survey plan:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 />
               </div>
               <div
@@ -736,13 +819,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement type:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Test type 2 (ABCD)
                 </div>
@@ -754,13 +837,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Agreement date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -772,13 +855,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Completion date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -790,13 +873,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Termination date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Apr 5, 2023
                 </div>
@@ -808,19 +891,19 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Possession date:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   Apr 5, 2023
                 </div>
               </div>
               <div
-                class="c11"
+                class="c12"
               >
                 Financial
               </div>
@@ -831,13 +914,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Purchase price:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   $2,000.00
                 </div>
@@ -849,7 +932,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Deposit due no later than:
                     <span>
@@ -877,7 +960,7 @@ exports[`AgreementView component > renders as expected 1`] = `
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   <span>
                     20 
@@ -894,13 +977,13 @@ exports[`AgreementView component > renders as expected 1`] = `
                   class="pr-0 text-left col-6"
                 >
                   <label
-                    class="c9"
+                    class="c10"
                   >
                     Deposit amount:
                   </label>
                 </div>
                 <div
-                  class="c10 text-left col"
+                  class="c11 text-left col"
                 >
                   $1,000.00
                 </div>
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
index f7bb8e7c5b..c1b5b9c027 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form1/__snapshots__/ExpropriationForm1.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,12 +219,13 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -246,7 +317,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -560,15 +631,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -578,20 +671,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -613,6 +752,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -623,6 +763,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
index 689b03be03..89365348e0 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form5/__snapshots__/ExpropriationForm5.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,12 +219,13 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -246,7 +317,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -482,15 +553,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -500,20 +593,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -535,6 +674,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -545,6 +685,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/__snapshots__/Form8PaymentItemsSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/__snapshots__/Form8PaymentItemsSubForm.test.tsx.snap
index bc082d0445..e36feb073e 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/__snapshots__/Form8PaymentItemsSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/__snapshots__/Form8PaymentItemsSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
index 95997909cb..5da75f7181 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form8/details/__snapshots__/ExpropriationForm8Details.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,7 +211,8 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
   margin-right: 0;
 }
 
-.c9 {
+.c10 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -150,7 +221,18 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
   margin-bottom: 2.4rem;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
@@ -164,28 +246,28 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c6.required::before {
+.c7.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c5 {
+.c6 {
   font-weight: bold;
 }
 
-.c8 {
+.c9 {
   padding: 0 0.4rem;
   display: block;
 }
 
 .c0 {
-  border: solid 0.2rem;
+  border: solid 0.2rem var(--theme-blue-90);
   margin-bottom: 0.5rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -219,11 +301,12 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem #013366;
   margin-bottom: 2rem;
 }
 
 .c2 label {
+  color: #013366;
   font-family: 'BCSans-Bold';
   font-size: 1.75rem;
   width: 100%;
@@ -234,7 +317,7 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
   margin-bottom: 1rem;
 }
 
-.c10 {
+.c11 {
   font-size: 16px;
   font-weight: 600;
 }
@@ -252,7 +335,7 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
           class="c2"
         >
           <button
-            class="c3 Button c4 btn btn-primary"
+            class="c3 Button c4 c5 btn btn-primary"
             data-testid="form8[0].generate-form8"
             type="button"
           >
@@ -284,17 +367,17 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c5"
+              class="c6"
             >
               Payee:
             </label>
           </div>
           <div
-            class="c6 text-left col"
+            class="c7 text-left col"
             data-testid="form8[0].payee-name"
           >
             <div
-              class="c7"
+              class="c8"
             >
               <label>
                 John Doe
@@ -309,17 +392,17 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c5"
+              class="c6"
             >
               Expropriation Authority:
             </label>
           </div>
           <div
-            class="c6 text-left col"
+            class="c7 text-left col"
             data-testid="form8[0].exp-authority"
           >
             <a
-              class="c8"
+              class="c9"
               href="/contact/O100"
               rel="noopener noreferrer"
               target="_blank"
@@ -351,20 +434,20 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c5"
+              class="c6"
             >
               Description:
             </label>
           </div>
           <div
-            class="c6 text-left col"
+            class="c7 text-left col"
             data-testid="form8[0].description"
           >
             MY DESCRIPTION
           </div>
         </div>
         <h3
-          class="c9"
+          class="c10"
         >
           Payment Details
         </h3>
@@ -522,7 +605,7 @@ exports[`Form 8 Detail View component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="c10"
+          class="c11"
         >
           <div
             class="row"
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
index be23b0df17..23b539c1f1 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/expropriation/form9/__snapshots__/ExpropriationForm9.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,12 +219,13 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -246,7 +317,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 }
 
 .c2.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c1.required::before {
@@ -521,15 +592,37 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c1.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c1.btn.btn-primary:hover,
+.c1.btn.btn-primary:active,
+.c1.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c1.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c1.btn.btn-secondary:hover,
+.c1.btn.btn-secondary:active,
+.c1.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c1.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -539,20 +632,66 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-info:hover,
 .c1.btn.btn-info:active,
 .c1.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c1.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c1.btn.btn-light:hover,
+.c1.btn.btn-light:active,
+.c1.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c1.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c1.btn.btn-dark:hover,
+.c1.btn.btn-dark:active,
+.c1.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c1.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-danger:hover,
+.c1.btn.btn-danger:active,
+.c1.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c1.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c1.btn.btn-warning:hover,
+.c1.btn.btn-warning:active,
+.c1.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c1.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -574,6 +713,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 .c1.btn.btn-link:hover,
 .c1.btn.btn-link:active,
 .c1.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -584,6 +724,7 @@ exports[`Expropriation Form 1 > matches snapshot 1`] = `
 
 .c1.btn.btn-link:disabled,
 .c1.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionOwnersSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionOwnersSummaryView.test.tsx.snap
index 754426298d..a0fea593a8 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionOwnersSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionOwnersSummaryView.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Acquisition File Owners View component > Renders Component as expected
   />
   <div />
   .c0 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
index eff57a70c9..ba707424b7 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/detail/__snapshots__/AcquisitionSummaryView.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = `
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -16,7 +17,8 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = `
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -40,6 +42,7 @@ exports[`AcquisitionSummaryView component > matches snapshot 1`] = `
 }
 
 .c7 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
index 586c8df45c..c364aabfa2 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/fileDetails/update/__snapshots__/UpdateAcquisitionForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -220,6 +290,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -250,6 +321,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 }
 
 .c12 {
+  color: #474543;
   font-size: 1.6rem;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -311,12 +383,13 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #474543;
+  border: #606060 solid 0.1rem;
   cursor: default;
 }
 
 .c8.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c10.c10.btn {
@@ -327,6 +400,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
   padding-right: 1.2rem;
   height: 1.6rem;
   right: 0rem;
+  color: #9F9D9C;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -339,6 +413,7 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 .c10.c10.btn:hover,
 .c10.c10.btn:active,
 .c10.c10.btn:focus {
+  color: #CE3E39;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
@@ -346,7 +421,8 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -400,6 +476,10 @@ exports[`UpdateAcquisitionForm component > renders as expected 1`] = `
   margin-bottom: 1rem;
 }
 
+.c0 {
+  background-color: #f2f2f2;
+}
+
 .c0 [name='region'] {
   max-width: 25rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
index 6bd1c9734c..a1b065fa12 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/detail/__snapshots__/StakeHolderView.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -22,7 +23,8 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -322,6 +324,7 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -331,7 +334,8 @@ exports[`StakeHolderView component > renders as expected 1`] = `
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
index 659301d23e..925f8b5c4f 100644
--- a/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/acquisition/tabs/stakeholders/update/__snapshots__/UpdateStakeHolderForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -183,12 +253,13 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #474543;
+  border: #606060 solid 0.1rem;
   cursor: default;
 }
 
 .c6.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c8.c8.btn {
@@ -199,6 +270,7 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
   padding-right: 1.2rem;
   height: 1.6rem;
   right: 0rem;
+  color: #9F9D9C;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -211,18 +283,21 @@ exports[`UpdateStakeHolderForm component > renders as expected 1`] = `
 .c8.c8.btn:hover,
 .c8.c8.btn:active,
 .c8.c8.btn:focus {
+  color: #CE3E39;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
index 8646087a1f..2e06cd8c9f 100644
--- a/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/detail/__snapshots__/CompensationRequisitionDetailView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -146,19 +216,32 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
   white-space: nowrap;
 }
 
-.c10 {
+.c8.btn.btn-primary,
+.c8.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c11 {
   float: right;
   cursor: pointer;
   font-size: 3.2rem;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -170,14 +253,14 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c9.required::before {
+.c10.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c8 {
+.c9 {
   font-weight: bold;
 }
 
@@ -216,12 +299,12 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
   flex-direction: row-reverse;
 }
 
-.c12 {
+.c13 {
   font-size: 16px;
   font-weight: 600;
 }
 
-.c11 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -409,7 +492,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
                   </svg>
                 </span>
                 <button
-                  class="c7 Button btn btn-primary"
+                  class="c7 Button c8 btn btn-primary"
                   type="button"
                 >
                   <div
@@ -447,13 +530,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Status:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
             data-testid="compensation-status"
           >
             Draft
@@ -466,13 +549,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Alternate project:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -482,13 +565,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Final date:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
             data-testid="compensation-finalized-date"
           />
         </div>
@@ -499,13 +582,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Agreement date:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -515,13 +598,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Expropriation notice served date:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -531,13 +614,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Expropriation vesting date:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -547,13 +630,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Advanced payment served date:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
             data-testid="advanced-payment-served-date"
           />
         </div>
@@ -564,13 +647,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-12"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Special instructions:
             </label>
           </div>
           <div
-            class="c9 pre-wrap col"
+            class="c10 pre-wrap col"
           >
             <p
               style="white-space: pre-wrap;"
@@ -631,13 +714,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Properties:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             <p>
               <label>
@@ -671,7 +754,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pl-8 d-flex align-items-end col-auto"
           >
             <svg
-              class="c10"
+              class="c11"
               fill="currentColor"
               height="1em"
               stroke="currentColor"
@@ -704,13 +787,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Product:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
             data-testid="file-product"
           >
             00048
@@ -723,13 +806,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Business function:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -739,13 +822,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Work activity:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -755,13 +838,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Cost type:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -771,13 +854,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Fiscal year:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -787,13 +870,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               STOB:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -803,13 +886,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Service line:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
         <div
@@ -819,13 +902,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Responsibility centre:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           />
         </div>
       </div>
@@ -848,7 +931,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pl-8 d-flex align-items-end col-auto"
           >
             <svg
-              class="c10"
+              class="c11"
               fill="currentColor"
               height="1em"
               stroke="currentColor"
@@ -881,16 +964,16 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Payee:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             <div
-              class="c11"
+              class="c12"
             >
               <label />
             </div>
@@ -903,13 +986,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Amount (before tax):
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             $0.00
           </div>
@@ -921,13 +1004,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               GST applicable?:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             No
           </div>
@@ -939,13 +1022,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Total amount:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             $0.00
           </div>
@@ -970,7 +1053,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pl-8 d-flex align-items-end col-auto"
           >
             <svg
-              class="c10"
+              class="c11"
               fill="currentColor"
               height="1em"
               stroke="currentColor"
@@ -1010,13 +1093,13 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
             class="pr-0 text-left col-12"
           >
             <label
-              class="c8"
+              class="c9"
             >
               Detailed remarks:
             </label>
           </div>
           <div
-            class="c9 text-left col"
+            class="c10 text-left col"
           >
             <p
               style="white-space: pre-wrap;"
@@ -1032,7 +1115,7 @@ exports[`Compensation Detail View Component > renders as expected 1`] = `
         class="collapse show"
       >
         <div
-          class="c12"
+          class="c13"
         >
           <div
             class="row"
diff --git a/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
index 32016de580..ac6c68ee8d 100644
--- a/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/list/__snapshots__/CompensationListView.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`compensation list view > renders as expected 1`] = `
   <div />
   .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -47,6 +48,10 @@ exports[`compensation list view > renders as expected 1`] = `
   margin: 0;
 }
 
+.c1 > {
+  font: #474543;
+}
+
 .c1 .summary-row {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -288,7 +293,8 @@ exports[`compensation list view > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
index 2191699f6c..39f6d11187 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/update/__snapshots__/UpdateCompensationRequisitionForm.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
     class="Toastify"
   />
   <div />
-  .c12.btn {
+  .c13.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   cursor: pointer;
 }
 
-.c12.btn .Button__value {
+.c13.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c12.btn:hover {
+.c13.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c12.btn:focus {
+.c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c12.btn.btn-secondary {
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
 }
 
-.c12.btn.btn-info {
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c12.btn.btn-info:hover,
-.c12.btn.btn-info:active,
-.c12.btn.btn-info:focus {
+.c13.btn.btn-info:hover,
+.c13.btn.btn-info:active,
+.c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c12.btn.btn-light {
+.c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c12.btn.btn-dark {
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c12.btn.btn-link {
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   padding: 0;
 }
 
-.c12.btn.btn-link:hover,
-.c12.btn.btn-link:active,
-.c12.btn.btn-link:focus {
+.c13.btn.btn-link:hover,
+.c13.btn.btn-link:active,
+.c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   outline: none;
 }
 
-.c12.btn.btn-link:disabled,
-.c12.btn.btn-link.disabled {
+.c13.btn.btn-link:disabled,
+.c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c12.btn:disabled,
-.c12.btn:disabled:hover {
+.c13.btn:disabled,
+.c13.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,64 +199,66 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   opacity: 0.65;
 }
 
-.c12.Button .Button__icon {
+.c13.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c12.Button--icon-only:focus {
+.c13.Button--icon-only:focus {
   outline: none;
 }
 
-.c12.Button--icon-only .Button__icon {
+.c13.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c5 button.close {
+.c6 button.close {
   font-size: 2.4rem;
 }
 
-.c6 .react-datepicker__calendar-icon {
+.c7 .react-datepicker__calendar-icon {
   width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
-.c6 .react-datepicker__view-calendar-icon input {
+.c7 .react-datepicker__view-calendar-icon input {
   padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c6 .react-datepicker-wrapper {
+.c7 .react-datepicker-wrapper {
   max-width: 17rem;
 }
 
-.c7.c7.form-control.is-valid {
+.c8.c8.form-control.is-valid {
   background-image: none;
 }
 
-.c7.c7.form-control.is-invalid {
+.c8.c8.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c10 button.close {
+.c11 button.close {
   font-size: 2.4rem;
 }
 
-.c11 {
+.c12 {
   float: right;
   cursor: pointer;
   font-size: 3.2rem;
 }
 
-.c2 {
+.c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c2 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -194,24 +266,24 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   border-radius: 0.5rem;
 }
 
-.c4.required::before {
+.c5.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c3 {
+.c4 {
   font-weight: bold;
 }
 
-.c9 {
+.c10 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.c14 {
+.c15 {
   position: -webkit-sticky;
   position: sticky;
   padding-top: 2rem;
@@ -237,12 +309,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
   overflow-y: auto;
 }
 
-.c13 {
+.c1 {
+  background-color: #f2f2f2;
+}
+
+.c14 {
   margin-right: 1rem;
   padding-bottom: 1rem;
 }
 
-.c8 textarea.form-control {
+.c9 textarea.form-control {
   min-width: 100%;
   height: 7rem;
   resize: none;
@@ -252,13 +328,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
     class="c0"
   >
     <div
-      class=""
+      class="c1"
     >
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -280,13 +356,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Status:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -326,16 +402,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Alternate project:
               </label>
             </div>
             <div
-              class="c4 text-left col-6"
+              class="c5 text-left col-6"
             >
               <div
-                class="c5 form-group"
+                class="c6 form-group"
                 data-testid="typeahead-alternateProject"
               >
                 <div
@@ -398,13 +474,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Final date:
               </label>
             </div>
             <div
-              class="c4 text-left col-4"
+              class="c5 text-left col-4"
               data-testid="compensation-finalized-date"
             />
           </div>
@@ -415,16 +491,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Agreement date:
               </label>
             </div>
             <div
-              class="c4 text-left col-4"
+              class="c5 text-left col-4"
             >
               <div
-                class="c6 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -443,7 +519,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c7 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-agreementDateTime"
                       name="agreementDateTime"
                       placeholder="MMM DD, YYYY"
@@ -462,16 +538,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Expropriation notice served date:
               </label>
             </div>
             <div
-              class="c4 text-left col-4"
+              class="c5 text-left col-4"
             >
               <div
-                class="c6 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -490,7 +566,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c7 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-expropriationNoticeServedDateTime"
                       name="expropriationNoticeServedDateTime"
                       placeholder="MMM DD, YYYY"
@@ -509,16 +585,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Expropriation vesting date:
               </label>
             </div>
             <div
-              class="c4 text-left col-4"
+              class="c5 text-left col-4"
             >
               <div
-                class="c6 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -537,7 +613,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c7 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-expropriationVestingDateTime"
                       name="expropriationVestingDateTime"
                       placeholder="MMM DD, YYYY"
@@ -556,16 +632,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Advanced payment served date:
               </label>
             </div>
             <div
-              class="c4 text-left col-4"
+              class="c5 text-left col-4"
             >
               <div
-                class="c6 form-group"
+                class="c7 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -584,7 +660,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c7 form-control date-picker"
+                      class="c8 form-control date-picker"
                       id="datepicker-advancedPaymentServedDate"
                       name="advancedPaymentServedDate"
                       placeholder="MMM DD, YYYY"
@@ -603,16 +679,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-12"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Special instructions:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c8 textarea input form-group"
+                class="c9 textarea input form-group"
               >
                 <textarea
                   class="form-control"
@@ -626,10 +702,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -677,13 +753,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Selected Properties:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="table"
@@ -767,7 +843,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                         title=""
                       >
                         <div
-                          class="c9"
+                          class="c10"
                         >
                           PID: 023-214-937
                         </div>
@@ -805,7 +881,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
                         title=""
                       >
                         <div
-                          class="c9"
+                          class="c10"
                         >
                           PID: 024-996-777
                         </div>
@@ -819,10 +895,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -844,13 +920,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Product:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               00048
             </div>
@@ -862,13 +938,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Business function:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             />
           </div>
           <div
@@ -878,13 +954,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Work activity:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             />
           </div>
           <div
@@ -894,13 +970,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Cost type:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             />
           </div>
           <div
@@ -910,13 +986,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Fiscal year:
               </label>
             </div>
             <div
-              class="c4 required text-left col-4"
+              class="c5 required text-left col-4"
             >
               <div
                 class="form-group"
@@ -963,16 +1039,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 STOB:
               </label>
             </div>
             <div
-              class="c4 required text-left col"
+              class="c5 required text-left col"
             >
               <div
-                class="c10 form-group"
+                class="c11 form-group"
                 data-testid="typeahead-select-stob"
               >
                 <div
@@ -1016,16 +1092,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Service line:
               </label>
             </div>
             <div
-              class="c4 required text-left col"
+              class="c5 required text-left col"
             >
               <div
-                class="c10 form-group"
+                class="c11 form-group"
                 data-testid="typeahead-select-serviceLine"
               >
                 <div
@@ -1069,16 +1145,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Responsibility centre:
               </label>
             </div>
             <div
-              class="c4 required text-left col"
+              class="c5 required text-left col"
             >
               <div
-                class="c10 form-group"
+                class="c11 form-group"
                 data-testid="typeahead-select-responsibilityCentre"
               >
                 <div
@@ -1118,10 +1194,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -1135,7 +1211,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pl-8 d-flex align-items-end col-auto"
             >
               <svg
-                class="c11"
+                class="c12"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -1168,13 +1244,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Payee:
               </label>
             </div>
             <div
-              class="c4 required text-left col"
+              class="c5 required text-left col"
             >
               <div
                 class="form-group"
@@ -1216,13 +1292,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Payment in Trust?:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -1252,7 +1328,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 GST number:
                 <span>
@@ -1280,7 +1356,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="input form-group"
@@ -1302,13 +1378,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Amount (before tax):
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -1337,13 +1413,13 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 GST amount:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -1372,7 +1448,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-4"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Total amount:
                 <span>
@@ -1400,7 +1476,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
                 class="form-group"
@@ -1425,10 +1501,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -1442,7 +1518,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pl-8 d-flex align-items-end col-auto"
             >
               <svg
-                class="c11"
+                class="c12"
                 fill="currentColor"
                 height="1em"
                 stroke="currentColor"
@@ -1469,7 +1545,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
           class="collapse show"
         >
           <button
-            class="c12 Button btn btn-link"
+            class="c13 Button btn btn-link"
             data-testid="add-financial-activity"
             type="button"
           >
@@ -1483,7 +1559,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <div
           class="collapse show"
@@ -1495,16 +1571,16 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
               class="pr-0 text-left col-12"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Detailed remarks:
               </label>
             </div>
             <div
-              class="c4 text-left col"
+              class="c5 text-left col"
             >
               <div
-                class="c8 textarea input form-group"
+                class="c9 textarea input form-group"
               >
                 <textarea
                   class="form-control"
@@ -1519,10 +1595,10 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
       </div>
     </div>
     <div
-      class="c13"
+      class="c14"
     >
       <div
-        class="c14 justify-content-end mb-12 mt-12 p-0 no-gutters row"
+        class="c15 justify-content-end mb-12 mt-12 p-0 no-gutters row"
       >
         <div
           class="pr-3 col-auto"
@@ -1531,7 +1607,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
           class="pr-6 col-auto"
         >
           <button
-            class="c12 Button btn btn-secondary"
+            class="c13 Button btn btn-secondary"
             type="button"
           >
             <div
@@ -1545,7 +1621,7 @@ exports[`Compensation Requisition UpdateForm component > renders as expected 1`]
           class="col-auto"
         >
           <button
-            class="c12 Button Button--disabled mr-9 btn btn-primary"
+            class="c13 Button Button--disabled mr-9 btn btn-primary"
             disabled=""
             type="button"
           >
diff --git a/source/frontend/src/features/mapSideBar/compensation/update/financials/__snapshots__/FinancialActivitiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/compensation/update/financials/__snapshots__/FinancialActivitiesSubForm.test.tsx.snap
index 980efd653d..4520e66dde 100644
--- a/source/frontend/src/features/mapSideBar/compensation/update/financials/__snapshots__/FinancialActivitiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/compensation/update/financials/__snapshots__/FinancialActivitiesSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`FinancialActivitiesSubForm  component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
index 0aca7d1717..c461e6a04c 100644
--- a/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/consolidation/__snapshots__/AddConsolidationView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,25 +212,27 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c13 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c6 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -168,7 +240,8 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c18 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -193,6 +266,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 .c14 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c14 .tab-content .tab-pane {
@@ -201,6 +275,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c16 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -210,18 +285,22 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 }
 
 .c16 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c16 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c16 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -235,13 +314,15 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c5.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn.btn-light.Button:focus,
 .c5.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn,
@@ -256,6 +337,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -297,7 +379,7 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c8 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c7 {
@@ -307,7 +389,8 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
 
 .c19 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -339,12 +422,14 @@ exports[`Add Consolidation View > matches snapshot 1`] = `
   overflow-y: auto;
   padding-right: 1rem;
   padding-bottom: 1rem;
+  background-color: #f2f2f2;
 }
 
 .c2 {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
+  fill: #474543;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
index 4ff459a70d..48cf50ba4c 100644
--- a/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/__snapshots__/DispositionView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`DispositionView component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`DispositionView component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -168,16 +238,17 @@ exports[`DispositionView component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -185,13 +256,15 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -206,6 +279,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -251,7 +325,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -266,6 +340,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 .c27 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c27 .tab-content .tab-pane {
@@ -274,6 +349,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c28 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -283,18 +359,22 @@ exports[`DispositionView component > renders as expected 1`] = `
 }
 
 .c28 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c28 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c28 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -316,6 +396,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 }
 
 .c29 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -325,7 +406,8 @@ exports[`DispositionView component > renders as expected 1`] = `
 
 .c34 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -378,8 +460,8 @@ exports[`DispositionView component > renders as expected 1`] = `
   padding: 0.2rem 0.5rem;
   margin-left: 0.4rem;
   gap: 0.5rem;
-  color: undefined;
-  background-color: undefined;
+  color: #6c4a00;
+  background-color: #fef1d8;
 }
 
 .c14 {
@@ -412,6 +494,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c21 {
@@ -426,6 +509,7 @@ exports[`DispositionView component > renders as expected 1`] = `
 }
 
 .c24 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -446,6 +530,10 @@ exports[`DispositionView component > renders as expected 1`] = `
   align-items: center;
 }
 
+.c24.selected {
+  background-color: #FCBA19;
+}
+
 .c22 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -460,7 +548,7 @@ exports[`DispositionView component > renders as expected 1`] = `
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c23 {
diff --git a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
index 6a6dc7f2ec..05bd49607b 100644
--- a/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/add/__snapshots__/AddDispositionContainerView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -151,6 +221,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -190,18 +261,21 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c29 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c22 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -211,7 +285,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -219,13 +293,15 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -240,6 +316,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -281,7 +358,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -317,7 +394,8 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c13 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -358,9 +436,11 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c23.c23.c23 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c25 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -372,6 +452,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 .c19 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c19 .tab-content .tab-pane {
@@ -380,6 +461,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c21 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -389,18 +471,22 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 }
 
 .c21 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c21 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c21 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -413,6 +499,7 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 }
 
 .c26 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -427,7 +514,8 @@ exports[`Add Disposition Container View > matches snapshot 1`] = `
 
 .c30 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap
index c478b5852f..7b52fc3547 100644
--- a/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/common/__snapshots__/DispositionMenu.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`DispositionMenu component > matches snapshot 1`] = `
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c1 {
@@ -25,6 +26,7 @@ exports[`DispositionMenu component > matches snapshot 1`] = `
 }
 
 .c4 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -45,6 +47,10 @@ exports[`DispositionMenu component > matches snapshot 1`] = `
   align-items: center;
 }
 
+.c4.selected {
+  background-color: #FCBA19;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,7 +65,7 @@ exports[`DispositionMenu component > matches snapshot 1`] = `
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c3 {
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
index 084d92308b..3af323482d 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionPropertiesSubForm.test.tsx.snap
@@ -55,15 +55,37 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -73,20 +95,66 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -108,6 +176,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -118,6 +187,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -166,9 +236,11 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c14 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c4 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -214,9 +286,11 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c5.c5.c5 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c7 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -228,6 +302,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -236,6 +311,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c2 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -245,18 +321,22 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 }
 
 .c2 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c2 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c2 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -269,6 +349,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 }
 
 .c10 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -841,15 +922,37 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -859,20 +962,66 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -894,6 +1043,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -904,6 +1054,7 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -955,6 +1106,30 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c9.c9.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -1010,7 +1185,8 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -1024,7 +1200,8 @@ exports[`DispositionPropertiesSubForm component > renders as expected 1`] = `
 
 .c2 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionTeamSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionTeamSubForm.test.tsx.snap
index 9d92718d30..73366c884b 100644
--- a/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionTeamSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/form/__snapshots__/DispositionTeamSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`DispositionTeamSubForm component > renders as expected 1`] = `
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`DispositionTeamSubForm component > renders as expected 1`] = `
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`DispositionTeamSubForm component > renders as expected 1`] = `
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`DispositionTeamSubForm component > renders as expected 1`] = `
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
index de982b9b19..c4ee92c250 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/__snapshots__/DispositionFileTabs.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -21,6 +22,7 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 
 .c1 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -30,22 +32,27 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 }
 
 .c1 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c1 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
 .c2 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -55,7 +62,8 @@ exports[`DispositionFileTabs component > matches snapshot 1`] = `
 
 .c7 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
index b1d8c78f13..5da768d72d 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/__snapshots__/DispositionSummaryView.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = `
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -16,7 +17,8 @@ exports[`DispositionSummaryView component > matches snapshot 1`] = `
 
 .c5 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
index ba02b9d5a8..70f7965371 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/fileDetails/detail/update/__snapshots__/UpdateDispositionForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -185,6 +255,7 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -206,7 +277,8 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -237,12 +309,13 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #474543;
+  border: #606060 solid 0.1rem;
   cursor: default;
 }
 
 .c8.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c10.c10.btn {
@@ -253,6 +326,7 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
   padding-right: 1.2rem;
   height: 1.6rem;
   right: 0rem;
+  color: #9F9D9C;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -265,12 +339,14 @@ exports[`UpdateDispositionForm component > renders as expected 1`] = `
 .c10.c10.btn:hover,
 .c10.c10.btn:active,
 .c10.c10.btn:focus {
+  color: #CE3E39;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
index 1c7bf2d88d..e7a30b4dec 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/__snapshots__/OffersAndSaleView.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
   <div />
   .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -39,6 +40,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c2 label {
+  color: #013366;
   font-family: 'BCSans-Bold';
   font-size: 2rem;
   width: 100%;
@@ -88,7 +90,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -178,7 +181,8 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
   </div>
   .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -217,7 +221,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c6 {
-  border-bottom: 0.1rem solid;
+  border-bottom: 0.1rem solid #606060;
 }
 
 .c2 {
@@ -239,6 +243,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c2 label {
+  color: #013366;
   font-family: 'BCSans-Bold';
   font-size: 2rem;
   width: 100%;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/__snapshots__/DispositionOfferDetails.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/__snapshots__/DispositionOfferDetails.test.tsx.snap
index 2ac26b96ee..a0921d4192 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/__snapshots__/DispositionOfferDetails.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionOffer/dispositionOfferDetails/__snapshots__/DispositionOfferDetails.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
 }
 
 .c0 {
-  border: solid 0.2rem;
+  border: solid 0.2rem var(--theme-blue-90);
   padding: 1.5rem;
   margin-bottom: 1.5rem;
   border-radius: 0.5rem;
@@ -40,11 +40,12 @@ exports[`Disposition Offer Detail View component > renders as expected 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   margin-bottom: 2rem;
 }
 
 .c1 label {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 1.75rem;
   width: 100%;
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
index 317243550d..607d31ed3d 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/form/__snapshots__/DispositionSaleForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -174,12 +245,13 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
 .c5.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c8 .react-datepicker__calendar-icon {
@@ -187,6 +259,7 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
   height: 3rem;
   margin-top: 0.5rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -217,7 +290,8 @@ exports[`DispositionSaleForm  component > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
index 862ca1dae8..bcea1cea88 100644
--- a/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/disposition/tabs/offersAndSale/dispositionSale/update/__snapshots__/UpdateDispositionSaleView.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c5.btn {
+  .c6.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c5.btn .Button__value {
+.c6.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c5.btn:hover {
+.c6.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c5.btn:focus {
+.c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c5.btn.btn-secondary {
+.c6.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-primary:hover,
+.c6.btn.btn-primary:active,
+.c6.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c6.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
 }
 
-.c5.btn.btn-info {
+.c6.btn.btn-secondary:hover,
+.c6.btn.btn-secondary:active,
+.c6.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c5.btn.btn-info:hover,
-.c5.btn.btn-info:active,
-.c5.btn.btn-info:focus {
+.c6.btn.btn-info:hover,
+.c6.btn.btn-info:active,
+.c6.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c5.btn.btn-light {
+.c6.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c5.btn.btn-dark {
+.c6.btn.btn-light:hover,
+.c6.btn.btn-light:active,
+.c6.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c6.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c5.btn.btn-link {
+.c6.btn.btn-dark:hover,
+.c6.btn.btn-dark:active,
+.c6.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c6.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-danger:hover,
+.c6.btn.btn-danger:active,
+.c6.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c6.btn.btn-warning:hover,
+.c6.btn.btn-warning:active,
+.c6.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   padding: 0;
 }
 
-.c5.btn.btn-link:hover,
-.c5.btn.btn-link:active,
-.c5.btn.btn-link:focus {
+.c6.btn.btn-link:hover,
+.c6.btn.btn-link:active,
+.c6.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   outline: none;
 }
 
-.c5.btn.btn-link:disabled,
-.c5.btn.btn-link.disabled {
+.c6.btn.btn-link:disabled,
+.c6.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c5.btn:disabled,
-.c5.btn:disabled:hover {
+.c6.btn:disabled,
+.c6.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,44 +199,45 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c5.Button .Button__icon {
+.c6.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c5.Button--icon-only:focus {
+.c6.Button--icon-only:focus {
   outline: none;
 }
 
-.c5.Button--icon-only .Button__icon {
+.c6.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c7 .react-datepicker__calendar-icon {
+.c8 .react-datepicker__calendar-icon {
   width: 2.4rem;
   height: 3rem;
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
-.c7 .react-datepicker__view-calendar-icon input {
+.c8 .react-datepicker__view-calendar-icon input {
   padding: 0.8rem 1.2rem 0.8rem 1.2rem;
 }
 
-.c7 .react-datepicker-wrapper {
+.c8 .react-datepicker-wrapper {
   max-width: 17rem;
 }
 
-.c8.c8.form-control.is-valid {
+.c9.c9.form-control.is-valid {
   background-image: none;
 }
 
-.c8.c8.form-control.is-invalid {
+.c9.c9.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c12 {
+.c13 {
   position: -webkit-sticky;
   position: sticky;
   padding-top: 2rem;
@@ -192,7 +263,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c6 {
+.c7 {
   position: relative;
   border-radius: 0.4rem;
   padding-top: 0.8rem;
@@ -200,54 +271,57 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #9F9D9C;
+  border: #606060 solid 0.1rem;
   cursor: pointer;
 }
 
-.c6.is-invalid {
-  border: solid 0.1rem;
+.c7.is-invalid {
+  border: #CE3E39 solid 0.1rem;
 }
 
-.c9 .react-datepicker__calendar-icon {
+.c10 .react-datepicker__calendar-icon {
   width: 3rem;
   height: 3rem;
   margin-top: 0.5rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
-.c9 .react-datepicker__view-calendar-icon input {
+.c10 .react-datepicker__view-calendar-icon input {
   padding: 0.6rem 1rem 0.5rem 0.6rem;
 }
 
-.c9 .react-datepicker-wrapper {
+.c10 .react-datepicker-wrapper {
   max-width: 16rem;
 }
 
-.c9 .react-datepicker-year-header {
+.c10 .react-datepicker-year-header {
   font-size: 1.6rem;
   padding: 0.55rem 0;
 }
 
-.c9 .react-datepicker__navigation {
+.c10 .react-datepicker__navigation {
   top: 0.39rem;
 }
 
-.c10.c10.form-control.is-valid {
+.c11.c11.form-control.is-valid {
   background-image: none;
 }
 
-.c10.c10.form-control.is-invalid {
+.c11.c11.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c2 {
+.c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c2 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -255,18 +329,22 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c4.required::before {
+.c5.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c3 {
+.c4 {
   font-weight: bold;
 }
 
-.c11 {
+.c1 {
+  background-color: #f2f2f2;
+}
+
+.c12 {
   margin-right: 1rem;
   padding-bottom: 1rem;
   z-index: 0;
@@ -276,13 +354,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
     class="c0"
   >
     <div
-      class=""
+      class="c1"
     >
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -304,16 +382,16 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Purchaser name(s):
               </label>
             </div>
             <div
-              class="c4 text-left col-7"
+              class="c5 text-left col-7"
             >
               <button
-                class="c5 Button mb-3 btn btn-link"
+                class="c6 Button mb-3 btn btn-link"
                 data-testid="add-purchaser-button"
                 type="button"
               >
@@ -332,13 +410,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Purchaser agent:
               </label>
             </div>
             <div
-              class="c4 text-left col-6"
+              class="c5 text-left col-6"
             >
               <div
                 class="form-group"
@@ -350,7 +428,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     class="col"
                   >
                     <div
-                      class="c6"
+                      class="c7"
                     >
                       Select from contacts
                     </div>
@@ -370,7 +448,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     class="pl-0 col-auto"
                   >
                     <button
-                      class="c5 Button Button--icon-only px-2 btn btn-primary"
+                      class="c6 Button Button--icon-only px-2 btn btn-primary"
                       title="Select Contact"
                       type="button"
                     >
@@ -405,13 +483,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Purchaser solicitor:
               </label>
             </div>
             <div
-              class="c4 text-left col-6"
+              class="c5 text-left col-6"
             >
               <div
                 class="form-group"
@@ -423,7 +501,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     class="col"
                   >
                     <div
-                      class="c6"
+                      class="c7"
                     >
                       Select from contacts
                     </div>
@@ -443,7 +521,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     class="pl-0 col-auto"
                   >
                     <button
-                      class="c5 Button Button--icon-only px-2 btn btn-primary"
+                      class="c6 Button Button--icon-only px-2 btn btn-primary"
                       title="Select Contact"
                       type="button"
                     >
@@ -478,7 +556,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Last condition removal date:
                 <span>
@@ -506,10 +584,10 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
-                class="c7 form-group"
+                class="c8 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -528,7 +606,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c8 form-control date-picker"
+                      class="c9 form-control date-picker"
                       id="datepicker-finalConditionRemovalDate"
                       name="finalConditionRemovalDate"
                       placeholder="MMM DD, YYYY"
@@ -547,16 +625,16 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Sale completion date:
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
-                class="c7 form-group"
+                class="c8 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -575,7 +653,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                     </svg>
                     <input
                       autocomplete="off"
-                      class="c8 form-control date-picker"
+                      class="c9 form-control date-picker"
                       id="datepicker-saleCompletionDate"
                       name="saleCompletionDate"
                       placeholder="MMM DD, YYYY"
@@ -594,16 +672,16 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Fiscal year of sale:
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
-                class="c9 form-group"
+                class="c10 form-group"
               >
                 <div
                   class="react-datepicker-wrapper d-block"
@@ -621,7 +699,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
                       />
                     </svg>
                     <input
-                      class="c10 form-control"
+                      class="c11 form-control"
                       id="datepicker-saleFiscalYear"
                       name="saleFiscalYear"
                       placeholder="YYYY"
@@ -640,13 +718,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Final sale price, incl. GST ($):
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -674,13 +752,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Realtor commission ($):
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -708,13 +786,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 GST required:
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -745,13 +823,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Net Book Value ($):
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -779,7 +857,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Total cost of sales ($):
                 <span>
@@ -807,7 +885,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -835,7 +913,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Net proceeds before SPP cost ($):
                 <span>
@@ -863,7 +941,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -892,7 +970,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 SPP Amount ($):
                 <span>
@@ -920,7 +998,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -948,7 +1026,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Net proceeds after SPP cost ($):
                 <span>
@@ -976,7 +1054,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -1005,13 +1083,13 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
               class="pr-0 text-left col-5"
             >
               <label
-                class="c3"
+                class="c4"
               >
                 Remediation cost ($):
               </label>
             </div>
             <div
-              class="c4 text-left col-5"
+              class="c5 text-left col-5"
             >
               <div
                 class="form-group"
@@ -1036,10 +1114,10 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c11"
+      class="c12"
     >
       <div
-        class="c12 justify-content-end mb-12 mt-12 p-0 no-gutters row"
+        class="c13 justify-content-end mb-12 mt-12 p-0 no-gutters row"
       >
         <div
           class="pr-3 col-auto"
@@ -1048,7 +1126,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
           class="pr-6 col-auto"
         >
           <button
-            class="c5 Button btn btn-secondary"
+            class="c6 Button btn btn-secondary"
             type="button"
           >
             <div
@@ -1062,7 +1140,7 @@ exports[`Update Disposition Sale View > renders as expected 1`] = `
           class="col-auto"
         >
           <button
-            class="c5 Button mr-9 btn btn-primary"
+            class="c6 Button mr-9 btn btn-primary"
             type="button"
           >
             <div
diff --git a/source/frontend/src/features/mapSideBar/layout/__snapshots__/MapSideBarLayout.test.tsx.snap b/source/frontend/src/features/mapSideBar/layout/__snapshots__/MapSideBarLayout.test.tsx.snap
index 9abd3ef90c..734cfb12cf 100644
--- a/source/frontend/src/features/mapSideBar/layout/__snapshots__/MapSideBarLayout.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/layout/__snapshots__/MapSideBarLayout.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,16 +212,17 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -159,13 +230,15 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -180,6 +253,7 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -221,7 +295,7 @@ exports[`MapSideBarLayout component > matches snapshot 1`] = `
 
 .c6 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
index 231ba78647..aa42baab8e 100644
--- a/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/lease/common/__snapshots__/LeaseHeader.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -172,6 +242,7 @@ exports[`LeaseHeader component > renders as expected when no data is provided 1`
 
 .c2 {
   font-weight: bold;
+  color: #42814A;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
index 4718f7f7b5..3477ac35cc 100644
--- a/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/__snapshots__/ProjectContainerView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -152,16 +222,17 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -169,13 +240,15 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -190,6 +263,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -235,7 +309,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -285,8 +359,8 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
   padding: 0.2rem 0.5rem;
   margin-left: 0.4rem;
   gap: 0.5rem;
-  color: undefined;
-  background-color: undefined;
+  color: #2e8540;
+  background-color: #dff0d8;
 }
 
 .c14 {
@@ -321,6 +395,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 .c19 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c19 .tab-content .tab-pane {
@@ -329,6 +404,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c20 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -338,18 +414,22 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 }
 
 .c20 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c20 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c20 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
index d3a9e33b24..1e7e32daca 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -146,16 +216,17 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -163,13 +234,15 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -184,6 +257,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -225,7 +299,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -244,7 +318,8 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 
 .c12 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -268,6 +343,7 @@ exports[`AddProjectContainer component > renders as expected 1`] = `
 }
 
 .c10 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
index ea562f1f78..37e4d41b95 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,7 +217,8 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -171,6 +242,7 @@ exports[`AddProjectForm component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
@@ -681,15 +753,37 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -699,20 +793,66 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -734,6 +874,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -744,6 +885,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -812,6 +954,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -837,7 +980,8 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -871,6 +1015,7 @@ exports[`AddProjectForm component > renders as expected with existing data 1`] =
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
index 290226f89d..f938044066 100644
--- a/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/common/__snapshots__/ProjectHeader.test.tsx.snap
@@ -41,8 +41,8 @@ exports[`ProjectHeader component > renders as expected 1`] = `
   padding: 0.2rem 0.5rem;
   margin-left: 0.4rem;
   gap: 0.5rem;
-  color: undefined;
-  background-color: undefined;
+  color: #2e8540;
+  background-color: #dff0d8;
 }
 
 .c4 {
diff --git a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
index e2a18eecbc..8efcb2c386 100644
--- a/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/tabs/__snapshots__/ProjectTabsContainer.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`Project Tabs component > matches snapshot 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -21,6 +22,7 @@ exports[`Project Tabs component > matches snapshot 1`] = `
 
 .c1 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -30,18 +32,22 @@ exports[`Project Tabs component > matches snapshot 1`] = `
 }
 
 .c1 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c1 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
index 2dc4d56598..822cbbfc0f 100644
--- a/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/tabs/projectDetails/detail/__snapshots__/ProjectSummaryView.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -22,7 +23,8 @@ exports[`ProjectSummaryView component > matches snapshot 1`] = `
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/__snapshots__/BcAssessmentTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/__snapshots__/BcAssessmentTabView.test.tsx.snap
index e5491af33c..565454c447 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/__snapshots__/BcAssessmentTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/bcAssessment/__snapshots__/BcAssessmentTabView.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`BcAssessmentTabView component > renders as expected when provided valid
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/ltsa/__snapshots__/LtsaTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/ltsa/__snapshots__/LtsaTabView.test.tsx.snap
index 5ddc196b23..45913751a3 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/ltsa/__snapshots__/LtsaTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/ltsa/__snapshots__/LtsaTabView.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`LtsaTabView component > renders as expected when provided valid ltsa da
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 <div
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/AssociationHeader.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/AssociationHeader.test.tsx.snap
index df1f06287d..dedd389727 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/AssociationHeader.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/AssociationHeader.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`AssociationHeader component > renders as expected when provided valid d
   <div />
   .c0 {
   color: white;
+  background-color: #428bca;
   font-size: 1.5rem;
   border-radius: 50%;
   width: 2.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
index 8446e05310..805d5e5ecf 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyAssociations/__snapshots__/PropertyAssociationTabView.test.tsx.snap
@@ -13,12 +13,14 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -32,6 +34,7 @@ exports[`PropertyAssociationTabView component > renders as expected when provide
 
 .c3 {
   color: white;
+  background-color: #428bca;
   font-size: 1.5rem;
   border-radius: 50%;
   width: 2.5rem;
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
index 9e44781c80..7d2950a3e5 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/__snapshots__/OperationSectionView.test.tsx.snap
@@ -14,13 +14,15 @@ exports[`Operation section view > matches snapshot 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
 .c3 {
   font-size: 1.0em;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -434,13 +436,15 @@ exports[`Operation section view > matches snapshot 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
 .c3 {
   font-size: 1.0em;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
index 2c39404f64..e3194dc023 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/detail/propertyOperation/__snapshots__/OperationView.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`Subdivision detail view > matches snapshot 1`] = `
 
 .c1 {
   font-size: 1.0em;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
index 70bcf2ec6a..c3bb6fdbe7 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsContainer.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c6.btn {
+  .c7.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c6.btn .Button__value {
+.c7.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c6.btn:hover {
+.c7.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c6.btn:focus {
+.c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c6.btn.btn-secondary {
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
-.c6.btn.btn-info {
+.c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c6.btn.btn-info:hover,
-.c6.btn.btn-info:active,
-.c6.btn.btn-info:focus {
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c6.btn.btn-light {
+.c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c6.btn.btn-dark {
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c6.btn.btn-link {
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   padding: 0;
 }
 
-.c6.btn.btn-link:hover,
-.c6.btn.btn-link:active,
-.c6.btn.btn-link:focus {
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   outline: none;
 }
 
-.c6.btn.btn-link:disabled,
-.c6.btn.btn-link.disabled {
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c6.btn:disabled,
-.c6.btn:disabled:hover {
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,32 +199,32 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c6.Button .Button__icon {
+.c7.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c6.Button--icon-only:focus {
+.c7.Button--icon-only:focus {
   outline: none;
 }
 
-.c6.Button--icon-only .Button__icon {
+.c7.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c7.c7.btn {
+.c8.c8.btn {
   color: #aaaaaa;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c7.c7.btn .text {
+.c8.c8.btn .text {
   display: none;
 }
 
-.c7.c7.btn:hover,
-.c7.c7.btn:active,
-.c7.c7.btn:focus {
+.c8.c8.btn:hover,
+.c8.c8.btn:active,
+.c8.c8.btn:focus {
   color: #d8292f;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -168,19 +238,28 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   flex-direction: row;
 }
 
-.c7.c7.btn:hover .text,
-.c7.c7.btn:active .text,
-.c7.c7.btn:focus .text {
+.c8.c8.btn:hover .text,
+.c8.c8.btn:active .text,
+.c8.c8.btn:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c8 {
+.c10 {
   margin-left: 0.5rem;
   cursor: pointer;
+  fill: #474543;
 }
 
-.c13 {
+.c10:hover {
+  fill: #CE3E39;
+}
+
+.c9 {
+  color: #474543;
+}
+
+.c15 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -207,7 +286,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   overflow-y: auto;
 }
 
-.c12.form-group {
+.c14.form-group {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -215,7 +294,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   margin-bottom: 0;
 }
 
-.c12.form-group .radio-group {
+.c14.form-group .radio-group {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -228,7 +307,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   column-gap: 0.4rem;
 }
 
-.c12.form-group .radio-group .form-check {
+.c14.form-group .radio-group .form-check {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -243,25 +322,26 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   justify-content: center;
 }
 
-.c12.form-group .radio-group .form-check .form-check-input {
+.c14.form-group .radio-group .form-check .form-check-input {
   margin-left: 0;
 }
 
-.c12.form-group .radio-group .form-check-label {
+.c14.form-group .radio-group .form-check-label {
   margin-left: 1rem;
 }
 
-.c12 .form-label {
+.c14 .form-label {
   margin-bottom: unset;
 }
 
-.c2 {
+.c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c2 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -269,43 +349,51 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c5.required::before {
+.c6.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c4 {
+.c5 {
   font-weight: bold;
 }
 
-.c9 {
+.c11 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
-.c11 {
+.c13 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
-.c14 {
+.c16 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #d9eaf7;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
-.c10 {
+.c12 {
   max-width: 9rem;
 }
 
-.c3 {
+.c1 {
+  background-color: #f2f2f2;
+}
+
+.c4 {
+  color: #9F9D9C;
   text-align: left;
 }
 
@@ -313,13 +401,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
     class="c0"
   >
     <div
-      class=""
+      class="c1"
     >
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -335,7 +423,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
           class="collapse show"
         >
           <p
-            class="c3"
+            class="c4"
           >
             This is the address stored in PIMS application for this property and will be used wherever this property's address is needed.
           </p>
@@ -346,13 +434,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Address (line 1):
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="row"
@@ -382,13 +470,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Address (line 2):
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="row"
@@ -421,13 +509,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Address (line 3):
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="row"
@@ -451,7 +539,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   class="pl-0 col-3"
                 >
                   <button
-                    class="c6 Button c7 btn btn-link"
+                    class="c7 Button c8 btn btn-link"
                     type="button"
                   >
                     <div
@@ -497,13 +585,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 City:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="input form-group"
@@ -525,13 +613,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Postal code:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="input form-group"
@@ -553,13 +641,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 General location:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="input form-group"
@@ -576,10 +664,10 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -601,16 +689,16 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Historical File #:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <button
-                class="c6 Button btn btn-link"
+                class="c7 Button btn btn-link"
                 data-testid="add-historical-number"
                 type="button"
               >
@@ -629,13 +717,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Legal Description:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="textarea input form-group"
@@ -655,13 +743,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 MOTI region:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -715,13 +803,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Highways district:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -831,16 +919,16 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Electoral district:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <span
-                class=""
+                class="c9"
               />
             </div>
           </div>
@@ -851,16 +939,16 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Agricultural Land Reserve:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <span
-                class=""
+                class="c9"
               >
                 No
               </span>
@@ -873,13 +961,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Railway belt / Dominion patent:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -915,13 +1003,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Land parcel type:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -1012,13 +1100,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Municipal zoning:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="input form-group"
@@ -1040,13 +1128,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Anomalies:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -1070,7 +1158,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1094,7 +1182,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1190,10 +1278,10 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -1215,13 +1303,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Tenure status:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -1245,7 +1333,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1269,7 +1357,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1399,13 +1487,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Provincial Public Hwy:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -1481,13 +1569,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-4"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Highway / Road Details:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="form-group"
@@ -1511,7 +1599,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1535,7 +1623,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           class="custom-close"
                         >
                           <svg
-                            class="c8"
+                            class="c10"
                             fill="currentColor"
                             height="16"
                             stroke="currentColor"
@@ -1656,10 +1744,10 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
@@ -1681,13 +1769,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-2"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Area:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="row"
@@ -1696,7 +1784,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   class="col"
                 >
                   <div
-                    class="c9"
+                    class="c11"
                   >
                     <div
                       class="pb-2 row"
@@ -1706,7 +1794,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       >
                         <input
                           aria-label="square metres"
-                          class="c10"
+                          class="c12"
                           name="area-sq-meters"
                           step=".01"
                           type="number"
@@ -1727,7 +1815,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       >
                         <input
                           aria-label="hectares"
-                          class="c10"
+                          class="c12"
                           name="area-hectares"
                           step=".01"
                           type="number"
@@ -1746,7 +1834,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                   class="col"
                 >
                   <div
-                    class="c11"
+                    class="c13"
                   >
                     <div
                       class="pb-2 row"
@@ -1756,7 +1844,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       >
                         <input
                           aria-label="square feet"
-                          class="c10"
+                          class="c12"
                           name="area-sq-feet"
                           step=".01"
                           type="number"
@@ -1777,7 +1865,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       >
                         <input
                           aria-label="acres"
-                          class="c10"
+                          class="c12"
                           name="area-acres"
                           step=".01"
                           type="number"
@@ -1802,22 +1890,22 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-auto"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Is this a volumetric parcel?:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
-                class="c12 form-group"
+                class="c14 form-group"
               >
                 <div
                   class="radio-group"
                 >
                   <div
-                    class="c13 pb-3"
+                    class="c15 pb-3"
                   >
                     <div
                       class="form-check"
@@ -1840,7 +1928,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                     </label>
                   </div>
                   <div
-                    class="c13 pb-3"
+                    class="c15 pb-3"
                   >
                     <div
                       class="form-check"
@@ -1872,13 +1960,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
               class="pr-0 text-left col-2"
             >
               <label
-                class="c4"
+                class="c5"
               >
                 Volume:
               </label>
             </div>
             <div
-              class="c5 text-left col"
+              class="c6 text-left col"
             >
               <div
                 class="row"
@@ -1893,7 +1981,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       class="col"
                     >
                       <div
-                        class="c14"
+                        class="c16"
                       >
                         <div
                           class="pb-2 row"
@@ -1903,7 +1991,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           >
                             <input
                               aria-label="cubic metres"
-                              class="c10"
+                              class="c12"
                               name="volume-cubic-meters"
                               step=".01"
                               type="number"
@@ -1929,7 +2017,7 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                           >
                             <input
                               aria-label="cubic feet"
-                              class="c10"
+                              class="c12"
                               name="volume-cubic-feet"
                               step=".01"
                               type="number"
@@ -1961,13 +2049,13 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
                       class="pr-0 text-left col-3"
                     >
                       <label
-                        class="c4"
+                        class="c5"
                       >
                         Type:
                       </label>
                     </div>
                     <div
-                      class="c5 text-left col-auto"
+                      class="c6 text-left col-auto"
                     >
                       <div
                         class="form-group"
@@ -2002,10 +2090,10 @@ exports[`UpdatePropertyDetailsContainer component > renders as expected 1`] = `
         </div>
       </div>
       <div
-        class="c1 form-section"
+        class="c2 form-section"
       >
         <h2
-          class="c2"
+          class="c3"
         >
           <div
             class="no-gutters row"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
index f79e026b02..1d478f314d 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetails/update/__snapshots__/UpdatePropertyDetailsForm.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c5.btn {
+  .c6.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -35,53 +35,121 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c5.btn .Button__value {
+.c6.btn .Button__value {
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
 }
 
-.c5.btn:hover {
+.c6.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c5.btn:focus {
+.c6.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c5.btn.btn-secondary {
+.c6.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c6.btn.btn-primary:hover,
+.c6.btn.btn-primary:active,
+.c6.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c6.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c6.btn.btn-secondary:hover,
+.c6.btn.btn-secondary:active,
+.c6.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
-.c5.btn.btn-info {
+.c6.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c5.btn.btn-info:hover,
-.c5.btn.btn-info:active,
-.c5.btn.btn-info:focus {
+.c6.btn.btn-info:hover,
+.c6.btn.btn-info:active,
+.c6.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
-.c5.btn.btn-light {
+.c6.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
-.c5.btn.btn-dark {
+.c6.btn.btn-light:hover,
+.c6.btn.btn-light:active,
+.c6.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c6.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
-.c5.btn.btn-link {
+.c6.btn.btn-dark:hover,
+.c6.btn.btn-dark:active,
+.c6.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c6.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-danger:hover,
+.c6.btn.btn-danger:active,
+.c6.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c6.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c6.btn.btn-warning:hover,
+.c6.btn.btn-warning:active,
+.c6.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c6.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -100,9 +168,10 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   padding: 0;
 }
 
-.c5.btn.btn-link:hover,
-.c5.btn.btn-link:active,
-.c5.btn.btn-link:focus {
+.c6.btn.btn-link:hover,
+.c6.btn.btn-link:active,
+.c6.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -111,14 +180,15 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   outline: none;
 }
 
-.c5.btn.btn-link:disabled,
-.c5.btn.btn-link.disabled {
+.c6.btn.btn-link:disabled,
+.c6.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
 
-.c5.btn:disabled,
-.c5.btn:disabled:hover {
+.c6.btn:disabled,
+.c6.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -129,32 +199,32 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c5.Button .Button__icon {
+.c6.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c5.Button--icon-only:focus {
+.c6.Button--icon-only:focus {
   outline: none;
 }
 
-.c5.Button--icon-only .Button__icon {
+.c6.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c6.c6.btn {
+.c7.c7.btn {
   color: #aaaaaa;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c6.c6.btn .text {
+.c7.c7.btn .text {
   display: none;
 }
 
-.c6.c6.btn:hover,
-.c6.c6.btn:active,
-.c6.c6.btn:focus {
+.c7.c7.btn:hover,
+.c7.c7.btn:active,
+.c7.c7.btn:focus {
   color: #d8292f;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -168,19 +238,28 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   flex-direction: row;
 }
 
-.c6.c6.btn:hover .text,
-.c6.c6.btn:active .text,
-.c6.c6.btn:focus .text {
+.c7.c7.btn:hover .text,
+.c7.c7.btn:active .text,
+.c7.c7.btn:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c7 {
+.c9 {
   margin-left: 0.5rem;
   cursor: pointer;
+  fill: #474543;
 }
 
-.c12 {
+.c9:hover {
+  fill: #CE3E39;
+}
+
+.c8 {
+  color: #474543;
+}
+
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -190,7 +269,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   flex-wrap: nowrap;
 }
 
-.c11.form-group {
+.c13.form-group {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -198,7 +277,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   margin-bottom: 0;
 }
 
-.c11.form-group .radio-group {
+.c13.form-group .radio-group {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -211,7 +290,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   column-gap: 0.4rem;
 }
 
-.c11.form-group .radio-group .form-check {
+.c13.form-group .radio-group .form-check {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -226,25 +305,26 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   justify-content: center;
 }
 
-.c11.form-group .radio-group .form-check .form-check-input {
+.c13.form-group .radio-group .form-check .form-check-input {
   margin-left: 0;
 }
 
-.c11.form-group .radio-group .form-check-label {
+.c13.form-group .radio-group .form-check-label {
   margin-left: 1rem;
 }
 
-.c11 .form-label {
+.c13 .form-label {
   margin-bottom: unset;
 }
 
-.c1 {
+.c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c0 {
+.c1 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -252,54 +332,62 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
   border-radius: 0.5rem;
 }
 
-.c4.required::before {
+.c5.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c3 {
+.c4 {
   font-weight: bold;
 }
 
-.c8 {
+.c10 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
-.c10 {
+.c12 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
-.c13 {
+.c15 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #d9eaf7;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
-.c9 {
+.c11 {
   max-width: 9rem;
 }
 
-.c2 {
+.c0 {
+  background-color: #f2f2f2;
+}
+
+.c3 {
+  color: #9F9D9C;
   text-align: left;
 }
 
 <div
-    class=""
+    class="c0"
   >
     <div
-      class="c0 form-section"
+      class="c1 form-section"
     >
       <h2
-        class="c1"
+        class="c2"
       >
         <div
           class="no-gutters row"
@@ -315,7 +403,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
         class="collapse show"
       >
         <p
-          class="c2"
+          class="c3"
         >
           This is the address stored in PIMS application for this property and will be used wherever this property's address is needed.
         </p>
@@ -326,13 +414,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Address (line 1):
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="row"
@@ -362,13 +450,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Address (line 2):
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="row"
@@ -401,13 +489,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Address (line 3):
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="row"
@@ -431,7 +519,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 class="pl-0 col-3"
               >
                 <button
-                  class="c5 Button c6 btn btn-link"
+                  class="c6 Button c7 btn btn-link"
                   type="button"
                 >
                   <div
@@ -477,13 +565,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               City:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="input form-group"
@@ -505,13 +593,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Postal code:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="input form-group"
@@ -533,13 +621,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               General location:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="input form-group"
@@ -556,10 +644,10 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c0 form-section"
+      class="c1 form-section"
     >
       <h2
-        class="c1"
+        class="c2"
       >
         <div
           class="no-gutters row"
@@ -581,16 +669,16 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Historical File #:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <button
-              class="c5 Button btn btn-link"
+              class="c6 Button btn btn-link"
               data-testid="add-historical-number"
               type="button"
             >
@@ -609,13 +697,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Legal Description:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="textarea input form-group"
@@ -635,13 +723,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               MOTI region:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -695,13 +783,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Highways district:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -811,16 +899,16 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Electoral district:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <span
-              class=""
+              class="c8"
             />
           </div>
         </div>
@@ -831,16 +919,16 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Agricultural Land Reserve:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <span
-              class=""
+              class="c8"
             >
               No
             </span>
@@ -853,13 +941,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Railway belt / Dominion patent:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -895,13 +983,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Land parcel type:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -992,13 +1080,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Municipal zoning:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="input form-group"
@@ -1020,13 +1108,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Anomalies:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -1050,7 +1138,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1074,7 +1162,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1170,10 +1258,10 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c0 form-section"
+      class="c1 form-section"
     >
       <h2
-        class="c1"
+        class="c2"
       >
         <div
           class="no-gutters row"
@@ -1195,13 +1283,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Tenure status:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -1225,7 +1313,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1249,7 +1337,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1379,13 +1467,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Provincial Public Hwy:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -1461,13 +1549,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Highway / Road Details:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="form-group"
@@ -1491,7 +1579,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1515,7 +1603,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         class="custom-close"
                       >
                         <svg
-                          class="c7"
+                          class="c9"
                           fill="currentColor"
                           height="16"
                           stroke="currentColor"
@@ -1636,10 +1724,10 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c0 form-section"
+      class="c1 form-section"
     >
       <h2
-        class="c1"
+        class="c2"
       >
         <div
           class="no-gutters row"
@@ -1661,13 +1749,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-2"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Area:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="row"
@@ -1676,7 +1764,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c8"
+                  class="c10"
                 >
                   <div
                     class="pb-2 row"
@@ -1686,7 +1774,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     >
                       <input
                         aria-label="square metres"
-                        class="c9"
+                        class="c11"
                         name="area-sq-meters"
                         step=".01"
                         type="number"
@@ -1707,7 +1795,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     >
                       <input
                         aria-label="hectares"
-                        class="c9"
+                        class="c11"
                         name="area-hectares"
                         step=".01"
                         type="number"
@@ -1726,7 +1814,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                 class="col"
               >
                 <div
-                  class="c10"
+                  class="c12"
                 >
                   <div
                     class="pb-2 row"
@@ -1736,7 +1824,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     >
                       <input
                         aria-label="square feet"
-                        class="c9"
+                        class="c11"
                         name="area-sq-feet"
                         step=".01"
                         type="number"
@@ -1757,7 +1845,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     >
                       <input
                         aria-label="acres"
-                        class="c9"
+                        class="c11"
                         name="area-acres"
                         step=".01"
                         type="number"
@@ -1782,22 +1870,22 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-auto"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Is this a volumetric parcel?:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
-              class="c11 form-group"
+              class="c13 form-group"
             >
               <div
                 class="radio-group"
               >
                 <div
-                  class="c12 pb-3"
+                  class="c14 pb-3"
                 >
                   <div
                     class="form-check"
@@ -1820,7 +1908,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                   </label>
                 </div>
                 <div
-                  class="c12 pb-3"
+                  class="c14 pb-3"
                 >
                   <div
                     class="form-check"
@@ -1852,13 +1940,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
             class="pr-0 text-left col-2"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Volume:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             <div
               class="row"
@@ -1873,7 +1961,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     class="col"
                   >
                     <div
-                      class="c13"
+                      class="c15"
                     >
                       <div
                         class="pb-2 row"
@@ -1883,7 +1971,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         >
                           <input
                             aria-label="cubic metres"
-                            class="c9"
+                            class="c11"
                             name="volume-cubic-meters"
                             step=".01"
                             type="number"
@@ -1909,7 +1997,7 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                         >
                           <input
                             aria-label="cubic feet"
-                            class="c9"
+                            class="c11"
                             name="volume-cubic-feet"
                             step=".01"
                             type="number"
@@ -1941,13 +2029,13 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
                     class="pr-0 text-left col-3"
                   >
                     <label
-                      class="c3"
+                      class="c4"
                     >
                       Type:
                     </label>
                   </div>
                   <div
-                    class="c4 text-left col-auto"
+                    class="c5 text-left col-auto"
                   >
                     <div
                       class="form-group"
@@ -1982,10 +2070,10 @@ exports[`UpdatePropertyDetailsForm component > renders as expected 1`] = `
       </div>
     </div>
     <div
-      class="c0 form-section"
+      class="c1 form-section"
     >
       <h2
-        class="c1"
+        class="c2"
       >
         <div
           class="no-gutters row"
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
index 6892c6818c..9b663f7583 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/activity/list/__snapshots__/ManagementActivitiesListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Activities list view > renders as expected 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Activities list view > renders as expected 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Activities list view > renders as expected 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Activities list view > renders as expected 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -149,7 +219,8 @@ exports[`Activities list view > renders as expected 1`] = `
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
index 87bdc38d4a..5780639bc7 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/__snapshots__/PropertyContactListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`PropertyContactListView component > renders as expected when provided v
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`PropertyContactListView component > renders as expected when provided v
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -141,42 +211,70 @@ exports[`PropertyContactListView component > renders as expected when provided v
   margin-right: 0;
 }
 
-.c7.c7.btn {
+.c8.c8.btn {
   background-color: unset;
   border: none;
 }
 
-.c7.c7.btn:hover,
-.c7.c7.btn:focus,
-.c7.c7.btn:active {
+.c8.c8.btn:hover,
+.c8.c8.btn:focus,
+.c8.c8.btn:active {
   background-color: unset;
   outline: none;
   box-shadow: none;
 }
 
-.c7.c7.btn svg {
+.c8.c8.btn svg {
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
 }
 
-.c7.c7.btn svg:hover {
+.c8.c8.btn svg:hover {
   -webkit-transition: all 0.3s ease-in;
   transition: all 0.3s ease-in;
 }
 
-.c8.c8.btn.btn-primary {
+.c8.c8.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c8.c8.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c8.c8.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c8.c8.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
+.c9.c9.btn.btn-primary {
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c8.c8.btn.btn-primary .text {
+.c9.c9.btn.btn-primary svg {
+  color: #9F9D9C;
+}
+
+.c9.c9.btn.btn-primary .text {
   display: none;
 }
 
-.c8.c8.btn.btn-primary:hover,
-.c8.c8.btn.btn-primary:active,
-.c8.c8.btn.btn-primary:focus {
+.c9.c9.btn.btn-primary:hover,
+.c9.c9.btn.btn-primary:active,
+.c9.c9.btn.btn-primary:focus {
   color: #d8292f;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -190,18 +288,18 @@ exports[`PropertyContactListView component > renders as expected when provided v
   flex-direction: row;
 }
 
-.c8.c8.btn.btn-primary:hover .text,
-.c8.c8.btn.btn-primary:active .text,
-.c8.c8.btn.btn-primary:focus .text {
+.c9.c9.btn.btn-primary:hover .text,
+.c9.c9.btn.btn-primary:active .text,
+.c9.c9.btn.btn-primary:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
-.c9 {
+.c10 {
   margin-top: 0.3rem;
 }
 
-.c10 {
+.c11 {
   min-width: 5rem;
   max-width: 5rem;
   margin-left: 1rem;
@@ -210,17 +308,28 @@ exports[`PropertyContactListView component > renders as expected when provided v
   padding: 0;
 }
 
-.c10:disabled {
+.c11:disabled {
   background: white;
 }
 
-.c4.c4 {
+.c4.btn.btn-primary,
+.c4.btn.btn-primary:active {
+  background-color: #42814A;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:focus {
+  background-color: #2e8540;
+  outline-color: #2e8540;
+}
+
+.c5.c5 {
   display: inline-block;
   margin-left: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
-.c5 {
+.c6 {
   float: right;
   cursor: pointer;
   font-size: 3.2rem;
@@ -228,7 +337,8 @@ exports[`PropertyContactListView component > renders as expected when provided v
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -256,7 +366,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
   margin: 0;
 }
 
-.c6 {
+.c7 {
   padding: 0 0.4rem;
   display: block;
 }
@@ -285,7 +395,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
               class="my-1 col-auto"
             >
               <button
-                class="c3 Button c4 btn btn-primary"
+                class="c3 Button c4 c5 btn btn-primary"
                 type="button"
               >
                 <div
@@ -314,7 +424,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
           class="pl-8 d-flex align-items-end col-auto"
         >
           <svg
-            class="c5"
+            class="c6"
             fill="currentColor"
             height="1em"
             stroke="currentColor"
@@ -422,7 +532,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
                 title=""
               >
                 <a
-                  class="c6"
+                  class="c7"
                   href="/contact/P1"
                   rel="noopener noreferrer"
                   target="_blank"
@@ -482,7 +592,7 @@ exports[`PropertyContactListView component > renders as expected when provided v
                     </button>
                   </div>
                   <button
-                    class="c3 Button c7 c8 btn btn-primary"
+                    class="c3 Button c8 c9 btn btn-primary"
                     data-testid="contact-delete-0"
                     id="contact-delete-0"
                     title="Delete contact"
@@ -538,17 +648,17 @@ exports[`PropertyContactListView component > renders as expected when provided v
                 class="d-flex"
               >
                 <span
-                  class="c9"
+                  class="c10"
                 >
                   Show
                 </span>
                 <input
-                  class="c10 form-control"
+                  class="c11 form-control"
                   type="number"
                   value="10"
                 />
                 <span
-                  class="c9"
+                  class="c10"
                 >
                   Entries
                 </span>
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
index f487747b64..95fe8b0981 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/detail/summary/__snapshots__/PropertyManagementDetailView.test.tsx.snap
@@ -18,7 +18,8 @@ exports[`PropertyManagementDetailView component > renders as expected when provi
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
index dbe5798119..1ae7dd34af 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/__snapshots__/PropertyContactEditForm.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`PropertyContactEditForm component > renders as expected when provided v
   />
   <div />
   .c1 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
index dea3e7bf46..1d6a1d8166 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyDetailsManagement/update/summary/__snapshots__/PropertyManagementUpdateForm.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`PropertyManagementUpdateForm component > renders as expected 1`] = `
   />
   <div />
   .c1 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
index 8b712c8678..c58bed622f 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/detail/__snapshots__/PropertyResearchTabView.test.tsx.snap
@@ -6,13 +6,14 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
     class="Toastify"
   />
   <div />
-  .c2 {
+  .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c2 {
   margin: 1.6rem;
   padding: 1.6rem;
   background-color: white;
@@ -20,26 +21,30 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
   border-radius: 0.5rem;
 }
 
-.c4.required::before {
+.c5.required::before {
   content: '*';
   position: absolute;
   top: 0.75rem;
   left: 0rem;
 }
 
-.c3 {
+.c4 {
   font-weight: bold;
 }
 
 .c0 {
+  background-color: #f2f2f2;
+}
+
+.c1 {
   text-align: right;
 }
 
 <div
-    class=""
+    class="c0"
   >
     <div
-      class="c0 mr-3 my-1"
+      class="c1 mr-3 my-1"
     >
       <button
         class="btn btn-link"
@@ -61,10 +66,10 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
       </button>
     </div>
     <div
-      class="c1 form-section"
+      class="c2 form-section"
     >
       <h2
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -86,13 +91,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Descriptive name:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             The Research Property name
           </div>
@@ -104,13 +109,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Purpose:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             Type A, Type B
           </div>
@@ -122,13 +127,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Legal opinion req'd?:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             Yes
           </div>
@@ -140,13 +145,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Legal opinion obtained?:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             Yes
           </div>
@@ -158,13 +163,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Document reference:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           >
             A document reference
           </div>
@@ -172,10 +177,10 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
       </div>
     </div>
     <div
-      class="c1 form-section"
+      class="c2 form-section"
     >
       <h2
-        class="c2"
+        class="c3"
       >
         <div
           class="no-gutters row"
@@ -197,13 +202,13 @@ exports[`PropertyResearchTabView component > renders as expected when provided v
             class="pr-0 text-left col-4"
           >
             <label
-              class="c3"
+              class="c4"
             >
               Summary notes:
             </label>
           </div>
           <div
-            class="c4 text-left col"
+            class="c5 text-left col"
           />
         </div>
         Research summary notes
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
index 45aaf2dfd0..3b738d33d3 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/propertyResearch/update/__snapshots__/UpdatePropertyForm.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`UpdatePropertyForm component > renders as expected when provided no res
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
index c3bd743249..5240bbf578 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/detail/__snapshots__/TakesDetailView.test.tsx.snap
@@ -7,9 +7,10 @@ exports[`TakesDetailView component > renders as expected 1`] = `
   />
   <div />
   .c2 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
@@ -22,6 +23,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -31,7 +33,8 @@ exports[`TakesDetailView component > renders as expected 1`] = `
 
 .c8 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -79,14 +82,16 @@ exports[`TakesDetailView component > renders as expected 1`] = `
 .c13 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c14 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
@@ -103,6 +108,7 @@ exports[`TakesDetailView component > renders as expected 1`] = `
 }
 
 .c3 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
   padding: 1rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
index 5819c17e05..f354727e5e 100644
--- a/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/property/tabs/takes/update/__snapshots__/TakeUpdateForm.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -48,6 +49,7 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -101,7 +103,8 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -127,14 +130,16 @@ exports[`TakeUpdateForm component > renders as expected 1`] = `
 .c12 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #42814A;
   border-radius: 0.5rem;
 }
 
 .c14 {
   max-width: 25rem;
   padding: 1rem;
-  border: 1px solid;
+  background-color: #f2f2f2;
+  border: 1px solid #053662;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
index bcf529ded8..26aa6583fb 100644
--- a/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/__snapshots__/ResearchContainer.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,16 +217,17 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -197,13 +268,15 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -218,6 +291,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -263,7 +337,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -278,6 +352,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 .c27 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c27 .tab-content .tab-pane {
@@ -286,6 +361,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c28 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -295,22 +371,27 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 }
 
 .c28 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c28 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c28 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
 .c29 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -320,7 +401,8 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 
 .c32 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -368,8 +450,8 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   padding: 0.2rem 0.5rem;
   margin-left: 0.4rem;
   gap: 0.5rem;
-  color: undefined;
-  background-color: undefined;
+  color: #2e8540;
+  background-color: #dff0d8;
 }
 
 .c14 {
@@ -402,6 +484,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c21 {
@@ -416,6 +499,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
 }
 
 .c24 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -436,6 +520,10 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   align-items: center;
 }
 
+.c24.selected {
+  background-color: #FCBA19;
+}
+
 .c22 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -450,7 +538,7 @@ exports[`ResearchContainer component > renders as expected 1`] = `
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c23 {
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
index 993092a26f..610f43bab0 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -161,18 +231,21 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c32 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c23 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -182,7 +255,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -190,13 +263,15 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -211,6 +286,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -252,7 +328,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c7 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c6 {
@@ -288,7 +364,8 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c19 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -317,6 +394,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
@@ -367,9 +445,11 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c24.c24.c24 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c26 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -381,6 +461,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 .c20 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c20 .tab-content .tab-pane {
@@ -389,6 +470,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c22 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -398,18 +480,22 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 }
 
 .c22 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c22 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c22 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -422,6 +508,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 }
 
 .c29 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -436,7 +523,8 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 
 .c33 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -448,6 +536,7 @@ exports[`AddResearchContainer component > renders as expected 1`] = `
 }
 
 .c11 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
index d9c9b4e433..beb747ab19 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/AddResearchForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 .c9.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c9.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c9.btn.btn-primary:hover,
+.c9.btn.btn-primary:active,
+.c9.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c9.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c9.btn.btn-secondary:hover,
+.c9.btn.btn-secondary:active,
+.c9.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c9.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 .c9.btn.btn-info:hover,
 .c9.btn.btn-info:active,
 .c9.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c9.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c9.btn.btn-light:hover,
+.c9.btn.btn-light:active,
+.c9.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c9.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c9.btn.btn-dark:hover,
+.c9.btn.btn-dark:active,
+.c9.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c9.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-danger:hover,
+.c9.btn.btn-danger:active,
+.c9.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c9.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c9.btn.btn-warning:hover,
+.c9.btn.btn-warning:active,
+.c9.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c9.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 .c9.btn.btn-link:hover,
 .c9.btn.btn-link:active,
 .c9.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c9.btn.btn-link:disabled,
 .c9.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -161,9 +231,11 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c22 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c13 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -174,7 +246,8 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c8 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -203,6 +276,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
@@ -253,9 +327,11 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c14.c14.c14 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c16 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -267,6 +343,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 .c10 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c10 .tab-content .tab-pane {
@@ -275,6 +352,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c12 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -284,18 +362,22 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 }
 
 .c12 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c12 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c12 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -308,6 +390,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 }
 
 .c19 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -322,7 +405,8 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 
 .c23 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -334,6 +418,7 @@ exports[`AddResearchForm component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
index e42475a673..c2bb435dd9 100644
--- a/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/add/__snapshots__/ResearchProperties.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 .c14.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c14.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c14.btn.btn-primary:hover,
+.c14.btn.btn-primary:active,
+.c14.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c14.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c14.btn.btn-secondary:hover,
+.c14.btn.btn-secondary:active,
+.c14.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c14.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 .c14.btn.btn-info:hover,
 .c14.btn.btn-info:active,
 .c14.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c14.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c14.btn.btn-light:hover,
+.c14.btn.btn-light:active,
+.c14.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c14.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c14.btn.btn-dark:hover,
+.c14.btn.btn-dark:active,
+.c14.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c14.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c14.btn.btn-danger:hover,
+.c14.btn.btn-danger:active,
+.c14.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c14.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c14.btn.btn-warning:hover,
+.c14.btn.btn-warning:active,
+.c14.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c14.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 .c14.btn.btn-link:hover,
 .c14.btn.btn-link:active,
 .c14.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c14.btn.btn-link:disabled,
 .c14.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`ResearchProperties component > renders as expected when provided no pro
   transition: all 0.3s ease-in;
 }
 
+.c21.c21.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c21.c21.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c21.c21.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c21.c21.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c21.c21.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c21.c21.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c22.c22.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -237,9 +331,11 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c15 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c5 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -250,7 +346,8 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c1 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -291,9 +388,11 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c6.c6.c6 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c8 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -305,6 +404,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 .c2 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c2 .tab-content .tab-pane {
@@ -313,6 +413,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c4 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -322,18 +423,22 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 }
 
 .c4 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c4 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c4 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -346,6 +451,7 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 }
 
 .c11 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -360,7 +466,8 @@ exports[`ResearchProperties component > renders as expected when provided no pro
 
 .c16 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchFileNameGuide.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchFileNameGuide.test.tsx.snap
index bca3cd0c3d..160fce213a 100644
--- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchFileNameGuide.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchFileNameGuide.test.tsx.snap
@@ -88,6 +88,7 @@ exports[`ResearchFileNameGuide > renders as expected 1`] = `
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
diff --git a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
index 5c8f162a0f..fcf8a796ed 100644
--- a/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/__snapshots__/ResearchMenu.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
   padding: 0px;
   margin: 0px;
   width: 100%;
+  color: var(--surface-color-primary-button-default);
 }
 
 .c1 {
@@ -25,6 +26,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
 }
 
 .c4 {
+  background-color: #fcba19;
   font-size: 1.5rem;
   border-radius: 50%;
   opacity: 0.8;
@@ -45,6 +47,10 @@ exports[`ResearchMenu component > renders as expected when provided no research
   align-items: center;
 }
 
+.c4.selected {
+  background-color: #FCBA19;
+}
+
 .c2 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -59,7 +65,7 @@ exports[`ResearchMenu component > renders as expected when provided no research
   -ms-flex-align: flex-end;
   align-items: flex-end;
   width: 100%;
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #606060;
 }
 
 .c3 {
diff --git a/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
index d44dfe97c4..e94487ab08 100644
--- a/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/common/updateProjects/__snapshots__/UpdateProjectsSubForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateProjectsSubForm > renders as expected with minimal form data 1`]
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateProjectsSubForm > renders as expected with minimal form data 1`]
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateProjectsSubForm > renders as expected with minimal form data 1`]
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateProjectsSubForm > renders as expected with minimal form data 1`]
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -205,15 +275,37 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -223,20 +315,66 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -258,6 +396,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -268,6 +407,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -510,15 +650,37 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c0.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c0.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c0.btn.btn-primary:hover,
+.c0.btn.btn-primary:active,
+.c0.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c0.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c0.btn.btn-secondary:hover,
+.c0.btn.btn-secondary:active,
+.c0.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c0.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -528,20 +690,66 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c0.btn.btn-info:hover,
 .c0.btn.btn-info:active,
 .c0.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c0.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c0.btn.btn-light:hover,
+.c0.btn.btn-light:active,
+.c0.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c0.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c0.btn.btn-dark:hover,
+.c0.btn.btn-dark:active,
+.c0.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c0.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-danger:hover,
+.c0.btn.btn-danger:active,
+.c0.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c0.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c0.btn.btn-warning:hover,
+.c0.btn.btn-warning:active,
+.c0.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c0.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -563,6 +771,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 .c0.btn.btn-link:hover,
 .c0.btn.btn-link:active,
 .c0.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -573,6 +782,7 @@ exports[`UpdateProjectsSubForm > renders as expected with pre-existing form data
 
 .c0.btn.btn-link:disabled,
 .c0.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
index fbc37f50da..e4a88361d7 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/__snapshots__/ResearchTabsContainer.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
   />
   <div />
   .c2 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -16,7 +17,8 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 
 .c5 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -35,6 +37,7 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 .c0 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c0 .tab-content .tab-pane {
@@ -43,6 +46,7 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 
 .c1 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -52,18 +56,22 @@ exports[`ResearchFileTabs component > matches snapshot 1`] = `
 }
 
 .c1 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c1 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c1 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
index be0fdc0124..f950fc2b23 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/details/__snapshots__/ResearchSummaryView.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`ResearchSummaryView component > renders as expected when research file
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -16,7 +17,8 @@ exports[`ResearchSummaryView component > renders as expected when research file
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
index e23c122180..b6f33eb95c 100644
--- a/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/research/tabs/fileDetails/update/__snapshots__/UpdateSummaryForm.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 .c10.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c10.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c10.btn.btn-primary:hover,
+.c10.btn.btn-primary:active,
+.c10.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c10.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c10.btn.btn-secondary:hover,
+.c10.btn.btn-secondary:active,
+.c10.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c10.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 .c10.btn.btn-info:hover,
 .c10.btn.btn-info:active,
 .c10.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c10.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c10.btn.btn-light:hover,
+.c10.btn.btn-light:active,
+.c10.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c10.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c10.btn.btn-dark:hover,
+.c10.btn.btn-dark:active,
+.c10.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c10.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-danger:hover,
+.c10.btn.btn-danger:active,
+.c10.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c10.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c10.btn.btn-warning:hover,
+.c10.btn.btn-warning:active,
+.c10.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 .c10.btn.btn-link:hover,
 .c10.btn.btn-link:active,
 .c10.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 
 .c10.btn.btn-link:disabled,
 .c10.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -201,12 +272,13 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
   padding-left: 1.2rem;
   padding-right: 2.8rem;
   background-image: none;
-  border: solid 0.1rem;
+  color: #474543;
+  border: #606060 solid 0.1rem;
   cursor: default;
 }
 
 .c14.is-invalid {
-  border: solid 0.1rem;
+  border: #CE3E39 solid 0.1rem;
 }
 
 .c15.c15.btn {
@@ -217,6 +289,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
   padding-right: 1.2rem;
   height: 1.6rem;
   right: 0rem;
+  color: #9F9D9C;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
@@ -229,6 +302,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 .c15.c15.btn:hover,
 .c15.c15.btn:active,
 .c15.c15.btn:focus {
+  color: #CE3E39;
   -webkit-text-decoration: none;
   text-decoration: none;
   opacity: unset;
@@ -283,12 +357,14 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c2 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -328,6 +404,7 @@ exports[`UpdateResearchForm component > renders as expected when provided no res
   background-color: #f0f7fc;
   margin-bottom: 2rem;
   font-size: 14px;
+  color: #053662;
   -webkit-text-decoration: none solid rgb(49,49,50);
   text-decoration: none solid rgb(49,49,50);
   line-height: 24px;
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
index 1345dd982a..2cc07806ba 100644
--- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/detail/__snapshots__/ChecklistView.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
 }
 
 .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
@@ -22,7 +23,8 @@ exports[`ChecklistView component > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -56,6 +58,7 @@ exports[`ChecklistView component > renders as expected 1`] = `
 }
 
 .c11 {
+  color: #474543;
   min-width: 11rem;
 }
 
@@ -69,6 +72,11 @@ exports[`ChecklistView component > renders as expected 1`] = `
   font-size: 1.1rem;
   font-style: italic;
   text-align: right;
+  color: #428bca;
+}
+
+.c8 .tooltip-icon {
+  color: #428bca;
 }
 
 .c10 {
diff --git a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
index f0568d4f9b..1f5ccd9e28 100644
--- a/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/tabs/checklist/update/__snapshots__/UpdateChecklistForm.test.tsx.snap
@@ -7,12 +7,14 @@ exports[`UpdateChecklist form > renders as expected 1`] = `
   />
   <div />
   .c0 {
+  background-color: #f2f2f2;
   padding-top: 1rem;
 }
 
 .c3 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
diff --git a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
index 5d9b19501b..f5030e592b 100644
--- a/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/shared/update/properties/__snapshots__/UpdateProperties.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,30 @@ exports[`UpdateProperties component > renders as expected 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c29.c29.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c29.c29.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c29.c29.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c29.c29.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c29.c29.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c29.c29.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c30.c30.btn {
   font-size: 1.4rem;
   color: #aaaaaa;
@@ -232,18 +326,21 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c22 {
   font-size: 1.4rem;
+  color: #42814A;
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c13 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.2rem;
   border-bottom: solid 0.2rem;
@@ -253,7 +350,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 }
 
 .c5 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -261,7 +358,8 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c23 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -302,9 +400,11 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c14.c14.c14 .form-label {
   font-weight: bold;
+  color: #474543;
 }
 
 .c16 {
+  color: var(--theme-blue-100);
   font-family: 'BcSans-Bold';
   margin-bottom: 1rem;
 }
@@ -316,6 +416,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 .c9 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c9 .tab-content .tab-pane {
@@ -324,6 +425,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c11 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -333,18 +435,22 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 }
 
 .c11 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c11 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c11 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -357,6 +463,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 }
 
 .c19 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
@@ -371,7 +478,8 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c24 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -394,13 +502,15 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c4.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn.btn-light.Button:focus,
 .c4.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c4.btn,
@@ -415,6 +525,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -456,7 +567,7 @@ exports[`UpdateProperties component > renders as expected 1`] = `
 
 .c6 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c31 {
diff --git a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
index 79b0145bab..981a7cdf4f 100644
--- a/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/subdivision/__snapshots__/AddSubdivisionView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,25 +212,27 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 }
 
 .c1 {
+  color: #474543;
   font-family: 'BCSans-Bold';
   font-size: 3.2rem;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c13 {
+  color: var(--theme-blue-100);
   font-family: 'BCSans-Bold';
   font-size: 2.6rem;
-  border-bottom: solid 0.2rem;
+  border-bottom: solid 0.2rem var(--theme-blue-90);
   width: 100%;
   text-align: left;
   margin-bottom: 2.4rem;
 }
 
 .c6 {
-  border-left: 0.1rem solid;
+  border-left: 0.1rem solid #ECEAE8;
   width: 0.1rem;
   height: 80%;
   margin: auto;
@@ -168,7 +240,8 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c18 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -193,6 +266,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 .c14 .tab-content {
   border-radius: 0 0.4rem 0.4rem 0.4rem;
   overflow-y: auto;
+  background-color: #f2f2f2;
 }
 
 .c14 .tab-content .tab-pane {
@@ -201,6 +275,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c16 {
   background-color: white;
+  color: var(--surface-color-primary-button-default);
   font-size: 1.4rem;
   border-color: transparent;
 }
@@ -210,18 +285,22 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 }
 
 .c16 .nav-item {
+  color: var(--surface-color-primary-button-default);
   min-width: 5rem;
   padding: 0.1rem 1.2rem;
 }
 
 .c16 .nav-item:hover {
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
 .c16 .nav-item.active {
+  background-color: #f2f2f2;
   font-family: 'BCSans-Bold';
+  color: var(--surface-color-primary-button-hover);
   border-color: transparent;
 }
 
@@ -235,13 +314,15 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c5.btn.btn-light.Button {
   padding: 0;
-  border: 0.1rem solid;
+  border: 0.1rem solid #9F9D9C;
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn.btn-light.Button:focus,
 .c5.btn.btn-light.Button:active {
   background-color: white;
+  color: #474543;
 }
 
 .c5.btn,
@@ -256,6 +337,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c0 {
   padding: 1.6rem;
+  color: #474543;
 }
 
 .c0.expanded {
@@ -297,7 +379,7 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c8 {
   width: 100%;
-  border-bottom: solid 0.5rem;
+  border-bottom: solid 0.5rem #3470B1;
 }
 
 .c7 {
@@ -307,7 +389,8 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
 
 .c19 {
   font-size: 1.6rem;
-  border-bottom: 0.2rem solid;
+  color: #9F9D9C;
+  border-bottom: 0.2rem solid #606060;
   margin-bottom: 0.9rem;
   padding-bottom: 0.25rem;
   font-family: 'BcSans-Bold';
@@ -339,12 +422,14 @@ exports[`Add Subdivision View > matches snapshot 1`] = `
   overflow-y: auto;
   padding-right: 1rem;
   padding-bottom: 1rem;
+  background-color: #f2f2f2;
 }
 
 .c2 {
   width: 3rem;
   height: 3rem;
   margin-right: 1rem;
+  fill: #474543;
 }
 
 <div
diff --git a/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap b/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
index f5edfa517d..9308e2ea33 100644
--- a/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
+++ b/source/frontend/src/features/notes/__snapshots__/NoteContainer.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`NoteContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`NoteContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`NoteContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`NoteContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`NoteContainer component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`NoteContainer component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -274,6 +364,7 @@ exports[`NoteContainer component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/notes/add/__snapshots__/AddNotesContainer.test.tsx.snap b/source/frontend/src/features/notes/add/__snapshots__/AddNotesContainer.test.tsx.snap
index 80e2ea9448..0214765b5b 100644
--- a/source/frontend/src/features/notes/add/__snapshots__/AddNotesContainer.test.tsx.snap
+++ b/source/frontend/src/features/notes/add/__snapshots__/AddNotesContainer.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -263,6 +353,7 @@ exports[`AddNotesContainer component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/notes/add/__snapshots__/AddNotesFormModal.test.tsx.snap b/source/frontend/src/features/notes/add/__snapshots__/AddNotesFormModal.test.tsx.snap
index 02fd1d5480..5bc938c43e 100644
--- a/source/frontend/src/features/notes/add/__snapshots__/AddNotesFormModal.test.tsx.snap
+++ b/source/frontend/src/features/notes/add/__snapshots__/AddNotesFormModal.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -263,6 +353,7 @@ exports[`AddNotesFormModal component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap b/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
index 409af45949..00881b4b00 100644
--- a/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
+++ b/source/frontend/src/features/notes/detail/__snapshots__/NoteDetailsFormModal.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -274,6 +364,7 @@ exports[`NoteDetailsFormModal component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
index 12c6554417..904f66a53b 100644
--- a/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/NoteResults/__snapshots__/NoteResults.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Note Results Table > matches snapshot 1`] = `
 .c5.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c5.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c5.btn.btn-primary:hover,
+.c5.btn.btn-primary:active,
+.c5.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c5.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c5.btn.btn-secondary:hover,
+.c5.btn.btn-secondary:active,
+.c5.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c5.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Note Results Table > matches snapshot 1`] = `
 .c5.btn.btn-info:hover,
 .c5.btn.btn-info:active,
 .c5.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c5.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c5.btn.btn-light:hover,
+.c5.btn.btn-light:active,
+.c5.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c5.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c5.btn.btn-dark:hover,
+.c5.btn.btn-dark:active,
+.c5.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c5.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-danger:hover,
+.c5.btn.btn-danger:active,
+.c5.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c5.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c5.btn.btn-warning:hover,
+.c5.btn.btn-warning:active,
+.c5.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c5.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
 .c5.btn.btn-link:hover,
 .c5.btn.btn-link:active,
 .c5.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Note Results Table > matches snapshot 1`] = `
 
 .c5.btn.btn-link:disabled,
 .c5.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
diff --git a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
index d52abc52ad..e148c5e085 100644
--- a/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
+++ b/source/frontend/src/features/notes/list/__snapshots__/NoteListView.test.tsx.snap
@@ -14,7 +14,8 @@ exports[`Note List View > renders as expected 1`] = `
 
 .c4 {
   font-weight: bold;
-  border-bottom: 0.2rem solid;
+  color: var(--theme-blue-100);
+  border-bottom: 0.2rem var(--theme-blue-90) solid;
   margin-bottom: 2rem;
 }
 
@@ -46,7 +47,7 @@ exports[`Note List View > renders as expected 1`] = `
 }
 
 .c8 {
-  color: _linkColor_6badca;
+  color: var(--surface-color-primary-button-default);
   width: 1.6rem;
   height: 1.6rem;
 }
diff --git a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
index 70d0a08a33..528968ae6d 100644
--- a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
+++ b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteContainer.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -263,6 +353,7 @@ exports[`UpdateNoteContainer component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
index 1b7d2180f7..5d0295e5c5 100644
--- a/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
+++ b/source/frontend/src/features/notes/update/__snapshots__/UpdateNoteFormModal.test.tsx.snap
@@ -45,15 +45,37 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
 .c3.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c3.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c3.btn.btn-primary:hover,
+.c3.btn.btn-primary:active,
+.c3.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c3.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c3.btn.btn-secondary:hover,
+.c3.btn.btn-secondary:active,
+.c3.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c3.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -63,20 +85,66 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
 .c3.btn.btn-info:hover,
 .c3.btn.btn-info:active,
 .c3.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c3.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c3.btn.btn-light:hover,
+.c3.btn.btn-light:active,
+.c3.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c3.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c3.btn.btn-dark:hover,
+.c3.btn.btn-dark:active,
+.c3.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c3.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-danger:hover,
+.c3.btn.btn-danger:active,
+.c3.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c3.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c3.btn.btn-warning:hover,
+.c3.btn.btn-warning:active,
+.c3.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c3.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -98,6 +166,7 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
 .c3.btn.btn-link:hover,
 .c3.btn.btn-link:active,
 .c3.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -108,6 +177,7 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
 
 .c3.btn.btn-link:disabled,
 .c3.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -159,6 +229,8 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  color: #FFFFFF;
+  background-color: #053662;
   cursor: default;
 }
 
@@ -234,15 +306,33 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
   max-width: 40rem;
 }
 
+.c0.info-variant .modal-header {
+  color: #053662;
+  background-color: #d9eaf7;
+}
+
 .c0.info-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.error-variant .modal-header {
+  color: #CE3E39;
+  background-color: #f2dede;
+}
+
 .c0.error-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
+.c0.warning-variant .modal-header {
+  color: #6c4a00;
+  background-color: #fef1d8;
+}
+
 .c0.warning-variant .modal-close-btn {
+  color: #474543;
   cursor: pointer;
 }
 
@@ -263,6 +353,7 @@ exports[`UpdateNoteFormModal component > renders as expected 1`] = `
 .c1 .form-group label {
   font-family: BcSans-Bold;
   line-height: 2rem;
+  color: #474543;
 }
 
 <body
diff --git a/source/frontend/src/features/projects/list/ProjectFilter/__snapshots__/ProjectFilter.test.tsx.snap b/source/frontend/src/features/projects/list/ProjectFilter/__snapshots__/ProjectFilter.test.tsx.snap
index 1edeb0492c..94f41a30e2 100644
--- a/source/frontend/src/features/projects/list/ProjectFilter/__snapshots__/ProjectFilter.test.tsx.snap
+++ b/source/frontend/src/features/projects/list/ProjectFilter/__snapshots__/ProjectFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Project Filter > matches snapshot 1`] = `
 .c2.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c2.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c2.btn.btn-primary:hover,
+.c2.btn.btn-primary:active,
+.c2.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c2.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c2.btn.btn-secondary:hover,
+.c2.btn.btn-secondary:active,
+.c2.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c2.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Project Filter > matches snapshot 1`] = `
 .c2.btn.btn-info:hover,
 .c2.btn.btn-info:active,
 .c2.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c2.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c2.btn.btn-light:hover,
+.c2.btn.btn-light:active,
+.c2.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c2.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c2.btn.btn-dark:hover,
+.c2.btn.btn-dark:active,
+.c2.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c2.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-danger:hover,
+.c2.btn.btn-danger:active,
+.c2.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c2.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c2.btn.btn-warning:hover,
+.c2.btn.btn-warning:active,
+.c2.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c2.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Project Filter > matches snapshot 1`] = `
 .c2.btn.btn-link:hover,
 .c2.btn.btn-link:active,
 .c2.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Project Filter > matches snapshot 1`] = `
 
 .c2.btn.btn-link:disabled,
 .c2.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -142,6 +212,7 @@ exports[`Project Filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/projects/list/__snapshots__/ProjectListView.test.tsx.snap b/source/frontend/src/features/projects/list/__snapshots__/ProjectListView.test.tsx.snap
index 661a1e57f0..12a3bd2b73 100644
--- a/source/frontend/src/features/projects/list/__snapshots__/ProjectListView.test.tsx.snap
+++ b/source/frontend/src/features/projects/list/__snapshots__/ProjectListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Project List View > matches snapshot 1`] = `
 .c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c7.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c7.btn.btn-primary:hover,
+.c7.btn.btn-primary:active,
+.c7.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c7.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c7.btn.btn-secondary:hover,
+.c7.btn.btn-secondary:active,
+.c7.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c7.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Project List View > matches snapshot 1`] = `
 .c7.btn.btn-info:hover,
 .c7.btn.btn-info:active,
 .c7.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c7.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c7.btn.btn-light:hover,
+.c7.btn.btn-light:active,
+.c7.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c7.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c7.btn.btn-dark:hover,
+.c7.btn.btn-dark:active,
+.c7.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c7.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-danger:hover,
+.c7.btn.btn-danger:active,
+.c7.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c7.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c7.btn.btn-warning:hover,
+.c7.btn.btn-warning:active,
+.c7.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Project List View > matches snapshot 1`] = `
 .c7.btn.btn-link:hover,
 .c7.btn.btn-link:active,
 .c7.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Project List View > matches snapshot 1`] = `
 
 .c7.btn.btn-link:disabled,
 .c7.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -171,6 +241,7 @@ exports[`Project List View > matches snapshot 1`] = `
 }
 
 .c5 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap b/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
index b45610e488..d41681fd6d 100644
--- a/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
+++ b/source/frontend/src/features/properties/list/__snapshots__/PropertyListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Property list view > matches snapshot 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Property list view > matches snapshot 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Property list view > matches snapshot 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Property list view > matches snapshot 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -164,6 +234,30 @@ exports[`Property list view > matches snapshot 1`] = `
   transition: all 0.3s ease-in;
 }
 
+.c10.c10.btn.btn-primary svg {
+  color: #013366;
+}
+
+.c10.c10.btn.btn-primary svg:hover {
+  color: #013366;
+}
+
+.c10.c10.btn.btn-light svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c10.c10.btn.btn-light svg:hover {
+  color: #CE3E39;
+}
+
+.c10.c10.btn.btn-info svg {
+  color: var(--surface-color-primary-button-default);
+}
+
+.c10.c10.btn.btn-info svg:hover {
+  color: var(--surface-color-primary-button-hover);
+}
+
 .c11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -320,6 +414,7 @@ exports[`Property list view > matches snapshot 1`] = `
 }
 
 .c9 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
index 4dfb223f32..ea11687990 100644
--- a/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
+++ b/source/frontend/src/features/properties/map/__snapshots__/MapContainer.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`MapContainer > Renders the map 1`] = `
 .c4.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c4.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c4.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`MapContainer > Renders the map 1`] = `
 .c4.btn.btn-info:hover,
 .c4.btn.btn-info:active,
 .c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c4.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`MapContainer > Renders the map 1`] = `
 .c4.btn.btn-link:hover,
 .c4.btn.btn-link:active,
 .c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`MapContainer > Renders the map 1`] = `
 
 .c4.btn.btn-link:disabled,
 .c4.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -145,6 +215,7 @@ exports[`MapContainer > Renders the map 1`] = `
   border-radius: 1rem;
   width: 100%;
   padding: 2.5rem;
+  background-color: #f2f2f2;
 }
 
 .c16 {
@@ -164,7 +235,6 @@ exports[`MapContainer > Renders the map 1`] = `
 
 .c16 .form-group .form-check label {
   font-weight: bold;
-  color: _textColor_6badca;
   font-size: 1.6rem;
 }
 
@@ -272,7 +342,7 @@ exports[`MapContainer > Renders the map 1`] = `
 .c2 {
   width: 100%;
   display: grid;
-  grid-template-rows: 1fr;
+  grid-template-rows: 6rem 1fr;
   grid-template-columns: min-content 1fr;
   grid-template-areas: 'filter filter' 'map map';
   -webkit-transition: margin 1s,width 1s;
@@ -289,7 +359,9 @@ exports[`MapContainer > Renders the map 1`] = `
 .c7.btn {
   width: 5.2rem;
   height: 5.2rem;
-  background-color: #fff;
+  background-color: #FFFFFF;
+  color: #013366;
+  border-color: #013366;
   box-shadow: -0.2rem 0.1rem 0.4rem rgba(0,0,0,0.2);
   -webkit-transition: 1s;
   transition: 1s;
@@ -309,11 +381,14 @@ exports[`MapContainer > Renders the map 1`] = `
   height: 5.2rem;
   margin-left: -5.1rem;
   background-color: #fff;
+  color: #013366;
+  border-color: #013366;
   box-shadow: -0.2rem 0.1rem 0.4rem rgba(0,0,0,0.2);
 }
 
 .c5.c5.btn {
   background-color: #ffffff;
+  color: #474543;
   width: 4rem;
   height: 4rem;
   display: -webkit-box;
@@ -328,6 +403,7 @@ exports[`MapContainer > Renders the map 1`] = `
 
 .c6.c6.btn {
   background-color: #ffffff;
+  color: #474543;
   width: 4rem;
   height: 4rem;
 }
@@ -370,6 +446,7 @@ exports[`MapContainer > Renders the map 1`] = `
   max-width: 0;
   width: 0;
   margin-left: 0;
+  background-color: #FFFFFF;
   visibility: hidden;
   opacity: 0;
   border-radius: 0.4rem;
@@ -395,6 +472,7 @@ exports[`MapContainer > Renders the map 1`] = `
   width: 100%;
   height: 5.2rem;
   background-color: #003366;
+  color: #FFFFFF;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -405,6 +483,7 @@ exports[`MapContainer > Renders the map 1`] = `
 
 .c12 {
   font-size: 1.8rem;
+  color: #FFFFFF;
   -webkit-text-decoration: none solid rgb(255,255,255);
   text-decoration: none solid rgb(255,255,255);
   line-height: 1.8rem;
@@ -416,6 +495,7 @@ exports[`MapContainer > Renders the map 1`] = `
   position: absolute;
   top: 0.6rem;
   right: 0.8rem;
+  color: #FFFFFF;
   font-size: 22px;
   cursor: pointer;
 }
diff --git a/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap b/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
index c4744e8785..b9acca14e3 100644
--- a/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
+++ b/source/frontend/src/features/research/list/ResearchFilter/__snapshots__/ResearchFilter.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Research Filter > matches snapshot 1`] = `
 .c8.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c8.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c8.btn.btn-primary:hover,
+.c8.btn.btn-primary:active,
+.c8.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c8.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c8.btn.btn-secondary:hover,
+.c8.btn.btn-secondary:active,
+.c8.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c8.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Research Filter > matches snapshot 1`] = `
 .c8.btn.btn-info:hover,
 .c8.btn.btn-info:active,
 .c8.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c8.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c8.btn.btn-light:hover,
+.c8.btn.btn-light:active,
+.c8.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c8.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c8.btn.btn-dark:hover,
+.c8.btn.btn-dark:active,
+.c8.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c8.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-danger:hover,
+.c8.btn.btn-danger:active,
+.c8.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c8.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c8.btn.btn-warning:hover,
+.c8.btn.btn-warning:active,
+.c8.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c8.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Research Filter > matches snapshot 1`] = `
 .c8.btn.btn-link:hover,
 .c8.btn.btn-link:active,
 .c8.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Research Filter > matches snapshot 1`] = `
 
 .c8.btn.btn-link:disabled,
 .c8.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`Research Filter > matches snapshot 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -194,6 +265,7 @@ exports[`Research Filter > matches snapshot 1`] = `
 }
 
 .c0 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap b/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
index bda7888cd0..2614278de2 100644
--- a/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
+++ b/source/frontend/src/features/research/list/__snapshots__/ResearchListView.test.tsx.snap
@@ -50,15 +50,37 @@ exports[`Research List View > matches snapshot 1`] = `
 .c13.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
+  outline-color: var(--surface-color-primary-button-hover);
   outline-offset: 1px;
   box-shadow: none;
 }
 
+.c13.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c13.btn.btn-primary:hover,
+.c13.btn.btn-primary:active,
+.c13.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
 .c13.btn.btn-secondary {
+  color: #013366;
   background: none;
+  border-color: #013366;
+}
+
+.c13.btn.btn-secondary:hover,
+.c13.btn.btn-secondary:active,
+.c13.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
 }
 
 .c13.btn.btn-info {
+  color: #9F9D9C;
   border: none;
   background: none;
   padding-left: 0.6rem;
@@ -68,20 +90,66 @@ exports[`Research List View > matches snapshot 1`] = `
 .c13.btn.btn-info:hover,
 .c13.btn.btn-info:active,
 .c13.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
   background: none;
 }
 
 .c13.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
   border: none;
 }
 
+.c13.btn.btn-light:hover,
+.c13.btn.btn-light:active,
+.c13.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
 .c13.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
   border: none;
 }
 
+.c13.btn.btn-dark:hover,
+.c13.btn.btn-dark:active,
+.c13.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c13.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-danger:hover,
+.c13.btn.btn-danger:active,
+.c13.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c13.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c13.btn.btn-warning:hover,
+.c13.btn.btn-warning:active,
+.c13.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
 .c13.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
+  color: var(--surface-color-primary-button-default);
   background: none;
   border: none;
   -webkit-text-decoration: none;
@@ -103,6 +171,7 @@ exports[`Research List View > matches snapshot 1`] = `
 .c13.btn.btn-link:hover,
 .c13.btn.btn-link:active,
 .c13.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -113,6 +182,7 @@ exports[`Research List View > matches snapshot 1`] = `
 
 .c13.btn.btn-link:disabled,
 .c13.btn.btn-link.disabled {
+  color: #9F9D9C;
   background: none;
   pointer-events: none;
 }
@@ -147,6 +217,7 @@ exports[`Research List View > matches snapshot 1`] = `
   margin-top: 0.5rem;
   margin-right: 1.2rem;
   right: 0;
+  fill: var(--surface-color-primary-button-default);
   pointer-events: none;
 }
 
@@ -223,6 +294,7 @@ exports[`Research List View > matches snapshot 1`] = `
 }
 
 .c5 {
+  background-color: #d9eaf7;
   border-radius: 0.5rem;
 }
 
diff --git a/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap b/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap
index 23eaa5c3fd..a7a6ff672d 100644
--- a/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap
+++ b/source/frontend/src/features/rightSideLayout/__snapshots__/AdvancedFilterBar.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`AdvancedFilterBar > renders as expected 1`] = `
   max-width: 0;
   width: 0;
   margin-left: 0;
+  background-color: #FFFFFF;
   visibility: hidden;
   opacity: 0;
   border-radius: 0.4rem;
@@ -46,6 +47,7 @@ exports[`AdvancedFilterBar > renders as expected 1`] = `
   width: 100%;
   height: 5.2rem;
   background-color: #003366;
+  color: #FFFFFF;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -56,6 +58,7 @@ exports[`AdvancedFilterBar > renders as expected 1`] = `
 
 .c2 {
   font-size: 1.8rem;
+  color: #FFFFFF;
   -webkit-text-decoration: none solid rgb(255,255,255);
   text-decoration: none solid rgb(255,255,255);
   line-height: 1.8rem;
@@ -67,6 +70,7 @@ exports[`AdvancedFilterBar > renders as expected 1`] = `
   position: absolute;
   top: 0.6rem;
   right: 0.8rem;
+  color: #FFFFFF;
   font-size: 22px;
   cursor: pointer;
 }
diff --git a/source/frontend/src/layouts/__snapshots__/Header.test.tsx.snap b/source/frontend/src/layouts/__snapshots__/Header.test.tsx.snap
index da76638409..4481986ba9 100644
--- a/source/frontend/src/layouts/__snapshots__/Header.test.tsx.snap
+++ b/source/frontend/src/layouts/__snapshots__/Header.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Tenant Header > Header MOTI background 1`] = `
   .c0 {
   background-color: #003366;
   border: none;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem solid #FCBA19;
   grid-area: header;
 }
 
@@ -28,7 +28,7 @@ exports[`Tenant Header > Header black background 1`] = `
   .c0 {
   background-color: #003366;
   border: none;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem solid #FCBA19;
   grid-area: header;
 }
 
@@ -47,7 +47,7 @@ exports[`Tenant Header > Header default background 1`] = `
   .c0 {
   background-color: #003366;
   border: none;
-  border-bottom: 0.2rem solid;
+  border-bottom: 0.2rem solid #FCBA19;
   grid-area: header;
 }