From 9aa660ebca85cbb10fdfe2ef87dc41685eb3be39 Mon Sep 17 00:00:00 2001
From: Clemence Kyara <clemence@codeforafrica.org>
Date: Tue, 4 Jun 2024 10:00:30 +0300
Subject: [PATCH] Update test snapshots

---
 .../components/Accordion/Accordion.snap.js    |   8 +-
 .../src/components/ComboBox/ComboBox.snap.js  |   4 +-
 .../CommunityPlatforms.snap.js                |   2 +-
 .../src/components/Dataset/Dataset.snap.js    |   4 +-
 .../DatasetCard/DatasetCard.snap.js           |   2 +-
 .../Datasets/DatasetFilterBar.snap.js         |  16 +--
 .../src/components/Datasets/Datasets.snap.js  |  16 +--
 .../DesktopNavBar/DesktopNavBar.snap.js       |   6 +-
 .../src/components/Document/Document.snap.js  |   4 +-
 .../Documents/DocumentFilterBar.snap.js       |   4 +-
 .../components/Documents/Documents.snap.js    |   8 +-
 .../DropdownMenu/DropdownMenu.snap.js         |   2 +-
 .../components/Ecosystem/Ecosystem.snap.js    |   4 +-
 .../src/components/Entity/Entity.snap.js      |  10 +-
 .../src/components/Error/Error.snap.js        |   2 +-
 .../components/ErrorPage/ErrorPage.snap.js    |   2 +-
 .../src/components/FAQ/FAQ.snap.js            |   8 +-
 .../FeaturedPostCard/FeaturedPostCard.snap.js |   2 +-
 .../src/components/Grantees/Grantees.snap.js  | 120 +++++++++---------
 .../GuidingPrinciples.snap.js                 |   8 +-
 .../src/components/Helpdesk/Helpdesk.snap.js  |   2 +-
 .../HelpdeskPageContent.snap.js               |   2 +-
 .../src/components/Hero/Hero.snap.js          |   8 +-
 .../LanguageButton/LanguageButton.snap.js     |   6 +-
 .../src/components/Layout/Layout.snap.js      |   6 +-
 .../NextPrevPagination.snap.js                |   2 +-
 .../PaginationButton.snap.js                  |   2 +-
 .../Opportunity/Opportunity.snap.js           |   2 +-
 .../OpportunityCardHeader.snap.js             |   2 +-
 .../OpportunityCards/OpportunityCards.snap.js |   4 +-
 .../OpportunityPage/OpportunityPage.snap.js   |  12 +-
 .../OrganisationImageLink.snap.js             |   2 +-
 .../src/components/Switch/Switch.snap.js      |   2 +-
 .../src/components/Tool/Tool.snap.js          |  16 +--
 .../src/components/ToolCard/ToolCard.snap.js  |   2 +-
 .../YoutubeVideoPlayer.snap.js                |  25 +++-
 .../ArticlePage/ArticlePage.snap.js           |   4 +-
 .../src/components/Articles/Articles.snap.js  |  14 +-
 .../ChoiceChipGroup/ChoiceChipGroup.snap.js   |   2 +-
 .../FeaturedArticle/FeaturedArticle.snap.js   |   4 +-
 .../components/FilterBar/FilterBar.snap.js    |   4 +-
 .../components/GetInTouch/GetInTouch.snap.js  |   4 +-
 .../GetInvolved/GetInvolved.snap.js           |   2 +-
 .../MeetOurTeam/MeetOurTeam.snap.js           |   2 +-
 .../NewsAndStories/NewsAndStories.snap.js     |   6 +-
 .../PaginationButton.snap.js                  |   4 +-
 .../Opportunities/Opportunities.snap.js       |   4 +-
 .../OpportunityCard/OpportunityCard.snap.js   |   4 +-
 .../OpportunityCardList.snap.js               |   4 +-
 .../src/components/Project/Project.snap.js    |   6 +-
 .../ProjectCard/ProjectCard.snap.js           |   4 +-
 .../ProjectDetails/ProjectDescription.snap.js |   2 +-
 .../ProjectDescriptionButton.snap.js          |   2 +-
 .../ProjectPageHeader.snap.js                 |   6 +-
 54 files changed, 211 insertions(+), 194 deletions(-)

diff --git a/apps/charterafrica/src/components/Accordion/Accordion.snap.js b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
index a5f08bf4b..b7e3138cd 100644
--- a/apps/charterafrica/src/components/Accordion/Accordion.snap.js
+++ b/apps/charterafrica/src/components/Accordion/Accordion.snap.js
@@ -3,7 +3,7 @@
 exports[`<Accordion /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
     <div
       aria-controls="panel-63f388c3ebe92a85650e8051-content"
@@ -96,7 +96,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
     <div
       aria-controls="panel-63f388e0ebe92a85650e8052-content"
@@ -189,7 +189,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
     <div
       aria-controls="panel-63f388f9ebe92a85650e8053-content"
@@ -282,7 +282,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
   >
     <div
       aria-controls="panel-63f38902ebe92a85650e8054-content"
diff --git a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
index 5740392a8..d43377e9c 100644
--- a/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
+++ b/apps/charterafrica/src/components/ComboBox/ComboBox.snap.js
@@ -3,7 +3,7 @@
 exports[`<ComboBox /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1qogv20-MuiAutocomplete-root"
   >
     <div
       class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
@@ -25,7 +25,7 @@ exports[`<ComboBox /> renders unchanged 1`] = `
           value="Countries"
         />
         <div
-          class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+          class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
         >
           <button
             aria-label="Clear"
diff --git a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
index 080626aac..452a917f4 100644
--- a/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
+++ b/apps/charterafrica/src/components/CommunityPlatforms/CommunityPlatforms.snap.js
@@ -65,7 +65,7 @@ exports[`<CommunityPlatforms /> renders unchanged 1`] = `
               </div>
             </div>
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall active css-1mu9r82-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary active css-1mu9r82-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
               rel="noreferrer noopener"
               tabindex="0"
diff --git a/apps/charterafrica/src/components/Dataset/Dataset.snap.js b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
index e9de4b3ba..ca612124b 100644
--- a/apps/charterafrica/src/components/Dataset/Dataset.snap.js
+++ b/apps/charterafrica/src/components/Dataset/Dataset.snap.js
@@ -56,13 +56,13 @@ exports[`<Dataset /> renders unchanged 1`] = `
             </div>
           </div>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge css-11h43d9-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary css-11h43d9-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             target="_blank"
             type="button"
           >
             <span
-              class="MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
             >
               <div />
             </span>
diff --git a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
index 7c72dc29e..19148111c 100644
--- a/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
+++ b/apps/charterafrica/src/components/DatasetCard/DatasetCard.snap.js
@@ -47,7 +47,7 @@ exports[`<DatasetCard /> renders unchanged 1`] = `
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit.
             </div>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-iwoc5g-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-iwoc5g-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
diff --git a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
index a20617c06..029522da2 100644
--- a/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Datasets/DatasetFilterBar.snap.js
@@ -51,7 +51,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-s0xw5o-MuiGrid-root"
       >
         <div
-          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1qogv20-MuiAutocomplete-root"
         >
           <div
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
@@ -73,7 +73,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
@@ -130,7 +130,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-15uuqmm-MuiGrid-root"
       >
         <div
-          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-bt7qu9-MuiAutocomplete-root"
         >
           <div
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
@@ -157,7 +157,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
@@ -214,7 +214,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-s0xw5o-MuiGrid-root"
       >
         <div
-          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-bt7qu9-MuiAutocomplete-root"
         >
           <div
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
@@ -241,7 +241,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
                 value=""
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
@@ -304,7 +304,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
           :
         </p>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2vhkfv-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-2vhkfv-MuiButtonBase-root-MuiButton-root"
           disabled=""
           tabindex="-1"
           type="button"
@@ -312,7 +312,7 @@ exports[`<DatasetFilterBar /> renders unchanged 1`] = `
           Datasets
         </button>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zehdzx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-zehdzx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/documents"
           tabindex="0"
         >
diff --git a/apps/charterafrica/src/components/Datasets/Datasets.snap.js b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
index a565149de..496c2cbf4 100644
--- a/apps/charterafrica/src/components/Datasets/Datasets.snap.js
+++ b/apps/charterafrica/src/components/Datasets/Datasets.snap.js
@@ -57,7 +57,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-s0xw5o-MuiGrid-root"
           >
             <div
-              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1qogv20-MuiAutocomplete-root"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
@@ -79,7 +79,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     value="Sort"
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
@@ -136,7 +136,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-15uuqmm-MuiGrid-root"
           >
             <div
-              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-bt7qu9-MuiAutocomplete-root"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
@@ -163,7 +163,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
@@ -220,7 +220,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4 MuiGrid-grid-md-3 MuiGrid-grid-lg-2 css-s0xw5o-MuiGrid-root"
           >
             <div
-              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+              class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-bt7qu9-MuiAutocomplete-root"
             >
               <div
                 class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-hcvzns-MuiFormControl-root-MuiTextField-root"
@@ -247,7 +247,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
                     value=""
                   />
                   <div
-                    class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                    class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                   >
                     <button
                       aria-label="Clear"
@@ -309,7 +309,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
               :
             </p>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-2vhkfv-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-2vhkfv-MuiButtonBase-root-MuiButton-root"
               disabled=""
               tabindex="-1"
               type="button"
@@ -317,7 +317,7 @@ exports[`<Datasets /> renders unchanged 1`] = `
               Datasets
             </button>
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zehdzx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-zehdzx-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="/documents"
               tabindex="0"
             >
diff --git a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
index bb885f5d4..597780c2e 100644
--- a/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
+++ b/apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js
@@ -107,12 +107,12 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-12ath6l-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-12ath6l-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
             <span
-              class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
             >
               <div
                 aria-hidden="true"
@@ -123,7 +123,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
             </span>
             en
             <span
-              class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+              class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
             >
               <div
                 aria-hidden="true"
diff --git a/apps/charterafrica/src/components/Document/Document.snap.js b/apps/charterafrica/src/components/Document/Document.snap.js
index 29ef1f9e7..fb16e2067 100644
--- a/apps/charterafrica/src/components/Document/Document.snap.js
+++ b/apps/charterafrica/src/components/Document/Document.snap.js
@@ -41,12 +41,12 @@ exports[`<Document /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-[object Object] MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-19fdzmu-MuiGrid-root"
         >
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium active css-1gwheos-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary active css-1gwheos-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/"
             tabindex="0"
           >
             <span
-              class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+              class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
             >
               <div />
             </span>
diff --git a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
index 6808be85f..4a7028c15 100644
--- a/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
+++ b/apps/charterafrica/src/components/Documents/DocumentFilterBar.snap.js
@@ -51,7 +51,7 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
       >
         <div
-          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+          class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1qogv20-MuiAutocomplete-root"
         >
           <div
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
@@ -73,7 +73,7 @@ exports[`<DocumentFilterBar /> renders unchanged 1`] = `
                 value="Sort"
               />
               <div
-                class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
               >
                 <button
                   aria-label="Clear"
diff --git a/apps/charterafrica/src/components/Documents/Documents.snap.js b/apps/charterafrica/src/components/Documents/Documents.snap.js
index d9c837162..da3a497d8 100644
--- a/apps/charterafrica/src/components/Documents/Documents.snap.js
+++ b/apps/charterafrica/src/components/Documents/Documents.snap.js
@@ -60,7 +60,7 @@ exports[`<Documents /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-aoe11o-MuiGrid-root"
             >
               <div
-                class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1ihsbt3-MuiAutocomplete-root"
+                class="MuiAutocomplete-root MuiAutocomplete-hasClearIcon MuiAutocomplete-hasPopupIcon css-1qogv20-MuiAutocomplete-root"
               >
                 <div
                   class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-rwdu3q-MuiFormControl-root-MuiTextField-root"
@@ -82,7 +82,7 @@ exports[`<Documents /> renders unchanged 1`] = `
                       value="Sort"
                     />
                     <div
-                      class="MuiAutocomplete-endAdornment css-1q60rmi-MuiAutocomplete-endAdornment"
+                      class="MuiAutocomplete-endAdornment css-p1olib-MuiAutocomplete-endAdornment"
                     >
                       <button
                         aria-label="Clear"
@@ -144,14 +144,14 @@ exports[`<Documents /> renders unchanged 1`] = `
                 :
               </p>
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-17xaaej-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-17xaaej-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/datasets"
                 tabindex="0"
               >
                 Datasets
               </a>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1sbqixe-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1sbqixe-MuiButtonBase-root-MuiButton-root"
                 disabled=""
                 tabindex="-1"
                 type="button"
diff --git a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
index ebefbcd3a..042bace3c 100644
--- a/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
+++ b/apps/charterafrica/src/components/DropdownMenu/DropdownMenu.snap.js
@@ -8,7 +8,7 @@ exports[`<DropdownMenu /> renders unchanged 1`] = `
     tabindex="-1"
   >
     <a
-      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone Mui-focusVisible MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-focusVisible MuiMenuItem-root MuiMenuItem-gutters css-m5bmh8-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
+      class="MuiTypography-root MuiTypography-caption MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-m5bmh8-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiMenuItem-root"
       href="/resources/tools"
       tabindex="0"
     >
diff --git a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
index 166810aff..1f263bf23 100644
--- a/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
+++ b/apps/charterafrica/src/components/Ecosystem/Ecosystem.snap.js
@@ -42,7 +42,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
               class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
             >
               <span
-                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1sd4tst-MuiButtonBase-root-MuiSwitch-switchBase"
+                class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
               >
                 <input
                   class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
@@ -91,7 +91,7 @@ exports[`<Ecosystem /> renders unchanged 1`] = `
                 class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
               >
                 <span
-                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1sd4tst-MuiButtonBase-root-MuiSwitch-switchBase"
+                  class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
                 >
                   <input
                     class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
diff --git a/apps/charterafrica/src/components/Entity/Entity.snap.js b/apps/charterafrica/src/components/Entity/Entity.snap.js
index aee9536f8..ae1cc245f 100644
--- a/apps/charterafrica/src/components/Entity/Entity.snap.js
+++ b/apps/charterafrica/src/components/Entity/Entity.snap.js
@@ -121,7 +121,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
                 rel="noreferrer noopener"
                 tabindex="0"
@@ -157,7 +157,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
                 rel="noreferrer noopener"
                 tabindex="0"
@@ -193,7 +193,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="https://charter.africa"
                 rel="noreferrer noopener"
                 tabindex="0"
@@ -478,7 +478,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                         React
                       </h5>
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zewu4j-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-zewu4j-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       >
@@ -567,7 +567,7 @@ exports[`<OrgAndContributor /> renders unchanged 1`] = `
                         Node.js
                       </h5>
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-zewu4j-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-zewu4j-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       >
diff --git a/apps/charterafrica/src/components/Error/Error.snap.js b/apps/charterafrica/src/components/Error/Error.snap.js
index d02cc8334..7d7c16fa1 100644
--- a/apps/charterafrica/src/components/Error/Error.snap.js
+++ b/apps/charterafrica/src/components/Error/Error.snap.js
@@ -35,7 +35,7 @@ exports[`<Error /> renders unchanged 1`] = `
         </p>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium active css-x1hbuq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary active css-x1hbuq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
         tabindex="0"
       >
diff --git a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
index c305a2e84..99ae84642 100644
--- a/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
+++ b/apps/charterafrica/src/components/ErrorPage/ErrorPage.snap.js
@@ -35,7 +35,7 @@ exports[`<ErrorPage /> renders unchanged 1`] = `
         </p>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium active css-x1hbuq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorSecondary active css-x1hbuq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/"
         tabindex="0"
       >
diff --git a/apps/charterafrica/src/components/FAQ/FAQ.snap.js b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
index f00bc8506..290df39c2 100644
--- a/apps/charterafrica/src/components/FAQ/FAQ.snap.js
+++ b/apps/charterafrica/src/components/FAQ/FAQ.snap.js
@@ -14,7 +14,7 @@ exports[`<FAQ /> renders unchanged 1`] = `
         Frequently Asked Questions
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388c3ebe92a85650e8051-content"
@@ -107,7 +107,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388e0ebe92a85650e8052-content"
@@ -200,7 +200,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388f9ebe92a85650e8053-content"
@@ -293,7 +293,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f38902ebe92a85650e8054-content"
diff --git a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
index 20adbda31..9f9884500 100644
--- a/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
+++ b/apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js
@@ -52,7 +52,7 @@ exports[`FeaturedPostCard should render 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-i48nla-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-ozhbbr-MuiCardActions-root"
           >
             <a
               class="MuiTypography-root MuiTypography-p3 MuiLink-root MuiLink-underlineAlways css-c45nw1-MuiTypography-root-MuiLink-root"
diff --git a/apps/charterafrica/src/components/Grantees/Grantees.snap.js b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
index a7415b83f..83bf2caa5 100644
--- a/apps/charterafrica/src/components/Grantees/Grantees.snap.js
+++ b/apps/charterafrica/src/components/Grantees/Grantees.snap.js
@@ -50,14 +50,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -102,14 +102,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -154,14 +154,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -206,14 +206,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -258,14 +258,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -310,14 +310,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -362,14 +362,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -414,14 +414,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -466,14 +466,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -518,14 +518,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -570,14 +570,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -622,14 +622,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -674,14 +674,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -726,14 +726,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -778,14 +778,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -830,14 +830,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -882,14 +882,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -934,14 +934,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -986,14 +986,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1038,14 +1038,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1090,14 +1090,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1142,14 +1142,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1194,14 +1194,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1246,14 +1246,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1298,14 +1298,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1350,14 +1350,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1402,14 +1402,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1454,14 +1454,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1506,14 +1506,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
@@ -1558,14 +1558,14 @@ exports[`<Grantees /> renders unchanged 1`] = `
                   class="MuiStack-root css-1dfn4ft-MuiStack-root"
                 >
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall css-1gpic4i-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSuccess css-1gpic4i-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
                     Constitutional changes of government
                   </div>
                   <div
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall css-nvlyoy-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError MuiButton-root MuiButton-contained MuiButton-containedError MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorError css-nvlyoy-MuiButtonBase-root-MuiButton-root"
                     role="button"
                     tabindex="0"
                   >
diff --git a/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js b/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
index 6e66d9719..6b07771bb 100644
--- a/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
+++ b/apps/charterafrica/src/components/GuidingPrinciples/GuidingPrinciples.snap.js
@@ -14,7 +14,7 @@ exports[`<GuidingPrinciples /> renders unchanged 1`] = `
         Guiding Principles
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388c3ebe92a85650e8051-content"
@@ -107,7 +107,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388e0ebe92a85650e8052-content"
@@ -200,7 +200,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f388f9ebe92a85650e8053-content"
@@ -293,7 +293,7 @@ Himenaeos est aenean ut torquent curabitur curae fames mus, condimentum accumsan
         </div>
       </div>
       <div
-        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-vnp0of-MuiPaper-root-MuiAccordion-root"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root css-1qt8l5p-MuiPaper-root-MuiAccordion-root"
       >
         <div
           aria-controls="panel-63f38902ebe92a85650e8054-content"
diff --git a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
index d63326f9e..911efc00e 100644
--- a/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
+++ b/apps/charterafrica/src/components/Helpdesk/Helpdesk.snap.js
@@ -48,7 +48,7 @@ We can help you find specialists or resources to improve the impact of your demo
             </p>
           </div>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall css-nfs84b-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-nfs84b-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
diff --git a/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js b/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
index 589916019..587d45cc2 100644
--- a/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
+++ b/apps/charterafrica/src/components/HelpdeskPageContent/HelpdeskPageContent.snap.js
@@ -27,7 +27,7 @@ We can help you find specialists or resources to improve the impact of your demo
           </p>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall css-16if9ml-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-16if9ml-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
diff --git a/apps/charterafrica/src/components/Hero/Hero.snap.js b/apps/charterafrica/src/components/Hero/Hero.snap.js
index 61bd4f3ee..eb046b4c2 100644
--- a/apps/charterafrica/src/components/Hero/Hero.snap.js
+++ b/apps/charterafrica/src/components/Hero/Hero.snap.js
@@ -48,12 +48,12 @@ exports[`<Hero /> renders unchanged 1`] = `
                   class="MuiBox-root css-187jlgp"
                 >
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall css-po1nsg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-po1nsg-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
                     >
                       <figure
                         class="MuiBox-root css-zmiex6"
@@ -72,12 +72,12 @@ exports[`<Hero /> renders unchanged 1`] = `
                     Explore software
                   </button>
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall css-po1nsg-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-po1nsg-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
                     <span
-                      class="MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
+                      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeSmall css-cstir9-MuiButton-startIcon"
                     >
                       <figure
                         class="MuiBox-root css-zmiex6"
diff --git a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
index 665653fdc..cf4aa3e95 100644
--- a/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
+++ b/apps/charterafrica/src/components/LanguageButton/LanguageButton.snap.js
@@ -3,12 +3,12 @@
 exports[`<LanguageButton /> renders unchanged 1`] = `
 <div>
   <button
-    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-12ath6l-MuiButtonBase-root-MuiButton-root"
+    class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-12ath6l-MuiButtonBase-root-MuiButton-root"
     tabindex="0"
     type="button"
   >
     <span
-      class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+      class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
     >
       <div
         aria-hidden="true"
@@ -19,7 +19,7 @@ exports[`<LanguageButton /> renders unchanged 1`] = `
     </span>
     en
     <span
-      class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+      class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
     >
       <div
         aria-hidden="true"
diff --git a/apps/charterafrica/src/components/Layout/Layout.snap.js b/apps/charterafrica/src/components/Layout/Layout.snap.js
index 956bb6599..4035dda4e 100644
--- a/apps/charterafrica/src/components/Layout/Layout.snap.js
+++ b/apps/charterafrica/src/components/Layout/Layout.snap.js
@@ -125,12 +125,12 @@ exports[`<Layout /> renders unchanged 1`] = `
                 class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-12ath6l-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-12ath6l-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
                   <span
-                    class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+                    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
                   >
                     <div
                       aria-hidden="true"
@@ -141,7 +141,7 @@ exports[`<Layout /> renders unchanged 1`] = `
                   </span>
                   en
                   <span
-                    class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
                   >
                     <div
                       aria-hidden="true"
diff --git a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
index fa0bb3035..134ec0fa4 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/NextPrevPagination.snap.js
@@ -12,7 +12,7 @@ exports[`<NextPrevPagination /> renders unchanged 1`] = `
         class="MuiBox-root css-0"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall css-cqffet-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-cqffet-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
diff --git a/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js b/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
index 2b8ae860a..d9ed37443 100644
--- a/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
+++ b/apps/charterafrica/src/components/NextPrevPagination/PaginationButton.snap.js
@@ -6,7 +6,7 @@ exports[`<PaginationButton /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall css-cqffet-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorSecondary css-cqffet-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
index f966b2ced..6a8f5faec 100644
--- a/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
+++ b/apps/charterafrica/src/components/Opportunity/Opportunity.snap.js
@@ -63,7 +63,7 @@ exports[`<Opportunity /> renders unchanged 1`] = `
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             >
               <a
-                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-16rmfqp-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+                class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-16rmfqp-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
                 href="/opportunities/felloships/grants/research-title-goes-here-and-spans-over-second-line"
                 tabindex="0"
               >
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
index c6edf8008..066d86f1d 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCardHeader.snap.js
@@ -18,7 +18,7 @@ exports[`<OpportunityCardHeader /> renders unchanged 1`] = `
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6 css-hj0fj-MuiGrid-root"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-11705ea-MuiButtonBase-root-MuiButton-root"
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-11705ea-MuiButtonBase-root-MuiButton-root"
         tabindex="0"
         type="button"
       >
diff --git a/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js b/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
index 2080da958..838af722b 100644
--- a/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
+++ b/apps/charterafrica/src/components/OpportunityCards/OpportunityCards.snap.js
@@ -21,7 +21,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6 css-hj0fj-MuiGrid-root"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-11705ea-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-11705ea-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
@@ -193,7 +193,7 @@ exports[`<OpportunityCards /> renders unchanged 1`] = `
       </div>
     </div>
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
diff --git a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
index b5e7c97c1..08982aaa6 100644
--- a/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
+++ b/apps/charterafrica/src/components/OpportunityPage/OpportunityPage.snap.js
@@ -49,7 +49,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6 css-hj0fj-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-11705ea-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-11705ea-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -121,7 +121,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
@@ -150,7 +150,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6 css-hj0fj-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-11705ea-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-11705ea-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -222,7 +222,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
@@ -251,7 +251,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-md-6 css-hj0fj-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-11705ea-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-11705ea-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -323,7 +323,7 @@ exports[`<OpportunityPage /> renders unchanged 1`] = `
           </div>
         </div>
         <button
-          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-x9l3sw-MuiButtonBase-root-MuiButton-root"
           tabindex="0"
           type="button"
         >
diff --git a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
index 9faad6639..b7120dbfb 100644
--- a/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
+++ b/apps/charterafrica/src/components/OrganisationCard/OrganisationImageLink.snap.js
@@ -3,7 +3,7 @@
 exports[`<OrganisationImageCard /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineNone MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary active css-1iugyn0-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     href="https://charter.africa"
     rel="noreferrer noopener"
     tabindex="0"
diff --git a/apps/charterafrica/src/components/Switch/Switch.snap.js b/apps/charterafrica/src/components/Switch/Switch.snap.js
index 673b839b3..1343ea3d5 100644
--- a/apps/charterafrica/src/components/Switch/Switch.snap.js
+++ b/apps/charterafrica/src/components/Switch/Switch.snap.js
@@ -6,7 +6,7 @@ exports[`<Switch /> renders unchanged 1`] = `
     class="MuiSwitch-root MuiSwitch-sizeMedium css-b208sr-MuiSwitch-root"
   >
     <span
-      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-1sd4tst-MuiButtonBase-root-MuiSwitch-switchBase"
+      class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-159eovs-MuiButtonBase-root-MuiSwitch-switchBase"
     >
       <input
         class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
diff --git a/apps/charterafrica/src/components/Tool/Tool.snap.js b/apps/charterafrica/src/components/Tool/Tool.snap.js
index 0327428d1..d65a87180 100644
--- a/apps/charterafrica/src/components/Tool/Tool.snap.js
+++ b/apps/charterafrica/src/components/Tool/Tool.snap.js
@@ -186,7 +186,7 @@ exports[`<Tool /> renders unchanged 1`] = `
             class="MuiBox-root css-11uk14q"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-qy1l2s-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-qy1l2s-MuiButtonBase-root-MuiButton-root"
               href=""
               tabindex="0"
               target="_blank"
@@ -225,12 +225,12 @@ exports[`<Tool /> renders unchanged 1`] = `
                 class="MuiAvatarGroup-root css-1qcltu-MuiAvatarGroup-root"
               >
                 <div
-                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-19wzxzv-MuiAvatar-root-MuiAvatarGroup-avatar"
+                  class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-x2fwd7-MuiAvatar-root"
                 >
                   +26
                 </div>
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-6bqc4m-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1yxemuo-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
@@ -246,7 +246,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </svg>
                 </a>
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-6bqc4m-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1yxemuo-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
@@ -262,7 +262,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </svg>
                 </a>
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-6bqc4m-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1yxemuo-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
@@ -278,7 +278,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                   </svg>
                 </a>
                 <a
-                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-6bqc4m-MuiTypography-root-MuiLink-root-MuiAvatar-root"
+                  class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar active css-1yxemuo-MuiTypography-root-MuiLink-root-MuiAvatar-root"
                   href=""
                 >
                   <svg
@@ -383,7 +383,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         A JavaScript library for building user interfaces
                       </div>
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1qxgac-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1qxgac-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       />
@@ -470,7 +470,7 @@ exports[`<Tool /> renders unchanged 1`] = `
                         A JavaScript runtime built on Chrome's V8 JavaScript engine.
                       </div>
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1qxgac-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1qxgac-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       />
diff --git a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
index cc50e2dbe..ceabc667e 100644
--- a/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
+++ b/apps/charterafrica/src/components/ToolCard/ToolCard.snap.js
@@ -73,7 +73,7 @@ exports[`<ToolCard /> renders unchanged 1`] = `
               Sample description
             </div>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1qxgac-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1qxgac-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             />
diff --git a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
index 27c129d52..e60982c29 100644
--- a/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
+++ b/apps/charterafrica/src/components/YoutubeVideoPlayer/YoutubeVideoPlayer.snap.js
@@ -110,6 +110,7 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
         <button
           aria-disabled="false"
           class="vjs-skip-forward-undefined vjs-control vjs-button vjs-hidden"
+          title="Skip Forward"
           type="button"
         >
           <span
@@ -119,7 +120,9 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
           <span
             aria-live="polite"
             class="vjs-control-text"
-          />
+          >
+            Skip Forward
+          </span>
         </button>
         <div
           class="vjs-volume-panel vjs-control vjs-volume-panel-horizontal"
@@ -564,6 +567,7 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
         aria-describedby="vjs_video_3_component_503_description"
         aria-hidden="true"
         aria-label="Modal Window"
+        aria-live="polite"
         class="vjs-error-display vjs-modal-dialog vjs-hidden "
         role="dialog"
         tabindex="-1"
@@ -583,6 +587,7 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
         aria-describedby="vjs_video_3_component_509_description"
         aria-hidden="true"
         aria-label="Caption Settings Dialog"
+        aria-live="polite"
         class="vjs-modal-dialog vjs-hidden  vjs-text-track-settings"
         role="dialog"
         tabindex="-1"
@@ -613,12 +618,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_535"
                   id="captions-foreground-color-vjs_video_3_component_509"
                 >
                   Color
                 </label>
                 <select
                   aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509"
+                  id="vjs_select_535"
                 >
                   <option
                     aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509 captions-foreground-color-vjs_video_3_component_509-White"
@@ -683,12 +690,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_536"
                   id="captions-foreground-opacity-vjs_video_3_component_509"
                 >
                   Opacity
                 </label>
                 <select
                   aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509"
+                  id="vjs_select_536"
                 >
                   <option
                     aria-labelledby="captions-text-legend-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509 captions-foreground-opacity-vjs_video_3_component_509-Opaque"
@@ -720,12 +729,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_537"
                   id="captions-background-color-vjs_video_3_component_509"
                 >
                   Color
                 </label>
                 <select
                   aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509"
+                  id="vjs_select_537"
                 >
                   <option
                     aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509 captions-background-color-vjs_video_3_component_509-Black"
@@ -790,12 +801,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_538"
                   id="captions-background-opacity-vjs_video_3_component_509"
                 >
                   Opacity
                 </label>
                 <select
                   aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509"
+                  id="vjs_select_538"
                 >
                   <option
                     aria-labelledby="captions-background-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509 captions-background-opacity-vjs_video_3_component_509-Opaque"
@@ -834,12 +847,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_539"
                   id="captions-window-color-vjs_video_3_component_509"
                 >
                   Color
                 </label>
                 <select
                   aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509"
+                  id="vjs_select_539"
                 >
                   <option
                     aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509 captions-window-color-vjs_video_3_component_509-Black"
@@ -904,12 +919,14 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               >
                 <label
                   class="vjs-label"
+                  for="vjs_select_540"
                   id="captions-window-opacity-vjs_video_3_component_509"
                 >
                   Opacity
                 </label>
                 <select
                   aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509"
+                  id="vjs_select_540"
                 >
                   <option
                     aria-labelledby="captions-window-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509 captions-window-opacity-vjs_video_3_component_509-Transparent"
@@ -943,13 +960,13 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               class="vjs-font-percent vjs-track-setting"
             >
               <legend
-                class=""
                 id="captions-font-size-vjs_video_3_component_509"
               >
                 Font Size
               </legend>
               <select
                 aria-labelledby="captions-font-size-vjs_video_3_component_509"
+                id="vjs_select_541"
               >
                 <option
                   aria-labelledby="captions-font-size-vjs_video_3_component_509 captions-font-size-vjs_video_3_component_509-50"
@@ -1020,13 +1037,13 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               class="vjs-edge-style vjs-track-setting"
             >
               <legend
-                class=""
                 id="vjs_video_3_component_509"
               >
                 Text Edge Style
               </legend>
               <select
                 aria-labelledby="vjs_video_3_component_509"
+                id="vjs_select_542"
               >
                 <option
                   aria-labelledby="vjs_video_3_component_509 vjs_video_3_component_509-None"
@@ -1069,13 +1086,13 @@ exports[`<YoutubeVideoPlayer /> renders unchanged 1`] = `
               class="vjs-font-family vjs-track-setting"
             >
               <legend
-                class=""
                 id="captions-font-family-vjs_video_3_component_509"
               >
                 Font Family
               </legend>
               <select
                 aria-labelledby="captions-font-family-vjs_video_3_component_509"
+                id="vjs_select_543"
               >
                 <option
                   aria-labelledby="captions-font-family-vjs_video_3_component_509 captions-font-family-vjs_video_3_component_509-ProportionalSansSerif"
diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
index 22e230ef0..4b8166579 100644
--- a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
+++ b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
@@ -34,11 +34,11 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         Article
       </div>
       <div
-        class="MuiToggleButtonGroup-root css-10sq1fj-MuiToggleButtonGroup-root"
+        class="MuiToggleButtonGroup-root css-h89xvq-MuiToggleButtonGroup-root"
         role="group"
       >
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-z7fpuu-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-z7fpuu-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
           href="/tag1?tag=tag2"
           tabindex="0"
           value="tag2"
diff --git a/apps/codeforafrica/src/components/Articles/Articles.snap.js b/apps/codeforafrica/src/components/Articles/Articles.snap.js
index acb6cbc5a..51b1aeb70 100644
--- a/apps/codeforafrica/src/components/Articles/Articles.snap.js
+++ b/apps/codeforafrica/src/components/Articles/Articles.snap.js
@@ -64,11 +64,11 @@ exports[`<Articles /> renders unchanged 1`] = `
               </div>
             </div>
             <div
-              class="MuiToggleButtonGroup-root css-czr1qx-MuiToggleButtonGroup-root"
+              class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
               role="group"
             >
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-12piyyp-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="All"
@@ -80,7 +80,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag1"
@@ -92,7 +92,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                 </span>
               </div>
               <div
-                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-4r2hgb-MuiButtonBase-root-MuiChip-root"
+                class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
                 role="button"
                 tabindex="0"
                 value="tag2"
@@ -146,7 +146,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                       Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.
                     </p>
                     <button
-                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1it8s17-MuiButtonBase-root-MuiButton-root"
+                      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1it8s17-MuiButtonBase-root-MuiButton-root"
                       tabindex="0"
                       type="button"
                     >
@@ -174,7 +174,7 @@ exports[`<Articles /> renders unchanged 1`] = `
                         Battle for gender equality in African media continues
                       </h1>
                       <button
-                        class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge css-18nvokw-MuiButtonBase-root-MuiButton-root"
+                        class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-MuiButtonBase-root-MuiButton-root"
                         tabindex="0"
                         type="button"
                       >
@@ -245,7 +245,7 @@ exports[`<Articles /> renders unchanged 1`] = `
           class="MuiBox-root css-0"
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ahypso-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1ahypso-MuiButtonBase-root-MuiButton-root"
             tabindex="0"
             type="button"
           >
diff --git a/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js b/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
index f7645266e..1f9631e54 100644
--- a/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
+++ b/apps/codeforafrica/src/components/ChoiceChipGroup/ChoiceChipGroup.snap.js
@@ -3,7 +3,7 @@
 exports[`<ChoiceChipGroup /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiToggleButtonGroup-root css-1129uwk-MuiToggleButtonGroup-root"
+    class="MuiToggleButtonGroup-root css-vw6mhb-MuiToggleButtonGroup-root"
     role="group"
   />
 </div>
diff --git a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
index 0fa31596b..2a9756807 100644
--- a/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
+++ b/apps/codeforafrica/src/components/FeaturedArticle/FeaturedArticle.snap.js
@@ -39,7 +39,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
               Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.
             </p>
             <button
-              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1it8s17-MuiButtonBase-root-MuiButton-root"
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1it8s17-MuiButtonBase-root-MuiButton-root"
               tabindex="0"
               type="button"
             >
@@ -67,7 +67,7 @@ exports[`<FeaturedArticle /> renders unchanged 1`] = `
                 Battle for gender equality in African media continues
               </h1>
               <button
-                class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge css-18nvokw-MuiButtonBase-root-MuiButton-root"
+                class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-MuiButtonBase-root-MuiButton-root"
                 tabindex="0"
                 type="button"
               >
diff --git a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
index c1a7153f9..5a42ea103 100644
--- a/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
+++ b/apps/codeforafrica/src/components/FilterBar/FilterBar.snap.js
@@ -48,11 +48,11 @@ exports[`<FilterBar /> renders unchanged 1`] = `
       </div>
     </div>
     <div
-      class="MuiToggleButtonGroup-root css-czr1qx-MuiToggleButtonGroup-root"
+      class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
       role="group"
     >
       <div
-        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-12piyyp-MuiButtonBase-root-MuiChip-root"
+        class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
         role="button"
         tabindex="0"
         value="tag"
diff --git a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
index b11a05f2b..b52d83f65 100644
--- a/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
+++ b/apps/codeforafrica/src/components/GetInTouch/GetInTouch.snap.js
@@ -22,12 +22,12 @@ exports[`<GetInTouch /> renders unchanged 1`] = `
           We'd love to hear more.
         </div>
         <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge css-1bvv08-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-colorPrimary css-1bvv08-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
           href="/contact"
           tabindex="0"
         >
           <span
-            class="MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
+            class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeLarge css-vpap0f-MuiButton-startIcon"
           >
             <div
               aria-hidden="true"
diff --git a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
index ab057c31b..d619701d1 100644
--- a/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
+++ b/apps/codeforafrica/src/components/GetInvolved/GetInvolved.snap.js
@@ -61,7 +61,7 @@ exports[`<GetInvolved /> renders unchanged 1`] = `
         </div>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-dlpjkq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-dlpjkq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/contact"
         tabindex="0"
       >
diff --git a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
index 484c4b3b7..fe35739b4 100644
--- a/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
+++ b/apps/codeforafrica/src/components/MeetOurTeam/MeetOurTeam.snap.js
@@ -32,7 +32,7 @@ exports[`<MeetOurTeam /> renders unchanged 1`] = `
             </span>
           </div>
           <a
-            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-1oeh6fq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+            class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-cuycut-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
             href="/about#our-team"
             tabindex="0"
           >
diff --git a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
index 52fc3831c..e8b726bc9 100644
--- a/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
+++ b/apps/codeforafrica/src/components/NewsAndStories/NewsAndStories.snap.js
@@ -50,7 +50,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
                   Lorem ipsum dolor sit amet consectetur adipiscing elit mattis, vestibulum potenti rhoncus eget lacus fermentum taciti quam, quis curae accumsan viverra semper dapibus sed.
                 </p>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1it8s17-MuiButtonBase-root-MuiButton-root"
+                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1it8s17-MuiButtonBase-root-MuiButton-root"
                   tabindex="0"
                   type="button"
                 >
@@ -78,7 +78,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
                     Battle for gender equality in African media continues
                   </h1>
                   <button
-                    class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge css-18nvokw-MuiButtonBase-root-MuiButton-root"
+                    class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeLarge MuiButton-contained-reverseSizeLarge MuiButton-colorPrimary css-exvu7h-MuiButtonBase-root-MuiButton-root"
                     tabindex="0"
                     type="button"
                   >
@@ -94,7 +94,7 @@ exports[`<NewsAndStories /> renders unchanged 1`] = `
         </a>
       </div>
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-dm3c7w-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-dm3c7w-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="/stories"
         tabindex="0"
       >
diff --git a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
index cb5d5ae88..047f7aa53 100644
--- a/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
+++ b/apps/codeforafrica/src/components/NextPreviousPagination/PaginationButton.snap.js
@@ -6,12 +6,12 @@ exports[`<PaginationButton /> renders unchanged 1`] = `
     class="MuiBox-root css-0"
   >
     <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ahypso-MuiButtonBase-root-MuiButton-root"
+      class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-1ahypso-MuiButtonBase-root-MuiButton-root"
       tabindex="0"
       type="button"
     >
       <span
-        class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
+        class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon"
       >
         <div
           aria-hidden="true"
diff --git a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
index b276c3e59..9c399b87e 100644
--- a/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
+++ b/apps/codeforafrica/src/components/Opportunities/Opportunities.snap.js
@@ -53,11 +53,11 @@ exports[`<Opportunities /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiToggleButtonGroup-root css-czr1qx-MuiToggleButtonGroup-root"
+          class="MuiToggleButtonGroup-root css-yajo80-MuiToggleButtonGroup-root"
           role="group"
         >
           <div
-            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-clickable MuiChip-clickableColorPrimary MuiChip-filledPrimary MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal css-12piyyp-MuiButtonBase-root-MuiChip-root"
+            class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-4r2hgb-MuiButtonBase-root-MuiChip-root"
             role="button"
             tabindex="0"
             value="All"
diff --git a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
index d92573d55..ab38d3909 100644
--- a/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCard/OpportunityCard.snap.js
@@ -39,10 +39,10 @@ exports[`<OpportunityCard /> renders unchanged 1`] = `
         </section>
       </div>
       <div
-        class="MuiCardActions-root MuiCardActions-spacing css-14r9scr-MuiCardActions-root"
+        class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
       >
         <div
-          class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-12i2l1x-MuiButtonBase-root-MuiButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-8zqic2-MuiButtonBase-root-MuiButton-root"
           role="button"
           tabindex="0"
         >
diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
index e11a2e414..1bd316b36 100644
--- a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
+++ b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -42,10 +42,10 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
           </section>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-14r9scr-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1u29npa-MuiCardActions-root"
         >
           <div
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-12i2l1x-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-8zqic2-MuiButtonBase-root-MuiButton-root"
             role="button"
             tabindex="0"
           />
diff --git a/apps/codeforafrica/src/components/Project/Project.snap.js b/apps/codeforafrica/src/components/Project/Project.snap.js
index 807d4498c..d8f397724 100644
--- a/apps/codeforafrica/src/components/Project/Project.snap.js
+++ b/apps/codeforafrica/src/components/Project/Project.snap.js
@@ -140,10 +140,10 @@ exports[`<Project /> renders unchanged 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1jzc3k6-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium active css-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary active css-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
               rel="noreferrer noopener"
               tabindex="0"
@@ -151,7 +151,7 @@ exports[`<Project /> renders unchanged 1`] = `
             >
               Launch Project
               <span
-                class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"
diff --git a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
index dcebef7a4..577eaf383 100644
--- a/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
+++ b/apps/codeforafrica/src/components/ProjectCard/ProjectCard.snap.js
@@ -43,10 +43,10 @@ exports[`<ProjectCard /> renders unchanged 1`] = `
           </div>
         </div>
         <div
-          class="MuiCardActions-root MuiCardActions-spacing css-1jzc3k6-MuiCardActions-root"
+          class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
         >
           <div
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium css-9lbve9-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained-reverse MuiButton-contained-reversePrimary MuiButton-sizeMedium MuiButton-contained-reverseSizeMedium MuiButton-colorPrimary css-1witir2-MuiButtonBase-root-MuiButton-root"
             role="button"
             tabindex="0"
           >
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
index 61cfca9f5..34c7131cb 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescription.snap.js
@@ -14,7 +14,7 @@ exports[`<ProjectDescription /> renders unchanged 1`] = `
       class="MuiStack-root css-5vyr5n-MuiStack-root"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall css-eljsgr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-eljsgr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
         href="https://github.com/CodeForAfrica"
         rel="noreferrer noopener"
         tabindex="0"
diff --git a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
index c356d3c24..745054de5 100644
--- a/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
+++ b/apps/codeforafrica/src/components/ProjectDetails/ProjectDescriptionButton.snap.js
@@ -3,7 +3,7 @@
 exports[`<ProjectDescriptionButton /> renders unchanged 1`] = `
 <div>
   <a
-    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall css-eljsgr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+    class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary MuiButton-sizeSmall MuiButton-outlinedSizeSmall MuiButton-colorPrimary css-eljsgr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
     content="Github"
     href="https://github.com/CodeForAfrica"
     rel="noreferrer noopener"
diff --git a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
index b2b35983a..219546c46 100644
--- a/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
+++ b/apps/codeforafrica/src/components/ProjectPageHeader/ProjectPageHeader.snap.js
@@ -106,10 +106,10 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             </div>
           </div>
           <div
-            class="MuiCardActions-root MuiCardActions-spacing css-1jzc3k6-MuiCardActions-root"
+            class="MuiCardActions-root MuiCardActions-spacing css-1to78gr-MuiCardActions-root"
           >
             <a
-              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium active css-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
+              class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary active css-1wyu7kr-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiButton-root"
               href="https://codeforafrica.org"
               rel="noreferrer noopener"
               tabindex="0"
@@ -117,7 +117,7 @@ exports[`<ProjectPageHeader /> renders unchanged 1`] = `
             >
               Launch Project
               <span
-                class="MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
+                class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-1gnd1fd-MuiButton-endIcon"
               >
                 <div
                   aria-hidden="true"